@lerianstudio/sindarian-ui 1.2.0 → 1.3.0-beta.1

package/dist/components/form/renderable-label.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasRenderableLabel = hasRenderableLabel;
+const react_1 = require("react");
+/**
+ * Does this label put readable content INSIDE the label element — i.e. does it
+ * give the control an accessible name?
+ *
+ * Ceiling, on purpose: a non-fragment element always counts, even an empty one.
+ * We cannot render a component to find out whether it emits text, so
+ * `label={<EmptyThing />}` is accepted. Fragments ARE unwrapped, since they add
+ * no markup of their own and `<></>` is a plausible way to say "no label".
+ *
+ * A PORTAL DOES NOT COUNT. It is the one node that renders its content
+ * somewhere else in the DOM — by definition outside the label subtree — so the
+ * label element itself stays empty and names nothing. The content is visible on
+ * screen, which is exactly what makes this worth guarding: it looks labelled
+ * and is silent to a screen reader. Pass `aria-label` when the visible text
+ * lives in a portal.
+ *
+ * BRANCH ORDER IS LOAD-BEARING — element before portal before collection:
+ * `Children.toArray` hands a portal straight back unchanged, so reaching the
+ * collection branch with one would recurse forever. The portal branch is the
+ * crash guard as much as the verdict. Every field in this directory shares this
+ * one copy precisely so that ordering cannot drift.
+ */
+function hasRenderableLabel(label) {
+    if (label === null || label === undefined || typeof label === 'boolean') {
+        return false;
+    }
+    // Empty AND whitespace-only strings render a label box with nothing to
+    // announce, so both count as absent. A number (`0`) is a real label.
+    if (typeof label === 'string')
+        return label.trim() !== '';
+    if (typeof label === 'number' || typeof label === 'bigint')
+        return true;
+    if ((0, react_1.isValidElement)(label)) {
+        return label.type === react_1.Fragment
+            ? hasRenderableLabel(label.props?.children ?? null)
+            : true;
+    }
+    // Portals and any other React-internal node that is not an element: their
+    // content lands outside this subtree (or is unknowable), so it cannot name
+    // the control. Must stay ABOVE the collection branch: isValidElement is false
+    // for a portal and Children.toArray hands the identical node straight back,
+    // so recursing on it would never terminate.
+    if (typeof label === 'object' && '$$typeof' in label)
+        return false;
+    const children = react_1.Children.toArray(label);
+    // Belt for anything else toArray cannot break down: no progress left to make,
+    // and nothing we can confirm renders in place, so treat it as absent rather
+    // than recurse forever.
+    if (children.length === 1 && children[0] === label)
+        return false;
+    // Arrays and other iterables: renderable only if some child is.
+    return children.some((child) => hasRenderableLabel(child));
+}

package/dist/components/form/textarea-field/index.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { Control, FieldValues, Path } from 'react-hook-form';
+import { type RenderableLabel } from '../../../components/form/renderable-label';
+type TextareaFieldOwnProps<T extends FieldValues = FieldValues> = {
+    control: Control<T>;
+    name: Path<T>;
+    description?: ReactNode;
+    placeholder?: string;
+    tooltip?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    rows?: number;
+    className?: string;
+    'data-testid'?: string;
+};
+/**
+ * A control with no accessible name is invisible to screen readers, so the type
+ * makes one mandatory: either a visible `label`, or an `aria-label` when the
+ * design calls for a bare textarea.
+ */
+export type TextareaFieldProps<T extends FieldValues = FieldValues> = TextareaFieldOwnProps<T> & ({
+    label: RenderableLabel;
+    'aria-label'?: string;
+} | {
+    label?: never;
+    'aria-label': string;
+});
+export declare const TextareaField: <T extends FieldValues = FieldValues>({ control, name, label, description, placeholder, tooltip, required, disabled, readOnly, rows, className, "data-testid": dataTestId, "aria-label": ariaLabelProp }: TextareaFieldProps<T>) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/textarea-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/textarea-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAY5D,OAAO,EAEL,KAAK,eAAe,EACrB,MAAM,oCAAoC,CAAA;AAE3C,KAAK,qBAAqB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAChE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAA;IACb,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAChE,qBAAqB,CAAC,CAAC,CAAC,GACtB,CACI;IAAE,KAAK,EAAE,eAAe,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GACjD;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,CAC1C,CAAA;AAEL,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,oKAchE,kBAAkB,CAAC,CAAC,CAAC,gCAkDvB,CAAA"}

