@godxjp/ui 13.9.3 → 13.11.0

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

@@ -1,2 +1,40 @@
-export { Switch } from '../../chunk-I7NQ2LIL.js';
-import '../../chunk-U7N2A7A3.js';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cn } from "../../lib/utils";
+const Switch = React.forwardRef(
+  ({ className, size = "md", name, checked, defaultChecked = false, onCheckedChange, ...props }, ref) => {
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
+    const isControlled = checked !== void 0;
+    const isChecked = isControlled ? checked : internalChecked;
+    const handleCheckedChange = (next) => {
+      if (!isControlled) {
+        setInternalChecked(next);
+      }
+      onCheckedChange?.(next);
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: isChecked ? "1" : "0", readOnly: true }) : null,
+      /* @__PURE__ */ jsx(
+        SwitchPrimitive.Root,
+        {
+          ref,
+          "data-slot": "switch",
+          "data-size": size,
+          checked: isChecked,
+          onCheckedChange: handleCheckedChange,
+          className: cn(
+            "peer ui-switch focus-visible:border-ring focus-visible:ring-ring/50 shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "ui-switch-thumb" })
+        }
+      )
+    ] });
+  }
+);
+Switch.displayName = SwitchPrimitive.Root.displayName;
+export {
+  Switch
+};

package/dist/components/data-entry/tag-input.d.ts

@@ -0,0 +1,2 @@
+export { TagInput } from "../ui/tag-input";
+export type { TagInputProps } from "../ui/tag-input";

package/dist/components/data-entry/tag-input.js

@@ -0,0 +1,4 @@
+import { TagInput } from "../ui/tag-input";
+export {
+  TagInput
+};

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

@@ -1,16 +1,13 @@
-import * as React from 'react';
-
-type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+import * as React from "react";
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
     /** Show an inline ✕ (top-end) that clears the field while it holds text (default false). */
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
 };
-declare const Textarea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+export declare const Textarea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
     /** Show an inline ✕ (top-end) that clears the field while it holds text (default false). */
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
 } & React.RefAttributes<HTMLTextAreaElement>>;
-
-export { Textarea, type TextareaProps };

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

@@ -1,5 +1,86 @@
-export { Textarea } from '../../chunk-Q3KUZG4P.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 { X } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import { controlMultilineClass } from "../../lib/control-styles";
+const Textarea = React.forwardRef(
+  ({ className, allowClear = false, onClear, value, defaultValue, onChange, ...props }, ref) => {
+    const { t } = useTranslation();
+    const innerRef = React.useRef(null);
+    const setRefs = React.useCallback(
+      (node) => {
+        innerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const [hasText, setHasText] = React.useState(
+      () => String(value ?? defaultValue ?? "").length > 0
+    );
+    React.useEffect(() => {
+      if (value !== void 0) setHasText(String(value).length > 0);
+    }, [value]);
+    const handleChange = (event) => {
+      if (value === void 0) setHasText(event.target.value.length > 0);
+      onChange?.(event);
+    };
+    const clear = () => {
+      const el = innerRef.current;
+      if (el) {
+        const setter = Object.getOwnPropertyDescriptor(
+          window.HTMLTextAreaElement.prototype,
+          "value"
+        )?.set;
+        setter?.call(el, "");
+        el.dispatchEvent(new Event("input", { bubbles: true }));
+        el.focus();
+      }
+      setHasText(false);
+      onClear?.();
+    };
+    if (!allowClear) {
+      return /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: setRefs,
+          value,
+          defaultValue,
+          onChange,
+          className: cn(controlMultilineClass, className),
+          ...props
+        }
+      );
+    }
+    const showClear = hasText && !props.disabled && !props.readOnly;
+    return /* @__PURE__ */ jsxs("span", { "data-slot": "textarea-affix-wrapper", className: "relative block w-full", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: setRefs,
+          value,
+          defaultValue,
+          onChange: handleChange,
+          className: cn(controlMultilineClass, showClear && "pe-9", className),
+          ...props
+        }
+      ),
+      showClear ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          "aria-label": t("common.clear") ?? "Clear",
+          onClick: clear,
+          className: "text-muted-foreground hover:text-foreground absolute end-2 top-2 inline-flex size-5 items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:opacity-100",
+          children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+        }
+      ) : null
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+export {
+  Textarea
+};

