@arbidocs/blocks 0.3.184 → 0.4.0

package/dist/chunk-V4ISCZJ7.cjs

@@ -0,0 +1,207 @@
+"use client";
+'use strict';
+
+var chunkPPCATBOY_cjs = require('./chunk-PPCATBOY.cjs');
+var chunkMHVNT4J3_cjs = require('./chunk-MHVNT4J3.cjs');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var ui = require('@arbidocs/react/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+var NARROW_BELOW_PX = 480;
+var DEFAULT_SELECTION_BAR_LABELS = {
+  selected: "selected",
+  clearSelection: "Clear selection",
+  review: "Review",
+  selectionActions: "Selection actions"
+};
+function SelectionBar(props) {
+  if (props.count === 0 && !props.status) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectionBarInner, { ...props });
+}
+function SelectionBarInner({
+  count,
+  onClear,
+  onReview,
+  actions,
+  children,
+  status,
+  selectedLabel,
+  labels,
+  testIds,
+  className
+}) {
+  const l = { ...DEFAULT_SELECTION_BAR_LABELS, ...labels };
+  const hasSelection = count > 0;
+  const rootRef = react.useRef(null);
+  const actionsRef = react.useRef(null);
+  const [isCompact, setIsCompact] = react.useState(false);
+  const [isNarrow, setIsNarrow] = react.useState(false);
+  const overflowRootWidthRef = react.useRef(Number.POSITIVE_INFINITY);
+  const measureRef = react.useRef(() => {
+  });
+  measureRef.current = () => {
+    const root = rootRef.current;
+    const el = actionsRef.current;
+    if (!root || !el) return;
+    const available = root.parentElement?.clientWidth ?? 0;
+    setIsNarrow(available > 0 && available < NARROW_BELOW_PX);
+    if (!isCompact) {
+      if (el.scrollWidth > el.clientWidth + 1) {
+        overflowRootWidthRef.current = root.clientWidth;
+        setIsCompact(true);
+      }
+    } else if (root.clientWidth > overflowRootWidthRef.current + 64) {
+      setIsCompact(false);
+    }
+  };
+  react.useLayoutEffect(() => {
+    measureRef.current();
+    const root = rootRef.current;
+    if (!root) return;
+    return chunkPPCATBOY_cjs.observeResize(root, () => measureRef.current());
+  }, []);
+  react.useLayoutEffect(() => {
+    measureRef.current();
+    const inner = actionsRef.current;
+    if (!inner || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => measureRef.current());
+    inner.querySelectorAll("button").forEach((button) => observer.observe(button));
+    return () => observer.disconnect();
+  });
+  react.useLayoutEffect(() => {
+    let isCancelled = false;
+    void document.fonts?.ready.then(() => {
+      if (!isCancelled) measureRef.current();
+    });
+    return () => {
+      isCancelled = true;
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "selection-bar",
+      className: ui.cn("pointer-events-none sticky bottom-0 z-30 h-0", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-4 flex justify-center px-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: rootRef,
+          role: "toolbar",
+          "aria-label": l.selectionActions,
+          "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.toolbar, { testId: "bulk-actions-toolbar" }),
+          "data-narrow": isNarrow || void 0,
+          className: "pointer-events-auto flex min-h-12 max-w-full items-center rounded-lg border border-border bg-popover px-2 py-1.5 shadow-xl",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 px-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.count, { testId: "bulk-selected-count" }),
+                "aria-live": "polite",
+                className: ui.cn(
+                  "flex shrink-0 items-center rounded-full bg-accent text-sm font-semibold tabular-nums text-accent-foreground",
+                  isCompact ? "gap-1 px-2.5 py-1" : "gap-2 px-3 py-1"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    count,
+                    !isCompact && ` ${selectedLabel ?? l.selected}`
+                  ] }),
+                  hasSelection && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClear,
+                      "aria-label": l.clearSelection,
+                      "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.clear, { testId: "bulk-clear-selection-button" }),
+                      className: "rounded-full p-0.5 transition-colors hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:p-[15px]",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5" })
+                    }
+                  )
+                ]
+              }
+            ),
+            onReview && /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: onReview,
+                "aria-label": isNarrow ? l.review : void 0,
+                "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.review, { testId: "bulk-review-button" }),
+                className: "flex h-8 shrink-0 items-center gap-1.5 rounded-md bg-accent px-2.5 text-sm font-medium text-accent-foreground transition-colors hover:bg-accent/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:h-11",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BookOpen, { className: "size-3.5" }),
+                  !isNarrow && l.review
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-px shrink-0 bg-border" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                ref: actionsRef,
+                className: "flex min-w-0 flex-1 items-center gap-2 overflow-x-auto overscroll-x-contain [scrollbar-width:none]",
+                children: [
+                  status && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: status }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: ui.cn(
+                        "flex min-w-0 items-center gap-2",
+                        !hasSelection && "pointer-events-none opacity-40"
+                      ),
+                      children: [
+                        actions?.map((a) => /* @__PURE__ */ jsxRuntime.jsx(SelectionBarAction, { ...a, isCompact }, a.id)),
+                        typeof children === "function" ? children(isCompact, isNarrow) : children
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        }
+      ) })
+    }
+  );
+}
+function SelectionBarAction({
+  icon: Icon,
+  label,
+  onClick,
+  disabled = false,
+  variant = "ghost",
+  tooltip,
+  testId,
+  className,
+  isCompact = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Button,
+      {
+        variant,
+        size: "sm",
+        onClick,
+        disabled,
+        "aria-label": isCompact ? label : void 0,
+        "data-testid": testId,
+        className: ui.cn(
+          "h-8 shrink-0 gap-1.5 whitespace-nowrap px-2 disabled:opacity-50 pointer-coarse:h-11",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4" }),
+          !isCompact && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: label })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: tooltip ?? label }) })
+  ] });
+}
+
+exports.DEFAULT_SELECTION_BAR_LABELS = DEFAULT_SELECTION_BAR_LABELS;
+exports.SelectionBar = SelectionBar;
+exports.SelectionBarAction = SelectionBarAction;
+//# sourceMappingURL=chunk-V4ISCZJ7.cjs.map
+//# sourceMappingURL=chunk-V4ISCZJ7.cjs.map

