supa-ui 0.0.0-stage → 0.3.1

package/dist/toastly/toastly.js

@@ -0,0 +1,92 @@
+export const TOASTLY_EVENTS = {
+    add: "toastly:add-toast",
+    dismiss: "toastly:dismiss-alert",
+    alert: "toastly:alert",
+    confirm: "toastly:confirm"
+};
+let counter = 0;
+const emit = (name, detail) => {
+    if (typeof window === "undefined")
+        return false;
+    window.dispatchEvent(new CustomEvent(name, { detail }));
+    return true;
+};
+const normalize = (input) => typeof input === "string" ? { message: input } : input;
+const add = (input) => {
+    const toast = normalize(input);
+    const id = toast.id ?? `toastly-${Date.now()}-${++counter}`;
+    emit(TOASTLY_EVENTS.add, { ...toast, id });
+    return id;
+};
+const withVariant = (variant) => (input) => add({ ...normalize(input), variant });
+const dismiss = (id) => {
+    emit(TOASTLY_EVENTS.dismiss, { id });
+};
+export const toastly = {
+    add,
+    info: withVariant("info"),
+    success: withVariant("success"),
+    warning: withVariant("warning"),
+    error: withVariant("error"),
+    dismiss,
+    promise(promise, messages) {
+        const id = add({ message: messages.loading, variant: "info", loading: true, autoDismiss: false });
+        return promise.then((value) => {
+            dismiss(id);
+            const message = typeof messages.success === "function" ? messages.success(value) : messages.success;
+            add({ message, variant: "success" });
+            return value;
+        }, (error) => {
+            dismiss(id);
+            const message = typeof messages.error === "function" ? messages.error(error) : messages.error;
+            add({ message, variant: "error" });
+            throw error;
+        });
+    },
+    alert(event) {
+        return new Promise((resolve) => {
+            const sent = emit(TOASTLY_EVENTS.alert, {
+                ...event,
+                onClose: () => {
+                    event.onClose?.();
+                    resolve();
+                }
+            });
+            if (!sent)
+                resolve();
+        });
+    },
+    confirm(event) {
+        return new Promise((resolve) => {
+            let settled = false;
+            const settle = (value) => {
+                if (settled)
+                    return;
+                settled = true;
+                resolve(value);
+            };
+            const sent = emit(TOASTLY_EVENTS.confirm, {
+                ...event,
+                onConfirm: () => {
+                    event.onConfirm?.();
+                    settle(true);
+                },
+                onCancel: () => {
+                    event.onCancel?.();
+                    settle(false);
+                },
+                onClose: () => {
+                    event.onClose?.();
+                    settle(false);
+                }
+            });
+            if (!sent)
+                settle(false);
+        });
+    },
+    to(x, y) {
+        return {
+            add: (input) => add({ ...normalize(input), position: [x, y] })
+        };
+    }
+};

package/dist/toastly/types.d.ts

@@ -0,0 +1,36 @@
+import type * as React from "react";
+export type ToastVariant = "info" | "success" | "warning" | "error";
+export type ToastlyPosition = "top-left" | "top-center" | "top-right" | "left-center" | "center" | "right-center" | "bottom-left" | "bottom-center" | "bottom-right" | "tl" | "tc" | "tr" | "lc" | "c" | "rc" | "bl" | "bc" | "br";
+export type ToastEvent = {
+    id?: string;
+    message: React.ReactNode;
+    variant?: ToastVariant;
+    allowDismiss?: boolean;
+    autoDismiss?: boolean;
+    autoDismissIn?: number;
+    loading?: boolean;
+    position?: [x?: number | `${number}`, y?: number | `${number}`];
+};
+export type AlertEvent = {
+    title?: string;
+    message?: React.ReactNode;
+    okLabel?: string;
+    onClose?: () => void;
+};
+export type ConfirmEvent = {
+    title?: string;
+    message?: React.ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    danger?: boolean;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    onClose?: () => void;
+};
+export type ToastlyProviderProps = {
+    children?: React.ReactNode;
+    position?: ToastlyPosition;
+    duration?: number | `${number}`;
+    maxVisible?: number;
+};
+export type ToastInput = string | ToastEvent;

