@forthtilliath/forth-ui 0.2.0

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

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CalendarIcon } from "lucide-react";
+import { Calendar } from "@forthtilliath/shadcn-ui/components/calendar";
+import { Popover, PopoverContent, PopoverTrigger, } from "@forthtilliath/shadcn-ui/components/popover";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { Button } from "../button";
+const DEFAULT_FORMAT_OPTIONS = {
+    dateStyle: "long",
+};
+/**
+ * A single-date picker — shadcn-ui's own docs describe this as a recipe
+ * (`Popover` + `Calendar`) rather than shipping a standalone primitive,
+ * one every consumer reassembles by hand. Wraps that recipe into a
+ * `value`/`onValueChange` component.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/date-picker
+ * @see https://www.hextaui.com/docs/ui/components/date-picker
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function DatePicker({ value, defaultValue, onValueChange, placeholder = "Pick a date", disabled = false, className, formatOptions = DEFAULT_FORMAT_OPTIONS, }) {
+    const [open, setOpen] = React.useState(false);
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const selected = value ?? uncontrolledValue;
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", disabled: disabled, className: cn("w-full justify-start text-left font-normal", selected === undefined && "text-muted-foreground", className), children: [_jsx(CalendarIcon, {}), selected !== undefined
+                            ? selected.toLocaleDateString(undefined, formatOptions)
+                            : placeholder] }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: _jsx(Calendar, { mode: "single", selected: selected, onSelect: (date) => {
+                        setUncontrolledValue(date);
+                        onValueChange?.(date);
+                        setOpen(false);
+                    }, disabled: disabled }) })] }));
+}

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

@@ -0,0 +1,3 @@
+export type { DatePickerProps } from "./date-picker";
+export { DatePicker } from "./date-picker";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

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

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

package/dist/components/description-list/description-list.d.ts

@@ -0,0 +1,16 @@
+import type React from "react";
+/**
+ * A description list, with terms and descriptions.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui-x.junwen-k.dev/docs/components/description-list
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function DescriptionList({ className, ...props }: React.ComponentProps<"dl">): React.JSX.Element;
+export declare function DescriptionGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function DescriptionTerm({ className, ...props }: React.ComponentProps<"dt">): React.JSX.Element;
+export declare function DescriptionDetail({ className, ...props }: React.ComponentProps<"dd">): React.JSX.Element;
+//# sourceMappingURL=description-list.d.ts.map

package/dist/components/description-list/description-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"description-list.d.ts","sourceRoot":"","sources":["../../../src/components/description-list/description-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQ5B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAW5B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQ5B"}

package/dist/components/description-list/description-list.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * A description list, with terms and descriptions.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui-x.junwen-k.dev/docs/components/description-list
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function DescriptionList({ className, ...props }) {
+    return (_jsx("dl", { "data-slot": "description-list", className: cn("divide-border divide-y", className), ...props }));
+}
+export function DescriptionGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "description-group", className: cn("flex flex-col gap-1 py-3 first:pt-0 last:pb-0 sm:flex-row sm:gap-4", className), ...props }));
+}
+export function DescriptionTerm({ className, ...props }) {
+    return (_jsx("dt", { "data-slot": "description-term", className: cn("text-muted-foreground text-sm font-medium sm:w-1/3 sm:shrink-0", className), ...props }));
+}
+export function DescriptionDetail({ className, ...props }) {
+    return (_jsx("dd", { "data-slot": "description-detail", className: cn("text-sm sm:flex-1", className), ...props }));
+}

package/dist/components/description-list/index.d.ts

@@ -0,0 +1,2 @@
+export { DescriptionDetail, DescriptionGroup, DescriptionList, DescriptionTerm, } from "./description-list";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/description-list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/description-list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,eAAe,GAChB,MAAM,oBAAoB,CAAC"}

package/dist/components/description-list/index.js

@@ -0,0 +1 @@
+export { DescriptionDetail, DescriptionGroup, DescriptionList, DescriptionTerm, } from "./description-list";

package/dist/components/dropdrawer/dropdrawer.d.ts

@@ -0,0 +1,27 @@
+import type React from "react";
+export interface DropdrawerItem {
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    onSelect?: () => void;
+    variant?: "default" | "destructive";
+}
+export interface DropdrawerProps {
+    items: DropdrawerItem[];
+    trigger: React.ReactElement;
+    title?: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A menu that renders as a `DropdownMenu` on desktop and a bottom `Drawer`
+ * on mobile (via the existing `useIsMobile` hook) — the same items, the
+ * interaction pattern each platform's users actually expect.
+ *
+ * @see https://dropdrawer.jiawei.dev/
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Dropdrawer({ items, trigger, title, open, onOpenChange, }: DropdrawerProps): React.JSX.Element;
+//# sourceMappingURL=dropdrawer.d.ts.map

package/dist/components/dropdrawer/dropdrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdrawer.d.ts","sourceRoot":"","sources":["../../../src/components/dropdrawer/dropdrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACrC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,OAAO,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,KAAK,EACL,IAAI,EACJ,YAAY,GACb,EAAE,eAAe,qBAqDjB"}

package/dist/components/dropdrawer/dropdrawer.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@forthtilliath/shadcn-ui/components/drawer";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@forthtilliath/shadcn-ui/components/dropdown-menu";
+import { useIsMobile } from "@forthtilliath/shadcn-ui/hooks/use-mobile";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * A menu that renders as a `DropdownMenu` on desktop and a bottom `Drawer`
+ * on mobile (via the existing `useIsMobile` hook) — the same items, the
+ * interaction pattern each platform's users actually expect.
+ *
+ * @see https://dropdrawer.jiawei.dev/
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Dropdrawer({ items, trigger, title, open, onOpenChange, }) {
+    const isMobile = useIsMobile();
+    if (isMobile) {
+        return (_jsxs(Drawer, { open: open, onOpenChange: onOpenChange, children: [_jsx(DrawerTrigger, { asChild: true, children: trigger }), _jsxs(DrawerContent, { children: [title !== undefined && (_jsx(DrawerHeader, { children: _jsx(DrawerTitle, { children: title }) })), _jsx("div", { className: "grid gap-1 p-4 pt-0", children: items.map((item, index) => (_jsxs("button", { type: "button", onClick: item.onSelect, className: cn("hover:bg-accent flex items-center gap-2 rounded-md px-3 py-2.5 text-left text-sm", item.variant === "destructive" && "text-destructive"), children: [item.icon, item.label] }, index))) })] })] }));
+    }
+    return (_jsxs(DropdownMenu, { open: open, onOpenChange: onOpenChange, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: trigger }), _jsx(DropdownMenuContent, { children: items.map((item, index) => (_jsxs(DropdownMenuItem
+                // eslint-disable-next-line @eslint-react/no-array-index-key -- see above
+                , { onSelect: item.onSelect, variant: item.variant, children: [item.icon, item.label] }, index))) })] }));
+}

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

@@ -0,0 +1,3 @@
+export type { DropdrawerItem, DropdrawerProps } from "./dropdrawer";
+export { Dropdrawer } from "./dropdrawer";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/dropdrawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdrawer/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/dropdrawer/index.js

@@ -0,0 +1 @@
+export { Dropdrawer } from "./dropdrawer";

package/dist/components/dropzone/dropzone.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+export interface DropzoneProps {
+    value?: File[];
+    defaultValue?: File[];
+    onValueChange?: (files: File[]) => void;
+    accept?: string;
+    multiple?: boolean;
+    maxFiles?: number;
+    /** Maximum size per file, in bytes. Oversized files are silently dropped. */
+    maxSize?: number;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * A drag-and-drop file upload zone, listing accepted files below via
+ * `FileList`.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.kibo-ui.com/components/dropzone
+ * @see https://ui.aceternity.com/components/file-upload
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Dropzone({ value, defaultValue, onValueChange, accept, multiple, maxFiles, maxSize, disabled, className, }: DropzoneProps): React.JSX.Element;
+//# sourceMappingURL=dropzone.d.ts.map