package/dist/components/data-entry/time-input.d.ts

@@ -1,12 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-
+import * as React from "react";
 type TimeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue"> & {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     step?: number;
 };
-declare function TimeInput({ value: controlledValue, defaultValue, onValueChange, placeholder, step, className, name, id, ...props }: TimeInputProps): react_jsx_runtime.JSX.Element;
-
-export { TimeInput, type TimeInputProps };
+export declare function TimeInput({ value: controlledValue, defaultValue, onValueChange, placeholder, step, className, name, id, ...props }: TimeInputProps): import("react/jsx-runtime").JSX.Element;
+export type { TimeInputProps };

package/dist/components/data-entry/time-input.js

@@ -1,3 +1,137 @@
-export { TimeInput } from '../../chunk-R2TXLS7S.js';
-import '../../chunk-5732TWQF.js';
-import '../../chunk-U7N2A7A3.js';
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { isValidHhmm, normalizeHhmm } from "../../lib/datetime";
+function clampStep(step) {
+  if (!step || Number.isNaN(step)) return 1;
+  const parsed = Math.max(1, Math.floor(step));
+  if (!Number.isFinite(parsed)) return 1;
+  return Math.min(59, parsed);
+}
+function applyStep(value, step) {
+  const normalized = normalizeHhmm(value);
+  if (!normalized) return value;
+  const [hourText, minuteText] = normalized.split(":");
+  const hour = Number(hourText);
+  const minute = Number(minuteText);
+  const floored = Math.floor(minute / step) * step;
+  const safeMinute = Math.min(59, Math.max(0, floored));
+  return `${String(hour).padStart(2, "0")}:${String(safeMinute).padStart(2, "0")}`;
+}
+function maskTime(raw) {
+  const digits = raw.replace(/\D/g, "").slice(0, 4);
+  if (digits.length <= 2) return digits;
+  return `${digits.slice(0, 2)}:${digits.slice(2)}`;
+}
+function stepTime(value, deltaMinutes) {
+  const normalized = normalizeHhmm(value) ?? "00:00";
+  const [hourText, minuteText] = normalized.split(":");
+  const total = (Number(hourText) * 60 + Number(minuteText) + deltaMinutes + 24 * 60) % (24 * 60);
+  const hour = Math.floor(total / 60);
+  const minute = total % 60;
+  return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+}
+function TimeInput({
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  placeholder,
+  step = 1,
+  className,
+  name,
+  id,
+  ...props
+}) {
+  const safeStep = clampStep(step);
+  const [internal, setInternal] = React.useState(defaultValue);
+  const [displayValue, setDisplayValue] = React.useState(controlledValue ?? defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue ?? "" : internal;
+  React.useEffect(() => {
+    if (!isControlled) return;
+    setDisplayValue(controlledValue ?? "");
+  }, [controlledValue, isControlled]);
+  React.useEffect(() => {
+    if (isControlled) return;
+    setDisplayValue(internal);
+  }, [internal, isControlled]);
+  const commit = React.useCallback(
+    (next, fromBlur = false) => {
+      const normalized = normalizeHhmm(next);
+      if (!normalized) return;
+      const snapped = applyStep(normalized, safeStep);
+      if (!isControlled) {
+        setInternal(snapped);
+      }
+      if (isValidHhmm(snapped)) {
+        onValueChange?.(snapped);
+        setDisplayValue(snapped);
+      }
+      if (fromBlur && value !== snapped) {
+        onValueChange?.(snapped);
+      }
+    },
+    [isControlled, onValueChange, safeStep, value]
+  );
+  const valid = isValidHhmm(value);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id,
+      name,
+      value: displayValue,
+      "data-slot": "time-input",
+      className: cn("ui-time-input", className),
+      role: "spinbutton",
+      "aria-valuemin": 0,
+      "aria-valuemax": 24 * 60 - 1,
+      "aria-valuenow": valid ? Number(value.slice(0, 2)) * 60 + Number(value.slice(3, 5)) : void 0,
+      "aria-valuetext": valid ? value : void 0,
+      "aria-invalid": displayValue !== "" && !isValidHhmm(displayValue) ? "true" : void 0,
+      placeholder: placeholder ?? "HH:mm",
+      inputMode: "numeric",
+      autoComplete: "off",
+      ...props,
+      onChange: (event) => {
+        const masked = maskTime(event.target.value);
+        setDisplayValue(masked);
+        const normalized = normalizeHhmm(masked);
+        if (normalized) {
+          const snapped = applyStep(normalized, safeStep);
+          if (!isControlled) {
+            setInternal(snapped);
+          }
+          onValueChange?.(snapped);
+          setDisplayValue(snapped);
+        }
+        props.onChange?.(event);
+      },
+      onBlur: (event) => {
+        commit(event.target.value, true);
+        const normalized = normalizeHhmm(event.target.value);
+        if (!normalized) {
+          setDisplayValue(value);
+        }
+        props.onBlur?.(event);
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          commit(event.currentTarget.value, true);
+        } else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+          event.preventDefault();
+          const base = isValidHhmm(displayValue) ? displayValue : value || "00:00";
+          const next = stepTime(base, event.key === "ArrowUp" ? safeStep : -safeStep);
+          setDisplayValue(next);
+          if (!isControlled) {
+            setInternal(next);
+          }
+          onValueChange?.(next);
+        }
+        props.onKeyDown?.(event);
+      }
+    }
+  );
+}
+export {
+  TimeInput
+};

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

