@godxjp/ui 13.9.3 → 13.10.0

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

@@ -0,0 +1,219 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import { Button } from "../general/button";
+import { Input } from "./input";
+function decimalsOf(n) {
+  if (!Number.isFinite(n)) return 0;
+  const s = String(n);
+  const dot = s.indexOf(".");
+  return dot === -1 ? 0 : s.length - dot - 1;
+}
+function clamp(n, min, max) {
+  let out = n;
+  if (min != null && out < min) out = min;
+  if (max != null && out > max) out = max;
+  return out;
+}
+function roundTo(n, precision) {
+  if (!Number.isFinite(n)) return n;
+  const factor = 10 ** precision;
+  return Math.round((n + Number.EPSILON) * factor) / factor;
+}
+const NumberInput = React.forwardRef(
+  ({
+    value: controlledValue,
+    defaultValue = null,
+    onValueChange,
+    min,
+    max,
+    step = 1,
+    precision,
+    disabled,
+    readOnly,
+    size = "md",
+    placeholder,
+    prefix,
+    suffix,
+    name,
+    id,
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "data-testid": dataTestId
+  }, ref) => {
+    const { t, locale } = useTranslation();
+    const isControlled = controlledValue !== void 0;
+    const [internal, setInternal] = React.useState(defaultValue);
+    const numericValue = isControlled ? controlledValue ?? null : internal;
+    const effectivePrecision = precision ?? decimalsOf(step);
+    const formatter = React.useMemo(
+      () => new Intl.NumberFormat(locale, {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: Math.max(effectivePrecision, 0),
+        useGrouping: false
+      }),
+      [locale, effectivePrecision]
+    );
+    const formatAtRest = React.useCallback(
+      (n) => n == null ? "" : formatter.format(n),
+      [formatter]
+    );
+    const [draft, setDraft] = React.useState(() => formatAtRest(numericValue));
+    const [focused, setFocused] = React.useState(false);
+    React.useEffect(() => {
+      if (focused) return;
+      setDraft(formatAtRest(numericValue));
+    }, [numericValue, focused, formatAtRest]);
+    const commit = React.useCallback(
+      (next) => {
+        const normalized = next == null || Number.isNaN(next) ? null : roundTo(clamp(next, min, max), effectivePrecision);
+        if (!isControlled) setInternal(normalized);
+        onValueChange?.(normalized);
+        if (!focused) setDraft(formatAtRest(normalized));
+        return normalized;
+      },
+      [effectivePrecision, focused, formatAtRest, isControlled, max, min, onValueChange]
+    );
+    const stepBy = React.useCallback(
+      (direction, multiplier = 1) => {
+        const base = numericValue ?? min ?? 0;
+        const next = base + direction * step * multiplier;
+        const committed = commit(next);
+        setDraft(formatAtRest(committed));
+      },
+      [commit, formatAtRest, min, numericValue, step]
+    );
+    const atMin = min != null && numericValue != null && numericValue <= min;
+    const atMax = max != null && numericValue != null && numericValue >= max;
+    const interactive = !disabled && !readOnly;
+    const handleChange = (event) => {
+      const raw = event.target.value;
+      setDraft(raw);
+      if (readOnly) return;
+      const trimmed = raw.trim();
+      if (trimmed === "" || trimmed === "-") {
+        if (trimmed === "") commit(null);
+        return;
+      }
+      const parsed = Number(trimmed);
+      if (Number.isNaN(parsed)) return;
+      if (!isControlled) setInternal(parsed);
+      onValueChange?.(parsed);
+    };
+    const handleBlur = () => {
+      setFocused(false);
+      const trimmed = draft.trim();
+      if (trimmed === "" || trimmed === "-") {
+        commit(null);
+        setDraft(formatAtRest(null));
+        return;
+      }
+      const parsed = Number(trimmed);
+      const committed = commit(Number.isNaN(parsed) ? null : parsed);
+      setDraft(formatAtRest(committed));
+    };
+    const handleKeyDown = (event) => {
+      if (!interactive) return;
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        stepBy(1, event.shiftKey ? 10 : 1);
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        stepBy(-1, event.shiftKey ? 10 : 1);
+      } else if (event.key === "Enter") {
+        const trimmed = draft.trim();
+        const parsed = Number(trimmed);
+        const committed = commit(trimmed === "" || Number.isNaN(parsed) ? null : parsed);
+        setDraft(formatAtRest(committed));
+      }
+    };
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "number-input", "data-size": size, className: cn("ui-number-input", className), children: [
+      prefix != null ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "number-input-prefix",
+          className: "ui-number-input-affix",
+          "aria-hidden": "true",
+          children: prefix
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref,
+          id,
+          name,
+          type: "text",
+          inputMode: "decimal",
+          autoComplete: "off",
+          role: "spinbutton",
+          "data-slot": "number-input-field",
+          "data-testid": dataTestId,
+          className: "ui-number-input-field",
+          value: draft,
+          placeholder,
+          disabled,
+          readOnly,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby,
+          "aria-describedby": ariaDescribedby,
+          "aria-valuenow": numericValue ?? void 0,
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuetext": numericValue != null ? formatAtRest(numericValue) : void 0,
+          onChange: handleChange,
+          onFocus: () => setFocused(true),
+          onBlur: handleBlur,
+          onKeyDown: handleKeyDown
+        }
+      ),
+      suffix != null ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "number-input-suffix",
+          className: "ui-number-input-affix",
+          "aria-hidden": "true",
+          children: suffix
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs("span", { "data-slot": "number-input-steppers", className: "ui-number-input-steppers", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "icon-xs",
+            className: "ui-number-input-step ui-number-input-step-up",
+            tabIndex: -1,
+            disabled: !interactive || atMax,
+            "aria-label": t("ui.numberInput.increment"),
+            onClick: () => stepBy(1),
+            children: /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "icon-xs",
+            className: "ui-number-input-step ui-number-input-step-down",
+            tabIndex: -1,
+            disabled: !interactive || atMin,
+            "aria-label": t("ui.numberInput.decrement"),
+            onClick: () => stepBy(-1),
+            children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" })
+          }
+        )
+      ] })
+    ] });
+  }
+);
+NumberInput.displayName = "NumberInput";
+export {
+  NumberInput
+};

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

