@once-ui-system/core 1.8.3 → 2.0.0-alpha.0

package/ai/examples/blocks/Feed3.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Avatar, Button, Column, EmojiPickerDropdown, IconButton, Media, OgCard, Row, Text, Textarea } from "@once-ui-system/core";
+import type { IconName } from "@once-ui-system/core";
 import { useState } from "react";
 import { chatMessages } from "./content/chat1content";
 
@@ -114,9 +115,8 @@ export const Feed3: React.FC<React.ComponentProps<typeof Column>> = ({ ...flex }
             id="comment-input"
             placeholder="Message 👋 | intro"
             style={{padding: "0.75rem"}}
-            lines="auto"
             value={message}
-            hasPrefix={
+            prefix={
               <EmojiPickerDropdown
                 onSelect={(emoji) => setMessage(message + emoji)}
                 trigger={
@@ -126,12 +126,12 @@ export const Feed3: React.FC<React.ComponentProps<typeof Column>> = ({ ...flex }
                 }
               />
             }
-            hasSuffix={
+            suffix={
               <Row
                 style={{ opacity: message.length > 0 ? 1 : 0, marginRight: "-0.25rem" }}
                 transition="micro-medium">
                 <IconButton
-                  icon={isSubmitting ? "loading" : "send"}
+                  icon={isSubmitting ? "refresh" : "send"}
                   size="m"
                   onClick={handleSubmitMessage}
                   disabled={!message || isSubmitting}

package/ai/examples/blocks/Footer1.tsx

@@ -19,9 +19,11 @@ export const Footer1: React.FC<React.ComponentProps<typeof Row>> = ({ ...flex })
           <Text onBackground="neutral-weak">/ All rights reserved</Text>
         </Text>
         <Row gap="16">
-          <IconButton size="s" variant="ghost" href="#" icon="github" tooltip="GitHub" />
-          <IconButton size="s" variant="ghost" href="#" icon="linkedin" tooltip="LinkedIn" />
-          <IconButton size="s" variant="ghost" href="#" icon="threads" tooltip="Threads" />
+          {/* Brand marks are not part of Once UI — register the ones you need on
+              IconProvider and declare their names, then use them here as usual. */}
+          <IconButton size="s" variant="ghost" href="#" icon="link" tooltip="GitHub" />
+          <IconButton size="s" variant="ghost" href="#" icon="link" tooltip="LinkedIn" />
+          <IconButton size="s" variant="ghost" href="#" icon="link" tooltip="Threads" />
         </Row>
       </Row>
       <Row hide height="80" s={{hide: false}}/>

package/ai/examples/blocks/Footer2.tsx

@@ -83,9 +83,9 @@ export const Footer2: React.FC<React.ComponentProps<typeof Row>> = ({ ...flex })
           <Row paddingX="4" marginBottom="8">
             Social
           </Row>
-          <Button href="#" size="s" variant="secondary" weight="default" prefixIcon="github" label="GitHub" />
-          <Button href="#" size="s" variant="secondary" weight="default" prefixIcon="linkedin" label="LinkedIn" />
-          <Button href="#" size="s" variant="secondary" weight="default" prefixIcon="threads" label="Threads" />
+          <Button href="#" size="s" variant="secondary" weight="default" label="GitHub" />
+          <Button href="#" size="s" variant="secondary" weight="default" label="LinkedIn" />
+          <Button href="#" size="s" variant="secondary" weight="default" label="Threads" />
         </Column>
       </Row>
       <Row fillWidth textVariant="label-default-s" gap="12">

package/ai/examples/blocks/Footer3.tsx

@@ -83,7 +83,7 @@ export const Footer3 = (flex: React.ComponentProps<typeof Column>) => {
                         {item.label}
                       </Text>
                       {item.tag && (
-                        <Tag style={{ transform: "scale(0.9)" }} variant="brand" size="s">
+                        <Tag style={{ transform: "scale(0.9)" }} scheme="brand" size="s">
                           {item.tag}
                         </Tag>
                       )}

package/ai/examples/blocks/Footer4.tsx

@@ -1,17 +1,18 @@
 import { Avatar, Background, Button, Column, IconButton, Logo, Mask, Particle, Row, SmartLink, Tag, Text, TypeFx } from "@once-ui-system/core";
+import type { IconName } from "@once-ui-system/core";
 
-const social = [
+const social: { icon: IconName; label: string; href: string }[] = [
   {
-    icon: "discord",
+    icon: "link",
     label: "Discord",
     href: "https://discord.com/invite/5EyAQ4eNdS" },
   {
-    icon: "github",
+    icon: "link",
     label: "GitHub",
     href: "https://github.com/once-ui-system",
   },
   {
-    icon: "email",
+    icon: "mail",
     label: "Email",
     href: "mailto:demo@email.com",
   },
@@ -293,7 +294,7 @@ export const Footer4 = (flex: React.ComponentProps<typeof Column>) => {
                             {item.label}
                           </Text>
                           {item.tag && (
-                            <Tag style={{ transform: "scale(0.9)" }} variant="brand" size="s">
+                            <Tag style={{ transform: "scale(0.9)" }} scheme="brand" size="s">
                               {item.tag}
                             </Tag>
                           )}

package/ai/examples/blocks/Header1.tsx

@@ -17,6 +17,7 @@ import {
   ToggleButton,
   UserMenu,
 } from "@once-ui-system/core";
+import type { KbarItem, MenuGroup } from "@once-ui-system/core";
 import { usePathname } from "next/navigation";
 import React, { useState } from "react";
 
@@ -29,7 +30,7 @@ export const Header1: React.FC<HeaderProps> = ({ authenticated, avatar, ...flex
   const pathname = usePathname() ?? "";
   const isMac = typeof window !== "undefined" && /Mac/i.test(navigator.platform);
 
-  const kbar = [
+  const kbar: KbarItem[] = [
     {
       id: "dashboard",
       name: "Dashboard",
@@ -68,7 +69,7 @@ export const Header1: React.FC<HeaderProps> = ({ authenticated, avatar, ...flex
     },
   ];
 
-  const nav = [
+  const nav: MenuGroup[] = [
     {
       id: "products",
       label: "Products",
@@ -257,7 +258,7 @@ export const Header1: React.FC<HeaderProps> = ({ authenticated, avatar, ...flex
     >
       <Row gap="4" vertical="center" maxWidth={10}>
         <NavIcon
-          isActive={isActive} 
+          active={isActive} 
           onClick={handleClick} 
           aria-label="Toggle navigation menu"
           aria-expanded={isActive}
@@ -303,10 +304,10 @@ export const Header1: React.FC<HeaderProps> = ({ authenticated, avatar, ...flex
               }}
               dropdown={
                 <Column padding="4" gap="2" minWidth={10}>
-                  <Option hasPrefix={<Icon onBackground="neutral-weak" size="s" name="person" />} label="Profile" value="profile" />
-                  <Option hasPrefix={<Icon onBackground="neutral-weak" size="s" name="settings" />} label="Settings" value="settings" />
+                  <Option prefix={<Icon onBackground="neutral-weak" size="s" name="person" />} label="Profile" value="profile" />
+                  <Option prefix={<Icon onBackground="neutral-weak" size="s" name="settings" />} label="Settings" value="settings" />
                   <Line marginY="2" />
-                  <Option hasPrefix={<Icon onBackground="neutral-weak" size="s" name="logout" />} label="Log out" value="logout" />
+                  <Option prefix={<Icon onBackground="neutral-weak" size="s" name="logout" />} label="Log out" value="logout" />
                 </Column>
               }
             />

package/ai/examples/blocks/Header3.tsx

@@ -81,13 +81,13 @@ export const Header3: React.FC<React.ComponentProps<typeof Row>> = ({ ...flex })
                     <Option
                       label="Profile 1"
                       value="profile"
-                      hasPrefix={
+                      prefix={
                         <Avatar src="/images/creators/justin.jpg"/>
                       }/>
                     <Option
                       label="Profile 2"
                       value="profile"
-                      hasPrefix={
+                      prefix={
                         <Avatar src="/images/creators/light.jpg"/>
                       }/>
                   </Column>
@@ -96,29 +96,29 @@ export const Header3: React.FC<React.ComponentProps<typeof Row>> = ({ ...flex })
                     <Option
                       label="Account"
                       value="account"
-                      hasPrefix={
+                      prefix={
                         <Icon padding="4" margin="2" size="s" name="person" onBackground="neutral-weak"/>
                       } />
                     <Option
                       label="Settings"
                       value="settings"
-                      hasPrefix={
+                      prefix={
                         <Icon padding="4" margin="2" size="s" name="settings" onBackground="neutral-weak"/>
                       } />
                     <Option
                       label="Subscription"
                       value="subscription"
-                      hasPrefix={
+                      prefix={
                         <Icon padding="4" margin="2" size="s" name="payment" onBackground="neutral-weak"/>
                       } />
                     <Option label="Help" value="help"
-                      hasPrefix={
+                      prefix={
                         <Icon padding="4" margin="2" size="s" name="help" onBackground="neutral-weak"/>
                     } />
                   </Column>
                   <Line />
                   <Column fillWidth padding="4">
-                    <Option padding="4" label="Log out" value="logout" hasPrefix={
+                    <Option padding="4" label="Log out" value="logout" prefix={
                       <Icon padding="4" margin="2" size="s" name="logout" onBackground="neutral-weak"/>
                     } />
                   </Column>

package/ai/examples/blocks/Header4.tsx

@@ -66,7 +66,7 @@ export const Header4: React.FC<HeaderProps> = ({ cartCount = 0, ...flex }) => {
                 key="cart-option"
                 label="Cart"
                 value="cart"
-                hasPrefix={
+                prefix={
                   <Icon
                     size="xs"
                     onBackground="neutral-weak"
@@ -79,7 +79,7 @@ export const Header4: React.FC<HeaderProps> = ({ cartCount = 0, ...flex }) => {
                 key="order-history-option"
                 label="Order history"
                 value="orders"
-                hasPrefix={
+                prefix={
                   <Icon size="xs" onBackground="neutral-weak" name="payment" />
                 }
               />
@@ -87,7 +87,7 @@ export const Header4: React.FC<HeaderProps> = ({ cartCount = 0, ...flex }) => {
                 key="returned-orders-option"
                 label="Returned orders"
                 value="returns"
-                hasPrefix={
+                prefix={
                   <Icon size="xs" onBackground="neutral-weak" name="return" />
                 }
               />
@@ -95,7 +95,7 @@ export const Header4: React.FC<HeaderProps> = ({ cartCount = 0, ...flex }) => {
               <Option
                 key="settings-option"
                 label="Settings"
-                hasPrefix={
+                prefix={
                   <Icon size="xs" onBackground="neutral-weak" name="settings" />
                 }
                 value="settings"
@@ -103,7 +103,7 @@ export const Header4: React.FC<HeaderProps> = ({ cartCount = 0, ...flex }) => {
               <Option
                 key="help-option"
                 label="Help"
-                hasPrefix={<Icon size="xs" onBackground="neutral-weak" name="help" />}
+                prefix={<Icon size="xs" onBackground="neutral-weak" name="help" />}
                 value="help"
               />
               <Line key="line-3" marginY="2" />

package/ai/examples/blocks/Sidebar4.tsx

@@ -13,7 +13,7 @@ export const Sidebar4: React.FC<React.ComponentProps<typeof Column> & {
   return (
     <Column fillHeight maxWidth={18} background="surface" {...flex}>
       <Row fillWidth aspectRatio="2/1">
-        <Media src="/images/blocks/vibe-coding-dark.jpg" fill sizes="240px"/>
+        <Media src="/images/blocks/vibe-coding-dark.jpg" stretch sizes="240px"/>
         <Fade position="absolute" top="0" to="bottom" fillWidth height={6} opacity={70}/>
         <Row fillWidth paddingY="12" paddingX="24" position="absolute" top="0" textVariant="label-strong-s" horizontal="center" align="center">
           Design Engineers Club

package/ai/examples/blocks/Streaming1.tsx

@@ -75,7 +75,7 @@ const MediaList = ({ image, progress, title, description, categories }: { image:
       ref={referenceRef}
     >
       <Media aspectRatio="16/9" src={image} alt={title} sizes="400px" radius="l" />
-      {progress > 0 && <ProgressBar label={false} value={progress} paddingX="l" />}
+      {progress > 0 && <ProgressBar showLabel={false} value={progress} paddingX="l" />}
       
       {(portalContainer && (isHovered || isVisible)) && (
         createPortal(
@@ -104,7 +104,7 @@ const MediaList = ({ image, progress, title, description, categories }: { image:
             }}
           >
             <Media aspectRatio="16/9" src={image} alt={title} sizes="400px" radius="l" />
-            {progress > 0 && <ProgressBar label={false} value={progress} paddingX="l" />}
+            {progress > 0 && <ProgressBar showLabel={false} value={progress} paddingX="l" />}
             <Column fillWidth paddingX="16" paddingBottom="20" paddingTop="8" gap="8">
               <Row fillWidth horizontal="between" paddingBottom="12">
                 <Row gap="8" data-border="rounded">
@@ -287,7 +287,7 @@ export const Streaming1: React.FC = () => {
       <Column fillWidth style={{marginTop: "calc(-1 * var(--static-space-64))"}}>
         <Row fillWidth style={{height: "80vh"}} paddingBottom="xl">
           <Carousel
-            fill
+            stretch
             border="transparent"
             radius="none"
             position="absolute"
@@ -306,7 +306,7 @@ export const Streaming1: React.FC = () => {
             pattern={{ display: true, size: "2" }}
           />
           <Carousel
-            fill
+            stretch
             pointerEvents="none"
             border="transparent"
             radius="none"

package/ai/examples/blocks/Table1.tsx

@@ -112,12 +112,12 @@ export const Table1: React.FC<Table1Props> = ({
         {showSearch && (
           <Row maxWidth={16}>
             <Input
-              height="s"
+              size="s"
               id="search"
               placeholder="Search..."
               value={search}
-              hasPrefix={<Icon name="search" size="s" onBackground="neutral-weak"/>}
-              hasSuffix={search.length > 0 && <IconButton tooltip="Clear" tooltipPosition="left" icon="close" size="s" variant="ghost" onClick={() => setSearch("")}/>}
+              prefix={<Icon name="search" size="s" onBackground="neutral-weak"/>}
+              suffix={search.length > 0 && <IconButton tooltip="Clear" tooltipPosition="left" icon="close" size="s" variant="ghost" onClick={() => setSearch("")}/>}
               onChange={(e) => setSearch(e.target.value)}
             />
           </Row>
@@ -129,8 +129,8 @@ export const Table1: React.FC<Table1Props> = ({
             {selectable && (
               <Row textVariant="label-default-s" vertical="center" gap="16">
                 <Checkbox
-                  isChecked={allCurrentSelected || (someCurrentSelected && !allCurrentSelected)}
-                  isIndeterminate={someCurrentSelected && !allCurrentSelected}
+                  checked={allCurrentSelected || (someCurrentSelected && !allCurrentSelected)}
+                  indeterminate={someCurrentSelected && !allCurrentSelected}
                   onToggle={toggleSelectAllCurrent}
                 />
               </Row>
@@ -161,7 +161,7 @@ export const Table1: React.FC<Table1Props> = ({
                         <Row vertical="center" gap="16">
                           <Checkbox
                             key={`cb-${id}`}
-                            isChecked={isSelected(id)}
+                            checked={isSelected(id)}
                             onToggle={() => toggleSelect(id)}
                           />
                         </Row>

package/ai/examples/blocks/Waitlist1.tsx

@@ -68,18 +68,18 @@ export const Waitlist1 = () => {
           </Badge>
         </RevealFx>
         <Column horizontal="center" align="center" gap="24">
-          <RevealFx horizontal="center" delay={0.4}>
+          <RevealFx horizontal="center" delay={400}>
             <Heading variant="display-strong-xl" onBackground="neutral-strong">
               The all-in-one course platform
             </Heading>
           </RevealFx>
-          <RevealFx horizontal="center" delay={0.6}>
+          <RevealFx horizontal="center" delay={600}>
             <Text onBackground="neutral-medium" variant="heading-default-xl">
               Launch and sell your courses with ease. We handle enrollment, payments and analytics. You focus on creating.
             </Text>
           </RevealFx>
         </Column>
-        <RevealFx horizontal="center" delay={0.8}>
+        <RevealFx horizontal="center" delay={800}>
           <AvatarGroup
             reverse
             size="m"
@@ -110,14 +110,14 @@ export const Waitlist1 = () => {
               </Row>
             </RevealFx>
           ) : (
-            <RevealFx key="subscribed" direction="column" horizontal="center" delay={1} gap="16" data-border="rounded">
+            <RevealFx key="subscribed" direction="column" horizontal="center" delay={1000} gap="16" data-border="rounded">
               <Input
                 id="email"
                 placeholder="Enter email"
                 value={email}
                 validate={(value) => validateEmail(value as string)}
                 onChange={(e) => setEmail(e.target.value)}
-                hasSuffix={
+                suffix={
                   <IconButton size="l" style={{marginRight: "-0.5rem"}} icon="send" onClick={() => subscribe()}/>
                 }
               />

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

@@ -1,4 +1,6 @@
-export const social = [
+import type { IconName } from "@once-ui-system/core";
+
+export const social: { icon: IconName; label: string; href: string }[] = [
   { icon: "link", label: "Discord", href: "https://discord.com/invite/5EyAQ4eNdS" },
   { icon: "link", label: "GitHub", href: "https://github.com/once-ui-system" },
   { icon: "document", label: "Email", href: "mailto:demo@email.com" },

package/ai/examples/dashboard.tsx

@@ -6,6 +6,7 @@
  */
 import { useEffect, useRef, useState } from "react";
 import {
+  Button,
   Column,
   CountFx,
   Grid,
@@ -37,9 +38,9 @@ const activity = {
     { content: "Time", key: "time" },
   ],
   rows: [
-    ["Plan upgraded to Pro", "jane@acme.co", <Tag size="s" variant="success">Completed</Tag>, "2m ago"],
-    ["New signup", "alex@studio.io", <Tag size="s" variant="brand">New</Tag>, "14m ago"],
-    ["Payment failed", "ops@build.dev", <Tag size="s" variant="danger">Action</Tag>, "1h ago"],
+    ["Plan upgraded to Pro", "jane@acme.co", <Tag size="s" scheme="success">Completed</Tag>, "2m ago"],
+    ["New signup", "alex@studio.io", <Tag size="s" scheme="brand">New</Tag>, "14m ago"],
+    ["Payment failed", "ops@build.dev", <Tag size="s" scheme="danger">Action</Tag>, "1h ago"],
   ],
 };
 
@@ -65,8 +66,8 @@ export function DashboardExample() {
             </Heading>
           </Column>
           <SegmentedControl
-            selected={range}
-            onToggle={setRange}
+            value={range}
+            onChange={setRange}
             buttons={[
               { value: "7d", label: "7 days" },
               { value: "30d", label: "30 days" },
@@ -77,7 +78,7 @@ export function DashboardExample() {
 
         <Grid ref={statsRef} columns="4" gap="16" m={{ columns: 2 }} s={{ columns: 1 }}>
           {stats.map((stat, index) => (
-            <RevealFx key={stat.label} fill trigger={seen} translateY="8" delay={index * 0.1}>
+            <RevealFx key={stat.label} fill revealed={seen} translateY="8" delay={index * 100}>
               <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="16">
                 <Row fillWidth horizontal="between" vertical="center">
                   <Text variant="label-default-s" onBackground="neutral-weak">
@@ -137,9 +138,7 @@ export function DashboardExample() {
             <Heading as="h2" variant="heading-strong-s">
               Recent activity
             </Heading>
-            <Text variant="label-default-s" onBackground="brand-medium" style={{ cursor: "pointer" }}>
-              View all
-            </Text>
+            <Button variant="tertiary" size="s" label="View all" />
           </Row>
           <Line />
           <Table fillWidth data={activity} />

package/ai/examples/marketing-hero.tsx

@@ -84,13 +84,13 @@ export function MarketingHeroExample() {
               </Heading>
             </Column>
           </RevealFx>
-          <RevealFx delay={0.1} translateY="16">
+          <RevealFx delay={100} translateY="16">
             <Text variant="body-default-l" onBackground="neutral-weak" align="center">
               Build semantic layouts with Row, Column and Grid. Add 100+ pre-styled components.
               Manage themes in a single file.
             </Text>
           </RevealFx>
-          <RevealFx delay={0.2} translateY="16">
+          <RevealFx delay={200} translateY="16">
             <Row gap="12" s={{ direction: "column" }}>
               <Button arrowIcon>View docs</Button>
               <Button variant="secondary" suffixIcon="arrowUpRight">

package/ai/examples/pricing.tsx

@@ -6,7 +6,6 @@
  */
 import { useEffect, useRef, useState } from "react";
 import {
-  AccordionGroup,
   Background,
   BlobFx,
   Button,
@@ -102,8 +101,8 @@ export function PricingExample() {
               Three plans, one decision
             </Heading>
             <SegmentedControl
-              selected={billing}
-              onToggle={(value) => setBilling(value as Billing)}
+              value={billing}
+              onChange={(value) => setBilling(value as Billing)}
               buttons={[
                 { value: "monthly", label: "Monthly" },
                 { value: "yearly", label: "Yearly −20%" },
@@ -113,7 +112,7 @@ export function PricingExample() {
 
           <Grid ref={tiersRef} columns="3" gap="24" s={{ columns: 1 }}>
             {tiers.map((tier, index) => (
-              <RevealFx key={tier.name} fill trigger={tiersSeen} translateY="8" delay={index * 0.1}>
+              <RevealFx key={tier.name} fill revealed={tiersSeen} translateY="8" delay={index * 100}>
                 <Column
                   fill
                   background="surface"
@@ -146,7 +145,7 @@ export function PricingExample() {
                       <Heading as="h3" variant="heading-strong-m">
                         {tier.name}
                       </Heading>
-                      {tier.highlighted && <Tag variant="brand" size="s" label="Most popular" />}
+                      {tier.highlighted && <Tag scheme="brand" size="s" label="Most popular" />}
                     </Row>
                     <Text variant="body-default-s" onBackground="neutral-weak">
                       {tier.description}

package/ai/examples/settings.tsx

@@ -108,7 +108,7 @@ export function SettingsExample() {
                     Release notes and changelog
                   </Text>
                 </Column>
-                <Switch isChecked onToggle={() => {}} />
+                <Switch checked onToggle={() => {}} />
               </Row>
               <Line />
               <Row fillWidth horizontal="between" vertical="center">
@@ -118,9 +118,9 @@ export function SettingsExample() {
                     Tips, templates, and community highlights
                   </Text>
                 </Column>
-                <Switch isChecked={false} onToggle={() => {}} />
+                <Switch checked={false} onToggle={() => {}} />
               </Row>
-              <Checkbox label="Weekly digest" isChecked />
+              <Checkbox label="Weekly digest" checked />
             </Column>
 
             <Column background="surface" border="danger-alpha-medium" radius="l" padding="24" gap="16">