package/dist/components/form/textarea-field/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextareaField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const form_1 = require("../../../components/ui/form");
+const textarea_1 = require("../../../components/ui/textarea");
+const renderable_label_1 = require("../../../components/form/renderable-label");
+const TextareaField = ({ control, name, label, description, placeholder, tooltip, required, disabled, readOnly, rows, className, 'data-testid': dataTestId, 'aria-label': ariaLabelProp }) => {
+    const showLabel = (0, renderable_label_1.hasRenderableLabel)(label);
+    // An empty or whitespace-only aria-label is worse than none: it names the
+    // control "". Drop it so the attribute never reaches the DOM.
+    const ariaLabel = ariaLabelProp?.trim() ? ariaLabelProp : undefined;
+    // The type cannot rule out `label=""`, so this is the only signal a developer
+    // gets that the control shipped nameless.
+    if (process.env.NODE_ENV !== 'production' && !showLabel && !ariaLabel) {
+        console.error(`TextareaField "${name}" has no accessible name: pass a non-empty label or aria-label.`);
+    }
+    return ((0, jsx_runtime_1.jsx)(form_1.FormField, { control: control, name: name, 
+        // Controller-level, not just on the element: this is what keeps a
+        // disabled field out of the submitted values.
+        disabled: disabled, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [showLabel && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : undefined, children: label })), (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { placeholder: placeholder, readOnly: readOnly, rows: rows, className: className, "data-testid": dataTestId, "aria-label": ariaLabel, ...field }) }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] })) }));
+};
+exports.TextareaField = TextareaField;

package/dist/components/table/id-table-cell.js

@@ -1,16 +1,19 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IdTableCell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const table_1 = require("../../components/ui/table");
 const tooltip_1 = require("../../components/ui/tooltip");
-const lodash_1 = require("lodash");
+const truncate_js_1 = __importDefault(require("lodash/truncate.js"));
 const lucide_react_1 = require("lucide-react");
 const IdTableCell = ({ id, onCopy, ...others }) => {
     const handleCopyToClipboard = () => {
         navigator.clipboard.writeText(id);
         onCopy?.(id);
     };
-    return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { onClick: handleCopyToClipboard, ...others, children: (0, jsx_runtime_1.jsxs)(table_1.TableCellWrapper, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { delayDuration: 300, children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { children: (0, lodash_1.truncate)(id, { length: 16 }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { children: id })] }) }), (0, jsx_runtime_1.jsx)(table_1.TableCellAction, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "size-3.5" }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { onClick: handleCopyToClipboard, ...others, children: (0, jsx_runtime_1.jsxs)(table_1.TableCellWrapper, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { delayDuration: 300, children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { children: (0, truncate_js_1.default)(id, { length: 16 }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { children: id })] }) }), (0, jsx_runtime_1.jsx)(table_1.TableCellAction, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { className: "size-3.5" }) })] }) }));
 };
 exports.IdTableCell = IdTableCell;

package/dist/components/ui/accordion/index.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): React.JSX.Element;
+/**
+ * `asChild` is deliberately omitted: the trigger always renders the caller's
+ * children PLUS the chevron, and Radix's Slot cannot merge onto two children —
+ * it throws at runtime. Legacy sindarian-x carried the same two-child shape, so
+ * `asChild` never worked there either; here it is a compile error instead.
+ */
+declare function AccordionTrigger({ className, children, ...props }: Omit<React.ComponentProps<typeof AccordionPrimitive.Trigger>, 'asChild'>): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): React.JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/accordion/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAK/D,iBAAS,SAAS,CAAC,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,qBAEtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,qBAQtD;AAED;;;;;GAKG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,qBAgB1E;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,qBAUzD;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/ui/accordion/index.js

