@godxjp/ui 31.28.4 → 31.30.0

package/dist/components/data-display/range-timeline.js

@@ -4,8 +4,18 @@ import * as React from "react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { ChevronDown, ChevronLeft, ChevronRight, GripVertical } from "lucide-react";
 import { Button } from "../general/button.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
+import { CONTRAST_PIVOT, relativeLuminance } from "../../app/tenant-theme.js";
 import { Text } from "../general/typography.js";
 import { cn } from "../../lib/utils.js";
+function inkOn(color) {
+  if (!color) return void 0;
+  const luminance = relativeLuminance(color);
+  if (luminance == null) return void 0;
+  return luminance > CONTRAST_PIVOT ? "black" : "white";
+}
+const LABEL_WIDTH_STEP = 8;
+const LABEL_WIDTH_BIG_STEP = 32;
 const RangeTimeline = React.forwardRef(
   function RangeTimeline2({
     label,
@@ -20,10 +30,30 @@ const RangeTimeline = React.forwardRef(
     defaultExpandedValues,
     onExpandedValuesChange,
     sticky = false,
+    resizableLabel = false,
+    labelWidth,
+    defaultLabelWidth,
+    onLabelWidthChange,
+    busy = false,
     className,
     ...props
   }, ref) {
     const { t } = useTranslation();
+    const resize = resizableLabel ? {
+      min: typeof resizableLabel === "object" && resizableLabel.min || 160,
+      max: typeof resizableLabel === "object" && resizableLabel.max || 640
+    } : null;
+    const [ownLabelWidth, setOwnLabelWidth] = React.useState(defaultLabelWidth);
+    const currentLabelWidth = labelWidth ?? ownLabelWidth;
+    const labelCell = React.useRef(null);
+    const labelDrag = React.useRef(null);
+    const setLabelWidth = (next) => {
+      if (!resize) return;
+      const bounded = Math.round(Math.min(resize.max, Math.max(resize.min, next)));
+      if (labelWidth === void 0) setOwnLabelWidth(bounded);
+      onLabelWidthChange?.(bounded);
+    };
+    const measuredLabelWidth = () => currentLabelWidth ?? Math.round(labelCell.current?.getBoundingClientRect().width ?? 0);
     const reactId = React.useId();
     const depthOf = (row) => Math.max(0, Math.floor(row.depth ?? 0));
     const nested = rows.some((row) => depthOf(row) > 0);
@@ -85,7 +115,7 @@ const RangeTimeline = React.forwardRef(
       const row = rows.find((row2) => row2.id === current.id);
       const delta = deltaAt(event.clientX);
       cancel();
-      if (!row) return;
+      if (!row || row.start === null || row.end === null) return;
       const bounded = current.edge === "start" ? Math.min(delta, row.end - row.start) : Math.max(delta, row.start - row.end);
       if (bounded) onRangeChange?.(row.id, current.edge, bounded);
     };
@@ -107,7 +137,53 @@ const RangeTimeline = React.forwardRef(
         )) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-header", children: [
-        /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: /* @__PURE__ */ jsx(Text, { weight: "bold", children: label }) }),
+        /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-label", ref: labelCell, children: [
+          /* @__PURE__ */ jsx(Text, { weight: "bold", children: label }),
+          resize && /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "separator",
+              tabIndex: 0,
+              className: "ui-range-timeline-label-resizer",
+              "aria-orientation": "vertical",
+              "aria-label": t("rangeTimeline.resizeLabel"),
+              "aria-valuemin": resize.min,
+              "aria-valuemax": resize.max,
+              "aria-valuenow": currentLabelWidth ?? void 0,
+              onPointerDown: (event) => {
+                if (event.button !== 0) return;
+                event.preventDefault();
+                event.currentTarget.setPointerCapture(event.pointerId);
+                labelDrag.current = {
+                  x: event.clientX,
+                  width: measuredLabelWidth(),
+                  direction: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
+                };
+              },
+              onPointerMove: (event) => {
+                const current = labelDrag.current;
+                if (current)
+                  setLabelWidth(current.width + (event.clientX - current.x) * current.direction);
+              },
+              onPointerUp: () => labelDrag.current = null,
+              onPointerCancel: () => labelDrag.current = null,
+              onLostPointerCapture: () => labelDrag.current = null,
+              onKeyDown: (event) => {
+                const step = event.shiftKey ? LABEL_WIDTH_BIG_STEP : LABEL_WIDTH_STEP;
+                const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
+                let next = null;
+                if (event.key === "ArrowRight") next = measuredLabelWidth() + step * direction;
+                else if (event.key === "ArrowLeft")
+                  next = measuredLabelWidth() - step * direction;
+                else if (event.key === "Home") next = resize.min;
+                else if (event.key === "End") next = resize.max;
+                if (next === null) return;
+                event.preventDefault();
+                setLabelWidth(next);
+              }
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-columns", ref: track, children: columns.map((column, index) => /* @__PURE__ */ jsx(
           "div",
           {
@@ -117,7 +193,8 @@ const RangeTimeline = React.forwardRef(
           },
           index
         )) })