package/dist/toastly/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/avatar.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type AvatarProps = {
+    src?: string;
+    name?: string;
+    size?: "sm" | "md" | "lg";
+} & React.HTMLAttributes<HTMLSpanElement>;
+export default function Avatar({ src, name, size, className, ...props }: AvatarProps): React.JSX.Element;

package/dist/ui/avatar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+export default function Avatar({ src, name = "", size = "md", className = "", ...props }) {
+    const sizes = { sm: "size-6 text-[10px]", md: "size-8 text-xs", lg: "size-10 text-sm" };
+    const initials = name
+        .split(" ")
+        .filter(Boolean)
+        .slice(0, 2)
+        .map((part) => part[0]?.toUpperCase())
+        .join("");
+    return (_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-muted font-medium text-foreground-light", sizes[size], className), ...props, children: src ? _jsx("img", { src: src, alt: name, className: "size-full object-cover" }) : initials }));
+}

package/dist/ui/badge.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export type BadgeProps = {
+    variant?: "default" | "primary" | "outline" | "danger";
+    size?: "sm" | "md";
+} & React.HTMLAttributes<HTMLSpanElement>;
+export default function Badge({ variant, size, className, children, ...props }: BadgeProps): React.JSX.Element;

package/dist/ui/badge.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+export default function Badge({ variant = "default", size = "md", className = "", children, ...props }) {
+    const variants = {
+        default: "border-border bg-muted text-foreground-light",
+        primary: "border-primary/30 bg-primary/10 text-primary",
+        outline: "border-border-strong bg-transparent text-foreground-light",
+        danger: "border-destructive/30 bg-destructive/10 text-destructive"
+    };
+    const sizes = {
+        sm: "px-1.5 py-0.5 text-[10px]",
+        md: "px-2 py-0.5 text-xs"
+    };
+    return (_jsx("span", { className: cn("inline-flex shrink-0 items-center gap-1 rounded-full border font-medium whitespace-nowrap [&_svg]:size-3", variants[variant], sizes[size], className), ...props, children: children }));
+}

package/dist/ui/button.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
+    size?: "tiny" | "sm" | "md" | "lg";
+    loading?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+};
+export default function Button({ variant, size, loading, disabled, leftIcon, rightIcon, className, children, type, ...props }: ButtonProps): React.JSX.Element;
+export {};

