Merge pull request #31 from once-ui-system/1.5.3

Features
- Bulge + WeatherFx custom triggers
- Zoom cursor on Media enlarge and mproved image rendering
- MegaMenu transition refined
- Chart axis reverse positions
- ShineFx inverse prop for inverting effect
- "sharp" shape added to StylePanel
- custom icon in Avatar

New
- CelebrationFx: for confetti and fireworks
- RadialGauge and LinearGauge components for meters

Fixes
- add default minHeight to charts instead of height

Author: lorant-one

apps/docs/src/app/page.tsx

@@ -13,7 +13,9 @@ import {
   Meta,
   Schema,
   MatrixFx,
-  Background
+  Background,
+  Pulse,
+  ShineFx
 } from "@once-ui-system/core";
 import { baseURL, meta, schema, changelog, roadmap, layout } from "@/resources";
 import { formatDate } from "./utils/formatDate";
@@ -89,7 +91,7 @@ export default function Home() {
               top="0"
               left="0"
               flicker
-              colors={["brand-solid-strong"]} 
+              colors={["brand-solid-strong"]}
               bulge={{
                 type: "wave",
                 duration: 3,
@@ -101,20 +103,27 @@ export default function Home() {
             <Column fillWidth gap="16" padding="48">
               <Badge
                 background="overlay"
+                style={{backdropFilter: "blue(0.25rem)"}}
                 paddingLeft="8"
-                paddingRight="20"
-                paddingY="8"
-                effect={false}
-                border="neutral-alpha-weak"
-                shadow={undefined}
+                paddingRight="4"
+                border="brand-alpha-weak"
+                arrow={false}
+                paddingY="4"
                 href="/changelog"
-                vertical="center"
-                radius="l"
               >
-                <Tag marginRight="12" variant="brand">NEW</Tag>
-                <Text variant="label-default-s">
-                  Once UI 1.5 — Curiosity in code
-                </Text>
+                <Row vertical="center">
+                  <Pulse size="s"/>
+                  <Row
+                    marginLeft="12"
+                    textVariant="label-default-s"
+                    onBackground="brand-medium"
+                    gap="8"
+                    vertical="center"
+                  >
+                    <Text weight="strong" onBackground="brand-strong">Once UI 1.5</Text> Curiosity in code
+                    <Tag variant="brand" data-border="rounded"><ShineFx speed={2} baseOpacity={0.8}>New</ShineFx></Tag>
+                  </Row>
+                </Row>
               </Badge>
               <Heading variant="display-strong-m" marginTop="12">
                 Once UI Docs

apps/docs/src/content/once-ui/components/avatar.mdx

@@ -6,6 +6,8 @@ docs: "once-ui/components/avatar.mdx"
 github: "components/Avatar.tsx"
 navLabel: "Avatar"
 navIcon: "components"
+navTag: "Update"
+navTagVariant: "indigo"
 ---
 
 A versatile component for displaying user profile images, initials, or fallback icons in a circular container. Commonly used in user interfaces to represent people.
@@ -34,6 +36,50 @@ A versatile component for displaying user profile images, initials, or fallback
   ]}
 />
 
+## Empty
+
+Use the `empty` prop to render an empty avatar.
+
+<CodeBlock
+  marginTop="16"
+  marginBottom="24"
+  preview={
+    <Row gap="16" horizontal="center">
+      <Avatar size="l" empty />
+    </Row>
+  }
+  codes={[
+    {
+      code:
+`<Avatar size="l" empty />`,
+      language: "tsx",
+      label: "Empty"
+    }
+  ]}
+/>
+
+## Icon
+
+Use the `icon` prop to render an icon in the avatar.
+
+<CodeBlock
+  marginTop="16"
+  marginBottom="24"
+  preview={
+    <Row gap="16" horizontal="center">
+      <Avatar size="l" icon="sparkle" />
+    </Row>
+  }
+  codes={[
+    {
+      code:
+`<Avatar size="l" icon="sparkle" />`,
+      language: "tsx",
+      label: "Icon"
+    }
+  ]}
+/>
+
 ## Sizes
 
 Use the T-shirt size model or set sizes with numbers (REM).
@@ -143,6 +189,7 @@ Use the T-shirt size model or set sizes with numbers (REM).
     ["size", ["xs", "s", "m", "l", "xl", "number"], "m"],
     ["value", "string"],
     ["src", "string"],
+    ["icon", "string"],
     ["loading", "boolean", "false"],
     ["empty", "boolean", "false"],
     ["statusIndicator", "object"],

apps/docs/src/content/once-ui/components/media.mdx

@@ -16,6 +16,7 @@ navIcon: "components"
   preview={
     <Media
       priority
+      sizes="(max-width: 768px) 100vw, 768px"
       src="/images/docs/once-ui/vibe-coding-light.jpg"
       alt="Preview"
       radius="xl"
@@ -28,6 +29,7 @@ navIcon: "components"
 `<Media
     src="/image.jpg"
     alt="Preview"
+    sizes="(max-width: 768px) 100vw, 768px"
     radius="xl"
     border="neutral-alpha-medium"
 />`,
@@ -49,6 +51,7 @@ Show a skeleton block while content is loading. Only works when `aspectRatio` is
       loading
       radius="l"
       aspectRatio="16/9"
+      sizes="(max-width: 768px) 100vw, 768px"
       src="/images/docs/once-ui/vibe-coding-light.jpg"
     />
   }
@@ -79,6 +82,7 @@ The `caption` prop renders a `ReactNode` below the image, making it easy to prov
       <Media
         caption="Vibe code with Quasar! The time is now."
         src="/images/docs/once-ui/vibe-coding-light.jpg"
+        sizes="(max-width: 768px) 100vw, 768px"
         alt="Preview"
         radius="xl"
         border="neutral-alpha-medium"
@@ -109,6 +113,7 @@ Enable full-screen zooming for images and videos.
   enlarge
   radius="l"
   marginTop="16"
+  sizes="(max-width: 768px) 100vw, 768px"
   src="/images/docs/once-ui/vibe-coding-light.jpg"
 />
 

apps/docs/src/content/once-ui/components/segmentedControl.mdx

@@ -6,6 +6,8 @@ docs: "once-ui/components/segmentedControl.mdx"
 github: "components/SegmentedControl.tsx"
 navLabel: "Segmented Control"
 navIcon: "components"
+navTag: "Update"
+navTagVariant: "indigo"
 ---
 
 Use this component for toggle-style selection between discrete options. It supports keyboard interaction, styling, and controlled or uncontrolled usage.
@@ -41,9 +43,48 @@ Use this component for toggle-style selection between discrete options. It suppo
   ]}
 />
 