package/dist/chunk-V4ISCZJ7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/files/SelectionBar.tsx"],"names":["jsx","useRef","useState","useLayoutEffect","observeResize","cn","testIdOr","jsxs","X","BookOpen","Tooltip","TooltipTrigger","Button","TooltipContent"],"mappings":"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","file":"chunk-V4ISCZJ7.cjs","sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport { BookOpen, X } from 'lucide-react'\nimport { Button, Tooltip, TooltipContent, TooltipTrigger, cn } from '@arbidocs/react/ui'\nimport { testIdOr } from '../chat/test-id'\nimport { observeResize } from '../lib/observe-resize'\n\nexport interface SelectionBarActionItem {\n  id: string\n  icon: LucideIcon\n  label: string\n  onClick: () => void\n  disabled?: boolean\n  variant?: 'default' | 'outline' | 'destructive' | 'ghost' | 'secondary'\n  /** Tooltip text; falls back to `label`. */\n  tooltip?: string\n  testId?: string\n  className?: string\n}\n\n/** Container width below which the bar is \"narrow\" (phones): only the essentials stay inline. */\nconst NARROW_BELOW_PX = 480\n\n/** Every fixed string of the selection bar. Pass a partial `labels` to translate or reword. */\nexport interface SelectionBarLabels {\n  selected: string\n  clearSelection: string\n  review: string\n  selectionActions: string\n}\n\nexport const DEFAULT_SELECTION_BAR_LABELS: SelectionBarLabels = {\n  selected: 'selected',\n  clearSelection: 'Clear selection',\n  review: 'Review',\n  selectionActions: 'Selection actions',\n}\n\nexport interface SelectionBarTestIds {\n  toolbar: string\n  count: string\n  clear: string\n  review: string\n}\n\nexport interface SelectionBarProps {\n  /** Number of selected rows. The bar renders only while this is > 0 (or `status` is set). */\n  count: number\n  onClear: () => void\n  /** Primary-in-bar \"Review\" shortcut (tonal, not the view's filled primary). */\n  onReview?: () => void\n  /** Actions as data. Rendered icon-only automatically when the bar is narrow. */\n  actions?: SelectionBarActionItem[]\n  /**\n   * Free-form actions; a function receives `isCompact` (icon-only) and `isNarrow` (a phone-width\n   * container: fold secondary actions into an overflow menu). Rendered after `actions`.\n   */\n  children?: ReactNode | ((isCompact: boolean, isNarrow: boolean) => ReactNode)\n  /** Always-legible content before the actions (e.g. a running budget); never dimmed. */\n  status?: ReactNode\n  /** Singular noun shown after the count; wins over `labels.selected`. */\n  selectedLabel?: string\n  labels?: Partial<SelectionBarLabels>\n  /** Overrides for the control test ids (defaults keep the current ids). */\n  testIds?: Partial<SelectionBarTestIds>\n  className?: string\n}\n\n/**\n * SelectionBar: the floating bar that appears while rows are selected.\n *\n * Stays on ONE row: when the actions overflow it flips to compact mode (icon-only actions and a\n * count-only badge) instead of wrapping. Sticky zero-height anchor, so showing/hiding it never\n * reflows the content beneath. Every control is always visible (nothing hover-only) and 44px on\n * coarse pointers.\n */\nexport function SelectionBar(props: SelectionBarProps) {\n  if (props.count === 0 && !props.status) return null\n  return <SelectionBarInner {...props} />\n}\n\nfunction SelectionBarInner({\n  count,\n  onClear,\n  onReview,\n  actions,\n  children,\n  status,\n  selectedLabel,\n  labels,\n  testIds,\n  className,\n}: SelectionBarProps) {\n  const l = { ...DEFAULT_SELECTION_BAR_LABELS, ...labels }\n  const hasSelection = count > 0\n  const rootRef = useRef<HTMLDivElement>(null)\n  const actionsRef = useRef<HTMLDivElement>(null)\n  const [isCompact, setIsCompact] = useState(false)\n  const [isNarrow, setIsNarrow] = useState(false)\n  // Root width at which the labelled actions last overflowed. Compared against the (stable) root\n  // width, never the actions' own width, which changes when we collapse labels and would oscillate.\n  const overflowRootWidthRef = useRef(Number.POSITIVE_INFINITY)\n\n  const measureRef = useRef<() => void>(() => {})\n  measureRef.current = () => {\n    const root = rootRef.current\n    const el = actionsRef.current\n    if (!root || !el) return\n    // The bar is content-sized, so judge narrowness by the space it is given (its anchor).\n    const available = root.parentElement?.clientWidth ?? 0\n    setIsNarrow(available > 0 && available < NARROW_BELOW_PX)\n    if (!isCompact) {\n      if (el.scrollWidth > el.clientWidth + 1) {\n        overflowRootWidthRef.current = root.clientWidth\n        setIsCompact(true)\n      }\n    } else if (root.clientWidth > overflowRootWidthRef.current + 64) {\n      setIsCompact(false)\n    }\n  }\n\n  useLayoutEffect(() => {\n    measureRef.current()\n    const root = rootRef.current\n    if (!root) return\n    return observeResize(root, () => measureRef.current())\n  }, [])\n  // The bar is capped by its anchor, so its own size does not change when the actions overflow, and\n  // the actions' text widens once the web font loads. Re-measure after every render and whenever\n  // an action changes size. The measurement only sets state on a change, so this cannot loop.\n  useLayoutEffect(() => {\n    measureRef.current()\n    const inner = actionsRef.current\n    if (!inner || typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(() => measureRef.current())\n    inner.querySelectorAll('button').forEach((button) => observer.observe(button))\n    return () => observer.disconnect()\n  })\n  useLayoutEffect(() => {\n    let isCancelled = false\n    void document.fonts?.ready.then(() => {\n      if (!isCancelled) measureRef.current()\n    })\n    return () => {\n      isCancelled = true\n    }\n  }, [])\n\n  return (\n    <div\n      data-slot=\"selection-bar\"\n      className={cn('pointer-events-none sticky bottom-0 z-30 h-0', className)}\n    >\n      <div className=\"absolute inset-x-0 bottom-4 flex justify-center px-3\">\n        <div\n          ref={rootRef}\n          role=\"toolbar\"\n          aria-label={l.selectionActions}\n          data-testid={testIdOr(testIds?.toolbar, { testId: 'bulk-actions-toolbar' })}\n          data-narrow={isNarrow || undefined}\n          className=\"pointer-events-auto flex min-h-12 max-w-full items-center rounded-lg border border-border bg-popover px-2 py-1.5 shadow-xl\"\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-2 px-1\">\n            <div\n              data-testid={testIdOr(testIds?.count, { testId: 'bulk-selected-count' })}\n              aria-live=\"polite\"\n              className={cn(\n                'flex shrink-0 items-center rounded-full bg-accent text-sm font-semibold tabular-nums text-accent-foreground',\n                isCompact ? 'gap-1 px-2.5 py-1' : 'gap-2 px-3 py-1'\n              )}\n            >\n              <span>\n                {count}\n                {!isCompact && ` ${selectedLabel ?? l.selected}`}\n              </span>\n              {hasSelection && (\n                <button\n                  type=\"button\"\n                  onClick={onClear}\n                  aria-label={l.clearSelection}\n                  data-testid={testIdOr(testIds?.clear, { testId: 'bulk-clear-selection-button' })}\n                  className=\"rounded-full p-0.5 transition-colors hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:p-[15px]\"\n                >\n                  <X className=\"size-3.5\" />\n                </button>\n              )}\n            </div>\n\n            {onReview && (\n              <button\n                type=\"button\"\n                onClick={onReview}\n                aria-label={isNarrow ? l.review : undefined}\n                data-testid={testIdOr(testIds?.review, { testId: 'bulk-review-button' })}\n                className=\"flex h-8 shrink-0 items-center gap-1.5 rounded-md bg-accent px-2.5 text-sm font-medium text-accent-foreground transition-colors hover:bg-accent/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:h-11\"\n              >\n                <BookOpen className=\"size-3.5\" />\n                {!isNarrow && l.review}\n              </button>\n            )}\n\n            <div className=\"h-6 w-px shrink-0 bg-border\" />\n\n            <div\n              ref={actionsRef}\n              className=\"flex min-w-0 flex-1 items-center gap-2 overflow-x-auto overscroll-x-contain [scrollbar-width:none]\"\n            >\n              {status && <div className=\"flex shrink-0 items-center gap-2\">{status}</div>}\n              <div\n                className={cn(\n                  'flex min-w-0 items-center gap-2',\n                  !hasSelection && 'pointer-events-none opacity-40'\n                )}\n              >\n                {actions?.map((a) => (\n                  <SelectionBarAction key={a.id} {...a} isCompact={isCompact} />\n                ))}\n                {typeof children === 'function' ? children(isCompact, isNarrow) : children}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport interface SelectionBarActionProps extends Omit<SelectionBarActionItem, 'id'> {\n  /** Icon-only (the bar passes this when narrow). */\n  isCompact?: boolean\n}\n\n/** One action button in the bar: icon + label, icon-only when compact, always with a tooltip. */\nexport function SelectionBarAction({\n  icon: Icon,\n  label,\n  onClick,\n  disabled = false,\n  variant = 'ghost',\n  tooltip,\n  testId,\n  className,\n  isCompact = false,\n}: SelectionBarActionProps) {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <Button\n          variant={variant}\n          size=\"sm\"\n          onClick={onClick}\n          disabled={disabled}\n          aria-label={isCompact ? label : undefined}\n          data-testid={testId}\n          className={cn(\n            'h-8 shrink-0 gap-1.5 whitespace-nowrap px-2 disabled:opacity-50 pointer-coarse:h-11',\n            className\n          )}\n        >\n          <Icon className=\"size-4\" />\n          {!isCompact && <span className=\"text-sm\">{label}</span>}\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>{tooltip ?? label}</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n"]}

package/dist/chunk-VFUWWH52.cjs

@@ -0,0 +1,83 @@
+"use client";
+'use strict';
+
+var ui = require('@arbidocs/react/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ToneBadge.tsx
+
+// src/components/tones.ts
+var TONE_SURFACE = {
+  neutral: "bg-gray-bg text-gray-text",
+  info: "bg-blue-bg text-blue-text",
+  success: "bg-green-bg text-green-text",
+  warning: "bg-yellow-bg text-yellow-text",
+  danger: "bg-red-bg text-red-text",
+  accent: "bg-purple-bg text-purple-text",
+  ai: "bg-ai-soft text-ai-ink"
+};
+var TONE_BORDER = {
+  neutral: "border-gray-border",
+  info: "border-blue-border",
+  success: "border-green-border",
+  warning: "border-yellow-border",
+  danger: "border-red-border",
+  accent: "border-purple-border",
+  ai: "border-transparent"
+};
+var TONE_DOT = {
+  neutral: "bg-gray-text",
+  info: "bg-blue-solid",
+  success: "bg-green-solid",
+  warning: "bg-yellow-solid",
+  danger: "bg-red-solid",
+  accent: "bg-purple-solid",
+  ai: "bg-ai-ink"
+};
+function ToneBadge({
+  tone = "neutral",
+  icon,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ...rest,
+      "data-slot": "tone-badge",
+      "data-tone": tone,
+      className: ui.cn(
+        "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium",
+        TONE_SURFACE[tone],
+        TONE_BORDER[tone],
+        className
+      ),
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+}
+function Dot({ tone = "neutral", label, className, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ...rest,
+      "data-slot": "dot",
+      "data-tone": tone,
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: ui.cn("inline-block size-2 shrink-0 rounded-full", TONE_DOT[tone], className)
+    }
+  );
+}
+
+exports.Dot = Dot;
+exports.TONE_BORDER = TONE_BORDER;
+exports.TONE_SURFACE = TONE_SURFACE;
+exports.ToneBadge = ToneBadge;
+//# sourceMappingURL=chunk-VFUWWH52.cjs.map
+//# sourceMappingURL=chunk-VFUWWH52.cjs.map

package/dist/chunk-VFUWWH52.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/tones.ts","../src/components/ToneBadge.tsx"],"names":["jsxs","cn","jsx"],"mappings":";;;;;;;;AAWO,IAAM,YAAA,GAAqC;AAAA,EAChD,OAAA,EAAS,2BAAA;AAAA,EACT,IAAA,EAAM,2BAAA;AAAA,EACN,OAAA,EAAS,6BAAA;AAAA,EACT,OAAA,EAAS,+BAAA;AAAA,EACT,MAAA,EAAQ,yBAAA;AAAA,EACR,MAAA,EAAQ,+BAAA;AAAA,EACR,EAAA,EAAI;AACN;AAGO,IAAM,WAAA,GAAoC;AAAA,EAC/C,OAAA,EAAS,oBAAA;AAAA,EACT,IAAA,EAAM,oBAAA;AAAA,EACN,OAAA,EAAS,qBAAA;AAAA,EACT,OAAA,EAAS,sBAAA;AAAA,EACT,MAAA,EAAQ,mBAAA;AAAA,EACR,MAAA,EAAQ,sBAAA;AAAA,EACR,EAAA,EAAI;AACN;AAGO,IAAM,QAAA,GAAiC;AAAA,EAC5C,OAAA,EAAS,cAAA;AAAA,EACT,IAAA,EAAM,eAAA;AAAA,EACN,OAAA,EAAS,gBAAA;AAAA,EACT,OAAA,EAAS,iBAAA;AAAA,EACT,MAAA,EAAQ,cAAA;AAAA,EACR,MAAA,EAAQ,iBAAA;AAAA,EACR,EAAA,EAAI;AACN,CAAA;AC3BO,SAAS,SAAA,CAAU;AAAA,EACxB,IAAA,GAAO,SAAA;AAAA,EACP,IAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,uBACEA,eAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,WAAA,EAAU,YAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,KAAA;AAAA,QACT,oFAAA;AAAA,QACA,aAAa,IAAI,CAAA;AAAA,QACjB,YAAY,IAAI,CAAA;AAAA,QAChB;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ;AASO,SAAS,GAAA,CAAI,EAAE,IAAA,GAAO,SAAA,EAAW,OAAO,SAAA,EAAW,GAAG,MAAK,EAAa;AAC7E,EAAA,uBACEC,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,WAAA,EAAU,KAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,IAAA,EAAM,QAAQ,KAAA,GAAQ,MAAA;AAAA,MACtB,YAAA,EAAY,KAAA;AAAA,MACZ,aAAA,EAAa,QAAQ,MAAA,GAAY,IAAA;AAAA,MACjC,WAAWD,KAAA,CAAG,2CAAA,EAA6C,QAAA,CAAS,IAAI,GAAG,SAAS;AAAA;AAAA,GACtF;AAEJ","file":"chunk-VFUWWH52.cjs","sourcesContent":["/**\n * The ONE status/tone vocabulary of the blocks. `StatusPill`, `ToneBadge`, `Dot` and the plan,\n * connection and tag chips all read these maps, so a tone looks the same wherever it appears and\n * a new tone is added in one place. Every pair is a token pair checked by\n * `tokens.contrast.test.ts` (`--{hue}-text` on `--{hue}-bg`).\n */\n\n/** Semantic tones, mapped to the token palette (`--{hue}-bg|text|border`, `--ai-*`). */\nexport type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'accent' | 'ai'\n\n/** Background + text of a tinted chip. */\nexport const TONE_SURFACE: Record<Tone, string> = {\n  neutral: 'bg-gray-bg text-gray-text',\n  info: 'bg-blue-bg text-blue-text',\n  success: 'bg-green-bg text-green-text',\n  warning: 'bg-yellow-bg text-yellow-text',\n  danger: 'bg-red-bg text-red-text',\n  accent: 'bg-purple-bg text-purple-text',\n  ai: 'bg-ai-soft text-ai-ink',\n}\n\n/** Border of a tinted chip (the AI tint has none). */\nexport const TONE_BORDER: Record<Tone, string> = {\n  neutral: 'border-gray-border',\n  info: 'border-blue-border',\n  success: 'border-green-border',\n  warning: 'border-yellow-border',\n  danger: 'border-red-border',\n  accent: 'border-purple-border',\n  ai: 'border-transparent',\n}\n\n/** Solid fill of a status dot. */\nexport const TONE_DOT: Record<Tone, string> = {\n  neutral: 'bg-gray-text',\n  info: 'bg-blue-solid',\n  success: 'bg-green-solid',\n  warning: 'bg-yellow-solid',\n  danger: 'bg-red-solid',\n  accent: 'bg-purple-solid',\n  ai: 'bg-ai-ink',\n}\n","import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '@arbidocs/react/ui'\nimport { TONE_BORDER, TONE_DOT, TONE_SURFACE, type Tone } from './tones'\n\nexport type { Tone }\n\nexport interface ToneBadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  tone?: Tone\n  /** Leading glyph or dot. */\n  icon?: ReactNode\n  children: ReactNode\n}\n\n/** A small tinted label. The host decides the tone and the words (status, level, priority...). */\nexport function ToneBadge({\n  tone = 'neutral',\n  icon,\n  children,\n  className,\n  ...rest\n}: ToneBadgeProps) {\n  return (\n    <span\n      {...rest}\n      data-slot=\"tone-badge\"\n      data-tone={tone}\n      className={cn(\n        'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium',\n        TONE_SURFACE[tone],\n        TONE_BORDER[tone],\n        className\n      )}\n    >\n      {icon}\n      {children}\n    </span>\n  )\n}\n\nexport interface DotProps extends HTMLAttributes<HTMLSpanElement> {\n  tone?: Tone\n  /** Accessible name; without it the dot is decorative (`aria-hidden`). */\n  label?: string\n}\n\n/** A solid status dot in a tone. */\nexport function Dot({ tone = 'neutral', label, className, ...rest }: DotProps) {\n  return (\n    <span\n      {...rest}\n      data-slot=\"dot\"\n      data-tone={tone}\n      role={label ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      className={cn('inline-block size-2 shrink-0 rounded-full', TONE_DOT[tone], className)}\n    />\n  )\n}\n"]}

package/dist/chunk-VILAPTCB.js

@@ -0,0 +1,259 @@
+"use client";
+import { testIdOr } from './chunk-7F6CBP3Z.js';
+import { useId, useMemo, useState } from 'react';
+import { Info } from 'lucide-react';
+import { Input, cn, Tooltip, TooltipTrigger, TooltipContent } from '@arbidocs/react/ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/lib/password-strength.ts
+var STRONG_BITS = 75;
+function alphabetSize(password) {
+  return (/[a-z]/.test(password) ? 26 : 0) + (/[A-Z]/.test(password) ? 26 : 0) + (/\d/.test(password) ? 10 : 0) + (/[^a-zA-Z0-9]/.test(password) ? 33 : 0);
+}
+function estimateEntropyBits(password) {
+  return password.length * Math.log2(Math.max(alphabetSize(password), 2));
+}
+function getPasswordStrength(password, meetsRequirements) {
+  if (!password || !meetsRequirements) return { score: 0, label: "" };
+  if (estimateEntropyBits(password) >= STRONG_BITS) {
+    return { score: 2, label: "Password meets all criteria" };
+  }
+  return { score: 1, label: "Password meets minimal criteria" };
+}
+function getStrengthHint(password) {
+  if (!password) return "";
+  const hasSymbol = /[^a-zA-Z0-9]/.test(password);
+  const hasUpper = /[A-Z]/.test(password);
+  const perChar = Math.log2(Math.max(alphabetSize(password), 2));
+  const missing = Math.max(0, STRONG_BITS - password.length * perChar);
+  if (missing === 0) return "Long enough to resist guessing.";
+  const moreChars = Math.ceil(missing / perChar);
+  const goal = `Add ${moreChars} more character${moreChars === 1 ? "" : "s"} to make a strong password`;
+  const unused = !hasSymbol ? "a symbol" : !hasUpper ? "a capital" : null;
+  return unused ? `${goal} \u2014 or ${unused}, which counts for more.` : `${goal}.`;
+}
+var DEFAULT_PASSWORD_STRENGTH_INPUT_LABELS = {
+  password: "Password",
+  confirmPassword: "Confirm Password",
+  passwordsMatch: "Passwords match",
+  passwordsDoNotMatch: "Passwords do not match",
+  strengthInfo: (strength) => `${strength}. How to strengthen it`,
+  strengthFallbackHint: "Long enough to resist guessing."
+};
+var STRENGTH_STYLE = {
+  0: { bar: "bg-red-text", text: "text-red-text", width: "33%" },
+  1: { bar: "bg-primary", text: "text-primary", width: "66%" },
+  2: { bar: "bg-green-text", text: "text-green-text", width: "100%" }
+};
+function Label({ htmlFor, children }) {
+  return /* @__PURE__ */ jsxs("label", { htmlFor, className: "mb-1 block text-sm font-medium text-foreground", children: [
+    children,
+    " ",
+    /* @__PURE__ */ jsx("span", { className: "text-red-text", children: "*" })
+  ] });
+}
+function PasswordStrengthInput({
+  password,
+  confirmPassword = "",
+  onPasswordChange,
+  onConfirmPasswordChange,
+  showConfirmation = false,
+  disabled = false,
+  passwordLabel,
+  confirmLabel,
+  layout = "stacked",
+  autoFocus = false,
+  showStrengthIndicator = true,
+  emptyStateMessage,
+  getUnmetRequirement,
+  labels,
+  testIds
+}) {
+  const confirmPasswordId = useId();
+  const mismatchId = `${confirmPasswordId}-mismatch`;
+  const passwordId = useId();
+  const l = useMemo(() => ({ ...DEFAULT_PASSWORD_STRENGTH_INPUT_LABELS, ...labels }), [labels]);
+  const firstUnmetRequirement = useMemo(
+    () => getUnmetRequirement(password),
+    [getUnmetRequirement, password]
+  );
+  const hint = useMemo(() => getStrengthHint(password), [password]);
+  const strength = useMemo(
+    () => getPasswordStrength(password, firstUnmetRequirement === null),
+    [password, firstUnmetRequirement]
+  );
+  const strengthStyle = STRENGTH_STYLE[strength.score];
+  const [confirmBlurred, setConfirmBlurred] = useState(false);
+  const passwordsMatch = !!confirmPassword && password === confirmPassword;
+  const showConfirmFeedback = showConfirmation && confirmBlurred && !!confirmPassword;
+  const passwordMismatch = showConfirmFeedback && !passwordsMatch;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-slot": "password-strength-input", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          layout === "side-by-side" ? "grid grid-cols-1 gap-4 sm:grid-cols-2" : "space-y-3"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: passwordId, children: passwordLabel ?? l.password }),
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "password",
+                  id: passwordId,
+                  name: "password",
+                  placeholder: "",
+                  value: password,
+                  onChange: (e) => onPasswordChange(e.target.value),
+                  disabled,
+                  autoFocus,
+                  autoComplete: showConfirmation ? "new-password" : "current-password",
+                  required: true,
+                  className: cn(
+                    "placeholder:text-muted-foreground",
+                    showStrengthIndicator && "rounded-b-none border-b-0"
+                  ),
+                  "data-testid": testIdOr(testIds?.input, { testId: "password-input" })
+                }
+              ),
+              showStrengthIndicator && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-testid": testIdOr(testIds?.strengthIndicator, {
+                    testId: "password-strength-indicator"
+                  }),
+                  children: /* @__PURE__ */ jsx("div", { className: "h-1 w-full rounded-b bg-border", children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "h-full rounded-b transition-all duration-300",
+                        password ? strengthStyle.bar : "bg-border"
+                      ),
+                      style: { width: password ? strengthStyle.width : "0%" },
+                      "data-testid": testIdOr(testIds?.strengthBar, { testId: "strength-bar" })
+                    }
+                  ) })
+                }
+              )
+            ] })
+          ] }),
+          showConfirmation && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: confirmPasswordId, children: confirmLabel ?? l.confirmPassword }),
+            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "password",
+                  id: confirmPasswordId,
+                  name: "confirm-password",
+                  placeholder: "",
+                  value: confirmPassword,
+                  onChange: (e) => {
+                    onConfirmPasswordChange?.(e.target.value);
+                    setConfirmBlurred(false);
+                  },
+                  onBlur: () => setConfirmBlurred(true),
+                  disabled,
+                  autoComplete: "new-password",
+                  "aria-invalid": passwordMismatch || void 0,
+                  "aria-describedby": showStrengthIndicator ? mismatchId : void 0,
+                  required: true,
+                  className: cn(
+                    "placeholder:text-muted-foreground",
+                    showStrengthIndicator && "rounded-b-none border-b-0",
+                    passwordMismatch && "border-red-border"
+                  ),
+                  "data-testid": testIdOr(testIds?.confirmInput, { testId: "confirm-password-input" })
+                }
+              ),
+              showStrengthIndicator && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-testid": testIdOr(testIds?.confirmIndicator, {
+                    testId: "confirm-password-indicator"
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "h-1 w-full rounded-b bg-border", children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "h-full rounded-b transition-all duration-300",
+                          showConfirmFeedback ? passwordsMatch ? "bg-green-text" : "bg-red-text" : "bg-border"
+                        ),
+                        style: { width: showConfirmFeedback ? "100%" : "0%" },
+                        "data-testid": testIdOr(testIds?.confirmStrengthBar, {
+                          testId: "confirm-strength-bar"
+                        })
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        id: mismatchId,
+                        "aria-live": "polite",
+                        className: cn(
+                          "mt-0.5 h-4 text-sm font-medium",
+                          showConfirmFeedback ? passwordsMatch ? "text-green-text" : "text-red-text" : "text-transparent"
+                        ),
+                        "data-testid": testIdOr(testIds?.mismatchError, {
+                          testId: "password-mismatch-error"
+                        }),
+                        children: showConfirmFeedback ? passwordsMatch ? l.passwordsMatch : l.passwordsDoNotMatch : " "
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    showConfirmation && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-5 text-sm leading-5",
+        "data-testid": testIdOr(testIds?.requirements, { testId: "password-requirements" }),
+        children: password ? firstUnmetRequirement ? /* @__PURE__ */ jsxs("p", { className: "truncate text-red-text", children: [
+          "\u2717 ",
+          firstUnmetRequirement
+        ] }) : /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 0, children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-label": l.strengthInfo(strength.label),
+              className: cn(
+                "inline-flex items-center gap-1 truncate rounded font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                strengthStyle.text
+              ),
+              "data-testid": testIdOr(testIds?.strengthInfoButton, {
+                testId: "strength-info-button"
+              }),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    "data-testid": testIdOr(testIds?.strengthLabel, { testId: "strength-label" }),
+                    children: [
+                      "\u2713 ",
+                      strength.label
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(Info, { className: "h-3.5 w-3.5 opacity-80" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", className: "max-w-[260px] text-center", children: hint || l.strengthFallbackHint })
+        ] }) : /* @__PURE__ */ jsx("p", { className: "truncate text-muted-foreground", children: emptyStateMessage || "\xA0" })
+      }
+    )
+  ] });
+}
+
+export { DEFAULT_PASSWORD_STRENGTH_INPUT_LABELS, PasswordStrengthInput };
+//# sourceMappingURL=chunk-VILAPTCB.js.map
+//# sourceMappingURL=chunk-VILAPTCB.js.map