package/dist/ui/button.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+export default function Button({ variant = "primary", size = "md", loading = false, disabled, leftIcon, rightIcon, className = "", children, type = "button", ...props }) {
+    const variants = {
+        primary: "bg-primary text-primary-foreground shadow-[var(--sui-button-shadow-raised)] hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground border border-border hover:bg-accent",
+        outline: "border border-border bg-transparent text-foreground hover:bg-accent",
+        ghost: "bg-transparent text-foreground hover:bg-accent",
+        danger: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90"
+    };
+    const sizes = {
+        tiny: "h-[26px] rounded-md px-2.5 text-xs [&_svg]:size-3.5",
+        sm: "h-8 rounded-md px-3 text-xs [&_svg]:size-4",
+        md: "h-9 rounded-md px-3.5 text-sm [&_svg]:size-4",
+        lg: "h-10 rounded-lg px-5 text-sm [&_svg]:size-5"
+    };
+    return (_jsxs("button", { type: type, disabled: disabled || loading, "aria-busy": loading || undefined, className: cn("relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap font-medium text-center transition-[background-color,border-color,color,transform] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] motion-safe:active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50", variants[variant], sizes[size], className), ...props, children: [loading ? (_jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-r-transparent" })) : (leftIcon), _jsx("span", { className: "truncate", children: children }), !loading && rightIcon] }));
+}

package/dist/ui/card.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+export declare function CardHeader({ className, ...props }: DivProps): React.JSX.Element;
+export declare function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
+export declare function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
+export declare function CardContent({ className, ...props }: DivProps): React.JSX.Element;
+export declare function CardFooter({ className, ...props }: DivProps): React.JSX.Element;
+export type CardProps = {
+    interactive?: boolean;
+} & DivProps;
+export default function Card({ interactive, className, ...props }: CardProps): React.JSX.Element;
+export {};

package/dist/ui/card.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+export function CardHeader({ className = "", ...props }) {
+    return _jsx("div", { className: cn("flex flex-col gap-1 border-b border-border px-5 py-4", className), ...props });
+}
+export function CardTitle({ className = "", ...props }) {
+    return _jsx("h3", { className: cn("text-sm font-medium text-foreground", className), ...props });
+}
+export function CardDescription({ className = "", ...props }) {
+    return _jsx("p", { className: cn("text-sm text-foreground-muted", className), ...props });
+}
+export function CardContent({ className = "", ...props }) {
+    return _jsx("div", { className: cn("px-5 py-4", className), ...props });
+}
+export function CardFooter({ className = "", ...props }) {
+    return _jsx("div", { className: cn("flex items-center gap-2 border-t border-border px-5 py-3", className), ...props });
+}
+export default function Card({ interactive = false, className = "", ...props }) {
+    return (_jsx("div", { className: cn("overflow-hidden rounded-lg border border-border bg-card text-card-foreground", interactive && "cursor-pointer transition-colors duration-200 hover:border-border-strong", className), ...props }));
+}

package/dist/ui/checkbox.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export type CheckboxProps = {
+    label?: React.ReactNode;
+    description?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type">;
+export default function Checkbox({ label, description, className, id, disabled, ...props }: CheckboxProps): React.JSX.Element;

package/dist/ui/checkbox.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+export default function Checkbox({ label, description, className = "", id, disabled, ...props }) {
+    const generatedId = React.useId();
+    const checkboxId = id ?? generatedId;
+    return (_jsxs("div", { className: cn("flex items-start gap-2.5", disabled && "opacity-50"), children: [_jsx("input", { id: checkboxId, type: "checkbox", disabled: disabled, className: cn("mt-0.5 size-4 shrink-0 cursor-pointer rounded border-control accent-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed", className), ...props }), (label || description) && (_jsxs("label", { htmlFor: checkboxId, className: "flex cursor-pointer flex-col gap-0.5", children: [label && _jsx("span", { className: "text-sm text-foreground", children: label }), description && _jsx("span", { className: "text-xs text-foreground-muted", children: description })] }))] }));
+}

package/dist/ui/dropdown.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export type DropdownEntry = {
+    type?: "item";
+    label: string;
+    icon?: React.ReactNode;
+    onSelect?: () => void;
+    danger?: boolean;
+    disabled?: boolean;
+} | {
+    type: "separator";
+};
+export type DropdownProps = {
+    trigger: React.ReactNode;
+    items: DropdownEntry[];
+    align?: "start" | "end";
+    triggerLabel?: string;
+    className?: string;
+};
+export default function Dropdown({ trigger, items, align, triggerLabel, className }: DropdownProps): React.JSX.Element;

package/dist/ui/dropdown.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+export default function Dropdown({ trigger, items, align = "end", triggerLabel = "Menu", className = "" }) {
+    const [open, setOpen] = React.useState(false);
+    const rootRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onPointer = (event) => {
+            if (!rootRef.current?.contains(event.target))
+                setOpen(false);
+        };
+        const onKey = (event) => {
+            if (event.key === "Escape")
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", onPointer);
+        document.addEventListener("keydown", onKey);
+        menuRef.current?.querySelector('[role="menuitem"]:not([disabled])')?.focus();
+        return () => {
+            document.removeEventListener("mousedown", onPointer);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [open]);
+    const onMenuKeyDown = (event) => {
+        const nodes = Array.from(menuRef.current?.querySelectorAll('[role="menuitem"]:not([disabled])') ?? []);
+        const index = nodes.indexOf(document.activeElement);
+        if (event.key === "ArrowDown")
+            nodes[(index + 1) % nodes.length]?.focus();
+        else if (event.key === "ArrowUp")
+            nodes[(index - 1 + nodes.length) % nodes.length]?.focus();
+        else
+            return;
+        event.preventDefault();
+    };
+    return (_jsxs("div", { ref: rootRef, className: cn("relative inline-flex", className), children: [_jsx("button", { type: "button", "aria-label": triggerLabel, "aria-haspopup": "menu", "aria-expanded": open, onClick: () => setOpen((v) => !v), className: "inline-flex cursor-pointer items-center rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: trigger }), open && (_jsx("div", { ref: menuRef, role: "menu", onKeyDown: onMenuKeyDown, style: { animation: "sui-pop-in 120ms ease-out" }, className: cn("absolute top-full z-50 mt-1.5 min-w-44 rounded-md border border-border bg-popover p-1 text-sm text-foreground shadow-lg", align === "end" ? "right-0 origin-top-right" : "left-0 origin-top-left"), children: items.map((entry, index) => entry.type === "separator" ? (_jsx("div", { role: "separator", className: "my-1 h-px bg-border" }, index)) : (_jsxs("button", { role: "menuitem", type: "button", disabled: entry.disabled, onClick: () => {
+                        entry.onSelect?.();
+                        setOpen(false);
+                    }, className: cn("flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left outline-none transition-colors hover:bg-accent focus:bg-accent disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4", entry.danger && "text-destructive"), children: [entry.icon, entry.label] }, `${entry.label}-${index}`))) }))] }));
+}

package/dist/ui/input.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export type InputProps = {
+    label?: string;
+    hint?: string;
+    error?: string;
+    icon?: React.ReactNode;
+    size?: "sm" | "md" | "lg";
+    variant?: "default" | "filled";
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+export default function Input({ label, hint, error, icon, size, variant, className, id, disabled, ...props }: InputProps): React.JSX.Element;

package/dist/ui/input.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+export default function Input({ label, hint, error, icon, size = "md", variant = "default", className = "", id, disabled, ...props }) {
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+    const descriptionId = `${inputId}-description`;
+    const errorId = `${inputId}-error`;
+    const sizes = {
+        sm: "h-8 px-2.5 text-xs",
+        md: "h-[34px] px-3 text-sm",
+        lg: "h-10 px-3.5 text-base"
+    };
+    const variants = {
+        default: "bg-field border-control",
+        filled: "bg-muted border-transparent"
+    };
+    return (_jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [label && (_jsx("label", { htmlFor: inputId, className: "text-sm font-medium text-foreground", children: label })), _jsxs("div", { className: "relative flex w-full items-center", children: [icon && (_jsx("span", { className: "pointer-events-none absolute left-3 flex items-center text-foreground-muted [&_svg]:size-4", children: icon })), _jsx("input", { id: inputId, disabled: disabled, "aria-invalid": !!error, "aria-describedby": error ? errorId : hint ? descriptionId : undefined, className: cn("flex w-full min-w-0 rounded-md border text-foreground placeholder:text-foreground-muted file:border-0 file:bg-transparent file:text-sm file:font-medium read-only:border-button read-only:text-foreground-light transition-colors duration-200 hover:border-control-hover focus:border-control-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 disabled:text-foreground-muted aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive", variants[variant], sizes[size], icon ? "pl-9" : "", className), ...props })] }), error && (_jsx("span", { id: errorId, role: "alert", className: "text-xs text-destructive", children: error })), !error && hint && (_jsx("span", { id: descriptionId, className: "text-xs text-foreground-muted", children: hint }))] }));
+}