package/dist/components/dropzone/dropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropzone.d.ts","sourceRoot":"","sources":["../../../src/components/dropzone/dropzone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkBD;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,YAAY,EACZ,aAAa,EACb,MAAM,EACN,QAAe,EACf,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,SAAS,GACV,EAAE,aAAa,qBA8Hf"}

package/dist/components/dropzone/dropzone.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { FileIcon, UploadIcon, XIcon } from "lucide-react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { FileList, FileListAction, FileListActions, FileListDescription, FileListHeader, FileListIcon, FileListInfo, FileListItem, FileListName, } from "../file-list";
+function formatBytes(bytes) {
+    if (bytes === 0) {
+        return "0 B";
+    }
+    const units = ["B", "KB", "MB", "GB"];
+    const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+    return `${(bytes / 1024 ** exponent).toFixed(exponent === 0 ? 0 : 1)} ${units[exponent] ?? "B"}`;
+}
+function fileKey(file) {
+    return `${file.name}-${file.size.toString()}-${file.lastModified.toString()}`;
+}
+/**
+ * A drag-and-drop file upload zone, listing accepted files below via
+ * `FileList`.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://www.kibo-ui.com/components/dropzone
+ * @see https://ui.aceternity.com/components/file-upload
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Dropzone({ value, defaultValue, onValueChange, accept, multiple = true, maxFiles, maxSize, disabled = false, className, }) {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? []);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const files = value ?? uncontrolledValue;
+    function update(next) {
+        setUncontrolledValue(next);
+        onValueChange?.(next);
+    }
+    function addFiles(incoming) {
+        let next = [...files, ...Array.from(incoming)];
+        if (maxSize !== undefined) {
+            next = next.filter((file) => file.size <= maxSize);
+        }
+        if (maxFiles !== undefined) {
+            next = next.slice(0, maxFiles);
+        }
+        update(next);
+    }
+    function removeFile(file) {
+        update(files.filter((f) => f !== file));
+    }
+    function openFileDialog() {
+        if (!disabled) {
+            inputRef.current?.click();
+        }
+    }
+    return (_jsxs("div", { "data-slot": "dropzone", className: "grid gap-3", children: [_jsxs("div", { role: "button", tabIndex: disabled ? -1 : 0, "data-dragging": isDragging, "aria-disabled": disabled, onClick: openFileDialog, onKeyDown: (e) => {
+                    if (!disabled && (e.key === "Enter" || e.key === " ")) {
+                        e.preventDefault();
+                        openFileDialog();
+                    }
+                }, onDragOver: (e) => {
+                    e.preventDefault();
+                    if (!disabled) {
+                        setIsDragging(true);
+                    }
+                }, onDragLeave: () => {
+                    setIsDragging(false);
+                }, onDrop: (e) => {
+                    e.preventDefault();
+                    setIsDragging(false);
+                    if (!disabled) {
+                        addFiles(e.dataTransfer.files);
+                    }
+                }, className: cn("border-input hover:bg-accent/50 flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed p-8 text-center transition-colors", "data-[dragging=true]:border-primary data-[dragging=true]:bg-accent/50", disabled && "pointer-events-none cursor-not-allowed opacity-50", className), children: [_jsx(UploadIcon, { className: "text-muted-foreground size-8" }), _jsx("p", { className: "text-sm font-medium", children: "Drag & drop files here, or click to select" }), maxSize !== undefined && (_jsxs("p", { className: "text-muted-foreground text-xs", children: ["Max file size: ", formatBytes(maxSize)] })), _jsx("input", { ref: inputRef, type: "file", accept: accept, multiple: multiple, disabled: disabled, className: "hidden", onChange: (e) => {
+                            if (e.target.files !== null) {
+                                addFiles(e.target.files);
+                            }
+                            e.target.value = "";
+                        } })] }), files.length > 0 && (_jsx(FileList, { children: files.map((file) => (_jsx(FileListItem, { children: _jsxs(FileListHeader, { children: [_jsx(FileListIcon, { children: _jsx(FileIcon, {}) }), _jsxs(FileListInfo, { children: [_jsx(FileListName, { children: file.name }), _jsx(FileListDescription, { children: formatBytes(file.size) })] }), _jsx(FileListActions, { children: _jsx(FileListAction, { onClick: () => {
+                                        removeFile(file);
+                                    }, "aria-label": "Remove file", children: _jsx(XIcon, {}) }) })] }) }, fileKey(file)))) }))] }));
+}

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

@@ -0,0 +1,3 @@
+export type { DropzoneProps } from "./dropzone";
+export { Dropzone } from "./dropzone";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/dropzone/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropzone/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/dropzone/index.js

@@ -0,0 +1 @@
+export { Dropzone } from "./dropzone";

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

@@ -0,0 +1,41 @@
+import * as React from "react";
+interface FieldControlProps {
+    id?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean;
+}
+export interface FieldProps {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    required?: boolean;
+    /**
+     * `vertical` (label above the control, e.g. Input/Textarea/Select) or
+     * `horizontal` (control beside the label, e.g. Checkbox/Switch).
+     * @default "vertical"
+     */
+    orientation?: "vertical" | "horizontal";
+    className?: string;
+    /** The form control — its `id`/`aria-describedby`/`aria-invalid` are wired up automatically. */
+    children: React.ReactElement<FieldControlProps>;
+}
+/**
+ * Wires a label, description and error message to a single form control —
+ * consolidates the "Checkbox Field" / "Input Field" / "Radio Field" /
+ * "Select Field" pattern (same label+control+description+error shape
+ * applied to every control type) into one control-agnostic component,
+ * independent of any form library.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://shuip.xyz/components/input-field
+ * @see https://shuip.xyz/components/checkbox-field
+ * @see https://shuip.xyz/components/radio-field
+ * @see https://shuip.xyz/components/select-field
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Field({ label, description, error, required, orientation, className, children, }: FieldProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=field.d.ts.map

package/dist/components/field/field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/components/field/field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,iBAAiB;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gGAAgG;IAChG,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;CACjD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAgB,EAChB,WAAwB,EACxB,SAAS,EACT,QAAQ,GACT,EAAE,UAAU,qBAiEZ"}

package/dist/components/field/field.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * Wires a label, description and error message to a single form control —
+ * consolidates the "Checkbox Field" / "Input Field" / "Radio Field" /
+ * "Select Field" pattern (same label+control+description+error shape
+ * applied to every control type) into one control-agnostic component,
+ * independent of any form library.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://shuip.xyz/components/input-field
+ * @see https://shuip.xyz/components/checkbox-field
+ * @see https://shuip.xyz/components/radio-field
+ * @see https://shuip.xyz/components/select-field
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Field({ label, description, error, required = false, orientation = "vertical", className, children, }) {
+    const generatedId = React.useId();
+    const descriptionId = React.useId();
+    const errorId = React.useId();
+    const describedBy = [
+        description !== undefined ? descriptionId : null,
+        error !== undefined ? errorId : null,
+    ]
+        .filter((value) => value !== null)
+        .join(" ") || undefined;
+    const controlId = children.props.id ?? generatedId;
+    // cloneElement is required here (not `Slot`) since we're injecting
+    // specific accessibility attributes (id/aria-describedby/aria-invalid)
+    // onto an arbitrary single control, not merging arbitrary DOM props.
+    // eslint-disable-next-line @eslint-react/no-clone-element
+    const control = React.cloneElement(children, {
+        id: controlId,
+        "aria-describedby": describedBy,
+        "aria-invalid": error !== undefined,
+    });
+    const labelNode = label !== undefined && (_jsxs("label", { htmlFor: controlId, className: "text-sm leading-none font-medium", children: [label, required && _jsx("span", { className: "text-destructive", children: " *" })] }));
+    const descriptionNode = description !== undefined && (_jsx("p", { id: descriptionId, className: "text-muted-foreground text-sm", children: description }));
+    const errorNode = error !== undefined && (_jsx("p", { id: errorId, role: "alert", className: "text-destructive text-sm", children: error }));
+    if (orientation === "horizontal") {
+        return (_jsxs("div", { "data-slot": "field", className: cn("flex items-start gap-2", className), children: [control, _jsxs("div", { className: "grid gap-1", children: [labelNode, descriptionNode, errorNode] })] }));
+    }
+    return (_jsxs("div", { "data-slot": "field", className: cn("grid gap-1.5", className), children: [labelNode, control, descriptionNode, errorNode] }));
+}

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

@@ -0,0 +1,3 @@
+export type { FieldProps } from "./field";
+export { Field } from "./field";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/field/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/field/index.js

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

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

@@ -0,0 +1,29 @@
+import type React from "react";
+import { Progress } from "@forthtilliath/shadcn-ui/components/progress";
+/**
+ * Displays a list of files with details such as name, size, and upload
+ * progress — a composable set of primitives, not a single all-in-one prop
+ * API (matches the source's own composition style).
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui-x.junwen-k.dev/docs/components/file-list
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function FileList({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+export declare function FileListItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+export declare function FileListHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function FileListIcon({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function FileListInfo({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function FileListName({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+export declare function FileListDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+export declare function FileListDescriptionSeparator({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export declare function FileListActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function FileListAction({ className, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+export declare function FileListContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export type FileListProgressProps = React.ComponentProps<typeof Progress>;
+/** Wraps shadcn-ui's `Progress` for the upload-progress row. */
+export declare function FileListProgress(props: FileListProgressProps): React.JSX.Element;
+//# sourceMappingURL=file-list.d.ts.map

