@k8o/arte-odyssey 9.0.0 → 10.0.0

package/README.md

@@ -23,7 +23,7 @@ npm install react react-dom typescript tailwindcss
 Required versions:
 
 - React ≥19.0.0
-- TypeScript ≥5.9.0
+- TypeScript ≥6.0.0
 - Tailwind CSS ≥4.0.0
 
 ## Quick Start
@@ -76,61 +76,71 @@ ArteOdyssey includes design system documentation in `docs/` directory. When inst
 
 ## Component Categories
 
-### Layout & Navigation
+### Buttons
 
-- **Accordion** - Collapsible content panels
+- **Button** - Primary action button (use `renderItem` to render as a link)
+- **IconButton** - Button with icon only (use `renderItem` to render as a link)
+
+### Navigation
+
+- **Anchor** - Text link with external-link awareness
 - **Breadcrumb** - Navigation path indicator
-- **Card** / **InteractiveCard** - Flexible content container (with hover interaction)
-- **Separator** - Visual content divider
+- **Pagination** - Page navigation controls
 - **Tabs** - Tab-based content organization
-- **ScrollLinked** - Scroll progress indicator
 
 ### Form Controls
 
 - **Autocomplete** - Search with suggestions
-- **Checkbox** - Binary selection input
+- **Checkbox** / **CheckboxCard** / **CheckboxGroup** - Multi-selection inputs
 - **FileField** - File upload with composite pattern
-- **FormControl** - Form field wrapper with label and validation
+- **Form** / **FormControl** - Form wrapper and field with label/validation
 - **NumberField** - Numeric input with controls
-- **Radio** - Single selection from options
-- **Slider** - Slider input control
+- **PasswordInput** - Password input with show/hide toggle
+- **Radio** / **RadioCard** - Single-selection inputs
 - **Select** - Dropdown selection
+- **Slider** - Slider input control
+- **Switch** - Toggle switch
 - **TextField** - Single-line text input
 - **Textarea** - Multi-line text input
 
-### Buttons & Links
+### Data Display
 
-- **Button** - Primary action button
-- **IconButton** - Button with icon only
-- **LinkButton** - Button styled as link
-- **Anchor** - External link component
-- **IconLink** - Link with icon
+- **Accordion** - Collapsible content panels
+- **Avatar** - User/entity avatar
+- **Badge** - Status/label indicator
+- **BaselineStatus** - Web standard support indicator
+- **Card** / **InteractiveCard** - Flexible content container (with hover interaction)
+- **Code** - Formatted code display
+- **Heading** - Typography heading component
+- **Table** - Tabular data display
 
-### Feedback & Status
+### Feedback
 
 - **Alert** - Important messages and notifications
-- **Toast** - Temporary notification messages
 - **Progress** - Progress indication
-- **BaselineStatus** - Web standard support indicator
+- **Skeleton** - Content loading placeholder
+- **Spinner** - Loading indicator
+- **ToastProvider** / **useToast** - Temporary notification messages
 
-### Overlays & Modals
+### Overlays
 
 - **Dialog** - Modal dialog boxes
 - **Drawer** - Slide-out panel
+- **DropdownMenu** - Action menu component
+- **ListBox** - Selectable list component
 - **Modal** - Overlay modal component
 - **Popover** - Floating content container
 - **Tooltip** - Contextual help text
-- **DropdownMenu** - Action menu component
 
-### Data Display
+### Layout
 
-- **Code** - Formatted code display
-- **Heading** - Typography heading component
-- **ListBox** - Selectable list component
+- **ScrollLinked** - Scroll progress indicator
+- **Separator** - Visual content divider
 
 ### Utilities
 
-- **ArteOdysseyProvider** - Context providers for the library
+- **ArteOdysseyProvider** - Root provider for the library
+- **PortalRootProvider** / **usePortalRoot** - Customize the portal mount root
 - **Icons** - Icon component collection
 
 ## Usage Examples
