@cladd-ui/react 0.0.1 → 0.0.2

package/components/Select.js

@@ -0,0 +1,316 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useEffect, useId, useRef, useState, } from 'react';
+import { useDevice } from '../hooks/use-device';
+import { useTheme } from '../hooks/use-theme';
+import { cn } from '../shared/cn';
+import { BlockTitle } from './BlockTitle';
+import { Button, buttonIconSizes } from './Button';
+import { Checkbox } from './Checkbox';
+import { DropdownIcon } from './icons/DropdownIcon';
+import { List } from './List';
+import { ListButton } from './ListButton';
+import { Popover } from './Popover';
+import { Radio } from './Radio';
+import { Searchbar } from './Searchbar';
+export function Select(props) {
+    const theme = useTheme();
+    const { value = '', placeholder = '', title = '', options = [], multiple, disabled, readOnly, 
+    // STYLING
+    color, rounded, size = 'md', className, contentClassName, valueClassName, surface, reverse, icon, dropdownIcon = true, multiline, placeholderClassName = '', 
+    // CONTENT
+    children, beforeOptions, afterOptions, 
+    // SEARCH RELATED PROPS
+    search, searchPlaceholder = 'Search', searchNotFound = 'Nothing found', searchFocus, onSearch, 
+    // POPOVER RELATED PROPS
+    popoverColor, popoverPosition = 'bottom-end', popoverOffset = ['-50%', 4], popoverClassName = 'w-auto min-w-[160px]', popoverSurfaceLevel = theme === 'dark' ? '+1' : 1, anchorRef: elRefExternal, popoverState: popoverStateExternal, onPopoverState: setPopoverStateExternal, 
+    // CALLBACKS
+    onChange = () => { }, onClick = () => { }, 
+    // OPTIONS
+    keyboardHints = true, togglesColor, optionToggleColor = () => undefined, isChecked, isOptionDisabled, getOptionValue = (option) => option, getOptionByValue, renderBeforeOption, renderAfterOption, renderOption = ({ value }) => String(value), renderOptionInfo, 
+    /** Value of the "none/initial" option that should be mapped to the 0 key.
+     *  If set, this option gets hint "0" and remaining options get 1-9 in order.
+     *  If not set, straight ordering: 1, 2, 3, ..., 9, 0 (for 10th). */
+    noneOptionValue, 
+    // FUNCTIONALITY
+    closeOnSelect = true, scrollToSelected, ref, ...rest } = props;
+    const elRef = useRef(null);
+    const listElRef = useRef(null);
+    const searchbarRef = useRef(null);
+    const device = useDevice();
+    const reactId = useId();
+    const listboxId = `select-listbox-${reactId}`;
+    const optionIdPrefix = `select-option-${reactId}`;
+    const [searchQuery, setSearchQuery] = useState('');
+    const [popoverState, setPopoverState] = useState(false);
+    const [selectedItemIndex, setSelectedItemIndex] = useState(-1);
+    const onChangeInternal = (optionValue, checked) => {
+        if (!multiple) {
+            onChange(getOptionValue(optionValue));
+        }
+        else {
+            const newValues = getOptionByValue
+                ? [...value].map((opt) => getOptionValue(opt))
+                : [...value];
+            if (checked)
+                newValues.push(getOptionValue(optionValue));
+            else if (newValues.includes(getOptionValue(optionValue))) {
+                newValues.splice(newValues.indexOf(getOptionValue(optionValue)), 1);
+            }
+            onChange(getOptionByValue
+                ? newValues.map((optValue) => getOptionByValue(options, optValue))
+                : newValues);
+        }
+        if (!multiple && closeOnSelect) {
+            if (setPopoverStateExternal)
+                setPopoverStateExternal(false);
+            else
+                setPopoverState(false);
+        }
+    };
+    const InputComponent = multiple ? Checkbox : Radio;
+    const displayOptions = search && onSearch ? onSearch(searchQuery) : options;
+    const getOptionIsChecked = (optionValue) => {
+        if (isChecked)
+            return isChecked(optionValue);
+        const optKey = getOptionValue(optionValue);
+        if (multiple) {
+            const arr = value ?? [];
+            if (getOptionByValue) {
+                return arr.some((v) => getOptionValue(v) === optKey);
+            }
+            return arr.includes(optKey);
+        }
+        if (getOptionByValue && value !== undefined && value !== '') {
+            return getOptionValue(value) === optKey;
+        }
+        return value === optKey;
+    };
+    const effectivePopoverState = popoverStateExternal ?? popoverState;
+    const scrollPopoverToElement = (scrollToEl, dir) => {
+        if (!scrollToEl && scrollToSelected && listElRef.current) {
+            const checkedEl = listElRef.current.querySelector('input[checked]');
+            if (!checkedEl)
+                return;
+            const labelEl = checkedEl.closest('label');
+            if (!labelEl)
+                return;
+            labelEl.scrollIntoView({ block: 'center' });
+        }
+        else if (scrollToEl && listElRef.current) {
+            const scrollEl = scrollToEl.closest('.overflow-auto');
+            if (!scrollEl)
+                return;
+            if (dir === 'up') {
+                if (scrollEl.scrollTop > scrollToEl.offsetTop) {
+                    scrollToEl.scrollIntoView({
+                        block: 'start',
+                        behavior: 'smooth',
+                    });
+                }
+            }
+            else {
+                if (scrollEl.scrollTop + scrollEl.offsetHeight < scrollToEl.offsetTop) {
+                    scrollToEl.scrollIntoView({
+                        block: 'end',
+                        behavior: 'smooth',
+                    });
+                }
+            }
+        }
+    };
+    const focusSearchOnOpened = () => {
+        if (searchFocus && searchbarRef.current) {
+            if (device.ios || device.android)
+                return;
+            const input = searchbarRef.current.querySelector('input');
+            if (input)
+                input.focus();
+        }
+    };
+    const onKeyDown = (e) => {
+        if (device.mobile)
+            return;
+        if (!effectivePopoverState)
+            return;
+        // Numeric quick-pick: 0-9 selects the corresponding option
+        // Skip when search input is focused so digits can be typed
+        if (keyboardHints &&
+            /^[0-9]$/.test(e.key) &&
+            !searchbarRef.current?.querySelector('input:focus')) {
+            e.preventDefault();
+            const digit = parseInt(e.key);
+            let targetIndex = -1;
+            if (noneOptionValue !== undefined) {
+                // Semantic mode: 0 = none/initial option, 1-9 = other options in order
+                if (digit === 0) {
+                    targetIndex = displayOptions.findIndex((o) => getOptionValue(o) === noneOptionValue);
+                }
+                else {
+                    let rank = 0;
+                    for (let i = 0; i < displayOptions.length; i++) {
+                        if (getOptionValue(displayOptions[i]) !== noneOptionValue) {
+                            rank++;
+                            if (rank === digit) {
+                                targetIndex = i;
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                // Straight mode: 1=first, 2=second, ..., 9=ninth, 0=tenth
+                targetIndex = digit === 0 ? 9 : digit - 1;
+            }
+            if (targetIndex >= 0 && targetIndex < displayOptions.length) {
+                if (!multiple) {
+                    onChangeInternal(displayOptions[targetIndex], true);
+                }
+                else {
+                    onChangeInternal(displayOptions[targetIndex], !getOptionIsChecked(displayOptions[targetIndex]));
+                }
+            }
+            return;
+        }
+        if (e.key !== 'ArrowUp' &&
+            e.key !== 'Tab' &&
+            e.key !== 'ArrowDown' &&
+            e.key !== 'Enter' &&
+            e.key !== ' ') {
+            return;
+        }
+        const maxIndex = displayOptions.length - 1;
+        const minIndex = 0;
+        let newIndex = selectedItemIndex;
+        if (selectedItemIndex < 0) {
+            newIndex = displayOptions.findIndex(getOptionIsChecked);
+        }
+        let dir;
+        if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+            dir = 'up';
+            newIndex -= 1;
+            e.preventDefault();
+            if (newIndex < minIndex) {
+                dir = 'down';
+                newIndex = maxIndex;
+            }
+        }
+        if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+            dir = 'down';
+            newIndex += 1;
+            e.preventDefault();
+            if (newIndex > maxIndex) {
+                dir = 'up';
+                newIndex = 0;
+            }
+        }
+        if (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Tab') {
+            setSelectedItemIndex(newIndex);
+            if (listElRef.current) {
+                const el = listElRef.current.querySelectorAll('.list label')[newIndex];
+                if (el) {
+                    el.focus();
+                    scrollPopoverToElement(el, dir);
+                }
+            }
+        }
+        if ((e.key === 'Enter' || e.key === ' ') && selectedItemIndex >= 0) {
+            if (document.activeElement === searchbarRef.current?.querySelector('input')) {
+                return; // Don't select option when pressing Enter/Space in search input
+            }
+            e.preventDefault();
+            if (!multiple) {
+                onChangeInternal(displayOptions[selectedItemIndex], true);
+            }
+            else {
+                onChangeInternal(displayOptions[selectedItemIndex], !getOptionIsChecked(displayOptions[selectedItemIndex]));
+            }
+        }
+    };
+    const onPopoverOpen = () => {
+        scrollPopoverToElement();
+    };
+    const onPopoverOpened = () => {
+        focusSearchOnOpened();
+    };
+    const onPopoverClosed = () => {
+        setSelectedItemIndex(-1);
+        if (!device.mobile && elRef.current) {
+            elRef.current.focus();
+        }
+    };
+    useEffect(() => {
+        if (effectivePopoverState) {
+            setSearchQuery('');
+        }
+    }, [effectivePopoverState]);
+    useEffect(() => {
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    });
+    return (_jsxs(_Fragment, { children: [!elRefExternal && (_jsx(Button, { className: cn('select w-full', className), ref: (el) => {
+                    elRef.current = el;
+                    if (ref && typeof ref === 'function')
+                        ref(el);
+                    else if (ref && typeof ref === 'object')
+                        ref.current = el;
+                }, size: size, rounded: rounded, color: color, disabled: disabled, multiline: multiline, surface: surface, readOnly: readOnly, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": effectivePopoverState, "aria-controls": effectivePopoverState ? listboxId : undefined, "aria-activedescendant": effectivePopoverState && selectedItemIndex >= 0
+                    ? `${optionIdPrefix}-${selectedItemIndex}`
+                    : undefined, "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, onClick: (e) => {
+                    onClick(e);
+                    const currentState = popoverStateExternal ?? popoverState;
+                    if (setPopoverStateExternal)
+                        setPopoverStateExternal(!currentState);
+                    else
+                        setPopoverState(!currentState);
+                }, contentClassName: cn(dropdownIcon && 'pr-1.5'), ...rest, children: _jsxs("div", { className: cn('flex w-full min-w-0 shrink items-center justify-between gap-2', reverse && 'flex-row-reverse', contentClassName), children: [icon && _jsx("div", { className: buttonIconSizes[size], children: icon }), _jsx("div", { className: cn('w-full min-w-0 shrink', !children && !String(value) && 'text-on-surface-darker', placeholderClassName, valueClassName), children: children || String(value) || placeholder }), dropdownIcon && (_jsx(DropdownIcon, { className: cn('size-4', 'shrink-0 text-on-surface-darker') }))] }) })), !readOnly && !disabled && (_jsxs(Popover, { open: popoverStateExternal || popoverState, onOpenChange: setPopoverStateExternal || setPopoverState, anchorRef: elRefExternal || elRef, position: popoverPosition, offset: popoverOffset, color: popoverColor, surfaceLevel: popoverSurfaceLevel, className: popoverClassName, onOpen: onPopoverOpen, onOpened: onPopoverOpened, onClosed: onPopoverClosed, onClick: (e) => e.stopPropagation(), children: [title && _jsx(BlockTitle, { className: "px-4 pt-4", children: title }), search && (_jsx(Searchbar, { value: searchQuery, placeholder: searchPlaceholder, inset: !!title, ref: searchbarRef, className: cn(title && 'mt-2'), onChange: setSearchQuery })), beforeOptions, _jsxs(List, { ref: listElRef, id: listboxId, role: "listbox", "aria-multiselectable": multiple || undefined, children: [search && onSearch && searchQuery && !displayOptions.length && (_jsx("div", { className: cn('mb-2 flex h-8 w-full items-center pr-4 pl-4 text-xs font-medium text-on-surface-darker'), children: searchNotFound })), displayOptions.map((optionValue, optionIndex) => (_jsxs(Fragment, { children: [renderBeforeOption &&
+                                        renderBeforeOption(optionValue, optionIndex), _jsx(ListButton, { selected: optionIndex === selectedItemIndex, component: "label", contentClassName: "pl-1", disabled: isOptionDisabled && isOptionDisabled(optionValue), outline: false, rounded: true, id: `${optionIdPrefix}-${optionIndex}`, role: "option", "aria-selected": getOptionIsChecked(optionValue), "aria-disabled": (isOptionDisabled && isOptionDisabled(optionValue)) ||
+                                            undefined, children: _jsxs("div", { className: "flex w-full items-center gap-3", children: [_jsx(InputComponent, { component: "div", className: "shrink-0", focusable: false, hoverable: false, input: !isOptionDisabled || !isOptionDisabled(optionValue), color: optionToggleColor({
+                                                        value: optionValue,
+                                                        index: options.indexOf(optionValue),
+                                                        selected: getOptionIsChecked(optionValue),
+                                                    }) || togglesColor, disabled: isOptionDisabled && isOptionDisabled(optionValue), checked: getOptionIsChecked(optionValue), onChange: (checked) => onChangeInternal(optionValue, checked) }), _jsxs("div", { className: cn('w-full min-w-0 shrink'), children: [renderOption({
+                                                            value: optionValue,
+                                                            index: options.indexOf(optionValue),
+                                                            selected: getOptionIsChecked(optionValue),
+                                                        }), renderOptionInfo &&
+                                                            renderOptionInfo({
+                                                                value: optionValue,
+                                                                index: options.indexOf(optionValue),
+                                                                selected: getOptionIsChecked(optionValue),
+                                                            }) && (_jsx("div", { className: "text-xs font-normal text-on-surface-dark", children: renderOptionInfo({
+                                                                value: optionValue,
+                                                                index: options.indexOf(optionValue),
+                                                                selected: getOptionIsChecked(optionValue),
+                                                            }) }))] }), keyboardHints &&
+                                                    displayOptions.length > 1 &&
+                                                    !device.mobile &&
+                                                    (() => {
+                                                        let hint = null;
+                                                        if (noneOptionValue !== undefined) {
+                                                            if (getOptionValue(optionValue) === noneOptionValue) {
+                                                                hint = 0;
+                                                            }
+                                                            else {
+                                                                let rank = 0;
+                                                                for (let i = 0; i <= optionIndex; i++) {
+                                                                    if (getOptionValue(displayOptions[i]) !==
+                                                                        noneOptionValue)
+                                                                        rank++;
+                                                                }
+                                                                hint = rank <= 9 ? rank : null;
+                                                            }
+                                                        }
+                                                        else {
+                                                            if (optionIndex < 9)
+                                                                hint = optionIndex + 1;
+                                                            else if (optionIndex === 9)
+                                                                hint = 0;
+                                                        }
+                                                        return hint !== null ? (_jsx("span", { className: "ml-auto shrink-0 font-mono text-[11px] font-normal text-on-surface-darker tabular-nums", children: hint })) : null;
+                                                    })()] }) }), renderAfterOption &&
+                                        renderAfterOption(optionValue, optionIndex)] }, options.indexOf(optionValue))))] }), afterOptions] }))] }));
+}
+//# sourceMappingURL=Select.js.map

package/components/Select.js.map

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

package/components/Surface.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode, Ref, ElementType, ComponentPropsWithoutRef } from 'react';
+import { Color } from '../types';
+export type SurfaceVariant = 'transparent' | 'solid' | 'gradient' | 'solid-fill' | 'gradient-fill';
+interface SurfaceOwnProps<C extends ElementType = 'div'> {
+    /**
+     * Surface depth level (1–5). Drives the background tone via `surface-level-N` classes
+     * and propagates to nested surfaces through `SurfaceContext`.
+     *
+     * Accepts:
+     * - An absolute number/string (e.g. `2`, `"3"`).
+     * - A relative offset against the parent context level (e.g. `"+1"`, `"-1"`).
+     * - `undefined` (default): one level deeper than the parent context.
+     *
+     * Result is clamped to `[1, 5]`. For `variant="transparent"`, children inherit
+     * `currentLevel - 1` so they appear at the same depth as this surface.
+     */
+    level?: number | string;
+    /** Surface content. */
+    children?: ReactNode;
+    /** Extra classes for the root element. */
+    className?: string;
+    /** Extra classes for the absolutely-positioned background layer (the tinted/outlined fill behind content). */
+    bgClassName?: string;
+    /** Extra classes for the inner `SurfaceContent` wrapper. Ignored when `wrapContent` is `false`. */
+    contentClassName?: string;
+    /** Render a 1px outline ring around the surface. Uses fill-aware token when `variant` ends in `-fill`. */
+    outline?: boolean;
+    /**
+     * Visual treatment of the surface background:
+     * - `transparent` - no background; children render at the parent level (used for nested groupings).
+     * - `solid` - flat surface fill (default).
+     * - `gradient` - diagonal highlight→surface gradient.
+     * - `solid-fill` - flat primary/accent fill (text inverts to `text-on-primary`).
+     * - `gradient-fill` - diagonal accent gradient (text inverts).
+     */
+    variant?: SurfaceVariant;
+    /**
+     * Polymorphic root element. Defaults to `'div'`. Use `'button'`, `'a'`, etc. when the
+     * surface is itself the interactive target (forwarding props of that element).
+     */
+    component?: C;
+    /** Enables active/pressed visual states (scale + pressed background). Combine with `hoverable`. */
+    clickable?: boolean;
+    /** Force the pressed visual state regardless of pointer activity (controlled press). */
+    pressed?: boolean;
+    /** Enables hover background overlay. For `variant="transparent"`, also reveals the surface fill on hover. */
+    hoverable?: boolean;
+    /** Accent color token. Sets the surface's `color-{name}` class - drives accent-aware borders, fills, and text colors. */
+    color?: Color;
+    /**
+     * Slot rendered between the background layer and the content wrapper, **outside** the
+     * `SurfaceContent` flex layout (e.g. `FocusableLayer`, decorative overlays).
+     */
+    beforeContent?: ReactNode;
+    /**
+     * When `true` (default), `children` are rendered inside a `SurfaceContent` flex wrapper
+     * styled by `contentClassName`. Set to `false` to render `children` directly - useful
+     * when the surface is the layout root and you want full control of the inner DOM.
+     */
+    wrapContent?: boolean;
+    /** Forwarded to the polymorphic root element. */
+    ref?: Ref<HTMLElement>;
+}
+export type SurfaceProps<C extends ElementType = 'div'> = SurfaceOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof SurfaceOwnProps<C>>;
+export declare const Surface: <C extends ElementType = "div">(props: SurfaceProps<C>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Surface.d.ts.map

package/components/Surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.d.ts","sourceRoot":"","sources":["../../../src/components/Surface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,MAAM,MAAM,cAAc,GACtB,aAAa,GACb,OAAO,GACP,UAAU,GACV,YAAY,GACZ,eAAe,CAAC;AAEpB,UAAU,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK;IACrD;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8GAA8G;IAC9G,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mGAAmG;IACnG,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0GAA0G;IAC1G,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC;IACd,mGAAmG;IACnG,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6GAA6G;IAC7G,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yHAAyH;IACzH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,eAAe,CAAC,CAAC,CAAC,GAC1E,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EACnD,OAAO,YAAY,CAAC,CAAC,CAAC,4CA2HvB,CAAC"}

package/components/Surface.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSurface } from '../hooks/use-surface';
+import { cn } from '../shared/cn';
+import { SurfaceContent } from './SurfaceContent';
+import { SurfaceContextProvider } from './SurfaceContext';
+export const Surface = (props) => {
+    const MAX_LEVEL = 5;
+    const { level, children, className = '', contentClassName = '', bgClassName = '', outline = false, variant = 'solid', component = 'div', clickable = false, pressed, hoverable = false, color = '', wrapContent = true, beforeContent, ref, ...rest } = props;
+    const contextLevel = useSurface();
+    let levelProp = level;
+    if (typeof levelProp === 'string' &&
+        (levelProp.includes('+') || levelProp.includes('-'))) {
+        if (levelProp.includes('+'))
+            levelProp = contextLevel + parseInt(levelProp, 10);
+        else
+            levelProp = contextLevel + parseInt(levelProp, 10);
+    }
+    const currentLevel = Math.max(1, Math.min(typeof levelProp === 'undefined' ? contextLevel + 1 : Number(levelProp), MAX_LEVEL));
+    const Component = component;
+    const isFill = variant === 'solid-fill' || variant === 'gradient-fill';
+    return (_jsxs(Component, { className: cn('surface relative', isFill ? 'text-on-primary' : 'text-on-surface', (clickable || hoverable) && 'group/surface', `surface-level-${currentLevel}`, color && `color-${color}`, className), ref: ref, ...rest, children: [_jsx("div", { className: cn('pointer-events-none absolute inset-0 rounded-[inherit]', variant === 'solid' && 'bg-surface', variant === 'solid-fill' && 'bg-primary', variant === 'gradient' &&
+                    'bg-linear-to-br from-surface-highlight to-surface', variant === 'gradient-fill' &&
+                    'bg-linear-to-br from-primary to-primary/85 light:from-primary/80 light:to-primary', outline &&
+                    cn(isFill ? 'shadow-surface-outline-fill' : 'shadow-surface-outline'), variant === 'transparent' &&
+                    hoverable &&
+                    'duration-200 group-hover/surface:bg-surface', hoverable && clickable && 'group-active/surface:bg-surface', bgClassName), children: (hoverable || clickable) && (_jsx("div", { className: cn('absolute inset-0 rounded-[inherit] opacity-0 duration-200', hoverable &&
+                        !pressed &&
+                        cn('group-hover/surface:opacity-100', isFill
+                            ? 'group-hover/surface:bg-surface-hover-fill'
+                            : 'group-hover/surface:bg-surface-hover'), clickable &&
+                        (pressed
+                            ? 'bg-surface-pressed opacity-100'
+                            : 'group-active/surface:bg-surface-pressed group-active/surface:opacity-100')) })) }), _jsxs(SurfaceContextProvider, { level: variant === 'transparent' ? currentLevel - 1 : currentLevel, children: [beforeContent, wrapContent ? (_jsx(SurfaceContent, { className: cn('duration-200', clickable &&
+                            'group-active/surface:scale-95 group-active/surface:opacity-75', contentClassName), children: children })) : (children)] })] }));
+};
+//# sourceMappingURL=Surface.js.map

