@hewnui/ui 0.0.0-stage → 0.1.0

package/dist/components/tag-field/tag-field.types.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import type { ComboBoxProps, Key } from "react-aria-components";
+import type { FieldSize, FieldVariant } from "../../styles/field";
+export type TagFieldSize = FieldSize;
+export type TagFieldVariant = FieldVariant;
+type MultiComboBoxProps = ComboBoxProps<object, "multiple">;
+export type TagFieldProps = Omit<MultiComboBoxProps, "children" | "className" | "selectionMode" | "placeholder" | "label" | "description" | "errorMessage"> & {
+    children: ReactNode;
+    className?: string;
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: ReactNode;
+    placeholder?: string;
+    size?: TagFieldSize;
+    variant?: TagFieldVariant;
+    /** Cap how many options can be selected. Extra keys are ignored. */
+    maxSelections?: number;
+    /** Shown in the tag list when nothing is selected. */
+    emptyLabel?: ReactNode;
+    /** Shown in the listbox when the filter matches nothing. */
+    listEmptyLabel?: ReactNode;
+    /** Accessible name for the selected-tag group. */
+    tagsLabel?: string;
+};
+export type TagFieldItemProps = {
+    id: Key;
+    children: ReactNode;
+    textValue?: string;
+    isDisabled?: boolean;
+};
+export type TagFieldChangeHandler = (value: Key[]) => void;
+export {};

package/dist/components/tag-field/tag-field.types.js

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

package/dist/components/text-area/index.d.ts

@@ -0,0 +1,2 @@
+export { TextArea } from "./text-area";
+export type { TextAreaProps, TextAreaSize, TextAreaVariant } from "./text-area.types";

package/dist/components/text-area/index.js

@@ -0,0 +1 @@
+export { TextArea } from "./text-area";

package/dist/components/text-area/text-area.d.ts

