@godxjp/ui 6.0.0 → 6.0.2

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

@@ -1,38 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,214 +0,0 @@
-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

@@ -1,231 +0,0 @@
-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

@@ -1,6 +0,0 @@
-/** 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;