@hewnui/ui 0.0.0-stage → 0.1.1

package/dist/components/date-range-picker/date-range-picker.types.d.ts

@@ -0,0 +1,28 @@
+import type { CalendarDate, DateValue } from "@internationalized/date";
+import type { ReactNode } from "react";
+import type { DateRangePickerProps as AriaDateRangePickerProps } from "react-aria-components";
+/** Inclusive start/end date pair used by React Aria range pickers. */
+export type DateRangeValue<T = CalendarDate> = {
+    start: T;
+    end: T;
+};
+export type DateRangePresetId = "today" | "last-7-days" | "last-30-days" | "this-month";
+export type DateRangePreset = {
+    id: string;
+    label: string;
+    getRange: () => DateRangeValue<CalendarDate>;
+};
+export type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue>, "className" | "children"> & {
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: ReactNode;
+    className?: string;
+    /** Show quick-select presets in the popover. Defaults to true. */
+    showPresets?: boolean;
+    /**
+     * Built-in preset ids to show, or custom presets.
+     * Defaults to Today, Last 7 days, Last 30 days, This month.
+     */
+    presets?: DateRangePresetId[] | DateRangePreset[];
+};
+export type { DateValue, CalendarDate };

package/dist/components/date-range-picker/date-range-picker.types.js

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

package/dist/components/date-range-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { DateRangePicker } from "./date-range-picker.js";
+export type { CalendarDate, DateRangePreset, DateRangePresetId, DateRangePickerProps, DateRangeValue, DateValue, } from "./date-range-picker.types.js";

package/dist/components/date-range-picker/index.js