@@ -0,0 +1,2 @@
+import type { TextAreaProps } from "./text-area.types";
+export declare function TextArea({ className, description, errorMessage, label, placeholder, rows, size, textAreaClassName: areaClass, variant, ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/text-area/text-area.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldError, Label, Text, TextArea as AriaTextArea, TextField as AriaTextField, } from "react-aria-components";
+import { cn } from "../../utils/cn";
+import { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, fieldRootClass, fieldSurfaceProps, } from "../../styles/field";
+import { textAreaClassName } from "./text-area.styles";
+export function TextArea({ className, description, errorMessage, label, placeholder, rows = 4, size = "md", textAreaClassName: areaClass, variant = "outline", ...props }) {
+    return (_jsxs(AriaTextField, { ...props, className: cn(fieldRootClass, className), children: [label ? _jsx(Label, { className: fieldLabelClass, children: label }) : null, _jsx(AriaTextArea, { ...fieldSurfaceProps(variant), rows: rows, className: textAreaClassName({ className: areaClass, size, variant }), ...(placeholder !== undefined ? { placeholder } : {}) }), description ? (_jsx(Text, { slot: "description", className: fieldDescriptionClass, children: description })) : null, _jsx(FieldError, { className: fieldErrorClass, children: errorMessage })] }));
+}

package/dist/components/text-area/text-area.styles.d.ts

@@ -0,0 +1,6 @@
+import { type FieldSize, type FieldVariant } from "../../styles/field";
+export declare function textAreaClassName({ className, size, variant, }?: {
+    className?: string | undefined;
+    size?: FieldSize | undefined;
+    variant?: FieldVariant | undefined;
+}): string;

package/dist/components/text-area/text-area.styles.js

@@ -0,0 +1,5 @@
+import { cn } from "../../utils/cn";
+import { inputSurfaceClassName, } from "../../styles/field";
+export function textAreaClassName({ className, size = "md", variant = "outline", } = {}) {
+    return cn(inputSurfaceClassName({ size, variant }), "min-h-[6.5rem] resize-y py-2.5 leading-relaxed", className);
+}

package/dist/components/text-area/text-area.types.d.ts

@@ -0,0 +1,16 @@
+import type { TextFieldProps as AriaTextFieldProps } from "react-aria-components";
+import type { ReactNode } from "react";
+import type { FieldSize, FieldVariant } from "../../styles/field";
+export type TextAreaVariant = FieldVariant;
+export type TextAreaSize = FieldSize;
+export type TextAreaProps = Omit<AriaTextFieldProps, "className" | "children"> & {
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: ReactNode;
+    placeholder?: string;
+    className?: string;
+    textAreaClassName?: string;
+    variant?: TextAreaVariant;
+    size?: TextAreaSize;
+    rows?: number;
+};

package/dist/components/text-area/text-area.types.js

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

package/dist/components/text-field/index.d.ts

@@ -0,0 +1,2 @@
+export { TextField } from "./text-field";
+export type { TextFieldProps } from "./text-field.types";

package/dist/components/text-field/index.js

@@ -0,0 +1 @@
+export { TextField } from "./text-field";

package/dist/components/text-field/text-field.d.ts

@@ -0,0 +1,2 @@
+import type { TextFieldProps } from "./text-field.types";
+export declare function TextField({ className, description, errorMessage, inputClassName: inputClass, label, placeholder, size, variant, ...props }: TextFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/text-field/text-field.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldError, Input, Label, Text, TextField as AriaTextField, } from "react-aria-components";
+import { cn } from "../../utils/cn";
+import { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, fieldRootClass, fieldSurfaceProps, inputClassName, } from "../../styles/field";
+export function TextField({ className, description, errorMessage, inputClassName: inputClass, label, placeholder, size = "md", variant = "outline", ...props }) {
+    return (_jsxs(AriaTextField, { ...props, className: cn(fieldRootClass, className), children: [label ? _jsx(Label, { className: fieldLabelClass, children: label }) : null, _jsx(Input, { ...fieldSurfaceProps(variant), className: inputClassName({ className: inputClass, size, variant }), ...(placeholder !== undefined ? { placeholder } : {}) }), description ? (_jsx(Text, { slot: "description", className: fieldDescriptionClass, children: description })) : null, _jsx(FieldError, { className: fieldErrorClass, children: errorMessage })] }));
+}

package/dist/components/text-field/text-field.styles.d.ts

@@ -0,0 +1 @@
+export { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, fieldRootClass, fieldSurfaceProps, inputClassName, inputSurfaceClassName, } from "../../styles/field";

package/dist/components/text-field/text-field.styles.js

@@ -0,0 +1 @@
+export { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, fieldRootClass, fieldSurfaceProps, inputClassName, inputSurfaceClassName, } from "../../styles/field";

package/dist/components/text-field/text-field.types.d.ts

@@ -0,0 +1,15 @@
+import type { TextFieldProps as AriaTextFieldProps } from "react-aria-components";
+import type { ReactNode } from "react";
+import type { FieldSize, FieldVariant } from "../../styles/field";
+export type TextFieldVariant = FieldVariant;
+export type TextFieldSize = FieldSize;
+export type TextFieldProps = Omit<AriaTextFieldProps, "className" | "children"> & {
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: ReactNode;
+    placeholder?: string;
+    className?: string;
+    inputClassName?: string;
+    variant?: TextFieldVariant;
+    size?: TextFieldSize;
+};

package/dist/components/text-field/text-field.types.js

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

package/dist/components/toast/index.d.ts

@@ -0,0 +1,2 @@
+export { ToastProvider, useToast } from "./toast";
+export type { ToastTone } from "./toast.styles";

package/dist/components/toast/index.js

@@ -0,0 +1 @@
+export { ToastProvider, useToast } from "./toast";

package/dist/components/toast/toast-glyph.d.ts

@@ -0,0 +1,4 @@
+import { type ToastTone } from "./toast.styles";
+export declare function ToastGlyph({ tone }: {
+    tone: ToastTone;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/toast/toast-glyph.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toastIconClassName } from "./toast.styles";
+export function ToastGlyph({ tone }) {
+    const common = {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        "aria-hidden": true,
+        className: toastIconClassName(),
+    };
+    if (tone === "success") {
+        return (_jsx("svg", { ...common, children: _jsx("path", { d: "M3.5 8.2 6.2 11l6.3-7", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+    }
+    if (tone === "danger") {
+        return (_jsx("svg", { ...common, children: _jsx("path", { d: "M4.2 4.2 11.8 11.8M11.8 4.2 4.2 11.8", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round" }) }));
+    }
+    if (tone === "warning") {
+        return (_jsxs("svg", { ...common, children: [_jsx("path", { d: "M8 3.2 13.4 12.5H2.6L8 3.2Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }), _jsx("path", { d: "M8 7v2.4M8 11.2h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
+    }
+    if (tone === "info") {
+        return (_jsxs("svg", { ...common, children: [_jsx("circle", { cx: "8", cy: "8", r: "5.5", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M8 7.2V11M8 5.2h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
+    }
+    return (_jsxs("svg", { ...common, children: [_jsx("circle", { cx: "8", cy: "8", r: "5.5", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("circle", { cx: "8", cy: "8", r: "1.6", fill: "currentColor" })] }));
+}

package/dist/components/toast/toast-item.d.ts

@@ -0,0 +1,14 @@
+import { type ToastTone } from "./toast.styles";
+export type ToastItemData = {
+    id: string;
+    title: string;
+    description?: string;
+    tone: ToastTone;
+    duration: number;
+};
+declare function ToastItemInner({ item, onDismiss, }: {
+    item: ToastItemData;
+    onDismiss: (id: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const ToastItem: import("react").MemoExoticComponent<typeof ToastItemInner>;
+export {};

package/dist/components/toast/toast-item.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { m } from "motion/react";
+import { easings, springs } from "@hewnui/motion";
+import { useMotionMode } from "../../providers/motion-provider";
+import { ToastGlyph } from "./toast-glyph";
+import { toastBodyClassName, toastDescriptionClassName, toastDismissClassName, toastIconWellClassName, toastItemClassName, toastMetaClassName, toastProgressBarClassName, toastProgressTrackClassName, toastTitleClassName, toastToneLabel, } from "./toast.styles";
+function ToastItemInner({ item, onDismiss, }) {
+    const { motionEnabled } = useMotionMode();
+    const tone = item.tone;
+    const card = (_jsxs("div", { role: tone === "danger" ? "alert" : "status", "aria-live": tone === "danger" ? "assertive" : "polite", "data-kp-control": "toast", className: toastItemClassName(tone), children: [_jsxs("div", { className: toastBodyClassName(), children: [_jsx("span", { className: toastIconWellClassName(), "data-kp-toast": "icon", children: _jsx(ToastGlyph, { tone: tone }) }), _jsxs("div", { className: "min-w-0 flex-1 pt-0.5", children: [_jsx("p", { className: toastMetaClassName(), children: toastToneLabel[tone] }), _jsx("p", { className: toastTitleClassName(), children: item.title }), item.description ? (_jsx("p", { className: toastDescriptionClassName(), children: item.description })) : null] }), _jsx("button", { type: "button", className: toastDismissClassName(), "aria-label": "Dismiss notification", onClick: () => onDismiss(item.id), children: _jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "size-3.5", children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) }) })] }), _jsx("div", { className: toastProgressTrackClassName(), "aria-hidden": true, children: motionEnabled ? (_jsx(m.div, { className: toastProgressBarClassName(), initial: { scaleX: 1 }, animate: { scaleX: 0 }, transition: {
+                        duration: item.duration / 1000,
+                        ease: easings.linear,
+                    } })) : (_jsx("div", { className: toastProgressBarClassName() })) })] }));
+    if (!motionEnabled) {
+        return _jsx("div", { className: "w-full", children: card });
+    }
+    return (_jsx(m.div, { layout: true, className: "w-full", initial: { opacity: 0, y: 16, scale: 0.96, filter: "blur(6px)" }, animate: { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }, exit: { opacity: 0, y: 10, scale: 0.98, filter: "blur(4px)" }, transition: { ...springs.enter, layout: springs.snappy }, children: card }));
+}
+export const ToastItem = memo(ToastItemInner);

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import { type ToastTone } from "./toast.styles";
+export type { ToastTone };
+type ToastInput = {
+    title: string;
+    description?: string;
+    tone?: ToastTone;
+    duration?: number;
+};
+type ToastContextValue = {
+    toast: (input: ToastInput) => void;
+};
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useToast(): ToastContextValue;

package/dist/components/toast/toast.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { AnimatePresence } from "motion/react";
+import { ToastItem } from "./toast-item";
+import { toastViewportClassName } from "./toast.styles";
+const DEFAULT_DURATION = 4200;
+const ToastContext = createContext(null);
+export function ToastProvider({ children }) {
+    const [items, setItems] = useState([]);
+    const timers = useRef(new Map());
+    const dismiss = useCallback((id) => {
+        const timer = timers.current.get(id);
+        if (timer) {
+            window.clearTimeout(timer);
+            timers.current.delete(id);
+        }
+        setItems((current) => current.filter((item) => item.id !== id));
+    }, []);
+    const toast = useCallback((input) => {
+        const id = crypto.randomUUID();
+        const duration = input.duration ?? DEFAULT_DURATION;
+        const next = {
+            id,
+            title: input.title,
+            tone: input.tone ?? "default",
+            duration,
+            ...(input.description ? { description: input.description } : {}),
+        };
+        setItems((current) => [...current, next]);
+        const timer = window.setTimeout(() => dismiss(id), duration);
+        timers.current.set(id, timer);
+    }, [dismiss]);
+    useEffect(() => {
+        const active = timers.current;
+        return () => {
+            for (const timer of active.values())
+                window.clearTimeout(timer);
+            active.clear();
+        };
+    }, []);
+    const value = useMemo(() => ({ toast }), [toast]);
+    return (_jsxs(ToastContext.Provider, { value: value, children: [children, _jsx("div", { className: toastViewportClassName(), children: _jsx(AnimatePresence, { initial: false, children: items.map((item) => (_jsx(ToastItem, { item: item, onDismiss: dismiss }, item.id))) }) })] }));
+}
+export function useToast() {
+    const value = useContext(ToastContext);
+    if (!value)
+        throw new Error("useToast must be used within ToastProvider");
+    return value;
+}

package/dist/components/toast/toast.styles.d.ts

@@ -0,0 +1,13 @@
+export type ToastTone = "default" | "success" | "danger" | "warning" | "info";
+export declare function toastViewportClassName(): string;
+export declare function toastItemClassName(tone?: ToastTone): string;
+export declare function toastBodyClassName(): string;
+export declare function toastIconWellClassName(): string;
+export declare function toastIconClassName(): string;
+export declare function toastMetaClassName(): string;
+export declare function toastTitleClassName(): string;
+export declare function toastDescriptionClassName(): string;
+export declare function toastDismissClassName(): string;
+export declare function toastProgressTrackClassName(): string;
+export declare function toastProgressBarClassName(): string;
+export declare const toastToneLabel: Record<ToastTone, string>;

package/dist/components/toast/toast.styles.js

@@ -0,0 +1,50 @@
+import { cn } from "../../utils/cn";
+const toneVars = {
+    default: "[--toast-tone:var(--kp-foreground)] [--toast-tone-soft:color-mix(in_oklch,var(--kp-foreground)_12%,transparent)]",
+    success: "[--toast-tone:var(--kp-success)] [--toast-tone-soft:var(--kp-success-subtle)]",
+    danger: "[--toast-tone:var(--kp-danger)] [--toast-tone-soft:var(--kp-danger-subtle)]",
+    warning: "[--toast-tone:var(--kp-warning)] [--toast-tone-soft:var(--kp-warning-subtle)]",
+    info: "[--toast-tone:var(--kp-info)] [--toast-tone-soft:var(--kp-info-subtle)]",
+};
+export function toastViewportClassName() {
+    return cn("pointer-events-none fixed inset-x-0 bottom-4 z-50 flex flex-col-reverse items-stretch gap-2.5 px-4", "sm:inset-x-auto sm:end-4 sm:bottom-5 sm:w-[min(100%-2rem,22.5rem)]");
+}
+export function toastItemClassName(tone = "default") {
+    return cn("pointer-events-auto relative w-full overflow-hidden", "rounded-[var(--kp-radius-panel)] border", "border-[color-mix(in_oklch,var(--toast-tone)_28%,var(--kp-border))]", 
+    // Opaque fallback; glass material upgrades fill/blur via data-kp-control="toast".
+    "bg-[color-mix(in_oklch,var(--kp-surface-raised)_88%,var(--toast-tone)_12%)]", "shadow-[inset_0_1px_0_oklch(1_0_0/14%),inset_0_0_0_1px_oklch(1_0_0/5%),var(--kp-shadow-surface)]", toneVars[tone]);
+}
+export function toastBodyClassName() {
+    return "relative flex gap-3 px-3.5 py-3.5 pe-2";
+}
+export function toastIconWellClassName() {
+    return cn("relative mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-full", "bg-[var(--toast-tone-soft)] text-[var(--toast-tone)]", "shadow-[inset_0_1px_0_oklch(1_0_0/22%),inset_0_0_0_1px_color-mix(in_oklch,var(--toast-tone)_18%,transparent)]");
+}
+export function toastIconClassName() {
+    return "size-4";
+}
+export function toastMetaClassName() {
+    return "font-mono text-[10px] uppercase tracking-[0.14em] text-[color-mix(in_oklch,var(--toast-tone)_82%,var(--kp-muted-foreground))]";
+}
+export function toastTitleClassName() {
+    return "mt-0.5 text-sm font-medium tracking-tight text-foreground text-pretty";
+}
+export function toastDescriptionClassName() {
+    return "mt-1 text-xs leading-relaxed text-muted-foreground text-pretty";
+}
+export function toastDismissClassName() {
+    return cn("inline-flex size-10 shrink-0 items-center justify-center self-start", "rounded-[var(--kp-radius-md)] text-muted-foreground", "transition-[background-color,color,transform]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "hover:bg-muted/55 hover:text-foreground active:scale-[0.96]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/45");
+}
+export function toastProgressTrackClassName() {
+    return "absolute inset-x-0 bottom-0 h-0.5 bg-[color-mix(in_oklch,var(--toast-tone)_12%,transparent)]";
+}
+export function toastProgressBarClassName() {
+    return "h-full origin-left bg-[var(--toast-tone)]";
+}
+export const toastToneLabel = {
+    default: "Notice",
+    success: "Success",
+    danger: "Error",
+    warning: "Warning",
+    info: "Info",
+};

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip, TooltipTrigger } from "./tooltip";
+export type { TooltipProps, TooltipTriggerProps } from "./tooltip.types";

package/dist/components/tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip, TooltipTrigger } from "./tooltip";

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,3 @@
+import type { TooltipProps, TooltipTriggerProps } from "./tooltip.types";
+export declare function TooltipTrigger({ children, closeDelay, delay, ...props }: TooltipTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ children, className, offset, placement, }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger, } from "react-aria-components";
+import { tooltipClassName } from "./tooltip.styles";
+export function TooltipTrigger({ children, closeDelay = 0, delay = 400, ...props }) {
+    return (_jsx(AriaTooltipTrigger, { delay: delay, closeDelay: closeDelay, ...props, children: children }));
+}
+export function Tooltip({ children, className, offset = 8, placement = "top", }) {
+    return (_jsx(AriaTooltip, { offset: offset, placement: placement, className: tooltipClassName(className), "data-kp-control": "tooltip", children: children }));
+}

package/dist/components/tooltip/tooltip.styles.d.ts

@@ -0,0 +1 @@
+export declare function tooltipClassName(className?: string | undefined): string;

package/dist/components/tooltip/tooltip.styles.js

@@ -0,0 +1,6 @@
+import { cn } from "../../utils/cn";
+export function tooltipClassName(className) {
+    return cn("z-50 max-w-xs rounded-[var(--kp-radius-sm)] border px-2.5 py-1.5 text-xs font-medium", "border-[color-mix(in_oklch,var(--kp-foreground)_22%,transparent)]", 
+    // Solid inverse chrome — never data-kp-surface (glass !important washes kill contrast).
+    "bg-[var(--kp-foreground)] text-[var(--kp-background)]", "shadow-[var(--kp-shadow-surface)] outline-none", "transition-[opacity,transform] duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "data-[entering]:opacity-100 data-[exiting]:opacity-0", className);
+}

package/dist/components/tooltip/tooltip.types.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export type OverlayPlacement = "bottom" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top" | "top left" | "top right" | "top start" | "top end" | "left" | "left top" | "left bottom" | "start" | "start top" | "start bottom" | "right" | "right top" | "right bottom" | "end" | "end top" | "end bottom";
+export type TooltipProps = {
+    children: ReactNode;
+    className?: string;
+    /** Distance from the trigger in pixels. */
+    offset?: number;
+    placement?: OverlayPlacement;
+};
+export type TooltipTriggerProps = {
+    children: ReactNode;
+    delay?: number;
+    closeDelay?: number;
+    isDisabled?: boolean;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+};

package/dist/components/tooltip/tooltip.types.js

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

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+export { ThemeProvider, themePacks, useTheme, type ThemeMode, type ThemeName, } from "./providers/theme-provider";
+export { MaterialProvider, useMaterial, type MaterialMode, } from "./providers/material-provider";
+export { RadiusProvider, radiusScales, useRadius, type RadiusScale, } from "./providers/radius-provider";
+export { MotionProvider, useMotionMode, } from "./providers/motion-provider";
+export { motionModes, type MotionMode } from "@hewnui/motion";
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from "./components/button";
+export { TextField, type TextFieldProps } from "./components/text-field";
+export { TextArea, type TextAreaProps, type TextAreaSize, type TextAreaVariant, } from "./components/text-area";
+export { NumberField, type NumberFieldProps, type NumberFieldSize, type NumberFieldVariant, } from "./components/number-field";
+export { SearchField, type SearchFieldProps, type SearchFieldSize, type SearchFieldVariant, } from "./components/search-field";
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps, } from "./components/radio-group";
+export { CheckboxGroup, type CheckboxGroupProps, } from "./components/checkbox-group";
+export { Slider, type SliderProps } from "./components/slider";
+export { Form, type FormProps } from "./components/form";
+export { InputGroup, type InputGroupAffixProps, type InputGroupProps, type InputGroupSize, type InputGroupVariant, } from "./components/input-group";
+export { PasswordField, type PasswordFieldProps, type PasswordFieldSize, type PasswordFieldVariant, } from "./components/password-field";
+export { InputOTP, InputOtp, type InputOTPProps, type InputOtpProps, type InputOTPSize, type InputOtpSize, type InputOTPVariant, type InputOtpVariant, } from "./components/input-otp";
+export { FileUpload, type FileUploadProps, } from "./components/file-upload";
+export { Checkbox, type CheckboxProps } from "./components/checkbox";
+export { Switch, type SwitchProps } from "./components/switch";
+export { Dialog, DialogActions, DialogBody, DialogRoot, DialogTrigger, } from "./components/dialog";
+export { CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteLoading, CommandPaletteRecent, CommandPaletteRoot, CommandPaletteTrigger, commandPaletteHotkeyLabel, useCommandPaletteHotkey, type CommandPaletteGroupProps, type CommandPaletteInputProps, type CommandPaletteItemProps, type CommandPaletteListProps, type CommandPaletteProps, type CommandPaletteRecentProps, type CommandPaletteTriggerProps, type UseCommandPaletteHotkeyOptions, } from "./components/command-palette";
+export { Select, SelectItem, SelectRoot } from "./components/select";
+export { Tab, TabList, TabPanel, Tabs, TabsRoot } from "./components/tabs";
+export { Stepper, StepperStep, useStepper, type StepperOrientation, type StepperProps, type StepperStepProps, type StepStatus, type UseStepperOptions, type UseStepperResult, } from "./components/stepper";
+export { Table, TableBody, TableCell, TableColumn, TableEmpty, TableHeader, TableLoading, TableRoot, TableRow, } from "./components/table";
+export { DatePicker } from "./components/date-picker";
+export { DateRangePicker, type CalendarDate, type DateRangePreset, type DateRangePresetId, type DateRangePickerProps, type DateRangeValue, type DateValue, } from "./components/date-range-picker";
+export { ColorPicker, defaultColorPresets, hexToOklchDisplay, type ColorPickerProps, type ColorPickerVariant, } from "./components/color-picker";
+export { Combobox, ComboboxItem } from "./components/combobox";
+export { MultiSelect, MultiSelectItem, TagField, TagFieldItem, type TagFieldChangeHandler, type TagFieldItemProps, type TagFieldProps, type TagFieldSize, type TagFieldVariant, } from "./components/tag-field";
+export { Menu, MenuButton, MenuItem, MenuRoot, MenuSeparator, MenuTrigger, } from "./components/menu";
+export { ToastProvider, useToast, type ToastTone, } from "./components/toast";
+export { Drawer, DrawerTrigger } from "./components/drawer";
+export { Tooltip, TooltipTrigger, type TooltipProps, type TooltipTriggerProps, } from "./components/tooltip";
+export { Popover, PopoverBody, PopoverTitle, PopoverTrigger, type PopoverProps, type PopoverTriggerProps, } from "./components/popover";
+export { Breadcrumb, Breadcrumbs, type BreadcrumbItemProps, type BreadcrumbsProps, } from "./components/breadcrumbs";
+export { Pagination, getPaginationItems, type PaginationItem, type PaginationProps, type PaginationSize, } from "./components/pagination";
+export { Link, type LinkProps, type LinkVariant, } from "./components/link";
+export { Progress } from "./components/progress";
+export { Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, } from "./components/badge";
+export { Skeleton } from "./components/skeleton";
+export { Spinner } from "./components/spinner";
+export { DataTable } from "./components/data-table";
+export { Sparkline, type SparklineProps } from "./components/sparkline";
+export { LineChart, type LineChartProps } from "./components/line-chart";
+export { AreaChart, type AreaChartProps } from "./components/area-chart";
+export { BarChart, type BarChartProps } from "./components/bar-chart";
+export { DonutChart, type DonutChartProps } from "./components/donut-chart";
+export { Card, CardBody, CardFooter, CardHeader, type CardProps, } from "./components/card";
+export { Empty } from "./components/empty";
+export type { ChartDatum, ChartSeries, ChartStatus, DonutSlice, } from "./chart/types";
+export type { SortDescriptor } from "react-aria-components";
+export type { ColumnDef } from "@tanstack/react-table";

package/dist/index.js

@@ -0,0 +1,51 @@
+export { ThemeProvider, themePacks, useTheme, } from "./providers/theme-provider";
+export { MaterialProvider, useMaterial, } from "./providers/material-provider";
+export { RadiusProvider, radiusScales, useRadius, } from "./providers/radius-provider";
+export { MotionProvider, useMotionMode, } from "./providers/motion-provider";
+export { motionModes } from "@hewnui/motion";
+export { Button, } from "./components/button";
+export { TextField } from "./components/text-field";
+export { TextArea, } from "./components/text-area";
+export { NumberField, } from "./components/number-field";
+export { SearchField, } from "./components/search-field";
+export { Radio, RadioGroup, } from "./components/radio-group";
+export { CheckboxGroup, } from "./components/checkbox-group";
+export { Slider } from "./components/slider";
+export { Form } from "./components/form";
+export { InputGroup, } from "./components/input-group";
+export { PasswordField, } from "./components/password-field";
+export { InputOTP, InputOtp, } from "./components/input-otp";
+export { FileUpload, } from "./components/file-upload";
+export { Checkbox } from "./components/checkbox";
+export { Switch } from "./components/switch";
+export { Dialog, DialogActions, DialogBody, DialogRoot, DialogTrigger, } from "./components/dialog";
+export { CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteLoading, CommandPaletteRecent, CommandPaletteRoot, CommandPaletteTrigger, commandPaletteHotkeyLabel, useCommandPaletteHotkey, } from "./components/command-palette";
+export { Select, SelectItem, SelectRoot } from "./components/select";
+export { Tab, TabList, TabPanel, Tabs, TabsRoot } from "./components/tabs";
+export { Stepper, StepperStep, useStepper, } from "./components/stepper";
+export { Table, TableBody, TableCell, TableColumn, TableEmpty, TableHeader, TableLoading, TableRoot, TableRow, } from "./components/table";
+export { DatePicker } from "./components/date-picker";
+export { DateRangePicker, } from "./components/date-range-picker";
+export { ColorPicker, defaultColorPresets, hexToOklchDisplay, } from "./components/color-picker";
+export { Combobox, ComboboxItem } from "./components/combobox";
+export { MultiSelect, MultiSelectItem, TagField, TagFieldItem, } from "./components/tag-field";
+export { Menu, MenuButton, MenuItem, MenuRoot, MenuSeparator, MenuTrigger, } from "./components/menu";
+export { ToastProvider, useToast, } from "./components/toast";
+export { Drawer, DrawerTrigger } from "./components/drawer";
+export { Tooltip, TooltipTrigger, } from "./components/tooltip";
+export { Popover, PopoverBody, PopoverTitle, PopoverTrigger, } from "./components/popover";
+export { Breadcrumb, Breadcrumbs, } from "./components/breadcrumbs";
+export { Pagination, getPaginationItems, } from "./components/pagination";
+export { Link, } from "./components/link";
+export { Progress } from "./components/progress";
+export { Badge, } from "./components/badge";
+export { Skeleton } from "./components/skeleton";
+export { Spinner } from "./components/spinner";
+export { DataTable } from "./components/data-table";
+export { Sparkline } from "./components/sparkline";
+export { LineChart } from "./components/line-chart";
+export { AreaChart } from "./components/area-chart";
+export { BarChart } from "./components/bar-chart";
+export { DonutChart } from "./components/donut-chart";
+export { Card, CardBody, CardFooter, CardHeader, } from "./components/card";
+export { Empty } from "./components/empty";

package/dist/providers/material-provider.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+export type MaterialMode = "solid" | "glass";
+type MaterialContextValue = {
+    material: MaterialMode;
+    setMaterial: (material: MaterialMode) => void;
+};
+export declare function MaterialProvider({ children, defaultMaterial, }: {
+    children: ReactNode;
+    defaultMaterial?: MaterialMode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useMaterial(): MaterialContextValue;
+export {};

package/dist/providers/material-provider.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+const MaterialContext = createContext(null);
+const STORAGE_KEY = "kp-material";
+export function MaterialProvider({ children, defaultMaterial = "glass", }) {
+    const [material, setMaterialState] = useState(defaultMaterial);
+    useEffect(() => {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored === "solid" || stored === "glass") {
+            setMaterialState(stored);
+        }
+    }, []);
+    useEffect(() => {
+        document.documentElement.dataset.material = material;
+        localStorage.setItem(STORAGE_KEY, material);
+    }, [material]);
+    const setMaterial = useCallback((next) => {
+        setMaterialState(next);
+    }, []);
+    const value = useMemo(() => ({ material, setMaterial }), [material, setMaterial]);
+    return (_jsx(MaterialContext.Provider, { value: value, children: children }));
+}
+export function useMaterial() {
+    const value = useContext(MaterialContext);
+    if (!value) {
+        throw new Error("useMaterial must be used within MaterialProvider");
+    }
+    return value;
+}

package/dist/providers/motion-provider.d.ts

@@ -0,0 +1,20 @@
+import { type MotionMode } from "@hewnui/motion";
+import { type ReactNode } from "react";
+export type { MotionMode };
+type MotionContextValue = {
+    /** User preference (`full` | `reduced` | `off`). */
+    motion: MotionMode;
+    /** Preference after OS reduced-motion clamp. */
+    effectiveMode: MotionMode;
+    /** True only when effective mode is `full`. */
+    motionEnabled: boolean;
+    /** OS `prefers-reduced-motion: reduce`. Always authoritative. */
+    reducedMotion: boolean;
+    setMotion: (motion: MotionMode) => void;
+};
+export declare function MotionProvider({ children, defaultMotion, }: {
+    children: ReactNode;
+    /** Prefer `full` | `reduced` | `off`. Legacy `"on"` maps to `"full"`. */
+    defaultMotion?: MotionMode | "on";
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useMotionMode(): MotionContextValue;