@forthtilliath/forth-ui 0.2.0

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

@@ -0,0 +1,7 @@
+export type { CollapsibleProps } from "./collapsible";
+export type { CollapsibleContentProps } from "./collapsible";
+export type { CollapsibleTriggerProps } from "./collapsible";
+export { Collapsible } from "./collapsible";
+export { CollapsibleContent } from "./collapsible";
+export { CollapsibleTrigger } from "./collapsible";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,YAAY,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/collapsible/index.js

@@ -0,0 +1,3 @@
+export { Collapsible } from "./collapsible";
+export { CollapsibleContent } from "./collapsible";
+export { CollapsibleTrigger } from "./collapsible";

package/dist/components/color-picker/color-picker.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export interface ColorPickerProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * A color swatch + hex text input, kept in sync — built on the browser's
+ * own native `<input type="color">` (a full saturation/hue picker in every
+ * modern browser) rather than adding a color-picker library, since the
+ * reference sources (hextaui, kibo-ui) don't offer anything the native
+ * picker doesn't already provide for a single hex value.
+ *
+ * @see https://www.hextaui.com/docs/ui/components/color-picker
+ * @see https://www.kibo-ui.com/components/color-picker
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function ColorPicker({ value, defaultValue, onValueChange, disabled, className, }: ColorPickerProps): React.JSX.Element;
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/components/color-picker/color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAwB,EACxB,aAAa,EACb,QAAgB,EAChB,SAAS,GACV,EAAE,gBAAgB,qBAmDlB"}

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

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Input } from "@forthtilliath/shadcn-ui/components/input";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+const HEX_PATTERN = /^#[0-9a-f]{6}$/i;
+/**
+ * A color swatch + hex text input, kept in sync — built on the browser's
+ * own native `<input type="color">` (a full saturation/hue picker in every
+ * modern browser) rather than adding a color-picker library, since the
+ * reference sources (hextaui, kibo-ui) don't offer anything the native
+ * picker doesn't already provide for a single hex value.
+ *
+ * @see https://www.hextaui.com/docs/ui/components/color-picker
+ * @see https://www.kibo-ui.com/components/color-picker
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function ColorPicker({ value, defaultValue = "#000000", onValueChange, disabled = false, className, }) {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const [textValue, setTextValue] = React.useState(defaultValue);
+    const color = value ?? uncontrolledValue;
+    function commit(next) {
+        setUncontrolledValue(next);
+        setTextValue(next);
+        onValueChange?.(next);
+    }
+    return (_jsxs("div", { "data-slot": "color-picker", className: cn("flex items-center gap-2", className), children: [_jsx("label", { className: cn("border-input size-9 shrink-0 overflow-hidden rounded-md border shadow-xs", disabled && "pointer-events-none opacity-50"), style: { backgroundColor: color }, children: _jsx("input", { type: "color", value: color, disabled: disabled, onChange: (e) => {
+                        commit(e.target.value);
+                    }, className: "size-full cursor-pointer opacity-0" }) }), _jsx(Input, { value: textValue, disabled: disabled, onChange: (e) => {
+                    setTextValue(e.target.value);
+                    if (HEX_PATTERN.test(e.target.value)) {
+                        commit(e.target.value);
+                    }
+                }, onBlur: () => {
+                    setTextValue(color);
+                }, className: "w-28 font-mono uppercase", maxLength: 7 })] }));
+}

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

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

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

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

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

@@ -0,0 +1 @@
+export { ColorPicker } from "./color-picker";

package/dist/components/combobox/combobox.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export interface ComboboxOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps {
+    options: ComboboxOption[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    emptyMessage?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * An autocomplete/searchable select — shadcn-ui doesn't ship a standalone
+ * Combobox primitive, only a docs recipe combining `Popover` + `Command`
+ * that every consumer re-assembles by hand. This wraps that recipe into a
+ * `options`/`value`/`onValueChange`-driven component.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/combobox
+ * @see https://www.kibo-ui.com/components/combobox
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function Combobox({ options, value, onValueChange, placeholder, emptyMessage, disabled, className, }: ComboboxProps): React.JSX.Element;
+//# sourceMappingURL=combobox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoB/B,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,KAAK,EACL,aAAa,EACb,WAAuB,EACvB,YAAkC,EAClC,QAAgB,EAChB,SAAS,GACV,EAAE,aAAa,qBAkDf"}

package/dist/components/combobox/combobox.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@forthtilliath/shadcn-ui/components/command";
+import { Popover, PopoverContent, PopoverTrigger, } from "@forthtilliath/shadcn-ui/components/popover";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { Button } from "../button";
+/**
+ * An autocomplete/searchable select — shadcn-ui doesn't ship a standalone
+ * Combobox primitive, only a docs recipe combining `Popover` + `Command`
+ * that every consumer re-assembles by hand. This wraps that recipe into a
+ * `options`/`value`/`onValueChange`-driven component.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/combobox
+ * @see https://www.kibo-ui.com/components/combobox
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function Combobox({ options, value, onValueChange, placeholder = "Select…", emptyMessage = "No results found.", disabled = false, className, }) {
+    const [open, setOpen] = React.useState(false);
+    const selected = options.find((option) => option.value === value);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, disabled: disabled, className: cn("w-full justify-between font-normal", className), children: [selected?.label ?? placeholder, _jsx(ChevronsUpDownIcon, { className: "opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-(--radix-popover-trigger-width) p-0", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: placeholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyMessage }), _jsx(CommandGroup, { children: options.map((option) => (_jsxs(CommandItem, { value: option.label, disabled: option.disabled, onSelect: () => {
+                                            onValueChange?.(option.value === value ? "" : option.value);
+                                            setOpen(false);
+                                        }, children: [_jsx(CheckIcon, { className: cn("size-4", option.value === value ? "opacity-100" : "opacity-0") }), option.label] }, option.value))) })] })] }) })] }));
+}

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

@@ -0,0 +1,5 @@
+export type { ComboboxOption, ComboboxProps } from "./combobox";
+export { Combobox } from "./combobox";
+export type { MultiSelectOption, MultiSelectProps } from "./multi-select";
+export { MultiSelect } from "./multi-select";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/combobox/index.js

@@ -0,0 +1,2 @@
+export { Combobox } from "./combobox";
+export { MultiSelect } from "./multi-select";

package/dist/components/combobox/multi-select.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import type { ComboboxOption } from "./combobox";
+export type MultiSelectOption = ComboboxOption;
+export interface MultiSelectProps {
+    options: MultiSelectOption[];
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    placeholder?: string;
+    emptyMessage?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * `Combobox`'s multi-value sibling — selected options render as removable
+ * `Badge` chips in the trigger. Fills the same shadcn-ui gap as `Combobox`
+ * (no standalone primitive, just the `Popover`+`Command` recipe), and the
+ * gap shadcn-extension's Multi Select fills specifically for multi-value
+ * selection.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/combobox
+ * @see https://shadcn-extension.vercel.app/docs/multi-select
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function MultiSelect({ options, value, defaultValue, onValueChange, placeholder, emptyMessage, disabled, className, }: MultiSelectProps): React.JSX.Element;
+//# sourceMappingURL=multi-select.d.ts.map

package/dist/components/combobox/multi-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/multi-select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC;AAE/C,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAuB,EACvB,YAAkC,EAClC,QAAgB,EAChB,SAAS,GACV,EAAE,gBAAgB,qBA+GlB"}

package/dist/components/combobox/multi-select.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
+import { buttonVariants } from "@forthtilliath/shadcn-ui/components/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@forthtilliath/shadcn-ui/components/command";
+import { Popover, PopoverContent, PopoverTrigger, } from "@forthtilliath/shadcn-ui/components/popover";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { Badge } from "../badge";
+/**
+ * `Combobox`'s multi-value sibling — selected options render as removable
+ * `Badge` chips in the trigger. Fills the same shadcn-ui gap as `Combobox`
+ * (no standalone primitive, just the `Popover`+`Command` recipe), and the
+ * gap shadcn-extension's Multi Select fills specifically for multi-value
+ * selection.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/combobox
+ * @see https://shadcn-extension.vercel.app/docs/multi-select
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function MultiSelect({ options, value, defaultValue, onValueChange, placeholder = "Select…", emptyMessage = "No results found.", disabled = false, className, }) {
+    const [open, setOpen] = React.useState(false);
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? []);
+    const selected = value ?? uncontrolledValue;
+    function update(next) {
+        setUncontrolledValue(next);
+        onValueChange?.(next);
+    }
+    function toggle(optionValue) {
+        update(selected.includes(optionValue)
+            ? selected.filter((v) => v !== optionValue)
+            : [...selected, optionValue]);
+    }
+    const selectedOptions = options.filter((option) => selected.includes(option.value));
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { role: "combobox", tabIndex: disabled ? -1 : 0, "aria-expanded": open, "aria-disabled": disabled, "data-disabled": disabled, onKeyDown: (e) => {
+                        if (!disabled && (e.key === "Enter" || e.key === " ")) {
+                            e.preventDefault();
+                            setOpen((prev) => !prev);
+                        }
+                    }, className: cn(buttonVariants({ variant: "outline" }), "h-auto min-h-9 w-full cursor-pointer justify-between font-normal data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", className), children: [_jsx("span", { className: "flex flex-1 flex-wrap gap-1", children: selectedOptions.length > 0 ? (selectedOptions.map((option) => (_jsx(Badge, { variant: "secondary", dismissible: true, open: true, onClick: (e) => {
+                                    e.stopPropagation();
+                                }, onOpenChange: () => {
+                                    toggle(option.value);
+                                }, children: option.label }, option.value)))) : (_jsx("span", { className: "text-muted-foreground font-normal", children: placeholder })) }), _jsx(ChevronsUpDownIcon, { className: "shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-(--radix-popover-trigger-width) p-0", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: placeholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyMessage }), _jsx(CommandGroup, { children: options.map((option) => (_jsxs(CommandItem, { value: option.label, disabled: option.disabled, onSelect: () => {
+                                            toggle(option.value);
+                                        }, children: [_jsx(CheckIcon, { className: cn("size-4", selected.includes(option.value)
+                                                    ? "opacity-100"
+                                                    : "opacity-0") }), option.label] }, option.value))) })] })] }) })] }));
+}

package/dist/components/command-palette/command-palette.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+export interface CommandPaletteItem {
+    label: React.ReactNode;
+    value: string;
+    icon?: React.ReactNode;
+    shortcut?: string;
+    onSelect: () => void;
+}
+export interface CommandPaletteGroup {
+    heading?: string;
+    items: CommandPaletteItem[];
+}
+export interface CommandPaletteProps {
+    groups: CommandPaletteGroup[];
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placeholder?: string;
+    emptyMessage?: string;
+    /** Key that toggles the palette alongside Cmd/Ctrl. @default "k" */
+    shortcutKey?: string;
+}
+/**
+ * A global command menu (`Cmd/Ctrl+<key>` to open) — wraps shadcn-ui's own
+ * `CommandDialog` (which has no keyboard-shortcut wiring of its own) with
+ * that listener plus a flat `groups`/`items` API instead of hand-composing
+ * `CommandGroup`/`CommandItem` every time.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/command
+ * @see https://www.hextaui.com/docs/ui/components/command-menu
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function CommandPalette({ groups, open, onOpenChange, placeholder, emptyMessage, shortcutKey, }: CommandPaletteProps): React.JSX.Element;
+//# sourceMappingURL=command-palette.d.ts.map

package/dist/components/command-palette/command-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/command-palette.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,kBAAkB,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,mBAAmB,EAAE,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,WAAyC,EACzC,YAAkC,EAClC,WAAiB,GAClB,EAAE,mBAAmB,qBA4DrB"}

package/dist/components/command-palette/command-palette.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut, } from "@forthtilliath/shadcn-ui/components/command";
+/**
+ * A global command menu (`Cmd/Ctrl+<key>` to open) — wraps shadcn-ui's own
+ * `CommandDialog` (which has no keyboard-shortcut wiring of its own) with
+ * that listener plus a flat `groups`/`items` API instead of hand-composing
+ * `CommandGroup`/`CommandItem` every time.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui.shadcn.com/docs/components/command
+ * @see https://www.hextaui.com/docs/ui/components/command-menu
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function CommandPalette({ groups, open, onOpenChange, placeholder = "Type a command or search…", emptyMessage = "No results found.", shortcutKey = "k", }) {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+    const isOpen = open ?? uncontrolledOpen;
+    function setOpen(next) {
+        setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    }
+    React.useEffect(() => {
+        function onKeyDown(e) {
+            if (e.key.toLowerCase() === shortcutKey.toLowerCase() &&
+                (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                setOpen(!isOpen);
+            }
+        }
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("keydown", onKeyDown);
+        };
+        // eslint-disable-next-line @eslint-react/exhaustive-deps, react-hooks/exhaustive-deps -- `setOpen` is a plain function redefined every render; including it would re-register this listener every render instead of only when `isOpen`/`shortcutKey` actually change, which is what its own re-closure over `isOpen` depends on
+    }, [isOpen, shortcutKey]);
+    return (_jsxs(CommandDialog, { open: isOpen, onOpenChange: setOpen, title: "Command Palette", description: placeholder, children: [_jsx(CommandInput, { placeholder: placeholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyMessage }), groups.map((group, index) => (
+                    // eslint-disable-next-line @eslint-react/no-array-index-key -- `heading` is optional and not guaranteed unique
+                    _jsx(CommandGroup, { heading: group.heading, children: group.items.map((item) => (_jsxs(CommandItem, { value: item.value, onSelect: () => {
+                                item.onSelect();
+                                setOpen(false);
+                            }, children: [item.icon, item.label, item.shortcut !== undefined && (_jsx(CommandShortcut, { children: item.shortcut }))] }, item.value))) }, group.heading ?? index)))] })] }));
+}

package/dist/components/command-palette/index.d.ts

@@ -0,0 +1,3 @@
+export type { CommandPaletteGroup, CommandPaletteItem, CommandPaletteProps, } from "./command-palette";
+export { CommandPalette } from "./command-palette";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/command-palette/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/command-palette/index.js

@@ -0,0 +1 @@
+export { CommandPalette } from "./command-palette";

package/dist/components/confirm-dialog/confirm-context.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export interface ConfirmOptions {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Styles the confirm button destructively for irreversible actions. */
+    variant?: "default" | "destructive";
+}
+export type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
+export interface ConfirmState extends ConfirmOptions {
+    resolve: (confirmed: boolean) => void;
+}
+export declare const ConfirmContext: React.Context<ConfirmFn | null>;
+//# sourceMappingURL=confirm-context.d.ts.map