@@ -220,22 +230,105 @@ import { useClickAway } from '@k8o/arte-odyssey';
 import { useLocalStorage } from '@k8o/arte-odyssey';
 ```
 
+## Generative UI integrations
+
+ArteOdyssey ships official adapters so an LLM can generate UIs using these components, via either [json-render](https://json-render.dev) or [OpenUI](https://www.openui.com). Each adapter constrains the model to ArteOdyssey components with prop schemas locked to the design tokens, so generated UIs stay on-brand. Component-specific `renderItem` render props are bridged internally — the model only ever sees flat data (e.g. `href`).
+
+These integrations are exposed as optional subpath exports. Install the framework you use (they are optional peer dependencies):
+
+```bash
+# json-render
+pnpm add @json-render/core @json-render/react zod
+# OpenUI
+pnpm add @openuidev/react-lang zod
+```
+
+Supported components (**all 47**, both frameworks):
+
+- **Layout / containers**: `Stack`, `Card`, `InteractiveCard`, `Form`
+- **Buttons / nav**: `Button`, `IconButton`, `Anchor`, `Breadcrumb`, `Pagination`
+- **Display**: `Badge`, `Heading`, `Avatar`, `Code`, `Icon`, `Alert`, `Spinner`, `Progress`, `Skeleton`, `Separator`, `Tabs`, `Accordion`, `Table`, `BaselineStatus`, `ScrollLinked`
+- **Overlays (self-contained widgets)**: `Modal`, `Dialog`, `Drawer`, `Popover`, `Tooltip`, `DropdownMenu`, `Toast`
+- **Form**: `TextField`, `Textarea`, `PasswordInput`, `NumberField`, `Slider`, `Checkbox`, `Switch`, `Select`, `Radio`, `RadioCard`, `CheckboxCard`, `ListBox`, `CheckboxGroup`, `Autocomplete`, `FileField`, `FormControl`
+
+Overlays are exposed as **self-contained widgets**: a `Modal`/`Dialog`/`Drawer`/`Popover` declares its own trigger button via `triggerLabel`, manages open/close internally, and renders the supplied children inside the surface. This lets a model generate UIs that include overlays without modelling imperative open/close state. `Tooltip`/`DropdownMenu`/`Toast` follow the same self-contained pattern (trigger + content).
+
+### json-render (RSC-ready)
+
+The catalog (schemas / prompt) and the registry (rendering) are split so the catalog is **server-safe** — you can generate the system prompt in a React Server Component, and render on the client.
+
+```tsx
+// Server Component: prompt generation
+import { catalog } from '@k8o/arte-odyssey/json-render';
+
+const systemPrompt = catalog.prompt(); // safe on the server
+```
+
+```tsx
+// Client Component: rendering
+'use client';
+import { registry } from '@k8o/arte-odyssey/json-render/registry';
+import { JSONUIProvider, Renderer } from '@json-render/react';
+
+export function GenUi({ spec }: { spec: unknown }) {
+  return (
+    <JSONUIProvider registry={registry}>
+      <Renderer registry={registry} spec={spec} />
+    </JSONUIProvider>
+  );
+}
+```
+
+| Export                                   | Side           | Contents                         |
+| ---------------------------------------- | -------------- | -------------------------------- |
+| `@k8o/arte-odyssey/json-render`          | server-safe    | `catalog` (schemas + `prompt()`) |
+| `@k8o/arte-odyssey/json-render/registry` | `'use client'` | `registry` (rendering)           |
+
+### OpenUI
+
+```tsx
+'use client';
+import { library } from '@k8o/arte-odyssey/openui';
+import { Renderer } from '@openuidev/react-lang';
+
+export function GenUi({ response }: { response: string }) {
+  return <Renderer library={library} response={response} />;
+}
+```
+
+Generate the system prompt at build time with the OpenUI CLI, or call `library.prompt()` in the same client bundle.
+
+> **Notes**
+>
+> - Make sure `@k8o/arte-odyssey/styles.css` is loaded and the app is wrapped in `ArteOdysseyProvider`.
+> - `Tabs` panels are text content (`tabs: [{ label, content }]`); rich-component panels are a future enhancement.
+> - In OpenUI, `Card` can contain a `Stack`, but `Stack` cannot nest another `Stack` (the framework does not support self-referential schemas). json-render nests freely (slots-based).
+
 ## Custom Hooks
 
 The library includes several useful hooks:
 
+- **useBreakpoint** - Tailwind breakpoint matcher
 - **useClickAway** - Detect clicks outside an element
 - **useClient** - Client-side rendering detection
 - **useClipboard** - Clipboard operations
+- **useControllableState** - Controlled/uncontrolled state pattern
+- **useDebouncedTransition** - Rate-limited transition with `AbortSignal`
+- **useDeferredDebounce** - `useDeferredValue` with pending flag
+- **useDisclosure** - Open/close/toggle disclosure state
 - **useHash** - URL hash management
+- **useHover** - Element hover detection
+- **useIntersectionObserver** / **useInView** - Element visibility
 - **useInterval** - Interval timer management
-- **useLocalStorage** - Local storage with React state
-- **useResize** - Element resize detection
+- **useLocalStorage** / **useSessionStorage** - Web Storage with React state
+- **useResize** - Element resize detection (ResizeObserver)
 - **useScrollDirection** - Scroll direction detection
+- **useScrollLock** - Body/element scroll lock
 - **useStep** - Step-based state management
 - **useTimeout** - Timeout management
 - **useWindowResize** - Window resize events
 - **useWindowSize** - Window size tracking
+- **useWritingMode** - Detect horizontal/vertical `writing-mode`
 
 ## Accessibility
 

package/dist/components/_internal/focus-ring.d.mts

@@ -0,0 +1,8 @@
+//#region src/components/_internal/focus-ring.d.ts
+declare const FOCUS_RING = "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info";
+declare const FOCUS_RING_NO_BORDER = "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info";
+declare const FOCUS_RING_WITHIN = "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info";
+declare const FOCUS_RING_PEER = "peer-focus-visible:border-transparent peer-focus-visible:outline-hidden peer-focus-visible:ring-2 peer-focus-visible:ring-border-info";
+declare const FOCUS_RING_PEER_NO_BORDER = "peer-focus-visible:outline-hidden peer-focus-visible:ring-2 peer-focus-visible:ring-border-info";
+//#endregion
+export { FOCUS_RING, FOCUS_RING_NO_BORDER, FOCUS_RING_PEER, FOCUS_RING_PEER_NO_BORDER, FOCUS_RING_WITHIN };

package/dist/components/_internal/focus-ring.mjs

@@ -0,0 +1,8 @@
+//#region src/components/_internal/focus-ring.ts
+const FOCUS_RING = "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info";
+const FOCUS_RING_NO_BORDER = "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info";
+const FOCUS_RING_WITHIN = "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info";
+const FOCUS_RING_PEER = "peer-focus-visible:border-transparent peer-focus-visible:outline-hidden peer-focus-visible:ring-2 peer-focus-visible:ring-border-info";
+const FOCUS_RING_PEER_NO_BORDER = "peer-focus-visible:outline-hidden peer-focus-visible:ring-2 peer-focus-visible:ring-border-info";
+//#endregion
+export { FOCUS_RING, FOCUS_RING_NO_BORDER, FOCUS_RING_PEER, FOCUS_RING_PEER_NO_BORDER, FOCUS_RING_WITHIN };

package/dist/components/buttons/button/button.d.mts

@@ -5,17 +5,24 @@ type Props = {
   type?: 'button' | 'submit';
   size?: 'sm' | 'md' | 'lg';
   color?: 'primary' | 'secondary' | 'gray';
-  variant?: 'contained' | 'outlined' | 'skeleton';
+  variant?: 'solid' | 'outline' | 'skeleton';
   fullWidth?: boolean;
   isActive?: boolean;
   startIcon?: ReactNode;
   endIcon?: ReactNode;
+  /**
+   * クリック時の処理。`onAction` は非同期処理を `useTransition` で包み、保留中は
+   * 自動でスピナーを表示する糖衣。素のクリックイベント（`event` が必要、
+   * `preventDefault` したい等）は `onClick` を使う。両者は併用可能で、
+   * `onClick` → `onAction` の順に実行される（`onClick` が `preventDefault`
+   * した場合は `onAction` をスキップ）。
+   */
   onAction?: () => void | Promise<void>;
   renderItem?: (props: {
     className: string;
     children: ReactNode;
   }) => ReactNode;
-} & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>;
+} & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'className' | 'style'>;
 declare const Button: FC<Props>;
 //#endregion
 export { Button };

package/dist/components/buttons/button/button.mjs

@@ -1,11 +1,12 @@
 "use client";
+import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
 import { cn } from "../../../helpers/cn.mjs";
 import { Spinner } from "../../feedback/spinner/spinner.mjs";
 import { useTransition } from "react";
 import { useFormStatus } from "react-dom";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/buttons/button/button.tsx
-const Button = ({ ref, children, type = "button", size = "md", color = "primary", variant = "contained", disabled = false, fullWidth = false, isActive = false, onAction, onClick, startIcon, endIcon, renderItem, ...rest }) => {
+const Button = ({ ref, children, type = "button", size = "md", color = "primary", variant = "solid", disabled = false, fullWidth = false, isActive = false, onAction, onClick, startIcon, endIcon, renderItem, ...rest }) => {
 	const [transitionPending, startTransition] = useTransition();
 	const { pending: formPending } = useFormStatus();
 	const isPending = transitionPending || type === "submit" && formPending;
@@ -24,14 +25,14 @@ const Button = ({ ref, children, type = "button", size = "md", color = "primary"
 	const hasStartIcon = resolvedStartIcon !== void 0;
 	const hasEndIcon = endIcon !== void 0;
 	const baseClassName = cn("rounded-full border-2 text-center font-bold transition-colors", {
-		"border-transparent bg-primary-bg text-primary-fg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize": variant === "contained" && color === "primary",
-		"border-transparent bg-secondary-bg text-secondary-fg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize": variant === "contained" && color === "secondary",
-		"border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute/80 active:bg-bg-mute": variant === "contained" && color === "gray",
-		"border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "primary",
-		"border-secondary-border bg-bg-base text-secondary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "secondary",
-		"border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "gray",
+		"border-transparent bg-primary-bg text-primary-fg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize": variant === "solid" && color === "primary",
+		"border-transparent bg-secondary-bg text-secondary-fg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize": variant === "solid" && color === "secondary",
+		"border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute/80 active:bg-bg-mute": variant === "solid" && color === "gray",
+		"border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outline" && color === "primary",
+		"border-secondary-border bg-bg-base text-secondary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outline" && color === "secondary",
+		"border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-mute": variant === "outline" && color === "gray",
 		"border-transparent bg-transparent text-fg-mute hover:bg-bg-subtle hover:text-fg-base active:bg-bg-mute active:text-fg-base": variant === "skeleton"
-	}, "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", size === "sm" && "px-3 py-1 text-sm", size === "md" && "px-4 py-2 text-md", size === "lg" && "px-6 py-3 text-lg", fullWidth && "w-full", (hasStartIcon || hasEndIcon) && "flex items-center gap-2", hasStartIcon && hasEndIcon ? "justify-between" : hasStartIcon && variant !== "skeleton" ? "justify-center" : hasEndIcon && "justify-between", isActive && "text-fg-info");
+	}, FOCUS_RING, size === "sm" && "px-3 py-1 text-sm", size === "md" && "px-4 py-2 text-md", size === "lg" && "px-6 py-3 text-lg", fullWidth && "w-full vertical:w-auto", (hasStartIcon || hasEndIcon) && "flex items-center gap-2", hasStartIcon && hasEndIcon ? "justify-between" : hasStartIcon && variant !== "skeleton" ? "justify-center" : hasEndIcon && "justify-between", isActive && "text-fg-info");
 	const composedChildren = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		resolvedStartIcon,
 		children,
@@ -44,10 +45,10 @@ const Button = ({ ref, children, type = "button", size = "md", color = "primary"
 	return /* @__PURE__ */ jsx("button", {
 		"aria-busy": isPending || void 0,
 		className: cn(baseClassName, "cursor-pointer", {
-			"cursor-not-allowed opacity-35 hover:bg-primary-bg active:bg-primary-bg": isDisabled && variant === "contained" && color === "primary",
-			"cursor-not-allowed opacity-35 hover:bg-secondary-bg active:bg-secondary-bg": isDisabled && variant === "contained" && color === "secondary",
-			"cursor-not-allowed opacity-35 hover:bg-bg-subtle active:bg-bg-subtle": isDisabled && variant === "contained" && color === "gray",
-			"cursor-not-allowed bg-bg-base opacity-35": isDisabled && variant === "outlined",
+			"cursor-not-allowed opacity-35 hover:bg-primary-bg active:bg-primary-bg": isDisabled && variant === "solid" && color === "primary",
+			"cursor-not-allowed opacity-35 hover:bg-secondary-bg active:bg-secondary-bg": isDisabled && variant === "solid" && color === "secondary",
+			"cursor-not-allowed opacity-35 hover:bg-bg-subtle active:bg-bg-subtle": isDisabled && variant === "solid" && color === "gray",
+			"cursor-not-allowed bg-bg-base opacity-35": isDisabled && variant === "outline",
 			"cursor-not-allowed bg-transparent text-fg-mute opacity-35": isDisabled && variant === "skeleton"
 		}),
 		disabled: isDisabled,

package/dist/components/buttons/icon-button/icon-button.d.mts

@@ -6,10 +6,16 @@ import { Placement } from "@floating-ui/react";
 type IconButtonTriggerProps = Partial<TooltipTriggerProps>;
 type Props = {
   size?: 'sm' | 'md' | 'lg';
-  bg?: 'transparent' | 'base' | 'primary' | 'secondary';
+  color?: 'transparent' | 'base' | 'primary' | 'secondary';
   label: string;
   tooltipPlacement?: Placement;
   tooltipDisabled?: boolean;
+  /**
+   * クリック時の処理。`onAction` は非同期処理を `useTransition` で包み、保留中は
+   * `aria-busy` を立てる糖衣。素のクリックイベントが必要なら `onClick` を使う。
+   * 両者は併用可能で `onClick` → `onAction` の順に実行される（`onClick` が
+   * `preventDefault` した場合は `onAction` をスキップ）。
+   */
   onAction?: () => void | Promise<void>;
   renderItem?: (props: {
     className: string;
@@ -17,7 +23,7 @@ type Props = {
     'aria-label': string;
     triggerProps: IconButtonTriggerProps;
   }) => ReactNode;
-} & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>;
+} & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'className' | 'style'>;
 declare const IconButton: FC<Props>;
 //#endregion
 export { IconButton, IconButtonTriggerProps };

package/dist/components/buttons/icon-button/icon-button.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
 import { cn } from "../../../helpers/cn.mjs";
 import { Tooltip } from "../../overlays/tooltip/tooltip.mjs";
 import { chain } from "../../../helpers/chain.mjs";
@@ -11,7 +12,7 @@ const joinIds = (...ids) => {
 	const filtered = ids.filter(Boolean);
 	return filtered.length === 0 ? void 0 : filtered.join(" ");
 };
-const IconButton = ({ ref, size = "md", bg = "transparent", label, tooltipPlacement = "top", tooltipDisabled = false, children, onAction, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, disabled, renderItem, "aria-describedby": describedBy, ...props }) => {
+const IconButton = ({ ref, size = "md", color = "transparent", label, tooltipPlacement = "top", tooltipDisabled = false, children, onAction, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, disabled, renderItem, "aria-describedby": describedBy, ...props }) => {
 	const [transitionPending, startTransition] = useTransition();
 	const { pending: formPending } = useFormStatus();
 	const isPending = transitionPending || formPending;
@@ -23,7 +24,7 @@ const IconButton = ({ ref, size = "md", bg = "transparent", label, tooltipPlacem
 			await onAction();
 		});
 	} : void 0;
-	const className = cn("inline-flex rounded-full transition-colors", "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", (bg === "transparent" || bg === "base") && "hover:bg-bg-subtle active:bg-bg-mute", bg === "base" && "bg-bg-base", bg === "transparent" && "bg-transparent", bg === "primary" && "bg-primary-bg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize", bg === "secondary" && "bg-secondary-bg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize", size === "sm" && "p-1", size === "md" && "p-2", size === "lg" && "p-3", !renderItem && "cursor-pointer", !renderItem && isDisabled && "cursor-not-allowed opacity-50 hover:bg-transparent active:bg-transparent");
+	const className = cn("inline-flex rounded-full transition-colors", FOCUS_RING, (color === "transparent" || color === "base") && "hover:bg-bg-subtle active:bg-bg-mute", color === "base" && "bg-bg-base", color === "transparent" && "bg-transparent", color === "primary" && "bg-primary-bg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize", color === "secondary" && "bg-secondary-bg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize", size === "sm" && "p-1", size === "md" && "p-2", size === "lg" && "p-3", !renderItem && "cursor-pointer", !renderItem && isDisabled && "cursor-not-allowed opacity-50 hover:bg-transparent active:bg-transparent");
 	if (tooltipDisabled) {
 		if (renderItem) return /* @__PURE__ */ jsx(Fragment$1, { children: renderItem({
 			className,

package/dist/components/data-display/accordion/accordion-button.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { FOCUS_RING_NO_BORDER } from "../../_internal/focus-ring.mjs";
 import { cn } from "../../../helpers/cn.mjs";
 import { ChevronIcon } from "../../icons/lucide.mjs";
 import { useItemId, useOpen, useToggleOpen } from "./context.mjs";
@@ -11,12 +12,12 @@ const AccordionButton = ({ children }) => {
 	return /* @__PURE__ */ jsxs("button", {
 		"aria-controls": `${id}-panel`,
 		"aria-expanded": open,
-		className: cn("flex w-full cursor-pointer items-center justify-between rounded-md p-4 text-fg-base transition-colors", "hover:bg-primary-bg-subtle hover:text-primary-fg", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-info"),
+		className: cn("flex w-full cursor-pointer items-center justify-between rounded-md p-4 text-fg-base transition-colors vertical:h-full", "hover:bg-primary-bg-subtle hover:text-primary-fg", FOCUS_RING_NO_BORDER),
 		id: `${id}-button`,
 		onClick: toggleOpen,
 		type: "button",
 		children: [children, /* @__PURE__ */ jsx("span", {
-			className: cn("transition-transform duration-150", open && "rotate-180"),
+			className: cn("transition-transform duration-150", !open && "vertical:rotate-90", open && "rotate-180 vertical:-rotate-90"),
 			children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down" })
 		})]
 	});

package/dist/components/data-display/accordion/accordion-item.d.mts

@@ -2,7 +2,9 @@ import { FC, PropsWithChildren } from "react";
 
 //#region src/components/data-display/accordion/accordion-item.d.ts
 declare const AccordionItem: FC<PropsWithChildren<{
+  isOpen?: boolean;
   defaultOpen?: boolean;
+  onChange?: (isOpen: boolean) => void;
 }>>;
 //#endregion
 export { AccordionItem };

package/dist/components/data-display/accordion/accordion-item.mjs

@@ -3,11 +3,16 @@ import { AccordionItemProvider } from "./context.mjs";
 import { useId } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/accordion/accordion-item.tsx
-const AccordionItem = ({ children, defaultOpen = false }) => {
+const AccordionItem = ({ children, isOpen, defaultOpen = false, onChange }) => {
 	return /* @__PURE__ */ jsx(AccordionItemProvider, {
 		defaultOpen,
 		id: useId(),
-		children: /* @__PURE__ */ jsx("div", { children })
+		isOpen,
+		onChange,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "vertical:h-full",
+			children
+		})
 	});
 };
 //#endregion

package/dist/components/data-display/accordion/accordion.mjs

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/accordion/accordion.tsx
 const Accordion = ({ children }) => /* @__PURE__ */ jsx("div", {
-	className: "divide-border-mute divide-y",
+	className: "divide-border-mute vertical:flex vertical:h-full vertical:flex-col vertical:divide-y-0 vertical:[&>:not(:last-child)]:border-l vertical:[&>:not(:last-child)]:border-border-mute divide-y",
 	children
 });
 //#endregion

package/dist/components/data-display/accordion/context.d.mts

@@ -6,7 +6,9 @@ declare const useToggleOpen: () => ToggleOpen;
 declare const useItemId: () => string;
 declare const useOpen: () => boolean;
 declare const AccordionItemProvider: FC<PropsWithChildren<{
+  isOpen?: boolean;
   defaultOpen?: boolean;
+  onChange?: (isOpen: boolean) => void;
   id: string;
 }>>;
 //#endregion

package/dist/components/data-display/accordion/context.mjs

@@ -1,19 +1,25 @@
 "use client";
-import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
 import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
-import { createContext, use } from "react";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { createContext, use, useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/accordion/context.tsx
 const OpenContext = createContext(false);
 const [ToggleOpenContext, useToggleOpen] = createSafeContext("useToggleOpen must be used within AccordionProvider");
 const [ItemIdContext, useItemId] = createSafeContext("useItemId must be used within AccordionProvider");
 const useOpen = () => use(OpenContext);
-const AccordionItemProvider = ({ defaultOpen = false, id, children }) => {
-	const { isOpen, toggle } = useDisclosure(defaultOpen);
-	return /* @__PURE__ */ jsx(OpenContext, {
+const AccordionItemProvider = ({ isOpen, defaultOpen = false, onChange, id, children }) => {
+	const [open, setOpen] = useControllableState({
 		value: isOpen,
+		defaultValue: defaultOpen,
+		onChange
+	});
+	return /* @__PURE__ */ jsx(OpenContext, {
+		value: open,
 		children: /* @__PURE__ */ jsx(ToggleOpenContext, {
-			value: toggle,
+			value: useCallback(() => {
+				setOpen((prev) => !prev);
+			}, [setOpen]),
 			children: /* @__PURE__ */ jsx(ItemIdContext, {
 				value: id,
 				children

package/dist/components/data-display/accordion/index.d.mts

@@ -1,18 +1,18 @@
-import * as _$react from "react";
-
 //#region src/components/data-display/accordion/index.d.ts
 declare const Accordion: {
-  readonly Root: _$react.FC<{
-    children?: _$react.ReactNode | undefined;
+  readonly Root: import("react").FC<{
+    children?: import("react").ReactNode | undefined;
   }>;
-  readonly Button: _$react.FC<{
-    children?: _$react.ReactNode | undefined;
+  readonly Button: import("react").FC<{
+    children?: import("react").ReactNode | undefined;
   }>;
-  readonly Item: _$react.FC<_$react.PropsWithChildren<{
+  readonly Item: import("react").FC<import("react").PropsWithChildren<{
+    isOpen?: boolean;
     defaultOpen?: boolean;
+    onChange?: (isOpen: boolean) => void;
   }>>;
-  readonly Panel: _$react.FC<{
-    children?: _$react.ReactNode | undefined;
+  readonly Panel: import("react").FC<{
+    children?: import("react").ReactNode | undefined;
   }>;
 };
 //#endregion

package/dist/components/data-display/avatar/avatar.d.mts

@@ -7,7 +7,7 @@ type Props = {
   name?: string;
   size?: 'sm' | 'md' | 'lg';
   src?: string;
-} & Omit<HTMLAttributes<HTMLSpanElement>, 'role' | 'aria-label'>;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'role' | 'aria-label' | 'className' | 'style'>;
 declare const Avatar: FC<Props>;
 //#endregion
 export { Avatar };

package/dist/components/data-display/avatar/avatar.mjs

@@ -5,10 +5,10 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/avatar/avatar.tsx
 const getInitials = (name) => {
 	if (name === void 0 || name === "") return "?";
-	const initials = name.trim().split(/\s+/).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
+	const initials = name.trim().split(/\s+/u).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
 	return initials === "" ? "?" : initials;
 };
-const Avatar = ({ alt, fallback, name, size = "md", src, className, ...rest }) => {
+const Avatar = ({ alt, fallback, name, size = "md", src, ...rest }) => {
 	const [failedSrc, setFailedSrc] = useState(null);
 	const showImage = Boolean(src) && failedSrc !== src;
 	const label = alt ?? name ?? "Avatar";
@@ -16,7 +16,7 @@ const Avatar = ({ alt, fallback, name, size = "md", src, className, ...rest }) =
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
 		"aria-label": label,
-		className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border-base bg-bg-mute font-medium text-fg-base", size === "sm" && "size-8 text-xs", size === "md" && "size-10 text-sm", size === "lg" && "size-14 text-lg", className),
+		className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border-base bg-bg-mute font-medium text-fg-base", size === "sm" && "size-8 text-xs", size === "md" && "size-10 text-sm", size === "lg" && "size-14 text-lg"),
 		role: "img",
 		children: showImage ? /* @__PURE__ */ jsx("img", {
 			alt: alt ?? "",

package/dist/components/data-display/badge/badge.d.mts

@@ -3,11 +3,11 @@ import { FC, HTMLAttributes } from "react";
 //#region src/components/data-display/badge/badge.d.ts
 type Props = {
   text: string;
-  size?: 'sm' | 'md';
+  size?: 'sm' | 'md' | 'lg';
   interactive?: boolean;
   tone?: 'neutral' | 'info' | 'success' | 'warning' | 'error';
   variant?: 'solid' | 'outline';
-} & Omit<HTMLAttributes<HTMLElement>, 'children'>;
+} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>;
 declare const Badge: FC<Props>;
 //#endregion
 export { Badge };

package/dist/components/data-display/badge/badge.mjs

@@ -1,18 +1,19 @@
+import "../../_internal/focus-ring.mjs";
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/badge/badge.tsx
-const Badge = ({ interactive = false, size = "md", text, tone = "neutral", variant = "solid", className, ...rest }) => {
-	const interactiveClassName = cn(interactive && "cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", interactive && tone === "neutral" && variant === "solid" && "hover:bg-bg-emphasize active:bg-bg-base", interactive && tone === "neutral" && variant === "outline" && "hover:bg-bg-subtle active:bg-bg-mute", interactive && tone === "info" && variant === "solid" && "hover:bg-bg-info/80 active:bg-bg-info/60", interactive && tone === "info" && variant === "outline" && "hover:bg-bg-info active:bg-bg-info/80", interactive && tone === "success" && variant === "solid" && "hover:bg-bg-success/80 active:bg-bg-success/60", interactive && tone === "success" && variant === "outline" && "hover:bg-bg-success active:bg-bg-success/80", interactive && tone === "warning" && variant === "solid" && "hover:bg-bg-warning/80 active:bg-bg-warning/60", interactive && tone === "warning" && variant === "outline" && "hover:bg-bg-warning active:bg-bg-warning/80", interactive && tone === "error" && variant === "solid" && "hover:bg-bg-error/80 active:bg-bg-error/60", interactive && tone === "error" && variant === "outline" && "hover:bg-bg-error active:bg-bg-error/80");
-	const badgeClassName = cn("inline-flex items-center rounded-full border font-medium transition-colors", size === "sm" && "px-2 py-0.5 text-xs", size === "md" && "px-2.5 py-1 text-xs", tone === "neutral" && variant === "solid" && "border-border-mute bg-bg-mute text-fg-base", tone === "neutral" && variant === "outline" && "border-border-base bg-bg-base text-fg-base", tone === "info" && variant === "solid" && "border-border-info bg-bg-info text-fg-info", tone === "info" && variant === "outline" && "border-border-info bg-bg-base text-fg-info", tone === "success" && variant === "solid" && "border-border-success bg-bg-success text-fg-success", tone === "success" && variant === "outline" && "border-border-success bg-bg-base text-fg-success", tone === "warning" && variant === "solid" && "border-border-warning bg-bg-warning text-fg-warning", tone === "warning" && variant === "outline" && "border-border-warning bg-bg-base text-fg-warning", tone === "error" && variant === "solid" && "border-border-error bg-bg-error text-fg-error", tone === "error" && variant === "outline" && "border-border-error bg-bg-base text-fg-error", interactiveClassName);
+const Badge = ({ interactive = false, size = "md", text, tone = "neutral", variant = "solid", ...rest }) => {
+	const interactiveClassName = cn(interactive && `cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info`, interactive && tone === "neutral" && variant === "solid" && "hover:bg-bg-emphasize active:bg-bg-base", interactive && tone === "neutral" && variant === "outline" && "hover:bg-bg-subtle active:bg-bg-mute", interactive && tone === "info" && variant === "solid" && "hover:bg-bg-info/80 active:bg-bg-info/60", interactive && tone === "info" && variant === "outline" && "hover:bg-bg-info active:bg-bg-info/80", interactive && tone === "success" && variant === "solid" && "hover:bg-bg-success/80 active:bg-bg-success/60", interactive && tone === "success" && variant === "outline" && "hover:bg-bg-success active:bg-bg-success/80", interactive && tone === "warning" && variant === "solid" && "hover:bg-bg-warning/80 active:bg-bg-warning/60", interactive && tone === "warning" && variant === "outline" && "hover:bg-bg-warning active:bg-bg-warning/80", interactive && tone === "error" && variant === "solid" && "hover:bg-bg-error/80 active:bg-bg-error/60", interactive && tone === "error" && variant === "outline" && "hover:bg-bg-error active:bg-bg-error/80");
+	const badgeClassName = cn("inline-flex items-center rounded-full border font-medium transition-colors", size === "sm" && "px-2 py-0.5 text-xs", size === "md" && "px-2.5 py-1 text-xs", size === "lg" && "px-3 py-1.5 text-sm", tone === "neutral" && variant === "solid" && "border-border-mute bg-bg-mute text-fg-base", tone === "neutral" && variant === "outline" && "border-border-base bg-bg-base text-fg-base", tone === "info" && variant === "solid" && "border-border-info bg-bg-info text-fg-info", tone === "info" && variant === "outline" && "border-border-info bg-bg-base text-fg-info", tone === "success" && variant === "solid" && "border-border-success bg-bg-success text-fg-success", tone === "success" && variant === "outline" && "border-border-success bg-bg-base text-fg-success", tone === "warning" && variant === "solid" && "border-border-warning bg-bg-warning text-fg-warning", tone === "warning" && variant === "outline" && "border-border-warning bg-bg-base text-fg-warning", tone === "error" && variant === "solid" && "border-border-error bg-bg-error text-fg-error", tone === "error" && variant === "outline" && "border-border-error bg-bg-base text-fg-error", interactiveClassName);
 	if (interactive) return /* @__PURE__ */ jsx("button", {
 		...rest,
-		className: cn(badgeClassName, className),
+		className: badgeClassName,
 		type: "button",
 		children: text
 	});
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
-		className: cn(badgeClassName, className),
+		className: badgeClassName,
 		children: text
 	});
 };

package/dist/components/data-display/card/card.mjs

@@ -1,9 +1,9 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/card/card.tsx
-const Card = ({ children, width = "full", appearance = "shadow", className, ...rest }) => /* @__PURE__ */ jsx("div", {
+const Card = ({ children, width = "full", appearance = "shadow", ...rest }) => /* @__PURE__ */ jsx("div", {
 	...rest,
-	className: cn("rounded-xl", appearance === "shadow" && "shadow-sm", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", "bg-bg-base", className),
+	className: cn("rounded-xl", appearance === "shadow" && "shadow-sm border border-transparent dark:border-border-subtle", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", "bg-bg-base"),
 	children
 });
 //#endregion

package/dist/components/data-display/card/interactive-card.mjs

@@ -1,9 +1,9 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/card/interactive-card.tsx
-const InteractiveCard = ({ children, width = "full", appearance = "shadow", className, ...rest }) => /* @__PURE__ */ jsx("div", {
+const InteractiveCard = ({ children, width = "full", appearance = "shadow", ...rest }) => /* @__PURE__ */ jsx("div", {
 	...rest,
-	className: cn("rounded-xl transition-transform hover:scale-[1.02] active:scale-[0.98]", appearance === "shadow" && "shadow-sm", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", "bg-bg-base", className),
+	className: cn("rounded-xl transition-transform hover:scale-[1.02] active:scale-[0.98]", appearance === "shadow" && "shadow-sm", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", "bg-bg-base"),
 	children
 });
 //#endregion