package/dist/components/file-list/file-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-list.d.ts","sourceRoot":"","sources":["../../../src/components/file-list/file-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,8CAA8C,CAAC;AAGxE;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQ3E;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAW5B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAW7B;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQ3B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAW3B;AAED,wBAAgB,4BAA4B,CAAC,EAC3C,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAW9B;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,qBAYhC;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAI7B;AAED,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE1E,gEAAgE;AAChE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAE5D"}

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Progress } from "@forthtilliath/shadcn-ui/components/progress";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+/**
+ * Displays a list of files with details such as name, size, and upload
+ * progress — a composable set of primitives, not a single all-in-one prop
+ * API (matches the source's own composition style).
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui-x.junwen-k.dev/docs/components/file-list
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function FileList({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "file-list", className: cn("flex flex-col gap-2", className), ...props }));
+}
+export function FileListItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "file-list-item", className: cn("border-border flex flex-col gap-2 rounded-lg border p-3", className), ...props }));
+}
+export function FileListHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "file-list-header", className: cn("flex items-center gap-3", className), ...props }));
+}
+export function FileListIcon({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "file-list-icon", className: cn("text-muted-foreground flex size-8 shrink-0 items-center justify-center [&>svg]:size-5", className), ...props }));
+}
+export function FileListInfo({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "file-list-info", className: cn("min-w-0 flex-1", className), ...props }));
+}
+export function FileListName({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "file-list-name", className: cn("truncate text-sm font-medium", className), ...props }));
+}
+export function FileListDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "file-list-description", className: cn("text-muted-foreground flex items-center text-xs", className), ...props }));
+}
+export function FileListDescriptionSeparator({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "file-list-description-separator", "aria-hidden": "true", className: cn("mx-1.5", className), ...props, children: "\u00B7" }));
+}
+export function FileListActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "file-list-actions", className: cn("flex shrink-0 items-center gap-1", className), ...props }));
+}
+export function FileListAction({ className, ...props }) {
+    return (_jsx("button", { type: "button", "data-slot": "file-list-action", className: cn("text-muted-foreground hover:text-foreground rounded-sm p-1 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-current [&>svg]:size-4", className), ...props }));
+}
+export function FileListContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "file-list-content", className: cn(className), ...props }));
+}
+/** Wraps shadcn-ui's `Progress` for the upload-progress row. */
+export function FileListProgress(props) {
+    return _jsx(Progress, { "data-slot": "file-list-progress", ...props });
+}

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

