@orcestr/ui 0.0.1 → 0.1.0

package/README.md

@@ -10,6 +10,10 @@
 
 # Orcestr UI
 
+## [Demo](https://orcestr.com/ui)
+
+Open the live example page to inspect Orcestr UI components and patterns in context.
+
 Shared React UI foundation for Orcestr products.
 
 Orcestr UI is a public component library extracted from real Orcestr product work. It collects the interface primitives we reuse across product surfaces: app shell patterns, dense operational controls, workflow states, overlays, form fields, data views, design tokens and theme infrastructure.

package/README.ru.md

@@ -10,6 +10,10 @@
 
 # Orcestr UI
 
+## [Demo](https://orcestr.com/ui)
+
+Открой live example page, чтобы посмотреть компоненты и паттерны Orcestr UI в контексте.
+
 Общая React UI-основа для продуктов Orcestr.
 
 Orcestr UI - публичная библиотека компонентов, выделенная из реальной продуктовой разработки Orcestr. Здесь собираются интерфейсные примитивы, которые переиспользуются в product surfaces: application shell, плотные операционные контролы, workflow-состояния, overlays, поля, data views, design tokens и инфраструктура темы.

package/dist/components/Alert/Alert.d.ts

@@ -1,11 +1,12 @@
 import type { HTMLAttributes, ReactNode } from 'react';
-import type { Tone } from '../../theme/systemProps';
-export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
-    tone?: Exclude<Tone, 'brand'>;
+import { type SystemProps, type ToneInput } from '../../theme/systemProps';
+export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & SystemProps & {
+    tone?: Exclude<ToneInput, 'primary' | 'secondary' | 'muted'>;
+    v?: 'soft' | 'surface';
     title?: ReactNode;
     icon?: ReactNode;
     action?: ReactNode;
     testId?: string;
 };
