@cladd-ui/react 0.0.1 → 0.0.2

package/components/Popup.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, createContext, useContext, useEffect, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { useFocusTrap } from '../hooks/use-focus-trap';
+import { useModalUtils } from '../hooks/use-modal-utils';
+import { cn } from '../shared/cn';
+import { Backdrop } from './Backdrop';
+import { Button } from './Button';
+import { ModalController } from './ModalController';
+import { Surface } from './Surface';
+const PopupRootContext = createContext(null);
+/**
+ * State container for the `Popup` + `PopupTrigger` + `Popup` compound. Use when you want
+ * the trigger and the popup to be siblings in JSX:
+ *
+ * ```tsx
+ * <PopupRoot>
+ *   <PopupTrigger><Button>Open</Button></PopupTrigger>
+ *   <Popup>...</Popup>
+ * </PopupRoot>
+ * ```
+ *
+ * Skip this and pass `open`/`onOpenChange` directly to `<Popup>` if you'd rather control state.
+ */
+export const PopupRoot = ({ children, defaultOpen = false, open: openProp, onOpenChange, }) => {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isControlled = openProp !== undefined;
+    const open = isControlled ? openProp : internalOpen;
+    const setOpen = (newOpen) => {
+        if (!isControlled)
+            setInternalOpen(newOpen);
+        onOpenChange?.(newOpen);
+    };
+    return (_jsx(PopupRootContext.Provider, { value: { open, setOpen }, children: children }));
+};
+/**
+ * Wraps a single child element to act as the popup trigger. **Clones** the child to attach
+ * an `onClick` handler that toggles the surrounding `PopupRoot`'s open state (composed with
+ * any existing `onClick` on the child).
+ *
+ * No-ops (renders the child as-is) when used outside a `PopupRoot`.
+ */
+export const PopupTrigger = ({ children }) => {
+    const ctx = useContext(PopupRootContext);
+    if (!ctx)
+        return _jsx(_Fragment, { children: children });
+    const child = children;
+    const originalOnClick = child?.props?.onClick;
+    const onClick = (e) => {
+        if (originalOnClick)
+            originalOnClick(e);
+        ctx.setOpen(!ctx.open);
+    };
+    return cloneElement(child, { onClick });
+};
+/**
+ * Wraps a single child element to close the surrounding popup when clicked. **Clones** the
+ * child to attach an `onClick` handler that flips the surrounding `PopupRoot`'s open state
+ * to `false` (composed with any existing `onClick` on the child).
+ *
+ * ```tsx
+ * <PopupRoot>
+ *   <PopupTrigger><Button>Open</Button></PopupTrigger>
+ *   <Popup>
+ *     ...
+ *     <PopupClose><Button>Close</Button></PopupClose>
+ *   </Popup>
+ * </PopupRoot>
+ * ```
+ *
+ * No-ops (renders the child as-is) when used outside a `PopupRoot`.
+ */
+export const PopupClose = ({ children }) => {
+    const ctx = useContext(PopupRootContext);
+    if (!ctx)
+        return _jsx(_Fragment, { children: children });
+    const child = children;
+    const originalOnClick = child?.props?.onClick;
+    const onClick = (e) => {
+        if (originalOnClick)
+            originalOnClick(e);
+        ctx.setOpen(false);
+    };
+    return cloneElement(child, { onClick });
+};
+function PopupInner(props) {
+    const { phase = 'closed', onPhaseChange = () => { }, className = '', root = '#app, #__next, #root', inertContainer = '.app-container', lazy = false, contentClassName = '', wrapClassName = '', header = true, headerClassName = '', headerLeft, headerRight, onOpen = () => { }, onOpened = () => { }, onClose = () => { }, onClosed = () => { }, backdrop = true, backdropClassName = '', closeOnBackdropClick = true, closeOnEscape = true, closeButton = true, closeButtonContent = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", children: _jsxs("g", { fill: "currentColor", children: [_jsx("path", { d: "M4,14.75c-.192,0-.384-.073-.53-.22-.293-.293-.293-.768,0-1.061L13.47,3.47c.293-.293,.768-.293,1.061,0s.293,.768,0,1.061L4.53,14.53c-.146,.146-.338,.22-.53,.22Z" }), _jsx("path", { d: "M14,14.75c-.192,0-.384-.073-.53-.22L3.47,4.53c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0L14.53,13.47c.293,.293,.293,.768,0,1.061-.146,.146-.338,.22-.53,.22Z" })] }) })), closeButtonColor, onCloseButtonClick = () => { }, closeRef, children, beforeContent, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, } = props;
+    const containerElRef = useRef(null);
+    const transitionEndElRef = useRef(null);
+    const pointerRef = useRef({
+        touched: false,
+        moved: false,
+        target: null,
+        startPositions: [0, 0],
+        distance: 0,
+    });
+    const { opened, open, close } = useModalUtils({
+        phase,
+        onPhaseChange,
+        onOpen,
+        onOpened,
+        onClose,
+        onClosed,
+        transitionEndElRef: transitionEndElRef,
+        lazy,
+        closeOnEscape() {
+            if (!closeOnEscape)
+                return false;
+            if (containerElRef.current &&
+                containerElRef.current.querySelector('.task-item-edit, .task-drop-target, .onboarding-el, .onboarding-el-clickable')) {
+                return false;
+            }
+            if (containerElRef.current && containerElRef.current.nextElementSibling) {
+                const nextEl = containerElRef.current.nextElementSibling;
+                if (nextEl.matches('.popover, .dialog, .popup')) {
+                    return false;
+                }
+            }
+            return true;
+        },
+    });
+    if (closeRef && 'current' in closeRef) {
+        closeRef.current = close;
+    }
+    const getPreviousPopups = () => {
+        if (containerElRef.current) {
+            const allPopups = [
+                ...containerElRef.current.parentElement.children,
+            ].filter((el) => el.classList.contains('popup'));
+            const previousPopups = allPopups.slice(0, allPopups.indexOf(containerElRef.current));
+            return previousPopups;
+        }
+        return [];
+    };
+    useEffect(() => {
+        open();
+        return () => {
+            if (!inertContainer)
+                return;
+            if (document.querySelector(inertContainer) &&
+                document.querySelectorAll('.popup').length === 0) {
+                document.querySelector(inertContainer).inert = false;
+            }
+        };
+    }, []);
+    useEffect(() => {
+        if (containerElRef.current) {
+            const previousPopups = getPreviousPopups();
+            previousPopups.forEach((popupEl, index) => {
+                const step = opened
+                    ? previousPopups.length - index
+                    : previousPopups.length - index - 1;
+                const popupContentEl = popupEl.querySelector('.popup-content');
+                popupContentEl.style.transformOrigin = 'top';
+                popupContentEl.style.transform = `translateY(-${16 * step}px) scale(${1 - 0.1 * step})`;
+                popupContentEl.style.transitionDuration = '400ms';
+            });
+            if (inertContainer && document.querySelector(inertContainer)) {
+                if (opened) {
+                    document.querySelector(inertContainer).inert = true;
+                }
+                else if (previousPopups.length === 0) {
+                    document.querySelector(inertContainer).inert = false;
+                }
+            }
+        }
+    }, [opened]);
+    useFocusTrap({
+        active: opened,
+        setInitialFocus: false,
+        containerRef: containerElRef,
+    });
+    const onPointer = (e) => {
+        const pointer = pointerRef.current;
+        if (e.pointerType !== 'mouse')
+            return;
+        if (e.type === 'pointerdown') {
+            pointer.touched = true;
+            pointer.moved = false;
+            pointer.target = e.target;
+            pointer.startPositions = [e.pageX, e.pageY];
+        }
+        if (e.type === 'pointermove') {
+            pointer.moved = true;
+            const [x, y] = pointer.startPositions;
+            const { pageX, pageY } = e;
+            pointer.distance = ((pageX - x) ** 2 + (pageY - y) ** 2) ** 0.5;
+        }
+        if (e.type === 'pointerup') {
+            if (pointer.distance < 10) {
+                pointer.moved = false;
+            }
+        }
+    };
+    const onClick = (e) => {
+        if (!e.target)
+            return;
+        const target = e.target;
+        if (target.closest('.popup-content, .popover, .dialog, .keyboard-toolbar') ||
+            !document.documentElement.contains(target)) {
+            return;
+        }
+        const isInAnotherPopup = target.closest('.popup') &&
+            containerElRef.current !== target.closest('.popup');
+        if (isInAnotherPopup)
+            return;
+        const pointer = pointerRef.current;
+        if ((pointer.target && pointer.target !== target) ||
+            (pointer.target && pointer.moved)) {
+            return;
+        }
+        if (containerElRef.current &&
+            containerElRef.current.querySelector('.onboarding-el, .onboarding-el-clickable')) {
+            return;
+        }
+        if (!closeOnBackdropClick)
+            return;
+        close();
+    };
+    const content = (_jsxs("div", { className: cn('popup absolute inset-0 z-50 overflow-hidden', opened && 'popup-opened', className), ref: containerElRef, role: "dialog", "aria-modal": "true", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onPointerDown: onPointer, onPointerMove: onPointer, onPointerUp: onPointer, onClick: onClick, children: [backdrop && (_jsx(Backdrop, { className: cn('pointer-events-none duration-200', opened ? 'opacity-100 duration-500' : 'opacity-0', backdropClassName) })), _jsx("div", { className: cn('popup-wrap absolute inset-0 z-50 overflow-auto pt-safe-12 pb-safe-12', opened && 'duration-500 ease-[cubic-bezier(0,1,0.2,1)]', !opened &&
+                    'translate-y-[100vh] scale-x-65 duration-200 ease-[ease-in]', wrapClassName), ref: transitionEndElRef, children: _jsxs("div", { className: cn('popup-content pointer-events-auto relative mx-auto flex min-h-full w-full max-w-162 flex-col gap-2', contentClassName), children: [beforeContent, header && (_jsxs("div", { className: cn('flex items-end justify-between px-4', headerClassName), children: [_jsx("div", { className: "flex min-w-0 shrink items-end gap-4", children: headerLeft }), (headerRight || closeButton) && (_jsxs("div", { className: "flex items-center gap-2", children: [headerRight, closeButton && (_jsx(Surface, { className: "rounded-full", contentClassName: "flex items-center p-1", variant: "gradient", outline: true, level: 1, children: _jsx(Button, { contentClassName: "text-on-surface-dark", rounded: true, variant: "transparent", outline: false, color: closeButtonColor, onClick: () => {
+                                                    onCloseButtonClick();
+                                                    close();
+                                                }, children: closeButtonContent }) }))] }))] })), children] }) })] }));
+    return root
+        ? createPortal(content, document.querySelector(root))
+        : content;
+}
+export const Popup = ({ open, onOpenChange, ...rest }) => {
+    const ctx = useContext(PopupRootContext);
+    const effectiveOpen = open ?? ctx?.open ?? false;
+    const effectiveOnOpenChange = onOpenChange ?? ctx?.setOpen ?? (() => { });
+    return (_jsx(ModalController, { open: effectiveOpen, onOpenChange: effectiveOnOpenChange, children: _jsx(PopupInner, { ...rest }) }));
+};
+//# sourceMappingURL=Popup.js.map

package/components/Popup.js.map

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

package/components/PopupContent.d.ts

@@ -0,0 +1,19 @@
+import { SurfaceVariant } from './Surface';
+export interface PopupContentProps {
+    /** Forwarded to the underlying `Surface` as `level`. Default `1`. Accepts the relative (`"+1"`/`"-1"`) syntax via `Surface.level`. */
+    surfaceLevel?: number;
+    /** Card content. */
+    children: React.ReactNode;
+    /** Extra classes for the inner content area. Default includes `!h-auto w-full p-4`. */
+    contentClassName?: string;
+    /** Extra classes for the card `Surface`. */
+    className?: string;
+    /** Surface variant for the popup card. Default `'solid'`. */
+    variant?: SurfaceVariant;
+    /** Render the outline ring. Default `true`. */
+    outline?: boolean;
+    /** Forwarded to the card `Surface`'s root element. */
+    ref?: React.Ref<HTMLDivElement>;
+}
+export declare const PopupContent: (props: PopupContentProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PopupContent.d.ts.map

package/components/PopupContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContent.d.ts","sourceRoot":"","sources":["../../../src/components/PopupContent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAW,cAAc,EAAE,MAAM,WAAW,CAAC;AAEpD,MAAM,WAAW,iBAAiB;IAChC,sIAAsI;IACtI,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uFAAuF;IACvF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,4CAsBpD,CAAC"}

package/components/PopupContent.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../shared/cn';
+import { Surface } from './Surface';
+export const PopupContent = (props) => {
+    const { surfaceLevel = 1, children, contentClassName = '', className = '', variant = 'solid', outline = true, ref, } = props;
+    return (_jsx(Surface, { level: surfaceLevel, className: cn('rounded-3xl', className), ref: ref, variant: variant, outline: outline, contentClassName: cn('!h-auto w-full p-4', contentClassName), children: children }));
+};
+//# sourceMappingURL=PopupContent.js.map

package/components/PopupContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContent.js","sourceRoot":"","sources":["../../../src/components/PopupContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,OAAO,EAAkB,MAAM,WAAW,CAAC;AAmBpD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IACvD,MAAM,EACJ,YAAY,GAAG,CAAC,EAChB,QAAQ,EACR,gBAAgB,GAAG,EAAE,EACrB,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,OAAO,EACjB,OAAO,GAAG,IAAI,EACd,GAAG,GACJ,GAAG,KAAK,CAAC;IACV,OAAO,CACL,KAAC,OAAO,IACN,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,EAAE,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,YAE3D,QAAQ,GACD,CACX,CAAC;AACJ,CAAC,CAAC"}

package/components/Preloader.d.ts

@@ -0,0 +1,12 @@
+import { Color } from '../types';
+export type PreloaderSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface PreloaderProps {
+    /** Preloader dimension. Default `'sm'`. Drives the size, knob position, and border thickness. */
+    size?: PreloaderSize;
+    /** Accent color for the spinning knob and ring. Default: theme accent. */
+    color?: Color;
+    /** Extra classes for the preloader root element. */
+    className?: string;
+}
+export declare function Preloader(props: PreloaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Preloader.d.ts.map

package/components/Preloader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Preloader.d.ts","sourceRoot":"","sources":["../../../src/components/Preloader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAE9D,MAAM,WAAW,cAAc;IAC7B,iGAAiG;IACjG,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAsD9C"}

package/components/Preloader.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAccentColor } from '../hooks/use-accent-color';
+import { cn } from '../shared/cn';
+export function Preloader(props) {
+    const accentColor = useAccentColor();
+    const { size = 'sm', color = accentColor, className } = props;
+    const sizes = {
+        sm: 'size-4',
+        md: 'size-5',
+        lg: 'size-7',
+        xl: 'size-8',
+        '2xl': 'size-10',
+    };
+    const borderWidth = {
+        sm: 'border',
+        md: 'border-1',
+        lg: 'border-[1.5px]',
+        xl: 'border-2',
+        '2xl': 'border-2',
+    }[size];
+    const sizeClasses = {
+        sm: 'left-0.5 right-0.5',
+        md: 'left-0.5 right-0.5',
+        lg: 'left-1 right-1',
+        xl: 'left-1 right-1',
+        '2xl': 'left-1 right-1',
+    }[size];
+    return (_jsx("div", { className: cn('preloader', `color-${color}`, 'relative', sizes[size], className), children: _jsxs("div", { className: "preloader-wrap absolute inset-0", children: [_jsx("div", { className: cn('absolute top-1/2 left-0 aspect-[16/10] w-full -translate-y-1/2 rounded-full border-primary', borderWidth) }), _jsx("div", { className: cn('absolute top-1/2 aspect-2/1 -translate-y-1/2 rounded-full', sizeClasses), children: _jsx("div", { className: "preloader-knob absolute top-0 left-0 h-full w-1/2 rounded-full bg-primary" }) })] }) }));
+}
+//# sourceMappingURL=Preloader.js.map

package/components/Preloader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Preloader.js","sourceRoot":"","sources":["../../../src/components/Preloader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAclC,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,WAAW,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC9D,MAAM,KAAK,GAAkC;QAC3C,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,QAAQ;QACZ,KAAK,EAAE,SAAS;KACjB,CAAC;IACF,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,UAAU;QACd,EAAE,EAAE,gBAAgB;QACpB,EAAE,EAAE,UAAU;QACd,KAAK,EAAE,UAAU;KAClB,CAAC,IAAI,CAAC,CAAC;IAER,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,oBAAoB;QACxB,EAAE,EAAE,oBAAoB;QACxB,EAAE,EAAE,gBAAgB;QACpB,EAAE,EAAE,gBAAgB;QACpB,KAAK,EAAE,gBAAgB;KACxB,CAAC,IAAI,CAAC,CAAC;IAER,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,WAAW,EACX,SAAS,KAAK,EAAE,EAChB,UAAU,EACV,KAAK,CAAC,IAAI,CAAC,EACX,SAAS,CACV,YAED,eAAK,SAAS,EAAC,iCAAiC,aAC9C,cACE,SAAS,EAAE,EAAE,CACX,4FAA4F,EAC5F,WAAW,CACZ,GACD,EACF,cACE,SAAS,EAAE,EAAE,CACX,2DAA2D,EAC3D,WAAW,CACZ,YAED,cAAK,SAAS,EAAC,2EAA2E,GAAG,GACzF,IACF,GACF,CACP,CAAC;AACJ,CAAC"}

package/components/Radio.d.ts

@@ -0,0 +1,53 @@
+import { ElementType, ChangeEvent, MouseEvent, PointerEvent, ComponentPropsWithoutRef } from 'react';
+import { Color } from '../types';
+export type RadioSize = 'sm' | 'md';
+interface RadioOwnProps<C extends ElementType = 'label'> {
+    /** Controlled checked state. Default `false`. */
+    checked?: boolean;
+    /** Visually dim the radio and disable interaction. */
+    disabled?: boolean;
+    /** Block toggling without the disabled visual treatment. */
+    readOnly?: boolean;
+    /** Native `value` - submitted with the form when `checked`. */
+    value?: string;
+    /** Native `name` - used to group radios in the same set. */
+    name?: string;
+    size?: RadioSize;
+    required?: boolean;
+    /** Fires when the user toggles the radio. First arg is the new checked state, second is the raw event. */
+    onChange?: (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (e: MouseEvent) => void;
+    onPointerDown?: (e: PointerEvent) => void;
+    /**
+     * When `true` (default), renders a hidden native input for form submission and accessibility.
+     * When `false`, the component falls back to ARIA roles (`role="radio"`, `aria-checked`,
+     * keyboard `Space`/`Enter` toggling) and `onChange` fires from the click handler.
+     */
+    input?: boolean;
+    /** `id` for the hidden `<input>`. Used to wire an external `<label htmlFor>` to this radio. */
+    inputId?: string;
+    /** Extra classes for the outer label/element. */
+    className?: 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 a non-label container when the radio lives inside an existing label —
+     * 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.
+     */
+    focusable?: boolean;
+}
+export type RadioProps<C extends ElementType = 'label'> = RadioOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof RadioOwnProps<C>>;
+export declare function Radio<C extends ElementType = 'label'>(props: RadioProps<C>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Radio.d.ts.map

package/components/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/Radio.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;AAIjC,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC,UAAU,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO;IACrD,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0GAA0G;IAC1G,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;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,IAAI,aAAa,CAAC,CAAC,CAAC,GACxE,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AAE5D,wBAAgB,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,2CA0I1E"}

package/components/Radio.js

@@ -0,0 +1,46 @@
+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 { Surface } from './Surface';
+export function Radio(props) {
+    const accentColor = useAccentColor();
+    const { checked = false, disabled = false, readOnly, value, name, size = 'sm', required = false, onChange = () => { }, onClick = () => { }, onPointerDown = () => { }, input = true, inputId, className, 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: 'radio',
+            '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/radio 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("span", { className: cn('pointer-events-none relative size-2 rounded-full duration-200', !checked &&
+                    cn('scale-75 bg-on-surface-dark', !readOnly && !disabled && 'group-active/radio:scale-65'), checked &&
+                    cn('bg-on-primary', `color-${color}`, !disabled && !readOnly && 'group-active/radio:scale-90')) }), focusableComputed && !disabled && !readOnly && (_jsx(FocusableLayer, { className: "rounded-full", group: "radio" }))] }));
+}
+//# sourceMappingURL=Radio.js.map