@@ -0,0 +1,3 @@
+export type { FileListProgressProps } from "./file-list";
+export { FileList, FileListAction, FileListActions, FileListContent, FileListDescription, FileListDescriptionSeparator, FileListHeader, FileListIcon, FileListInfo, FileListItem, FileListName, FileListProgress, } from "./file-list";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/file-list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/file-list/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EACL,QAAQ,EACR,cAAc,EACd,eAAe,EACf,eAAe,EACf,mBAAmB,EACnB,4BAA4B,EAC5B,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,gBAAgB,GACjB,MAAM,aAAa,CAAC"}

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

@@ -0,0 +1 @@
+export { FileList, FileListAction, FileListActions, FileListContent, FileListDescription, FileListDescriptionSeparator, FileListHeader, FileListIcon, FileListInfo, FileListItem, FileListName, FileListProgress, } from "./file-list";

package/dist/components/grid/context.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export declare const GridDebugContext: React.Context<{
+    /** If ``debug`` is enabled */
+    debug?: boolean;
+    isDebugActive: boolean;
+}>;
+export declare const useGridDebugContext: () => {
+    /** If ``debug`` is enabled */
+    debug?: boolean;
+    isDebugActive: boolean;
+};
+//# sourceMappingURL=context.d.ts.map

package/dist/components/grid/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/grid/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,gBAAgB;IAC3B,8BAA8B;YACtB,OAAO;mBACA,OAAO;EAGtB,CAAC;AAEH,eAAO,MAAM,mBAAmB;IAP9B,8BAA8B;YACtB,OAAO;mBACA,OAAO;CAK4C,CAAC"}