-      ] })
+      ] }),
+      busy && /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-busy", "aria-hidden": "true" })
     ] });
     const body = /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-body", role: nested ? "list" : void 0, children: [
       (bordered || columns.some((column) => column.muted)) && // Decorative: the same unit tracks as the header columns, laid once behind every row so
@@ -136,10 +213,17 @@ const RangeTimeline = React.forwardRef(
       ] }),
       visibleRows.map((row, index) => {
         const idBase = `${reactId}-row-${rows.indexOf(row)}`;
+        const dated = row.start !== null && row.end !== null;
+        const rowStart = row.start ?? 0, rowEnd = row.end ?? 0;
         const delta = preview?.id === row.id ? preview.delta : 0;
-        const start = Math.min(row.end, row.start + (preview?.edge === "start" ? delta : 0));
-        const end = Math.max(row.start, row.end + (preview?.edge === "end" ? delta : 0));
+        const start = Math.min(rowEnd, rowStart + (preview?.edge === "start" ? delta : 0));
+        const end = Math.max(rowStart, rowEnd + (preview?.edge === "end" ? delta : 0));
         const left = Math.max(0, start), right = Math.min(units, end + 1);
+        const plan = dated && row.plan && row.plan.start !== null && row.plan.end !== null ? row.plan : null;
+        const planLeft = plan ? Math.max(0, plan.start) : 0, planRight = plan ? Math.min(units, plan.end + 1) : 0;
+        const overrun = plan !== null && end > plan.end;
+        const early = plan !== null && end < plan.end;
+        const overrunLeft = overrun ? Math.max(left, Math.min(units, plan.end + 1)) : 0;
         return /* @__PURE__ */ jsxs(
           "div",
           {
@@ -182,7 +266,14 @@ const RangeTimeline = React.forwardRef(
                     /* @__PURE__ */ jsx("div", { id: `${idBase}-label`, className: "ui-range-timeline-label-content", children: row.label })
                   ]
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: "ui-range-timeline-label", children: row.label }),
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "ui-range-timeline-label",
+                  id: row.tooltip != null ? `${idBase}-label` : void 0,
+                  children: row.label
+                }
+              ),
               /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-track", children: [
                 today != null && today >= 0 && today < units && /* @__PURE__ */ jsx(
                   "span",
@@ -192,71 +283,135 @@ const RangeTimeline = React.forwardRef(
                     style: { insetInlineStart: `${(today + 0.5) / units * 100}%` }
                   }
                 ),
-                right <= left && (end < 0 ? /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "before", children: [
+                !dated && /* @__PURE__ */ jsx("span", { className: "ui-range-timeline-outside", "data-direction": "none", children: /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.noDates") }) }),
+                dated && right <= left && (end < 0 ? /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "before", children: [
                   /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", className: "ui-range-timeline-outside-icon" }),
                   /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideBefore") })
                 ] }) : /* @__PURE__ */ jsxs("span", { className: "ui-range-timeline-outside", "data-direction": "after", children: [
                   /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: t("rangeTimeline.outsideAfter") }),
                   /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "ui-range-timeline-outside-icon" })
                 ] })),
