@godxjp/ui 13.2.1 → 13.3.0

package/dist/styles/control.css

@@ -768,3 +768,67 @@
   font-size: var(--font-size-sm);
   color: inherit;
 }
+
+/* NumberInput — spinbutton: composed Input + leading/trailing affix + stepper Buttons.
+   `data-size` remaps the --control-height tier so the inner .ui-control field tracks it. */
+.ui-number-input {
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+  inline-size: 100%;
+}
+.ui-number-input[data-size="xs"] {
+  --control-height: var(--control-height-xs);
+}
+.ui-number-input[data-size="sm"] {
+  --control-height: var(--control-height-sm);
+}
+.ui-number-input[data-size="lg"] {
+  --control-height: var(--control-height-lg);
+}
+/* Reserve room on the trailing edge for the stacked steppers (logical inline-end). */
+.ui-number-input-field {
+  inline-size: 100%;
+  text-align: end;
+  padding-inline-end: calc(var(--control-height) + var(--space-2));
+}
+/* A leading/trailing decorative affix (¥, %) — overlays inside the field. */
+.ui-number-input-affix {
+  position: absolute;
+  inset-block: 0;
+  display: inline-flex;
+  align-items: center;
+  color: hsl(var(--muted-foreground));
+  font-size: var(--font-size-sm);
+  pointer-events: none;
+}
+.ui-number-input-affix:first-of-type {
+  inset-inline-start: var(--control-padding-x);
+}
+/* With a leading affix, pad the field's inline-start so digits don't sit under it. */
+.ui-number-input:has(.ui-number-input-affix:first-of-type) .ui-number-input-field {
+  padding-inline-start: calc(var(--control-padding-x) + 1.25rem);
+}
+.ui-number-input-affix:last-of-type {
+  inset-inline-end: calc(var(--control-height) + var(--space-2));
+}
+.ui-number-input-steppers {
+  position: absolute;
+  inset-inline-end: var(--space-1);
+  inset-block: 0;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.0625rem;
+  pointer-events: none;
+}
+.ui-number-input-step {
+  pointer-events: auto;
+  block-size: calc(var(--control-height) / 2 - 0.1875rem);
+  min-block-size: 0;
+  inline-size: 1.5rem;
+}
+.ui-number-input-step svg {
+  inline-size: 0.75rem;
+  block-size: 0.75rem;
+}

package/dist/styles/text-layout.css

@@ -29,16 +29,25 @@
   [data-slot="text"][data-size="xl"] {
     font-size: var(--font-size-xl);
   }
+  [data-slot="text"][data-size="2xl"] {
+    font-size: var(--font-size-2xl);
+  }
 
-  /* Weight — system 2-weight; semibold resolves to the 500 token (not 600). */
+  /* Weight — the dxs-kintai canon (400 body · 500 heading/label · 700 emphasis). No 600. */
   [data-slot="text"][data-weight="regular"] {
     font-weight: var(--font-weight-normal);
   }
   [data-slot="text"][data-weight="medium"] {
     font-weight: var(--font-weight-medium);
   }