package/components/Surface.js.map

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

package/components/SurfaceContent.d.ts

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

package/components/SurfaceContent.d.ts.map

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

package/components/SurfaceContent.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../shared/cn';
+export const SurfaceContent = (props) => {
+    const { children, className = '', ref, ...rest } = props;
+    return (_jsx("div", { ref: ref, className: cn(`relative h-full`, className), ...rest, children: children }));
+};
+//# sourceMappingURL=SurfaceContent.js.map

package/components/SurfaceContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SurfaceContent.js","sourceRoot":"","sources":["../../../src/components/SurfaceContent.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAQlC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC3D,MAAM,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACzD,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,KAAM,IAAI,YACjE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/components/SurfaceContext.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+/**
+ * Tracks the surface depth of the current React subtree. Each `Surface` publishes its own
+ * level (or `currentLevel - 1` for `variant="transparent"`) so nested surfaces can resolve
+ * relative levels (e.g. `"+1"`/`"-1"`) and pick appropriate background tones.
+ */
+interface SurfaceContextValue {
+    /** Current surface depth (1–5). `0` outside any `Surface`. */
+    level: number;
+}
+interface SurfaceContextProviderProps {
+    /** Surface depth published to descendants. */
+    level: number;
+    children: ReactNode;
+}
+export declare const SurfaceContext: import("react").Context<SurfaceContextValue>;
+export declare function SurfaceContextProvider(props: SurfaceContextProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SurfaceContext.d.ts.map

package/components/SurfaceContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SurfaceContext.d.ts","sourceRoot":"","sources":["../../../src/components/SurfaceContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD;;;;GAIG;AACH,UAAU,mBAAmB;IAC3B,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,2BAA2B;IACnC,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,8CAEzB,CAAC;AAEH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CAMxE"}

package/components/SurfaceContext.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from 'react';
+export const SurfaceContext = createContext({
+    level: 0,
+});
+export function SurfaceContextProvider(props) {
+    return (_jsx(SurfaceContext.Provider, { value: { level: props.level }, children: props.children }));
+}
+//# sourceMappingURL=SurfaceContext.js.map

package/components/SurfaceContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SurfaceContext.js","sourceRoot":"","sources":["../../../src/components/SurfaceContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAa,MAAM,OAAO,CAAC;AAkBjD,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAsB;IAC/D,KAAK,EAAE,CAAC;CACT,CAAC,CAAC;AAEH,MAAM,UAAU,sBAAsB,CAAC,KAAkC;IACvE,OAAO,CACL,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,YACnD,KAAK,CAAC,QAAQ,GACS,CAC3B,CAAC;AACJ,CAAC"}

package/components/SurfaceCut.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode, Ref, ElementType, ComponentPropsWithoutRef } from 'react';
+import { Color } from '../types';
+interface SurfaceCutOwnProps<C extends ElementType = 'div'> {
+    /** Surface-cut content. */
+    children?: ReactNode;
+    /** Extra classes for the root element. */
+    className?: string;
+    /** Render the inset outline ring. Default `true`. */
+    outline?: boolean;
+    /** Accent color token. Sets the surface's `color-{name}` class. */
+    color?: Color;
+    /** Show hover overlay on the cut surface. Default `false`. */
+    hoverable?: boolean;
+    /** Enable active/pressed visual states (scale + pressed background). Default `false`. */
+    clickable?: boolean;
+    /** Force the pressed visual state regardless of pointer activity. */
+    pressed?: boolean;
+    /** Polymorphic root element. Defaults to `'div'`. */
+    component?: C;
+    /**
+     * When `true` (default), `children` are wrapped in `SurfaceCutContent`. Set to `false`
+     * to render `children` directly when you need full layout control of the inner DOM.
+     */
+    wrapContent?: boolean;
+    /** Extra classes for the inner `SurfaceCutContent` wrapper. Ignored when `wrapContent` is `false`. */
+    contentClassName?: string;
+    /** Forwarded to the polymorphic root element. */
+    ref?: Ref<HTMLElement>;
+}
+export type SurfaceCutProps<C extends ElementType = 'div'> = SurfaceCutOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof SurfaceCutOwnProps<C>>;
+export declare const SurfaceCut: <C extends ElementType = "div">(props: SurfaceCutProps<C>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SurfaceCut.d.ts.map

package/components/SurfaceCut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SurfaceCut.d.ts","sourceRoot":"","sources":["../../../src/components/SurfaceCut.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,UAAU,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK;IACxD,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yFAAyF;IACzF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,SAAS,CAAC,EAAE,CAAC,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sGAAsG;IACtG,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACvD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnE,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EACtD,OAAO,eAAe,CAAC,CAAC,CAAC,4CAuE1B,CAAC"}

package/components/SurfaceCut.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSurface } from '../hooks/use-surface';
+import { cn } from '../shared/cn';
+import { SurfaceContextProvider } from './SurfaceContext';
+import { SurfaceCutContent } from './SurfaceCutContent';
+export const SurfaceCut = (props) => {
+    const { children, className = '', outline = true, color, hoverable = false, clickable = false, pressed = false, component = 'div', wrapContent = true, contentClassName = '', ref, ...rest } = props;
+    const Component = component;
+    const contextLevel = useSurface();
+    return (_jsxs(Component, { className: cn('surface-cut group/surface-cut relative', hoverable && 'group/surface-cut-hoverable', color && `color-${color}`, className), ...rest, ref: ref, children: [_jsx("div", { className: cn(`pointer-events-none absolute inset-0 rounded-[inherit] bg-surface-cut`, outline && 'shadow-surface-cut-outline'), children: (hoverable || clickable) && (_jsx("div", { className: cn('absolute inset-0 rounded-[inherit] opacity-0 duration-200', hoverable &&
+                        'group-hover/surface-cut-hoverable:bg-surface-hover group-hover/surface-cut-hoverable:opacity-100', clickable &&
+                        (pressed
+                            ? 'bg-surface-pressed opacity-100'
+                            : 'group-active/surface-cut:bg-surface-pressed group-active/surface-cut:opacity-100')) })) }), _jsx(SurfaceContextProvider, { level: contextLevel - 1, children: wrapContent ? (_jsx(SurfaceCutContent, { className: cn(clickable &&
+                        'duration-200 group-active/surface-cut:scale-95 group-active/surface-cut:opacity-75', contentClassName), children: children })) : (children) })] }));
+};
+//# sourceMappingURL=SurfaceCut.js.map

