@godxjp/ui 13.9.3 → 13.11.0

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

@@ -1,6 +1,75 @@
-export { ColorPicker } from '../../chunk-ION2KFXK.js';
-import '../../chunk-K24AQV4R.js';
-import '../../chunk-B4K4BXEF.js';
-import '../../chunk-B6S6LTWT.js';
-import '../../chunk-5732TWQF.js';
-import '../../chunk-U7N2A7A3.js';
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import { controlIconClass } from "../../lib/control-styles";
+import { Input } from "./input";
+const HEX_PATTERN = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+function normalizeHex(value) {
+  if (!value.startsWith("#")) return `#${value}`;
+  return value;
+}
+function ColorPicker({
+  value = "#2563eb",
+  onValueChange,
+  disabled,
+  className,
+  id,
+  showHexInput = true
+}) {
+  const { t } = useTranslation();
+  const [draft, setDraft] = React.useState(null);
+  const display = draft ?? value;
+  const commit = (next) => {
+    const normalized = normalizeHex(next);
+    if (!HEX_PATTERN.test(normalized)) {
+      setDraft(null);
+      return;
+    }
+    setDraft(null);
+    onValueChange?.(normalized);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("ui-color-picker", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("ui-color-picker-swatch", controlIconClass), children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "ui-color-picker-preview",
+          style: { backgroundColor: HEX_PATTERN.test(display) ? display : value },
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type: "color",
+          value: HEX_PATTERN.test(display) ? display : value,
+          disabled,
+          onChange: (event) => commit(event.target.value),
+          className: "ui-color-picker-input",
+          "aria-label": t("dataEntry.colorPicker.ariaLabel")
+        }
+      )
+    ] }),
+    showHexInput && /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: id ? `${id}-hex` : void 0,
+        value: display,
+        disabled,
+        "aria-label": t("dataEntry.colorPicker.hexLabel"),
+        onChange: (event) => setDraft(event.target.value),
+        onBlur: () => commit(display),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") commit(display);
+        },
+        className: "ui-color-picker-hex",
+        spellCheck: false
+      }
+    )
+  ] });
+}
+export {
+  ColorPicker
+};

package/dist/components/data-entry/command.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
-
-declare const Command: React.ForwardRefExoticComponent<Omit<{
+import * as React from "react";
+export declare const Command: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
@@ -17,7 +16,7 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
     disablePointerSelection?: boolean;
     vimBindings?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+export declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
@@ -25,7 +24,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-declare const CommandList: React.ForwardRefExoticComponent<Omit<{
+export declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
@@ -34,14 +33,14 @@ declare const CommandList: React.ForwardRefExoticComponent<Omit<{
 }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
+export declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
 }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
+export declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
@@ -52,7 +51,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     value?: string;
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
+export declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
@@ -65,5 +64,3 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     keywords?: string[];
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-
-export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList };

package/dist/components/data-entry/command.js

@@ -1,3 +1,51 @@
-export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../../chunk-2RGPEFAW.js';
-import '../../chunk-B4K4BXEF.js';
-import '../../chunk-U7N2A7A3.js';
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { controlIconLeadingClass } from "../../lib/control-styles";
+const Command = React.forwardRef(({ className, ...props }, ref) => {
+  const rootRef = React.useRef(null);
+  const setRefs = (node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  React.useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const label = root.querySelector(":scope > label[cmdk-label]");
+    if (!label || root.querySelector("[cmdk-input]")) return;
+    const expectedId = label.getAttribute("for");
+    const input = root.querySelector('input:not([type="hidden"])');
+    if (input && expectedId && !input.id) input.id = expectedId;
+    else if (!input || input.id !== expectedId) label.removeAttribute("for");
+  });
+  return /* @__PURE__ */ jsx(CommandPrimitive, { ref: setRefs, className: cn("ui-command", className), ...props });
+});
+Command.displayName = CommandPrimitive.displayName;
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => (
+  // cmdk uses this non-standard attribute for input wrapper styling
+  // eslint-disable-next-line react/no-unknown-property -- cmdk convention
+  /* @__PURE__ */ jsxs("div", { className: "ui-command-input-wrapper", "cmdk-input-wrapper": "", children: [
+    /* @__PURE__ */ jsx(Search, { className: cn(controlIconLeadingClass, "ui-command-search-icon"), "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(CommandPrimitive.Input, { ref, className: cn("ui-command-input", className), ...props })
+  ] })
+));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(CommandPrimitive.List, { ref, className: cn("ui-command-list", className), ...props }));
+CommandList.displayName = CommandPrimitive.List.displayName;
+const CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(CommandPrimitive.Empty, { ref, className: "ui-command-empty", ...props }));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(CommandPrimitive.Group, { ref, className: cn("ui-command-group", className), ...props }));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(CommandPrimitive.Item, { ref, className: cn("ui-command-item", className), ...props }));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+export {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+};

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