package/components/Radio.js.map

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

package/components/Range.d.ts

@@ -0,0 +1,35 @@
+import { ChangeEvent } from 'react';
+import { Color } from '../types';
+export type RangeSize = 'sm' | 'md';
+export interface RangeProps {
+    /** Controlled value. When omitted, the component falls back to uncontrolled mode using `defaultValue`. */
+    value?: number;
+    /** Initial value (uncontrolled). Default `0`. Ignored when `value` is provided. */
+    defaultValue?: number;
+    /** Default `0`. */
+    min?: number;
+    /** Default `100`. */
+    max?: number;
+    /** Default `1`. */
+    step?: number;
+    size?: RangeSize;
+    /** Visually dim the range and disable interaction. */
+    disabled?: boolean;
+    /** Block dragging without the disabled visual treatment. */
+    readOnly?: boolean;
+    /** Fires while the user drags or types a new value (subject to `debounce`). */
+    onChange?: (value: number, event?: ChangeEvent<HTMLInputElement>) => void;
+    /** Extra classes for the range container. */
+    className?: string;
+    /** Accent color for the active track segment and knob. Default: theme accent. */
+    color?: Color;
+    /**
+     * Reserved - currently unused in the rendered output (the underlying `<input type="range">`
+     * is always present). Kept for parity with other form components.
+     */
+    input?: boolean;
+    /** Debounce onChange calls in ms. Defaults to 0 (immediate). */
+    debounce?: number;
+}
+export declare function Range(props: RangeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Range.d.ts.map

package/components/Range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["../../../src/components/Range.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,WAAW,EAAc,MAAM,OAAO,CAAC;AAI7E,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AACpC,MAAM,WAAW,UAAU;IACzB,0GAA0G;IAC1G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1E,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CA+KtC"}

package/components/Range.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useAccentColor } from '../hooks/use-accent-color';
+import { cn } from '../shared/cn';
+import { FocusableLayer } from './FocusableLayer';
+import { Surface } from './Surface';
+import { SurfaceCut } from './SurfaceCut';
+export function Range(props) {
+    const accentColor = useAccentColor();
+    const { value: valueProp, defaultValue = 0, min = 0, max = 100, step = 1, size = 'sm', readOnly = false, disabled = false, onChange = () => { }, className, color = accentColor, input: _input = false, debounce = 0, } = props;
+    const isControlled = valueProp !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const value = isControlled ? valueProp : uncontrolledValue;
+    const elRef = useRef(null);
+    const knobElRef = useRef(null);
+    const progress = (value - min) / (max - min);
+    const debounceTimer = useRef(null);
+    const isTouched = useRef(false);
+    const [isTouchMoved, setIsTouchMoved] = useState(false);
+    const onChangeInternal = (e) => {
+        const v = parseFloat(e.target.value);
+        if (!isControlled)
+            setUncontrolledValue(v);
+        if (debounce > 0) {
+            if (debounceTimer.current)
+                clearTimeout(debounceTimer.current);
+            debounceTimer.current = setTimeout(() => onChange(v), debounce);
+        }
+        else {
+            onChange(v, e);
+        }
+    };
+    useEffect(() => {
+        return () => {
+            if (debounceTimer.current)
+                clearTimeout(debounceTimer.current);
+        };
+    }, []);
+    const onPointer = (e) => {
+        if (e.type === 'pointerdown') {
+            isTouched.current = true;
+        }
+        if (e.type === 'pointermove' && isTouched.current) {
+            setIsTouchMoved(true);
+        }
+        if (e.type === 'pointerup') {
+            isTouched.current = false;
+            setIsTouchMoved(false);
+        }
+    };
+    useEffect(() => {
+        const el = elRef.current;
+        if (!el)
+            return;
+        el.addEventListener('pointerdown', onPointer);
+        document.addEventListener('pointermove', onPointer);
+        document.addEventListener('pointerup', onPointer);
+        return () => {
+            el.removeEventListener('pointerdown', onPointer);
+            document.removeEventListener('pointermove', onPointer);
+            document.removeEventListener('pointerup', onPointer);
+        };
+    });
+    const durationClass = isTouchMoved ? 'duration-0' : 'duration-300';
+    return (_jsxs("div", { className: cn('range group/range relative flex h-7 touch-pan-y rounded-xl select-none', className), onContextMenuCapture: (e) => e.preventDefault(), ref: elRef, children: [_jsx(SurfaceCut, { className: cn('pointer-events-none absolute inset-0 top-1/2 right-0 left-0 rounded-full', size === 'sm' ? '-mt-0.5 h-1' : '-mt-1 h-2') }), _jsx("span", { className: cn('absolute top-1/2 -mt-px h-0.5 overflow-hidden rounded-full', size === 'sm' ? 'right-px left-px' : 'right-0.75 left-0.75'), children: _jsx("span", { className: cn('absolute inset-0 rounded-full bg-primary ease-out', `color-${color}`, !disabled &&
+                        !readOnly &&
+                        'group-focus-within/range:-translate-x-3 group-active/range:-translate-x-3', disabled && 'opacity-50', durationClass), style: {
+                        width: `calc((100% - ${size === 'sm' ? 20 : 24}px) * ${progress})`,
+                    } }) }), _jsxs("span", { className: cn('pointer-events-none absolute inset-0 flex items-center ease-out', durationClass), style: {
+                    paddingLeft: `calc((100% - ${size === 'sm' ? 20 : 24}px) * ${progress})`,
+                }, children: [_jsx("span", { className: "relative top-0 h-0 w-0", children: _jsx(Surface, { color: color, variant: "gradient", outline: true, className: cn(size === 'sm' && '-left-1.5', size === 'md' && '-left-1', 'absolute -bottom-4 w-8 scale-0 rounded-full pt-2.5 pb-8 text-center text-[11px] leading-none font-medium text-primary duration-300', !disabled &&
+                                !readOnly &&
+                                'group-focus-within/range:scale-100 group-active/range:scale-100', `color-${color}`), beforeContent: !readOnly &&
+                                !disabled && (_jsx(FocusableLayer, { group: "range", className: "rounded-full" })), children: value }) }), _jsx(Surface, { className: cn('z-10 size-6 shrink-0 rounded-full', size === 'sm' && 'size-5', size === 'md' && 'size-6'), outline: true, variant: "gradient-fill", color: color, ref: knobElRef })] }), _jsx("input", { className: "relative m-0 block w-full appearance-none border-transparent bg-transparent p-0 focus:outline-none", type: "range", disabled: disabled || readOnly, readOnly: readOnly, value: value, min: min, max: max, step: step, onChange: onChangeInternal })] }));
+}
+//# sourceMappingURL=Range.js.map