package/dist/ui/link.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export type LinkProps = {
+    url: string;
+    text?: string;
+    icon?: React.ReactNode;
+    active?: boolean;
+    as?: React.ElementType;
+    variant?: "default" | "primary" | "secondary" | "ghost";
+    size?: "sm" | "md" | "lg";
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">;
+export default function Link({ url, text, icon, active, as, variant, size, className, children, ...props }: LinkProps): React.JSX.Element;

package/dist/ui/link.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+export default function Link({ url, text, icon, active = false, as, variant = "default", size = "md", className = "", children, ...props }) {
+    const Component = as ?? "a";
+    const variants = {
+        default: "text-foreground-lighter hover:bg-accent hover:text-foreground",
+        primary: "text-primary hover:bg-primary/10",
+        secondary: "text-secondary-foreground hover:bg-secondary",
+        ghost: "text-muted-foreground hover:bg-accent hover:text-foreground"
+    };
+    const sizes = {
+        sm: "h-7 px-2 text-xs [&>svg]:size-4",
+        md: "h-8 px-2 text-sm [&>svg]:size-5",
+        lg: "h-10 px-3 text-base [&>svg]:size-5"
+    };
+    return (_jsxs(Component, { href: url, "data-active": active, "aria-current": active ? "page" : undefined, className: cn("flex w-full items-center gap-2 overflow-hidden rounded-md text-left outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring active:bg-accent [&>span:last-child]:truncate [&>svg]:shrink-0", variants[variant], sizes[size], active && "bg-accent font-medium text-foreground", className), ...props, children: [icon, text ? _jsx("span", { children: text }) : children] }));
+}

package/dist/ui/modal.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export type ModalProps = {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    description?: string;
+    footer?: React.ReactNode;
+    size?: "sm" | "md" | "lg";
+    children?: React.ReactNode;
+    className?: string;
+};
+export default function Modal({ open, onClose, title, description, footer, size, children, className }: ModalProps): React.JSX.Element | null;

package/dist/ui/modal.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+export default function Modal({ open, onClose, title, description, footer, size = "md", children, className = "" }) {
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                onClose();
+        };
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.body.style.overflow = previousOverflow;
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [open, onClose]);
+    if (!open)
+        return null;
+    const sizes = { sm: "max-w-sm", md: "max-w-lg", lg: "max-w-2xl" };
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs", onMouseDown: (event) => {
+            if (event.target === event.currentTarget)
+                onClose();
+        }, children: _jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": title, className: cn("flex max-h-[90vh] w-full flex-col overflow-hidden rounded-lg border border-border bg-popover text-foreground shadow-2xl", sizes[size], className), children: [(title || description) && (_jsxs("div", { className: "flex items-start justify-between gap-4 border-b border-border px-5 py-4", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [title && _jsx("h2", { className: "text-sm font-medium", children: title }), description && _jsx("p", { className: "text-sm text-foreground-muted", children: description })] }), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", className: "-mr-1.5 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-foreground-muted transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "size-4", children: _jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) })] })), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-5 py-4", children: children }), footer && (_jsx("div", { className: "flex items-center justify-end gap-2 border-t border-border px-5 py-3", children: footer }))] }) }));
+}