@@ -1,19 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { r as TimePickerProp } 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 { TimePickerProp } from "../../props/components/data-entry.prop";
+export type { TimePickerProp, TimePickerProp as TimePickerProps, } from "../../props/components/data-entry.prop";
 /**
  * TimePicker — WAI-ARIA time combobox. The value lives on a real, typeable `HH:mm` `<input>`
  * (24h canonical): form-submittable (give it a `name`), screen-reader friendly, and e2e-testable
@@ -21,6 +7,4 @@ import '../../navigation.prop-CXDaVNaR.js';
  * The column display honours the active `timeFormat` (12h shows 1-12 + AM/PM) while the canonical
  * value remains 24h `HH:mm`.
  */
-declare function TimePicker({ value: controlledValue, defaultValue, onValueChange, placeholder, disabled, className, id, name, minuteStep, allowClear, }: TimePickerProp): react_jsx_runtime.JSX.Element;
-
-export { TimePicker, TimePickerProp, TimePickerProp as TimePickerProps };
+export declare function TimePicker({ value: controlledValue, defaultValue, onValueChange, placeholder, disabled, className, id, name, minuteStep, allowClear, }: TimePickerProp): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,329 @@
-export { TimePicker } from '../../chunk-65RWSIZF.js';
-import '../../chunk-K24AQV4R.js';
-import '../../chunk-XBFUROAY.js';
-import '../../chunk-DY5C44UP.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 { Clock, X } from "lucide-react";
+import { usePickerLocales, useTranslation } from "../../i18n/use-translation";
+import { isValidHhmm, normalizeHhmm } from "../../lib/datetime";
+import { cn } from "../../lib/utils";
+import { Button } from "../general/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover";
+import { Input } from "./input";
+function pad2(n) {
+  return String(n).padStart(2, "0");
+}
+function buildMinutes(step) {
+  const safe = Math.min(60, Math.max(1, step));
+  const items = [];
+  for (let m = 0; m < 60; m += safe) items.push(m);
+  return items;
+}
+function parseHhmm(value) {
+  const normalized = value ? normalizeHhmm(value) : null;
+  if (!normalized) return { hour: 9, minute: 0 };
+  const [h, m] = normalized.split(":").map(Number);
+  return { hour: h, minute: m };
+}
+function to12h(hour24) {
+  const h = hour24 % 12;
+  return h === 0 ? 12 : h;
+}
+function from12h(hour12, meridiem) {
+  const base = hour12 % 12;
+  return meridiem === "pm" ? base + 12 : base;
+}
+function TimeColumn({
+  label,
+  items,
+  selected,
+  formatItem,
+  onSelect
+}) {
+  const listRef = React.useRef(null);
+  React.useEffect(() => {
+    listRef.current?.querySelector('[data-selected="true"]')?.scrollIntoView({ block: "center" });
+  }, [selected]);
+  const moveFocus = (index) => {
+    const options = listRef.current?.querySelectorAll('[role="option"]');
+    options?.[index]?.focus();
+  };
+  const onKeyDown = (e, index) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveFocus(Math.min(items.length - 1, index + 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveFocus(Math.max(0, index - 1));
+        break;
+      case "Home":
+        e.preventDefault();
+        moveFocus(0);
+        break;
+      case "End":
+        e.preventDefault();
+        moveFocus(items.length - 1);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        onSelect(items[index]);
+        break;
+      default:
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-muted-foreground border-b px-1 py-1.5 text-center text-xs font-medium", children: label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: listRef,
+        role: "listbox",
+        "aria-label": label,
+        className: "h-52 [scrollbar-width:thin] [scrollbar-gutter:stable] overflow-y-scroll overscroll-contain p-1",
+        children: items.map((item, index) => {
+          const isSelected = item === selected;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": isSelected,
+              "data-selected": isSelected,
+              tabIndex: isSelected ? 0 : -1,
+              className: cn(
+                "hover:bg-accent flex w-full items-center justify-center rounded-md py-1.5 text-sm tabular-nums transition-colors",
+                isSelected && "bg-primary text-primary-foreground hover:bg-primary/90"
+              ),
+              onClick: () => {
+                onSelect(item);
+              },
+              onKeyDown: (e) => onKeyDown(e, index),
+              children: formatItem(item)
+            },
+            item
+          );
+        })
+      }
+    )
+  ] });
+}
+function TimePickerPanel({ value, minuteStep, use12h, onChange, onDone }) {
+  const { t } = useTranslation();
+  const draftId = React.useId();
+  const { hour, minute } = parseHhmm(value);
+  const minutes = buildMinutes(minuteStep);
+  const snappedMinute = minutes.includes(minute) ? minute : minutes[0];
+  const [draft, setDraft] = React.useState(value);
+  const meridiem = hour >= 12 ? "pm" : "am";
+  React.useEffect(() => {
+    setDraft(value);
+  }, [value]);
+  const commitDraft = () => {
+    const normalized = normalizeHhmm(draft);
+    if (!normalized) return;
+    onChange(normalized);
+    onDone?.();
+  };
+  const commit = (next) => {
+    onChange(next);
+    onDone?.();
+  };
+  const hourItems = use12h ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);
+  const selectedHourItem = use12h ? to12h(hour) : hour;
+  return /* @__PURE__ */ jsxs("div", { className: use12h ? "w-52" : "w-36", children: [
+    /* @__PURE__ */ jsxs("div", { className: "divide-border flex divide-x", children: [
+      /* @__PURE__ */ jsx(
+        TimeColumn,
+        {
+          label: t("dataEntry.timePicker.hour"),
+          items: hourItems,
+          selected: selectedHourItem,
+          formatItem: (h) => use12h ? String(h) : pad2(h),
+          onSelect: (h) => {
+            const hour24 = use12h ? from12h(h, meridiem) : h;
+            onChange(`${pad2(hour24)}:${pad2(snappedMinute)}`);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TimeColumn,
+        {
+          label: t("dataEntry.timePicker.minute"),
+          items: minutes,
+          selected: snappedMinute,
+          formatItem: (m) => pad2(m),
+          onSelect: (m) => {
+            commit(`${pad2(hour)}:${pad2(m)}`);
+          }
+        }
+      ),
+      use12h && /* @__PURE__ */ jsx(
+        TimeColumn,
+        {
+          label: t("dataEntry.timePicker.meridiem"),
+          items: [0, 1],
+          selected: meridiem === "pm" ? 1 : 0,
+          formatItem: (m) => m === 1 ? t("dataEntry.timePicker.pm") : t("dataEntry.timePicker.am"),
+          onSelect: (m) => {
+            const nextMeridiem = m === 1 ? "pm" : "am";
+            const hour24 = from12h(to12h(hour), nextMeridiem);
+            onChange(`${pad2(hour24)}:${pad2(snappedMinute)}`);
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "border-t p-2", children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: draftId,
+        value: draft,
+        onChange: (e) => {
+          setDraft(e.target.value);
+        },
+        inputMode: "numeric",
+        autoComplete: "off",
+        placeholder: t("dataEntry.timePicker.typeLabel"),
+        "aria-label": t("dataEntry.timePicker.typeLabel"),
+        className: "text-center tabular-nums",
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            commitDraft();
+          }
+        },
+        onBlur: () => {
+          const normalized = normalizeHhmm(draft);
+          if (normalized) setDraft(normalized);
+        }
+      }
+    ) })
+  ] });
+}
+function TimePicker({
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  placeholder,
+  disabled,
+  className,
+  id,
+  name,
+  minuteStep = 5,
+  allowClear = true
+}) {
+  const { t } = useTranslation();
+  const { timeFormat } = usePickerLocales();
+  const use12h = timeFormat === "12h";
+  const [open, setOpen] = React.useState(false);
+  const [internal, setInternal] = React.useState(defaultValue ?? "");
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internal;
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.timePicker.placeholder") ?? "hh:mm";
+  const [text, setText] = React.useState(value);
+  React.useEffect(() => {
+    setText(value);
+  }, [value]);
+  const setValue = (next) => {
+    if (!isControlled) setInternal(next);
+    onValueChange?.(next);
+  };
+  const showClear = allowClear && Boolean(value) && !disabled;
+  const clear = () => {
+    setValue("");
+    setText("");
+  };
+  return /* @__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("tabular-nums", showClear ? "pe-16" : "pe-10"),
+        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);
+          const normalized = normalizeHhmm(event.target.value);
+          if (normalized) setValue(normalized);
+        },
+        onBlur: (event) => {
+          const normalized = normalizeHhmm(event.target.value);
+          setText(normalized ?? (isValidHhmm(value) ? 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__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          disabled,
+          tabIndex: -1,
+          "aria-label": t("dataEntry.timePicker.openPicker") ?? "Open time picker",
+          className: "text-muted-foreground absolute inset-y-0 end-0 h-full px-2 hover:bg-transparent",
+          children: /* @__PURE__ */ jsx(Clock, { className: "size-4 shrink-0", "aria-hidden": "true" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          className: "w-auto p-0",
+          align: "end",
+          onOpenAutoFocus: (event) => event.preventDefault(),
+          children: /* @__PURE__ */ jsx(
+            TimePickerPanel,
+            {
+              value: value || "09:00",
+              minuteStep,
+              use12h,
+              onChange: (next) => {
+                setValue(next);
+                setText(next);
+              },
+              onDone: () => {
+                setOpen(false);
+              }
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  TimePicker
+};