package/components/SurfaceCut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SurfaceCut.js","sourceRoot":"","sources":["../../../src/components/SurfaceCut.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAkCxD,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,KAAyB,EACzB,EAAE;IACF,MAAM,EACJ,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,IAAI,EACd,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,IAAI,EAClB,gBAAgB,GAAG,EAAE,EACrB,GAAG,EACH,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,SAAwB,CAAC;IAE3C,MAAM,YAAY,GAAG,UAAU,EAAE,CAAC;IAElC,OAAO,CACL,MAAC,SAAS,IACR,SAAS,EAAE,EAAE,CACX,wCAAwC,EACxC,SAAS,IAAI,6BAA6B,EAC1C,KAAK,IAAI,SAAS,KAAK,EAAE,EACzB,SAAS,CACV,KACG,IAAI,EACR,GAAG,EAAE,GAAG,aAGR,cACE,SAAS,EAAE,EAAE,CACX,uEAAuE,EACvE,OAAO,IAAI,4BAA4B,CACxC,YAGA,CAAC,SAAS,IAAI,SAAS,CAAC,IAAI,CAC3B,cACE,SAAS,EAAE,EAAE,CACX,2DAA2D,EAC3D,SAAS;wBACP,kGAAkG,EACpG,SAAS;wBACP,CAAC,OAAO;4BACN,CAAC,CAAC,gCAAgC;4BAClC,CAAC,CAAC,kFAAkF,CAAC,CAC1F,GACD,CACH,GACG,EACN,KAAC,sBAAsB,IAAC,KAAK,EAAE,YAAY,GAAG,CAAC,YAC5C,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,iBAAiB,IAChB,SAAS,EAAE,EAAE,CACX,SAAS;wBACP,oFAAoF,EACtF,gBAAgB,CACjB,YAEA,QAAQ,GACS,CACrB,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,GACsB,IACf,CACb,CAAC;AACJ,CAAC,CAAC"}

