@orcestr/ui 0.0.3 → 0.1.1

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

@@ -11,12 +11,18 @@ export type AppShellNavItem = {
     href?: string;
     onSelect?: () => void;
 };
+export type AppShellSide = 'left' | 'right';
 export type AppShellProps = ComponentPropsWithoutRef<'div'> & SystemProps & {
     sidebar: ReactNode;
     header?: ReactNode;
+    sidebarMode?: 'auto' | 'desktop' | 'mobile';
+    sidebarSide?: AppShellSide;
     sidebarOpen?: boolean;
+    desktopSidebarOpen?: boolean;
     onSidebarOpenChange?: (open: boolean) => void;
     sidebarWidth?: number | string;
+    headerHeight?: number | string;
+    mobileBreakpoint?: number;
     maxWidth?: number | string;
     contentInset?: number | string;
     testId?: string;
@@ -24,9 +30,14 @@ 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";
+    sidebarSide?: AppShellSide;
     sidebarOpen?: boolean;
+    desktopSidebarOpen?: boolean;
     onSidebarOpenChange?: (open: boolean) => void;
     sidebarWidth?: number | string;
+    headerHeight?: number | string;
+    mobileBreakpoint?: number;
     maxWidth?: number | string;
     contentInset?: number | string;
     testId?: string;
@@ -37,6 +48,7 @@ export type AppShellHeaderProps = Omit<ComponentPropsWithoutRef<'header'>, 'titl
     sidebarOpen?: boolean;
     onSidebarOpenChange?: (open: boolean) => void;
     navigationLabel?: string;
+    navigationVisibility?: 'always' | 'mobile';
     visibility?: 'always' | 'mobile';
     testId?: string;
 };
@@ -46,6 +58,7 @@ export declare const AppShellHeader: import("react").ForwardRefExoticComponent<O
     sidebarOpen?: boolean;
     onSidebarOpenChange?: (open: boolean) => void;
     navigationLabel?: string;
+    navigationVisibility?: "always" | "mobile";
     visibility?: "always" | "mobile";
     testId?: string;
 } & import("react").RefAttributes<HTMLElement>>;

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,31 +11,36 @@ 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', sidebarSide = 'left', sidebarOpen = false, desktopSidebarOpen = true, onSidebarOpenChange, sidebarWidth = 260, headerHeight = 56, mobileBreakpoint = 860, maxWidth = 1440, contentInset = 28, children, testId, ...props }, ref) {
+    const [autoDrawerMode, setAutoDrawerMode] = useState(false);
+    const [drawerPortalContainer, setDrawerPortalContainer] = useState(null);
     const { systemStyle, restProps } = splitSystemProps(props);
