@godxjp/ui 5.0.1 → 6.0.0

package/src/components/data-entry/slider.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "../../lib/utils";
+import type { SliderProp } from "../../props/components/data-entry.prop";
+
+export type { SliderProp, SliderProp as SliderProps } from "../../props/components/data-entry.prop";
+
+/** Numeric range slider (Radix Slider). */
+export const Slider = React.forwardRef<React.ComponentRef<typeof SliderPrimitive.Root>, SliderProp>(
+  ({ className, defaultValue, value, min = 0, max = 100, ...props }, ref) => {
+    const values = React.useMemo(
+      () =>
+        Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+      [defaultValue, max, min, value],
+    );
+
+    return (
+      <SliderPrimitive.Root
+        ref={ref}
+        data-slot="slider"
+        className={cn("ui-slider", className)}
+        defaultValue={defaultValue}
+        min={min}
+        max={max}
+        value={value}
+        {...props}
+      >
+        <SliderPrimitive.Track data-slot="slider-track" className="ui-slider-track">
+          <SliderPrimitive.Range data-slot="slider-range" className="ui-slider-range" />
+        </SliderPrimitive.Track>
+        {values.map((_, index) => (
+          <SliderPrimitive.Thumb key={index} data-slot="slider-thumb" className="ui-slider-thumb" />
+        ))}
+      </SliderPrimitive.Root>
+    );
+  },
+);
+Slider.displayName = SliderPrimitive.Root.displayName;

package/src/components/data-entry/switch-field.tsx

@@ -0,0 +1,91 @@
+import { useId, useState } from "react";
+
+import { cn } from "../../lib/utils";
+import type { SwitchFieldProp } from "../../props/components/data-entry.prop";
+import { Label } from "./label";
+import { Switch } from "./switch";
+
+export type {
+  SwitchFieldProp,
+  SwitchFieldProp as SwitchFieldProps,
+} from "../../props/components/data-entry.prop";
+
+/**
+ * Labelled boolean switch for native HTML forms.
+ *
+ * Layout follows the shadcn `field-switch` standard: label (+ helper) on the
+ * left, the switch on the right (horizontal). Composes `Label` + `Switch` and
+ * mirrors a hidden `0`/`1` input so it submits inside an HTML `<form>`.
+ */
+export function SwitchField({
+  id,
+  name,
+  label,
+  required,
+  helper,
+  error,
+  labelAddon,
+  className,
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled,
+  size,
+}: SwitchFieldProp) {
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isControlled = checked !== undefined;
+  const isChecked = isControlled ? checked : internalChecked;
+
+  const helperId = helper && !error ? `${fieldId}-helper` : undefined;
+  const errorId = error ? `${fieldId}-error` : undefined;
+
+  const handleChange = (next: boolean) => {
+    if (!isControlled) {
+      setInternalChecked(next);
+    }
+    onCheckedChange?.(next);
+  };
+
+  return (
+    <div className={cn("ui-stack-sm", className)} data-invalid={error ? true : undefined}>
+      <input type="hidden" name={name} value={isChecked ? "1" : "0"} readOnly />
+      <div className="flex items-center gap-2">
+        <Switch
+          id={fieldId}
+          checked={isChecked}
+          onCheckedChange={handleChange}
+          disabled={disabled}
+          size={size}
+          aria-describedby={errorId ?? helperId}
+          aria-required={required ? true : undefined}
+          aria-invalid={!!error || undefined}
+        />
+        <div className="ui-stack-xs min-w-0">
+          <div className="flex items-center gap-1">
+            <Label htmlFor={fieldId} className="ui-inline-xs">
+              <span>{label}</span>
+              {required && (
+                <span aria-hidden="true" className="text-destructive">
+                  *
+                </span>
+              )}
+            </Label>
+            {labelAddon}
+          </div>
+          {helper && !error ? (
+            <p id={helperId} className="text-muted-foreground text-xs">
+              {helper}
+            </p>
+          ) : null}
+        </div>
+      </div>
+      {error ? (
+        <p id={errorId} role="alert" className="text-destructive text-xs">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/src/components/data-entry/switch.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cn } from "../../lib/utils";
+import type { SwitchProp } from "../../props/components/data-entry.prop";
+
+export type { SwitchProp, SwitchProp as SwitchProps } from "../../props/components/data-entry.prop";
+
+export const Switch = React.forwardRef<React.ComponentRef<typeof SwitchPrimitive.Root>, SwitchProp>(
+  ({ className, size = "default", ...props }, ref) => (
+    <SwitchPrimitive.Root
+      ref={ref}
+      data-slot="switch"
+      data-size={size}
+      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}
+    >
+      <SwitchPrimitive.Thumb data-slot="switch-thumb" className="ui-switch-thumb" />
+    </SwitchPrimitive.Root>
+  ),
+);
+Switch.displayName = SwitchPrimitive.Root.displayName;

package/src/components/data-entry/textarea.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { controlMultilineClass } from "../../lib/control-styles";
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea ref={ref} className={cn(controlMultilineClass, className)} {...props} />
+  ),
+);
+Textarea.displayName = "Textarea";