@@ -0,0 +1,2 @@
+export { PasswordInput } from "../ui/password-input";
+export type { PasswordInputProps } from "../ui/password-input";

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

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

package/dist/components/data-entry/password-strength.d.ts

@@ -0,0 +1,20 @@
+declare const DEFAULT_PASSWORD_RULES: readonly ["length", "upper", "lower", "number", "symbol"];
+export type PasswordRule = (typeof DEFAULT_PASSWORD_RULES)[number];
+export type PasswordStrengthLabels = {
+    weak: string;
+    fair: string;
+    strong: string;
+};
+export type PasswordStrengthProps = {
+    value: string;
+    rules?: PasswordRule[];
+    showChecklist?: boolean;
+    labels?: PasswordStrengthLabels;
+};
+export type PasswordStrengthReturn = {
+    score: 0 | 1 | 2 | 3 | 4;
+    checks: Record<PasswordRule, boolean>;
+};
+export declare function usePasswordStrength(value: string, rules?: PasswordRule[]): PasswordStrengthReturn;
+export declare function PasswordStrength({ value, rules, showChecklist, labels, }: PasswordStrengthProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/{chunk-VSUYVT2Q.js → components/data-entry/password-strength.js}

@@ -1,63 +1,7 @@
-import { cn } from './chunk-U7N2A7A3.js';
-import * as React2 from 'react';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { cva } from 'class-variance-authority';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import { Check, X } from 'lucide-react';
-
-var toggleVariants = cva("ui-toggle", {
-  variants: {
-    variant: {
-      default: "ui-toggle-default",
-      outline: "ui-toggle-outline"
-    },
-    size: {
-      sm: "ui-toggle-sm",
-      md: "ui-toggle-default-size",
-      lg: "ui-toggle-lg"
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "md"
-  }
-});
-var Toggle = React2.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
-  TogglePrimitive.Root,
-  {
-    ref,
-    "data-slot": "toggle",
-    className: cn(toggleVariants({ variant, size }), className),
-    ...props
-  }
-));
-Toggle.displayName = TogglePrimitive.Root.displayName;
-var ToggleGroup = React2.forwardRef(({ className, variant = "default", size = "default", children, ...props }, ref) => /* @__PURE__ */ jsx(
-  ToggleGroupPrimitive.Root,
-  {
-    ref,
-    "data-slot": "toggle-group",
-    "data-variant": variant,
-    "data-size": size,
-    className: cn("ui-toggle-group", className),
-    ...props,
-    children
-  }
-));
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React2.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
-  ToggleGroupPrimitive.Item,
-  {
-    ref,
-    "data-slot": "toggle-group-item",
-    className: cn(toggleVariants({ variant, size }), className),
-    ...props
-  }
-));
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-var DEFAULT_PASSWORD_RULES = ["length", "upper", "lower", "number", "symbol"];
-var DEFAULT_LABELS = {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, X } from "lucide-react";
+const DEFAULT_PASSWORD_RULES = ["length", "upper", "lower", "number", "symbol"];
+const DEFAULT_LABELS = {
   weak: "Weak",
   fair: "Fair",
   strong: "Strong"
@@ -159,5 +103,7 @@ function labelForRule(rule) {
       return rule;
   }
 }