@@ -1,25 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { D as DatePickerProp } from '../../data-entry.prop-BSUaseKh.js';
-import '@radix-ui/react-checkbox';
-import '@radix-ui/react-radio-group';
-import '@radix-ui/react-slider';
-import '@radix-ui/react-switch';
-import 'react-day-picker';
-import 'react';
-import '../../shared.prop-BvMSLFJ6.js';
-import '../../content.prop-DrV_zDy-.js';
-import '../../layout.prop-CXvl2rVR.js';
-import '../../interaction.prop-DD46aTro.js';
-import '../../data.prop-D0UEEczj.js';
-import '../../layout.prop-fCz-Vlie.js';
-import '../../navigation.prop-CXDaVNaR.js';
-
+import type { DatePickerProp } from "../../props/components/data-entry.prop";
+export type { DatePickerProp, DatePickerProp as DatePickerProps, } from "../../props/components/data-entry.prop";
 /**
  * DatePicker — WAI-ARIA date combobox. A real, typeable `<input>` holds the value as an
  * ISO-8601 `yyyy-MM-dd` string (the international standard): it is form-submittable (give it a
  * `name`), screen-reader friendly, and e2e-testable by simply filling the input. The calendar
  * popover is the visual affordance; typing and the calendar stay in sync.
  */
