@once-ui-system/core 1.7.13 → 1.8.1

package/ai/components/Banner.json

@@ -2,8 +2,8 @@
  "name": "Banner",
  "group": "components",
  "extends": [
-  "Flex",
-  "Row"
+  "Row",
+  "Flex"
  ],
  "mixins": [
   "CommonProps",

package/ai/components/BlobFx.json

@@ -2,8 +2,8 @@
  "name": "BlobFx",
  "group": "components",
  "extends": [
-  "Flex",
-  "Row"
+  "Row",
+  "Flex"
  ],
  "mixins": [
   "CommonProps",

package/ai/components/Carousel.json

@@ -21,6 +21,7 @@
   "translateY": "SpacingToken | number",
   "aspectRatio": "string = original",
   "sizes": "string",
+  "unoptimized": "boolean = false",
   "revealedByDefault": "boolean = false",
   "thumbnail": "ThumbnailItem = { scaling: 1, height: \"80\", sizes: \"120px\" }",
   "play": "{ auto?: boolean; interval?: number; controls?: boolean; progress?: boolean; } = { auto: false, interval: 3000, controls: true }"

package/ai/components/ChartHeader.json

@@ -2,8 +2,8 @@
  "name": "ChartHeader",
  "group": "modules",
  "extends": [
-  "Flex",
-  "Column"
+  "Column",
+  "Flex"
  ],
  "mixins": [
   "CommonProps",

package/ai/components/Checkbox.json

@@ -7,7 +7,8 @@
  "props": {
   "isChecked": "boolean",
   "isIndeterminate": "boolean = false",
-  "onToggle": "() => void"
+  "onToggle": "() => void",
+  "hoverable": "boolean = true"
  },
  "mixinsRef": []
 }

package/ai/components/CompareImage.json

@@ -15,7 +15,8 @@
  "props": {
   "leftContent": "!SideContent",
   "rightContent": "!SideContent",
-  "aspectRatio": "string"
+  "aspectRatio": "string",
+  "unoptimized": "boolean"
  },
  "mixinsRef": [
   "CommonProps",

package/ai/components/Dialog.json

@@ -21,6 +21,8 @@
   "footer": "ReactNode",
   "base": "boolean",
   "stack": "boolean",
+  "flush": "boolean = false",
+  "hideClose": "boolean = false",
   "onHeightChange": "(height: number) => void",
   "minHeight": "number",
   "closeOnClickaway": "boolean = true"

package/ai/components/HoverCard.json

@@ -2,8 +2,8 @@
  "name": "HoverCard",
  "group": "components",
  "extends": [
-  "Flex",
-  "Animation"
+  "Animation",
+  "Flex"
  ],
  "mixins": [
   "CommonProps",

package/ai/components/InfiniteScroll.json

@@ -2,8 +2,8 @@
  "name": "InfiniteScroll",
  "group": "components",
  "extends": [
-  "Flex",
-  "Row"
+  "Row",
+  "Flex"
  ],
  "mixins": [
   "CommonProps",

package/ai/components/OgCard.json

@@ -2,8 +2,8 @@
  "name": "OgCard",
  "group": "components",
  "extends": [
-  "Flex",
-  "Card"
+  "Card",
+  "Flex"
  ],
  "mixins": [
   "CommonProps",
@@ -16,6 +16,7 @@
  "props": {
   "url": "string",
   "sizes": "string = 320px",
+  "unoptimized": "boolean = false",
   "size": "CondensedTShirtSizes = m",
   "ogData": "Partial<OgData> | null",
   "direction": "\"column\" | \"row\" | \"column-reverse\" | \"row-reverse\" = column",

package/ai/components/RadioButton.json

@@ -11,7 +11,8 @@
   "name": "string",
   "value": "string",
   "disabled": "boolean",
-  "onToggle": "() => void"
+  "onToggle": "() => void",
+  "hoverable": "boolean = true"
  },
  "mixinsRef": []
 }

package/ai/components/ScrollContainer.json

@@ -2,8 +2,8 @@
  "name": "ScrollContainer",
  "group": "components",
  "extends": [
-  "Flex",
-  "Row"
+  "Row",
+  "Flex"
  ],
  "mixins": [
   "CommonProps",

package/ai/components/SegmentedControl.json

@@ -2,8 +2,8 @@
  "name": "SegmentedControl",
  "group": "components",
  "extends": [
-  "Flex",
-  "Scroller"
+  "Scroller",
+  "Flex"
  ],
  "mixins": [
   "CommonProps",

package/ai/components/Select.json

@@ -9,7 +9,7 @@
   "options": "!SelectOptionType[]",
   "value": "string | string[] = ",
   "emptyState": "ReactNode = No results",
-  "onSelect": "(value: any) => void",
+  "onSelect": "(value: string | string[]) => void",
   "placement": "Placement",
   "searchable": "boolean = false",
   "className": "string",

package/ai/components/SplitView.json

@@ -2,8 +2,8 @@
  "name": "SplitView",
  "group": "components",
  "extends": [
-  "Flex",
-  "Row"
+  "Row",
+  "Flex"
  ],
  "mixins": [
   "CommonProps",

package/ai/components/Swiper.json

@@ -19,6 +19,7 @@
   "fill": "boolean = false",
   "aspectRatio": "string = 16 / 9",
   "sizes": "string",
+  "unoptimized": "boolean = false",
   "indicator": "boolean = true"
  },
  "mixinsRef": [

package/ai/components/ThemeSwitcher.json

@@ -2,8 +2,8 @@
  "name": "ThemeSwitcher",
  "group": "components",
  "extends": [
-  "Flex",
-  "Row"
+  "Row",
+  "Flex"
  ],
  "mixins": [
   "CommonProps",

package/ai/components/Tooltip.json

@@ -2,8 +2,8 @@
  "name": "Tooltip",
  "group": "components",
  "extends": [
-  "Flex",
-  "Row"
+  "Row",
+  "Flex"
  ],
  "mixins": [
   "CommonProps",

package/ai/examples/blocks/content/chat1content.ts

@@ -26,6 +26,7 @@ export const chatMembers = [
         bio: "Design engineer",
         avatar: "/images/creators/lorant.jpg",
         group: "Online",
+        statusColor: "green",
       },
       {
         name: "Lorant K.",
@@ -33,6 +34,7 @@ export const chatMembers = [
         bio: "Building Once UI",
         avatar: "/images/creators/lorant.jpg",
         group: "Online",
+        statusColor: "green",
       },
     ],
   },

package/ai/examples/dashboard.tsx

@@ -137,7 +137,7 @@ export function DashboardExample() {
             <Heading as="h2" variant="heading-strong-s">
               Recent activity
             </Heading>
-            <Text variant="label-default-s" onBackground="brand-medium" cursor="interactive">
+            <Text variant="label-default-s" onBackground="brand-medium" style={{ cursor: "pointer" }}>
               View all
             </Text>
           </Row>

package/ai/examples/settings.tsx

@@ -39,31 +39,33 @@ export function SettingsExample() {
           </Heading>
         </Column>
 
-        <SplitView fillWidth minHeight={48}>
-          <Column
-            width={20}
-            gap="4"
-            padding="16"
-            background="surface"
-            border="neutral-alpha-weak"
-            radius="l"
-            s={{ hide: true }}
-          >
-            {sections.map((section, index) => (
-              <Row
-                key={section.id}
-                padding="12"
-                radius="m"
-                background={index === 0 ? "neutral-alpha-weak" : undefined}
-                textVariant="label-default-s"
-                cursor="interactive"
-              >
-                {section.label}
-              </Row>
-            ))}
-          </Column>
-
-          <Column flex={1} gap="24">
+        <SplitView fillWidth minHeight={48}
+          leftPanel={
+            <Column
+              width={20}
+              gap="4"
+              padding="16"
+              background="surface"
+              border="neutral-alpha-weak"
+              radius="l"
+              s={{ hide: true }}
+            >
+              {sections.map((section, index) => (
+                <Row
+                  key={section.id}
+                  padding="12"
+                  radius="m"
+                  background={index === 0 ? "neutral-alpha-weak" : undefined}
+                  textVariant="label-default-s"
+                  style={{ cursor: "pointer" }}
+                >
+                  {section.label}
+                </Row>
+              ))}
+            </Column>
+          }
+          rightPanel={
+            <Column flex={1} gap="24">
             <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="24">
               <Heading as="h2" variant="heading-strong-m">
                 Profile
@@ -106,7 +108,7 @@ export function SettingsExample() {
                     Release notes and changelog
                   </Text>
                 </Column>
-                <Switch checked />
+                <Switch isChecked onToggle={() => {}} />
               </Row>
               <Line />
               <Row fillWidth horizontal="between" vertical="center">
@@ -116,7 +118,7 @@ export function SettingsExample() {
                     Tips, templates, and community highlights
                   </Text>
                 </Column>
-                <Switch />
+                <Switch isChecked={false} onToggle={() => {}} />
               </Row>
               <Checkbox label="Weekly digest" isChecked />
             </Column>
@@ -132,7 +134,9 @@ export function SettingsExample() {
                 Delete workspace
               </Button>
             </Column>
-          </Column>
+            </Column>
+          }
+        >
         </SplitView>
       </Column>
     </Column>

package/ai/gotchas.json

@@ -35,6 +35,7 @@
     "rule": "StatusIndicator uses color=\"green\" | \"red\" | \"orange\" | \"gray\" etc. — not variant or semantic scheme names.",
     "components": ["StatusIndicator"]
   },
+  "Icon.names": {
     "rule": "Icon names must come from IconName in spec.json — never invent names like more, bell, arrowRight.",
     "components": ["Icon", "Button", "IconButton"]
   },

package/ai/manifest.json

@@ -1,6 +1,6 @@
 {
- "version": "1.7.13",
- "generated": "2026-07-24",
+ "version": "1.8.1",
+ "generated": "2026-07-30",
  "files": {
   "spec": "spec.json",
   "catalog": "catalog.json",

package/ai/spec.json

@@ -1,7 +1,7 @@
 {
  "name": "@once-ui-system/core",
- "version": "1.7.13",
- "generated": "2026-07-24",
+ "version": "1.8.1",
+ "generated": "2026-07-30",
  "format": "props are 'type', 'type = default', or '!type' (required). Components with 'mixins' also accept all props of those mixins. 'extends' means all props of that component are accepted.",
  "tokens": {
   "StaticSpacingToken": "\"0\" | \"1\" | \"2\" | \"4\" | \"8\" | \"12\" | \"16\" | \"20\" | \"24\" | \"32\" | \"40\" | \"48\" | \"56\" | \"64\" | \"80\" | \"104\" | \"128\" | \"160\"",
@@ -15,7 +15,7 @@
   "Colors": "`${ColorScheme}-${ColorWeight}` | `${ColorScheme}-alpha-${ColorWeight}`",
   "RadiusSize": "TShirtSizes | \"full\" | \"none\"",
   "TextType": "\"body\" | \"heading\" | \"display\" | \"label\" | \"code\"",
-  "TextWeight": "\"default\" | \"strong\"",
+  "TextWeight": "\"default\" | \"normal\" | \"medium\" | \"strong\"",
   "TextSize": "TShirtSizes",
   "TextVariant": "`${TextType}-${TextWeight}-${TextSize}`",
   "IconName": "\"chevronUp\" | \"chevronDown\" | \"chevronRight\" | \"chevronLeft\" | \"chevronsLeftRight\" | \"refresh\" | \"light\" | \"dark\" | \"help\" | \"info\" | \"warning\" | \"danger\" | \"checkbox\" | \"check\" | \"copy\" | \"eyeDropper\" | \"clipboard\" | \"person\" | \"close\" | \"link\" | \"arrowUpRight\" | \"minus\" | \"plus\" | \"calendar\" | \"eye\" | \"eyeOff\" | \"search\" | \"security\" | \"sparkle\" | \"computer\" | \"minimize\" | \"maximize\" | \"smiley\" | \"paw\" | \"food\" | \"ball\" | \"world\" | \"gift\" | \"symbol\" | \"flag\" | \"wordmark\" | \"enter\" | \"play\" | \"pause\" | \"volume\" | \"volumeOff\" | \"screen\" | \"document\" | \"radialGauge\" | \"linearGauge\" | \"edit\" | \"trash\" | \"mail\" | \"download\""
@@ -42,21 +42,6 @@
    "dark": "boolean",
    "light": "boolean"
   },
-  "FlexBreakpointProps": {
-   "direction": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\"",
-   "horizontal": "\"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"even\" | \"stretch\"",
-   "vertical": "\"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"even\" | \"stretch\"",
-   "center": "boolean",
-   "overflow": "CSSProperties[\"overflow\"]",
-   "overflowX": "CSSProperties[\"overflowX\"]",
-   "overflowY": "CSSProperties[\"overflowY\"]",
-   "top": "SpacingToken",
-   "right": "SpacingToken",
-   "bottom": "SpacingToken",
-   "left": "SpacingToken",
-   "aspectRatio": "CSSProperties[\"aspectRatio\"]",
-   "style": "CSSProperties"
-  },
   "FlexProps": {
    "direction": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\"",
    "horizontal": "\"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"even\" | \"stretch\"",
@@ -65,18 +50,6 @@
    "wrap": "boolean",
    "flex": "FlexValue"
   },
-  "GridBreakpointProps": {
-   "columns": "GridProps[\"columns\"]",
-   "overflow": "CSSProperties[\"overflow\"]",
-   "overflowX": "CSSProperties[\"overflowX\"]",
-   "overflowY": "CSSProperties[\"overflowY\"]",
-   "top": "SpacingToken",
-   "right": "SpacingToken",
-   "bottom": "SpacingToken",
-   "left": "SpacingToken",
-   "aspectRatio": "CSSProperties[\"aspectRatio\"]",
-   "style": "CSSProperties"
-  },
   "GridProps": {
    "columns": "GridSize",
    "rows": "GridSize"
@@ -367,8 +340,8 @@
   "BlobFx": {
    "group": "components",
    "extends": [
-    "Flex",
-    "Row"
+    "Row",
+    "Flex"
    ],
    "mixins": [
     "CommonProps",
@@ -385,8 +358,8 @@
   "Banner": {
    "group": "components",
    "extends": [
-    "Flex",
-    "Row"
+    "Row",
+    "Flex"
    ],
    "mixins": [
     "CommonProps",
@@ -546,6 +519,7 @@
     "translateY": "SpacingToken | number",
     "aspectRatio": "string = original",
     "sizes": "string",
+    "unoptimized": "boolean = false",
     "revealedByDefault": "boolean = false",
     "thumbnail": "ThumbnailItem = { scaling: 1, height: \"80\", sizes: \"120px\" }",
     "play": "{ auto?: boolean; interval?: number; controls?: boolean; progress?: boolean; } = { auto: false, interval: 3000, controls: true }"
@@ -571,6 +545,7 @@
     "fill": "boolean = false",
     "aspectRatio": "string = 16 / 9",
     "sizes": "string",
+    "unoptimized": "boolean = false",
     "indicator": "boolean = true"
    }
   },
@@ -681,7 +656,8 @@
    "props": {
     "isChecked": "boolean",
     "isIndeterminate": "boolean = false",
-    "onToggle": "() => void"
+    "onToggle": "() => void",
+    "hoverable": "boolean = true"
    }
   },
   "Chip": {
@@ -736,7 +712,8 @@
    "props": {
     "leftContent": "!SideContent",
     "rightContent": "!SideContent",
-    "aspectRatio": "string"
+    "aspectRatio": "string",
+    "unoptimized": "boolean"
    }
   },
   "ContextMenu": {
@@ -880,6 +857,8 @@
     "footer": "ReactNode",
     "base": "boolean",
     "stack": "boolean",
+    "flush": "boolean = false",
+    "hideClose": "boolean = false",
     "onHeightChange": "(height: number) => void",
     "minHeight": "number",
     "closeOnClickaway": "boolean = true"
@@ -1155,8 +1134,8 @@
   "HoverCard": {
    "group": "components",
    "extends": [
-    "Flex",
-    "Animation"
+    "Animation",
+    "Flex"
    ],
    "mixins": [
     "CommonProps",
@@ -1215,8 +1194,8 @@
   "InfiniteScroll": {
    "group": "components",
    "extends": [
-    "Flex",
-    "Row"
+    "Row",
+    "Flex"
    ],
    "mixins": [
     "CommonProps",
@@ -1538,8 +1517,8 @@
   "OgCard": {
    "group": "components",
    "extends": [
-    "Flex",
-    "Card"
+    "Card",
+    "Flex"
    ],
    "mixins": [
     "CommonProps",
@@ -1552,6 +1531,7 @@
    "props": {
     "url": "string",
     "sizes": "string = 320px",
+    "unoptimized": "boolean = false",
     "size": "CondensedTShirtSizes = m",
     "ogData": "Partial<OgData> | null",
     "direction": "\"column\" | \"row\" | \"column-reverse\" | \"row-reverse\" = column",
@@ -1696,7 +1676,8 @@
     "name": "string",
     "value": "string",
     "disabled": "boolean",
-    "onToggle": "() => void"
+    "onToggle": "() => void",
+    "hoverable": "boolean = true"
    }
   },
   "RevealFx": {
@@ -1768,8 +1749,8 @@
   "ScrollContainer": {
    "group": "components",
    "extends": [
-    "Flex",
-    "Row"
+    "Row",
+    "Flex"
    ],
    "mixins": [
     "CommonProps",
@@ -1804,8 +1785,8 @@
   "SegmentedControl": {
    "group": "components",
    "extends": [
-    "Flex",
-    "Scroller"
+    "Scroller",
+    "Flex"
    ],
    "mixins": [
     "CommonProps",
@@ -1836,7 +1817,7 @@
     "options": "!SelectOptionType[]",
     "value": "string | string[] = ",
     "emptyState": "ReactNode = No results",
-    "onSelect": "(value: any) => void",
+    "onSelect": "(value: string | string[]) => void",
     "placement": "Placement",
     "searchable": "boolean = false",
     "className": "string",
@@ -1937,8 +1918,8 @@
   "SplitView": {
    "group": "components",
    "extends": [
-    "Flex",
-    "Row"
+    "Row",
+    "Flex"
    ],
    "mixins": [
     "CommonProps",
@@ -2214,8 +2195,8 @@
   "Tooltip": {
    "group": "components",
    "extends": [
-    "Flex",
-    "Row"
+    "Row",
+    "Flex"
    ],
    "mixins": [
     "CommonProps",
@@ -2249,8 +2230,8 @@
   "ThemeSwitcher": {
    "group": "components",
    "extends": [
-    "Flex",
-    "Row"
+    "Row",
+    "Flex"
    ],
    "mixins": [
     "CommonProps",
@@ -2371,7 +2352,7 @@
     "className": "string"
    }
   },
-  "HeadingLink": {
+  "HeadingNav": {
    "group": "modules",
    "extends": [
     "Flex"
@@ -2385,13 +2366,10 @@
     "StyleProps"
    ],
    "props": {
-    "id": "!string",
-    "as": "!\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
-    "children": "!React.ReactNode",
-    "style": "React.CSSProperties"
+    "header": "boolean = true"
    }
   },
-  "HeadingNav": {
+  "HeadingLink": {
    "group": "modules",
    "extends": [
     "Flex"
@@ -2405,14 +2383,17 @@
     "StyleProps"
    ],
    "props": {
-    "header": "boolean = true"
+    "id": "!string",
+    "as": "!\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+    "children": "!React.ReactNode",
+    "style": "React.CSSProperties"
    }
   },
   "ChartHeader": {
    "group": "modules",
    "extends": [
-    "Flex",
-    "Column"
+    "Column",
+    "Flex"
    ],
    "mixins": [
     "CommonProps",