@godxjp/ui 20.0.0 → 20.1.0

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

@@ -2,10 +2,22 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { Loader2 } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { useFieldIdentity } from "../../lib/field-a11y.js";
 const Switch = React.forwardRef(
-  ({ className, size = "md", name, checked, defaultChecked = false, onCheckedChange, ...props }, ref) => {
+  ({
+    className,
+    size = "md",
+    name,
+    checked,
+    defaultChecked = false,
+    onCheckedChange,
+    loading = false,
+    checkedChildren,
+    unCheckedChildren,
+    ...props
+  }, ref) => {
     const identity = useFieldIdentity({
       id: props.id,
       name,
@@ -16,6 +28,7 @@ const Switch = React.forwardRef(
     const isControlled = checked !== void 0;
     const isChecked = isControlled ? checked : internalChecked;
     const handleCheckedChange = (next) => {
+      if (loading) return;
       if (!isControlled) {
         setInternalChecked(next);
       }
@@ -23,12 +36,15 @@ const Switch = React.forwardRef(
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       resolvedName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value: isChecked ? "1" : "0", readOnly: true }) : null,
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         SwitchPrimitive.Root,
         {
           ref,
           "data-slot": "switch",
           "data-size": size,
+          "data-loading": loading ? "true" : void 0,
+          "aria-busy": loading || void 0,
+          "aria-disabled": loading || void 0,
           checked: isChecked,
           onCheckedChange: handleCheckedChange,
           className: cn(
@@ -42,7 +58,17 @@ const Switch = React.forwardRef(
           ),
           ...props,
           "data-field": identity["data-field"] ?? props["data-field"],
-          children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "ui-switch-thumb" })
+          children: [
+            checkedChildren != null || unCheckedChildren != null ? /* @__PURE__ */ jsx("span", { "data-slot": "switch-content", className: "ui-switch-content", "aria-hidden": "true", children: isChecked ? checkedChildren : unCheckedChildren }) : null,
+            /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "ui-switch-thumb", children: loading ? /* @__PURE__ */ jsx(
+              Loader2,
+              {
+                "data-slot": "switch-spinner",
+                className: "ui-switch-spinner",
+                "aria-hidden": "true"
+              }
+            ) : null })
+          ]
         }
       )
     ] });

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

@@ -1,63 +1,21 @@
 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;
-    /**
-     * `ghost` strips the field's own border, background and focus ring, for a textarea embedded in a
-     * surface that already draws the box (a chat composer inside a Card). The surface then owns
-     * focus — give it `focus-within`.
-     */
-    variant?: "default" | "ghost";
-    /**
-     * The floor is `minRows` (or `rows`, when that is the only one given) and never undercuts the
-     * `--control-height` tier; past `maxRows` the control stops growing and scrolls internally.
-     * Sizing is done in CSS by a hidden replica of the text, so it follows a paste, a programmatic
-     * value change, a font swap and a container resize — not just typing — and it never writes
-     * `style.height` or reads `scrollHeight`.
-     */
-    autoGrow?: boolean;
-    /**
-     * Floor in text rows while `autoGrow` (theme default `--textarea-autogrow-min-height-rows`, 1).
-     * Ignored when `autoGrow` is false.
-     */
-    minRows?: number;
-    /**
-     * Ceiling in text rows while `autoGrow` (theme default `--textarea-autogrow-max-height-rows`,
-     * 8); beyond it the control scrolls internally rather than pushing the page. Pass `0` for no
-     * ceiling — only correct inside an owning scroll container.
-     */
-    maxRows?: number;
-};
+import type { ControlVariantProp } from "../../props/vocabulary/index.js";
+export type { TextareaProp, TextareaProp as TextareaProps, } from "../../props/components/data-entry.prop.js";
 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 ✕. */
+    onValueChange?: (value: string) => void;
+    pad?: import("../../props/index.js").PadProp;
+    padRaw?: import("../../props/index.js").PadRawProp;
+    allowClear?: import("../../props/index.js").AllowClearProp;
     onClear?: () => void;
