@cladd-ui/react 0.0.1 → 0.0.2

package/components/Dialog.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, createContext, useContext, useEffect, useId, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { useAccentColor } from '../hooks/use-accent-color';
+import { useDevice } from '../hooks/use-device';
+import { useFocusTrap } from '../hooks/use-focus-trap';
+import { useModalUtils } from '../hooks/use-modal-utils';
+import { useTheme } from '../hooks/use-theme';
+import { cn } from '../shared/cn';
+import { nextTick } from '../shared/next-tick';
+import { Backdrop } from './Backdrop';
+import { Button } from './Button';
+import { Input } from './Input';
+import { ModalController } from './ModalController';
+import { Surface } from './Surface';
+const DialogRootContext = createContext(null);
+/**
+ * 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 const DialogRoot = ({ 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(DialogRootContext.Provider, { value: { open, setOpen }, children: children }));
+};
+/**
+ * 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 const DialogTrigger = ({ children }) => {
+    const ctx = useContext(DialogRootContext);
+    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 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 const DialogClose = ({ children }) => {
+    const ctx = useContext(DialogRootContext);
+    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 });
+};
+const DialogInner = (props) => {
+    const theme = useTheme();
+    const accentColor = useAccentColor();
+    const { root = '#app, #__next, #root', inertContainer = '.app-container', phase = 'closed', onPhaseChange = () => { }, onClosed = () => { }, className = '', contentClassName = '', title, text, lazy, buttons, requireConfirmText = '', stopPropagationOnClick, cancelButtonText, confirmButtonText, cancelButtonColor = 'neutral', confirmButtonColor = accentColor, surfaceLevel = 1, variant = 'gradient', outline = theme === 'dark', onCancel, onConfirm, ref, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, } = props;
+    const elRef = useRef(null);
+    const containerRef = useRef(null);
+    const reactId = useId();
+    const titleId = `dialog-title-${reactId}`;
+    const descId = `dialog-desc-${reactId}`;
+    const ariaLabelledBy = ariaLabelledByProp ?? (title ? titleId : undefined);
+    const ariaDescribedBy = ariaDescribedByProp ?? (text ? descId : undefined);
+    const [inputText, setInputText] = useState('');
+    const [_confirmButtonFocused, _setConfirmButtonFocused] = useState(false);
+    const confirmButtonRef = useRef(null);
+    const { opened, open, close } = useModalUtils({
+        phase,
+        onPhaseChange,
+        onClosed,
+        lazy,
+        transitionEndElRef: elRef,
+        onOpen() {
+            const device = useDevice();
+            if (!requireConfirmText && confirmButtonRef.current && !device.mobile) {
+                if (!confirmButtonRef.current)
+                    return;
+                nextTick(() => {
+                    confirmButtonRef.current?.focus();
+                });
+            }
+        },
+        onOpened() {
+            const container = document.querySelector(inertContainer);
+            if (container) {
+                container.inert = true;
+            }
+        },
+        onClose() {
+            const container = document.querySelector(inertContainer);
+            const otherModals = document.querySelectorAll('.popover, .popup');
+            if (container && otherModals.length === 0) {
+                container.inert = false;
+            }
+        },
+    });
+    useEffect(() => {
+        open();
+    }, []);
+    useFocusTrap({
+        active: opened,
+        containerRef,
+        initialFocusRef: requireConfirmText ? undefined : confirmButtonRef,
+    });
+    const setRefs = (el) => {
+        containerRef.current = el;
+        if (typeof ref === 'function')
+            ref(el);
+        else if (ref && typeof ref === 'object')
+            ref.current = el;
+    };
+    const content = (_jsxs("div", { className: "dialog", ref: setRefs, role: "dialog", "aria-modal": "true", "aria-label": !ariaLabelledBy ? ariaLabel : undefined, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, children: [_jsx(Backdrop, { className: cn('duration-200', opened ? 'opacity-100' : 'opacity-0'), onClick: (e) => {
+                    if (stopPropagationOnClick) {
+                        e.stopPropagation();
+                    }
+                    close();
+                } }), _jsxs(Surface, { className: cn(`fixed top-1/2 left-1/2 z-50 w-80 max-w-full -translate-x-1/2 -translate-y-1/2 rounded-3xl`, !opened && 'scale-75 opacity-0 duration-200 ease-out!', opened &&
+                    'scale-100 opacity-100 duration-500 ease-[cubic-bezier(0,1,0.2,1.1)]', className), ref: elRef, level: surfaceLevel, variant: variant, outline: outline, contentClassName: cn('space-y-4 p-4', contentClassName), onClick: (e) => {
+                    if (stopPropagationOnClick) {
+                        e.stopPropagation();
+                    }
+                }, children: [title && (_jsx("div", { id: titleId, className: "text-base font-semibold", children: title })), text && (_jsx("div", { id: descId, className: "text-sm leading-relaxed", children: text })), children, requireConfirmText && confirmButtonText && (_jsx(Input, { value: inputText, infoMessage: `Type ${requireConfirmText} to confirm`, color: confirmButtonColor, placeholder: `Type ${requireConfirmText} to confirm`, size: "xl", onChange: (v) => setInputText(v) })), (buttons || cancelButtonText || confirmButtonText) && (_jsxs("div", { className: "mt-8! flex flex-wrap items-center justify-end gap-2", children: [cancelButtonText && (_jsx(Button, { tabIndex: 0, rounded: true, size: "lg", variant: "transparent", color: cancelButtonColor, contentClassName: "px-4", onClick: () => {
+                                    close();
+                                    onCancel?.();
+                                }, children: cancelButtonText })), confirmButtonText && (_jsx(Button, { ref: confirmButtonRef, tabIndex: 0, color: !(requireConfirmText && inputText !== requireConfirmText)
+                                    ? confirmButtonColor
+                                    : undefined, rounded: true, size: "lg", contentClassName: "px-4", disabled: !!(requireConfirmText && inputText !== requireConfirmText), onClick: () => {
+                                    close();
+                                    onConfirm?.();
+                                }, children: confirmButtonText })), buttons] }))] })] }));
+    return root ? createPortal(content, document.querySelector(root)) : content;
+};
+export const Dialog = ({ open, onOpenChange, ...rest }) => {
+    const ctx = useContext(DialogRootContext);
+    const effectiveOpen = open ?? ctx?.open ?? false;
+    const effectiveOnOpenChange = onOpenChange ?? ctx?.setOpen ?? (() => { });
+    return (_jsx(ModalController, { open: effectiveOpen, onOpenChange: effectiveOnOpenChange, children: _jsx(DialogInner, { ...rest }) }));
+};
+//# sourceMappingURL=Dialog.js.map

package/components/Dialog.js.map

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

package/components/DialogsPortal.d.ts

@@ -0,0 +1,2 @@
+export declare function DialogsPortal(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=DialogsPortal.d.ts.map

package/components/DialogsPortal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogsPortal.d.ts","sourceRoot":"","sources":["../../../src/components/DialogsPortal.tsx"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,mDA8B5B"}

package/components/DialogsPortal.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog } from './Dialog';
+import { useDialogsPortalContext } from './DialogsPortalContext';
+export function DialogsPortal() {
+    const { data, state, setState, setData } = useDialogsPortalContext();
+    if (!data)
+        return null;
+    return (_jsx(Dialog, { open: state, onOpenChange: setState, lazy: data.lazy, title: data.title, text: data.text, stopPropagationOnClick: data.stopPropagationOnClick, requireConfirmText: data.requireConfirmText ? String(data.requireConfirmText) : undefined, cancelButtonText: data.cancelButtonText, confirmButtonText: data.confirmButtonText, cancelButtonColor: data.cancelButtonColor, confirmButtonColor: data.confirmButtonColor, onCancel: () => {
+            data.onCancel?.(false);
+        }, onConfirm: () => {
+            data.onConfirm?.(true);
+        }, onClosed: () => {
+            setData(null);
+            data.onClosed?.(false);
+        } }));
+}
+//# sourceMappingURL=DialogsPortal.js.map

package/components/DialogsPortal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogsPortal.js","sourceRoot":"","sources":["../../../src/components/DialogsPortal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,MAAM,UAAU,aAAa;IAC3B,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,uBAAuB,EAAE,CAAC;IACrE,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IACvB,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAE,KAAK,EACX,YAAY,EAAE,QAAQ,EACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,EACnD,kBAAkB,EAChB,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,SAAS,EAEvE,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,QAAQ,EAAE,GAAG,EAAE;YACb,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;YACd,IAAI,CAAC,SAAS,EAAE,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC,EACD,QAAQ,EAAE,GAAG,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,CAAC;YACd,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC,GACD,CACH,CAAC;AACJ,CAAC"}

package/components/DialogsPortalContext.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Color } from '../types';
+/**
+ * Shape of the currently open dialog in the imperative dialog portal. The portal renders at
+ * most one dialog at a time; opening a new one replaces the previous via the context setter.
+ * Mirrors `DialogProps` for the props that the portal-rendered Dialog forwards.
+ */
+export type DialogsPortalData = {
+    /** Dialog title - auto-wired to `aria-labelledby`. */
+    title: string;
+    /** Dialog body text - auto-wired to `aria-describedby`. */
+    text: string | React.ReactNode;
+    /**
+     * Type-to-confirm guard. If string-coercible (truthy), the confirm button is disabled
+     * until the user types this exact value. Forwarded to `Dialog.requireConfirmText` after
+     * `String(...)` coercion.
+     */
+    requireConfirmText?: boolean | string | React.ReactNode;
+    /** Stop click propagation on backdrop and surface. */
+    stopPropagationOnClick?: boolean;
+    cancelButtonText?: React.ReactNode;
+    confirmButtonText?: React.ReactNode;
+    cancelButtonColor?: Color;
+    confirmButtonColor?: Color;
+    /** Fires when the confirm button is pressed (and the `requireConfirmText` guard passes). Always called with `true`. */
+    onConfirm?: (confirmed: boolean) => void;
+    /** Fires when the cancel button is pressed. Always called with `false`. */
+    onCancel?: (cancelled: boolean) => void;
+    /** Fires after the close transition completes - use for unmount cleanup. */
+    onClosed?: (closed: boolean) => void;
+    /** Defer rendering until first opened, and unmount after close. */
+    lazy?: boolean;
+};
+export declare const DialogsPortalContext: React.Context<{
+    data: DialogsPortalData | null;
+    setData: React.Dispatch<React.SetStateAction<DialogsPortalData | null>>;
+    state: boolean;
+    setState: React.Dispatch<React.SetStateAction<boolean>>;
+}>;
+export declare const DialogsPortalProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useDialogsPortalContext: () => {
+    data: DialogsPortalData | null;
+    setData: React.Dispatch<React.SetStateAction<DialogsPortalData | null>>;
+    state: boolean;
+    setState: React.Dispatch<React.SetStateAction<boolean>>;
+};
+//# sourceMappingURL=DialogsPortalContext.d.ts.map