package/dist/components/confirm-dialog/confirm-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-context.d.ts","sourceRoot":"","sources":["../../../src/components/confirm-dialog/confirm-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACrC;AAED,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;AAEtE,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,cAAc,iCAA8C,CAAC"}

package/dist/components/confirm-dialog/confirm-context.js

@@ -0,0 +1,2 @@
+import * as React from "react";
+export const ConfirmContext = React.createContext(null);

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+/**
+ * Provides `useConfirm`, an imperative `await confirm({...})` alternative
+ * to hand-wiring an `AlertDialog`'s open state for every yes/no
+ * confirmation in an app — mount once near the root.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui-x.junwen-k.dev/docs/components/confirmer
+ * @see https://shuip.xyz/components/confirmation-dialog
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function ConfirmDialogProvider({ children, }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=confirm-dialog.d.ts.map

package/dist/components/confirm-dialog/confirm-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/confirm-dialog/confirm-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B;;;;;;;;;;;;GAYG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAsDA"}

package/dist/components/confirm-dialog/confirm-dialog.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@forthtilliath/shadcn-ui/components/alert-dialog";
+import { buttonVariants } from "@forthtilliath/shadcn-ui/components/button";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { ConfirmContext } from "./confirm-context";
+/**
+ * Provides `useConfirm`, an imperative `await confirm({...})` alternative
+ * to hand-wiring an `AlertDialog`'s open state for every yes/no
+ * confirmation in an app — mount once near the root.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @see https://ui-x.junwen-k.dev/docs/components/confirmer
+ * @see https://shuip.xyz/components/confirmation-dialog
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function ConfirmDialogProvider({ children, }) {
+    const [state, setState] = React.useState(null);
+    const confirm = React.useCallback((options) => {
+        return new Promise((resolve) => {
+            setState({ ...options, resolve });
+        });
+    }, []);
+    function settle(confirmed) {
+        state?.resolve(confirmed);
+        setState(null);
+    }
+    return (_jsxs(ConfirmContext, { value: confirm, children: [children, _jsx(AlertDialog, { open: state !== null, onOpenChange: (open) => {
+                    if (!open) {
+                        settle(false);
+                    }
+                }, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: state?.title }), state?.description !== undefined && (_jsx(AlertDialogDescription, { children: state.description }))] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: state?.cancelLabel ?? "Cancel" }), _jsx(AlertDialogAction, { onClick: () => {
+                                        settle(true);
+                                    }, className: cn(state?.variant === "destructive" &&
+                                        buttonVariants({ variant: "destructive" })), children: state?.confirmLabel ?? "Continue" })] })] }) })] }));
+}

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

@@ -0,0 +1,4 @@
+export type { ConfirmOptions } from "./confirm-context";
+export { ConfirmDialogProvider } from "./confirm-dialog";
+export { useConfirm } from "./use-confirm";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/confirm-dialog/index.d.ts.map

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

package/dist/components/confirm-dialog/index.js

@@ -0,0 +1,2 @@
+export { ConfirmDialogProvider } from "./confirm-dialog";
+export { useConfirm } from "./use-confirm";

package/dist/components/confirm-dialog/use-confirm.d.ts

@@ -0,0 +1,4 @@
+import type { ConfirmFn } from "./confirm-context";
+/** Must be called from a descendant of `ConfirmDialogProvider`. */
+export declare function useConfirm(): ConfirmFn;
+//# sourceMappingURL=use-confirm.d.ts.map