@@ -0,0 +1,62 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = Accordion;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;
+exports.AccordionContent = AccordionContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AccordionPrimitive = __importStar(require("@radix-ui/react-accordion"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils");
+function Accordion({ ...props }) {
+    return (0, jsx_runtime_1.jsx)(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: (0, utils_1.cn)('border-b last:border-b-0', className), ...props }));
+}
+/**
+ * `asChild` is deliberately omitted: the trigger always renders the caller's
+ * children PLUS the chevron, and Radix's Slot cannot merge onto two children —
+ * it throws at runtime. Legacy sindarian-x carried the same two-child shape, so
+ * `asChild` never worked there either; here it is a compile error instead.
+ */
+function AccordionTrigger({ className, children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Header, { className: "flex", children: (0, jsx_runtime_1.jsxs)(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: (0, utils_1.cn)('focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-colors outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180', className), ...props, children: [children, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })] }) }));
+}
+function AccordionContent({ className, children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm", ...props, children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('pt-0 pb-4', className), children: children }) }));
+}

package/dist/components/ui/alert-dialog/index.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): React.JSX.Element;
+declare function AlertDialogContent({ className, container, forceMount, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & Pick<React.ComponentProps<typeof AlertDialogPrimitive.Portal>, 'container' | 'forceMount'>): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>): React.JSX.Element;
+declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): React.JSX.Element;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/alert-dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/alert-dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAKpE,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,qBAExD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,qBAI3D;AAED,iBAAS,iBAAiB,CAAC,EACzB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,qBAI1D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,qBAQ3D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAI1D,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,EACxD,WAAW,GAAG,YAAY,CAC3B,qBAiBF;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,qBAQzD;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,WAAW,CAAC,qBAQ/D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,qBAQ1D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,qBAQ1D;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EAClB,CAAA"}

package/dist/components/ui/alert-dialog/index.js

@@ -0,0 +1,84 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertDialog = AlertDialog;
+exports.AlertDialogPortal = AlertDialogPortal;
+exports.AlertDialogOverlay = AlertDialogOverlay;
+exports.AlertDialogTrigger = AlertDialogTrigger;
+exports.AlertDialogContent = AlertDialogContent;
+exports.AlertDialogHeader = AlertDialogHeader;
+exports.AlertDialogFooter = AlertDialogFooter;
+exports.AlertDialogTitle = AlertDialogTitle;
+exports.AlertDialogDescription = AlertDialogDescription;
+exports.AlertDialogAction = AlertDialogAction;
+exports.AlertDialogCancel = AlertDialogCancel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AlertDialogPrimitive = __importStar(require("@radix-ui/react-alert-dialog"));
+const button_1 = require("../../../components/ui/button");
+const utils_1 = require("../../../lib/utils");
+function AlertDialog({ ...props }) {
+    return (0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({ ...props }) {
+    return ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props }));
+}
+function AlertDialogPortal({ ...props }) {
+    return ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props }));
+}
+function AlertDialogOverlay({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Overlay, { "data-slot": "alert-dialog-overlay", className: (0, utils_1.cn)('dialog-overlay', className), ...props }));
+}
+function AlertDialogContent({ className, container, forceMount, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(AlertDialogPortal, { container: container, forceMount: forceMount, children: [(0, jsx_runtime_1.jsx)(AlertDialogOverlay, { forceMount: forceMount }), (0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", className: (0, utils_1.cn)('dialog-content', className), forceMount: forceMount, ...props })] }));
+}
+function AlertDialogHeader({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "alert-dialog-header", className: (0, utils_1.cn)('dialog-header', className), ...props }));
+}
+function AlertDialogFooter({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "alert-dialog-footer", className: (0, utils_1.cn)('dialog-footer', className), ...props }));
+}
+function AlertDialogTitle({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: (0, utils_1.cn)('dialog-title', className), ...props }));
+}
+function AlertDialogDescription({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: (0, utils_1.cn)('dialog-description', className), ...props }));
+}
+function AlertDialogAction({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Action, { "data-slot": "alert-dialog-action", className: (0, utils_1.cn)((0, button_1.buttonVariants)(), className), ...props }));
+}
+function AlertDialogCancel({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(AlertDialogPrimitive.Cancel, { "data-slot": "alert-dialog-cancel", className: (0, utils_1.cn)((0, button_1.buttonVariants)({ variant: 'outline' }), className), ...props }));
+}

package/dist/components/ui/autocomplete/index.js

@@ -56,7 +56,7 @@ const utils_1 = require("../../../lib/utils");
 const separator_1 = require("../separator");
 const cmdk_1 = require("cmdk");
 const use_click_away_1 = require("../../../hooks/use-click-away");