-    /**
-     * `ghost` strips the field's own border, background and focus ring, for a textarea embedded in a
-     * surface that already draws the box (a chat composer inside a Card). The surface then owns
-     * focus — give it `focus-within`.
-     */
-    variant?: "default" | "ghost";
-    /**
-     * The floor is `minRows` (or `rows`, when that is the only one given) and never undercuts the
-     * `--control-height` tier; past `maxRows` the control stops growing and scrolls internally.
-     * Sizing is done in CSS by a hidden replica of the text, so it follows a paste, a programmatic
-     * value change, a font swap and a container resize — not just typing — and it never writes
-     * `style.height` or reads `scrollHeight`.
-     */
+    variant?: ControlVariantProp | "default" | "ghost";
+    status?: import("../../props/index.js").ControlStatusProp;
+    size?: "sm" | "md" | "lg";
     autoGrow?: boolean;
-    /**
-     * Floor in text rows while `autoGrow` (theme default `--textarea-autogrow-min-height-rows`, 1).
-     * Ignored when `autoGrow` is false.
-     */
+    autoSize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
     minRows?: number;
-    /**
-     * Ceiling in text rows while `autoGrow` (theme default `--textarea-autogrow-max-height-rows`,
-     * 8); beyond it the control scrolls internally rather than pushing the page. Pass `0` for no
-     * ceiling — only correct inside an owning scroll container.
-     */
     maxRows?: number;
+    count?: import("../../props/components/data-entry.prop.js").ControlCountProp;
 } & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -3,30 +3,54 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { padStyle } from "../../lib/variants.js";
 import { cn } from "../../lib/utils.js";
 import { useFieldIdentity } from "../../lib/field-a11y.js";