package/components/DialogsPortalContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogsPortalContext.d.ts","sourceRoot":"","sources":["../../../src/components/DialogsPortalContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/B;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACxD,sDAAsD;IACtD,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAC1B,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,uHAAuH;IACvH,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,mEAAmE;IACnE,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,oBAAoB;UACzB,iBAAiB,GAAG,IAAI;aACrB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;WAChE,OAAO;cACJ,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;EAMvD,CAAC;AAEH,eAAO,MAAM,qBAAqB,GAAI,eAEnC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,4CAQA,CAAC;AAEF,eAAO,MAAM,uBAAuB;UAzB5B,iBAAiB,GAAG,IAAI;aACrB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;WAChE,OAAO;cACJ,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;CAwBxD,CAAC"}

package/components/DialogsPortalContext.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+export const DialogsPortalContext = createContext({
+    data: null,
+    setData: () => { },
+    state: false,
+    setState: () => { },
+});
+export const DialogsPortalProvider = ({ children, }) => {
+    const [data, setData] = useState(null);
+    const [state, setState] = useState(false);
+    return (_jsx(DialogsPortalContext.Provider, { value: { data, setData, state, setState }, children: children }));
+};
+export const useDialogsPortalContext = () => {
+    return useContext(DialogsPortalContext);
+};
+//# sourceMappingURL=DialogsPortalContext.js.map