-declare function DatePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, fromDate, toDate, allowClear, }: DatePickerProp): react_jsx_runtime.JSX.Element;
-
-export { DatePicker, DatePickerProp, DatePickerProp as DatePickerProps };
+export declare function DatePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, fromDate, toDate, allowClear, }: DatePickerProp): import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,153 @@
-export { DatePicker } from '../../chunk-3VFNWVR7.js';
-import '../../chunk-NU2SOVTU.js';
-import '../../chunk-K24AQV4R.js';
-import '../../chunk-XBFUROAY.js';
-import '../../chunk-DY5C44UP.js';
-import '../../chunk-B4K4BXEF.js';
-import '../../chunk-B6S6LTWT.js';
-import '../../chunk-5732TWQF.js';
-import '../../chunk-U7N2A7A3.js';
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CalendarIcon, X } from "lucide-react";
+import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
+import { parseDateInput, toIsoDate } from "../../lib/datetime/parse";
+import { cn } from "../../lib/utils";
+import { Button } from "../general/button";
+import { Input } from "./input";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover";
+import { Calendar } from "./calendar";
+const ISO_HINT = "yyyy-mm-dd";
+function DatePicker({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  placeholder,
+  disabled,
+  className,
+  id,
+  name,
+  locale: localeProp,
+  fromDate,
+  toDate,
+  allowClear = true
+}) {
+  const { t } = useTranslation();
+  const { dayPickerLocale } = usePickerLocales(localeProp);
+  const [open, setOpen] = React.useState(false);
+  const isControlled = React.useRef(valueProp !== void 0).current;
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const value = isControlled ? valueProp : internalValue;
+  const emit = (next) => {
+    if (!isControlled) setInternalValue(next);
+    onValueChange?.(next);
+  };
+  const [text, setText] = React.useState(() => toIsoDate(value));
+  React.useEffect(() => {
+    setText(toIsoDate(value));
+  }, [value]);
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.datePicker.placeholder") ?? ISO_HINT;
+  const showClear = allowClear && Boolean(value) && !disabled;
+  const clear = () => {
+    emit(void 0);
+    setText("");
+  };
+  const commit = (raw) => {
+    const trimmed = raw.trim();
+    if (trimmed === "") {
+      emit(void 0);
+      return;
+    }
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(trimmed)) return;
+    const parsed = parseDateInput(trimmed);
+    if (parsed) {
+      emit(parsed);
+    }
+  };
+  return /* @__PURE__ */ jsx(Popover, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id,
+        name,
+        value: text,
+        disabled,
+        placeholder: resolvedPlaceholder,
+        inputMode: "numeric",
+        autoComplete: "off",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "dialog",
+        className: cn("pe-10", showClear && "pe-16"),
+        onClick: () => {
+          if (!disabled) setOpen(true);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setOpen(true);
+          } else if (event.key === "Escape" && open) {
+            setOpen(false);
+          }
+        },
+        onChange: (event) => {
+          setText(event.target.value);
+          commit(event.target.value);
+        },
+        onBlur: (event) => {
+          const parsed = parseDateInput(event.target.value.trim());
+          setText(parsed ? toIsoDate(parsed) : toIsoDate(value));
+        }
+      }
+    ),
+    showClear ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        disabled,
+        tabIndex: -1,
+        "aria-label": t("common.clear") ?? "Clear",
+        className: "text-muted-foreground absolute inset-y-0 end-8 h-full px-2 hover:bg-transparent",
+        onClick: clear,
+        children: /* @__PURE__ */ jsx(X, { className: "size-4 shrink-0", "aria-hidden": "true" })
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        disabled,
+        tabIndex: -1,
+        "aria-label": t("dataEntry.datePicker.openCalendar") ?? "Open calendar",
+        className: "text-muted-foreground absolute inset-y-0 end-0 h-full px-2 hover:bg-transparent",
+        children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0", "aria-hidden": "true" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: "w-auto p-0",
+        align: "start",
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "single",
+            selected: value,
+            defaultMonth: value,
+            onSelect: (date) => {
+              emit(date);
+              setText(toIsoDate(date));
+              setOpen(false);
+            },
+            locale: dayPickerLocale,
+            disabled: [
+              ...fromDate ? [{ before: fromDate }] : [],
+              ...toDate ? [{ after: toDate }] : []
+            ],
+            startMonth: fromDate,
+            endMonth: toDate
+          }
+        )
+      }
+    )
+  ] }) }) });
+}
+export {
+  DatePicker
+};

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

@@ -1,19 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { f as DateRangePickerProp } from '../../data-entry.prop-BSUaseKh.js';
-import '@radix-ui/react-checkbox';
-import '@radix-ui/react-radio-group';
-import '@radix-ui/react-slider';
-import '@radix-ui/react-switch';
-import 'react-day-picker';
-import 'react';
-import '../../shared.prop-BvMSLFJ6.js';
-import '../../content.prop-DrV_zDy-.js';
-import '../../layout.prop-CXvl2rVR.js';
-import '../../interaction.prop-DD46aTro.js';
-import '../../data.prop-D0UEEczj.js';
-import '../../layout.prop-fCz-Vlie.js';
-import '../../navigation.prop-CXDaVNaR.js';
-
+import type { DateRangePickerProp } from "../../props/components/data-entry.prop";
+export type { DateRangePickerProp, DateRangePickerProp as DateRangePickerProps, } from "../../props/components/data-entry.prop";
 /**
  * DateRangePicker — WAI-ARIA date-range combobox rendered as ONE input-styled control
  * (Ant Design RangePicker convention): `[ from → to  ✕ 📅 ]`. The two inner fields stay
@@ -21,6 +7,4 @@ import '../../navigation.prop-CXDaVNaR.js';
  * `${name}_to`, screen-reader friendly, e2e-testable by filling either input); the
  * range calendar is the visual affordance.
  */
-declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, fromDate, toDate, allowClear, }: DateRangePickerProp): react_jsx_runtime.JSX.Element;
-
-export { DateRangePicker, DateRangePickerProp, DateRangePickerProp as DateRangePickerProps };
+export declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, fromDate, toDate, allowClear, }: DateRangePickerProp): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,191 @@
-export { DateRangePicker } from '../../chunk-YXVJFYQE.js';
-import '../../chunk-NU2SOVTU.js';
-import '../../chunk-XBFUROAY.js';
-import '../../chunk-DY5C44UP.js';
-import '../../chunk-B4K4BXEF.js';
-import '../../chunk-B6S6LTWT.js';
-import '../../chunk-5732TWQF.js';
-import '../../chunk-U7N2A7A3.js';
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowRight, CalendarIcon, X } from "lucide-react";
+import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
+import { parseDateInput, toIsoDate } from "../../lib/datetime";
+import { cn } from "../../lib/utils";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover";
+import { Calendar } from "./calendar";
+const ISO_HINT = "yyyy-mm-dd";
+function DateRangePicker({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  placeholder,
+  disabled,
+  className,
+  id,
+  name,
+  locale: localeProp,
+  fromDate,
+  toDate,
+  allowClear = true
+}) {
+  const { t } = useTranslation();
+  const { dayPickerLocale } = usePickerLocales(localeProp);
+  const [open, setOpen] = React.useState(false);
+  const autoId = React.useId();
+  const fromId = id ?? autoId;
+  const toId = `${fromId}-to`;
+  const isControlled = React.useRef(valueProp !== void 0).current;
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const value = isControlled ? valueProp : internalValue;
+  const [fromText, setFromText] = React.useState(() => toIsoDate(value?.from));
+  const [toText, setToText] = React.useState(() => toIsoDate(value?.to));
+  React.useEffect(() => {
+    setFromText(toIsoDate(value?.from));
+    setToText(toIsoDate(value?.to));
+  }, [value?.from, value?.to]);
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.dateRangePicker.placeholder") ?? ISO_HINT;
+  const emit = (next) => {
+    if (!isControlled) setInternalValue(next);
+    onValueChange?.(next);
+  };
+  const showClear = allowClear && Boolean(value?.from || value?.to) && !disabled;
+  const clear = () => {
+    emit(void 0);
+    setFromText("");
+    setToText("");
+  };
+  const commitEdge = (edge, raw) => {
+    const trimmed = raw.trim();
+    if (trimmed !== "" && !/^\d{4}-\d{2}-\d{2}$/.test(trimmed)) return;
+    const parsed = trimmed === "" ? void 0 : parseDateInput(trimmed) ?? void 0;
+    const next = { from: value?.from, to: value?.to, [edge]: parsed };
+    emit(next.from || next.to ? next : void 0);
+  };
+  const sharedKeyHandlers = {
+    onKeyDown: (event) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setOpen(true);
+      } else if (event.key === "Escape" && open) {
+        setOpen(false);
+      }
+    }
+  };
+  const innerInputClass = "min-w-0 flex-1 bg-transparent tabular-nums outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed";
+  return /* @__PURE__ */ jsx(Popover, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        // One input-styled shell for the whole range — mirrors Input's control
+        // tokens (border/radius/ring) so it reads as a single form field.
+        "ui-control border-input bg-background flex w-full min-w-0 items-center gap-2 rounded-md border px-3 shadow-xs transition-[color,box-shadow] outline-none",
+        "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+        open && "border-ring ring-ring/50 ring-[3px]",
+        disabled && "pointer-events-none cursor-not-allowed opacity-50",
+        className
+      ),
+      onClick: () => {
+        if (!disabled) setOpen(true);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: fromId,
+            name: name ? `${name}_from` : void 0,
+            value: fromText,
+            disabled,
+            placeholder: resolvedPlaceholder,
+            inputMode: "numeric",
+            autoComplete: "off",
+            "aria-label": t("dataEntry.dateRangePicker.from") ?? "From",
+            className: innerInputClass,
+            ...sharedKeyHandlers,
+            onChange: (event) => {
+              setFromText(event.target.value);
+              commitEdge("from", event.target.value);
+            },
+            onBlur: (event) => {
+              const parsed = parseDateInput(event.target.value.trim());
+              setFromText(parsed ? toIsoDate(parsed) : toIsoDate(value?.from));
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(ArrowRight, { className: "text-muted-foreground size-3.5 shrink-0", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: toId,
+            name: name ? `${name}_to` : void 0,
+            value: toText,
+            disabled,
+            placeholder: resolvedPlaceholder,
+            inputMode: "numeric",
+            autoComplete: "off",
+            "aria-label": t("dataEntry.dateRangePicker.to") ?? "To",
+            className: innerInputClass,
+            ...sharedKeyHandlers,
+            onChange: (event) => {
+              setToText(event.target.value);
+              commitEdge("to", event.target.value);
+            },
+            onBlur: (event) => {
+              const parsed = parseDateInput(event.target.value.trim());
+              setToText(parsed ? toIsoDate(parsed) : toIsoDate(value?.to));
+            }
+          }
+        ),
+        showClear ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-label": t("common.clear") ?? "Clear",
+            className: "text-muted-foreground hover:text-foreground shrink-0",
+            onClick: (event) => {
+              event.stopPropagation();
+              clear();
+            },
+            children: /* @__PURE__ */ jsx(X, { className: "size-4 shrink-0", "aria-hidden": "true" })
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            tabIndex: -1,
+            "aria-label": t("dataEntry.dateRangePicker.openCalendar") ?? "Open calendar",
+            className: "text-muted-foreground hover:text-foreground shrink-0",
+            children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0", "aria-hidden": "true" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          PopoverContent,
+          {
+            className: "w-auto p-0",
+            align: "start",
+            onOpenAutoFocus: (event) => event.preventDefault(),
+            children: /* @__PURE__ */ jsx(
+              Calendar,
+              {
+                mode: "range",
+                selected: value,
+                defaultMonth: value?.from,
+                numberOfMonths: 2,
+                onSelect: (range) => {
+                  emit(range);
+                  setFromText(toIsoDate(range?.from));
+                  setToText(toIsoDate(range?.to));
+                },
+                locale: dayPickerLocale,
+                disabled: [
+                  ...fromDate ? [{ before: fromDate }] : [],
+                  ...toDate ? [{ after: toDate }] : []
+                ],
+                startMonth: fromDate,
+                endMonth: toDate
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+export {
+  DateRangePicker
+};

package/dist/components/data-entry/field.d.ts

@@ -0,0 +1,4 @@
+import type { FieldProp } from "../../props/components/data-entry.prop";
+export type { FieldProp, FieldProp as FieldProps } from "../../props/components/data-entry.prop";
+/** Label + optional description beside a checkbox/radio/switch control. */
+export declare function Field({ id, label, description, className, children }: FieldProp): import("react/jsx-runtime").JSX.Element;

package/dist/{chunk-44YRPSZ7.js → components/data-entry/field.js}

@@ -1,7 +1,6 @@
-import { Label } from './chunk-7PWBC4BY.js';
-import { cn } from './chunk-U7N2A7A3.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { Label } from "./label";
 function Field({ id, label, description, className, children }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("ui-choice-field", className), children: [
     /* @__PURE__ */ jsx("div", { className: "ui-choice-control", children }),
@@ -11,10 +10,6 @@ function Field({ id, label, description, className, children }) {
     ] })
   ] });
 }
-
-// src/components/data-entry/choice-option.ts
-function choiceGroupClassName(_orientation = "vertical", className) {
-  return cn("ui-choice-group", className);
-}
-
-export { Field, choiceGroupClassName };
+export {
+  Field
+};

package/dist/components/data-entry/form-field.d.ts

@@ -0,0 +1,3 @@
+import type { FormFieldProp } from "../../props/components/data-entry.prop";
+export type { FormFieldProp, FormFieldProp as FormFieldProps, } from "../../props/components/data-entry.prop";
+export declare function FormField({ id, label, required, helper, error, labelAddon, layout: layoutProp, labelWidth: labelWidthProp, controlWidth: controlWidthProp, colSpan, className, children, }: FormFieldProp): import("react/jsx-runtime").JSX.Element;