package/components/Range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Range.js","sourceRoot":"","sources":["../../../src/components/Range.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAA2B,MAAM,OAAO,CAAC;AAE7E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAkC1C,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,MAAM,EACJ,KAAK,EAAE,SAAS,EAChB,YAAY,GAAG,CAAC,EAChB,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,IAAI,GAAG,CAAC,EACR,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,SAAS,EACT,KAAK,GAAG,WAAW,EACnB,KAAK,EAAE,MAAM,GAAG,KAAK,EACrB,QAAQ,GAAG,CAAC,GACb,GAAG,KAAK,CAAC;IAEV,MAAM,YAAY,GAAG,SAAS,KAAK,SAAS,CAAC;IAC7C,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACzE,MAAM,KAAK,GAAG,YAAY,CAAC,CAAC,CAAE,SAAoB,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAEvE,MAAM,KAAK,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;IACzE,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAChC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,MAAM,gBAAgB,GAAG,CAAC,CAAgC,EAAE,EAAE;QAC5D,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,YAAY;YAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;QAE3C,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;YACjB,IAAI,aAAa,CAAC,OAAO;gBAAE,YAAY,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC/D,aAAa,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;QAClE,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACjB,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,IAAI,aAAa,CAAC,OAAO;gBAAE,YAAY,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACjE,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,CAAC,CAAe,EAAE,EAAE;QACpC,IAAI,CAAC,CAAC,IAAI,KAAK,aAAa,EAAE,CAAC;YAC7B,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,CAAC;QACD,IAAI,CAAC,CAAC,IAAI,KAAK,aAAa,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YAClD,eAAe,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;QACD,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;YAC3B,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;YAC1B,eAAe,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC;QACzB,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,EAAE,CAAC,gBAAgB,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;QAC9C,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;QACpD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QAClD,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,mBAAmB,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;YACjD,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC;IACnE,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,wEAAwE,EACxE,SAAS,CACV,EACD,oBAAoB,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAC3D,GAAG,EAAE,KAAK,aAGV,KAAC,UAAU,IACT,SAAS,EAAE,EAAE,CACX,0EAA0E,EAC1E,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAC5C,GACD,EAGF,eACE,SAAS,EAAE,EAAE,CACX,4DAA4D,EAC5D,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,sBAAsB,CAC5D,YAED,eACE,SAAS,EAAE,EAAE,CACX,mDAAmD,EACnD,SAAS,KAAK,EAAE,EAChB,CAAC,QAAQ;wBACP,CAAC,QAAQ;wBACT,2EAA2E,EAC7E,QAAQ,IAAI,YAAY,EACxB,aAAa,CACd,EACD,KAAK,EAAE;wBACL,KAAK,EAAE,gBAAgB,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,QAAQ,GAAG;qBACnE,GACD,GACG,EAGP,gBACE,SAAS,EAAE,EAAE,CACX,iEAAiE,EACjE,aAAa,CACd,EACD,KAAK,EAAE;oBACL,WAAW,EAAE,gBAAgB,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,QAAQ,GAAG;iBACzE,aAED,eAAM,SAAS,EAAC,wBAAwB,YACtC,KAAC,OAAO,IACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAC,UAAU,EAClB,OAAO,QACP,SAAS,EAAE,EAAE,CACX,IAAI,KAAK,IAAI,IAAI,WAAW,EAC5B,IAAI,KAAK,IAAI,IAAI,SAAS,EAC1B,oIAAoI,EACpI,CAAC,QAAQ;gCACP,CAAC,QAAQ;gCACT,iEAAiE,EACnE,SAAS,KAAK,EAAE,CACjB,EACD,aAAa,EACX,CAAC,QAAQ;gCACT,CAAC,QAAQ,IAAI,CACX,KAAC,cAAc,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAC,cAAc,GAAG,CAC1D,YAGF,KAAK,GACE,GACL,EAEP,KAAC,OAAO,IACN,SAAS,EAAE,EAAE,CACX,mCAAmC,EACnC,IAAI,KAAK,IAAI,IAAI,QAAQ,EACzB,IAAI,KAAK,IAAI,IAAI,QAAQ,CAC1B,EACD,OAAO,QACP,OAAO,EAAC,eAAe,EACvB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,SAAS,GACd,IACG,EACP,gBACE,SAAS,EAAC,oGAAoG,EAC9G,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,gBAAgB,GAC1B,IACE,CACP,CAAC;AACJ,CAAC"}