-export declare function Alert({ tone, title, icon, action, className, children, testId, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function Alert({ tone, v, title, icon, action, className, style, children, testId, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Alert.d.ts.map

package/dist/components/Alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,cAAc,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,yBAAyB,CAAC;AAIlD,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAAG;IACrE,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,KAAK,CAAC,EAClB,IAAa,EACb,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACX,EAAE,UAAU,2CAiBZ"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,cAAc,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAErD,OAAO,EAGH,KAAK,WAAW,EAChB,KAAK,SAAS,EACjB,MAAM,yBAAyB,CAAC;AAIjC,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GAClE,WAAW,GAAG;IACd,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC,CAAC;IAC7D,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,KAAK,CAAC,EAClB,IAAa,EACb,CAAU,EACV,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACX,EAAE,UAAU,2CAsBZ"}

package/dist/components/Alert/Alert.js

@@ -1,7 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { normalizeTone, splitSystemProps, } from '../../theme/systemProps';
 import { cn } from '../../utils/cn';
 import { stateIcon } from '../State/stateIcon';
-export function Alert({ tone = 'info', title, icon, action, className, children, testId, ...props }) {
-    return (_jsxs("div", { className: cn('oui-alert', className), "data-tone": tone, "data-testid": testId, role: tone === 'danger' ? 'alert' : 'status', ...props, children: [_jsx("span", { className: 'oui-alert-icon', children: icon ?? stateIcon(tone) }), _jsxs("span", { className: 'oui-alert-main', children: [title ? _jsx("strong", { children: title }) : null, children ? _jsx("span", { children: children }) : null] }), action ? _jsx("span", { className: 'oui-alert-action', children: action }) : null] }));
+export function Alert({ tone = 'info', v = 'soft', title, icon, action, className, style, children, testId, ...props }) {
+    const { systemStyle, restProps } = splitSystemProps(props);
+    const actualTone = normalizeTone(tone, 'info');
+    return (_jsxs("div", { className: cn('oui-alert', className), "data-tone": actualTone, "data-variant": v, "data-testid": testId, role: actualTone === 'danger' ? 'alert' : 'status', style: { ...systemStyle, ...style }, ...restProps, children: [_jsx("span", { className: 'oui-alert-icon', children: icon ?? stateIcon(actualTone) }), _jsxs("span", { className: 'oui-alert-main', children: [title ? _jsx("strong", { children: title }) : null, children ? _jsx("span", { children: children }) : null] }), action ? _jsx("span", { className: 'oui-alert-action', children: action }) : null] }));
 }

package/dist/components/AppShell/AppShell.d.ts

@@ -14,6 +14,7 @@ export type AppShellNavItem = {
 export type AppShellProps = ComponentPropsWithoutRef<'div'> & SystemProps & {
     sidebar: ReactNode;
     header?: ReactNode;
+    sidebarMode?: 'auto' | 'desktop' | 'mobile';
     sidebarOpen?: boolean;
     onSidebarOpenChange?: (open: boolean) => void;
     sidebarWidth?: number | string;
@@ -24,6 +25,7 @@ export type AppShellProps = ComponentPropsWithoutRef<'div'> & SystemProps & {
 export declare const AppShell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SystemProps & {
     sidebar: ReactNode;
     header?: ReactNode;
+    sidebarMode?: "auto" | "desktop" | "mobile";
     sidebarOpen?: boolean;
     onSidebarOpenChange?: (open: boolean) => void;
     sidebarWidth?: number | string;

package/dist/components/AppShell/AppShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.tsx"],"names":[],"mappings":"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"}

package/dist/components/AppShell/AppShell.js

@@ -11,9 +11,10 @@ import { IconButton } from '../IconButton/IconButton';
 import { ScrollArea } from '../ScrollArea/ScrollArea';
 import { Separator } from '../Separator/Separator';
 import { Text } from '../Text/Text';
-export const AppShell = forwardRef(function AppShell({ className, style, sidebar, header, sidebarOpen = false, onSidebarOpenChange, sidebarWidth = 260, maxWidth = 1440, contentInset = 28, children, testId, ...props }, ref) {
-    const [drawerMode, setDrawerMode] = useState(false);
+export const AppShell = forwardRef(function AppShell({ className, style, sidebar, header, sidebarMode = 'auto', sidebarOpen = false, onSidebarOpenChange, sidebarWidth = 260, maxWidth = 1440, contentInset = 28, children, testId, ...props }, ref) {
+    const [autoDrawerMode, setAutoDrawerMode] = useState(false);
     const { systemStyle, restProps } = splitSystemProps(props);
+    const drawerMode = sidebarMode === 'auto' ? autoDrawerMode : sidebarMode === 'mobile';
     const shellStyle = {
         '--oui-app-shell-sidebar-width': shellSizeValue(sidebarWidth),
         '--oui-app-shell-max-width': shellSizeValue(maxWidth),
@@ -22,13 +23,15 @@ export const AppShell = forwardRef(function AppShell({ className, style, sidebar
         ...style,
     };
     useEffect(() => {
+        if (sidebarMode !== 'auto')
+            return;
         const media = window.matchMedia('(max-width: 860px)');
-        const update = () => setDrawerMode(media.matches);
+        const update = () => setAutoDrawerMode(media.matches);
         update();
         media.addEventListener('change', update);
         return () => media.removeEventListener('change', update);
-    }, []);
-    return (_jsxs("div", { ref: ref, className: cn('oui-app-shell', className), "data-sidebar-open": sidebarOpen ? 'true' : 'false', "data-testid": testId, style: shellStyle, ...restProps, children: [header, _jsxs("div", { className: 'oui-app-shell-frame', children: [!drawerMode ? (_jsx("div", { className: 'oui-app-shell-sidebar-desktop', children: sidebar })) : null, drawerMode ? (_jsx(Drawer, { open: sidebarOpen, onOpenChange: (nextOpen) => onSidebarOpenChange?.(nextOpen), side: 'left', size: sidebarWidth, showCloseButton: false, panelClassName: 'oui-app-shell-sidebar-drawer-panel', bodyClassName: 'oui-app-shell-sidebar-drawer-body', testId: testId ? `${testId}-sidebar-drawer` : undefined, children: sidebar })) : null, _jsx("main", { className: 'oui-app-shell-main', children: children })] })] }));
+    }, [sidebarMode]);
+    return (_jsxs("div", { ref: ref, className: cn('oui-app-shell', className), "data-sidebar-open": sidebarOpen ? 'true' : 'false', "data-testid": testId, style: shellStyle, ...restProps, children: [header, _jsxs("div", { className: 'oui-app-shell-frame', children: [!drawerMode ? (_jsx("div", { className: 'oui-app-shell-sidebar-desktop', children: sidebar })) : null, drawerMode ? (_jsx(Drawer, { open: sidebarOpen, onOpenChange: (nextOpen) => onSidebarOpenChange?.(nextOpen), side: 'left', size: sidebarWidth, showCloseButton: false, backdropClassName: 'oui-app-shell-sidebar-drawer-overlay', panelClassName: 'oui-app-shell-sidebar-drawer-panel', bodyClassName: 'oui-app-shell-sidebar-drawer-body', testId: testId ? `${testId}-sidebar-drawer` : undefined, children: sidebar })) : null, _jsx("main", { className: 'oui-app-shell-main', children: children })] })] }));
 });
 export const AppShellHeader = forwardRef(function AppShellHeader({ className, style, title, actions, sidebarOpen = false, onSidebarOpenChange, navigationLabel, visibility = 'always', children, testId, ...props }, ref) {
     const { copy } = useOrcestrUiLocale();
@@ -72,7 +75,7 @@ export const AppShellNav = forwardRef(function AppShellNav({ className, style, i
 });
 export const PageTitleBlock = forwardRef(function PageTitleBlock({ className, style, title, caption, action, badge, testId, ...props }, ref) {
     const { systemStyle, restProps } = splitSystemProps(props);
-    return (_jsxs("div", { ref: ref, className: cn('oui-page-title-block', className), "data-testid": testId, style: { ...systemStyle, ...style }, ...restProps, children: [_jsxs("div", { className: 'oui-page-title-main', children: [_jsxs("div", { className: 'oui-page-title-row', children: [_jsx("h1", { className: 'oui-page-title', children: title }), badge ? _jsx(Badge, { tone: 'brand', children: badge }) : null] }), caption ? _jsx("p", { className: 'oui-page-title-caption', children: caption }) : null] }), action ? _jsx("div", { className: 'oui-page-title-actions', children: action }) : null] }));
+    return (_jsxs("div", { ref: ref, className: cn('oui-page-title-block', className), "data-testid": testId, style: { ...systemStyle, ...style }, ...restProps, children: [_jsxs("div", { className: 'oui-page-title-main', children: [_jsxs("div", { className: 'oui-page-title-row', children: [_jsx("h1", { className: 'oui-page-title', children: title }), badge ? _jsx(Badge, { tone: 'primary', children: badge }) : null] }), caption ? _jsx("p", { className: 'oui-page-title-caption', children: caption }) : null] }), action ? _jsx("div", { className: 'oui-page-title-actions', children: action }) : null] }));
 });
 function AppShellNavButton({ item, onNavigate, testId, }) {
     const content = (_jsxs(_Fragment, { children: [item.icon ? _jsx("span", { className: 'oui-app-shell-nav-icon', children: item.icon }) : null, _jsxs("span", { className: 'oui-app-shell-nav-text', children: [_jsx("span", { className: 'oui-app-shell-nav-label', children: item.label }), item.caption ? (_jsx("span", { className: 'oui-app-shell-nav-caption', children: item.caption })) : null] }), item.badge ? _jsx("span", { className: 'oui-app-shell-nav-badge', children: item.badge }) : null] }));

package/dist/components/AppSidebar/AppSidebar.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentPropsWithoutRef, type ElementType, type ReactNode } from 'react';
+import { type SystemProps } from '../../theme/systemProps';
+export type AppSidebarSide = 'left' | 'right';
+export type AppSidebarItem = {
+    key: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    href?: string;
+    component?: ElementType;
+    active?: boolean;
+    disabled?: boolean;
+    onSelect?: () => void;
+};
+export type AppSidebarGroup = {
+    key: string;
+    items: readonly AppSidebarItem[];
+};
+export type AppSidebarProps = Omit<ComponentPropsWithoutRef<'aside'>, 'title'> & SystemProps & {
+    header?: ReactNode;
+    groups: readonly AppSidebarGroup[];
+    footer?: ReactNode;
+    side?: AppSidebarSide;
+    itemH?: number;
+    onNavigate?: (item: AppSidebarItem) => void;
+    testId?: string;
+};
+export declare const AppSidebar: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & SystemProps & {
+    header?: ReactNode;
+    groups: readonly AppSidebarGroup[];
+    footer?: ReactNode;
+    side?: AppSidebarSide;
+    itemH?: number;
+    onNavigate?: (item: AppSidebarItem) => void;
+    testId?: string;
+} & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=AppSidebar.d.ts.map

package/dist/components/AppSidebar/AppSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/AppSidebar/AppSidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,KAAK,wBAAwB,EAE7B,KAAK,WAAW,EAChB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAK3E,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAE9C,MAAM,MAAM,cAAc,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAC1E,WAAW,GAAG;IACV,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,EAAE,SAAS,eAAe,EAAE,CAAC;IACnC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,UAAU;aATN,SAAS;YACV,SAAS,eAAe,EAAE;aACzB,SAAS;WACX,cAAc;YACb,MAAM;iBACD,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI;aAClC,MAAM;+CA6FrB,CAAC"}

package/dist/components/AppSidebar/AppSidebar.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useLayoutEffect, useRef, } from 'react';
+import { splitSystemProps } from '../../theme/systemProps';
+import { cn } from '../../utils/cn';
+import { ScrollArea } from '../ScrollArea/ScrollArea';
+import { Separator } from '../Separator/Separator';
+export const AppSidebar = forwardRef(function AppSidebar({ className, style, header, groups, footer, side = 'left', itemH = 40, onNavigate, testId, ...props }, ref) {
+    const contentRef = useRef(null);
+    const indicatorRef = useRef(null);
+    const activeKey = groups
+        .flatMap((group) => group.items)
+        .find((item) => item.active)?.key;
+    const { systemStyle, restProps } = splitSystemProps(props);
+    const sidebarStyle = {
+        '--oui-app-sidebar-item-h': `${itemH}px`,
+        ...systemStyle,
+        ...style,
+    };
+    useLayoutEffect(() => {
+        const root = contentRef.current;
+        const indicator = indicatorRef.current;
+        const activeItem = root?.querySelector('[data-sidebar-active="true"]');
+        if (!root || !indicator || !activeItem) {
+            if (indicator)
+                indicator.style.opacity = '0';
+            return;
+        }
+        const rootRect = root.getBoundingClientRect();
+        const itemRect = activeItem.getBoundingClientRect();
+        indicator.style.height = `${itemRect.height}px`;
+        indicator.style.transform = `translateY(${itemRect.top - rootRect.top}px)`;
+        indicator.style.opacity = '1';
+    }, [activeKey, groups]);
+    return (_jsxs("aside", { ref: ref, className: cn('oui-app-sidebar', className), "data-side": side, "data-testid": testId, style: sidebarStyle, ...restProps, children: [header ? _jsx("div", { className: 'oui-app-sidebar-head', children: header }) : null, _jsx(ScrollArea, { type: 'auto', scrollbars: 'vertical', className: 'oui-app-sidebar-scroll', children: _jsxs("div", { ref: contentRef, className: 'oui-app-sidebar-content', children: [_jsx("div", { ref: indicatorRef, className: 'oui-app-sidebar-indicator' }), _jsx("div", { className: 'oui-app-sidebar-groups', children: groups.map((group, index) => (_jsxs("div", { className: 'oui-app-sidebar-group', children: [index > 0 ? (_jsx(Separator, { className: 'oui-app-sidebar-separator' })) : null, _jsx("nav", { className: 'oui-app-sidebar-nav', children: group.items.map((item) => (_jsx(AppSidebarNavItem, { item: item, onNavigate: onNavigate }, item.key))) })] }, group.key))) })] }) }), footer ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: 'oui-app-sidebar-footer-separator' }), _jsx("div", { className: 'oui-app-sidebar-footer', children: footer })] })) : null] }));
+});
+function AppSidebarNavItem({ item, onNavigate, }) {
+    const content = (_jsxs(_Fragment, { children: [item.icon ? _jsx("span", { className: 'oui-app-sidebar-item-icon', children: item.icon }) : null, _jsx("span", { className: 'oui-app-sidebar-item-label', children: item.label })] }));
+    const commonProps = {
+        className: 'oui-app-sidebar-item',
+        'data-sidebar-active': item.active ? 'true' : undefined,
+        'aria-current': item.active ? 'page' : undefined,
+        onClick: () => {
+            item.onSelect?.();
+            onNavigate?.(item);
+        },
+    };
+    if (item.href && !item.disabled) {
+        const LinkComponent = item.component ?? 'a';
+        return (_jsx(LinkComponent, { href: item.href, ...commonProps, children: content }));
+    }
+    return (_jsx("button", { type: 'button', disabled: item.disabled, ...commonProps, children: content }));
+}

package/dist/components/Badge/Badge.d.ts

@@ -1,15 +1,17 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import { type SystemProps, type Tone, type UiSize } from '../../theme/systemProps';
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type SystemProps, type ToneInput, type UiSize } from '../../theme/systemProps';
 export type BadgeProps = ComponentPropsWithoutRef<'span'> & SystemProps & {
-    tone?: Tone;
+    tone?: ToneInput;
     size?: UiSize;
-    v?: 'soft' | 'solid' | 'outline';
+    v?: 'soft' | 'solid' | 'outline' | 'surface';
+    icon?: ReactNode;
     testId?: string;
 };
 export declare const Badge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & SystemProps & {
-    tone?: Tone;
+    tone?: ToneInput;
     size?: UiSize;
-    v?: "soft" | "solid" | "outline";
+    v?: "soft" | "solid" | "outline" | "surface";
+    icon?: ReactNode;
     testId?: string;
 } & import("react").RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,wBAAwB,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,EAEH,KAAK,WAAW,EAChB,KAAK,IAAI,EACT,KAAK,MAAM,EACd,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,UAAU,GAAG,wBAAwB,CAAC,MAAM,CAAC,GACrD,WAAW,GAAG;IACV,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,KAAK;WANH,IAAI;WACJ,MAAM;QACT,MAAM,GAAG,OAAO,GAAG,SAAS;aACvB,MAAM;mDA4BrB,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,wBAAwB,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhF,OAAO,EAEH,KAAK,WAAW,EAEhB,KAAK,SAAS,EACd,KAAK,MAAM,EAEd,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,UAAU,GAAG,wBAAwB,CAAC,MAAM,CAAC,GACrD,WAAW,GAAG;IACV,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,KAAK;WAPH,SAAS;WACT,MAAM;QACT,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS;WACrC,SAAS;aACP,MAAM;mDAiCrB,CAAC"}

package/dist/components/Badge/Badge.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cn } from '../../utils/cn';
-import { splitSystemProps, } from '../../theme/systemProps';
-export const Badge = forwardRef(function Badge({ className, style, tone = 'neutral', size = 2, v = 'soft', testId, ...props }, ref) {
+import { splitSystemProps, normalizeTone, } from '../../theme/systemProps';
+export const Badge = forwardRef(function Badge({ className, style, tone = 'neutral', size = 2, v = 'soft', icon, testId, children, ...props }, ref) {
     const { systemStyle, restProps } = splitSystemProps(props);
-    return (_jsx("span", { ref: ref, className: cn('oui-badge', className), "data-tone": tone, "data-size": size, "data-variant": v, "data-testid": testId, style: { ...systemStyle, ...style }, ...restProps }));
+    return (_jsxs("span", { ref: ref, className: cn('oui-badge', className), "data-tone": normalizeTone(tone), "data-size": size, "data-variant": v, "data-testid": testId, style: { ...systemStyle, ...style }, ...restProps, children: [icon ? _jsx("span", { className: 'oui-badge-icon', children: icon }) : null, children] }));
 });

package/dist/components/BadgeSelectMenu/BadgeSelectMenu.d.ts

@@ -0,0 +1,22 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type SystemProps, type ToneInput, type UiSize } from '../../theme/systemProps';
+export type BadgeSelectItem<V extends string = string> = {
+    value: V;
+    label: ReactNode;
+    disabled?: boolean;
+};
+export type BadgeSelectMenuProps<V extends string = string> = SystemProps & {
+    value: V | null;
+    items: ReadonlyArray<BadgeSelectItem<V>>;
+    onValueChange: (value: V) => void;
+    tone?: ToneInput;
+    width?: number | string;
+    maxHeight?: number;
+    disabled?: boolean;
+    size?: UiSize;
+    badgeStyle?: CSSProperties;
+    className?: string;
+    testId?: string;
+};
+export declare function BadgeSelectMenu<V extends string = string>({ value, items, onValueChange, tone, width, maxHeight, disabled, size, badgeStyle, className, testId, ...props }: BadgeSelectMenuProps<V>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BadgeSelectMenu.d.ts.map

package/dist/components/BadgeSelectMenu/BadgeSelectMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeSelectMenu.d.ts","sourceRoot":"","sources":["../../../src/components/BadgeSelectMenu/BadgeSelectMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAoB,KAAK,aAAa,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAK5E,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,KAAK,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAGxG,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACrD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,WAAW,GAAG;IACxE,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IACzC,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EACvD,KAAK,EACL,KAAK,EACL,aAAa,EACb,IAAgB,EAChB,KAAW,EACX,SAAe,EACf,QAAgB,EAChB,IAAI,EACJ,UAAU,EACV,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACX,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CA4FzB"}

package/dist/components/BadgeSelectMenu/BadgeSelectMenu.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { LuCheck } from 'react-icons/lu';
+import { Badge } from '../Badge/Badge';
+import { Popover } from '../Popover/Popover';
+import { splitSystemProps } from '../../theme/systemProps';
+import { cn } from '../../utils/cn';
+export function BadgeSelectMenu({ value, items, onValueChange, tone = 'neutral', width = 220, maxHeight = 280, disabled = false, size, badgeStyle, className, testId, ...props }) {
+    const [open, setOpen] = useState(false);
+    const [highlightedValue, setHighlightedValue] = useState(null);
+    const { systemStyle, restProps } = splitSystemProps(props);
+    const currentValue = value ?? items[0]?.value ?? null;
+    const currentItem = useMemo(() => items.find((item) => item.value === currentValue) ?? null, [currentValue, items]);
+    const currentLabel = currentItem?.label ?? currentValue;
+    const triggerBadge = (_jsx(Badge, { tone: tone, v: 'soft', r: 7, size: size, "data-state": open ? 'open' : 'closed', className: 'oui-badge-select-trigger', testId: testId, style: {
+            cursor: disabled ? 'default' : 'pointer',
+            flexShrink: 0,
+            opacity: disabled ? 0.6 : 1,
+            ...systemStyle,
+            ...badgeStyle,
+        }, children: currentLabel }));
+    if (disabled) {
+        return triggerBadge;
+    }
+    return (_jsx(Popover, { open: open, onOpenChange: (nextOpen) => {
+            setOpen(nextOpen);
+            if (!nextOpen)
+                setHighlightedValue(null);
+        }, trigger: triggerBadge, className: cn('oui-select-content oui-badge-select-content', className), contentStyle: {
+            width,
+            maxWidth: 320,
+        }, sideOffset: 4, testId: testId ? `${testId}-menu` : undefined, ...restProps, children: _jsx("div", { className: 'oui-combobox-scroll oui-combobox-options oui-badge-select-options', style: { maxHeight }, children: items.map((item) => {
+                const isSelected = item.value === currentValue;
+                const isHighlighted = item.value === highlightedValue;
+                return (_jsxs("button", { type: 'button', className: 'oui-combobox-option oui-badge-select-option', "data-selected": isSelected ? 'true' : 'false', "data-highlighted": isHighlighted ? 'true' : 'false', disabled: item.disabled, onMouseEnter: () => {
+                        if (!item.disabled)
+                            setHighlightedValue(item.value);
+                    }, onFocus: () => {
+                        if (!item.disabled)
+                            setHighlightedValue(item.value);
+                    }, onClick: () => {
+                        if (item.disabled)
+                            return;
+                        setOpen(false);
+                        setHighlightedValue(null);
+                        onValueChange(item.value);
+                    }, children: [_jsx("span", { className: 'oui-combobox-option-main', children: item.label }), isSelected ? (_jsx(LuCheck, { className: 'oui-combobox-check', size: 15 })) : null] }, item.value));
+            }) }) }));
+}

package/dist/components/Box/Box.d.ts

@@ -2,10 +2,12 @@ import { type ComponentPropsWithoutRef, type ElementType } from 'react';
 import { type SystemProps } from '../../theme/systemProps';
 export type BoxProps = ComponentPropsWithoutRef<'div'> & SystemProps & {
     as?: ElementType;
+    asChild?: boolean;
     testId?: string;
 };
 export declare const Box: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & SystemProps & {
     as?: ElementType;
+    asChild?: boolean;
     testId?: string;
 } & import("react").RefAttributes<HTMLElement>>;
 //# sourceMappingURL=Box.d.ts.map

package/dist/components/Box/Box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EACnB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAE3E,MAAM,MAAM,QAAQ,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAClD,WAAW,GAAG;IACV,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,GAAG;SAJH,WAAW;aACP,MAAM;+CAiBrB,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAEnB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAmB,KAAK,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAG3E,MAAM,MAAM,QAAQ,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAClD,WAAW,GAAG;IACV,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,GAAG;SALH,WAAW;cACN,OAAO;aACR,MAAM;+CA8BrB,CAAC"}

package/dist/components/Box/Box.js

@@ -2,7 +2,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, } from 'react';
 import { cn } from '../../utils/cn';
 import { splitSystemProps } from '../../theme/systemProps';
-export const Box = forwardRef(function Box({ as: Component = 'div', className, style, testId, ...props }, ref) {
+import { renderSlot } from '../../utils/slot';
+export const Box = forwardRef(function Box({ as: Component = 'div', asChild = false, className, style, testId, children, ...props }, ref) {
     const { systemStyle, restProps } = splitSystemProps(props);
-    return (_jsx(Component, { ref: ref, className: cn('oui-box', className), "data-testid": testId, style: { ...systemStyle, ...style }, ...restProps }));
+    const commonProps = {
+        className: cn('oui-box', className),
+        'data-testid': testId,
+        style: { ...systemStyle, ...style },
+        ...restProps,
+    };
+    if (asChild) {
+        return renderSlot(children, {
+            ...commonProps,
+            ref: ref,
+        });
+    }
+    return (_jsx(Component, { ref: ref, ...commonProps, children: children }));
 });

package/dist/components/Button/Button.d.ts

@@ -1,27 +1,31 @@
 import { type ButtonHTMLAttributes, type ReactNode } from 'react';
-import { type SystemProps, type Tone, type UiSize } from '../../theme/systemProps';
+import { type SystemProps, type ToneInput, type UiSize } from '../../theme/systemProps';
 import type { ButtonPressAnimation } from '../../theme/themeTypes';
 export type ButtonVariant = 'solid' | 'soft' | 'surface' | 'pad' | 'ghost' | 'outline';
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & SystemProps & {
     size?: UiSize;
     v?: ButtonVariant;
-    tone?: Tone;
+    tone?: ToneInput;
     loading?: boolean;
     fullWidth?: boolean;
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     pressAnimation?: ButtonPressAnimation;
+    asChild?: boolean;
+    children?: ReactNode;
     testId?: string;
 };
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & SystemProps & {
     size?: UiSize;
     v?: ButtonVariant;
-    tone?: Tone;
+    tone?: ToneInput;
     loading?: boolean;
     fullWidth?: boolean;
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     pressAnimation?: ButtonPressAnimation;
+    asChild?: boolean;
+    children?: ReactNode;
     testId?: string;
 } & import("react").RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGH,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAEH,KAAK,WAAW,EAChB,KAAK,IAAI,EACT,KAAK,MAAM,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAGjE,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvF,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAC7D,WAAW,GAAG;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,CAAC,EAAE,aAAa,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,MAAM;WAXJ,MAAM;QACT,aAAa;WACV,IAAI;cACD,OAAO;gBACL,OAAO;eACR,SAAS;gBACR,SAAS;qBACJ,oBAAoB;aAC5B,MAAM;qDAgDrB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGH,KAAK,oBAAoB,EAEzB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAEH,KAAK,WAAW,EAEhB,KAAK,SAAS,EACd,KAAK,MAAM,EAEd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAIjE,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvF,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAC7D,WAAW,GAAG;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,CAAC,EAAE,aAAa,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEN,eAAO,MAAM,MAAM;WAbJ,MAAM;QACT,aAAa;WACV,SAAS;cACN,OAAO;gBACL,OAAO;eACR,SAAS;gBACR,SAAS;qBACJ,oBAAoB;cAC3B,OAAO;eACN,SAAS;aACX,MAAM;qDA6DrB,CAAC"}

package/dist/components/Button/Button.js

@@ -2,12 +2,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, } from 'react';
 import { cn } from '../../utils/cn';
-import { splitSystemProps, } from '../../theme/systemProps';
+import { splitSystemProps, normalizeTone, } from '../../theme/systemProps';
 import { OrcestrThemeContext } from '../../theme/useTheme';
+import { renderSlot } from '../../utils/slot';
 import { Spinner } from '../Spinner/Spinner';
-export const Button = forwardRef(function Button({ className, style, size = 3, v = 'solid', tone = 'neutral', loading = false, fullWidth = false, leftIcon, rightIcon, pressAnimation, testId, children, disabled, type = 'button', ...props }, ref) {
+export const Button = forwardRef(function Button({ className, style, size = 3, v = 'solid', tone = 'neutral', loading = false, fullWidth = false, leftIcon, rightIcon, pressAnimation, asChild = false, testId, children, disabled, type = 'button', ...props }, ref) {
     const themeContext = useContext(OrcestrThemeContext);
     const actualPressAnimation = pressAnimation ?? themeContext?.theme.motion.pressAnimation ?? 'soft';
     const { systemStyle, restProps } = splitSystemProps(props);
-    return (_jsxs("button", { ref: ref, type: type, className: cn('oui-button', fullWidth && 'oui-button-full', className), "data-size": size, "data-variant": v, "data-tone": tone, "data-press-animation": actualPressAnimation, "data-loading": loading ? 'true' : undefined, "data-testid": testId, "aria-busy": loading ? 'true' : undefined, disabled: disabled || loading, style: { ...systemStyle, ...style }, ...restProps, children: [loading ? _jsx(Spinner, { size: 1 }) : leftIcon, _jsx("span", { className: 'oui-button-label', children: children }), rightIcon] }));
+    const commonProps = {
+        className: cn('oui-button', fullWidth && 'oui-button-full', className),
+        'data-size': size,
+        'data-variant': v,
+        'data-tone': normalizeTone(tone),
+        'data-press-animation': actualPressAnimation,
+        'data-loading': loading ? 'true' : undefined,
+        'data-testid': testId,
+        'aria-busy': loading || undefined,
+        style: { ...systemStyle, ...style },
+        ...restProps,
+    };
+    if (asChild) {
+        return renderSlot(children, {
+            ...commonProps,
+            ref: ref,
+            'aria-disabled': disabled || loading ? true : undefined,
+        });
+    }
+    return (_jsxs("button", { ref: ref, type: type, ...commonProps, disabled: disabled || loading, children: [loading ? _jsx(Spinner, { size: 1 }) : leftIcon, _jsx("span", { className: 'oui-button-label', children: children }), rightIcon] }));
 });

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentPropsWithoutRef, type ElementType, type ReactNode } from 'react';
+import { type SystemProps, type UiSize } from '../../theme/systemProps';
+export type CardVariant = 'ghost' | 'surface' | 'soft' | 'classic';
+export type CardProps<C extends ElementType = 'div'> = SystemProps & {
+    as?: C;
+    children?: ReactNode;
+    className?: string;
+    style?: ComponentPropsWithoutRef<'div'>['style'];
+    size?: UiSize;
+    v?: CardVariant;
+    interactive?: boolean;
+    asChild?: boolean;
+    testId?: string;
+} & Omit<ComponentPropsWithoutRef<C>, keyof SystemProps | 'as' | 'children' | 'className' | 'style' | 'size'>;
+export declare const Card: import("react").ForwardRefExoticComponent<SystemProps & {
+    as?: "div" | undefined;
+    children?: ReactNode;
+    className?: string;
+    style?: ComponentPropsWithoutRef<"div">["style"];
+    size?: UiSize;
+    v?: CardVariant;
+    interactive?: boolean;
+    asChild?: boolean;
+    testId?: string;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SystemProps | "children" | "style" | "className" | "as"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAEhB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAIxF,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AAEnE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,WAAW,GAAG;IACjE,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,wBAAwB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,CAAC,EAAE,WAAW,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAE9G,eAAO,MAAM,IAAI;;eAVF,SAAS;gBACR,MAAM;YACV,wBAAwB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;WACzC,MAAM;QACT,WAAW;kBACD,OAAO;cACX,OAAO;aACR,MAAM;wOA6CjB,CAAC"}

package/dist/components/Card/Card.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from 'react';
+import { splitSystemProps } from '../../theme/systemProps';
+import { cn } from '../../utils/cn';
+import { renderSlot } from '../../utils/slot';
+export const Card = forwardRef(function Card({ as, className, style, size = 2, v = 'ghost', interactive = false, asChild = false, testId, children, ...props }, ref) {
+    const Component = as ?? 'div';
+    const { systemStyle, restProps } = splitSystemProps(props);
+    const commonProps = {
+        className: cn('oui-card', className),
+        'data-size': size,
+        'data-variant': v,
+        'data-interactive': interactive ? 'true' : undefined,
+        'data-testid': testId,
+        style: { ...systemStyle, ...style },
+        ...restProps,
+    };
+    if (asChild) {
+        return renderSlot(children, {
+            ...commonProps,
+            ref: ref,
+        });
+    }
+    return (_jsx(Component, { ref: ref, ...commonProps, children: children }));
+});

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,10 +1,14 @@
 import { type InputHTMLAttributes, type ReactNode } from 'react';
-export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked'> & {
     label?: ReactNode;
+    checked?: boolean | 'indeterminate';
+    onCheckedChange?: (checked: boolean) => void;
     testId?: string;
 };
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "checked"> & {
     label?: ReactNode;
+    checked?: boolean | "indeterminate";
+    onCheckedChange?: (checked: boolean) => void;
     testId?: string;
 } & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAAG;IAC9E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,QAAQ;YAJT,SAAS;aACR,MAAM;oDA+ClB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAMH,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACjB,MAAM,OAAO,CAAC;AAMf,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,GAAG;IAC1F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACpC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,QAAQ;YANT,SAAS;cACP,OAAO,GAAG,eAAe;sBACjB,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI;aACnC,MAAM;oDA2DlB,CAAC"}

package/dist/components/Checkbox/Checkbox.js

@@ -1,15 +1,24 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, } from 'react';
-import { LuCheck } from 'react-icons/lu';
+import { forwardRef, useEffect, useRef, useState, } from 'react';
+import { LuCheck, LuMinus } from 'react-icons/lu';
 import { cn } from '../../utils/cn';
-export const Checkbox = forwardRef(function Checkbox({ className, label, children, checked, defaultChecked, disabled, onChange, testId, ...props }, ref) {
+import { composeRefs } from '../../utils/composeRefs';
+export const Checkbox = forwardRef(function Checkbox({ className, label, children, checked, defaultChecked, disabled, onChange, onCheckedChange, testId, dangerouslySetInnerHTML: _dangerouslySetInnerHTML, ...props }, ref) {
+    const inputRef = useRef(null);
     const [internalChecked, setInternalChecked] = useState(Boolean(defaultChecked));
     const actualChecked = checked ?? internalChecked;
+    const inputChecked = actualChecked === 'indeterminate' ? false : actualChecked;
     const handleChange = (event) => {
         if (checked === undefined)
             setInternalChecked(event.target.checked);
         onChange?.(event);
+        onCheckedChange?.(event.target.checked);
     };
-    return (_jsxs("label", { className: cn('oui-checkbox', className), "data-checked": actualChecked ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, "data-testid": testId, children: [_jsx("input", { ref: ref, type: 'checkbox', checked: actualChecked, disabled: disabled, onChange: handleChange, ...props }), _jsx("span", { className: 'oui-checkbox-box', children: _jsx(LuCheck, { size: 13 }) }), label || children ? _jsx("span", { children: label ?? children }) : null] }));
+    useEffect(() => {
+        if (!inputRef.current)
+            return;
+        inputRef.current.indeterminate = actualChecked === 'indeterminate';
+    }, [actualChecked]);
+    return (_jsxs("label", { className: cn('oui-checkbox', className), "data-checked": actualChecked === true ? 'true' : undefined, "data-indeterminate": actualChecked === 'indeterminate' ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, "data-testid": testId, children: [_jsx("input", { ref: composeRefs(inputRef, ref), type: 'checkbox', checked: inputChecked, disabled: disabled, onChange: handleChange, ...props }), _jsxs("span", { className: 'oui-checkbox-box', children: [_jsx(LuCheck, { className: 'oui-checkbox-check', size: 13 }), _jsx(LuMinus, { className: 'oui-checkbox-minus', size: 13 })] }), label || children ? _jsx("span", { children: label ?? children }) : null] }));
 });