@once-ui-system/core 1.7.12 → 1.8.0

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/ContextMenu.json

@@ -13,8 +13,8 @@
   "className": "string",
   "onSelect": "(value: string) => void",
   "closeAfterClick": "boolean = true",
-  "isOpen": "boolean",
-  "onOpenChange": "(isOpen: boolean) => void",
+  "open": "boolean",
+  "onOpenChange": "(open: boolean) => void",
   "selectedOption": "string",
   "disabled": "boolean = false"
  },

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/Table.json

@@ -13,8 +13,23 @@
   "StyleProps"
  ],
  "props": {
-  "data": "!{ headers: { content: ReactNode; key: string; sortable?: boolean; }[]; rows: ReactNode[][]; }",
-  "onRowClick": "(rowIndex: number) => void"
+  "data": "!{ headers: TableHeader[]; rows: ReactNode[][]; }",
+  "onRowClick": "(rowIndex: number) => void",
+  "searchable": "boolean = false",
+  "searchPlaceholder": "string = Search...",
+  "striped": "boolean = false",
+  "hoverable": "boolean = true",
+  "compact": "boolean = false",
+  "loading": "boolean = false",
+  "emptyState": "ReactNode",
+  "actions": "TableAction[]",
+  "stickyHeader": "boolean = false",
+  "rowClassName": "(rowIndex: number) => string",
+  "cellClassName": "(rowIndex: number, cellIndex: number) => string",
+  "paginated": "boolean = false",
+  "defaultPageSize": "number = 10",
+  "pageSizeOptions": "number[] = [5, 10, 20, 50]",
+  "loadingState": "ReactNode"
  },
  "mixinsRef": [
   "CommonProps",

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/manifest.json

@@ -1,6 +1,6 @@
 {
- "version": "1.7.12",
- "generated": "2026-07-05",
+ "version": "1.8.0",
+ "generated": "2026-07-29",
  "files": {
   "spec": "spec.json",
   "catalog": "catalog.json",