-  [data-slot="text"][data-weight="semibold"] {
-    font-weight: var(--font-weight-semibold);
+  [data-slot="text"][data-weight="bold"] {
+    font-weight: var(--font-weight-bold);
+  }
+
+  /* code / kbd render monospace by default (the natural expectation for `as="code"`). */
+  code[data-slot="text"],
+  kbd[data-slot="text"] {
+    font-family: var(--font-family-mono, ui-monospace, "SFMono-Regular", monospace);
   }
 
   /* Tone + Heading tone — semantic foreground tokens. */

package/dist/tokens/foundation.css

@@ -130,10 +130,11 @@
 
   --font-weight-normal: 400;
   --font-weight-medium: 500;
-  /* dxs-kintai uses three weights only (400/500/700). 600 is forbidden
-   * (ambiguous between 500 and 700) — the legacy "semibold" token collapses to
-   * medium so any remaining reference renders at 500. */
+  /* dxs-kintai uses three weights only: 400 body · 500 heading/label · 700 emphasis. 600 is
+   * forbidden (ambiguous between 500 and 700) — the legacy "semibold" token collapses to medium
+   * so any remaining reference renders at 500. `bold` is the 700 emphasis weight. */
   --font-weight-semibold: 500;
+  --font-weight-bold: 700;
   --line-height-tight: 1.25;
   --line-height-normal: 1.5;
   --line-height-body: 1.7;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "13.2.1",
+  "version": "13.3.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,

package/dist/chunk-ZPHIXXTK.js

@@ -1,257 +0,0 @@
-import { Input } from './chunk-BNXPDUO4.js';
-import { useTranslation } from './chunk-H2TX3OPW.js';
-import { cn } from './chunk-U7N2A7A3.js';
-import * as React2 from 'react';
-import { EyeOff, Eye, Minus, Star, X } from 'lucide-react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { OTPInput, OTPInputContext } from 'input-otp';
-
-var PasswordInput = React2.forwardRef(
-  ({ className, ...props }, ref) => {
-    const { t } = useTranslation();
-    const [visible, setVisible] = React2.useState(false);
-    return /* @__PURE__ */ jsxs("div", { className: "ui-password-input", "data-slot": "password-input", children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          ref,
-          type: visible ? "text" : "password",
-          className: cn("ui-password-input-field", className),
-          ...props
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "ui-password-input-toggle",
-          onClick: () => setVisible((v) => !v),
-          "aria-label": visible ? t("ui.passwordInput.hide") : t("ui.passwordInput.show"),
-          "aria-pressed": visible,
-          children: visible ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true" })
-        }
-      )
-    ] });
-  }
-);
-PasswordInput.displayName = "PasswordInput";
-var InputOTP = React2.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
-  OTPInput,
-  {
-    ref,
-    "data-slot": "input-otp",
-    containerClassName: cn("ui-otp-container", containerClassName),
-    className: cn("ui-otp-input", className),
-    ...props
-  }
-));
-InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      "data-slot": "input-otp-group",
-      className: cn("ui-otp-group", className),
-      ...props
-    }
-  )
-);
-InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React2.forwardRef(({ index, className, ...props }, ref) => {
-  const context = React2.useContext(OTPInputContext);
-  const slot = context.slots[index] ?? { char: null, hasFakeCaret: false, isActive: false };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      "data-slot": "input-otp-slot",
-      "data-active": slot.isActive || void 0,
-      className: cn("ui-otp-slot", className),
-      ...props,
-      children: [
-        slot.char,
-        slot.hasFakeCaret ? /* @__PURE__ */ jsx("div", { className: "ui-otp-caret-wrapper", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: "ui-otp-caret" }) }) : null
-      ]
-    }
-  );
-});
-InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React2.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "input-otp-separator", role: "separator", ...props, children: /* @__PURE__ */ jsx(Minus, { className: "ui-otp-separator-icon", "aria-hidden": "true" }) }));
-InputOTPSeparator.displayName = "InputOTPSeparator";
-var Rating = React2.forwardRef(
-  ({
-    value,
-    defaultValue = 0,
-    onValueChange,
-    max = 5,
-    readOnly,
-    disabled,
-    name,
-    className,
-    ...rest
-  }, ref) => {
-    const { t } = useTranslation();
-    const [internal, setInternal] = React2.useState(defaultValue);
-    const current = value ?? internal;
-    const [hover, setHover] = React2.useState(null);
-    const display = hover ?? current;
-    const interactive = !readOnly && !disabled;
-    const select = (next) => {
-      if (!interactive) return;
-      if (value === void 0) setInternal(next);
-      onValueChange?.(next);
-    };
-    const focusableStar = current > 0 ? current : 1;
-    const onKeyDown = (e, star) => {
-      if (!interactive) return;
-      let next = null;
-      switch (e.key) {
-        case "ArrowRight":
-        case "ArrowUp":
-          next = Math.min(max, star + 1);
-          break;
-        case "ArrowLeft":
-        case "ArrowDown":
-          next = Math.max(1, star - 1);
-          break;
-        case "Home":
-          next = 1;
-          break;
-        case "End":
-          next = max;
-          break;
-        default:
-          return;
-      }
-      e.preventDefault();
-      select(next);
-    };
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        role: "radiogroup",
-        "data-slot": "rating",
-        className: cn("ui-rating", className),
-        "aria-label": rest["aria-label"] ?? t("ui.rating.ariaLabel"),
-        children: [
-          Array.from({ length: max }, (_, i) => i + 1).map((star) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              role: "radio",
-              "aria-checked": current === star,
-              "aria-label": t("ui.rating.starLabel", { star, max }),
-              disabled: disabled || readOnly,
-              tabIndex: interactive && star === focusableStar ? 0 : -1,
-              className: cn("ui-rating-star", star <= display && "ui-rating-star-filled"),
-              onMouseEnter: () => interactive && setHover(star),
-              onMouseLeave: () => setHover(null),
-              onClick: () => select(star),
-              onKeyDown: (e) => onKeyDown(e, star),
-              children: /* @__PURE__ */ jsx(Star, { "aria-hidden": "true" })
-            },
-            star
-          )),
-          name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current }) : null
-        ]
-      }
-    );
-  }
-);
-Rating.displayName = "Rating";
-var TagInput = React2.forwardRef(
-  ({
-    value,
-    defaultValue = [],
-    onValueChange,
-    placeholder,
-    disabled,
-    name,
-    className,
-    id,
-    "aria-label": ariaLabel
-  }, ref) => {
-    const { t } = useTranslation();
-    const [internal, setInternal] = React2.useState(defaultValue);
-    const tags = value ?? internal;
-    const [draft, setDraft] = React2.useState("");
-    const commit = (next) => {
-      if (value === void 0) setInternal(next);
-      onValueChange?.(next);
-    };
-    const add = (raw) => {
-      const tag = raw.trim();
-      if (!tag || tags.includes(tag)) return;
-      commit([...tags, tag]);
-    };
-    const removeAt = (i) => commit(tags.filter((_, idx) => idx !== i));
-    const onKeyDown = (e) => {
-      if (e.key === "Enter" || e.key === ",") {
-        e.preventDefault();
-        add(draft);
-        setDraft("");
-      } else if (e.key === "Backspace" && draft === "" && tags.length > 0) {
-        removeAt(tags.length - 1);
-      }
-    };
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-slot": "tag-input",
-        className: cn("ui-tag-input", disabled && "ui-tag-input-disabled", className),
-        children: [
-          tags.length > 0 ? /* @__PURE__ */ jsx("ul", { role: "list", className: "ui-tag-input-list", "data-slot": "tag-input-list", children: tags.map((tag, i) => /* @__PURE__ */ jsxs(
-            "li",
-            {
-              role: "listitem",
-              className: "ui-tag-input-chip",
-              "data-slot": "tag-input-chip",
-              children: [
-                tag,
-                !disabled ? /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: "ui-tag-input-remove",
-                    "aria-label": t("ui.tagInput.removeTag", { tag }),
-                    onClick: () => removeAt(i),
-                    children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
-                  }
-                ) : null
-              ]
-            },
-            tag
-          )) }) : null,
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref,
-              id,
-              type: "text",
-              className: "ui-tag-input-field",
-              value: draft,
-              placeholder: tags.length === 0 ? placeholder : void 0,
-              disabled,
-              "aria-label": ariaLabel ?? t("ui.tagInput.inputLabel"),
-              onChange: (e) => setDraft(e.target.value),
-              onKeyDown,
-              onBlur: () => {
-                if (draft.trim()) {
-                  add(draft);
-                  setDraft("");
-                }
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", "data-slot": "tag-input-status", children: t("ui.tagInput.tagCount", { count: tags.length }) }),
-          name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: tags.join(",") }) : null
-        ]
-      }
-    );
-  }
-);
-TagInput.displayName = "TagInput";
-
-export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, PasswordInput, Rating, TagInput };