-                right > left && /* @__PURE__ */ jsx(
+                plan && planRight > planLeft && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "ui-range-timeline-plan",
+                    style: {
+                      insetInlineStart: `${planLeft / units * 100}%`,
+                      inlineSize: `${(planRight - planLeft) / units * 100}%`
+                    }
+                  }
+                ),
+                overrun && right > overrunLeft && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "ui-range-timeline-overrun",
+                    style: {
+                      insetInlineStart: `${overrunLeft / units * 100}%`,
+                      inlineSize: `${(right - overrunLeft) / units * 100}%`
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("rangeTimeline.overrun") }),
+                      row.varianceLabel !== false && /* @__PURE__ */ jsx("span", { className: "ui-range-timeline-variance", children: row.varianceLabel ?? t("rangeTimeline.lateBy", { n: String(end - plan.end) }) })
+                    ]
+                  }
+                ),
+                dated && !plan && row.planNote != null && right > left && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "ui-range-timeline-plan-note",
+                    style: { insetInlineStart: `${right / units * 100}%` },
+                    children: row.planNote
+                  }
+                ),
+                early && right > left && right <= units && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "ui-range-timeline-early",
+                    style: { insetInlineStart: `${right / units * 100}%` },
+                    children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("rangeTimeline.early") })
+                  }
+                ),
+                dated && right > left && /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: "ui-range-timeline-bar",
+                    "data-muted": row.muted ? "true" : void 0,
+                    "data-overdue": row.overdue ? "true" : void 0,
                     style: {
                       insetInlineStart: `${left / units * 100}%`,
-                      inlineSize: `${(right - left) / units * 100}%`
+                      inlineSize: `${(right - left) / units * 100}%`,
+                      ...row.color && {
+                        "--range-timeline-bar-color": row.color,
+                        "--range-timeline-bar-ink": inkOn(row.color)
+                      }
                     },
-                    children: onRangeChange && (right - left) * Math.max(1, columns.length) >= units && ["start", "end"].filter(
-                      (edge) => edge === "start" ? start >= 0 && start < units : end >= 0 && end < units
-                    ).map((edge) => /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        variant: "ghost",
-                        size: "icon-xs",
-                        className: "ui-range-timeline-handle",
-                        "data-edge": edge,
-                        "aria-label": edge === "start" ? row.startLabel : row.endLabel,
-                        onPointerDown: (event) => {
-                          const width = track.current?.getBoundingClientRect().width ?? 0;
-                          if (!width || event.button !== 0) return;
-                          event.currentTarget.setPointerCapture(event.pointerId);
-                          drag.current = {
-                            id: row.id,
-                            edge,
-                            x: event.clientX,
-                            width,
-                            direction: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
-                          };
-                        },
-                        onPointerMove: (event) => {
-                          if (drag.current)
-                            setPreview({
-                              id: drag.current.id,
-                              edge: drag.current.edge,
-                              delta: deltaAt(event.clientX)
-                            });
-                        },
-                        onPointerUp: complete,
-                        onPointerCancel: cancel,
-                        onLostPointerCapture: cancel,
-                        onKeyDown: (event) => {
-                          if (event.key === "Escape") {
-                            cancel();
-                            return;
+                    children: [
+                      row.tooltip != null && /* @__PURE__ */ jsxs(Tooltip, { children: [
+                        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "ui-range-timeline-bar-hit ui-focus-ring",
+                            tabIndex: 0,
+                            "aria-labelledby": `${idBase}-label`
                           }
-                          const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
-                          if (!step) return;
-                          event.preventDefault();
-                          const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
-                          const delta2 = step * direction;
-                          if (edge === "start" ? row.start + delta2 <= row.end : row.end + delta2 >= row.start)
-                            onRangeChange(row.id, edge, delta2);
+                        ) }),
+                        /* @__PURE__ */ jsx(TooltipContent, { children: row.tooltip })
+                      ] }),
+                      row.overdue && /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("rangeTimeline.overdue") }),
+                      onRangeChange && (right - left) * Math.max(1, columns.length) >= units && ["start", "end"].filter(
+                        (edge) => edge === "start" ? start >= 0 && start < units : end >= 0 && end < units
+                      ).filter(
+                        (edge) => row.editable === void 0 || row.editable === true ? true : row.editable === false ? false : row.editable[edge] !== false
+                      ).map((edge) => /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          variant: "ghost",
+                          size: "icon-xs",
+                          className: "ui-range-timeline-handle",
+                          "data-edge": edge,
+                          "aria-label": edge === "start" ? row.startLabel : row.endLabel,
+                          onPointerDown: (event) => {
+                            const width = track.current?.getBoundingClientRect().width ?? 0;
+                            if (!width || event.button !== 0) return;
+                            event.currentTarget.setPointerCapture(event.pointerId);
+                            drag.current = {
+                              id: row.id,
+                              edge,
+                              x: event.clientX,
+                              width,
+                              direction: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
+                            };
+                          },
+                          onPointerMove: (event) => {
+                            if (drag.current)
+                              setPreview({
+                                id: drag.current.id,
+                                edge: drag.current.edge,
+                                delta: deltaAt(event.clientX)
+                              });
+                          },
+                          onPointerUp: complete,
+                          onPointerCancel: cancel,
+                          onLostPointerCapture: cancel,
+                          onKeyDown: (event) => {
+                            if (event.key === "Escape") {
+                              cancel();
+                              return;
+                            }
+                            const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+                            if (!step) return;
+                            event.preventDefault();
+                            const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
+                            const delta2 = step * direction;
+                            if (edge === "start" ? rowStart + delta2 <= rowEnd : rowEnd + delta2 >= rowStart)
+                              onRangeChange(row.id, edge, delta2);
+                          },
+                          children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
                         },
