@once-ui-system/core 1.8.5 → 2.0.0-alpha.1

package/AGENTS.md

@@ -47,7 +47,7 @@ If you cannot read `node_modules`, use the docs host (may not match your install
 
 - Use `Column` / `Row`, not `Flex` unless direction changes at breakpoints
 - Use `fill`, not `fillWidth fillHeight`; use `center`, not `horizontal="center" vertical="center"`
-- Static panels: `Column background="surface" border="neutral-alpha-weak" radius="l" padding="24"`
+- Static panels: `Column background="surface" border radius="l" padding="24"`
 - `Card` is interactive only (`href` or `onClick`)
 
 Full rules: `@once-ui-system/core/ai/rules.compact.md`

package/ai/catalog.json

@@ -1,6 +1,6 @@
 {
- "version": "1.8.5",
- "generated": "2026-09-16",
+ "version": "2.0.0-alpha.1",
+ "generated": "2026-09-17",
  "components": {
   "Accordion": {
    "group": "components",
@@ -114,6 +114,16 @@
     "components"
    ]
   },
+  "Book": {
+   "group": "components",
+   "extends": [
+    "Flex"
+   ],
+   "purpose": "Book component",
+   "tags": [
+    "components"
+   ]
+  },
   "BlockQuote": {
    "group": "components",
    "extends": [
@@ -141,6 +151,26 @@
     "components"
    ]
   },
+  "NavGroup": {
+   "group": "components",
+   "extends": [
+    "Flex"
+   ],
+   "purpose": "NavGroup component",
+   "tags": [
+    "components"
+   ]
+  },
+  "NavItem": {
+   "group": "components",
+   "extends": [
+    "ToggleButton"
+   ],
+   "purpose": "NavItem component",
+   "tags": [
+    "components"
+   ]
+  },
   "WeatherFx": {
    "group": "components",
    "extends": [
@@ -841,6 +871,7 @@
   "StylePanel": {
    "group": "components",
    "extends": [
+    "Column",
     "Flex"
    ],
    "purpose": "StylePanel component",
@@ -1010,6 +1041,66 @@
     "components"
    ]
   },
+  "Effect": {
+   "group": "components",
+   "extends": [
+    "Flex"
+   ],
+   "purpose": "Effect component",
+   "tags": [
+    "components"
+   ]
+  },
+  "InfoTip": {
+   "group": "components",
+   "extends": [
+    "Flex"
+   ],
+   "purpose": "InfoTip component",
+   "tags": [
+    "components"
+   ]
+  },
+  "Scrubber": {
+   "group": "components",
+   "extends": [
+    "Flex"
+   ],
+   "purpose": "Scrubber component",
+   "tags": [
+    "components"
+   ]
+  },
+  "Setting": {
+   "group": "components",
+   "extends": [
+    "Flex"
+   ],
+   "purpose": "Setting component",
+   "tags": [
+    "components"
+   ]
+  },
+  "SettingAxes": {
+   "group": "components",
+   "extends": [
+    "Flex"
+   ],
+   "purpose": "SettingAxes component",
+   "tags": [
+    "components"
+   ]
+  },
+  "SettingGroup": {
+   "group": "components",
+   "extends": [
+    "Flex"
+   ],
+   "purpose": "SettingGroup component",
+   "tags": [
+    "components"
+   ]
+  },
   "FadingLettersFx": {
    "group": "components",
    "purpose": "FadingLettersFx component",
@@ -1064,147 +1155,144 @@
     "modules"
    ]
   },
-  "ChartHeader": {
+  "Schema": {
    "group": "modules",
-   "extends": [
-    "Column",
-    "Flex"
-   ],
-   "purpose": "ChartHeader component",
+   "purpose": "Schema component",
    "tags": [
     "modules"
    ]
   },
-  "ChartStatus": {
-   "group": "modules",
-   "purpose": "ChartStatus component",
+  "LineChart": {
+   "group": "data",
+   "extends": [
+    "Flex"
+   ],
+   "purpose": "LineChart component",
    "tags": [
-    "modules"
+    "data"
    ]
   },
-  "LinearGradient": {
-   "group": "modules",
-   "purpose": "LinearGradient component",
+  "BarChart": {
+   "group": "data",
+   "extends": [
+    "Flex"
+   ],
+   "purpose": "BarChart component",
    "tags": [
-    "modules"
+    "data"
    ]
   },
-  "RadialGradient": {
-   "group": "modules",
-   "purpose": "RadialGradient component",
+  "PieChart": {
+   "group": "data",
+   "extends": [
+    "Flex"
+   ],
+   "purpose": "PieChart component",
    "tags": [
-    "modules"
+    "data"
    ]
   },
-  "BarChart": {
-   "group": "modules",
+  "LineBarChart": {
+   "group": "data",
    "extends": [
-    "BarChart.impl",
-    "interfaces",
     "Flex"
    ],
-   "purpose": "BarChart component",
+   "purpose": "LineBarChart component",
    "tags": [
-    "modules"
+    "data"
    ]
   },
-  "LineChart": {
-   "group": "modules",
+  "RadialGauge": {
+   "group": "data",
    "extends": [
-    "LineChart.impl",
-    "interfaces",
     "Flex"
    ],
-   "purpose": "LineChart component",
+   "purpose": "RadialGauge component",
    "tags": [
-    "modules"
+    "data"
    ]
   },
-  "PieChart": {
-   "group": "modules",
+  "LinearGauge": {
+   "group": "data",
    "extends": [
-    "PieChart.impl",
-    "interfaces",
     "Flex"
    ],
-   "purpose": "PieChart component",
+   "purpose": "LinearGauge component",
    "tags": [
-    "modules"
+    "data"
    ]
   },
-  "LineBarChart": {
-   "group": "modules",
+  "ChartHeader": {
+   "group": "data",
    "extends": [
-    "LineBarChart.impl",
-    "interfaces",
+    "Column",
     "Flex"
    ],
-   "purpose": "LineBarChart component",
+   "purpose": "ChartHeader component",
    "tags": [
-    "modules"
+    "data"
+   ]
+  },
+  "ChartStatus": {
+   "group": "data",
+   "purpose": "ChartStatus component",
+   "tags": [
+    "data"
+   ]
+  },
+  "LinearGradient": {
+   "group": "data",
+   "purpose": "LinearGradient component",
+   "tags": [
+    "data"
+   ]
+  },
+  "RadialGradient": {
+   "group": "data",
+   "purpose": "RadialGradient component",
+   "tags": [
+    "data"
    ]
   },
   "DataTooltip": {
-   "group": "modules",
+   "group": "data",
    "purpose": "DataTooltip component",
    "tags": [
-    "modules"
+    "data"
    ]
   },
   "Legend": {
-   "group": "modules",
+   "group": "data",
    "purpose": "Legend component",
    "tags": [
-    "modules"
-   ]
-  },
-  "RadialGauge": {
-   "group": "modules",
-   "extends": [
-    "Flex"
-   ],
-   "purpose": "RadialGauge component",
-   "tags": [
-    "modules"
+    "data"
    ]
   },
-  "LinearGauge": {
-   "group": "modules",
-   "extends": [
-    "Flex"
-   ],
-   "purpose": "LinearGauge component",
+  "Swatch": {
+   "group": "data",
+   "purpose": "Swatch component",
    "tags": [
-    "modules"
+    "data"
    ]
   },
   "CodeBlock": {
-   "group": "modules",
+   "group": "code",
    "extends": [
-    "CodeBlock.impl",
     "Flex"
    ],
    "purpose": "CodeBlock component",
    "tags": [
-    "modules"
+    "code"
    ]
   },
   "MediaUpload": {
-   "group": "modules",
+   "group": "media",
    "extends": [
-    "MediaUpload.impl",
     "Flex"
    ],
    "purpose": "MediaUpload component",
    "tags": [
-    "modules"
-   ]
-  },
-  "Schema": {
-   "group": "modules",
-   "purpose": "Schema component",
-   "tags": [
-    "modules"
+    "media"
    ]
   }
  }

package/ai/components/Accordion.json

@@ -15,7 +15,7 @@
  "props": {
   "title": "!React.ReactNode",
   "children": "!React.ReactNode",
-  "icon": "string = chevronDown",
+  "icon": "IconName = chevronDown",
   "iconRotation": "number = 180",
   "size": "CondensedTShirtSizes = m",
   "radius": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"full\" = m",

package/ai/components/BarChart.json

@@ -1,12 +1,12 @@
 {
  "name": "BarChart",
- "group": "modules",
+ "group": "data",
+ "importFrom": "@once-ui-system/core/data",
  "extends": [
-  "BarChart.impl",
-  "interfaces",
   "Flex"
  ],
  "mixins": [
+  "ChartProps",
   "CommonProps",
   "DisplayProps",
   "FlexProps",
@@ -14,7 +14,22 @@
   "SpacingProps",
   "StyleProps"
  ],
+ "props": {
+  "barWidth": "BarWidth = l",
+  "hover": "boolean = false",
+  "reverseY": "boolean = false",
+  "reverseX": "boolean = false",
+  "data-viz-style": "string",
+  "legend": "LegendConfig = {}",
+  "error": "boolean = false",
+  "tooltip": "boolean = true",
+  "grid": "\"x\" | \"y\" | \"both\" | \"none\" = y",
+  "axis": "\"x\" | \"y\" | \"both\" | \"none\" = both",
+  "loading": "boolean = false",
+  "border": "Colors | \"surface\" | \"transparent\" | boolean = neutral-alpha-weak"
+ },
  "mixinsRef": [
+  "ChartProps",
   "CommonProps",
   "DisplayProps",
   "FlexProps",
@@ -24,6 +39,22 @@
  ],
  "tokensRef": "see spec.json mixins",
  "resolvedMixins": {
+  "ChartProps": {
+   "title": "React.ReactNode",
+   "description": "React.ReactNode",
+   "series": "!SeriesConfig | SeriesConfig[]",
+   "data": "!DataPoint[]",
+   "legend": "LegendConfig",
+   "date": "DateConfig",
+   "emptyState": "React.ReactNode",
+   "errorState": "React.ReactNode",
+   "error": "boolean",
+   "tooltip": "boolean",
+   "grid": "\"x\" | \"y\" | \"both\" | \"none\"",
+   "axis": "\"x\" | \"y\" | \"both\" | \"none\"",
+   "variant": "ChartVariant",
+   "loading": "boolean"
+  },
   "CommonProps": {
    "onBackground": "Colors",
    "onSolid": "Colors",

package/ai/components/Book.json

@@ -0,0 +1,128 @@
+{
+ "name": "Book",
+ "group": "components",
+ "extends": [
+  "Flex"
+ ],
+ "mixins": [
+  "CommonProps",
+  "DisplayProps",
+  "FlexProps",
+  "SizeProps",
+  "SpacingProps",
+  "StyleProps"
+ ],
+ "props": {
+  "src": "string",
+  "alt": "string",
+  "sizes": "string",
+  "href": "string",
+  "children": "React.ReactNode"
+ },
+ "mixinsRef": [
+  "CommonProps",
+  "DisplayProps",
+  "FlexProps",
+  "SizeProps",
+  "SpacingProps",
+  "StyleProps"
+ ],
+ "tokensRef": "see spec.json mixins",
+ "resolvedMixins": {
+  "CommonProps": {
+   "onBackground": "Colors",
+   "onSolid": "Colors",
+   "align": "CSSProperties[\"textAlign\"]"
+  },
+  "DisplayProps": {
+   "as": "ElementType",
+   "inline": "boolean",
+   "hide": "boolean",
+   "pointerEvents": "\"none\" | \"all\" | \"auto\"",
+   "position": "CSSProperties[\"position\"]",
+   "overflow": "CSSProperties[\"overflow\"]",
+   "overflowX": "CSSProperties[\"overflowX\"]",
+   "overflowY": "CSSProperties[\"overflowY\"]",
+   "scrollbar": "\"default\" | \"minimal\"",
+   "transition": "\"micro-short\" | \"micro-medium\" | \"micro-long\" | \"macro-short\" | \"macro-medium\" | \"macro-long\"",
+   "opacity": "Opacity",
+   "zIndex": "-1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | \"-1\" | \"0\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"10\"",
+   "dark": "boolean",
+   "light": "boolean"
+  },
+  "FlexProps": {
+   "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",
+   "wrap": "boolean",
+   "flex": "FlexValue"
+  },
+  "SizeProps": {
+   "width": "number | SpacingToken | CSSUnit",
+   "height": "number | SpacingToken | CSSUnit",
+   "maxWidth": "number | SpacingToken | CSSUnit",
+   "minWidth": "number | SpacingToken | CSSUnit",
+   "minHeight": "number | SpacingToken | CSSUnit",
+   "maxHeight": "number | SpacingToken | CSSUnit",
+   "fit": "boolean",
+   "fitWidth": "boolean",
+   "fitHeight": "boolean",
+   "fill": "boolean",
+   "fillWidth": "boolean",
+   "fillHeight": "boolean",
+   "aspectRatio": "CSSProperties[\"aspectRatio\"]"
+  },
+  "SpacingProps": {
+   "padding": "SpacingToken | number",
+   "paddingLeft": "SpacingToken | number",
+   "paddingRight": "SpacingToken | number",
+   "paddingTop": "SpacingToken | number",
+   "paddingBottom": "SpacingToken | number",
+   "paddingX": "SpacingToken | number",
+   "paddingY": "SpacingToken | number",
+   "margin": "SpacingToken | number",
+   "marginLeft": "SpacingToken | number",
+   "marginRight": "SpacingToken | number",
+   "marginTop": "SpacingToken | number",
+   "marginBottom": "SpacingToken | number",
+   "marginX": "SpacingToken | number",
+   "marginY": "SpacingToken | number",
+   "gap": "SpacingToken | number | \"-1\"",
+   "top": "SpacingToken | number | CSSUnit",
+   "right": "SpacingToken | number | CSSUnit",
+   "bottom": "SpacingToken | number | CSSUnit",
+   "left": "SpacingToken | number | CSSUnit",
+   "translateX": "SpacingToken | number | CSSUnit",
+   "translateY": "SpacingToken | number | CSSUnit"
+  },
+  "StyleProps": {
+   "textVariant": "TextVariant",
+   "textSize": "TextSize",
+   "textType": "TextType",
+   "textWeight": "TextWeight",
+   "background": "Colors | \"surface\" | \"overlay\" | \"page\" | \"transparent\"",
+   "solid": "Colors",
+   "borderTop": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderRight": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderBottom": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderLeft": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderX": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderY": "Colors | \"surface\" | \"transparent\" | boolean",
+   "border": "Colors | \"surface\" | \"transparent\" | boolean",
+   "borderStyle": "\"solid\" | \"dashed\"",
+   "borderWidth": "1 | 2 | 4 | 8 | \"1\" | \"2\" | \"4\" | \"8\"",
+   "topRadius": "RadiusSize",
+   "rightRadius": "RadiusSize",
+   "bottomRadius": "RadiusSize",
+   "leftRadius": "RadiusSize",
+   "topLeftRadius": "RadiusSize",
+   "topRightRadius": "RadiusSize",
+   "bottomLeftRadius": "RadiusSize",
+   "bottomRightRadius": "RadiusSize",
+   "shadow": "ShadowSize",
+   "cursor": "CSSProperties[\"cursor\"] | \"interactive\" | ReactNode",
+   "radius": "RadiusSize | `${RadiusSize}-${RadiusNest}`"
+  }
+ }
+}

package/ai/components/Button.json

@@ -4,7 +4,7 @@
  "props": {
   "variant": "\"primary\" | \"secondary\" | \"tertiary\" | \"quaternary\" | \"subtle\" | \"danger\" | \"success\" | \"warning\" | \"ghost\" | \"link\" = primary",
   "size": "TShirtSizes = m",
-  "radius": "\"none\" | \"top\" | \"right\" | \"bottom\" | \"left\" | \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\"",
+  "corners": "\"none\" | \"top\" | \"right\" | \"bottom\" | \"left\" | \"top-left\" | \"top-right\" | \"bottom-right\" | \"bottom-left\"",
   "label": "string",
   "weight": "\"default\" | \"strong\" = strong",
   "rounded": "boolean",

package/ai/components/Card.json

@@ -17,6 +17,7 @@
   "href": "string",
   "onClick": "() => void",
   "fillHeight": "boolean",
+  "selected": "boolean",
   "style": "React.CSSProperties",
   "className": "string"
  },

package/ai/components/Carousel.json

@@ -16,7 +16,7 @@
   "items": "!CarouselItem[] = []",
   "controls": "boolean = true",
   "priority": "boolean = false",
-  "fill": "boolean = false",
+  "stretch": "boolean = false",
   "indicator": "\"line\" | \"thumbnail\" | false = line",
   "translateY": "SpacingToken | number",
   "aspectRatio": "string = original",

package/ai/components/ChartHeader.json

@@ -1,6 +1,7 @@
 {
  "name": "ChartHeader",
- "group": "modules",
+ "group": "data",
+ "importFrom": "@once-ui-system/core/data",
  "extends": [
   "Column",
   "Flex"

package/ai/components/ChartStatus.json

@@ -1,6 +1,7 @@
 {
  "name": "ChartStatus",
- "group": "modules",
+ "group": "data",
+ "importFrom": "@once-ui-system/core/data",
  "props": {
   "loading": "boolean = false",
   "empty": "boolean = false",

package/ai/components/Checkbox.json

@@ -5,8 +5,8 @@
   "InteractiveDetails"
  ],
  "props": {
-  "isChecked": "boolean",
-  "isIndeterminate": "boolean = false",
+  "checked": "boolean",
+  "indeterminate": "boolean = false",
   "onToggle": "() => void",
   "hoverable": "boolean = true"
  },

package/ai/components/CodeBlock.json

@@ -1,8 +1,8 @@
 {
  "name": "CodeBlock",
- "group": "modules",
+ "group": "code",
+ "importFrom": "@once-ui-system/core/code",
  "extends": [
-  "CodeBlock.impl",
   "Flex"
  ],
  "mixins": [
@@ -13,6 +13,27 @@
   "SpacingProps",
   "StyleProps"
  ],
+ "props": {
+  "codeHeight": "number",
+  "fillHeight": "boolean",
+  "previewPadding": "SpacingToken = l",
+  "codes": "CodeInstance[] = []",
+  "preview": "ReactNode",
+  "copyButton": "boolean = true",
+  "styleButton": "boolean = false",
+  "reloadButton": "boolean = false",
+  "fullscreenButton": "boolean = false",
+  "compact": "boolean = false",
+  "className": "string",
+  "style": "React.CSSProperties",
+  "background": "React.ComponentProps<typeof Flex>[\"background\"] = surface",
+  "onInstanceChange": "(index: number) => void",
+  "lineNumbers": "boolean = false",
+  "highlight": "string",
+  "maxLines": "number = 5",
+  "isCollapsible": "boolean = false",
+  "hideCode": "boolean = false"
+ },
  "mixinsRef": [
   "CommonProps",
   "DisplayProps",

package/ai/components/ColorInput.json

@@ -6,7 +6,7 @@
  ],
  "props": {
   "value": "!string",
-  "onChange": "!(e: React.ChangeEvent<HTMLInputElement>) => void",
+  "onChange": "!(value: string) => void",
   "supportAlpha": "boolean = false"
  },
  "mixinsRef": []