package/dist/ui/select.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type SelectProps = {
+    label?: string;
+    hint?: string;
+    error?: string;
+    size?: "sm" | "md" | "lg";
+    options?: SelectOption[];
+} & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size">;
+export default function Select({ label, hint, error, size, options, className, id, disabled, children, ...props }: SelectProps): React.JSX.Element;

package/dist/ui/select.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+export default function Select({ label, hint, error, size = "md", options, className = "", id, disabled, children, ...props }) {
+    const generatedId = React.useId();
+    const selectId = id ?? generatedId;
+    const descriptionId = `${selectId}-description`;
+    const errorId = `${selectId}-error`;
+    const sizes = {
+        sm: "h-8 pl-2.5 pr-8 text-xs",
+        md: "h-[34px] pl-3 pr-9 text-sm",
+        lg: "h-10 pl-3.5 pr-10 text-base"
+    };
+    return (_jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [label && (_jsx("label", { htmlFor: selectId, className: "text-sm font-medium text-foreground", children: label })), _jsxs("div", { className: "relative flex w-full items-center", children: [_jsx("select", { id: selectId, disabled: disabled, "aria-invalid": !!error, "aria-describedby": error ? errorId : hint ? descriptionId : undefined, className: cn("w-full min-w-0 cursor-pointer appearance-none rounded-md border border-control bg-field text-foreground transition-colors duration-200 hover:border-control-hover focus:border-control-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive", sizes[size], className), ...props, children: options
+                            ? options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))
+                            : children }), _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "pointer-events-none absolute right-3 size-4 text-foreground-muted", children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }), error && (_jsx("span", { id: errorId, role: "alert", className: "text-xs text-destructive", children: error })), !error && hint && (_jsx("span", { id: descriptionId, className: "text-xs text-foreground-muted", children: hint }))] }));
+}

package/dist/ui/spinner.d.ts

@@ -0,0 +1,5 @@
+export type SpinnerProps = {
+    size?: "sm" | "md" | "lg";
+    className?: string;
+};
+export default function Spinner({ size, className }: SpinnerProps): import("react").JSX.Element;

