@godxjp/ui 6.0.0 → 6.0.1

package/dist/chunk-U3GHAOIJ.js

@@ -0,0 +1,299 @@
+import { reactNodeText } from './chunk-SMLKNECP.js';
+import { Checkbox } from './chunk-E76QIYSY.js';
+import { ScrollArea } from './chunk-3KPEZ5CF.js';
+import { Input } from './chunk-VOHTRR5X.js';
+import { Button } from './chunk-HJEBRCXL.js';
+import { Label } from './chunk-7PWBC4BY.js';
+import { useTranslation } from './chunk-3F2AKYRD.js';
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import { Search, X, ChevronRight, ChevronLeft } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function useDebouncedValue(value, delay = 250) {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const t = setTimeout(() => {
+      setDebounced(value);
+    }, delay);
+    return () => {
+      clearTimeout(t);
+    };
+  }, [value, delay]);
+  return debounced;
+}
+function useTimeoutFlag(signal, ms = 2e3) {
+  const [active, setActive] = useState(false);
+  useEffect(() => {
+    if (!signal) {
+      const id = window.setTimeout(() => {
+        setActive(false);
+      }, 0);
+      return () => {
+        clearTimeout(id);
+      };
+    }
+    const showId = window.setTimeout(() => {
+      setActive(true);
+    }, 0);
+    const hideId = window.setTimeout(() => {
+      setActive(false);
+    }, ms);
+    return () => {
+      clearTimeout(showId);
+      clearTimeout(hideId);
+    };
+  }, [signal, ms]);
+  return Boolean(signal) && active;
+}
+function SearchInput({
+  value: controlledValue,
+  defaultValue = "",
+  placeholder,
+  debounce = 250,
+  onSearch,
+  label,
+  ariaLabel,
+  className,
+  inputClassName,
+  id,
+  disabled = false
+}) {
+  const { t } = useTranslation();
+  const isControlled = controlledValue !== void 0;
+  const [internal, setInternal] = React.useState(defaultValue);
+  const value = isControlled ? controlledValue : internal;
+  const debounced = useDebouncedValue(value, debounce);
+  const reactId = React.useId();
+  const inputId = id ?? `search-${reactId}`;
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.searchInput.placeholder");
+  const resolvedAriaLabel = ariaLabel ?? t("common.search");
+  const onSearchRef = React.useRef(onSearch);
+  React.useEffect(() => {
+    onSearchRef.current = onSearch;
+  });
+  React.useEffect(() => {
+    onSearchRef.current(debounced);
+  }, [debounced]);
+  const setValue = (v) => {
+    if (!isControlled) setInternal(v);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("ui-search-input", className), children: [
+    label !== void 0 ? /* @__PURE__ */ jsx(Label, { htmlFor: inputId, className: "ui-search-input-label", children: label }) : /* @__PURE__ */ jsx(Label, { htmlFor: inputId, className: "sr-only", children: resolvedAriaLabel }),
+    /* @__PURE__ */ jsxs("div", { className: "ui-search-input-field", children: [
+      /* @__PURE__ */ jsx(Search, { className: "ui-search-input-icon", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: inputId,
+          type: "text",
+          role: "searchbox",
+          value,
+          onChange: (e) => {
+            setValue(e.target.value);
+          },
+          placeholder: resolvedPlaceholder,
+          "aria-label": resolvedAriaLabel,
+          className: cn(
+            "ui-search-input-control !pr-[var(--search-input-end-padding)] !pl-[var(--search-input-start-padding)]",
+            inputClassName
+          ),
+          disabled
+        }
+      ),
+      value && !disabled && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setValue("");
+          },
+          "aria-label": t("common.clearSearch"),
+          className: "ui-search-input-clear",
+          children: /* @__PURE__ */ jsx(X, {})
+        }
+      )
+    ] })
+  ] });
+}
+function TransferPanel({
+  title,
+  items,
+  selectedKeys,
+  onSelectChange,
+  onSelectAll,
+  showSearch,
+  disabled,
+  searchPlaceholder,
+  emptyText,
+  direction
+}) {
+  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, checked) => {
+    onSelectChange(checked ? [...selectedKeys, key] : selectedKeys.filter((k) => k !== key));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "bg-background flex min-h-[14rem] flex-1 flex-col rounded-md border", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2 text-sm", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-2 font-medium", children: [
+        /* @__PURE__ */ jsx(
+          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"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: title })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs", children: [
+        selectedKeys.length,
+        "/",
+        filtered.length
+      ] })
+    ] }),
+    showSearch && /* @__PURE__ */ jsx("div", { className: "border-b p-2", children: /* @__PURE__ */ jsx(
+      SearchInput,
+      {
+        onSearch: setQuery,
+        placeholder: searchPlaceholder,
+        ariaLabel: searchPlaceholder,
+        debounce: 0,
+        className: disabled ? "pointer-events-none opacity-50" : void 0
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("ul", { className: "p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "text-muted-foreground py-8 text-center text-sm", children: emptyText }) : filtered.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "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"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: selectedKeys.includes(item.key),
+              disabled: Boolean(disabled) || Boolean(item.disabled),
+              onCheckedChange: (v) => toggleKey(item.key, v === true),
+              className: "mt-0.5"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "block truncate font-medium", children: item.title }),
+            item.description && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground block truncate text-xs", children: item.description })
+          ] })
+        ]
+      }
+    ) }, item.key)) }) })
+  ] });
+}
+function Transfer({
+  dataSource,
+  targetKeys,
+  onChange,
+  titles,
+  showSearch,
+  oneWay,
+  disabled,
+  className,
+  selectedKeys: selectedKeysProp,
+  onSelectChange
+}) {
+  const { t } = useTranslation();
+  const [internalSelected, setInternalSelected] = React.useState([[], []]);
+  const selected = selectedKeysProp ?? internalSelected;
+  const sourceItems = dataSource.filter((item) => !targetKeys.includes(item.key));
+  const targetItems = dataSource.filter((item) => targetKeys.includes(item.key));
+  const setSelected = (side, keys) => {
+    const next = side === 0 ? [keys, selected[1]] : [selected[0], keys];
+    if (selectedKeysProp) onSelectChange?.(next[0], next[1]);
+    else setInternalSelected(next);
+  };
+  const move = (direction) => {
+    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 = 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 /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-stretch gap-3", className), children: [
+    /* @__PURE__ */ jsx(
+      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,
+        disabled,
+        searchPlaceholder: t("dataEntry.transfer.searchPlaceholder"),
+        emptyText: t("dataEntry.transfer.empty")
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon",
+          variant: "outline",
+          disabled: Boolean(disabled) || selected[0].length === 0,
+          "aria-label": t("dataEntry.transfer.moveRight"),
+          onClick: () => move("right"),
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+        }
+      ),
+      !oneWay && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon",
+          variant: "outline",
+          disabled: Boolean(disabled) || selected[1].length === 0,
+          "aria-label": t("dataEntry.transfer.moveLeft"),
+          onClick: () => move("left"),
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      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,
+        disabled,
+        searchPlaceholder: t("dataEntry.transfer.searchPlaceholder"),
+        emptyText: t("dataEntry.transfer.empty")
+      }
+    )
+  ] });
+}
+
+export { SearchInput, Transfer, useDebouncedValue, useTimeoutFlag };