package/dist/components/grid/context.js

@@ -0,0 +1,5 @@
+import React from "react";
+export const GridDebugContext = React.createContext({
+    isDebugActive: false,
+});
+export const useGridDebugContext = () => React.use(GridDebugContext);

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

@@ -0,0 +1,14 @@
+import type React from "react";
+import type { Prettify } from "@forthtilliath/types/object";
+import { type GridItemVariants } from "./variants";
+type Props = Prettify<GridItemVariants & React.ComponentProps<"div"> & {
+    children: React.ReactNode;
+}>;
+/**
+ * A GridItem is a component that represents an item inside a Grid.
+ *
+ * It receives the same props as a div and extends them with the GridItemVariants.
+ */
+export declare function GridItem({ children, className, ...props }: Props): React.JSX.Element;
+export {};
+//# sourceMappingURL=grid-item.d.ts.map

package/dist/components/grid/grid-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-item.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAG5D,OAAO,EAEL,KAAK,gBAAgB,EAEtB,MAAM,YAAY,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CACnB,gBAAgB,GACd,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CACJ,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkB3B"}

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { useGridDebugContext } from "./context";
+import { gridItemDebugVariants, gridItemVariants, } from "./variants";
+/**
+ * A GridItem is a component that represents an item inside a Grid.
+ *
+ * It receives the same props as a div and extends them with the GridItemVariants.
+ */
+export function GridItem({ children, className, ...props }) {
+    const { debug, isDebugActive } = useGridDebugContext();
+    return (_jsxs("div", { className: cn(gridItemVariants({ debug }), className), "data-slot": "grid-item", ...props, children: [children, debug && (_jsx("div", { className: cn(gridItemDebugVariants({ active: isDebugActive })), "data-slot": "grid-item-debug" }))] }));
+}