package/dist/ui/spinner.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn";
+export default function Spinner({ size = "md", className = "" }) {
+    const sizes = { sm: "size-3.5", md: "size-5", lg: "size-8" };
+    return (_jsx("span", { role: "status", "aria-label": "Loading", className: cn("inline-block animate-spin rounded-full border-2 border-foreground-muted border-r-transparent", sizes[size], className) }));
+}

package/dist/ui/tabs.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export type TabItem = {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+    content?: React.ReactNode;
+    disabled?: boolean;
+};
+export type TabsProps = {
+    items: TabItem[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+};
+export default function Tabs({ items, value, defaultValue, onChange, className }: TabsProps): React.JSX.Element;

package/dist/ui/tabs.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+export default function Tabs({ items, value, defaultValue, onChange, className = "" }) {
+    const [inner, setInner] = React.useState(defaultValue ?? items[0]?.value);
+    const current = value ?? inner;
+    const baseId = React.useId();
+    const select = (next) => {
+        if (value === undefined)
+            setInner(next);
+        onChange?.(next);
+    };
+    const onKeyDown = (event) => {
+        const enabled = items.filter((item) => !item.disabled);
+        const index = enabled.findIndex((item) => item.value === current);
+        let next = index;
+        if (event.key === "ArrowRight")
+            next = (index + 1) % enabled.length;
+        else if (event.key === "ArrowLeft")
+            next = (index - 1 + enabled.length) % enabled.length;
+        else if (event.key === "Home")
+            next = 0;
+        else if (event.key === "End")
+            next = enabled.length - 1;
+        else
+            return;
+        event.preventDefault();
+        select(enabled[next].value);
+        document.getElementById(`${baseId}-tab-${enabled[next].value}`)?.focus();
+    };
+    const active = items.find((item) => item.value === current);
+    return (_jsxs("div", { className: cn("flex w-full flex-col gap-4", className), children: [_jsx("div", { role: "tablist", onKeyDown: onKeyDown, className: "flex items-center gap-1 overflow-x-auto border-b border-border", children: items.map((item) => {
+                    const selected = item.value === current;
+                    return (_jsxs("button", { id: `${baseId}-tab-${item.value}`, role: "tab", type: "button", "aria-selected": selected, "aria-controls": `${baseId}-panel-${item.value}`, tabIndex: selected ? 0 : -1, disabled: item.disabled, onClick: () => select(item.value), className: cn("-mb-px inline-flex h-9 shrink-0 cursor-pointer items-center gap-2 border-b-2 px-3 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4", selected
+                            ? "border-primary font-medium text-foreground"
+                            : "border-transparent text-foreground-muted hover:text-foreground"), children: [item.icon, item.label] }, item.value));
+                }) }), active?.content !== undefined && (_jsx("div", { role: "tabpanel", id: `${baseId}-panel-${active.value}`, "aria-labelledby": `${baseId}-tab-${active.value}`, children: active.content }))] }));
+}

package/dist/ui/textarea.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type TextareaProps = {
+    label?: string;
+    hint?: string;
+    error?: string;
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export default function Textarea({ label, hint, error, className, id, rows, ...props }: TextareaProps): React.JSX.Element;

package/dist/ui/textarea.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn";
+export default function Textarea({ label, hint, error, className = "", id, rows = 4, ...props }) {
+    const generatedId = React.useId();
+    const textareaId = id ?? generatedId;
+    const descriptionId = `${textareaId}-description`;
+    const errorId = `${textareaId}-error`;
+    return (_jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [label && (_jsx("label", { htmlFor: textareaId, className: "text-sm font-medium text-foreground", children: label })), _jsx("textarea", { id: textareaId, rows: rows, "aria-invalid": !!error, "aria-describedby": error ? errorId : hint ? descriptionId : undefined, className: cn("flex w-full min-w-0 resize-y rounded-md border border-control bg-field px-3 py-2 text-sm text-foreground placeholder:text-foreground-muted transition-colors duration-200 hover:border-control-hover focus:border-control-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive", className), ...props }), error && (_jsx("span", { id: errorId, role: "alert", className: "text-xs text-destructive", children: error })), !error && hint && (_jsx("span", { id: descriptionId, className: "text-xs text-foreground-muted", children: hint }))] }));
+}