@@ -0,0 +1 @@
+export { DateRangePicker } from "./date-range-picker.js";

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export declare function DialogTrigger(props: {
+    children: ReactNode;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Dialog({ children, className, title, }: {
+    children: ReactNode;
+    className?: string;
+    title: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DialogBody({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DialogActions({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/dialog/dialog.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Heading, Modal, ModalOverlay, } from "react-aria-components";
+import { dialogActionsClass, dialogBodyClass, dialogModalClass, dialogOverlayClass, dialogPanelClass, dialogTitleClass, } from "./dialog.styles.js";
+export function DialogTrigger(props) {
+    return _jsx(AriaDialogTrigger, { ...props });
+}
+export function Dialog({ children, className, title, }) {
+    return (_jsx(ModalOverlay, { className: dialogOverlayClass, isDismissable: true, children: _jsx(Modal, { className: dialogModalClass, children: _jsxs(AriaDialog, { className: dialogPanelClass(className), "data-kp-surface": true, children: [_jsx(Heading, { slot: "title", className: dialogTitleClass, children: title }), children] }) }) }));
+}
+export function DialogBody({ children }) {
+    return _jsx("div", { className: dialogBodyClass, children: children });
+}
+export function DialogActions({ children }) {
+    return _jsx("div", { className: dialogActionsClass, children: children });
+}

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

@@ -0,0 +1,6 @@
+export declare const dialogOverlayClass = "fixed inset-0 z-50 bg-[color-mix(in_oklch,var(--kp-foreground)_28%,transparent)]";
+export declare const dialogModalClass = "fixed inset-0 z-50 flex items-center justify-center p-4";
+export declare function dialogPanelClass(className?: string | undefined): string;
+export declare const dialogTitleClass = "text-lg font-semibold tracking-tight text-balance";
+export declare const dialogBodyClass = "mt-2 text-sm text-muted-foreground text-pretty";
+export declare const dialogActionsClass = "mt-6 flex flex-wrap justify-end gap-2";

package/dist/components/dialog/dialog.styles.js

@@ -0,0 +1,9 @@
+import { cn } from "../../utils/cn.js";
+export const dialogOverlayClass = "fixed inset-0 z-50 bg-[color-mix(in_oklch,var(--kp-foreground)_28%,transparent)]";
+export const dialogModalClass = "fixed inset-0 z-50 flex items-center justify-center p-4";
+export function dialogPanelClass(className) {
+    return cn("w-full max-w-md rounded-[var(--kp-radius-panel)] border bg-surface p-5", "shadow-[var(--kp-shadow-surface)] outline-none", className);
+}
+export const dialogTitleClass = "text-lg font-semibold tracking-tight text-balance";
+export const dialogBodyClass = "mt-2 text-sm text-muted-foreground text-pretty";
+export const dialogActionsClass = "mt-6 flex flex-wrap justify-end gap-2";

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

@@ -0,0 +1,7 @@
+import { Dialog, DialogActions, DialogBody, DialogTrigger } from "./dialog.js";
+export declare const DialogRoot: typeof DialogTrigger & {
+    Content: typeof Dialog;
+    Body: typeof DialogBody;
+    Actions: typeof DialogActions;
+};
+export { Dialog, DialogActions, DialogBody, DialogTrigger, };

package/dist/components/dialog/index.js

@@ -0,0 +1,7 @@
+import { Dialog, DialogActions, DialogBody, DialogTrigger, } from "./dialog.js";
+export const DialogRoot = Object.assign(DialogTrigger, {
+    Content: Dialog,
+    Body: DialogBody,
+    Actions: DialogActions,
+});
+export { Dialog, DialogActions, DialogBody, DialogTrigger, };

package/dist/components/donut-chart/donut-chart.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import { ChartTooltip } from "../../chart/interaction.js";
+import type { ChartStatus, DonutSlice } from "../../chart/types.js";
+export type DonutChartProps = {
+    slices: DonutSlice[];
+    summary: string;
+    className?: string;
+    width?: number;
+    height?: number;
+    status?: ChartStatus;
+    children?: ReactNode;
+};
+declare function DonutChartRoot({ slices, summary, className, width, height, status, children, }: DonutChartProps): import("react/jsx-runtime").JSX.Element;
+export declare const DonutChart: typeof DonutChartRoot & {
+    Tooltip: typeof ChartTooltip;
+};
+export {};

package/dist/components/donut-chart/donut-chart.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { pie as d3Pie, arc as d3Arc } from "d3-shape";
+import { seriesColor } from "../../chart/colors.js";
+import { ChartFrame } from "../../chart/frame.js";
+import { ChartInteractionProvider, ChartTooltip, useChartInteraction, } from "../../chart/interaction.js";
+import { useMotionMode } from "../../providers/motion-provider.js";
+function resolveDonutStatus(slices, status) {
+    if (status)
+        return status;
+    const total = slices.reduce((sum, slice) => sum + slice.value, 0);
+    return total <= 0 ? "empty" : "ready";
+}
+function DonutChartRoot({ slices, summary, className, width = 240, height = 240, status, children, }) {
+    const resolved = resolveDonutStatus(slices, status);
+    if (resolved !== "ready") {
+        return (_jsx(ChartFrame, { className: className, width: width, height: height, summary: summary, status: resolved }));
+    }
+    return (_jsx(ChartInteractionProvider, { series: slices.map((slice) => ({
+            id: slice.id,
+            label: slice.label,
+            data: [{ x: slice.label, y: slice.value }],
+            ...(slice.color !== undefined ? { color: slice.color } : {}),
+        })), children: _jsxs("div", { className: "relative", style: { maxWidth: width }, children: [_jsx(DonutChartSvg, { slices: slices, summary: summary, className: className, width: width, height: height }), children] }) }));
+}
+function DonutChartSvg({ slices, summary, className, width, height, }) {
+    const { motionEnabled } = useMotionMode();
+    const { setHover } = useChartInteraction();
+    const cx = width / 2;
+    const cy = height / 2;
+    const radius = Math.min(cx, cy) - 8;
+    const layout = d3Pie()
+        .value((slice) => slice.value)
+        .sort(null)(slices);
+    const arcGen = d3Arc()
+        .innerRadius(radius * 0.58)
+        .outerRadius(radius)
+        .cornerRadius(motionEnabled ? 2 : 0);
+    return (_jsx(ChartFrame, { className: className, width: width, height: height, summary: summary, interactive: true, children: _jsx("g", { transform: `translate(${cx} ${cy})`, children: layout.map((item, index) => {
+                const color = seriesColor(index, item.data.color);
+                const path = arcGen(item);
+                if (!path)
+                    return null;
+                const [px, py] = arcGen.centroid(item);
+                const point = { x: "Value", y: item.data.value };
+                return (_jsx("path", { d: path, fill: color, tabIndex: 0, role: "button", "aria-label": `${item.data.label}: ${item.data.value}`, className: "cursor-pointer outline-none transition-[opacity,filter] duration-[var(--kp-motion-duration)] focus-visible:brightness-110 hover:brightness-110", onFocus: () => setHover({
+                        seriesId: item.data.id,
+                        label: item.data.label,
+                        point,
+                        color,
+                        px: cx + px,
+                        py: cy + py,
+                    }), onBlur: () => setHover(null), onMouseEnter: () => setHover({
+                        seriesId: item.data.id,
+                        label: item.data.label,
+                        point,
+                        color,
+                        px: cx + px,
+                        py: cy + py,
+                    }), onMouseLeave: () => setHover(null) }, item.data.id));
+            }) }) }));
+}
+export const DonutChart = Object.assign(DonutChartRoot, {
+    Tooltip: ChartTooltip,
+});

package/dist/components/donut-chart/index.d.ts

@@ -0,0 +1 @@
+export { DonutChart, type DonutChartProps } from "./donut-chart.js";

package/dist/components/donut-chart/index.js

@@ -0,0 +1 @@
+export { DonutChart } from "./donut-chart.js";

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export declare function DrawerTrigger(props: {
+    children: ReactNode;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Drawer({ children, className, side, title, }: {
+    children: ReactNode;
+    className?: string | undefined;
+    side?: "left" | "right";
+    title: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer/drawer.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Heading, Modal, ModalOverlay, } from "react-aria-components";
+import { Button } from "../button/index.js";
+import { cn } from "../../utils/cn.js";
+export function DrawerTrigger(props) {
+    return _jsx(AriaDialogTrigger, { ...props });
+}
+function CloseGlyph() {
+    return (_jsx("svg", { viewBox: "0 0 16 16", className: "size-4", "aria-hidden": true, children: _jsx("path", { d: "M4 4l8 8M12 4l-8 8", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) }));
+}
+export function Drawer({ children, className, side = "right", title, }) {
+    return (_jsx(ModalOverlay, { isDismissable: true, className: "fixed inset-0 z-50 bg-[color-mix(in_oklch,var(--kp-foreground)_28%,transparent)]", children: _jsx(Modal, { className: cn("fixed inset-y-0 z-50 flex w-full max-w-md outline-none", side === "right" ? "right-0" : "left-0"), children: _jsxs(AriaDialog, { "data-kp-surface": true, className: cn("flex h-full w-full flex-col border p-5 shadow-[var(--kp-shadow-surface)] outline-none", side === "right" ? "border-l" : "border-r", className), children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsx(Heading, { slot: "title", className: "text-lg font-semibold tracking-tight text-balance", children: title }), _jsx(Button, { slot: "close", variant: "ghost", size: "sm", "aria-label": "Close drawer", className: "min-h-10 min-w-10 shrink-0 px-0", children: _jsx(CloseGlyph, {}) })] }), _jsx("div", { className: "mt-4 flex-1 overflow-auto text-sm text-muted-foreground text-pretty", children: children })] }) }) }));
+}

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

@@ -0,0 +1 @@
+export { Drawer, DrawerTrigger } from "./drawer.js";

package/dist/components/drawer/index.js

@@ -0,0 +1 @@
+export { Drawer, DrawerTrigger } from "./drawer.js";

package/dist/components/empty/empty.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export declare function Empty({ title, children, action, className, }: {
+    title: ReactNode;
+    children?: ReactNode;
+    action?: ReactNode;
+    className?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/empty/empty.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+export function Empty({ title, children, action, className, }) {
+    return (_jsxs("div", { role: "status", className: cn("flex flex-col items-start gap-2 rounded-[var(--kp-radius-lg)] border border-dashed border-border px-4 py-6", "bg-[color-mix(in_oklch,var(--kp-muted)_35%,transparent)]", className), children: [_jsx("p", { className: "text-sm font-medium text-balance text-foreground", children: title }), children ? (_jsx("div", { className: "max-w-sm text-sm leading-relaxed text-muted-foreground text-pretty", children: children })) : null, action ? _jsx("div", { className: "pt-1", children: action }) : null] }));
+}

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

@@ -0,0 +1 @@
+export { Empty } from "./empty.js";

package/dist/components/empty/index.js

@@ -0,0 +1 @@
+export { Empty } from "./empty.js";

package/dist/components/file-upload/file-upload.d.ts

@@ -0,0 +1,2 @@
+import type { FileUploadProps } from "./file-upload.types.js";
+export declare function FileUpload({ acceptedFileTypes, allowsMultiple, buttonLabel, className, defaultFiles, description, emptyLabel, errorMessage, files, isDisabled, isInvalid, label, onFilesChange, ...props }: FileUploadProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/file-upload/file-upload.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, DropZone, FileTrigger, Text, } from "react-aria-components";
+import { Button as KpButton } from "../button/index.js";
+import { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, } from "../../styles/field.js";
+import { dropZoneClassName, dropZoneHintClass, dropZoneIconClass, fileListClass, fileNameClass, fileRowClass, fileUploadRootClass, removeFileClass, } from "./file-upload.styles.js";
+function formatSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function UploadGlyph() {
+    return (_jsx("span", { className: dropZoneIconClass, "aria-hidden": true, children: _jsx("svg", { viewBox: "0 0 16 16", className: "size-4", children: _jsx("path", { d: "M8 11.5V3.8M8 3.8 5.2 6.5M8 3.8 10.8 6.5M3 12.5h10", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+}
+export function FileUpload({ acceptedFileTypes, allowsMultiple = true, buttonLabel = "Browse files", className, defaultFiles = [], description, emptyLabel = "Drop files here, or browse from disk.", errorMessage, files, isDisabled, isInvalid, label, onFilesChange, ...props }) {
+    const controlled = files !== undefined;
+    const [uncontrolled, setUncontrolled] = useState(defaultFiles);
+    const current = controlled ? files : uncontrolled;
+    function commit(next) {
+        if (!controlled)
+            setUncontrolled(next);
+        onFilesChange?.(next);
+    }
+    function merge(incoming) {
+        if (!incoming)
+            return;
+        const list = Array.from(incoming);
+        commit(allowsMultiple ? [...current, ...list] : list.slice(0, 1));
+    }
+    function removeAt(index) {
+        commit(current.filter((_, i) => i !== index));
+    }
+    return (_jsxs("div", { className: fileUploadRootClass(className), children: [label ? _jsx("div", { className: fieldLabelClass, children: label }) : null, _jsx(DropZone, { ...props, "data-kp-surface": true, "data-kp-upload": "zone", ...(isDisabled !== undefined ? { isDisabled } : {}), getDropOperation: (types) => types.has("Files") ? "copy" : "cancel", onDrop: async (event) => {
+                    const items = await Promise.all(event.items
+                        .filter((item) => item.kind === "file")
+                        .map((item) => item.getFile()));
+                    merge(items);
+                }, className: ({ isDropTarget }) => dropZoneClassName({ isDropTarget, isInvalid }), children: ({ isDropTarget }) => (_jsxs(_Fragment, { children: [_jsx(UploadGlyph, {}), _jsx(Text, { slot: "label", className: dropZoneHintClass, children: isDropTarget ? "Release to add files" : emptyLabel }), _jsx(FileTrigger, { ...(acceptedFileTypes !== undefined
+                                ? { acceptedFileTypes }
+                                : {}), allowsMultiple: allowsMultiple, onSelect: (selected) => merge(selected), children: _jsx(KpButton, { variant: "secondary", size: "sm", ...(isDisabled !== undefined ? { isDisabled } : {}), children: buttonLabel }) })] })) }), description ? (_jsx("p", { className: fieldDescriptionClass, children: description })) : null, isInvalid && errorMessage ? (_jsx("p", { className: fieldErrorClass, role: "alert", children: errorMessage })) : null, current.length > 0 ? (_jsx("ul", { className: fileListClass, children: current.map((file, index) => (_jsxs("li", { "data-kp-surface": true, "data-kp-upload": "row", className: fileRowClass, children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: fileNameClass, children: file.name }), _jsx("div", { className: "text-xs tabular-nums text-muted-foreground", children: formatSize(file.size) })] }), _jsx(Button, { className: removeFileClass, "aria-label": `Remove ${file.name}`, ...(isDisabled !== undefined ? { isDisabled } : {}), onPress: () => removeAt(index), children: _jsx("svg", { viewBox: "0 0 12 12", className: "size-3.5", "aria-hidden": true, children: _jsx("path", { d: "M2.5 2.5 9.5 9.5M9.5 2.5 2.5 9.5", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) }) })] }, `${file.name}-${file.size}-${index}`))) })) : null] }));
+}

package/dist/components/file-upload/file-upload.styles.d.ts

@@ -0,0 +1,12 @@
+export declare function fileUploadRootClass(className?: string | undefined): string;
+export declare function dropZoneClassName({ className, isDropTarget, isInvalid, }?: {
+    className?: string | undefined;
+    isDropTarget?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+}): string;
+export declare const dropZoneHintClass = "max-w-[36ch] text-sm leading-relaxed text-pretty text-muted-foreground";
+export declare const dropZoneIconClass: string;
+export declare const fileListClass = "flex w-full flex-col gap-1.5";
+export declare const fileRowClass: string;
+export declare const fileNameClass = "truncate font-mono text-xs tracking-tight tabular-nums text-foreground";
+export declare const removeFileClass: string;

package/dist/components/file-upload/file-upload.styles.js

@@ -0,0 +1,14 @@
+import { cn } from "../../utils/cn.js";
+export function fileUploadRootClass(className) {
+    return cn("flex w-full max-w-md flex-col gap-2.5 text-sm text-foreground", className);
+}
+export function dropZoneClassName({ className, isDropTarget, isInvalid, } = {}) {
+    return cn("relative flex min-h-40 flex-col items-start justify-center gap-4 overflow-hidden", "rounded-[var(--kp-radius-lg)] border border-dashed p-5", "border-[color-mix(in_oklch,var(--kp-foreground)_20%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-surface)_86%,var(--kp-foreground)_4%)]", "shadow-[var(--kp-shadow-surface),inset_0_1px_0_oklch(1_0_0/38%)]", "outline-none transition-[border-color,background-color,box-shadow,transform]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "data-[focused]:ring-2 data-[focused]:ring-ring/30", "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45", isDropTarget &&
+        cn("scale-[0.985] border-solid border-accent", "bg-[color-mix(in_oklch,var(--kp-accent)_12%,var(--kp-surface))]", "shadow-[inset_0_1px_0_oklch(1_0_0/42%),0_0_0_3px_color-mix(in_oklch,var(--kp-accent)_18%,transparent)]"), isInvalid && "border-danger", className);
+}
+export const dropZoneHintClass = "max-w-[36ch] text-sm leading-relaxed text-pretty text-muted-foreground";
+export const dropZoneIconClass = cn("flex size-10 shrink-0 items-center justify-center rounded-[var(--kp-radius-md)]", "border border-[color-mix(in_oklch,var(--kp-foreground)_14%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-muted)_45%,transparent)]", "text-muted-foreground shadow-[inset_0_1px_0_oklch(1_0_0/30%)]");
+export const fileListClass = "flex w-full flex-col gap-1.5";
+export const fileRowClass = cn("flex min-h-11 items-center justify-between gap-3 rounded-[var(--kp-radius-md)] border px-3", "border-[color-mix(in_oklch,var(--kp-foreground)_14%,transparent)]", "bg-[color-mix(in_oklch,var(--kp-surface)_90%,var(--kp-foreground)_3%)]", "shadow-[var(--kp-shadow-surface),inset_0_1px_0_oklch(1_0_0/32%)]", "transition-[background-color,border-color,transform]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]");
+export const fileNameClass = "truncate font-mono text-xs tracking-tight tabular-nums text-foreground";
+export const removeFileClass = cn("inline-flex size-10 shrink-0 items-center justify-center rounded-[calc(var(--kp-radius-sm)-0.05rem)]", "text-muted-foreground outline-none", "transition-[background-color,color,transform]", "duration-[var(--kp-motion-duration)] ease-[var(--kp-motion-ease-standard)]", "hover:bg-muted/70 hover:text-foreground", "pressed:scale-[0.96] data-[pressed]:scale-[0.96]", "focus-visible:ring-2 focus-visible:ring-ring/40");

package/dist/components/file-upload/file-upload.types.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type { DropZoneProps } from "react-aria-components";
+export type FileUploadProps = Omit<DropZoneProps, "className" | "children" | "onDrop"> & {
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: ReactNode;
+    className?: string;
+    buttonLabel?: string;
+    emptyLabel?: string;
+    acceptedFileTypes?: ReadonlyArray<string>;
+    allowsMultiple?: boolean;
+    files?: File[];
+    defaultFiles?: File[];
+    onFilesChange?: (files: File[]) => void;
+    isInvalid?: boolean;
+};

package/dist/components/file-upload/file-upload.types.js

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

package/dist/components/file-upload/index.d.ts

@@ -0,0 +1,2 @@
+export { FileUpload } from "./file-upload.js";
+export type { FileUploadProps } from "./file-upload.types.js";

package/dist/components/file-upload/index.js

@@ -0,0 +1 @@
+export { FileUpload } from "./file-upload.js";

package/dist/components/form/form.d.ts

@@ -0,0 +1,2 @@
+import type { FormProps } from "./form.types.js";
+export declare function Form({ children, className, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/form.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Form as AriaForm } from "react-aria-components";
+import { formClassName } from "./form.styles.js";
+export function Form({ children, className, ...props }) {
+    return (_jsx(AriaForm, { ...props, className: formClassName(className), children: children }));
+}

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

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

package/dist/components/form/form.styles.js

@@ -0,0 +1,4 @@
+import { cn } from "../../utils/cn.js";
+export function formClassName(className) {
+    return cn("flex w-full max-w-sm flex-col gap-4", className);
+}

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

@@ -0,0 +1,6 @@
+import type { FormProps as AriaFormProps } from "react-aria-components";
+import type { ReactNode } from "react";
+export type FormProps = Omit<AriaFormProps, "className" | "children"> & {
+    children: ReactNode;
+    className?: string;
+};

package/dist/components/form/form.types.js

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

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

@@ -0,0 +1,2 @@
+export { Form } from "./form.js";
+export type { FormProps } from "./form.types.js";

package/dist/components/form/index.js

@@ -0,0 +1 @@
+export { Form } from "./form.js";

package/dist/components/input-group/index.d.ts

@@ -0,0 +1,2 @@
+export { InputGroup } from "./input-group.js";
+export type { InputGroupAffixProps, InputGroupProps, InputGroupSize, InputGroupVariant, } from "./input-group.types.js";

package/dist/components/input-group/index.js

@@ -0,0 +1 @@
+export { InputGroup } from "./input-group.js";

package/dist/components/input-group/input-group.d.ts

@@ -0,0 +1,14 @@
+import type { InputGroupAffixProps, InputGroupProps } from "./input-group.types.js";
+declare function Prefix({ children, className }: InputGroupAffixProps): import("react/jsx-runtime").JSX.Element;
+declare function Suffix({ children, className }: InputGroupAffixProps): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupInput({ className, ...props }: {
+    className?: string;
+    placeholder?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupRoot({ children, className, description, errorMessage, inputClassName: inputClass, label, placeholder, prefix, size, suffix, variant, ...props }: InputGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const InputGroup: typeof InputGroupRoot & {
+    Prefix: typeof Prefix;
+    Suffix: typeof Suffix;
+    Input: typeof InputGroupInput;
+};
+export {};

package/dist/components/input-group/input-group.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldError, Group, Input, Label, Text, TextField as AriaTextField, } from "react-aria-components";
+import { cn } from "../../utils/cn.js";
+import { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, fieldRootClass, fieldSurfaceProps, } from "../../styles/field.js";
+import { inputGroupAffixClass, inputGroupClassName, inputGroupInputClass, } from "./input-group.styles.js";
+function Prefix({ children, className }) {
+    return _jsx("span", { className: inputGroupAffixClass(className), children: children });
+}
+function Suffix({ children, className }) {
+    return _jsx("span", { className: inputGroupAffixClass(className), children: children });
+}
+function InputGroupInput({ className, ...props }) {
+    return _jsx(Input, { className: cn(inputGroupInputClass, className), ...props });
+}
+function InputGroupRoot({ children, className, description, errorMessage, inputClassName: inputClass, label, placeholder, prefix, size = "md", suffix, variant = "outline", ...props }) {
+    const composed = Boolean(children);
+    return (_jsxs(AriaTextField, { ...props, className: cn(fieldRootClass, className), children: [label ? _jsx(Label, { className: fieldLabelClass, children: label }) : null, _jsx(Group, { ...fieldSurfaceProps(variant), className: inputGroupClassName({ size, variant }), children: composed ? (children) : (_jsxs(_Fragment, { children: [prefix ? _jsx(Prefix, { children: prefix }) : null, _jsx(Input, { className: cn(inputGroupInputClass, inputClass), ...(placeholder !== undefined ? { placeholder } : {}) }), suffix ? _jsx(Suffix, { children: suffix }) : null] })) }), description ? (_jsx(Text, { slot: "description", className: fieldDescriptionClass, children: description })) : null, _jsx(FieldError, { className: fieldErrorClass, children: errorMessage })] }));
+}
+export const InputGroup = Object.assign(InputGroupRoot, {
+    Prefix,
+    Suffix,
+    Input: InputGroupInput,
+});

package/dist/components/input-group/input-group.styles.d.ts

@@ -0,0 +1,8 @@
+import { type FieldSize, type FieldVariant } from "../../styles/field.js";
+export declare function inputGroupClassName({ className, size, variant, }?: {
+    className?: string | undefined;
+    size?: FieldSize | undefined;
+    variant?: FieldVariant | undefined;
+}): string;
+export declare const inputGroupInputClass = "min-w-0 flex-1 bg-transparent p-0 text-foreground outline-none placeholder:text-muted-foreground";
+export declare function inputGroupAffixClass(className?: string | undefined): string;

package/dist/components/input-group/input-group.styles.js

@@ -0,0 +1,9 @@
+import { cn } from "../../utils/cn.js";
+import { inputSurfaceClassName, } from "../../styles/field.js";
+export function inputGroupClassName({ className, size = "md", variant = "outline", } = {}) {
+    return cn(inputSurfaceClassName({ size, variant }), "flex items-center gap-2", className);
+}
+export const inputGroupInputClass = "min-w-0 flex-1 bg-transparent p-0 text-foreground outline-none placeholder:text-muted-foreground";
+export function inputGroupAffixClass(className) {
+    return cn("shrink-0 text-xs font-medium text-muted-foreground", className);
+}

package/dist/components/input-group/input-group.types.d.ts

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

package/dist/components/input-group/input-group.types.js

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

package/dist/components/input-otp/index.d.ts

@@ -0,0 +1,2 @@
+export { InputOtp as InputOTP, InputOtp } from "./input-otp.js";
+export type { InputOtpProps as InputOTPProps, InputOtpProps, InputOtpSize as InputOTPSize, InputOtpSize, InputOtpVariant as InputOTPVariant, InputOtpVariant, } from "./input-otp.types.js";

package/dist/components/input-otp/index.js

@@ -0,0 +1 @@
+export { InputOtp as InputOTP, InputOtp } from "./input-otp.js";

package/dist/components/input-otp/input-otp.d.ts

@@ -0,0 +1,2 @@
+import type { InputOtpProps } from "./input-otp.types.js";
+export declare function InputOtp({ "aria-label": ariaLabel, autoFocus, className, defaultValue, description, errorMessage, isDisabled, isInvalid, isRequired, label, length, name, onChange, onComplete, size, value, variant, }: InputOtpProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/input-otp/input-otp.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState, } from "react";
+import { cn } from "../../utils/cn.js";
+import { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, fieldSurfaceProps, } from "../../styles/field.js";
+import { inputOtpRootClass, inputOtpSlotClassName, inputOtpSlotsClass, } from "./input-otp.styles.js";
+function normalize(value, length) {
+    return value.replace(/\D/g, "").slice(0, length);
+}
+function toDigits(value, length) {
+    const chars = normalize(value, length).split("");
+    return Array.from({ length }, (_, index) => chars[index] ?? "");
+}
+export function InputOtp({ "aria-label": ariaLabel, autoFocus, className, defaultValue = "", description, errorMessage, isDisabled, isInvalid, isRequired, label, length = 6, name, onChange, onComplete, size = "md", value, variant = "outline", }) {
+    const reactId = useId();
+    const labelId = `${reactId}-label`;
+    const descriptionId = `${reactId}-description`;
+    const errorId = `${reactId}-error`;
+    const controlled = value !== undefined;
+    const [uncontrolled, setUncontrolled] = useState(() => normalize(defaultValue, length));
+    const current = controlled ? normalize(value, length) : uncontrolled;
+    const digits = toDigits(current, length);
+    const refs = useRef([]);
+    function commit(next) {
+        const normalized = normalize(next, length);
+        if (!controlled)
+            setUncontrolled(normalized);
+        onChange?.(normalized);
+        if (normalized.length === length)
+            onComplete?.(normalized);
+    }
+    function focusIndex(index) {
+        refs.current[Math.max(0, Math.min(length - 1, index))]?.focus();
+    }
+    function handleChange(index, raw) {
+        const digit = normalize(raw, 1);
+        const next = digits.map((item, i) => (i === index ? digit : item)).join("");
+        commit(next);
+        if (digit)
+            focusIndex(index + 1);
+    }
+    function handleKeyDown(index, event) {
+        if (event.key === "Backspace") {
+            event.preventDefault();
+            if (digits[index]) {
+                commit(digits.map((item, i) => (i === index ? "" : item)).join(""));
+            }
+            else {
+                focusIndex(index - 1);
+                commit(digits.map((item, i) => (i === index - 1 ? "" : item)).join(""));
+            }
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            focusIndex(index - 1);
+        }
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            focusIndex(index + 1);
+        }
+    }
+    function handlePaste(event) {
+        event.preventDefault();
+        commit(event.clipboardData.getData("text"));
+    }
+    const describedBy = [
+        description ? descriptionId : null,
+        isInvalid && errorMessage ? errorId : null,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs("div", { role: "group", "aria-labelledby": label ? labelId : undefined, "aria-label": label ? undefined : ariaLabel ?? "One-time code", "aria-describedby": describedBy || undefined, "aria-disabled": isDisabled || undefined, "aria-invalid": isInvalid || undefined, "aria-required": isRequired || undefined, className: inputOtpRootClass(className), children: [label ? (_jsx("span", { id: labelId, className: fieldLabelClass, children: label })) : null, _jsx("div", { className: inputOtpSlotsClass, children: digits.map((digit, index) => (_jsx("input", { ref: (node) => {
+                        refs.current[index] = node;
+                    }, ...fieldSurfaceProps(variant), inputMode: "numeric", autoComplete: index === 0 ? "one-time-code" : "off", autoFocus: autoFocus && index === 0, disabled: isDisabled, "aria-label": `Digit ${index + 1} of ${length}`, maxLength: 1, value: digit, className: cn(inputOtpSlotClassName({ size, variant }), isInvalid && "border-danger"), onChange: (event) => handleChange(index, event.target.value), onKeyDown: (event) => handleKeyDown(index, event), onPaste: handlePaste, onFocus: (event) => event.target.select() }, index))) }), name ? _jsx("input", { type: "hidden", name: name, value: current }) : null, description ? (_jsx("p", { id: descriptionId, className: fieldDescriptionClass, children: description })) : null, isInvalid && errorMessage ? (_jsx("p", { id: errorId, className: fieldErrorClass, role: "alert", children: errorMessage })) : null] }));
+}

package/dist/components/input-otp/input-otp.styles.d.ts

@@ -0,0 +1,8 @@
+import { type FieldSize, type FieldVariant } from "../../styles/field.js";
+export declare function inputOtpRootClass(className?: string | undefined): string;
+export declare const inputOtpSlotsClass = "flex flex-row flex-nowrap items-center gap-2";
+export declare function inputOtpSlotClassName({ className, size, variant, }?: {
+    className?: string | undefined;
+    size?: FieldSize | undefined;
+    variant?: FieldVariant | undefined;
+}): string;