package/dist/components/grid/grid.d.ts

@@ -0,0 +1,16 @@
+import type React from "react";
+import { type ClassValue } from "@forthtilliath/shadcn-ui/lib/utils";
+import { type Prettify } from "@forthtilliath/types/object";
+import { GridItem } from "./grid-item";
+import type { GridVariants } from "./variants";
+export type GridProps = Prettify<{
+    children?: React.ReactNode;
+    debug?: boolean;
+    debugKey?: string;
+    className?: ClassValue;
+} & GridVariants & Omit<React.HTMLAttributes<HTMLDivElement>, "className">>;
+export declare function Grid({ children, className, debug, debugKey, cols, spacing, ...props }: GridProps): React.JSX.Element;
+export declare namespace Grid {
+    var Item: typeof GridItem;
+}
+//# sourceMappingURL=grid.d.ts.map

package/dist/components/grid/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,UAAU,EAAM,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAG5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,MAAM,MAAM,SAAS,GAAG,QAAQ,CAC9B;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,GAAG,YAAY,GACd,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,CAC1D,CAAC;AAEF,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAc,EACd,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,SAAS,qBAqBX;yBA7Be,IAAI"}

package/dist/components/grid/grid.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useKeyListener } from "@forthtilliath/react-hooks/useKeyListener";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { GridDebugContext } from "./context";
+import { GridItem } from "./grid-item";
+import { gridVariants } from "./variants";
+export function Grid({ children, className, debug, debugKey = "g", cols, spacing, ...props }) {
+    const [isDebugActive, setIsDebugActive] = useState(true);
+    const contextValue = useMemo(() => ({ debug, isDebugActive }), [debug, isDebugActive]);
+    useKeyListener({ key: debugKey }, () => {
+        if (debug)
+            setIsDebugActive((v) => !v);
+    });
+    return (_jsx("div", { className: cn(gridVariants({ cols, spacing }), className, {
+            relative: debug,
+        }), ...props, children: _jsx(GridDebugContext, { value: contextValue, children: children }) }));
+}
+Grid.Item = GridItem;