package/dist/chunk-VILAPTCB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/password-strength.ts","../src/auth/PasswordStrengthInput.tsx"],"names":[],"mappings":"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","file":"chunk-VILAPTCB.js","sourcesContent":["/** Bits of estimated entropy at which the meter reads \"Strong\". */\nexport const STRONG_BITS = 75\n\nexport type StrengthScore = 0 | 1 | 2\n\nexport interface PasswordStrength {\n  /** 0 = rejected, 1 = accepted (minimal), 2 = strong. */\n  score: StrengthScore\n  label: string\n}\n\n/** Size of the character alphabet a password draws from (lower, upper, digit, symbol). */\nfunction alphabetSize(password: string): number {\n  return (\n    (/[a-z]/.test(password) ? 26 : 0) +\n    (/[A-Z]/.test(password) ? 26 : 0) +\n    (/\\d/.test(password) ? 10 : 0) +\n    (/[^a-zA-Z0-9]/.test(password) ? 33 : 0)\n  )\n}\n\n/**\n * Estimated entropy in bits (length x log2(alphabet)). Length is the dominant term, which is also\n * what NIST SP 800-63B recommends over composition rules: a 25-character passphrase of plain words\n * outranks \"Password123!\".\n */\nexport function estimateEntropyBits(password: string): number {\n  return password.length * Math.log2(Math.max(alphabetSize(password), 2))\n}\n\n/**\n * Three states matching the three colours the form uses: rejected (does not meet the host's\n * requirements), accepted (\"could be better\") and strong.\n */\nexport function getPasswordStrength(\n  password: string,\n  meetsRequirements: boolean\n): PasswordStrength {\n  // No label for rejected: the requirement line already says what is missing.\n  if (!password || !meetsRequirements) return { score: 0, label: '' }\n  if (estimateEntropyBits(password) >= STRONG_BITS) {\n    return { score: 2, label: 'Password meets all criteria' }\n  }\n  return { score: 1, label: 'Password meets minimal criteria' }\n}\n\n/**\n * Advice computed from the same entropy estimate as the meter, so the hint can never tell you to\n * do something that would not actually move it.\n */\nexport function getStrengthHint(password: string): string {\n  if (!password) return ''\n  const hasSymbol = /[^a-zA-Z0-9]/.test(password)\n  const hasUpper = /[A-Z]/.test(password)\n  const perChar = Math.log2(Math.max(alphabetSize(password), 2))\n  const missing = Math.max(0, STRONG_BITS - password.length * perChar)\n  if (missing === 0) return 'Long enough to resist guessing.'\n\n  const moreChars = Math.ceil(missing / perChar)\n  const goal = `Add ${moreChars} more character${moreChars === 1 ? '' : 's'} to make a strong password`\n  const unused = !hasSymbol ? 'a symbol' : !hasUpper ? 'a capital' : null\n  return unused ? `${goal} — or ${unused}, which counts for more.` : `${goal}.`\n}\n","import { useMemo, useState, useId } from 'react'\nimport { Info } from 'lucide-react'\nimport { cn, Input, Tooltip, TooltipContent, TooltipTrigger } from '@arbidocs/react/ui'\nimport { getPasswordStrength, getStrengthHint } from '../lib/password-strength'\nimport { testIdOr } from '../chat/test-id'\n\n/** Overridable ids of the password input; defaults are the current ids. */\nexport type PasswordStrengthInputTestIds = Partial<\n  Record<\n    | 'input'\n    | 'strengthIndicator'\n    | 'strengthBar'\n    | 'confirmInput'\n    | 'confirmIndicator'\n    | 'confirmStrengthBar'\n    | 'mismatchError'\n    | 'requirements'\n    | 'strengthInfoButton'\n    | 'strengthLabel',\n    string\n  >\n>\n\n/** Every fixed string of the password input. `passwordLabel` / `confirmLabel` props win. */\nexport interface PasswordStrengthInputLabels {\n  password: string\n  confirmPassword: string\n  passwordsMatch: string\n  passwordsDoNotMatch: string\n  /** Accessible name of the strength button; `strength` is the meter's label. */\n  strengthInfo: (strength: string) => string\n  /** Tooltip when the password is acceptable and there is no specific hint. */\n  strengthFallbackHint: string\n}\n\nexport const DEFAULT_PASSWORD_STRENGTH_INPUT_LABELS: PasswordStrengthInputLabels = {\n  password: 'Password',\n  confirmPassword: 'Confirm Password',\n  passwordsMatch: 'Passwords match',\n  passwordsDoNotMatch: 'Passwords do not match',\n  strengthInfo: (strength) => `${strength}. How to strengthen it`,\n  strengthFallbackHint: 'Long enough to resist guessing.',\n}\n\nexport interface PasswordStrengthInputProps {\n  labels?: Partial<PasswordStrengthInputLabels>\n  password: string\n  confirmPassword?: string\n  onPasswordChange: (value: string) => void\n  onConfirmPasswordChange?: (value: string) => void\n  /** Show the confirmation field, the match indicator and the requirement line. */\n  showConfirmation?: boolean\n  disabled?: boolean\n  passwordLabel?: string\n  confirmLabel?: string\n  layout?: 'stacked' | 'side-by-side'\n  autoFocus?: boolean\n  showStrengthIndicator?: boolean\n  /** Shown in the requirements line while no password is entered. */\n  emptyStateMessage?: string\n  /**\n   * The host's password policy: returns the first unmet requirement (as a message), or `null` when\n   * the password is acceptable. Kept in the host so the policy has one source of truth.\n   */\n  getUnmetRequirement: (password: string) => string | null\n  /** Part ids; defaults are the current ids. */\n  testIds?: PasswordStrengthInputTestIds\n}\n\nconst STRENGTH_STYLE = {\n  0: { bar: 'bg-red-text', text: 'text-red-text', width: '33%' },\n  1: { bar: 'bg-primary', text: 'text-primary', width: '66%' },\n  2: { bar: 'bg-green-text', text: 'text-green-text', width: '100%' },\n} as const\n\nfunction Label({ htmlFor, children }: { htmlFor: string; children: string }) {\n  return (\n    <label htmlFor={htmlFor} className=\"mb-1 block text-sm font-medium text-foreground\">\n      {children} <span className=\"text-red-text\">*</span>\n    </label>\n  )\n}\n\n/**\n * Password input with a strength meter and optional confirmation field. The match verdict only\n * appears once the confirmation field loses focus, so the user is never nagged mid-keystroke, and\n * the requirement line has a fixed height so typing never shifts the form.\n */\nexport function PasswordStrengthInput({\n  password,\n  confirmPassword = '',\n  onPasswordChange,\n  onConfirmPasswordChange,\n  showConfirmation = false,\n  disabled = false,\n  passwordLabel,\n  confirmLabel,\n  layout = 'stacked',\n  autoFocus = false,\n  showStrengthIndicator = true,\n  emptyStateMessage,\n  getUnmetRequirement,\n  labels,\n  testIds,\n}: PasswordStrengthInputProps) {\n  const confirmPasswordId = useId()\n  const mismatchId = `${confirmPasswordId}-mismatch`\n  const passwordId = useId()\n  const l = useMemo(() => ({ ...DEFAULT_PASSWORD_STRENGTH_INPUT_LABELS, ...labels }), [labels])\n  const firstUnmetRequirement = useMemo(\n    () => getUnmetRequirement(password),\n    [getUnmetRequirement, password]\n  )\n  const hint = useMemo(() => getStrengthHint(password), [password])\n  const strength = useMemo(\n    () => getPasswordStrength(password, firstUnmetRequirement === null),\n    [password, firstUnmetRequirement]\n  )\n  const strengthStyle = STRENGTH_STYLE[strength.score]\n\n  const [confirmBlurred, setConfirmBlurred] = useState(false)\n  const passwordsMatch = !!confirmPassword && password === confirmPassword\n  const showConfirmFeedback = showConfirmation && confirmBlurred && !!confirmPassword\n  const passwordMismatch = showConfirmFeedback && !passwordsMatch\n\n  return (\n    <div className=\"space-y-2\" data-slot=\"password-strength-input\">\n      <div\n        className={cn(\n          layout === 'side-by-side' ? 'grid grid-cols-1 gap-4 sm:grid-cols-2' : 'space-y-3'\n        )}\n      >\n        <div>\n          <Label htmlFor={passwordId}>{passwordLabel ?? l.password}</Label>\n          <div className=\"relative\">\n            <Input\n              type=\"password\"\n              id={passwordId}\n              name=\"password\"\n              placeholder=\"\"\n              value={password}\n              onChange={(e) => onPasswordChange(e.target.value)}\n              disabled={disabled}\n              autoFocus={autoFocus}\n              autoComplete={showConfirmation ? 'new-password' : 'current-password'}\n              required\n              className={cn(\n                'placeholder:text-muted-foreground',\n                showStrengthIndicator && 'rounded-b-none border-b-0'\n              )}\n              data-testid={testIdOr(testIds?.input, { testId: 'password-input' })}\n            />\n            {showStrengthIndicator && (\n              <div\n                data-testid={testIdOr(testIds?.strengthIndicator, {\n                  testId: 'password-strength-indicator',\n                })}\n              >\n                <div className=\"h-1 w-full rounded-b bg-border\">\n                  <div\n                    className={cn(\n                      'h-full rounded-b transition-all duration-300',\n                      password ? strengthStyle.bar : 'bg-border'\n                    )}\n                    style={{ width: password ? strengthStyle.width : '0%' }}\n                    data-testid={testIdOr(testIds?.strengthBar, { testId: 'strength-bar' })}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n\n        {showConfirmation && (\n          <div>\n            <Label htmlFor={confirmPasswordId}>{confirmLabel ?? l.confirmPassword}</Label>\n            <div className=\"relative\">\n              <Input\n                type=\"password\"\n                id={confirmPasswordId}\n                name=\"confirm-password\"\n                placeholder=\"\"\n                value={confirmPassword}\n                onChange={(e) => {\n                  onConfirmPasswordChange?.(e.target.value)\n                  // Hide the verdict while the user is editing again.\n                  setConfirmBlurred(false)\n                }}\n                onBlur={() => setConfirmBlurred(true)}\n                disabled={disabled}\n                autoComplete=\"new-password\"\n                aria-invalid={passwordMismatch || undefined}\n                aria-describedby={showStrengthIndicator ? mismatchId : undefined}\n                required\n                className={cn(\n                  'placeholder:text-muted-foreground',\n                  showStrengthIndicator && 'rounded-b-none border-b-0',\n                  passwordMismatch && 'border-red-border'\n                )}\n                data-testid={testIdOr(testIds?.confirmInput, { testId: 'confirm-password-input' })}\n              />\n              {showStrengthIndicator && (\n                <div\n                  data-testid={testIdOr(testIds?.confirmIndicator, {\n                    testId: 'confirm-password-indicator',\n                  })}\n                >\n                  <div className=\"h-1 w-full rounded-b bg-border\">\n                    <div\n                      className={cn(\n                        'h-full rounded-b transition-all duration-300',\n                        showConfirmFeedback\n                          ? passwordsMatch\n                            ? 'bg-green-text'\n                            : 'bg-red-text'\n                          : 'bg-border'\n                      )}\n                      style={{ width: showConfirmFeedback ? '100%' : '0%' }}\n                      data-testid={testIdOr(testIds?.confirmStrengthBar, {\n                        testId: 'confirm-strength-bar',\n                      })}\n                    />\n                  </div>\n                  <p\n                    id={mismatchId}\n                    aria-live=\"polite\"\n                    className={cn(\n                      'mt-0.5 h-4 text-sm font-medium',\n                      showConfirmFeedback\n                        ? passwordsMatch\n                          ? 'text-green-text'\n                          : 'text-red-text'\n                        : 'text-transparent'\n                    )}\n                    data-testid={testIdOr(testIds?.mismatchError, {\n                      testId: 'password-mismatch-error',\n                    })}\n                  >\n                    {showConfirmFeedback\n                      ? passwordsMatch\n                        ? l.passwordsMatch\n                        : l.passwordsDoNotMatch\n                      : ' '}\n                  </p>\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n\n      {showConfirmation && (\n        <div\n          className=\"h-5 text-sm leading-5\"\n          data-testid={testIdOr(testIds?.requirements, { testId: 'password-requirements' })}\n        >\n          {password ? (\n            firstUnmetRequirement ? (\n              <p className=\"truncate text-red-text\">✗ {firstUnmetRequirement}</p>\n            ) : (\n              <Tooltip delayDuration={0}>\n                <TooltipTrigger asChild>\n                  <button\n                    type=\"button\"\n                    aria-label={l.strengthInfo(strength.label)}\n                    className={cn(\n                      'inline-flex items-center gap-1 truncate rounded font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',\n                      strengthStyle.text\n                    )}\n                    data-testid={testIdOr(testIds?.strengthInfoButton, {\n                      testId: 'strength-info-button',\n                    })}\n                  >\n                    <span\n                      data-testid={testIdOr(testIds?.strengthLabel, { testId: 'strength-label' })}\n                    >\n                      ✓ {strength.label}\n                    </span>\n                    <Info className=\"h-3.5 w-3.5 opacity-80\" />\n                  </button>\n                </TooltipTrigger>\n                <TooltipContent side=\"bottom\" className=\"max-w-[260px] text-center\">\n                  {hint || l.strengthFallbackHint}\n                </TooltipContent>\n              </Tooltip>\n            )\n          ) : (\n            <p className=\"truncate text-muted-foreground\">{emptyStateMessage || ' '}</p>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n"]}