-
-export { PasswordStrength, Toggle, ToggleGroup, ToggleGroupItem, toggleVariants, usePasswordStrength };
+export {
+  PasswordStrength,
+  usePasswordStrength
+};

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

@@ -1,27 +1,14 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { R as RadioGroupProp } from '../../data-entry.prop-BSUaseKh.js';
-import '@radix-ui/react-checkbox';
-import '@radix-ui/react-slider';
-import '@radix-ui/react-switch';
-import 'react-day-picker';
-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 * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import type { RadioGroupProp } from "../../props/components/data-entry.prop";
+export type { RadioGroupProp, RadioGroupProp as RadioGroupProps, } from "../../props/components/data-entry.prop";
 declare const RadioGroupRoot: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const RadioItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare function RadioGroupOptions({ value, defaultValue, onValueChange, options, orientation, disabled, name, className, children, }: RadioGroupProp): react_jsx_runtime.JSX.Element;
+declare function RadioGroupOptions({ value, defaultValue, onValueChange, options, orientation, disabled, name, className, children, }: RadioGroupProp): import("react/jsx-runtime").JSX.Element;
 /** Single radio — use inside `Radio.Group` / `RadioGroupRoot`, or via `options` API. */
-declare const Radio: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>> & {
+export declare const Radio: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>> & {
     Root: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Group: typeof RadioGroupOptions;
     Item: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 };
-
-export { Radio, RadioGroupOptions as RadioGroup, RadioGroupProp, RadioGroupProp as RadioGroupProps, RadioGroupRoot, RadioItem };
+export { RadioGroupRoot, RadioItem, RadioGroupOptions as RadioGroup };

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

@@ -1,4 +1,93 @@
-export { Radio, RadioGroupOptions as RadioGroup, RadioGroupRoot, RadioItem } from '../../chunk-S2IJKT3D.js';
-import '../../chunk-44YRPSZ7.js';
-import '../../chunk-7PWBC4BY.js';
-import '../../chunk-U7N2A7A3.js';
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Field } from "./field";
+import { choiceGroupClassName } from "./choice-option";
+const RadioGroupRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  RadioGroupPrimitive.Root,
+  {
+    ref,
+    "data-slot": "radio-group",
+    className: cn("ui-choice-group", className),
+    ...props
+  }
+));
+RadioGroupRoot.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  RadioGroupPrimitive.Item,
+  {
+    ref,
+    "data-slot": "radio-group-item",
+    className: cn(
+      "ui-radio focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 shrink-0 shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      RadioGroupPrimitive.Indicator,
+      {
+        "data-slot": "radio-group-indicator",
+        className: "ui-choice-indicator",
+        children: /* @__PURE__ */ jsx(Circle, { className: "ui-radio-icon", "aria-hidden": "true" })
+      }
+    )
+  }
+));
+RadioItem.displayName = RadioGroupPrimitive.Item.displayName;
+function RadioGroupOptions({
+  value,
+  defaultValue,
+  onValueChange,
+  options,
+  orientation = "vertical",
+  disabled,
+  name,
+  className,
+  children
+}) {
+  const reactId = React.useId();
+  if (options && options.length > 0) {
+    return /* @__PURE__ */ jsx(
+      RadioGroupRoot,
+      {
+        value,
+        defaultValue,
+        onValueChange,
+        disabled,
+        name,
+        "data-orientation": orientation,
+        className: choiceGroupClassName(orientation, className),
+        children: options.map((opt, index) => {
+          const id = `${reactId}-${opt.value}-${index}`;
+          return /* @__PURE__ */ jsx(Field, { id, label: opt.label, description: opt.description, children: /* @__PURE__ */ jsx(RadioItem, { id, value: opt.value, disabled: opt.disabled }) }, opt.value);
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    RadioGroupRoot,
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      disabled,
+      name,
+      "data-orientation": orientation,
+      className: choiceGroupClassName(orientation, className),
+      children
+    }
+  );
+}
+const Radio = Object.assign(RadioItem, {
+  Root: RadioGroupRoot,
+  Group: RadioGroupOptions,
+  Item: RadioItem
+});
+export {
+  Radio,
+  RadioGroupOptions as RadioGroup,
+  RadioGroupRoot,
+  RadioItem
+};

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

@@ -0,0 +1,2 @@
+export { Rating } from "../ui/rating";
+export type { RatingProps } from "../ui/rating";

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

@@ -0,0 +1,4 @@
+import { Rating } from "../ui/rating";
+export {
+  Rating
+};

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+interface SearchInputProps {
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    debounce?: number;
+    /** Fires on EVERY keystroke (immediate) — required to keep a controlled `value` responsive. */
+    onValueChange?: (q: string) => void;
+    onSearch: (q: string) => void;
+    label?: React.ReactNode;
+    ariaLabel?: string;
+    className?: string;
+    inputClassName?: string;
+    id?: string;
+    disabled?: boolean;
+}
+export declare function SearchInput({ value: controlledValue, defaultValue, placeholder, debounce, onValueChange, onSearch, label, ariaLabel, className, inputClassName, id, disabled, }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/{chunk-LVLPNKJP.js → components/data-entry/search-input.js}

@@ -1,12 +1,11 @@
-import { Input } from './chunk-K24AQV4R.js';
-import { Label } from './chunk-7PWBC4BY.js';
-import { useTranslation } from './chunk-B6S6LTWT.js';
-import { useDebouncedValue } from './chunk-LFW37FGG.js';
-import { cn } from './chunk-U7N2A7A3.js';
-import * as React from 'react';
-import { Search, X } from 'lucide-react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Search, X } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation";
+import { Input } from "../data-entry/input";
+import { Label } from "../data-entry/label";
+import { cn } from "../../lib/utils";
+import { useDebouncedValue } from "../../lib/hooks";
 function SearchInput({
   value: controlledValue,
   defaultValue = "",
@@ -79,5 +78,6 @@ function SearchInput({
     ] })
   ] });
 }
-
-export { SearchInput };
+export {
+  SearchInput
+};

package/dist/components/data-entry/search-select.d.ts

@@ -0,0 +1,11 @@
+import type { SearchSelectProp } from "../../props/components/data-entry.prop";
+export type { SearchSelectProp, SearchSelectProp as SearchSelectProps, SearchSelectOptionProp, SearchSelectOptionProp as SearchSelectOption, SearchSelectLoadParamsProp, SearchSelectLoadResultProp, } from "../../props/components/data-entry.prop";
+/**
+ * SearchSelect — a searchable single-select combobox with a debounced search box, optional
+ * optgroup-style grouping (`option.group`), and loading/empty states. Drive it EITHER remotely
+ * with `loadOptions({ query, page })` (server search + infinite scroll) OR with a static
+ * `options` array (client-side filter) — the latter supersedes the legacy `Autocomplete`.
+ * Custom per-option rendering via `renderOption` (Ant-Design style). Form-submittable via
+ * `name`; e2e-testable by the trigger's `data-testid` + each option's `${data-testid}-option-${value}`.
+ */
+export declare function SearchSelect({ value: valueProp, defaultValue, onValueChange, options: staticOptions, loadOptions, renderOption, labelRender, selectedLabel, selectedIcon, placeholder, searchPlaceholder, emptyMessage, loadingMessage, clearLabel, clearable, disabled, name, id, className, "data-testid": dataTestId, }: SearchSelectProp): import("react/jsx-runtime").JSX.Element;