-import { controlMultilineClass, controlMultilineGhostClass } from "../../lib/control-styles.js";
+import {
+  controlMultilineClass,
+  controlMultilineFilledClass,
+  controlMultilineGhostClass
+} from "../../lib/control-styles.js";
+import { controlAppearanceAttributes, resolveControlCount } from "./control-appearance.js";
+import { resolveAllowClear } from "./control-surface.js";
 const UNBOUNDED_ROWS = "infinity";
 const Textarea = React.forwardRef(
   ({
     className,
-    allowClear = false,
+    pad,
+    padRaw,
+    allowClear,
     onClear,
-    variant = "default",
+    variant = "outlined",
+    status,
+    size,
     autoGrow = false,
+    autoSize,
     minRows,
     maxRows,
+    count,
     rows,
     style,
     value,
     defaultValue,
     onChange,
+    onValueChange,
     onCompositionStart,
     onCompositionEnd,
     ...props
   }, ref) => {
     const { t } = useTranslation();
-    const base = variant === "ghost" ? controlMultilineGhostClass : controlMultilineClass;
+    const resolvedVariant = variant === "default" ? "outlined" : variant === "ghost" ? "borderless" : variant;
+    const base = resolvedVariant === "borderless" ? controlMultilineGhostClass : resolvedVariant === "filled" ? controlMultilineFilledClass : controlMultilineClass;
+    const autoSizeEnabled = autoSize === true || typeof autoSize === "object";
+    const growing = autoGrow || autoSizeEnabled;
+    const floorRowsProp = minRows ?? (typeof autoSize === "object" ? autoSize.minRows : void 0);
+    const ceilRowsProp = maxRows ?? (typeof autoSize === "object" ? autoSize.maxRows : void 0);
+    const appearance = controlAppearanceAttributes({
+      status,
+      variant: resolvedVariant,
+      "aria-invalid": props["aria-invalid"]
+    });
     const identity = useFieldIdentity({
       id: props.id,
       name: props.name,
@@ -41,11 +65,10 @@ const Textarea = React.forwardRef(
       },
       [ref]
     );
-    const [hasText, setHasText] = React.useState(
-      () => String(value ?? defaultValue ?? "").length > 0
-    );
+    const [text, setText] = React.useState(() => String(value ?? defaultValue ?? ""));
+    const hasText = text.length > 0;
     React.useEffect(() => {
-      if (value !== void 0) setHasText(String(value).length > 0);
+      if (value !== void 0) setText(String(value));
     }, [value]);
     const [mirror, setMirror] = React.useState(() => String(value ?? defaultValue ?? ""));
     const composing = React.useRef(false);
@@ -55,21 +78,22 @@ const Textarea = React.forwardRef(
       setMirror(el.value);
     }, []);
     React.useLayoutEffect(() => {
-      if (autoGrow) syncMirror();
+      if (growing) syncMirror();
     });
     React.useEffect(() => {
       const form = innerRef.current?.form;
-      if (!autoGrow || !form) return;
+      if (!growing || !form) return;
       const onReset = () => {
         queueMicrotask(syncMirror);
       };
       form.addEventListener("reset", onReset);
       return () => form.removeEventListener("reset", onReset);
-    }, [autoGrow, syncMirror]);
+    }, [growing, syncMirror]);
     const handleChange = (event) => {
-      if (value === void 0) setHasText(event.target.value.length > 0);
-      if (autoGrow && !composing.current) setMirror(event.target.value);
+      if (value === void 0) setText(event.target.value);
+      if (growing && !composing.current) setMirror(event.target.value);
       onChange?.(event);
+      if (onChange !== onValueChange) onValueChange?.(event.target.value);
     };
     const handleCompositionStart = (event) => {
       composing.current = true;
@@ -77,7 +101,7 @@ const Textarea = React.forwardRef(
     };
     const handleCompositionEnd = (event) => {
       composing.current = false;
-      if (autoGrow) setMirror(event.currentTarget.value);
+      if (growing) setMirror(event.currentTarget.value);
       onCompositionEnd?.(event);
     };
     const clear = () => {
@@ -91,33 +115,46 @@ const Textarea = React.forwardRef(
         el.dispatchEvent(new Event("input", { bubbles: true }));
         el.focus();
       }
-      setHasText(false);
-      if (autoGrow) setMirror("");
+      setText("");
+      if (growing) setMirror("");
       onClear?.();
     };
-    const floorRows = minRows ?? (typeof rows === "number" ? rows : void 0);
-    const autoGrowVars = autoGrow ? {
+    const floorRows = floorRowsProp ?? (typeof rows === "number" ? rows : void 0);
+    const inset = padStyle(pad, padRaw);
+    const mirrorInset = inset ? {
+      "--textarea-padding-block-start": inset.paddingBlockStart ?? inset.padding ?? "var(--control-multiline-padding-block)",
+      "--textarea-padding-block-end": inset.paddingBlockEnd ?? inset.padding ?? "var(--control-multiline-padding-block)",
+      "--textarea-padding-inline-start": inset.paddingInlineStart ?? inset.padding ?? "var(--control-padding-x)",
+      "--textarea-padding-inline-end": inset.paddingInlineEnd ?? inset.padding ?? "var(--control-padding-x)",
+      "--textarea-autogrow-box-inset": `calc(var(--textarea-padding-block-start) + var(--textarea-padding-block-end) + ${resolvedVariant === "borderless" ? "0px" : "var(--control-border-width) * 2"})`
+    } : void 0;
+    const autoGrowVars = growing ? {
       ...floorRows === void 0 ? null : { "--textarea-autogrow-min-height-rows": floorRows },
-      ...maxRows === void 0 ? null : {
-        "--textarea-autogrow-max-height-rows": maxRows === 0 ? UNBOUNDED_ROWS : maxRows
+      ...ceilRowsProp === void 0 ? null : {
+        "--textarea-autogrow-max-height-rows": ceilRowsProp === 0 ? UNBOUNDED_ROWS : ceilRowsProp
       }
     } : void 0;
-    const showClear = allowClear && hasText && !props.disabled && !props.readOnly;
-    const needsWrapper = allowClear || autoGrow;
+    const clearControl = resolveAllowClear(allowClear, false, t("common.clear") ?? "Clear");
+    const showClear = clearControl.enabled && hasText && !props.disabled && !props.readOnly;
+    const counter = resolveControlCount(count, text);
+    const needsWrapper = clearControl.enabled || growing || counter !== null;
     const field = /* @__PURE__ */ jsx(
       "textarea",
       {
         ref: setRefs,
         value,
         defaultValue,
-        rows: autoGrow ? 1 : rows,
-        onChange: needsWrapper ? handleChange : onChange,
+        rows: growing ? 1 : rows,
+        "data-size": size,
+        onChange: handleChange,
         onCompositionStart: handleCompositionStart,
         onCompositionEnd: handleCompositionEnd,
-        style,
+        style: { ...style, ...padStyle(pad, padRaw) },
+        "data-pad-raw": padRaw === void 0 ? void 0 : "",
         className: cn(base, showClear && "ui-input--trailing-affix", className),
         ...props,
-        ...identity
+        ...identity,
+        ...appearance
       }
     );
     if (!needsWrapper) return field;
@@ -125,13 +162,13 @@ const Textarea = React.forwardRef(
       "span",
       {
         "data-slot": "textarea-affix-wrapper",
-        "data-autogrow-value": autoGrow ? mirror : void 0,
-        style: autoGrowVars,
+        "data-autogrow-value": growing ? mirror : void 0,
+        style: { ...autoGrowVars, ...mirrorInset },
         className: cn(
           "relative w-full",
-          autoGrow ? "grid" : "block",
-          autoGrow && "ui-textarea-autogrow",
-          autoGrow && variant === "ghost" && "ui-textarea-autogrow--ghost"
+          growing ? "grid" : "block",
+          growing && "ui-textarea-autogrow",
+          growing && resolvedVariant === "borderless" && "ui-textarea-autogrow--ghost"
         ),
         children: [
           field,
@@ -140,10 +177,20 @@ const Textarea = React.forwardRef(
             {
               type: "button",
               tabIndex: -1,
-              "aria-label": t("common.clear") ?? "Clear",
+              "aria-label": clearControl.label,
               onClick: clear,
               className: "ui-control-inline-affix-action ui-textarea-clear",
-              children: /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
+              children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
+            }
+          ) : null,
+          counter ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "textarea-count",
+              "data-exceeded": counter.exceeded ? "true" : void 0,
+              className: "ui-control-count ui-textarea-count",
+              "aria-hidden": "true",
+              children: counter.content
             }
           ) : null
         ]

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

@@ -1,9 +1,9 @@
 import * as React from "react";
 import type { TimePickerProp } from "../../props/components/data-entry.prop.js";
-export type { TimePickerProp, TimePickerProp as TimePickerProps, } from "../../props/components/data-entry.prop.js";
+export type { TimePickerDisabledTimeProp, TimePickerProp, TimePickerProp as TimePickerProps, } from "../../props/components/data-entry.prop.js";
 /**
  * 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 by
  * filling the input.
  */
-export declare function TimePicker({ value: controlledValue, defaultValue, onValueChange, placeholder, disabled, className, id, name, minuteStep, allowClear, ...ariaProps }: TimePickerProp): React.JSX.Element;
+export declare function TimePicker({ value: controlledValue, defaultValue, onValueChange, placeholder, disabled, className, id, name, minuteStep, hourStep, changeOnScroll, secondStep, showSeconds: showSecondsProp, use12Hours, format, open: openProp, defaultOpen, onOpenChange, inputReadOnly, preserveInvalidOnBlur, placement, renderExtraFooter, size, status, variant, ref, disabledTime, hideDisabledOptions, showNow, needConfirm, allowClear, ...ariaProps }: TimePickerProp): React.JSX.Element;