package/src/components/data-entry/time-picker.tsx

@@ -0,0 +1,214 @@
+import * as React from "react";
+import { Clock } from "lucide-react";
+
+import { useTranslation } from "../../i18n/use-translation";
+import { formatTimeOfDay, 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";
+import type { TimePickerProp } from "../../props/components/data-entry.prop";
+
+export type {
+  TimePickerProp,
+  TimePickerProp as TimePickerProps,
+} from "../../props/components/data-entry.prop";
+
+function pad2(n: number) {
+  return String(n).padStart(2, "0");
+}
+
+function buildMinutes(step: number) {
+  const safe = Math.min(60, Math.max(1, step));
+  const items: number[] = [];
+  for (let m = 0; m < 60; m += safe) items.push(m);
+  return items;
+}
+
+function parseHhmm(value: string | undefined): { hour: number; minute: number } {
+  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 };
+}
+
+interface TimePickerPanelProps {
+  value: string;
+  minuteStep: number;
+  onChange: (value: string) => void;
+  onDone?: () => void;
+}
+
+function TimeColumn({
+  label,
+  items,
+  selected,
+  onSelect,
+}: {
+  label: string;
+  items: number[];
+  selected: number;
+  onSelect: (value: number) => void;
+}) {
+  const listRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    listRef.current?.querySelector('[data-selected="true"]')?.scrollIntoView({ block: "center" });
+  }, [selected]);
+
+  return (
+    <div className="flex min-w-0 flex-1 flex-col">
+      <div className="text-muted-foreground border-b px-1 py-1.5 text-center text-xs font-medium">
+        {label}
+      </div>
+      <div
+        ref={listRef}
+        className="h-52 [scrollbar-width:thin] [scrollbar-gutter:stable] overflow-y-scroll overscroll-contain p-1"
+      >
+        {items.map((item) => (
+          <button
+            key={item}
+            type="button"
+            data-selected={item === selected}
+            className={cn(
+              "hover:bg-accent flex w-full items-center justify-center rounded-md py-1.5 text-sm tabular-nums transition-colors",
+              item === selected && "bg-primary text-primary-foreground hover:bg-primary/90",
+            )}
+            onClick={() => {
+              onSelect(item);
+            }}
+          >
+            {pad2(item)}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function TimePickerPanel({ value, minuteStep, onChange, onDone }: TimePickerPanelProps) {
+  const { t } = useTranslation();
+  const { hour, minute } = parseHhmm(value);
+  const minutes = buildMinutes(minuteStep);
+  const snappedMinute = minutes.includes(minute) ? minute : minutes[0];
+  const [draft, setDraft] = React.useState(value);
+
+  React.useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- keep editable text in sync when controlled value changes.
+    setDraft(value);
+  }, [value]);
+
+  const commitDraft = () => {
+    const normalized = normalizeHhmm(draft);
+    if (!normalized) return;
+    onChange(normalized);
+    onDone?.();
+  };
+
+  const commit = (next: string) => {
+    onChange(next);
+    onDone?.();
+  };
+
+  return (
+    <div className="w-36">
+      <div className="divide-border flex divide-x">
+        <TimeColumn
+          label={t("dataEntry.timePicker.hour")}
+          items={Array.from({ length: 24 }, (_, i) => i)}
+          selected={hour}
+          onSelect={(h) => {
+            onChange(`${pad2(h)}:${pad2(snappedMinute)}`);
+          }}
+        />
+        <TimeColumn
+          label={t("dataEntry.timePicker.minute")}
+          items={minutes}
+          selected={snappedMinute}
+          onSelect={(m) => {
+            commit(`${pad2(hour)}:${pad2(m)}`);
+          }}
+        />
+      </div>
+      <div className="border-t p-2">
+        <Input
+          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);
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function TimePicker({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  placeholder,
+  disabled,
+  className,
+  id,
+  minuteStep = 5,
+}: TimePickerProp) {
+  const { t } = useTranslation();
+  const [open, setOpen] = React.useState(false);
+  const [internal, setInternal] = React.useState(defaultValue ?? "");
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internal;
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.timePicker.placeholder");
+
+  const setValue = (next: string) => {
+    if (!isControlled) setInternal(next);
+    onChange?.(next);
+  };
+
+  const display = value && isValidHhmm(value) ? formatTimeOfDay(value) : value || null;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="outline"
+          disabled={disabled}
+          className={cn(
+            "w-full justify-start text-left font-normal tabular-nums",
+            !display && "text-muted-foreground",
+            className,
+          )}
+        >
+          <Clock className="mr-2 size-4 shrink-0" aria-hidden="true" />
+          {display ?? resolvedPlaceholder}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <TimePickerPanel
+          value={value || "09:00"}
+          minuteStep={minuteStep}
+          onChange={setValue}
+          onDone={() => {
+            setOpen(false);
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/data-entry/transfer.tsx

@@ -0,0 +1,231 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import { Button } from "../general/button";
+import { ScrollArea } from "../data-display/scroll-area";
+import { Checkbox } from "./checkbox";
+import { SearchInput } from "./search-input";
+import { reactNodeText } from "./tree-utils";
+import type { TransferItemProp, TransferProp } from "../../props/components/data-entry.prop";
+
+export type {
+  TransferProp,
+  TransferProp as TransferProps,
+  TransferItemProp,
+} from "../../props/components/data-entry.prop";
+
+function TransferPanel({
+  title,
+  items,
+  selectedKeys,
+  onSelectChange,
+  onSelectAll,
+  showSearch,
+  disabled,
+  searchPlaceholder,
+  emptyText,
+  direction,
+}: {
+  title?: React.ReactNode;
+  items: TransferItemProp[];
+  selectedKeys: string[];
+  onSelectChange: (keys: string[]) => void;
+  onSelectAll: (checked: boolean) => void;
+  showSearch?: boolean;
+  disabled?: boolean;
+  searchPlaceholder: string;
+  emptyText: string;
+  direction: "left" | "right";
+}) {
+  const [query, setQuery] = React.useState("");
+  const filtered = React.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter((item) => {
+      const titleMatch = reactNodeText(item.title).toLowerCase().includes(q);
+      const descMatch = item.description
+        ? reactNodeText(item.description).toLowerCase().includes(q)
+        : false;
+      return titleMatch || descMatch;
+    });
+  }, [items, query]);
+
+  const enabledItems = filtered.filter((i) => !i.disabled);
+  const allChecked =
+    enabledItems.length > 0 && enabledItems.every((i) => selectedKeys.includes(i.key));
+  const indeterminate = !allChecked && enabledItems.some((i) => selectedKeys.includes(i.key));
+
+  const toggleKey = (key: string, checked: boolean) => {
+    onSelectChange(checked ? [...selectedKeys, key] : selectedKeys.filter((k) => k !== key));
+  };
+
+  return (
+    <div className="bg-background flex min-h-[14rem] flex-1 flex-col rounded-md border">
+      <div className="flex items-center justify-between border-b px-3 py-2 text-sm">
+        <label className="flex cursor-pointer items-center gap-2 font-medium">
+          <Checkbox
+            checked={allChecked ? true : indeterminate ? "indeterminate" : false}
+            disabled={Boolean(disabled) || enabledItems.length === 0}
+            onCheckedChange={(v) => onSelectAll(v === true)}
+            aria-label={direction === "left" ? "Select all source" : "Select all target"}
+          />
+          <span>{title}</span>
+        </label>
+        <span className="text-muted-foreground text-xs">
+          {selectedKeys.length}/{filtered.length}
+        </span>
+      </div>
+      {showSearch && (
+        <div className="border-b p-2">
+          <SearchInput
+            onSearch={setQuery}
+            placeholder={searchPlaceholder}
+            ariaLabel={searchPlaceholder}
+            debounce={0}
+            className={disabled ? "pointer-events-none opacity-50" : undefined}
+          />
+        </div>
+      )}
+      <ScrollArea className="flex-1">
+        <ul className="p-1">
+          {filtered.length === 0 ? (
+            <li className="text-muted-foreground py-8 text-center text-sm">{emptyText}</li>
+          ) : (
+            filtered.map((item) => (
+              <li key={item.key}>
+                <label
+                  className={cn(
+                    "flex cursor-pointer items-start gap-2 rounded-sm px-2 py-2 text-sm",
+                    "hover:bg-accent hover:text-accent-foreground",
+                    item.disabled && "pointer-events-none opacity-50",
+                  )}
+                >
+                  <Checkbox
+                    checked={selectedKeys.includes(item.key)}
+                    disabled={Boolean(disabled) || Boolean(item.disabled)}
+                    onCheckedChange={(v) => toggleKey(item.key, v === true)}
+                    className="mt-0.5"
+                  />
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate font-medium">{item.title}</span>
+                    {item.description && (
+                      <span className="text-muted-foreground block truncate text-xs">
+                        {item.description}
+                      </span>
+                    )}
+                  </span>
+                </label>
+              </li>
+            ))
+          )}
+        </ul>
+      </ScrollArea>
+    </div>
+  );
+}
+
+export function Transfer({
+  dataSource,
+  targetKeys,
+  onChange,
+  titles,
+  showSearch,
+  oneWay,
+  disabled,
+  className,
+  selectedKeys: selectedKeysProp,
+  onSelectChange,
+}: TransferProp) {
+  const { t } = useTranslation();
+  const [internalSelected, setInternalSelected] = React.useState<[string[], string[]]>([[], []]);
+  const selected: [string[], string[]] = selectedKeysProp ?? internalSelected;
+
+  const sourceItems = dataSource.filter((item) => !targetKeys.includes(item.key));
+  const targetItems = dataSource.filter((item) => targetKeys.includes(item.key));
+
+  const setSelected = (side: 0 | 1, keys: string[]) => {
+    const next: [string[], string[]] = side === 0 ? [keys, selected[1]] : [selected[0], keys];
+    if (selectedKeysProp) onSelectChange?.(next[0], next[1]);
+    else setInternalSelected(next);
+  };
+
+  const move = (direction: "right" | "left") => {
+    const fromSide = direction === "right" ? 0 : 1;
+    const keys = selected[fromSide];
+    if (!keys.length) return;
+
+    const nextTarget =
+      direction === "right"
+        ? [...targetKeys, ...keys.filter((k) => !targetKeys.includes(k))]
+        : targetKeys.filter((k) => !keys.includes(k));
+
+    onChange?.(nextTarget, direction, keys);
+    const cleared: [string[], string[]] = fromSide === 0 ? [[], selected[1]] : [selected[0], []];
+    if (selectedKeysProp) onSelectChange?.(cleared[0], cleared[1]);
+    else setInternalSelected(cleared);
+  };
+
+  const leftTitle = titles?.[0] ?? t("dataEntry.transfer.source");
+  const rightTitle = titles?.[1] ?? t("dataEntry.transfer.target");
+
+  return (
+    <div className={cn("flex flex-wrap items-stretch gap-3", className)}>
+      <TransferPanel
+        direction="left"
+        title={leftTitle}
+        items={sourceItems}
+        selectedKeys={selected[0]}
+        onSelectChange={(keys) => setSelected(0, keys)}
+        onSelectAll={(checked) =>
+          setSelected(0, checked ? sourceItems.filter((i) => !i.disabled).map((i) => i.key) : [])
+        }
+        showSearch={showSearch}
+        disabled={disabled}
+        searchPlaceholder={t("dataEntry.transfer.searchPlaceholder")}
+        emptyText={t("dataEntry.transfer.empty")}
+      />
+
+      <div className="flex flex-col justify-center gap-2">
+        <Button
+          type="button"
+          size="icon"
+          variant="outline"
+          disabled={Boolean(disabled) || selected[0].length === 0}
+          aria-label={t("dataEntry.transfer.moveRight")}
+          onClick={() => move("right")}
+        >
+          <ChevronRight className="size-4" aria-hidden="true" />
+        </Button>
+        {!oneWay && (
+          <Button
+            type="button"
+            size="icon"
+            variant="outline"
+            disabled={Boolean(disabled) || selected[1].length === 0}
+            aria-label={t("dataEntry.transfer.moveLeft")}
+            onClick={() => move("left")}
+          >
+            <ChevronLeft className="size-4" aria-hidden="true" />
+          </Button>
+        )}
+      </div>
+
+      <TransferPanel
+        direction="right"
+        title={rightTitle}
+        items={targetItems}
+        selectedKeys={selected[1]}
+        onSelectChange={(keys) => setSelected(1, keys)}
+        onSelectAll={(checked) =>
+          setSelected(1, checked ? targetItems.filter((i) => !i.disabled).map((i) => i.key) : [])
+        }
+        showSearch={showSearch}
+        disabled={disabled}
+        searchPlaceholder={t("dataEntry.transfer.searchPlaceholder")}
+        emptyText={t("dataEntry.transfer.empty")}
+      />
+    </div>
+  );
+}

package/src/components/data-entry/tree-select-strategy.ts

@@ -0,0 +1,6 @@
+/** Ant Design `showCheckedStrategy` equivalents for TreeSelect. */
+export const SHOW_CHILD = "SHOW_CHILD" as const;
+export const SHOW_PARENT = "SHOW_PARENT" as const;
+export const SHOW_ALL = "SHOW_ALL" as const;
+
+export type ShowCheckedStrategy = typeof SHOW_CHILD | typeof SHOW_PARENT | typeof SHOW_ALL;