@cladd-ui/react 0.0.1 → 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 cladd-ui
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,3 @@
 # Cladd UI
 
-Coming soon
+Coming soon

package/components/Backdrop.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode, Ref, HTMLAttributes } from 'react';
+export interface BackdropProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const Backdrop: (props: BackdropProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Backdrop.d.ts.map

package/components/Backdrop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,4CAY5C,CAAC"}

package/components/Backdrop.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../shared/cn';
+export const Backdrop = (props) => {
+    const { className = '', children, ref, ...rest } = props;
+    return (_jsx("div", { ref: ref, className: cn('backdrop fixed inset-0 z-50 bg-backdrop/90', className), ...rest, children: children }));
+};
+//# sourceMappingURL=Backdrop.js.map

package/components/Backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../../src/components/Backdrop.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAQlC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEzD,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,4CAA4C,EAAE,SAAS,CAAC,KAClE,IAAI,YAEP,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/components/BlockTitle.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode, Ref, ComponentPropsWithoutRef } from 'react';
+interface BlockTitleOwnProps {
+    children?: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export type BlockTitleProps = BlockTitleOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof BlockTitleOwnProps>;
+export declare const BlockTitle: (props: BlockTitleProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=BlockTitle.d.ts.map

package/components/BlockTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTitle.d.ts","sourceRoot":"","sources":["../../../src/components/BlockTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAIjE,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAC9C,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC;AAElE,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CAehD,CAAC"}

package/components/BlockTitle.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../shared/cn';
+export const BlockTitle = (props) => {
+    const { children, className = '', ref, ...rest } = props;
+    return (_jsx("div", { ref: ref, className: cn('block-title flex items-end gap-4 text-xs font-medium text-on-surface-dark uppercase select-none', className), ...rest, children: children }));
+};
+//# sourceMappingURL=BlockTitle.js.map

package/components/BlockTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTitle.js","sourceRoot":"","sources":["../../../src/components/BlockTitle.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAWlC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IACnD,MAAM,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEzD,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,iGAAiG,EACjG,SAAS,CACV,KACG,IAAI,YAEP,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/components/Button.d.ts

@@ -0,0 +1,61 @@
+import { ElementType, ReactNode, Ref, CSSProperties, ComponentPropsWithoutRef } from 'react';
+import { Color } from '../types';
+import { SurfaceVariant } from './Surface';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ButtonSurface = 'surface' | 'cut';
+interface ButtonOwnProps<C extends ElementType = 'button'> {
+    /** Button content (label, icons, etc.). */
+    children?: ReactNode;
+    /** Extra classes for the button surface root. */
+    className?: string;
+    /** Visually dim the button (40% opacity) and disable pointer events. */
+    disabled?: boolean;
+    /** Block clicks while keeping the button visually enabled - useful for "selected" segmented buttons. */
+    readOnly?: boolean;
+    /** When `true`, applies fully rounded corners (`rounded-full`, or matching pill radius for `multiline`). Default size-specific corner radii are used when `false`. */
+    rounded?: boolean;
+    size?: ButtonSize;
+    /**
+     * Polymorphic element to render. Defaults to `'button'`. Pass `'a'` for links
+     * (cursor switches to pointer automatically), or any custom component to retain
+     * Button styling on a different DOM node. The component's own props become valid here.
+     */
+    component?: C;
+    /** Underlying `Surface` variant - see `SurfaceVariant`. Defaults to `'gradient'`. */
+    variant?: SurfaceVariant;
+    /** Accent color token. Sets the button's `color-{name}` class - drives text and ring colors. */
+    color?: Color;
+    /** Render the surface outline ring. Defaults to `true`. */
+    outline?: boolean;
+    /** Extra classes for the inner content row. */
+    contentClassName?: string;
+    /** Native `style` forwarded to the surface root. */
+    style?: CSSProperties;
+    /** Force the focus ring on, regardless of actual keyboard focus. */
+    focused?: boolean;
+    /** Force the pressed visual state, regardless of pointer activity. */
+    pressed?: boolean;
+    /** Allow text to wrap onto multiple lines, switching height to `min-h-*` and using pill radii compatible with multi-line content. */
+    multiline?: boolean;
+    /**
+     * Which surface primitive to wrap with:
+     * - `'surface'` (default) - uses `Surface` (standard tinted/outlined panel).
+     * - `'cut'` - uses `SurfaceCut` (inset/recessed look - for buttons that sit inside another surface).
+     */
+    surface?: ButtonSurface;
+    /** Forwarded to the underlying surface. Defaults to `true`; suppressed automatically when `disabled` or `readOnly`. */
+    clickable?: boolean;
+    /** Forwarded to the underlying surface. Defaults to `true`; suppressed automatically when `disabled` or `readOnly`. */
+    hoverable?: boolean;
+    /** When `true` (default), renders a `FocusableLayer` ring on keyboard focus. Suppressed automatically when `disabled` or `readOnly`. */
+    focusable?: boolean;
+    /** Forwarded to the underlying `Surface` as `level` - see `SurfaceProps.level` for the relative-offset (`"+1"`/`"-1"`) syntax. */
+    surfaceLevel?: string | number;
+    /** Forwarded to the polymorphic root element. */
+    ref?: Ref<HTMLElement>;
+}
+export type ButtonProps<C extends ElementType = 'button'> = ButtonOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof ButtonOwnProps<C>>;
+export declare const buttonIconSizes: Record<ButtonSize, string>;
+export declare const Button: <C extends ElementType = "button">(props: ButtonProps<C>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Button.d.ts.map

package/components/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,SAAS,EACT,GAAG,EACH,aAAa,EACb,wBAAwB,EACzB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,OAAO,EAAW,cAAc,EAAE,MAAM,WAAW,CAAC;AAGpD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAC3D,KAAK,aAAa,GAAG,SAAS,GAAG,KAAK,CAAC;AAEvC,UAAU,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ;IACvD,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sKAAsK;IACtK,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC;IACd,qFAAqF;IACrF,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,gGAAgG;IAChG,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qIAAqI;IACrI,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,uHAAuH;IACvH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uHAAuH;IACvH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wIAAwI;IACxI,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kIAAkI;IAClI,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAAI,cAAc,CAAC,CAAC,CAAC,GAC3E,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAE7D,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAMtD,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,GAAG,QAAQ,EACrD,OAAO,WAAW,CAAC,CAAC,CAAC,4CAsJtB,CAAC"}

package/components/Button.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, } from 'react';
+import { cn } from '../shared/cn';
+import { FocusableLayer } from './FocusableLayer';
+import { Surface } from './Surface';
+import { SurfaceCut } from './SurfaceCut';
+export const buttonIconSizes = {
+    sm: '[&>svg]:size-4',
+    md: '[&>svg]:size-4',
+    lg: '[&>svg]:size-4',
+    xl: '[&>svg]:size-4',
+    '2xl': '[&>svg]:size-4',
+};
+export const Button = (props) => {
+    const elRef = useRef(null);
+    const { children, className = '', disabled = false, readOnly, rounded = false, size = 'md', component = 'button', color = '', outline = true, contentClassName = '', variant = 'gradient', style, focused = false, pressed, multiline, surface: propSurface = 'surface', clickable = true, hoverable = true, focusable = true, surfaceLevel, ref, ...rest } = props;
+    let surface = propSurface || 'surface';
+    const heights = {
+        sm: multiline ? 'min-h-[24px]' : 'h-6',
+        md: multiline ? 'min-h-[28px]' : 'h-7',
+        lg: multiline ? 'min-h-[32px]' : 'h-9',
+        xl: multiline ? 'min-h-[40px]' : 'h-10',
+        '2xl': multiline ? 'min-h-[48px]' : 'h-12',
+    };
+    const roundedFullMultiline = {
+        sm: 'rounded-[12px]',
+        md: 'rounded-[14px]',
+        lg: 'rounded-[16px]',
+        xl: 'rounded-[20px]',
+        '2xl': 'rounded-[24px]',
+    };
+    const roundedSizes = {
+        sm: 'rounded-md',
+        md: 'rounded-lg',
+        lg: 'rounded-[10px]',
+        xl: 'rounded-xl',
+        '2xl': 'rounded-2xl',
+    };
+    const focusRoundedSizes = {
+        sm: 'rounded-[12px]',
+        md: 'rounded-[14px]',
+        lg: 'rounded-[16px]',
+        xl: 'rounded-[18px]',
+        '2xl': 'rounded-[22px]',
+    };
+    const paddings = {
+        sm: 'px-2.5',
+        md: 'px-2.5',
+        lg: 'px-2.5',
+        xl: 'px-2.5',
+        '2xl': 'px-3.5',
+    };
+    const fontSizes = {
+        sm: 'text-xs',
+        md: 'text-xs',
+        lg: 'text-xs',
+        xl: 'text-xs',
+        '2xl': 'text-xs',
+    };
+    const isSurfaceCut = surface === 'cut';
+    const WrapComponent = isSurfaceCut ? SurfaceCut : Surface;
+    const isFill = variant === 'solid-fill' || variant === 'gradient-fill';
+    return (_jsx(WrapComponent, { component: component, className: cn(`button group/button inline-block appearance-none text-left font-semibold outline-0 select-none focus:ring-0 focus:outline-0`, color &&
+            color !== 'neutral' &&
+            cn(isFill ? 'text-on-primary' : 'text-primary'), color && color === 'neutral' && isFill && 'text-on-primary', fontSizes[size], heights[size], disabled && 'pointer-events-none', !disabled && component === 'a' ? 'cursor-pointer' : 'cursor-auto', rounded
+            ? multiline
+                ? roundedFullMultiline[size]
+                : 'rounded-full'
+            : roundedSizes[size], className), contentClassName: cn('flex w-full items-center justify-center gap-2 py-1 [&>svg]:shrink-0', multiline && heights[size], buttonIconSizes[size], disabled && 'opacity-40', paddings[size], contentClassName), pressed: pressed, tabIndex: disabled || readOnly ? -1 : undefined, variant: variant, outline: outline, clickable: clickable && !disabled && !readOnly, hoverable: hoverable && !disabled && !readOnly, disabled: disabled || readOnly, level: surfaceLevel, 
+        // {...enabledDisabledProps}
+        ref: (el) => {
+            elRef.current = el;
+            if (ref && typeof ref === 'function') {
+                ref(el);
+            }
+            else if (ref) {
+                ref.current = el;
+            }
+        }, onContextMenuCapture: (e) => e.preventDefault(), color: color, style: style, beforeContent: focusable &&
+            !readOnly &&
+            !disabled && (_jsx(FocusableLayer, { group: "button", className: cn(!rounded && focusRoundedSizes[size], rounded && 'rounded-full') })), ...rest, children: children }));
+};
+//# sourceMappingURL=Button.js.map

package/components/Button.js.map

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

package/components/Checkbox.d.ts

@@ -0,0 +1,57 @@
+import { ElementType, ChangeEvent, MouseEvent, PointerEvent, ComponentPropsWithoutRef } from 'react';
+import { Color } from '../types';
+export type CheckboxSize = 'sm' | 'md';
+interface CheckboxOwnProps<C extends ElementType = 'label'> {
+    /** Controlled checked state. Default `false`. */
+    checked?: boolean;
+    /** Visually dim the checkbox and disable interaction. */
+    disabled?: boolean;
+    /** Block toggling without the disabled visual treatment - useful for "locked" states. */
+    readOnly?: boolean;
+    /** Native `value` - submitted with the form when `checked`. */
+    value?: string;
+    /** Native `name` - used for form submission and to group radio-like checkboxes. */
+    name?: string;
+    size?: CheckboxSize;
+    required?: boolean;
+    /** Fires when the user toggles the checkbox. First arg is the new checked state, second is the raw event (when fired by the hidden `<input>`). */
+    onChange?: (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (e: MouseEvent) => void;
+    onPointerDown?: (e: PointerEvent) => void;
+    /**
+     * When `true` (default), renders a hidden native `<input type="checkbox">` for form submission
+     * and accessibility. When `false`, the component falls back to ARIA roles (`role="checkbox"`,
+     * `aria-checked`, keyboard `Space`/`Enter` toggling) and `onChange` is fired from the click
+     * handler - useful for non-form contexts (e.g. menu items) or custom controlled wrappers.
+     */
+    input?: boolean;
+    /** `id` for the hidden `<input>`. Used to wire an external `<label htmlFor>` to this checkbox. */
+    inputId?: string;
+    /** Extra classes for the outer label/element. */
+    className?: string;
+    /** Extra classes for the inner check icon (e.g. to override its color or size). */
+    checkClassName?: string;
+    /** Accent color for the checked state. Default: theme accent. */
+    color?: Color;
+    /**
+     * Polymorphic root element. Defaults to `'label'` so a wrapping `<label>` activates the hidden
+     * input on click. Use `'div'`/`'span'` (etc.) when the checkbox lives inside an existing label
+     * or needs a non-label container - see `hoverable`/`focusable` for how this changes interactivity.
+     */
+    component?: C;
+    /**
+     * Auto-computed when omitted: `true` if `component === 'label'`, otherwise `false`.
+     * Override explicitly for custom containers that should still show hover affordances.
+     */
+    hoverable?: boolean;
+    /**
+     * Auto-computed when omitted: `true` if `component === 'label'` OR `input` is `true`.
+     * Drives whether the focus ring (`FocusableLayer`) is rendered. Override for non-label,
+     * input-less containers that still need a visible keyboard focus state.
+     */
+    focusable?: boolean;
+}
+export type CheckboxProps<C extends ElementType = 'label'> = CheckboxOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof CheckboxOwnProps<C>>;
+export declare function Checkbox<C extends ElementType = 'label'>(props: CheckboxProps<C>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Checkbox.d.ts.map

package/components/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,WAAW,EACX,UAAU,EACV,YAAY,EACZ,wBAAwB,EACzB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvC,UAAU,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO;IACxD,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kJAAkJ;IAClJ,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iEAAiE;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,IACvD,gBAAgB,CAAC,CAAC,CAAC,GACjB,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEjE,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,EACtD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,2CAyIxB"}

package/components/Checkbox.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, } from 'react';
+import { useAccentColor } from '../hooks/use-accent-color';
+import { cn } from '../shared/cn';
+import { FocusableLayer } from './FocusableLayer';
+import { CheckIcon } from './icons/CheckIcon';
+import { Surface } from './Surface';
+export function Checkbox(props) {
+    const accentColor = useAccentColor();
+    const { checked = false, disabled = false, readOnly, value, name, size = 'sm', required = false, onChange = () => { }, onClick = () => { }, onPointerDown = () => { }, input = true, inputId, className, checkClassName, color = accentColor, component = 'label', hoverable, focusable, ...rest } = props;
+    const elRef = useRef(null);
+    let hoverableComputed = hoverable;
+    let focusableComputed = focusable;
+    if (typeof hoverableComputed === 'undefined')
+        hoverableComputed = component === 'label';
+    if (typeof focusableComputed === 'undefined')
+        focusableComputed = component === 'label' || input;
+    const Component = component;
+    const ariaFallback = !input
+        ? {
+            role: 'checkbox',
+            'aria-checked': checked,
+            'aria-disabled': disabled || undefined,
+            'aria-readonly': readOnly || undefined,
+            'aria-required': required || undefined,
+            tabIndex: disabled ? -1 : 0,
+            onKeyDown: (e) => {
+                if (disabled || readOnly)
+                    return;
+                if (e.key === ' ' || e.key === 'Enter') {
+                    e.preventDefault();
+                    onChange(!checked);
+                }
+            },
+        }
+        : {};
+    const handleClick = (e) => {
+        onClick(e);
+        if (!input && !disabled && !readOnly) {
+            onChange(!checked);
+        }
+    };
+    return (_jsxs(Component, { className: cn('checkbox group/checkbox relative flex shrink-0 items-center justify-center rounded-full p-1 select-none', size === 'sm' && 'size-5', size === 'md' && 'size-6', disabled && 'opacity-50', className), onContextMenuCapture: (e) => e.preventDefault(), onClick: handleClick, onPointerDown: onPointerDown, ref: elRef, ...ariaFallback, ...rest, children: [input && (_jsx("input", { id: inputId, disabled: disabled || readOnly, readOnly: readOnly, checked: checked, required: required, type: "checkbox", value: value, name: name, className: "pointer-events-none absolute inset-1 z-10 opacity-0", onChange: (e) => onChange(!checked, e) })), _jsx(Surface, { className: cn('absolute inset-0 size-full shrink-0 rounded-full duration-200'), outline: true, variant: 'gradient', hoverable: hoverableComputed && !disabled && !readOnly, clickable: hoverableComputed && !disabled && !readOnly }), _jsx(Surface, { className: cn('absolute inset-0 size-full shrink-0 rounded-full duration-200', !checked && 'scale-0', checked ? 'opacity-100' : 'opacity-0'), color: color, outline: true, variant: 'gradient-fill', hoverable: hoverableComputed && !disabled && !readOnly, clickable: hoverableComputed && !disabled && !readOnly }), _jsx(CheckIcon, { className: cn('pointer-events-none relative duration-200', size === 'sm' && 'size-3', size === 'md' && 'size-4', !checked && 'scale-75 text-on-surface-dark', checked && !disabled && !readOnly && 'group-active/checkbox:scale-90', !checked &&
+                    !disabled &&
+                    !readOnly &&
+                    'group-group-active/checkbox:scale-65', checked && cn('text-on-primary', `color-${color}`), checkClassName) }), focusableComputed && !disabled && !readOnly && (_jsx(FocusableLayer, { className: "rounded-full", group: "checkbox" }))] }));
+}
+//# sourceMappingURL=Checkbox.js.map

package/components/Checkbox.js.map

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

package/components/Chip.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode, Ref, ElementType, ComponentPropsWithoutRef } from 'react';
+import { Color } from '../types';
+export type ChipSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+interface ChipOwnProps<C extends ElementType = 'span'> {
+    /** Chip content - typically a short label, optionally with an icon. */
+    children?: ReactNode;
+    /** Currently unused in styling - reserved for future "disabled chip" state. */
+    disabled?: boolean;
+    /** Extra classes for the chip surface root. */
+    className?: string;
+    /** Extra classes for the inner content row. */
+    contentClassName?: string;
+    /** Apply `rounded-full` (pill) corners. When `false` (default), uses size-specific corner radii. */
+    rounded?: boolean;
+    size?: ChipSize;
+    /**
+     * Polymorphic root element. Defaults to `'span'`. When set to `'a'` or `'button'`, the chip
+     * becomes interactive automatically (see `clickable`).
+     */
+    component?: C;
+    /**
+     * Render an outline ring. When `true`, also forces the underlying surface variant to
+     * `'transparent'`; when `false`/omitted, the surface is `'gradient'`.
+     */
+    outline?: boolean;
+    /** Show hover affordance. Implicitly enabled when the chip is clickable. */
+    hoverable?: boolean;
+    /**
+     * Make the chip react to pointer activity (active/pressed state, hover overlay).
+     * Auto-computed when omitted: `true` if `component === 'a'` or `'button'`, otherwise `false`.
+     * Set explicitly to override (e.g. force a `<span>` to be clickable, or suppress the
+     * default for an `<a>` used purely as a navigation anchor).
+     */
+    clickable?: boolean;
+    /** Accent color token. Sets the chip's `color-{name}` class - drives text and ring colors. */
+    color?: Color;
+    /** Icon component rendered before `children`. Receives `iconProps`. */
+    icon?: ElementType<any>;
+    /** Props forwarded to the `icon` component. */
+    iconProps?: Record<string, unknown>;
+    /** Forwarded to the polymorphic root element. */
+    ref?: Ref<HTMLElement>;
+}
+export type ChipProps<C extends ElementType = 'span'> = ChipOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof ChipOwnProps<C>>;
+export declare const Chip: <C extends ElementType = "span">(props: ChipProps<C>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Chip.d.ts.map

package/components/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,GAAG,EACH,WAAW,EAEX,wBAAwB,EACzB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEzD,UAAU,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,MAAM;IACnD,uEAAuE;IACvE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oGAAoG;IACpG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uEAAuE;IACvE,IAAI,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IACxB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,MAAM,IAAI,YAAY,CAAC,CAAC,CAAC,GACrE,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3D,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,WAAW,GAAG,MAAM,EAAE,OAAO,SAAS,CAAC,CAAC,CAAC,4CAoGvE,CAAC"}

package/components/Chip.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, } from 'react';
+import { cn } from '../shared/cn';
+import { Surface } from './Surface';
+export const Chip = (props) => {
+    const elRef = useRef(null);
+    const { children, disabled, className = '', contentClassName = '', rounded = false, size = 'md', component = 'span', outline, hoverable, clickable, color = '', icon: IconComponent, iconProps = {}, ref, ...rest } = props;
+    const heights = {
+        sm: 'h-4',
+        md: 'h-5',
+        lg: 'h-7',
+        xl: 'h-8',
+        '2xl': 'h-10',
+    };
+    const paddings = {
+        sm: 'px-2 [&:has(>svg)]:pl-1',
+        md: 'px-2 [&:has(>svg)]:pl-1',
+        lg: 'px-2.5 [&:has(>svg)]:pl-1.5',
+        xl: 'px-1.5',
+        '2xl': 'px-2',
+    };
+    const fontSizes = {
+        sm: 'text-[10px]',
+        md: 'text-[10px]',
+        lg: 'text-xs',
+        xl: 'text-sm',
+        '2xl': 'text-sm',
+    };
+    const iconSizes = {
+        sm: '[&>svg]:size-3',
+        md: '[&>svg]:size-4',
+        lg: '[&>svg]:size-4',
+        xl: '[&>svg]:size-4',
+        '2xl': '[&>svg]:size-4',
+    };
+    const roundedClasses = {
+        sm: 'rounded-[5px]',
+        md: 'rounded-md',
+        lg: 'rounded-lg',
+        xl: 'rounded-lg',
+        '2xl': 'rounded-lg',
+    };
+    let clickableComputed = clickable === true ||
+        (typeof clickable === 'undefined' &&
+            (component === 'a' || component === 'button'));
+    const SurfaceComponent = Surface;
+    return (_jsxs(SurfaceComponent, { component: component, hoverable: hoverable || clickableComputed, clickable: clickableComputed, outline: outline, variant: outline ? 'transparent' : 'gradient', contentClassName: cn('relative flex items-center justify-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap [&>svg]:shrink-0', iconSizes[size], paddings[size], contentClassName), className: cn(`chip group/chip relative inline-flex font-semibold text-primary select-none focus:ring-0 focus:outline-0 focus:outline-none`, rounded ? 'rounded-full' : roundedClasses[size], clickableComputed && 'duration-200', clickableComputed && component === 'a'
+            ? 'cursor-pointer'
+            : 'cursor-auto', heights[size], fontSizes[size], color && `color-${color}`, className), ref: (el) => {
+            elRef.current = el;
+            if (ref)
+                ref.current = el;
+        }, onContextMenuCapture: (e) => e.preventDefault(), ...rest, children: [IconComponent && _jsx(IconComponent, { ...(iconProps || {}) }), children] }));
+};
+//# sourceMappingURL=Chip.js.map

package/components/Chip.js.map

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

package/components/Dialog.d.ts

@@ -0,0 +1,118 @@
+import { ReactNode, Ref } from 'react';
+import { Color } from '../types';
+import { SurfaceVariant } from './Surface';
+/**
+ * State container for the `Dialog` + `DialogTrigger` + `Dialog` compound. Use when you want
+ * the trigger and the dialog to be siblings in JSX:
+ *
+ * ```tsx
+ * <DialogRoot>
+ *   <DialogTrigger><Button>Confirm</Button></DialogTrigger>
+ *   <Dialog title="..." />
+ * </DialogRoot>
+ * ```
+ *
+ * Skip this and pass `open`/`onOpenChange` directly to `<Dialog>` if you'd rather control state.
+ */
+export declare const DialogRoot: ({ children, defaultOpen, open: openProp, onOpenChange, }: {
+    children: ReactNode;
+    /** Initial open state (uncontrolled). Default `false`. Ignored when `open` is provided. */
+    defaultOpen?: boolean;
+    /** Controlled open state. When provided, internal state is bypassed. */
+    open?: boolean;
+    /** Fires whenever the open state should change (trigger click, outside click, escape, button press). */
+    onOpenChange?: (open: boolean) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Wraps a single child element to act as the dialog trigger. **Clones** the child to attach
+ * an `onClick` handler that toggles the surrounding `DialogRoot`'s open state (composed with
+ * any existing `onClick` on the child).
+ *
+ * No-ops (renders the child as-is) when used outside a `DialogRoot`. Unlike `PopoverTrigger`,
+ * this does **not** register an anchor ref - dialogs are centered on the viewport, not anchored.
+ */
+export declare const DialogTrigger: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Wraps a single child element to close the surrounding dialog when clicked. **Clones** the
+ * child to attach an `onClick` handler that flips the surrounding `DialogRoot`'s open state
+ * to `false` (composed with any existing `onClick` on the child).
+ *
+ * ```tsx
+ * <DialogRoot>
+ *   <DialogTrigger><Button>Open</Button></DialogTrigger>
+ *   <Dialog title="...">
+ *     ...
+ *     <DialogClose><Button>Dismiss</Button></DialogClose>
+ *   </Dialog>
+ * </DialogRoot>
+ * ```
+ *
+ * No-ops (renders the child as-is) when used outside a `DialogRoot`.
+ */
+export declare const DialogClose: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export interface DialogProps {
+    /** Controlled open state. When omitted, falls back to the surrounding `DialogRoot` state, then `false`. */
+    open?: boolean;
+    /** Fires whenever the open state should change. When omitted, falls back to the `DialogRoot` setter. */
+    onOpenChange?: (open: boolean) => void;
+    /** Portal target selector. Default `'#app, #__next, #root'` (first match wins). */
+    root?: string;
+    /**
+     * Selector for the container made `inert` while the dialog is open. Default `'.app-container'`.
+     * Used to block focus/interaction with the rest of the app while the modal is shown.
+     */
+    inertContainer?: string;
+    /** Fires after the close transition completes - use for unmount or post-dismiss cleanup. */
+    onClosed?: () => void;
+    /** Extra classes applied to the dialog root `Surface`. */
+    className?: string;
+    /** Extra classes applied to the inner content area. Default includes `space-y-4 p-4`. */
+    contentClassName?: string;
+    /** Title slot. Rendered as `<div>` with `text-base font-semibold`. Auto-wired to `aria-labelledby`. */
+    title?: ReactNode;
+    /** Body text slot. Rendered as `<div>` with `text-sm leading-relaxed`. Auto-wired to `aria-describedby`. */
+    text?: ReactNode;
+    /** Defer rendering until first opened, and unmount after close. */
+    lazy?: boolean;
+    /** Custom button row. Rendered after the auto-generated cancel/confirm buttons (if any). */
+    buttons?: ReactNode;
+    /**
+     * "Type to confirm" guard. When set, renders an `Input` and disables the confirm button until
+     * the user types this exact string - used for destructive actions (e.g. type the project name to delete).
+     */
+    requireConfirmText?: string;
+    /** Stop click propagation on backdrop and surface. Useful when the dialog is rendered inside a clickable parent. */
+    stopPropagationOnClick?: boolean;
+    cancelButtonText?: ReactNode;
+    confirmButtonText?: ReactNode;
+    /** Color for the cancel button. Default `'neutral'`. */
+    cancelButtonColor?: Color;
+    /** Color for the confirm button. Default: theme accent color. */
+    confirmButtonColor?: Color;
+    /** Forwarded to the underlying `Surface` as `level`. Default `1`. */
+    surfaceLevel?: string | number;
+    /** Surface variant. Default depends on theme: `'solid'` for light, `'gradient'` for dark. */
+    variant?: SurfaceVariant;
+    /** Outline ring on the dialog surface. Default `true` for dark, `false` for light. */
+    outline?: boolean;
+    /** Fires after the cancel button is pressed (the dialog also closes). */
+    onCancel?: () => void;
+    /** Fires after the confirm button is pressed and the `requireConfirmText` guard (if any) is satisfied. */
+    onConfirm?: () => void;
+    /** Forwarded to the dialog surface root. */
+    ref?: Ref<HTMLDivElement>;
+    /** ARIA label fallback when no `aria-labelledby`/`title` is set. */
+    'aria-label'?: string;
+    /** Override the auto-wired label id. By default this is the `title` element's id. */
+    'aria-labelledby'?: string;
+    /** Override the auto-wired description id. By default this is the `text` element's id. */
+    'aria-describedby'?: string;
+    /** Custom content rendered between `text` and the optional confirm-input/buttons row. */
+    children?: ReactNode;
+}
+export declare const Dialog: ({ open, onOpenChange, ...rest }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Dialog.d.ts.map

package/components/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,SAAS,EACT,GAAG,EAEJ,MAAM,OAAO,CAAC;AAUf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,OAAO,EAAW,cAAc,EAAE,MAAM,WAAW,CAAC;AASpD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,GAAI,0DAKxB;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wGAAwG;IACxG,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,4CAeA,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAalE,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAahE,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,2GAA2G;IAC3G,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wGAAwG;IACxG,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,mFAAmF;IACnF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yFAAyF;IACzF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uGAAuG;IACvG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4GAA4G;IAC5G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,4FAA4F;IAC5F,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oHAAoH;IACpH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAC1B,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,6FAA6F;IAC7F,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,sFAAsF;IACtF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0GAA0G;IAC1G,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qFAAqF;IACrF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0FAA0F;IAC1F,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yFAAyF;IACzF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgND,eAAO,MAAM,MAAM,GAAI,iCAAiC,WAAW,4CASlE,CAAC"}