@godxjp/ui 20.0.0 → 20.1.0

package/dist/components/data-entry/color-picker.js

@@ -3,26 +3,35 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-import { resolveFieldA11y } from "../../lib/field-a11y.js";
+import { resolveFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { controlIconClass } from "../../lib/control-styles.js";
 import { Input } from "./input.js";
 const HEX_PATTERN = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+const NATIVE_COLOR_FALLBACK = "#000000";
 function normalizeHex(value) {
   if (!value.startsWith("#")) return `#${value}`;
   return value;
 }
 function ColorPicker({
-  value = "#2563eb",
+  value: valueProp,
+  defaultValue,
   onValueChange,
   disabled,
+  name,
   className,
   id,
   showHexInput = true,
   ...ariaProps
 }) {
   const { t } = useTranslation();
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
+  const value = isControlled ? valueProp : internalValue;
   const [draft, setDraft] = React.useState(null);
   const display = draft ?? value;
+  const swatchValue = HEX_PATTERN.test(display) ? display : HEX_PATTERN.test(value) ? value : NATIVE_COLOR_FALLBACK;
+  const identity = useFieldIdentity({ id, name, "data-field": ariaProps["data-field"] });
+  const resolvedName = name ?? identity.name;
   const swatchA11y = resolveFieldA11y(ariaProps, t("dataEntry.colorPicker.ariaLabel"));
   const commit = (next) => {
     const normalized = normalizeHex(next);
@@ -31,6 +40,7 @@ function ColorPicker({
       return;
     }
     setDraft(null);
+    if (!isControlled) setInternalValue(normalized);
     onValueChange?.(normalized);
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("ui-color-picker", className), children: [
@@ -39,7 +49,7 @@ function ColorPicker({
         "div",
         {
           className: "ui-color-picker-preview",
-          style: { backgroundColor: HEX_PATTERN.test(display) ? display : value },
+          style: { backgroundColor: swatchValue },
           "aria-hidden": "true"
         }
       ),
@@ -48,10 +58,11 @@ function ColorPicker({
         {
           id,
           type: "color",
-          value: HEX_PATTERN.test(display) ? display : value,
+          value: swatchValue,
           disabled,
           onChange: (event) => commit(event.target.value),
           className: "ui-color-picker-input",
+          "data-field": ariaProps["data-field"] ?? identity["data-field"],
           ...swatchA11y
         }
       )
@@ -71,7 +82,8 @@ function ColorPicker({
         className: "ui-color-picker-hex",
         spellCheck: false
       }
-    )
+    ),
+    resolvedName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: resolvedName, value, readOnly: true }) : null
   ] });
 }
 export {

package/dist/components/data-entry/control-appearance.d.ts

@@ -0,0 +1,64 @@
+import type * as React from "react";
+import type { ControlStatusProp, ControlVariantProp } from "../../props/vocabulary/index.js";
+import type { ControlCountProp } from "../../props/components/data-entry.prop.js";
+/**
+ * The two appearance axes Ant Design puts on every text field — `status` and `variant` — resolved
+ * once, here, so Input / Textarea / NumberInput / PasswordInput / SearchInput cannot drift into
+ * three different spellings of "this field is wrong".
+ *
+ * WHY A HELPER AND NOT A CLASS PER COMPONENT. `status` has a SECOND half that is not paint:
+ * `error` must also report `aria-invalid`, or the red boundary is a lie to a screen reader. That
+ * pairing is the thing worth keeping in one place; the CSS is the easy half.
+ */
+export type ControlAppearanceInput = {
+    status?: ControlStatusProp;
+    variant?: ControlVariantProp;
+    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
+};
+export type ControlAppearanceAttributes = {
+    "data-status"?: ControlStatusProp;
+    "data-variant"?: ControlVariantProp;
+    "aria-invalid"?: React.AriaAttributes["aria-invalid"];
+};
+/**
+ * `status="error"` REPORTS `aria-invalid` — unless the caller (or FormField, which injects it)
+ * already said something, in which case the explicit value wins and nothing is overwritten.
+ * `status="warning"` deliberately reports nothing: a warning is not a validity failure, and
+ * antd does not announce one either (es/_util/statusUtils.js only reaches for the class name).
+ */
+export declare function controlAppearanceAttributes({ status, variant, "aria-invalid": ariaInvalid, }: ControlAppearanceInput): ControlAppearanceAttributes;
+/**
+ * The chrome utilities a variant carries, kept in the COMPONENT rather than in `control.css`.
+ *
+ * A Tailwind utility lives in `@layer utilities`, which outranks `@layer components` no matter
+ * how specific the component rule is — so `bg-background` baked unconditionally into the class
+ * list would silently defeat `filled` and `borderless` and no gate would notice. The outlined
+ * field therefore keeps exactly the utilities it always had, and the other two simply do not
+ * receive them; their surface comes from `.ui-control--filled` / `.ui-control--borderless`.
+ */
+export declare const CONTROL_VARIANT_CHROME_CLASS: Record<ControlVariantProp, string>;
+/**
+ * The status BOUNDARY, for the same cascade-layer reason — and this one was measured the hard way.
+ *
+ * `.ui-control[data-status="warning"] { border-color: … }` in `@layer components` renders exactly
+ * nothing: `border-input` is a utility, utilities are a later layer, and a later layer wins over
+ * any specificity. In Chromium the warned field measured `rgb(144 135 127)` — the resting border —
+ * with the component rule in place and no error anywhere. Painting it from a utility instead puts
+ * the two declarations in the SAME layer, where `data-[status=…]` (0,2,0) genuinely outranks
+ * `border-input` (0,1,0). It is also the mechanism the library already used for the invalid state
+ * (`aria-invalid:border-destructive`), so the two states now paint the same way.
+ *
+ * The `--focus-*` reassignments stay in `control.css`: those are custom properties, and no utility
+ * competes for them.
+ */
+export declare const CONTROL_STATUS_CHROME_CLASS = "data-[status=error]:border-destructive data-[status=warning]:border-warning";
+/** Default `count.strategy` — code points, so a surrogate pair counts once. */
+export declare function countCodePoints(value: string): number;
+export type ResolvedControlCount = {
+    count: number;
+    max?: number;
+    exceeded: boolean;
+    content: React.ReactNode;
+};
+/** `null` when the counter is switched off (no `count`, or `count.show === false`). */
+export declare function resolveControlCount(config: ControlCountProp | undefined, value: string): ResolvedControlCount | null;

package/dist/components/data-entry/control-appearance.js

@@ -0,0 +1,39 @@
+function controlAppearanceAttributes({
+  status,
+  variant,
+  "aria-invalid": ariaInvalid
+}) {
+  return {
+    "data-status": status,
+    "data-variant": variant,
+    "aria-invalid": ariaInvalid ?? (status === "error" ? true : void 0)
+  };
+}
+const CONTROL_VARIANT_CHROME_CLASS = {
+  outlined: "border-input bg-background",
+  filled: "ui-control--filled",
+  borderless: "ui-control--borderless"
+};
+const CONTROL_STATUS_CHROME_CLASS = "data-[status=error]:border-destructive data-[status=warning]:border-warning";
+function countCodePoints(value) {
+  return [...value].length;
+}
+function resolveControlCount(config, value) {
+  if (!config || config.show === false) return null;
+  const strategy = config.strategy ?? countCodePoints;
+  const count = strategy(value);
+  const max = config.max;
+  return {
+    count,
+    max,
+    exceeded: max != null && count > max,
+    content: config.formatter ? config.formatter({ value, count, max }) : max == null ? String(count) : `${count} / ${max}`
+  };
+}
+export {
+  CONTROL_STATUS_CHROME_CLASS,
+  CONTROL_VARIANT_CHROME_CLASS,
+  controlAppearanceAttributes,
+  countCodePoints,
+  resolveControlCount
+};

package/dist/components/data-entry/control-surface.d.ts

@@ -0,0 +1,61 @@
+import type * as React from "react";
+import type { AllowClearProp, ControlStatusProp, ControlVariantProp, MaxTagPlaceholderProp, SizeProp } from "../../props/vocabulary/index.js";
+/**
+ * The DOM attributes that put a control on the `variant` × `status` × `size` matrix owned by
+ * `.ui-control-surface` in `src/styles/control.css`.
+ *
+ * Written once, here, rather than five times: every member of the select family (Select,
+ * SearchSelect, Cascader, TreeSelect, TagInput) states the antd surface contract the same way, and
+ * a per-component copy is how the five drift apart. Each default (`outlined`, `md`) emits NO
+ * attribute at all, so a control that says nothing keeps the exact DOM it had.
+ */
+export declare function controlSurfaceAttrs(props: {
+    variant?: ControlVariantProp;
+    status?: ControlStatusProp;
+    size?: SizeProp;
+}): {
+    "data-variant"?: ControlVariantProp;
+    "data-status"?: ControlStatusProp;
+    "data-size"?: SizeProp;
+};
+/**
+ * `status="error"` must also reach assistive tech, so it folds into `aria-invalid`.
+ *
+ * antd's own `status="error"` is a pure recolour — a state announced by hue alone, which WCAG 2.2
+ * SC 1.4.1 does not accept. An `aria-invalid` arriving from `FormField` always wins: the field's
+ * validation state is the authority, and a `status` prop must never be able to talk it down.
+ */
+export declare function resolveAriaInvalid<T extends React.AriaAttributes["aria-invalid"]>(ariaInvalid: T, status: ControlStatusProp | undefined): T | true | undefined;
+/** The normalised clear affordance: whether to offer it, with what icon, under what label. */
+export type ResolvedAllowClear = {
+    enabled: boolean;
+    clearIcon?: React.ReactNode;
+    label?: string;
+};
+/**
+ * Reconcile antd's `allowClear` with this library's own `clearable`.
+ *
+ * `allowClear` wins when present because it is the more specific statement — the object form
+ * carries an icon and a label that `clearable` has no way to express. `clearable` remains the
+ * name every existing call site uses, and keeps its `true` default.
+ */
+export declare function resolveAllowClear(allowClear: AllowClearProp | undefined, clearable: boolean | undefined, fallbackLabel?: string): ResolvedAllowClear;
+/**
+ * Apply antd's `maxTagCount` / `maxTagPlaceholder` to a list of selected values.
+ *
+ * Returns the values that stay visible plus the overflow node, so the three call sites (Cascader,
+ * TreeSelect, TagInput) agree on what "+2" means. `maxTagCount` is only honoured when it is a
+ * non-negative number — `undefined` shows everything, which is the antd default.
+ *
+ * `overflow` is `undefined` when the consumer supplied no `maxTagPlaceholder`: the fallback wording
+ * is a COUNT, and a count has to go through `t()` + `Intl.PluralRules` at the call site rather than
+ * be concatenated here.
+ */
+export declare function applyMaxTagCount<T extends {
+    value: string;
+    label: React.ReactNode;
+}>(items: T[], maxTagCount: number | undefined, maxTagPlaceholder: MaxTagPlaceholderProp | undefined): {
+    visible: T[];
+    omitted: T[];
+    overflow: React.ReactNode | undefined;
+};

package/dist/components/data-entry/control-surface.js

@@ -0,0 +1,39 @@
+function controlSurfaceAttrs(props) {
+  return {
+    "data-variant": props.variant && props.variant !== "outlined" ? props.variant : void 0,
+    "data-status": props.status,
+    "data-size": props.size && props.size !== "md" ? props.size : void 0
+  };
+}
+function resolveAriaInvalid(ariaInvalid, status) {
+  if (ariaInvalid !== void 0) return ariaInvalid;
+  return status === "error" ? true : void 0;
+}
+function resolveAllowClear(allowClear, clearable, fallbackLabel) {
+  if (allowClear !== void 0) {
+    if (typeof allowClear === "boolean") {
+      return { enabled: allowClear, label: fallbackLabel };
+    }
+    return {
+      enabled: true,
+      clearIcon: allowClear.clearIcon,
+      label: allowClear.label ?? fallbackLabel
+    };
+  }
+  return { enabled: clearable !== false, label: fallbackLabel };
+}
+function applyMaxTagCount(items, maxTagCount, maxTagPlaceholder) {
+  if (maxTagCount === void 0 || maxTagCount < 0 || items.length <= maxTagCount) {
+    return { visible: items, omitted: [], overflow: void 0 };
+  }
+  const visible = items.slice(0, maxTagCount);
+  const omitted = items.slice(maxTagCount);
+  const overflow = typeof maxTagPlaceholder === "function" ? maxTagPlaceholder(omitted.map(({ value, label }) => ({ value, label }))) : maxTagPlaceholder;
+  return { visible, omitted, overflow };
+}
+export {
+  applyMaxTagCount,
+  controlSurfaceAttrs,
+  resolveAllowClear,
+  resolveAriaInvalid
+};

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

@@ -6,4 +6,4 @@ export type { DatePickerProp, DatePickerProp as DatePickerProps, } from "../../p
  * `yyyy-MM-dd` string (the international standard): it is form-submittable (give it a `name`),
  * screen-reader friendly, and e2e-testable by simply filling the input.
  */
-export declare function DatePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, showToday, showClose, fromDate, toDate, allowClear, ...ariaProps }: DatePickerProp): React.JSX.Element;
+export declare function DatePicker(props: DatePickerProp): React.JSX.Element;