-                        children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" })
-                      },
-                      edge
-                    ))
+                        edge
+                      ))
+                    ]
                   }
                 )
               ] })
@@ -274,7 +429,14 @@ const RangeTimeline = React.forwardRef(
       // Only a NON-default step scopes the unit-width knob, so a theme that narrows
       // --range-timeline-unit-width globally still owns the default timeline (gh#730).
       "data-density": density === "default" ? void 0 : density,
-      "aria-label": label
+      "data-busy": busy ? "true" : void 0,
+      "aria-busy": busy || void 0,
+      "aria-label": label,
+      // Only once a width exists does it override the token, so a theme's width stays the default.
+      style: currentLabelWidth !== void 0 ? {
+        ...props.style,
+        "--range-timeline-label-width": `${currentLabelWidth}px`
+      } : props.style
     };
     if (!sticky) {
       return /* @__PURE__ */ jsx("section", { ...sectionProps, tabIndex: 0, children: /* @__PURE__ */ jsxs("div", { className: "ui-range-timeline-canvas", style: canvasStyle, children: [

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

@@ -55,6 +55,8 @@ export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 export type { CommandProps } from "./command.js";
 export { CommandPalette } from "./command-palette.js";
 export { EmojiPicker } from "./emoji-picker.js";
+export { SortableList } from "./sortable-list.js";
+export type { SortableListItemProp, SortableListProp, SortableListProps } from "./sortable-list.js";
 export type { EmojiPickerProp, EmojiPickerProps } from "./emoji-picker.js";
 export type { CommandPaletteGroup, CommandPaletteItem, CommandPaletteLabels, CommandPaletteProps, CommandPaletteSelectModifiers, } from "./command-palette.js";
 export { PasswordInput } from "./password-input.js";

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

@@ -54,6 +54,7 @@ import {
 } from "./command.js";
 import { CommandPalette } from "./command-palette.js";
 import { EmojiPicker } from "./emoji-picker.js";
+import { SortableList } from "./sortable-list.js";
 import { PasswordInput } from "./password-input.js";
 import { PasswordStrength, usePasswordStrength } from "./password-strength.js";
 import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./input-otp.js";
@@ -120,6 +121,7 @@ export {
   SelectTrigger,
   SelectValue,
   Slider,
+  SortableList,
   Switch,
   TagInput,
   Textarea,

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

@@ -1,9 +1,21 @@
 declare const DEFAULT_PASSWORD_RULES: readonly ["length", "upper", "lower", "number", "symbol"];
 export type PasswordRule = (typeof DEFAULT_PASSWORD_RULES)[number];
+/**
+ * Every visible and screen-reader string, each optional (gh#1191). Unset entries come from the
+ * kit's own ja / en / vi catalogue for the active locale, so most apps pass nothing.
+ */
 export type PasswordStrengthLabels = {
-    weak: string;
-    fair: string;
-    strong: string;
+    weak?: string;
+    fair?: string;
+    strong?: string;
+    /** Checklist line per rule. */
+    rules?: Partial<Record<PasswordRule, string>>;
+    /** Screen-reader prefix before a met rule (e.g. "Passed: "). */
+    passed?: string;
+    /** Screen-reader prefix before an unmet rule (e.g. "Not yet: "). */
+    failed?: string;
+    /** The polite live-region sentence, given the strength word. */
+    announcement?: (strength: string) => string;
 };
 export type PasswordStrengthProps = {
     value: string;

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

@@ -1,12 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, X } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
 const DEFAULT_PASSWORD_RULES = ["length", "upper", "lower", "number", "symbol"];
-const DEFAULT_LABELS = {
-  weak: "Weak",
-  fair: "Fair",
-  strong: "Strong"
-};
 function usePasswordStrength(value, rules = [...DEFAULT_PASSWORD_RULES]) {
   const uniqueRules = [...new Set(rules)];
   const checks = {
@@ -25,28 +21,33 @@ function scoreTone(score) {
   if (score <= 3) return "warning";
   return "success";
 }
-function scoreLabel(score, labels) {
-  if (score <= 1) return labels.weak;
-  if (score <= 3) return labels.fair;
-  return labels.strong;
+function scoreKey(score) {
+  if (score <= 1) return "weak";
+  if (score <= 3) return "fair";
+  return "strong";
 }
 function PasswordStrength({
   value,
   rules = [...DEFAULT_PASSWORD_RULES],
   showChecklist = true,
-  labels = DEFAULT_LABELS
+  labels = {}
 }) {
+  const { t } = useTranslation();
   const normalizedRules = [...new Set(rules)];
   const { score, checks } = usePasswordStrength(value, normalizedRules);
   const tone = scoreTone(score);
   const segments = Array.from({ length: 5 });
+  const key = scoreKey(score);
+  const strength = labels[key] ?? t(`dataEntry.passwordStrength.${key}`);
+  const ruleLabel = (rule) => labels.rules?.[rule] ?? t(`dataEntry.passwordStrength.rules.${rule}`);
+  const announcement = labels.announcement ? labels.announcement(strength) : t("dataEntry.passwordStrength.announcement", { strength });
   return /* @__PURE__ */ jsxs("div", { className: "ui-password-strength", children: [
     /* @__PURE__ */ jsx(
       "div",
       {
         className: "ui-password-strength-track",
         role: "img",
-        "aria-label": `Password strength ${score}/4`,
+        "aria-label": t("dataEntry.passwordStrength.meter", { score: String(score) }),
         children: segments.map((_, index) => {
           const filled = index < score + 1;
           return /* @__PURE__ */ jsx(
@@ -63,7 +64,7 @@ function PasswordStrength({
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "ui-password-strength-meta", children: [
-      /* @__PURE__ */ jsx("span", { className: "ui-password-strength-label", children: scoreLabel(score, labels) }),
+      /* @__PURE__ */ jsx("span", { className: "ui-password-strength-label", children: strength }),
       /* @__PURE__ */ jsxs("span", { className: "ui-password-strength-score", "aria-hidden": "true", children: [
         score,
         "/4"
@@ -76,34 +77,15 @@ function PasswordStrength({
         "data-state": checks[rule] ? "passed" : "failed",
         children: [
           checks[rule] ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: checks[rule] ? "Passed: " : "Failed: " }),
-          /* @__PURE__ */ jsx("span", { children: labelForRule(rule) })
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: checks[rule] ? labels.passed ?? t("dataEntry.passwordStrength.passed") : labels.failed ?? t("dataEntry.passwordStrength.failed") }),
+          /* @__PURE__ */ jsx("span", { children: ruleLabel(rule) })
         ]
       },
       rule
     )) }) : null,
-    /* @__PURE__ */ jsxs("span", { className: "sr-only", "aria-live": "polite", children: [
-      scoreLabel(score, labels),
-      " password strength"
-    ] })
+    /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: announcement })
   ] });
 }
-function labelForRule(rule) {
-  switch (rule) {
-    case "length":
-      return "8+ characters";
-    case "upper":
-      return "Contains uppercase letter";
-    case "lower":
-      return "Contains lowercase letter";
-    case "number":
-      return "Contains number";
-    case "symbol":
-      return "Contains symbol";
-    default:
-      return rule;
-  }
-}
 export {
   PasswordStrength,
   usePasswordStrength

package/dist/components/data-entry/sortable-list.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { SortableListProp } from "../../props/components/data-entry.prop.js";
+export type { SortableListItemProp, SortableListProp, SortableListProp as SortableListProps, } from "../../props/components/data-entry.prop.js";
+/**
+ * SortableList (gh#1173) — reorder a flat list or a grid of tiles by pointer drag or by keyboard
+ * on each item's grip: Space/Enter lifts, the arrows (and Home/End) move, Space/Enter drops, Esc
+ * cancels and blur cancels. Every step is spoken through a polite live region ("2 / 3"). The order
+ * is the value: `onValueChange` receives the item keys in their new order once, on drop.
+ */
+export declare const SortableList: React.ForwardRefExoticComponent<SortableListProp & React.RefAttributes<HTMLDivElement>>;