-const lodash_1 = require("lodash");
+const isNil_js_1 = __importDefault(require("lodash/isNil.js"));
 const AutocompleteContext = react_1.default.createContext({
     value: [],
     onValueChange: (values) => values,
@@ -107,7 +107,7 @@ function AutocompleteValue({ ref, className, value: valueProp, onValueChange, on
     const { value, showValue, options, readOnly, disabled, inputRef } = useAutocomplete();
     react_1.default.useImperativeHandle(ref, () => inputRef.current);
     const updateSearch = (value) => {
-        if ((0, lodash_1.isNil)(value)) {
+        if ((0, isNil_js_1.default)(value)) {
             return;
         }
         const v = typeof value === 'string' ? value : value[0];
@@ -127,7 +127,7 @@ function AutocompleteValue({ ref, className, value: valueProp, onValueChange, on
     };
     // If options changes, update only the internal value
     react_1.default.useEffect(() => {
-        if ((0, lodash_1.isNil)(value)) {
+        if ((0, isNil_js_1.default)(value)) {
             return;
         }
         const v = typeof value === 'string' ? value : value[0];
@@ -292,7 +292,7 @@ function Autocomplete({ ref, value, defaultValue, onValueChange, onClear, classN
     }, [selected, handleChange]);
     // Keeps the selected value in sync with the value prop
     react_1.default.useEffect(() => {
-        if (!(0, lodash_1.isNil)(value)) {
+        if (!(0, isNil_js_1.default)(value)) {
             setSelected(value);
         }
     }, [value]);

package/dist/components/ui/badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,aAAa;;8EA8BlB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GACnD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAE5D,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAUnE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,aAAa;;8EA+BlB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GACnD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAE5D,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAUnE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/ui/badge/index.js

@@ -10,8 +10,8 @@ const badgeVariants = (0, class_variance_authority_1.cva)('inline-flex items-cen
     variants: {
         variant: {
             default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-            active: 'bg-system-success-surface text-system-success-h1a border-none py-[2px] px-3',
-            inactive: 'bg-muted text-foreground border-none py-[2px] px-3',
+            active: 'bg-system-success-surface text-system-success-h1a border-system-success-border py-[2px] px-3',
+            inactive: 'bg-muted text-foreground border-muted-foreground/40 py-[2px] px-3',
             secondary: 'border-transparent bg-muted-foreground text-white dark:text-black',
             destructive: 'border-transparent bg-red-500 text-primary-foreground hover:bg-red-500/80',
             error: 'border-system-error-border bg-system-error-surface text-system-error-text px-[10px] py-1',

package/dist/components/ui/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;;8EA0BlB,CAAA;AAEF,QAAA,MAAM,YAAY;;;8EAgBhB,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GACtD,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG;IACF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,CAAA;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAEH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,IAAI,EACJ,aAAuB,EACvB,SAAiB,EACjB,QAAgB,EAChB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,WAAW,qBAgCb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;;;8EA0BlB,CAAA;AAEF,QAAA,MAAM,YAAY;;;8EAgBhB,CAAA;AAEF,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GACtD,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG;IACF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,CAAA;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAEH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,IAAI,EACJ,aAAuB,EACvB,SAAiB,EACjB,QAAgB,EAChB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,WAAW,qBAqCb;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/ui/button/index.js

@@ -60,5 +60,5 @@ function Button({ className, variant, size, asChild = false, icon, iconPlacement
         }
         onClick?.(e);
     };
-    return ((0, jsx_runtime_1.jsxs)(Comp, { className: (0, utils_1.cn)(buttonVariants({ variant, size, fullWidth }), className), "data-read-only": readOnly, "data-slot": "button", ...props, onClick: handleClick, children: [icon && iconPlacement === 'start' && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)(iconVariants({ position: iconPlacement, size })), children: icon })), props.children, icon && iconPlacement !== 'start' && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)(iconVariants({ position: iconPlacement, size })), children: icon }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Comp, { className: (0, utils_1.cn)(buttonVariants({ variant, size, fullWidth }), className), "data-read-only": readOnly, "data-slot": "button", ...props, onClick: handleClick, children: [icon && iconPlacement === 'start' && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)(iconVariants({ position: iconPlacement, size })), children: icon })), (0, jsx_runtime_1.jsx)(react_slot_1.Slottable, { children: props.children }), icon && iconPlacement !== 'start' && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)(iconVariants({ position: iconPlacement, size })), children: icon }))] }));
 }

package/dist/components/ui/copy-field/index.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+export type CopyFieldProps = {
+    /**
+     * The string shown and copied verbatim (e.g. a TOTP manual-entry secret or a
+     * single recovery code). Copy always uses this raw value, even while masked.
+     */
+    value: string;
+    /**
+     * Optional visible label rendered above the field and associated with the
+     * input via `htmlFor`/`id`.
+     */
+    label?: string;
+    /**
+     * When true the displayed value is obscured (native password dots) while the
+     * underlying `value` stays copyable. A reveal toggle is offered.
+     * @defaultValue false
+     */
+    masked?: boolean;
+    /**
+     * i18n message used as the success toast text. Falls back to a sensible
+     * default when omitted.
+     */
+    onCopyLabel?: string;
+    /**
+     * Accessible name for the reveal toggle when the value is hidden. Override
+     * for localization. Defaults to English.
+     * @defaultValue 'Show value'
+     */
+    revealLabel?: string;
+    /**
+     * Accessible name for the reveal toggle when the value is shown. Override
+     * for localization. Defaults to English.
+     * @defaultValue 'Hide value'
+     */
+    hideLabel?: string;
+    /**
+     * Accessible name for the input when no visible `label` is provided. Override
+     * for localization. Defaults to English.
+     * @defaultValue 'Value to copy'
+     */
+    valueLabel?: string;
+    /**
+     * Milliseconds after a *successful* copy before the clipboard is wiped, for
+     * sensitive values that shouldn't linger there (TOTP secrets, recovery
+     * codes). Omit — or pass a non-positive number — to never clear.
+     *
+     * The clear is best-effort and never destructive: before wiping, the
+     * clipboard is read back and left untouched unless it still holds exactly
+     * the value this field wrote, so a copy the user made in the meantime
+     * survives. Browsers without `clipboard.readText` (Firefox, Safari) or that
+     * deny the read can't be verified, so nothing is cleared there.
+     */
+    clearClipboardAfter?: number;
+};
+export declare function CopyField({ value, label, masked, onCopyLabel, revealLabel, hideLabel, valueLabel, clearClipboardAfter }: CopyFieldProps): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/copy-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/copy-field/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;;;;OAUG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAA;AAmCD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,MAAc,EACd,WAAW,EACX,WAA0B,EAC1B,SAAwB,EACxB,UAA4B,EAC5B,mBAAmB,EACpB,EAAE,cAAc,qBA6JhB"}

package/dist/components/ui/copy-field/index.js

@@ -0,0 +1,155 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyField = CopyField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const icon_button_1 = require("../../../components/ui/icon-button");
+const use_toast_1 = require("../../../hooks/use-toast");
+const DEFAULT_COPY_LABEL = 'Copied to clipboard!';
+const FALLBACK_COPY_LABEL = 'Copy not available — text selected, press Ctrl/Cmd+C';
+const COPIED_ICON_TIMEOUT = 1500;
+const isClipboardAvailable = () => typeof navigator !== 'undefined' &&
+    typeof navigator.clipboard?.writeText === 'function';
+const isClipboardReadable = () => typeof navigator !== 'undefined' &&
+    typeof navigator.clipboard?.readText === 'function';
+/**
+ * Wipes the clipboard, but only if it still holds `copiedValue` — the user may
+ * have copied something else in the meantime, and clobbering that would be
+ * worse than leaving the secret behind. Unverifiable (no `readText`, permission
+ * denied, unfocused document) means "leave it alone".
+ */
+const clearClipboardIfUnchanged = async (copiedValue) => {
+    if (!isClipboardReadable()) {
+        return;
+    }
+    try {
+        if ((await navigator.clipboard.readText()) !== copiedValue) {
+            return;
+        }
+        await navigator.clipboard.writeText('');
+    }
+    catch {
+        // Read or write refused; the clipboard stays as-is.
+    }
+};
+function CopyField({ value, label, masked = false, onCopyLabel, revealLabel = 'Show value', hideLabel = 'Hide value', valueLabel = 'Value to copy', clearClipboardAfter }) {
+    const { toast } = (0, use_toast_1.useToast)();
+    const generatedId = React.useId();
+    const inputId = `${generatedId}-copy-field`;
+    const inputRef = React.useRef(null);
+    const copiedTimerRef = React.useRef(null);
+    const clearTimerRef = React.useRef(null);
+    const [revealed, setRevealed] = React.useState(false);
+    const [copied, setCopied] = React.useState(false);
+    const showAsText = !masked || revealed;
+    const copyAccessibleName = label ? `Copy ${label}` : 'Copy value';
+    React.useEffect(() => {
+        return () => {
+            if (copiedTimerRef.current) {
+                clearTimeout(copiedTimerRef.current);
+            }
+            // The clipboard-clear timer is deliberately *not* cancelled here: it
+            // touches no state (so it can't warn about an unmounted update) and the
+            // secret must still leave the clipboard when the dialog holding this
+            // field closes before the timeout elapses.
+        };
+    }, []);
+    const selectFieldText = () => {
+        const input = inputRef.current;
+        if (!input) {
+            return;
+        }
+        // Reveal so the user can copy the selection manually. Flip the DOM `type`
+        // imperatively *before* select(): `setRevealed` is batched, so a plain
+        // state update would leave the input as type="password" at select() time,
+        // and React's subsequent type -> "text" re-render clears the selection —
+        // the fallback would then select nothing. We still push the state update so
+        // the re-render stays consistent with the DOM we just mutated.
+        if (masked) {
+            input.type = 'text';
+            setRevealed(true);
+        }
+        input.focus();
+        input.select();
+    };
+    const handleFallback = () => {
+        selectFieldText();
+        toast({ title: FALLBACK_COPY_LABEL });
+    };
+    const handleCopy = async () => {
+        if (!isClipboardAvailable()) {
+            handleFallback();
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(value);
+            toast({ variant: 'success', title: onCopyLabel ?? DEFAULT_COPY_LABEL });
+            setCopied(true);
+            if (copiedTimerRef.current) {
+                clearTimeout(copiedTimerRef.current);
+            }
+            copiedTimerRef.current = setTimeout(() => setCopied(false), COPIED_ICON_TIMEOUT);
+            // Only a confirmed write earns a clear — the fallback path never wrote to
+            // the clipboard, so it has nothing of ours to wipe. `value` is captured
+            // per copy so a later prop change can't make us clear the wrong string.
+            if (clearTimerRef.current) {
+                clearTimeout(clearTimerRef.current);
+            }
+            if (clearClipboardAfter !== undefined && clearClipboardAfter > 0) {
+                const copiedValue = value;
+                clearTimerRef.current = setTimeout(() => {
+                    void clearClipboardIfUnchanged(copiedValue);
+                }, clearClipboardAfter);
+            }
+        }
+        catch {
+            handleFallback();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "copy-field", className: "flex w-full flex-col gap-2", children: [label ? ((0, jsx_runtime_1.jsx)("label", { htmlFor: inputId, className: "text-muted-foreground text-sm font-semibold", children: label })) : null, (0, jsx_runtime_1.jsxs)("div", { "data-slot": "input-wrapper", className: "border-input-border focus-within:border-ring flex h-10 w-full cursor-text items-center gap-1 rounded-md border pr-1 pl-4 transition-[color,box-shadow]", children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, id: inputId, "data-slot": "input", "data-testid": "copy-field-input", type: showAsText ? 'text' : 'password', value: value, readOnly: true, 
+                        // This field holds secrets: TOTP manual-entry secrets, recovery
+                        // codes. While masked it renders as type="password", which invites
+                        // browsers and password managers to autofill it or offer to SAVE its
+                        // value, and spellcheck can ship the text to a remote service.
+                        autoComplete: "off", spellCheck: false, "aria-label": label ? undefined : valueLabel, 
+                        // `min-w-0` lets this flex item shrink below its content width so a
+                        // long value (e.g. a UUID recovery code) scrolls inside the field
+                        // instead of overflowing its container. No `font-mono`: the value
+                        // inherits the app sans font (Inter) so it matches every other field.
+                        className: "text-input-foreground h-full min-w-0 flex-1 cursor-text border-none bg-transparent text-sm outline-none select-text focus:ring-0 focus:ring-offset-0" }), masked ? ((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "outline", size: "small", rounded: true, "aria-pressed": revealed, "aria-label": revealed ? hideLabel : revealLabel, onClick: () => setRevealed((prev) => !prev), children: revealed ? (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, {}) : (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, {}) })) : null, (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "outline", size: "small", rounded: true, "aria-label": copyAccessibleName, onClick: handleCopy, children: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, {}) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, {}) })] })] }));
+}