+    const drawerMode = sidebarMode === 'auto' ? autoDrawerMode : sidebarMode === 'mobile';
     const shellStyle = {
         '--oui-app-shell-sidebar-width': shellSizeValue(sidebarWidth),
+        '--oui-app-shell-header-h': shellSizeValue(headerHeight),
         '--oui-app-shell-max-width': shellSizeValue(maxWidth),
         '--oui-app-shell-inset': shellSizeValue(contentInset),
         ...systemStyle,
         ...style,
     };
     useEffect(() => {
-        const media = window.matchMedia('(max-width: 860px)');
-        const update = () => setDrawerMode(media.matches);
+        if (sidebarMode !== 'auto')
+            return;
+        const media = window.matchMedia(`(max-width: ${mobileBreakpoint}px)`);
+        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 })] })] }));
+    }, [mobileBreakpoint, sidebarMode]);
+    return (_jsxs("div", { ref: ref, className: cn('oui-app-shell', className), "data-sidebar-open": sidebarOpen ? 'true' : 'false', "data-desktop-sidebar-open": desktopSidebarOpen ? 'true' : 'false', "data-sidebar-side": sidebarSide, "data-sidebar-mode": drawerMode ? 'mobile' : 'desktop', "data-has-header": header ? 'true' : undefined, "data-testid": testId, style: shellStyle, ...restProps, children: [_jsxs("div", { className: 'oui-app-shell-frame', children: [!drawerMode ? (_jsx("div", { className: 'oui-app-shell-sidebar-desktop', children: sidebar })) : null, drawerMode && drawerPortalContainer ? (_jsx(Drawer, { open: sidebarOpen, onOpenChange: (nextOpen) => onSidebarOpenChange?.(nextOpen), side: sidebarSide, size: sidebarWidth, lockScroll: false, portalContainer: drawerPortalContainer, 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, _jsxs("main", { className: 'oui-app-shell-main', children: [header, children] })] }), drawerMode ? (_jsx("div", { ref: setDrawerPortalContainer, className: 'oui-app-shell-drawer-root' })) : null] }));
 });
-export const AppShellHeader = forwardRef(function AppShellHeader({ className, style, title, actions, sidebarOpen = false, onSidebarOpenChange, navigationLabel, visibility = 'always', children, testId, ...props }, ref) {
+export const AppShellHeader = forwardRef(function AppShellHeader({ className, style, title, actions, sidebarOpen = false, onSidebarOpenChange, navigationLabel, navigationVisibility = 'always', visibility = 'always', children, testId, ...props }, ref) {
     const { copy } = useOrcestrUiLocale();
     const actualNavigationLabel = navigationLabel ??
         (sidebarOpen ? copy.common.closeNavigation : copy.common.openNavigation);
     const { systemStyle, restProps } = splitSystemProps(props);
-    return (_jsxs("header", { ref: ref, className: cn('oui-app-shell-header', className), "data-visibility": visibility, "data-testid": testId, style: { ...systemStyle, ...style }, ...restProps, children: [onSidebarOpenChange ? (_jsx(IconButton, { v: 'pad', icon: sidebarOpen ? _jsx(LuX, { size: 19 }) : _jsx(LuMenu, { size: 19 }), "aria-label": actualNavigationLabel, "aria-expanded": sidebarOpen, onClick: () => onSidebarOpenChange(!sidebarOpen) })) : null, title ? _jsx("div", { className: 'oui-app-shell-header-title', children: title }) : null, children, actions ? _jsx("div", { className: 'oui-app-shell-header-actions', children: actions }) : null] }));
+    return (_jsxs("header", { ref: ref, className: cn('oui-app-shell-header', className), "data-visibility": visibility, "data-testid": testId, style: { ...systemStyle, ...style }, ...restProps, children: [onSidebarOpenChange ? (_jsx(IconButton, { className: 'oui-app-shell-header-nav-button', v: 'pad', icon: sidebarOpen ? _jsx(LuX, { size: 19 }) : _jsx(LuMenu, { size: 19 }), "aria-label": actualNavigationLabel, "aria-expanded": sidebarOpen, "data-navigation-visibility": navigationVisibility, onClick: () => onSidebarOpenChange(!sidebarOpen) })) : null, title ? _jsx("div", { className: 'oui-app-shell-header-title', children: title }) : null, children, actions ? _jsx("div", { className: 'oui-app-shell-header-actions', children: actions }) : null] }));
 });
 export const AppShellSidebar = forwardRef(function AppShellSidebar({ className, style, title, description, footer, onClose, closeLabel, children, testId, ...props }, ref) {
     const { copy } = useOrcestrUiLocale();
@@ -72,7 +77,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,EAKH,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;+CA0JrB,CAAC"}

package/dist/components/AppSidebar/AppSidebar.js

@@ -0,0 +1,117 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, 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 indicatorPlacedRef = useRef(false);
+    const transitionFrameRef = useRef(0);
+    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,
+    };
+    const updateActiveIndicator = useCallback((animate = true) => {
+        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 itemHeight = activeItem.offsetHeight;
+        if (itemHeight <= 0) {
+            indicator.style.opacity = '0';
+            return;
+        }
+        const skipTransition = !indicatorPlacedRef.current || !animate;
+        if (skipTransition) {
+            cancelAnimationFrame(transitionFrameRef.current);
+            indicator.style.transition = 'none';
+        }
+        indicator.style.height = `${itemHeight}px`;
+        indicator.style.transform = `translateY(${sidebarItemOffsetTop(root, activeItem)}px)`;
+        indicator.style.opacity = '1';
+        if (skipTransition) {
+            indicatorPlacedRef.current = true;
+            indicator.getBoundingClientRect();
+            transitionFrameRef.current = requestAnimationFrame(() => {
+                indicator.style.transition = '';
+            });
+        }
+    }, []);
+    useLayoutEffect(() => {
+        const root = contentRef.current;
+        const indicator = indicatorRef.current;
+        if (!root || !indicator) {
+            if (indicator)
+                indicator.style.opacity = '0';
+            return;
+        }
+        if (!indicatorPlacedRef.current) {
+            updateActiveIndicator(false);
+        }
+        let frame = 0;
+        let nextFrame = 0;
+        const scheduleUpdate = () => {
+            cancelAnimationFrame(frame);
+            cancelAnimationFrame(nextFrame);
+            frame = requestAnimationFrame(() => {
+                nextFrame = requestAnimationFrame(() => updateActiveIndicator());
+            });
+        };
+        scheduleUpdate();
+        let resizeObserver = null;
+        if (typeof ResizeObserver !== 'undefined') {
+            resizeObserver = new ResizeObserver(scheduleUpdate);
+            resizeObserver.observe(root);
+            const activeItem = root.querySelector('[data-sidebar-active="true"]');
+            if (activeItem)
+                resizeObserver.observe(activeItem);
+        }
+        window.addEventListener('resize', scheduleUpdate);
+        return () => {
+            cancelAnimationFrame(frame);
+            cancelAnimationFrame(nextFrame);
+            cancelAnimationFrame(transitionFrameRef.current);
+            resizeObserver?.disconnect();
+            window.removeEventListener('resize', scheduleUpdate);
+        };
+    }, [activeKey, groups, updateActiveIndicator]);
+    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 sidebarItemOffsetTop(root, item) {
+    let top = 0;
+    let node = item;
+    while (node && node !== root) {
+        top += node.offsetTop;
+        node = node.offsetParent;
+    }
+    return node === root ? top : item.offsetTop;
+}
+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"}