package/components/Searchbar.d.ts

@@ -0,0 +1,29 @@
+import { Ref, ChangeEvent } from 'react';
+import { InputSize } from './Input';
+import { SurfaceProps } from './Surface';
+interface SearchbarOwnProps {
+    /** Controlled query string. Default `''`. */
+    value?: string;
+    /**
+     * Layout mode:
+     * - `false` (default) - a sticky header bar that sits flush at the top of a list
+     *   (uses `surface level "+1"`, top-rounded corners, outlined).
+     * - `true` - a floating pill **inset** within the parent surface (uses `surface level "+0"`,
+     *   `rounded-full`, no outline, inset margins). Use inside a list/popover where the
+     *   searchbar should look like one item among many.
+     */
+    inset?: boolean;
+    size?: InputSize;
+    /** Default `'Search'`. */
+    placeholder?: string;
+    /** Extra classes for the searchbar `Surface`. */
+    className?: string;
+    /** Fires on every keystroke. Also fires with `''` when the clear button is pressed. */
+    onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void;
+    /** Forwarded to the searchbar `Surface` root. */
+    ref?: Ref<HTMLElement>;
+}
+export type SearchbarProps = SearchbarOwnProps & Omit<SurfaceProps, keyof SearchbarOwnProps>;
+export declare const Searchbar: (props: SearchbarProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Searchbar.d.ts.map

package/components/Searchbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Searchbar.d.ts","sourceRoot":"","sources":["../../../src/components/Searchbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAS,SAAS,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAW,YAAY,EAAE,MAAM,WAAW,CAAC;AAElD,UAAU,iBAAiB;IACzB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC1E,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,cAAc,GAAG,iBAAiB,GAC5C,IAAI,CAAC,YAAY,EAAE,MAAM,iBAAiB,CAAC,CAAC;AAE9C,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,4CA+C9C,CAAC"}