-## Default selected
+## External state
 
-Use `defaultSelected` to define an initial active button in uncontrolled mode.
+Use `selected` to manage the selected state from the parent.
+
+<CodeBlock
+  marginTop="16"
+  marginBottom="24"
+  preview={
+    <Row fillWidth horizontal="center">
+      <SegmentedControl
+        fillWidth={false}
+        selected="month"
+        buttons={[
+          { value: "day", label: "Day" },
+          { value: "week", label: "Week" },
+          { value: "month", label: "Month" },
+        ]}
+      />
+      </Row>
+  }
+  codes={[
+    {
+      code:
+`<SegmentedControl
+    fillWidth={false}
+    selected="month"
+    buttons={[
+      { value: "day", label: "Day" },
+      { value: "week", label: "Week" },
+      { value: "month", label: "Month" },
+    ]}
+    onToggle={(value) => console.log(value)}
+/>`,
+      language: "tsx",
+      label: "External state"
+    }
+  ]}
+/>
+
+## Internal state
+
+Use `defaultSelected` to define an initial active button in uncontrolled mode. Don't use it along with the `selected` prop.
 
 <CodeBlock
   marginTop="16"
@@ -75,7 +116,46 @@ Use `defaultSelected` to define an initial active button in uncontrolled mode.
     onToggle={(value) => console.log(value)}
 />`,
       language: "tsx",
-      label: "Default selected"
+      label: "Internal state"
+    }
+  ]}
+/>
+
+## Compact
+
+Use `compact` to create a compact variant.
+
+<CodeBlock
+  marginTop="16"
+  marginBottom="24"
+  preview={
+    <Row fillWidth horizontal="center">
+      <SegmentedControl
+        compact
+        defaultSelected="week"
+        buttons={[
+          { value: "day", label: "Day" },
+          { value: "week", label: "Week" },
+          { value: "month", label: "Month" },
+        ]}
+      />
+      </Row>
+  }
+  codes={[
+    {
+      code:
+`<SegmentedControl
+    compact
+    defaultSelected="week"
+    buttons={[
+      { value: "day", label: "Day" },
+      { value: "week", label: "Week" },
+      { value: "month", label: "Month" },
+    ]}
+    onToggle={(value) => console.log(value)}
+/>`,
+      language: "tsx",
+      label: "Compact"
     }
   ]}
 />