package/components/SurfaceCutContent.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode, Ref, ElementType, ComponentPropsWithoutRef } from 'react';
+interface SurfaceCutContentOwnProps<C extends ElementType = 'div'> {
+    children?: ReactNode;
+    /** Stretch the content to `h-full`. Default `true`. Set `false` for content sized by intrinsic height. */
+    fullHeight?: boolean;
+    /** Polymorphic root element. Defaults to `'div'`. */
+    component?: C;
+    /** Extra classes for the wrapper. */
+    className?: string;
+    /** Forwarded to the polymorphic root element. */
+    ref?: Ref<HTMLElement>;
+}
+export type SurfaceCutContentProps<C extends ElementType = 'div'> = SurfaceCutContentOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof SurfaceCutContentOwnProps<C>>;
+export declare const SurfaceCutContent: <C extends ElementType = "div">(props: SurfaceCutContentProps<C>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SurfaceCutContent.d.ts.map

package/components/SurfaceCutContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SurfaceCutContent.d.ts","sourceRoot":"","sources":["../../../src/components/SurfaceCutContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAI9E,UAAU,yBAAyB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK;IAC/D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0GAA0G;IAC1G,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,SAAS,CAAC,EAAE,CAAC,CAAC;IACd,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAC9D,yBAAyB,CAAC,CAAC,CAAC,GAC1B,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,yBAAyB,CAAC,CAAC,CAAC,CAAC,CAAC;AAE1E,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EAC7D,OAAO,sBAAsB,CAAC,CAAC,CAAC,4CAoBjC,CAAC"}