package/dist/components/confirm-dialog/use-confirm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-confirm.d.ts","sourceRoot":"","sources":["../../../src/components/confirm-dialog/use-confirm.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD,mEAAmE;AACnE,wBAAgB,UAAU,IAAI,SAAS,CAMtC"}

package/dist/components/confirm-dialog/use-confirm.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { ConfirmContext } from "./confirm-context";
+/** Must be called from a descendant of `ConfirmDialogProvider`. */
+export function useConfirm() {
+    const confirm = React.use(ConfirmContext);
+    if (confirm === null) {
+        throw new Error("useConfirm must be used within a ConfirmDialogProvider");
+    }
+    return confirm;
+}

package/dist/components/count-animation/count-animation.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface CountAnimationProps {
+    value: number;
+    /** Animation duration, in ms. @default 1000 */
+    duration?: number;
+    formatOptions?: Intl.NumberFormatOptions;
+    className?: string;
+}
+/**
+ * Animates a number counting up (or down) to `value` whenever it changes,
+ * via `requestAnimationFrame` — no animation library.
+ *
+ * @see https://bundui.io/components/count-animation
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export declare function CountAnimation({ value, duration, formatOptions, className, }: CountAnimationProps): React.JSX.Element;
+//# sourceMappingURL=count-animation.d.ts.map

package/dist/components/count-animation/count-animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"count-animation.d.ts","sourceRoot":"","sources":["../../../src/components/count-animation/count-animation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAA2B,EAC3B,aAAa,EACb,SAAS,GACV,EAAE,mBAAmB,qBA+BrB"}

package/dist/components/count-animation/count-animation.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+const DEFAULT_DURATION = 1000;
+function easeOutCubic(t) {
+    return 1 - (1 - t) ** 3;
+}
+/**
+ * Animates a number counting up (or down) to `value` whenever it changes,
+ * via `requestAnimationFrame` — no animation library.
+ *
+ * @see https://bundui.io/components/count-animation
+ *
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2026 Forth
+ */
+export function CountAnimation({ value, duration = DEFAULT_DURATION, formatOptions, className, }) {
+    const [display, setDisplay] = React.useState(value);
+    const fromRef = React.useRef(value);
+    React.useEffect(() => {
+        const from = fromRef.current;
+        const start = performance.now();
+        let frame;
+        function tick(now) {
+            const progress = Math.min((now - start) / duration, 1);
+            setDisplay(from + (value - from) * easeOutCubic(progress));
+            if (progress < 1) {
+                frame = requestAnimationFrame(tick);
+            }
+            else {
+                fromRef.current = value;
+            }
+        }
+        frame = requestAnimationFrame(tick);
+        return () => {
+            cancelAnimationFrame(frame);
+        };
+    }, [value, duration]);
+    const formatted = React.useMemo(() => new Intl.NumberFormat(undefined, formatOptions).format(display), [display, formatOptions]);
+    return _jsx("span", { className: className, children: formatted });
+}

package/dist/components/count-animation/index.d.ts

@@ -0,0 +1,3 @@
+export type { CountAnimationProps } from "./count-animation";
+export { CountAnimation } from "./count-animation";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/count-animation/index.d.ts.map

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

package/dist/components/count-animation/index.js

@@ -0,0 +1 @@
+export { CountAnimation } from "./count-animation";

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+export interface DatePickerProps {
+    value?: Date;
+    defaultValue?: Date;
+    onValueChange?: (date: Date | undefined) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    /** Passed through to `Date.prototype.toLocaleDateString`. */
+    formatOptions?: Intl.DateTimeFormatOptions;
+}
+/**
+ * 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 declare function DatePicker({ value, defaultValue, onValueChange, placeholder, disabled, className, formatOptions, }: DatePickerProps): React.JSX.Element;
+//# sourceMappingURL=date-picker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAC;CAC5C;AAMD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAA2B,EAC3B,QAAgB,EAChB,SAAS,EACT,aAAsC,GACvC,EAAE,eAAe,qBAuCjB"}