package/dist/chunk-U7N2A7A3.js

@@ -0,0 +1,9 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { cn };

package/dist/chunk-UX634MYF.js

@@ -0,0 +1,123 @@
+import { controlTriggerClass } from './chunk-ICM6XBST.js';
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Select(props) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup(props) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue(props) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+var SelectTrigger = React.forwardRef(({ className, children, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    "data-slot": "select-trigger",
+    "data-size": size,
+    className: cn(
+      controlTriggerClass,
+      "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground w-fit gap-2 whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 opacity-50", "aria-hidden": "true" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    "data-slot": "select-scroll-up-button",
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4", "aria-hidden": "true" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    "data-slot": "select-scroll-down-button",
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4", "aria-hidden": "true" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    "data-slot": "select-content",
+    className: cn(
+      "bg-popover text-popover-foreground data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md",
+      position === "popper" && "translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          "data-slot": "select-viewport",
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    "data-slot": "select-label",
+    className: cn("px-2 py-1.5 text-sm font-medium", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Item,
+  {
+    ref,
+    "data-slot": "select-item",
+    className: cn(
+      "focus:bg-accent focus:text-accent-foreground data-[state=checked]:bg-accent data-[state=checked]:text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm px-2.5 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=checked]:font-medium [&_svg]:pointer-events-none [&_svg]:shrink-0",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    "data-slot": "select-separator",
+    className: cn("bg-border -mx-1 my-1 h-px", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/chunk-V6UWJKZF.js

@@ -0,0 +1,28 @@
+import { controlIconLeadingClass } from './chunk-ICM6XBST.js';
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import { Command as Command$1 } from 'cmdk';
+import { Search } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1, { ref, className: cn("ui-command", className), ...props }));
+Command.displayName = Command$1.displayName;
+var 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(Command$1.Input, { ref, className: cn("ui-command-input", className), ...props })
+  ] })
+));
+CommandInput.displayName = Command$1.Input.displayName;
+var CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, { ref, className: cn("ui-command-list", className), ...props }));
+CommandList.displayName = Command$1.List.displayName;
+var CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, { ref, className: "ui-command-empty", ...props }));
+CommandEmpty.displayName = Command$1.Empty.displayName;
+var CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, { ref, className: cn("ui-command-group", className), ...props }));
+CommandGroup.displayName = Command$1.Group.displayName;
+var CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, { ref, className: cn("ui-command-item", className), ...props }));
+CommandItem.displayName = Command$1.Item.displayName;
+
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList };

package/{src/components/data-entry/input.tsx → dist/chunk-VOHTRR5X.js}

@@ -1,15 +1,15 @@
-import * as React from "react";
-import { cn } from "../../lib/utils";
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
-
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => (
-    <input
-      type={type}
-      data-slot="input"
-      ref={ref}
-      className={cn(
+var Input = React.forwardRef(
+  ({ className, type, ...props }, ref) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      ref,
+      className: cn(
         "ui-control border-input bg-background w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm",
         "selection:bg-primary selection:text-primary-foreground",
         "file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
@@ -17,10 +17,12 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-        className,
-      )}
-      {...props}
-    />
-  ),
+        className
+      ),
+      ...props
+    }
+  )
 );
 Input.displayName = "Input";
+
+export { Input };