package/components/DialogsPortalContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogsPortalContext.js","sourceRoot":"","sources":["../../../src/components/DialogsPortalContext.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAoCnE,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAK9C;IACD,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;IACjB,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EACpC,QAAQ,GAGT,EAAE,EAAE;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAC;IACjE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACnD,OAAO,CACL,KAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,YACrE,QAAQ,GACqB,CACjC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,OAAO,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAC1C,CAAC,CAAC"}

package/components/FocusableLayer.d.ts

@@ -0,0 +1,25 @@
+import { Color } from '../types';
+export declare const FocusableLayer: (props: {
+    className?: string;
+    /**
+     * Which interactive group's focus state should reveal this ring. The ring is hidden by default
+     * (scale 95, opacity 0) and animates in when the matching ancestor receives focus.
+     *
+     * Each value targets the corresponding `group/<name>` Tailwind group on its parent component:
+     * - `'button'` - reveals on `:focus-visible` (keyboard focus only).
+     * - `'input'` - reveals when the wrapper has a focused `<input>`.
+     * - `'textarea'` - reveals when the wrapper has a focused `[contenteditable]`.
+     * - `'checkbox'` / `'toggle'` / `'radio'` / `'range'` - reveal on `:focus-visible` of the
+     *   wrapper's hidden native input.
+     *
+     * Pass an unknown value to opt out of the auto-reveal classes (use `force` instead).
+     */
+    group?: string;
+    color?: Color;
+    /**
+     * Always show the ring, regardless of focus state. Used for error/invalid states
+     * (e.g. `Input` passes `force={!valid}` and a red color).
+     */
+    force?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FocusableLayer.d.ts.map

package/components/FocusableLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusableLayer.d.ts","sourceRoot":"","sources":["../../../src/components/FocusableLayer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,eAAO,MAAM,cAAc,GAAI,OAAO;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,4CAgCA,CAAC"}

package/components/FocusableLayer.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAccentColor } from '../hooks/use-accent-color';
+import { cn } from '../shared/cn';
+export const FocusableLayer = (props) => {
+    const accentColor = useAccentColor();
+    const { className, group, color = accentColor, force } = props;
+    const groupClasses = {
+        button: 'group-focus-visible/button:scale-100 group-focus-visible/button:opacity-100',
+        input: 'group-has-[input:focus]/input:scale-100 group-has-[input:focus]/input:opacity-100',
+        textarea: 'group-has-[[contenteditable]:focus]/textarea:scale-100 group-has-[[contenteditable]:focus]/textarea:opacity-100',
+        checkbox: 'group-has-[input:focus-visible]/checkbox:scale-100 group-has-[input:focus-visible]/checkbox:opacity-100',
+        toggle: 'group-has-[input:focus-visible]/toggle:scale-100 group-has-[input:focus-visible]/toggle:opacity-100',
+        radio: 'group-has-[input:focus-visible]/radio:scale-100 group-has-[input:focus-visible]/radio:opacity-100',
+        range: 'group-has-[input:focus-visible]/range:scale-100 group-has-[input:focus-visible]/range:opacity-100',
+    }[group] || '';
+    return (_jsx("span", { className: cn('pointer-events-none absolute -inset-1.5 z-1 scale-95 border-2 border-primary opacity-0 duration-200', `color-${color}`, force && 'scale-100 opacity-100', !force && groupClasses, className) }));
+};
+//# sourceMappingURL=FocusableLayer.js.map

package/components/FocusableLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusableLayer.js","sourceRoot":"","sources":["../../../src/components/FocusableLayer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAGlC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAsB9B,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,YAAY,GAChB;QACE,MAAM,EACJ,6EAA6E;QAC/E,KAAK,EACH,mFAAmF;QACrF,QAAQ,EACN,iHAAiH;QACnH,QAAQ,EACN,yGAAyG;QAC3G,MAAM,EACJ,qGAAqG;QACvG,KAAK,EACH,mGAAmG;QACrG,KAAK,EACH,mGAAmG;KACtG,CAAC,KAAqC,CAAC,IAAI,EAAE,CAAC;IACjD,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,qGAAqG,EAErG,SAAS,KAAK,EAAE,EAChB,KAAK,IAAI,uBAAuB,EAChC,CAAC,KAAK,IAAI,YAAY,EACtB,SAAS,CACV,GACD,CACH,CAAC;AACJ,CAAC,CAAC"}

package/components/Input.d.ts

@@ -0,0 +1,87 @@
+import { ElementType, ReactNode, Ref, ChangeEvent, KeyboardEvent, FocusEvent, ComponentPropsWithoutRef } from 'react';
+import { Color } from '../types';
+export type InputSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+interface InputOwnProps<C extends ElementType = 'div', IC extends ElementType = 'input'> {
+    /** Polymorphic **wrapper** element. Defaults to `'div'`. (For the inner input, see `inputComponent`.) */
+    component?: C;
+    /** Native `<input type>`. Default `'text'`. */
+    type?: string;
+    /** Controlled value. */
+    value?: string | number;
+    /**
+     * Custom node displayed in place of the raw `value` while the input is `readOnly` or
+     * unfocused. Useful for formatted display (e.g. show "1,234.56" while the underlying
+     * value is `1234.56`) - the real value re-appears on focus for editing.
+     */
+    displayValue?: ReactNode;
+    placeholder?: string;
+    /** Native `name` attribute, used for form submission. */
+    name?: string;
+    /** Native `required` attribute. Default `false`. */
+    required?: boolean;
+    /** Visually dim the input and disable interaction. Default `false`. */
+    disabled?: boolean;
+    /** Make the input non-editable but still focusable for value display/copying. */
+    readOnly?: boolean;
+    /** `id` for the inner `<input>`. Used to wire an external `<label htmlFor>`. */
+    inputId?: string;
+    /** Apply pill (`rounded-full`) corners. Default `false` - uses size-specific radii. */
+    rounded?: boolean;
+    size?: InputSize;
+    /** Fires on every keystroke. First arg is the new value, second is the raw event. */
+    onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    /** Called when the clear button is pressed. Pair with `clearButton`. */
+    onClear?: () => void;
+    /** Accent color token. Drives the focus ring and `infoMessage` colors. Default: theme accent. */
+    color?: Color;
+    /** Slot rendered before the input element, inside the surface (e.g. unit label, currency symbol). */
+    prefix?: ReactNode;
+    min?: number | string;
+    step?: number | string;
+    /** Slot rendered after the input element, inside the surface. */
+    suffix?: ReactNode;
+    /** Extra classes for the outer wrapper. */
+    className?: string;
+    /** Extra classes for the inner `SurfaceCut` content area (where prefix/input/suffix live). */
+    contentClassName?: string;
+    /** Extra classes for the actual `<input>` element (or `inputComponent`). */
+    inputClassName?: string;
+    max?: number | string;
+    maxLength?: number;
+    /** Render a clear (X) button on the right that fires `onClear`. Hidden when `value` is empty. */
+    clearButton?: boolean;
+    /**
+     * Validity state. Default `true`. When `false`, switches the focus ring to red and shows
+     * `errorMessage` (instead of `infoMessage`).
+     */
+    valid?: boolean;
+    /** Floating label shown above the input on focus. Hidden when `valid === false` or `readOnly`. */
+    infoMessage?: ReactNode;
+    /** Floating error label. Always visible (no focus required) when `valid === false`. */
+    errorMessage?: ReactNode;
+    pattern?: string;
+    inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    /** Icon node rendered inside the surface, absolutely positioned on the left. Shifts input padding. */
+    icon?: ReactNode;
+    /** Extra classes applied to the inner `SurfaceCut`. */
+    surfaceClassName?: string;
+    /** Forwarded to the wrapper element. */
+    ref?: Ref<HTMLElement>;
+    /** Native `autoFocus` - focus the input on mount. */
+    autoFocus?: boolean;
+    /**
+     * Polymorphic **input** element. Defaults to `'input'`. Use this to swap in a custom
+     * component (e.g. a masked input library) that should still inherit the Input chrome
+     * (focus ring, clear button, prefix/suffix, etc.).
+     */
+    inputComponent?: IC;
+    /** Extra props forwarded to the `inputComponent`. Typed against the chosen component. */
+    inputComponentProps?: Partial<ComponentPropsWithoutRef<IC>>;
+}
+export type InputProps<C extends ElementType = 'div', IC extends ElementType = 'input'> = InputOwnProps<C, IC> & Omit<ComponentPropsWithoutRef<C>, keyof InputOwnProps<C, IC>>;
+export declare const Input: <C extends ElementType = "div", IC extends ElementType = "input">(props: InputProps<C, IC>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Input.d.ts.map

package/components/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EACX,SAAS,EACT,GAAG,EACH,WAAW,EACX,aAAa,EACb,UAAU,EAEV,wBAAwB,EACzB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAMjC,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAE1D,UAAU,aAAa,CACrB,CAAC,SAAS,WAAW,GAAG,KAAK,EAC7B,EAAE,SAAS,WAAW,GAAG,OAAO;IAEhC,yGAAyG;IACzG,SAAS,CAAC,EAAE,CAAC,CAAC;IACd,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzE,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iGAAiG;IACjG,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,qGAAqG;IACrG,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,iEAAiE;IACjE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8FAA8F;IAC9F,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iGAAiG;IACjG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kGAAkG;IAClG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,uFAAuF;IACvF,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EACN,MAAM,GACN,MAAM,GACN,KAAK,GACL,KAAK,GACL,OAAO,GACP,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;IACb,sGAAsG;IACtG,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wCAAwC;IACxC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,EAAE,CAAC;IACpB,yFAAyF;IACzF,mBAAmB,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,EAAE,CAAC,CAAC,CAAC;CAC7D;AAED,MAAM,MAAM,UAAU,CACpB,CAAC,SAAS,WAAW,GAAG,KAAK,EAC7B,EAAE,SAAS,WAAW,GAAG,OAAO,IAC9B,aAAa,CAAC,CAAC,EAAE,EAAE,CAAC,GACtB,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,aAAa,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;AAEhE,eAAO,MAAM,KAAK,GAChB,CAAC,SAAS,WAAW,GAAG,KAAK,EAC7B,EAAE,SAAS,WAAW,GAAG,OAAO,EAEhC,OAAO,UAAU,CAAC,CAAC,EAAE,EAAE,CAAC,4CA6RzB,CAAC"}

package/components/Input.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, } from 'react';
+import { useAccentColor } from '../hooks/use-accent-color';
+import { cn } from '../shared/cn';
+import { Button } from './Button';
+import { FocusableLayer } from './FocusableLayer';
+import { CloseIcon } from './icons/CloseIcon';
+import { SurfaceCut } from './SurfaceCut';
+export const Input = (props) => {
+    const accentColor = useAccentColor();
+    const { component = 'div', type = 'text', value, displayValue, placeholder, name, required = false, disabled = false, readOnly, inputId, rounded = false, size = 'lg', onChange = () => { }, onKeyDown = () => { }, onFocus = () => { }, onBlur = () => { }, onClear = () => { }, color = accentColor, prefix, min, step, suffix, className, contentClassName, inputClassName, max, maxLength, clearButton, valid = true, infoMessage, errorMessage, pattern, inputMode, icon, surfaceClassName, autoFocus, inputComponent = 'input', inputComponentProps = {}, ref: externalRef, } = props;
+    const fontSizes = {
+        sm: 'text-xs',
+        md: 'text-xs',
+        lg: 'text-xs',
+        xl: 'text-xs',
+        '2xl': 'text-xs',
+    };
+    const iconWrapClasses = {
+        sm: 'left-2.5 [&>svg]:size-4',
+        md: 'left-2.5 [&>svg]:size-4',
+        lg: 'left-2.5 [&>svg]:size-4',
+        xl: 'left-2.5 [&>svg]:size-4',
+        '2xl': 'left-3.5 [&>svg]:size-4',
+    };
+    const inputPaddingNoIcon = {
+        sm: 'px-2.5',
+        md: 'px-2.5',
+        lg: 'px-2.5',
+        xl: 'px-2.5',
+        '2xl': 'px-3.5',
+    };
+    const inputPaddingWithIcon = {
+        sm: 'pl-8.5 pr-2',
+        md: 'pl-8.5 pr-2',
+        lg: 'pl-8.5 pr-3',
+        xl: 'pl-8.5 pr-3',
+        '2xl': 'pl-9.5 pr-4',
+    };
+    const roundedSizes = {
+        sm: 'rounded-md',
+        md: 'rounded-lg',
+        lg: 'rounded-[10px]',
+        xl: 'rounded-xl',
+        '2xl': 'rounded-xl',
+    };
+    const heights = {
+        sm: 'h-6',
+        md: 'h-7',
+        lg: 'h-9',
+        xl: 'h-10',
+        '2xl': 'h-12',
+    };
+    const prevSize = {
+        sm: 'sm',
+        md: 'sm',
+        lg: 'md',
+        xl: 'lg',
+        '2xl': 'xl',
+    }[size];
+    const inputPadding = icon
+        ? inputPaddingWithIcon[size]
+        : inputPaddingNoIcon[size];
+    const elRef = useRef(null);
+    const inputElRef = useRef(null);
+    const [focused, setFocused] = useState(false);
+    const onFocusInternal = (e) => {
+        setFocused(true);
+        onFocus(e);
+    };
+    const onBlurInternal = (e) => {
+        setFocused(false);
+        onBlur(e);
+    };
+    const Component = component;
+    const InputComponent = inputComponent;
+    const showDisplayValue = displayValue && (readOnly || !focused);
+    const showRealValue = !showDisplayValue;
+    return (_jsxs(Component, { className: cn('input group/input relative', disabled && 'opacity-50', className), children: [!readOnly && !disabled && (_jsx(FocusableLayer, { className: cn(rounded ? 'rounded-full' : roundedSizes[size], valid === false && 'color-red'), force: valid === false, color: valid === false ? 'red' : color, group: "input" })), _jsxs(SurfaceCut, { className: cn(rounded ? 'rounded-full' : roundedSizes[size], surfaceClassName), hoverable: !disabled && !readOnly, contentClassName: cn('flex items-center', contentClassName), onContextMenuCapture: (e) => e.preventDefault(), ref: (el) => {
+                    elRef.current = el;
+                    if (externalRef) {
+                        if (typeof externalRef === 'function')
+                            externalRef(el);
+                        else
+                            externalRef.current = el;
+                    }
+                }, children: [prefix, icon && (_jsx("div", { className: cn('pointer-events-none absolute top-1/2 -translate-y-1/2', iconWrapClasses[size]), children: icon })), _jsx(InputComponent, { tabIndex: disabled || readOnly ? -1 : undefined, autoFocus: autoFocus, readOnly: readOnly, inputMode: inputMode, ref: inputElRef, id: inputId, type: type, disabled: disabled, value: value, name: name, required: required, placeholder: placeholder, className: cn(inputPadding, heights[size], fontSizes[size], rounded ? 'rounded-full' : roundedSizes[size], 'w-full appearance-none border-none bg-transparent font-medium shadow-none outline-none', disabled && 'text-on-surface-darker', 'placeholder-on-surface-darker', !showRealValue && 'text-transparent! placeholder-transparent!', inputClassName), onFocus: onFocusInternal, onBlur: onBlurInternal, onKeyDown: onKeyDown, onChange: (e) => onChange(e.target.value, e), maxLength: maxLength, max: max, min: min, pattern: pattern, step: step, ...inputComponentProps }), showDisplayValue && (_jsx("span", { className: cn(inputPadding, heights[size], fontSizes[size], 'pointer-events-none absolute inset-0 flex items-center font-medium', disabled && 'text-on-surface-darker', inputClassName), children: displayValue })), clearButton && !disabled && !readOnly && (_jsx(Button, { className: cn('mr-1 -ml-2 w-auto shrink-0 transform-gpu duration-200', size === 'sm' && 'h-4 w-5', size === 'md' && 'h-5 w-6', size === 'lg' && 'h-7 w-8', size === 'xl' && 'h-8 w-9', size === '2xl' && 'h-10 w-11', !value && 'pointer-events-none scale-0'), contentClassName: "px-0", disabled: !value, rounded: rounded, size: prevSize, outline: false, onClick: onClear, children: _jsx(CloseIcon, { className: cn('text-on-surface-dark', size === 'sm'
+                                ? 'size-3!'
+                                : size === 'md'
+                                    ? 'size-3.5!'
+                                    : 'size-4') }) })), suffix] }), infoMessage && valid !== false && !readOnly && (_jsx("div", { className: cn('pointer-events-none absolute -top-1.5 left-2 z-10 translate-y-1 rounded-lg bg-primary px-2 py-1.5 text-[10px] leading-none font-semibold text-on-primary opacity-0 duration-200 group-has-[input:focus]/input:-translate-y-1/2 group-has-[input:focus]/input:opacity-100', `color-${color}`), children: infoMessage })), errorMessage && valid === false && (_jsx("div", { className: cn('pointer-events-none absolute -top-1.5 left-2 z-10 -translate-y-1/2 rounded-sm bg-primary px-1 py-0.5 text-[10px] leading-none font-semibold text-on-primary opacity-100 duration-200', `color-red`), children: errorMessage }))] }));
+};
+//# sourceMappingURL=Input.js.map

package/components/Input.js.map

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

package/components/Link.d.ts

@@ -0,0 +1,28 @@
+import { ElementType, Ref, ComponentPropsWithoutRef } from 'react';
+interface LinkOwnProps<C extends ElementType = 'button'> {
+    /** Link content. */
+    children?: React.ReactNode;
+    /** Extra classes for the link element. */
+    className?: string;
+    /** Native `disabled` attribute. */
+    disabled?: boolean;
+    /** Native `readOnly` attribute. */
+    readOnly?: boolean;
+    /**
+     * Polymorphic element. When omitted, defaults to `'a'` if `href` is provided, otherwise
+     * `'button'`. Pass an explicit value to override (e.g. a router `Link` component).
+     */
+    component?: C;
+    /** Reserved for focus-ring styling hooks. Default `true`. */
+    focusable?: boolean;
+    /** Click handler. */
+    onClick?: () => void;
+    /** Native `href` - when provided, the polymorphic default switches from `'button'` to `'a'`. */
+    href?: string;
+    /** Forwarded to the polymorphic root element. */
+    ref?: Ref<HTMLElement>;
+}
+export type LinkProps<C extends ElementType = 'button'> = LinkOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof LinkOwnProps<C>>;
+export declare const Link: <C extends ElementType = "button">({ children, className, disabled, readOnly, component, focusable, onClick, href, ref, ...rest }: LinkProps<C>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Link.d.ts.map

package/components/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAAE,GAAG,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAI3E,UAAU,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ;IACrD,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC;IACd,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gGAAgG;IAChG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAAI,YAAY,CAAC,CAAC,CAAC,GACvE,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAE3D,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,gGAWpD,SAAS,CAAC,CAAC,CAAC,4CAkCd,CAAC"}

package/components/Link.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { cn } from '../shared/cn';
+export const Link = ({ children, className = '', disabled = false, readOnly = false, component, focusable = true, onClick, href, ref, ...rest }) => {
+    const elRef = useRef(null);
+    const Component = (typeof component === 'undefined'
+        ? typeof href === 'string'
+            ? 'a'
+            : 'button'
+        : component);
+    return (_jsx(Component, { ref: (el) => {
+            elRef.current = el;
+            if (ref && typeof ref === 'function') {
+                ref(el);
+            }
+            else if (ref) {
+                ref.current = el;
+            }
+        }, className: cn('group/link relative cursor-pointer appearance-none duration-200 select-none focus:ring-0 focus:outline-0 active:opacity-50 active:duration-0', className), readOnly: readOnly, disabled: disabled, onClick: onClick, href: href, ...rest, children: children }));
+};
+//# sourceMappingURL=Link.js.map

package/components/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAA8C,MAAM,OAAO,CAAC;AAE3E,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AA6BlC,MAAM,CAAC,MAAM,IAAI,GAAG,CAAmC,EACrD,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,SAAS,GAAG,IAAI,EAChB,OAAO,EACP,IAAI,EACJ,GAAG,EACH,GAAG,IAAI,EACM,EAAE,EAAE;IACjB,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,CAChB,OAAO,SAAS,KAAK,WAAW;QAC9B,CAAC,CAAC,OAAO,IAAI,KAAK,QAAQ;YACxB,CAAC,CAAC,GAAG;YACL,CAAC,CAAC,QAAQ;QACZ,CAAC,CAAC,SAAS,CACC,CAAC;IAEjB,OAAO,CACL,KAAC,SAAS,IACR,GAAG,EAAE,CAAC,EAAO,EAAE,EAAE;YACf,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;YACnB,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBACrC,GAAG,CAAC,EAAE,CAAC,CAAC;YACV,CAAC;iBAAM,IAAI,GAAG,EAAE,CAAC;gBACf,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC;YACnB,CAAC;QACH,CAAC,EACD,SAAS,EAAE,EAAE,CACX,8IAA8I,EAC9I,SAAS,CACV,EACD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,KACN,IAAI,YAEP,QAAQ,GACC,CACb,CAAC;AACJ,CAAC,CAAC"}