@hewnui/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,28 @@
+import { cn } from "../../utils/cn";
+export function colorPickerClassName(className) {
+    return cn("flex w-full max-w-sm flex-col gap-1.5 text-sm text-foreground", className);
+}
+export const colorPickerTriggerClass = cn("inline-flex min-h-11 w-full items-center gap-3", "rounded-[var(--kp-radius-md)] border bg-surface px-3 text-sm", "shadow-[var(--kp-shadow-surface)] outline-none", "transition-[transform,background-color,border-color]", "duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)]", "data-[pressed]:scale-[0.96] data-[disabled]:opacity-45", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring");
+export const colorPickerSwatchPreviewClass = cn("size-8 shrink-0 rounded-[var(--kp-radius-sm)] border", "border-[color-mix(in_oklch,var(--kp-foreground)_18%,transparent)]", "shadow-[inset_0_1px_0_oklch(1_0_0/35%)]");
+export const colorPickerPopoverClass = cn("overflow-auto rounded-[var(--kp-radius-panel)] border bg-surface-raised p-3", "shadow-[var(--kp-shadow-surface)] outline-none");
+export const colorPickerPanelClass = "flex w-[16.5rem] flex-col gap-3 outline-none";
+export const colorAreaClass = cn("h-36 w-full rounded-[var(--kp-radius-md)]", "shadow-[inset_0_0_0_1px_color-mix(in_oklch,var(--kp-foreground)_12%,transparent)]", "forced-color-adjust-none");
+export const colorThumbClass = cn("size-5 rounded-full border-2 border-white", "shadow-[0_1px_2px_oklch(0_0_0/35%)] outline-none", "transition-[transform]", "duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)]", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring", "data-[dragging]:scale-[0.96]");
+export const colorSliderClass = "flex flex-col gap-1.5";
+export const colorSliderTrackClass = cn("relative h-10 w-full rounded-full", "bg-[var(--react-aria-color-slider-track-background)]", "forced-color-adjust-none");
+export const colorFieldClass = "flex flex-col gap-1.5";
+export const colorFieldInputClass = cn("min-h-10 w-full rounded-[var(--kp-radius-md)] border bg-surface px-3", "font-mono text-sm tabular-nums outline-none", "transition-[border-color,box-shadow]", "duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)]", "focus-visible:ring-2 focus-visible:ring-ring/30");
+export const colorSwatchPickerClass = "flex flex-wrap gap-2";
+export const colorSwatchItemClass = cn("inline-flex min-h-10 min-w-10 items-center justify-center rounded-[var(--kp-radius-sm)]", "outline-none transition-[transform,box-shadow]", "duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)]", "data-[selected]:ring-2 data-[selected]:ring-ring", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring", "data-[pressed]:scale-[0.96]");
+export const colorSwatchClass = cn("size-8 rounded-[var(--kp-radius-sm)] border", "border-[color-mix(in_oklch,var(--kp-foreground)_16%,transparent)]");
+export const colorOklchReadoutClass = "font-mono text-xs tabular-nums text-muted-foreground";
+export const defaultColorPresets = [
+    "#1a6b4a",
+    "#0f766e",
+    "#334155",
+    "#b45309",
+    "#9a3412",
+    "#e7e5e4",
+    "#0c0a09",
+    "#f8fafc",
+];

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

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+export type ColorPickerVariant = "popover" | "inline";
+export type ColorPickerProps = {
+    /** Accessible label for the picker. */
+    label?: ReactNode;
+    description?: ReactNode;
+    errorMessage?: ReactNode;
+    className?: string;
+    /** Popover trigger or always-visible panel. Defaults to "popover". */
+    variant?: ColorPickerVariant;
+    /** Controlled hex value (e.g. "#1a6b4a"). */
+    value?: string;
+    /** Uncontrolled initial hex value. Defaults to "#1a6b4a". */
+    defaultValue?: string;
+    /** Called with a normalized hex string when the color changes. */
+    onChange?: (hex: string) => void;
+    /** Swatch preset hex colors. */
+    presets?: string[];
+    /** Show the alpha channel slider. Defaults to true. */
+    showAlpha?: boolean;
+    /**
+     * Show a read-only OKLCH readout beside hex.
+     * React Aria color spaces are rgb/hsl/hsb; OKLCH is display-only.
+     */
+    showOklch?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    /** Hidden input name for HTML form submission of the hex value. */
+    name?: string;
+};
+export type ColorPickerPanelProps = {
+    showAlpha: boolean;
+    showOklch: boolean;
+    presets: string[];
+    isDisabled?: boolean | undefined;
+};

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

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

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

@@ -0,0 +1,4 @@
+export { ColorPicker } from "./color-picker";
+export type { ColorPickerProps, ColorPickerVariant, } from "./color-picker.types";
+export { hexToOklchDisplay } from "./color-picker.oklch";
+export { defaultColorPresets } from "./color-picker.styles";

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

@@ -0,0 +1,3 @@
+export { ColorPicker } from "./color-picker";
+export { hexToOklchDisplay } from "./color-picker.oklch";
+export { defaultColorPresets } from "./color-picker.styles";

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type ComboBoxProps } from "react-aria-components";
+type ComboboxProps = Omit<ComboBoxProps<object>, "children" | "className"> & {
+    children: ReactNode;
+    className?: string | undefined;
+    label?: ReactNode;
+    placeholder?: string;
+};
+export declare function Combobox({ children, className, label, placeholder, ...props }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComboboxItem({ children, id, textValue, }: {
+    children: ReactNode;
+    id: string;
+    textValue?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/combobox/combobox.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ComboBox as AriaComboBox, Input, Label, ListBox, ListBoxItem, Popover, } from "react-aria-components";
+import { fieldTriggerClass, menuItemClass, popoverSurfaceClass, } from "../../styles/overlays";
+import { cn } from "../../utils/cn";
+export function Combobox({ children, className, label, placeholder = "Search…", ...props }) {
+    return (_jsxs(AriaComboBox, { ...props, className: cn("flex w-full max-w-sm flex-col gap-1.5 text-sm", className), children: [label ? _jsx(Label, { className: "font-medium", children: label }) : null, _jsxs("div", { className: fieldTriggerClass, "data-kp-surface": true, children: [_jsx(Input, { placeholder: placeholder, className: "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground" }), _jsx(Button, { className: "min-h-10 min-w-10 text-muted-foreground outline-none data-[pressed]:scale-[0.96]", children: "\u25BE" })] }), _jsx(Popover, { className: cn(popoverSurfaceClass, "min-w-[var(--trigger-width)]"), "data-kp-surface": true, children: _jsx(ListBox, { className: "outline-none", children: children }) })] }));
+}
+export function ComboboxItem({ children, id, textValue, }) {
+    return (_jsx(ListBoxItem, { id: id, className: menuItemClass, ...(textValue !== undefined ? { textValue } : {}), children: children }));
+}

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

@@ -0,0 +1 @@
+export { Combobox, ComboboxItem } from "./combobox";

package/dist/components/combobox/index.js

@@ -0,0 +1 @@
+export { Combobox, ComboboxItem } from "./combobox";

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

@@ -0,0 +1,4 @@
+import type { CommandPaletteGroupProps, CommandPaletteItemProps, CommandPaletteRecentProps } from "./command-palette.types";
+export declare function CommandPaletteGroup({ children, className, heading, id, }: CommandPaletteGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommandPaletteRecent({ children, className, heading, }: CommandPaletteRecentProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommandPaletteItem({ children, className, icon, id, isDisabled, onAction, shortcut, textValue, }: CommandPaletteItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Header, Keyboard, MenuItem as AriaMenuItem, MenuSection, Text, } from "react-aria-components";
+import { commandGroupClass, commandGroupHeadingClass, commandItemClass, commandItemIconClass, commandItemLabelClass, commandShortcutClass, } from "./command-palette.styles";
+export function CommandPaletteGroup({ children, className, heading, id, }) {
+    return (_jsxs(MenuSection, { className: commandGroupClass(className), ...(id !== undefined ? { id } : {}), children: [_jsx(Header, { className: commandGroupHeadingClass, children: heading }), children] }));
+}
+export function CommandPaletteRecent({ children, className, heading = "Recent", }) {
+    return (_jsx(CommandPaletteGroup, { heading: heading, id: "kp-command-recent", ...(className !== undefined ? { className } : {}), children: children }));
+}
+export function CommandPaletteItem({ children, className, icon, id, isDisabled, onAction, shortcut, textValue, }) {
+    const resolvedText = textValue ?? (typeof children === "string" ? children : undefined);
+    return (_jsxs(AriaMenuItem, { id: id, className: commandItemClass(className), ...(resolvedText !== undefined ? { textValue: resolvedText } : {}), ...(isDisabled !== undefined ? { isDisabled } : {}), ...(onAction !== undefined ? { onAction } : {}), children: [_jsxs("span", { className: commandItemLabelClass, children: [icon ? _jsx("span", { className: commandItemIconClass, children: icon }) : null, _jsx(Text, { slot: "label", children: children })] }), shortcut ? (_jsx(Keyboard, { className: commandShortcutClass, children: shortcut })) : null] }));
+}

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { CommandPaletteGroup, CommandPaletteItem, CommandPaletteRecent } from "./command-palette-items";
+import type { CommandPaletteInputProps, CommandPaletteListProps, CommandPaletteProps, CommandPaletteTriggerProps } from "./command-palette.types";
+export { CommandPaletteGroup, CommandPaletteItem, CommandPaletteRecent, };
+export declare function CommandPaletteTrigger(props: CommandPaletteTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommandPalette({ children, className, "aria-label": ariaLabel, }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommandPaletteInput({ "aria-label": ariaLabel, autoFocus, className, placeholder, }: CommandPaletteInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommandPaletteList({ "aria-label": ariaLabel, children, className, emptyLabel, isLoading, }: CommandPaletteListProps): import("react/jsx-runtime").JSX.Element;
+/** Presentational empty slot for custom empty UI outside Menu filtering. */
+export declare function CommandPaletteEmpty({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CommandPaletteLoading({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import type { UseCommandPaletteHotkeyOptions } from "./command-palette.types";
+/**
+ * Optional global ⌘K / Ctrl+K listener for opening a command palette.
+ * Platform-aware (meta on Apple, ctrl elsewhere). Skips composing IME events.
+ */
+export declare function useCommandPaletteHotkey({ onOpenChange, isEnabled, key, enableOnFormTags, }: UseCommandPaletteHotkeyOptions): void;
+/** Display string for the platform hotkey (⌘K or Ctrl+K). */
+export declare function commandPaletteHotkeyLabel(key?: string): string;

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

@@ -0,0 +1,51 @@
+"use client";
+import { useEffect } from "react";
+function isApplePlatform() {
+    if (typeof navigator === "undefined")
+        return false;
+    const platform = navigator.platform || "";
+    const ua = navigator.userAgent || "";
+    return /Mac|iPhone|iPad|iPod/i.test(platform) || /Mac OS|iPhone|iPad|iPod/i.test(ua);
+}
+function isEditableTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable)
+        return true;
+    const tag = target.tagName;
+    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT")
+        return true;
+    return target.getAttribute("role") === "textbox";
+}
+/**
+ * Optional global ⌘K / Ctrl+K listener for opening a command palette.
+ * Platform-aware (meta on Apple, ctrl elsewhere). Skips composing IME events.
+ */
+export function useCommandPaletteHotkey({ onOpenChange, isEnabled = true, key = "k", enableOnFormTags = true, }) {
+    useEffect(() => {
+        if (!isEnabled)
+            return;
+        const apple = isApplePlatform();
+        const letter = key.toLowerCase();
+        function onKeyDown(event) {
+            if (event.defaultPrevented || event.repeat || event.isComposing)
+                return;
+            if (event.key.toLowerCase() !== letter)
+                return;
+            const modifier = apple ? event.metaKey : event.ctrlKey;
+            if (!modifier || event.altKey)
+                return;
+            if (!enableOnFormTags && isEditableTarget(event.target))
+                return;
+            event.preventDefault();
+            onOpenChange(true);
+        }
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [enableOnFormTags, isEnabled, key, onOpenChange]);
+}
+/** Display string for the platform hotkey (⌘K or Ctrl+K). */
+export function commandPaletteHotkeyLabel(key = "k") {
+    const letter = key.toUpperCase();
+    return isApplePlatform() ? `⌘${letter}` : `Ctrl+${letter}`;
+}

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

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Input, Menu, Modal, ModalOverlay, SearchField, useFilter, } from "react-aria-components";
+import { Spinner } from "../spinner";
+import { CommandPaletteGroup, CommandPaletteItem, CommandPaletteRecent, } from "./command-palette-items";
+import { commandEmptyClass, commandInputClass, commandInputWrapClass, commandListClass, commandLoadingClass, commandOverlayClass, commandPanelClass, } from "./command-palette.styles";
+export { CommandPaletteGroup, CommandPaletteItem, CommandPaletteRecent, };
+export function CommandPaletteTrigger(props) {
+    return _jsx(AriaDialogTrigger, { ...props });
+}
+function SearchGlyph() {
+    return (_jsxs("svg", { viewBox: "0 0 16 16", className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true, children: [_jsx("circle", { cx: "7", cy: "7", r: "4.25", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M10.2 10.2 13.5 13.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
+}
+export function CommandPalette({ children, className, "aria-label": ariaLabel = "Command palette", }) {
+    const { contains } = useFilter({ sensitivity: "base" });
+    return (_jsx(ModalOverlay, { className: commandOverlayClass, isDismissable: true, children: _jsx(Modal, { className: "outline-none", "aria-label": ariaLabel, children: _jsx(AriaDialog, { "aria-label": ariaLabel, className: commandPanelClass(className), "data-kp-surface": true, "data-kp-control": "command-palette", children: _jsx(Autocomplete, { filter: contains, children: children }) }) }) }));
+}
+export function CommandPaletteInput({ "aria-label": ariaLabel = "Search commands", autoFocus = true, className, placeholder = "Type a command…", }) {
+    return (_jsxs(SearchField, { "aria-label": ariaLabel, autoFocus: autoFocus, className: commandInputWrapClass(className), children: [_jsx(SearchGlyph, {}), _jsx(Input, { placeholder: placeholder, className: commandInputClass })] }));
+}
+export function CommandPaletteList({ "aria-label": ariaLabel = "Commands", children, className, emptyLabel = "No commands found.", isLoading = false, }) {
+    if (isLoading) {
+        return (_jsxs("div", { className: commandLoadingClass, role: "status", "aria-live": "polite", children: [_jsx(Spinner, {}), _jsx("span", { children: "Loading commands\u2026" })] }));
+    }
+    return (_jsx(Menu, { "aria-label": ariaLabel, className: commandListClass(className), renderEmptyState: () => (_jsx("div", { className: commandEmptyClass, role: "status", children: emptyLabel })), children: children }));
+}
+/** Presentational empty slot for custom empty UI outside Menu filtering. */
+export function CommandPaletteEmpty({ children }) {
+    return _jsx("div", { className: commandEmptyClass, children: children });
+}
+export function CommandPaletteLoading({ children }) {
+    return (_jsxs("div", { className: commandLoadingClass, role: "status", "aria-live": "polite", children: [_jsx(Spinner, {}), _jsx("span", { children: children ?? "Loading commands…" })] }));
+}

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

@@ -0,0 +1,13 @@
+export declare const commandOverlayClass: string;
+export declare function commandPanelClass(className?: string | undefined): string;
+export declare function commandInputWrapClass(className?: string | undefined): string;
+export declare const commandInputClass: string;
+export declare function commandListClass(className?: string | undefined): string;
+export declare function commandGroupClass(className?: string | undefined): string;
+export declare const commandGroupHeadingClass: string;
+export declare function commandItemClass(className?: string | undefined): string;
+export declare const commandItemLabelClass = "inline-flex min-w-0 items-center gap-2 text-pretty";
+export declare const commandItemIconClass = "inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground";
+export declare const commandShortcutClass: string;
+export declare const commandEmptyClass = "px-3 py-8 text-center text-sm text-muted-foreground text-pretty";
+export declare const commandLoadingClass = "flex items-center justify-center gap-2 px-3 py-8 text-sm text-muted-foreground";

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

@@ -0,0 +1,25 @@
+import { cn } from "../../utils/cn";
+import { menuItemClass } from "../../styles/overlays";
+export const commandOverlayClass = cn("fixed inset-0 z-50 flex items-start justify-center", "bg-[color-mix(in_oklch,var(--kp-foreground)_28%,transparent)]", "px-4 pt-[min(20vh,8rem)]", "transition-[opacity] duration-[var(--kp-motion-duration)]", "ease-[cubic-bezier(0.2,0,0,1)]", "entering:opacity-100 exiting:opacity-0", "data-[entering]:opacity-100 data-[exiting]:opacity-0");
+export function commandPanelClass(className) {
+    return cn("flex w-full max-w-lg flex-col overflow-hidden", "rounded-[var(--kp-radius-panel)] border bg-surface-raised", "shadow-[var(--kp-shadow-surface)] outline-none", "transition-[opacity,transform] duration-[var(--kp-motion-duration)]", "ease-[cubic-bezier(0.2,0,0,1)]", "data-[entering]:opacity-100 data-[entering]:translate-y-0", "data-[exiting]:opacity-0 data-[exiting]:-translate-y-1", "motion-reduce:transition-none motion-reduce:transform-none", className);
+}
+export function commandInputWrapClass(className) {
+    return cn("flex min-h-11 items-center gap-2 border-b px-3", "border-[color-mix(in_oklch,var(--kp-foreground)_12%,transparent)]", className);
+}
+export const commandInputClass = cn("min-w-0 flex-1 bg-transparent py-2.5 text-sm outline-none", "placeholder:text-muted-foreground");
+export function commandListClass(className) {
+    return cn("max-h-[min(50vh,22rem)] overflow-auto p-1.5 outline-none", className);
+}
+export function commandGroupClass(className) {
+    return cn("mt-1 first:mt-0", className);
+}
+export const commandGroupHeadingClass = cn("px-2.5 py-1.5 font-mono text-[10px] uppercase tracking-[0.14em]", "text-muted-foreground");
+export function commandItemClass(className) {
+    return cn(menuItemClass, "min-h-10 justify-between gap-3", "transition-[transform,background-color] duration-[var(--kp-motion-duration)]", "ease-[cubic-bezier(0.2,0,0,1)]", "data-[pressed]:scale-[0.96]", className);
+}
+export const commandItemLabelClass = "inline-flex min-w-0 items-center gap-2 text-pretty";
+export const commandItemIconClass = "inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground";
+export const commandShortcutClass = cn("ms-auto shrink-0 rounded-[var(--kp-radius-sm)] border px-1.5 py-0.5", "border-[color-mix(in_oklch,var(--kp-foreground)_14%,transparent)]", "font-mono text-[10px] tabular-nums text-muted-foreground");
+export const commandEmptyClass = "px-3 py-8 text-center text-sm text-muted-foreground text-pretty";
+export const commandLoadingClass = "flex items-center justify-center gap-2 px-3 py-8 text-sm text-muted-foreground";

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

@@ -0,0 +1,65 @@
+import type { ReactNode } from "react";
+import type { Key } from "react-aria-components";
+export type CommandPaletteTriggerProps = {
+    children: ReactNode;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+};
+export type CommandPaletteProps = {
+    children: ReactNode;
+    className?: string;
+    /** Accessible name for the dialog. Defaults to "Command palette". */
+    "aria-label"?: string;
+};
+export type CommandPaletteInputProps = {
+    className?: string;
+    placeholder?: string;
+    "aria-label"?: string;
+    autoFocus?: boolean;
+};
+export type CommandPaletteListProps = {
+    children: ReactNode;
+    className?: string;
+    /** Shown while async results load. */
+    isLoading?: boolean;
+    /** Empty copy when the filter matches nothing. */
+    emptyLabel?: ReactNode;
+    /** Accessible name for the command list. */
+    "aria-label"?: string;
+};
+export type CommandPaletteGroupProps = {
+    children: ReactNode;
+    heading: ReactNode;
+    className?: string;
+    id?: Key;
+};
+export type CommandPaletteItemProps = {
+    children: ReactNode;
+    id: string;
+    textValue?: string;
+    icon?: ReactNode;
+    shortcut?: ReactNode;
+    isDisabled?: boolean;
+    onAction?: () => void;
+    className?: string;
+};
+export type CommandPaletteRecentProps = {
+    children: ReactNode;
+    heading?: ReactNode;
+    className?: string;
+};
+export type UseCommandPaletteHotkeyOptions = {
+    /** Called with `true` when the hotkey fires. */
+    onOpenChange: (isOpen: boolean) => void;
+    /** Defaults to `true`. */
+    isEnabled?: boolean;
+    /** Letter key, defaults to `"k"`. */
+    key?: string;
+    /**
+     * When `false`, the hotkey is ignored while focus is in an input,
+     * textarea, select, or contenteditable. Defaults to `true` so ⌘/Ctrl+K
+     * still opens from form fields (common command-palette UX).
+     */
+    enableOnFormTags?: boolean;
+};

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

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

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

@@ -0,0 +1,14 @@
+import { CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteLoading, CommandPaletteRecent, CommandPaletteTrigger } from "./command-palette";
+export declare const CommandPaletteRoot: typeof CommandPaletteTrigger & {
+    Content: typeof CommandPalette;
+    Input: typeof CommandPaletteInput;
+    List: typeof CommandPaletteList;
+    Group: typeof CommandPaletteGroup;
+    Item: typeof CommandPaletteItem;
+    Recent: typeof CommandPaletteRecent;
+    Empty: typeof CommandPaletteEmpty;
+    Loading: typeof CommandPaletteLoading;
+};
+export { CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteLoading, CommandPaletteRecent, CommandPaletteTrigger, };
+export { commandPaletteHotkeyLabel, useCommandPaletteHotkey, } from "./command-palette.hotkey";
+export type { CommandPaletteGroupProps, CommandPaletteInputProps, CommandPaletteItemProps, CommandPaletteListProps, CommandPaletteProps, CommandPaletteRecentProps, CommandPaletteTriggerProps, UseCommandPaletteHotkeyOptions, } from "./command-palette.types";

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

@@ -0,0 +1,13 @@
+import { CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteLoading, CommandPaletteRecent, CommandPaletteTrigger, } from "./command-palette";
+export const CommandPaletteRoot = Object.assign(CommandPaletteTrigger, {
+    Content: CommandPalette,
+    Input: CommandPaletteInput,
+    List: CommandPaletteList,
+    Group: CommandPaletteGroup,
+    Item: CommandPaletteItem,
+    Recent: CommandPaletteRecent,
+    Empty: CommandPaletteEmpty,
+    Loading: CommandPaletteLoading,
+});
+export { CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteLoading, CommandPaletteRecent, CommandPaletteTrigger, };
+export { commandPaletteHotkeyLabel, useCommandPaletteHotkey, } from "./command-palette.hotkey";

package/dist/components/data-table/data-table.d.ts

@@ -0,0 +1,7 @@
+import { type ColumnDef } from "@tanstack/react-table";
+export declare function DataTable<T extends object>({ "aria-label": ariaLabel, columns, data, getRowId, }: {
+    "aria-label": string;
+    columns: ColumnDef<T, unknown>[];
+    data: T[];
+    getRowId?: (row: T, index: number) => string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-table/data-table.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
+import { useState } from "react";
+import { Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, } from "../table";
+export function DataTable({ "aria-label": ariaLabel, columns, data, getRowId, }) {
+    const [sorting, setSorting] = useState([]);
+    const table = useReactTable({
+        data,
+        columns,
+        state: { sorting },
+        onSortingChange: setSorting,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        ...(getRowId ? { getRowId } : {}),
+    });
+    const active = sorting[0];
+    return (_jsxs(Table, { "aria-label": ariaLabel, ...(active
+            ? {
+                sortDescriptor: {
+                    column: active.id,
+                    direction: active.desc ? "descending" : "ascending",
+                },
+            }
+            : {}), onSortChange: (descriptor) => setSorting([
+            {
+                id: String(descriptor.column),
+                desc: descriptor.direction === "descending",
+            },
+        ]), children: [_jsx(TableHeader, { children: table.getHeaderGroups()[0]?.headers.map((header) => (_jsx(TableColumn, { id: header.id, isRowHeader: header.index === 0, allowsSorting: header.column.getCanSort(), children: flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row) => (_jsx(TableRow, { id: row.id, children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }));
+}

package/dist/components/data-table/index.d.ts

@@ -0,0 +1 @@
+export { DataTable } from "./data-table";

package/dist/components/data-table/index.js

@@ -0,0 +1 @@
+export { DataTable } from "./data-table";

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

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export declare function DatePicker({ className, label, ...props }: {
+    className?: string | undefined;
+    label?: ReactNode;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, DateInput, DatePicker as AriaDatePicker, DateSegment, Dialog, Group, Heading, Label, Popover, } from "react-aria-components";
+import { fieldTriggerClass, popoverSurfaceClass } from "../../styles/overlays";
+import { cn } from "../../utils/cn";
+export function DatePicker({ className, label = "Date", ...props }) {
+    return (_jsxs(AriaDatePicker, { ...props, className: cn("flex w-full max-w-sm flex-col gap-1.5 text-sm", className), children: [_jsx(Label, { className: "font-medium", children: label }), _jsxs(Group, { className: fieldTriggerClass, "data-kp-surface": true, children: [_jsx(DateInput, { className: "flex flex-1 gap-0.5 tabular-nums outline-none", children: (segment) => (_jsx(DateSegment, { segment: segment, className: "rounded px-0.5 outline-none data-[placeholder]:text-muted-foreground data-[focused]:bg-muted" })) }), _jsx(Button, { className: "min-h-10 min-w-10 rounded-[var(--kp-radius-sm)] text-muted-foreground outline-none data-[pressed]:scale-[0.96] data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring", children: "\u25A2" })] }), _jsx(Popover, { className: cn(popoverSurfaceClass, "p-3"), "data-kp-surface": true, children: _jsx(Dialog, { className: "outline-none", children: _jsxs(Calendar, { className: "text-sm", children: [_jsxs("header", { className: "mb-3 flex items-center justify-between gap-2", children: [_jsx(Button, { slot: "previous", className: "min-h-10 min-w-10 rounded-[var(--kp-radius-sm)] outline-none data-[pressed]:scale-[0.96] data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring", children: "\u2039" }), _jsx(Heading, { className: "text-sm font-semibold" }), _jsx(Button, { slot: "next", className: "min-h-10 min-w-10 rounded-[var(--kp-radius-sm)] outline-none data-[pressed]:scale-[0.96] data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring", children: "\u203A" })] }), _jsxs(CalendarGrid, { className: "w-full border-separate border-spacing-1", children: [_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: "size-9 text-xs font-medium text-muted-foreground", children: day })) }), _jsx(CalendarGridBody, { children: (date) => (_jsx(CalendarCell, { date: date, className: "size-9 rounded-[var(--kp-radius-sm)] text-center outline-none tabular-nums data-[hovered]:bg-muted data-[selected]:bg-accent data-[selected]:text-accent-foreground data-[disabled]:opacity-35 data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring" })) })] })] }) }) })] }));
+}

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

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

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

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

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

@@ -0,0 +1,5 @@
+import type { DateRangePreset, DateRangePresetId } from "./date-range-picker.types";
+export declare function DateRangePickerPopoverBody({ showPresets, presets, }: {
+    showPresets: boolean;
+    presets: DateRangePresetId[] | DateRangePreset[] | undefined;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, DateRangePickerStateContext, Heading, RangeCalendar, } from "react-aria-components";
+import { useContext } from "react";
+import { resolvePresets } from "./date-range-picker.presets";
+import { dateRangeCellClass, dateRangeDialogClass, dateRangeNavButtonClass, dateRangePresetButtonClass, dateRangePresetsClass, } from "./date-range-picker.styles";
+function PresetList({ presets, }) {
+    const state = useContext(DateRangePickerStateContext);
+    const items = resolvePresets(presets);
+    if (items.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: dateRangePresetsClass, role: "list", children: items.map((preset) => (_jsx(Button, { slot: null, className: dateRangePresetButtonClass, onPress: () => {
+                const range = preset.getRange();
+                state?.setValue(range);
+                state?.close();
+            }, children: preset.label }, preset.id))) }));
+}
+export function DateRangePickerPopoverBody({ showPresets, presets, }) {
+    return (_jsxs("div", { className: dateRangeDialogClass, children: [showPresets ? _jsx(PresetList, { presets: presets }) : null, _jsxs(RangeCalendar, { className: "text-sm", children: [_jsxs("header", { className: "mb-3 flex items-center justify-between gap-2", children: [_jsx(Button, { slot: "previous", className: dateRangeNavButtonClass, children: "\u2039" }), _jsx(Heading, { className: "text-sm font-semibold" }), _jsx(Button, { slot: "next", className: dateRangeNavButtonClass, children: "\u203A" })] }), _jsxs(CalendarGrid, { className: "w-full border-separate border-spacing-1", children: [_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: "size-9 text-xs font-medium text-muted-foreground", children: day })) }), _jsx(CalendarGridBody, { children: (date) => (_jsx(CalendarCell, { date: date, className: dateRangeCellClass })) })] })] })] }));
+}

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

@@ -0,0 +1,2 @@
+import type { DateRangePickerProps } from "./date-range-picker.types";
+export declare function DateRangePicker({ className, description, errorMessage, label, presets, showPresets, ...props }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DateInput, DateRangePicker as AriaDateRangePicker, DateSegment, Dialog, FieldError, Group, Label, Popover, Text, } from "react-aria-components";
+import { fieldDescriptionClass, fieldErrorClass, fieldLabelClass, } from "../../styles/field";
+import { DateRangePickerPopoverBody } from "./date-range-picker.calendar";
+import { dateRangeGroupClass, dateRangeInputClass, dateRangePickerClassName, dateRangePopoverClass, dateRangeSegmentClass, dateRangeTriggerClass, } from "./date-range-picker.styles";
+export function DateRangePicker({ className, description, errorMessage, label, presets, showPresets = true, ...props }) {
+    return (_jsxs(AriaDateRangePicker, { ...props, className: dateRangePickerClassName(className), children: [label ? _jsx(Label, { className: fieldLabelClass, children: label }) : null, _jsxs(Group, { className: dateRangeGroupClass, "data-kp-surface": true, children: [_jsx(DateInput, { slot: "start", className: dateRangeInputClass, children: (segment) => (_jsx(DateSegment, { segment: segment, className: dateRangeSegmentClass })) }), _jsx("span", { "aria-hidden": "true", className: "px-0.5 text-muted-foreground", children: "\u2013" }), _jsx(DateInput, { slot: "end", className: dateRangeInputClass, children: (segment) => (_jsx(DateSegment, { segment: segment, className: dateRangeSegmentClass })) }), _jsx(Button, { className: dateRangeTriggerClass, "aria-label": "Open calendar", children: "\u25A2" })] }), description ? (_jsx(Text, { slot: "description", className: fieldDescriptionClass, children: description })) : null, _jsx(FieldError, { className: fieldErrorClass, children: errorMessage }), _jsx(Popover, { className: dateRangePopoverClass, "data-kp-surface": true, children: _jsx(Dialog, { className: "outline-none", "aria-label": "Choose date range", children: _jsx(DateRangePickerPopoverBody, { showPresets: showPresets, presets: presets }) }) })] }));
+}

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

@@ -0,0 +1,3 @@
+import type { DateRangePreset, DateRangePresetId } from "./date-range-picker.types";
+export declare const defaultPresetIds: DateRangePresetId[];
+export declare function resolvePresets(presets: DateRangePresetId[] | DateRangePreset[] | undefined): DateRangePreset[];

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

@@ -0,0 +1,53 @@
+import { endOfMonth, getLocalTimeZone, startOfMonth, today, } from "@internationalized/date";
+const builtin = {
+    today: {
+        id: "today",
+        label: "Today",
+        getRange: () => {
+            const day = today(getLocalTimeZone());
+            return { start: day, end: day };
+        },
+    },
+    "last-7-days": {
+        id: "last-7-days",
+        label: "Last 7 days",
+        getRange: () => {
+            const end = today(getLocalTimeZone());
+            return { start: end.subtract({ days: 6 }), end };
+        },
+    },
+    "last-30-days": {
+        id: "last-30-days",
+        label: "Last 30 days",
+        getRange: () => {
+            const end = today(getLocalTimeZone());
+            return { start: end.subtract({ days: 29 }), end };
+        },
+    },
+    "this-month": {
+        id: "this-month",
+        label: "This month",
+        getRange: () => {
+            const day = today(getLocalTimeZone());
+            return { start: startOfMonth(day), end: endOfMonth(day) };
+        },
+    },
+};
+export const defaultPresetIds = [
+    "today",
+    "last-7-days",
+    "last-30-days",
+    "this-month",
+];
+export function resolvePresets(presets) {
+    if (!presets) {
+        return defaultPresetIds.map((id) => builtin[id]);
+    }
+    if (presets.length === 0) {
+        return [];
+    }
+    if (typeof presets[0] === "string") {
+        return presets.map((id) => builtin[id]);
+    }
+    return presets;
+}

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

@@ -0,0 +1,11 @@
+export declare function dateRangePickerClassName(className?: string | undefined): string;
+export declare const dateRangeGroupClass: string;
+export declare const dateRangeInputClass = "flex flex-1 gap-0.5 tabular-nums outline-none";
+export declare const dateRangeSegmentClass: string;
+export declare const dateRangeTriggerClass: string;
+export declare const dateRangePopoverClass: string;
+export declare const dateRangeDialogClass = "flex flex-col gap-3 outline-none sm:flex-row";
+export declare const dateRangePresetsClass: string;
+export declare const dateRangePresetButtonClass: string;
+export declare const dateRangeNavButtonClass: string;
+export declare const dateRangeCellClass: string;

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

@@ -0,0 +1,14 @@
+import { cn } from "../../utils/cn";
+export function dateRangePickerClassName(className) {
+    return cn("flex w-full max-w-md flex-col gap-1.5 text-sm text-foreground", className);
+}
+export const dateRangeGroupClass = cn("inline-flex min-h-11 w-full items-center gap-1", "rounded-[var(--kp-radius-md)] border bg-surface px-2 text-sm", "shadow-[var(--kp-shadow-surface)] outline-none", "transition-[transform,background-color,border-color]", "duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)]", "data-[disabled]:opacity-45", "data-[focus-within]:ring-2 data-[focus-within]:ring-ring");
+export const dateRangeInputClass = "flex flex-1 gap-0.5 tabular-nums outline-none";
+export const dateRangeSegmentClass = cn("rounded px-0.5 outline-none", "data-[placeholder]:text-muted-foreground", "data-[focused]:bg-muted");
+export const dateRangeTriggerClass = cn("inline-flex min-h-10 min-w-10 items-center justify-center", "rounded-[var(--kp-radius-sm)] text-muted-foreground outline-none", "transition-[transform,color]", "duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)]", "data-[pressed]:scale-[0.96]", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring");
+export const dateRangePopoverClass = cn("overflow-auto rounded-[var(--kp-radius-panel)] border bg-surface-raised p-3", "shadow-[var(--kp-shadow-surface)] outline-none");
+export const dateRangeDialogClass = "flex flex-col gap-3 outline-none sm:flex-row";
+export const dateRangePresetsClass = cn("flex shrink-0 flex-row flex-wrap gap-1 sm:w-36 sm:flex-col");
+export const dateRangePresetButtonClass = cn("inline-flex min-h-10 items-center justify-start rounded-[var(--kp-radius-sm)]", "px-3 text-left text-sm text-foreground outline-none", "transition-[transform,background-color]", "duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)]", "hover:bg-muted data-[pressed]:scale-[0.96]", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring");
+export const dateRangeNavButtonClass = cn("inline-flex min-h-10 min-w-10 items-center justify-center", "rounded-[var(--kp-radius-sm)] outline-none", "transition-[transform]", "duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)]", "data-[pressed]:scale-[0.96]", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring");
+export const dateRangeCellClass = cn("size-9 rounded-[var(--kp-radius-sm)] text-center outline-none tabular-nums", "transition-[background-color,color,transform]", "duration-[var(--kp-motion-duration)] ease-[cubic-bezier(0.2,0,0,1)]", "data-[hovered]:bg-muted", "data-[selected]:bg-[color-mix(in_oklch,var(--kp-accent)_22%,transparent)]", "data-[selected]:text-foreground", "data-[selection-start]:bg-accent data-[selection-start]:text-accent-foreground", "data-[selection-end]:bg-accent data-[selection-end]:text-accent-foreground", "data-[disabled]:opacity-35 data-[unavailable]:opacity-35", "data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring", "data-[pressed]:scale-[0.96]");