@lerianstudio/sindarian-ui 1.2.0-beta.10 → 1.2.0-beta.12

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/button.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=button.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.test.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button.test.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA"}

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

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const _1 = require(".");
+/**
+ * Regression coverage for `asChild`.
+ *
+ * Button always renders three children (the two icon slots evaluate to `false`
+ * when no `icon` is given). Without a `Slottable` marking the real child, Radix
+ * Slot >=1.3.0 cannot tell which of the three to merge onto and throws
+ * "Slot failed to slot onto its children" — which broke `<Button asChild>` for
+ * every consumer, icon or not.
+ */
+describe('Button asChild', () => {
+    it('renders the child element instead of a button, with no icon', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Button, { asChild: true, variant: "link", children: (0, jsx_runtime_1.jsx)("a", { href: "/somewhere", children: "Go somewhere" }) }));
+        const link = react_1.screen.getByRole('link', { name: 'Go somewhere' });
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveAttribute('href', '/somewhere');
+        // asChild must NOT leave a wrapping <button> around the anchor.
+        expect(react_1.screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+    it('merges the button classes onto the child element', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Button, { asChild: true, variant: "link", size: "small", className: "custom-class", children: (0, jsx_runtime_1.jsx)("a", { href: "/x", children: "Styled" }) }));
+        const link = react_1.screen.getByRole('link', { name: 'Styled' });
+        expect(link).toHaveClass('custom-class');
+        expect(link).toHaveAttribute('data-slot', 'button');
+    });
+    it('keeps a start icon alongside the slotted child', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Button, { asChild: true, icon: (0, jsx_runtime_1.jsx)("span", { "data-testid": "icon", children: "*" }), children: (0, jsx_runtime_1.jsx)("a", { href: "/x", children: "With icon" }) }));
+        const link = react_1.screen.getByRole('link', { name: /With icon/ });
+        expect(link).toBeInTheDocument();
+        // The icon renders inside the slotted element, not as a sibling of it.
+        expect(link).toContainElement(react_1.screen.getByTestId('icon'));
+    });
+    it('keeps an end icon alongside the slotted child', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Button, { asChild: true, icon: (0, jsx_runtime_1.jsx)("span", { "data-testid": "icon", children: "*" }), iconPlacement: "end", children: (0, jsx_runtime_1.jsx)("a", { href: "/x", children: "Trailing" }) }));
+        expect(react_1.screen.getByRole('link', { name: /Trailing/ })).toContainElement(react_1.screen.getByTestId('icon'));
+    });
+    it('accepts a child whose own content is multiple nodes', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Button, { asChild: true, variant: "link", children: (0, jsx_runtime_1.jsxs)("a", { href: "/x", children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u21A9" }), "Back to list"] }) }));
+        expect(react_1.screen.getByRole('link', { name: 'Back to list' })).toBeInTheDocument();
+    });
+});
+describe('Button without asChild', () => {
+    it('still renders a native button (the Slottable path must be transparent)', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Button, { variant: "primary", children: "Click me" }));
+        const button = react_1.screen.getByRole('button', { name: 'Click me' });
+        expect(button.tagName).toBe('BUTTON');
+        expect(button).toHaveAttribute('data-slot', 'button');
+    });
+    it('still renders its icon', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Button, { icon: (0, jsx_runtime_1.jsx)("span", { "data-testid": "icon", children: "*" }), children: "Has an icon" }));
+        expect(react_1.screen.getByTestId('icon')).toBeInTheDocument();
+        expect(react_1.screen.getByRole('button', { name: /Has an icon/ })).toBeInTheDocument();
+    });
+    it('suppresses onClick when readOnly', () => {
+        const onClick = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Button, { readOnly: true, onClick: onClick, children: "Read only" }));
+        react_1.screen.getByRole('button', { name: 'Read only' }).click();
+        expect(onClick).not.toHaveBeenCalled();
+    });
+});

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/copy-field.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=copy-field.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"copy-field.test.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/copy-field/copy-field.test.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA"}

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

@@ -0,0 +1,268 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const _1 = require(".");
+const mockToast = jest.fn();
+jest.mock('@/hooks/use-toast', () => ({
+    useToast: () => ({ toast: mockToast })
+}));
+const FALLBACK_COPY_LABEL = 'Copy not available — text selected, press Ctrl/Cmd+C';
+const writeText = jest.fn().mockResolvedValue(undefined);
+const readText = jest.fn().mockResolvedValue('');
+const setClipboard = (value) => {
+    Object.defineProperty(navigator, 'clipboard', {
+        value,
+        configurable: true,
+        writable: true
+    });
+};
+beforeEach(() => {
+    mockToast.mockClear();
+    writeText.mockClear();
+    writeText.mockResolvedValue(undefined);
+    readText.mockClear();
+    readText.mockResolvedValue('');
+    setClipboard({ writeText, readText });
+});
+describe('CopyField', () => {
+    it('renders the value in a read-only input', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "SECRET123", label: "Secret" }));
+        const input = react_1.screen.getByLabelText('Secret');
+        expect(input).toHaveValue('SECRET123');
+        expect(input).toHaveAttribute('readonly');
+    });
+    it('associates the visible label with the input via htmlFor/id', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "abc", label: "API Key" }));
+        expect(react_1.screen.getByLabelText('API Key')).toBeInTheDocument();
+    });
+    it('copies the value to the clipboard when the copy button is clicked', async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "SECRET123", label: "Secret" }));
+        await (0, react_1.act)(async () => {
+            react_1.fireEvent.click(react_1.screen.getByRole('button', { name: /copy secret/i }));
+        });
+        expect(writeText).toHaveBeenCalledWith('SECRET123');
+    });
+    it('fires a success toast with the provided onCopyLabel after copying', async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "SECRET123", label: "Secret", onCopyLabel: "Secret copied!" }));
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: /copy secret/i }));
+        await (0, react_1.waitFor)(() => expect(mockToast).toHaveBeenCalledWith(expect.objectContaining({ variant: 'success', title: 'Secret copied!' })));
+    });
+    it('uses the default copy label when onCopyLabel is not provided', async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "abc" }));
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: /copy/i }));
+        await (0, react_1.waitFor)(() => expect(mockToast).toHaveBeenCalledWith(expect.objectContaining({ title: 'Copied to clipboard!' })));
+    });
+    it('gives the copy button an accessible name even without a label', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "abc" }));
+        expect(react_1.screen.getByRole('button', { name: /copy/i })).toBeInTheDocument();
+    });
+    it('overrides the input aria-label via valueLabel when no visible label', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "abc", valueLabel: "Valor para copiar" }));
+        expect(react_1.screen.getByLabelText('Valor para copiar')).toBeInTheDocument();
+    });
+    describe('masked', () => {
+        it('obscures the displayed value while keeping the real value copyable', async () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "TOTPSECRET", label: "Secret", masked: true }));
+            const input = react_1.screen.getByLabelText('Secret');
+            expect(input).toHaveAttribute('type', 'password');
+            expect(input).toHaveValue('TOTPSECRET');
+            await (0, react_1.act)(async () => {
+                react_1.fireEvent.click(react_1.screen.getByRole('button', { name: /copy secret/i }));
+            });
+            expect(writeText).toHaveBeenCalledWith('TOTPSECRET');
+        });
+        it('reveals and then hides the value with the reveal toggle (aria-pressed)', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "s3cr3t", label: "Secret", masked: true }));
+            const input = react_1.screen.getByLabelText('Secret');
+            expect(input).toHaveAttribute('type', 'password');
+            const toggle = react_1.screen.getByRole('button', { name: /show value/i });
+            expect(toggle).toHaveAttribute('aria-pressed', 'false');
+            react_1.fireEvent.click(toggle);
+            expect(input).toHaveAttribute('type', 'text');
+            const hideToggle = react_1.screen.getByRole('button', { name: /hide value/i });
+            expect(hideToggle).toHaveAttribute('aria-pressed', 'true');
+            react_1.fireEvent.click(hideToggle);
+            expect(input).toHaveAttribute('type', 'password');
+            expect(react_1.screen.getByRole('button', { name: /show value/i })).toHaveAttribute('aria-pressed', 'false');
+        });
+        it('supports localized reveal/hide labels', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "s3cr3t", label: "Secret", masked: true, revealLabel: "Mostrar valor", hideLabel: "Ocultar valor" }));
+            const toggle = react_1.screen.getByRole('button', { name: 'Mostrar valor' });
+            react_1.fireEvent.click(toggle);
+            expect(react_1.screen.getByRole('button', { name: 'Ocultar valor' })).toBeInTheDocument();
+        });
+        it('does not render a reveal toggle when not masked', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "abc", label: "Token" }));
+            expect(react_1.screen.queryByRole('button', { name: /show value/i })).not.toBeInTheDocument();
+        });
+    });
+    describe('clipboard unavailable fallback', () => {
+        it('selects the input text and toasts the fallback label when clipboard API is absent', async () => {
+            setClipboard(undefined);
+            const selectSpy = jest.spyOn(HTMLInputElement.prototype, 'select');
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "abc", label: "Token" }));
+            expect(() => react_1.fireEvent.click(react_1.screen.getByRole('button', { name: /copy token/i }))).not.toThrow();
+            expect(selectSpy).toHaveBeenCalled();
+            await (0, react_1.waitFor)(() => expect(mockToast).toHaveBeenCalledWith(expect.objectContaining({ title: FALLBACK_COPY_LABEL })));
+            selectSpy.mockRestore();
+        });
+        it('fires the fallback toast and NOT the success toast when writeText rejects', async () => {
+            writeText.mockRejectedValueOnce(new Error('permission denied'));
+            const selectSpy = jest.spyOn(HTMLInputElement.prototype, 'select');
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "abc", label: "Token" }));
+            react_1.fireEvent.click(react_1.screen.getByRole('button', { name: /copy token/i }));
+            await (0, react_1.waitFor)(() => expect(selectSpy).toHaveBeenCalled());
+            await (0, react_1.waitFor)(() => expect(mockToast).toHaveBeenCalledWith(expect.objectContaining({ title: FALLBACK_COPY_LABEL })));
+            expect(mockToast).not.toHaveBeenCalledWith(expect.objectContaining({ variant: 'success' }));
+            selectSpy.mockRestore();
+        });
+        it('makes a masked field textual (selectable) before the fallback selection when clipboard is absent', async () => {
+            setClipboard(undefined);
+            const selectSpy = jest.spyOn(HTMLInputElement.prototype, 'select');
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "TOTPSECRET", label: "Secret", masked: true }));
+            const input = react_1.screen.getByLabelText('Secret');
+            expect(input).toHaveAttribute('type', 'password');
+            react_1.fireEvent.click(react_1.screen.getByRole('button', { name: /copy secret/i }));
+            // The field must be text (selectable) at/after the fallback, and it must
+            // still hold the real secret so Ctrl/Cmd+C copies the true value.
+            expect(input).toHaveAttribute('type', 'text');
+            expect(input).toHaveValue('TOTPSECRET');
+            expect(selectSpy).toHaveBeenCalled();
+            selectSpy.mockRestore();
+        });
+        it('makes a masked field textual before the fallback selection when writeText rejects', async () => {
+            writeText.mockRejectedValueOnce(new Error('permission denied'));
+            const selectSpy = jest.spyOn(HTMLInputElement.prototype, 'select');
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "TOTPSECRET", label: "Secret", masked: true }));
+            const input = react_1.screen.getByLabelText('Secret');
+            expect(input).toHaveAttribute('type', 'password');
+            react_1.fireEvent.click(react_1.screen.getByRole('button', { name: /copy secret/i }));
+            await (0, react_1.waitFor)(() => expect(selectSpy).toHaveBeenCalled());
+            expect(input).toHaveAttribute('type', 'text');
+            expect(input).toHaveValue('TOTPSECRET');
+            selectSpy.mockRestore();
+        });
+    });
+    describe('clearClipboardAfter', () => {
+        const CLEAR_AFTER = 30_000;
+        beforeEach(() => {
+            jest.useFakeTimers();
+        });
+        afterEach(() => {
+            jest.runOnlyPendingTimers();
+            jest.useRealTimers();
+        });
+        /** Runs the pending clear timer and drains its await chain. */
+        const runClearTimer = async () => {
+            await (0, react_1.act)(async () => {
+                jest.advanceTimersByTime(CLEAR_AFTER);
+            });
+            // readText -> comparison -> writeText: two extra microtask turns.
+            await (0, react_1.act)(async () => {
+                await Promise.resolve();
+                await Promise.resolve();
+            });
+        };
+        const copy = async (name) => {
+            await (0, react_1.act)(async () => {
+                react_1.fireEvent.click(react_1.screen.getByRole('button', { name }));
+            });
+        };
+        it('wipes the clipboard after the delay when it still holds the copied value', async () => {
+            readText.mockResolvedValue('SECRET123');
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "SECRET123", label: "Secret", clearClipboardAfter: CLEAR_AFTER }));
+            await copy(/copy secret/i);
+            expect(writeText).toHaveBeenCalledWith('SECRET123');
+            // Nothing cleared before the delay elapses.
+            expect(writeText).toHaveBeenCalledTimes(1);
+            await runClearTimer();
+            expect(readText).toHaveBeenCalled();
+            expect(writeText).toHaveBeenLastCalledWith('');
+        });
+        it('leaves the clipboard untouched when it now holds an unrelated value', async () => {
+            readText.mockResolvedValue('something the user copied afterwards');
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "SECRET123", label: "Secret", clearClipboardAfter: CLEAR_AFTER }));
+            await copy(/copy secret/i);
+            await runClearTimer();
+            expect(readText).toHaveBeenCalled();
+            expect(writeText).toHaveBeenCalledTimes(1);
+            expect(writeText).toHaveBeenLastCalledWith('SECRET123');
+        });
+        it('clears against the value copied at click time, not a later prop value', async () => {
+            readText.mockResolvedValue('FIRST');
+            const { rerender } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "FIRST", label: "Secret", clearClipboardAfter: CLEAR_AFTER }));
+            await copy(/copy secret/i);
+            rerender((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "SECOND", label: "Secret", clearClipboardAfter: CLEAR_AFTER }));
+            await runClearTimer();
+            expect(writeText).toHaveBeenLastCalledWith('');
+        });
+        it('does not clear when the clipboard cannot be read back', async () => {
+            setClipboard({ writeText });
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "SECRET123", label: "Secret", clearClipboardAfter: CLEAR_AFTER }));
+            await copy(/copy secret/i);
+            await runClearTimer();
+            expect(writeText).toHaveBeenCalledTimes(1);
+            expect(writeText).toHaveBeenLastCalledWith('SECRET123');
+        });
+        it('does not clear when readText rejects', async () => {
+            readText.mockRejectedValue(new Error('permission denied'));
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "SECRET123", label: "Secret", clearClipboardAfter: CLEAR_AFTER }));
+            await copy(/copy secret/i);
+            await runClearTimer();
+            expect(writeText).toHaveBeenCalledTimes(1);
+        });
+        it('does not schedule a clear when the copy itself failed', async () => {
+            writeText.mockRejectedValue(new Error('permission denied'));
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "SECRET123", label: "Secret", clearClipboardAfter: CLEAR_AFTER }));
+            await copy(/copy secret/i);
+            await runClearTimer();
+            expect(readText).not.toHaveBeenCalled();
+        });
+        it('never clears when the prop is omitted or non-positive', async () => {
+            const { unmount } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "SECRET123", label: "Secret" }));
+            await copy(/copy secret/i);
+            await runClearTimer();
+            expect(readText).not.toHaveBeenCalled();
+            unmount();
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "SECRET123", label: "Secret", clearClipboardAfter: 0 }));
+            await copy(/copy secret/i);
+            await runClearTimer();
+            expect(readText).not.toHaveBeenCalled();
+        });
+        it('still clears after the field unmounts before the delay elapses', async () => {
+            readText.mockResolvedValue('SECRET123');
+            const { unmount } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "SECRET123", label: "Secret", clearClipboardAfter: CLEAR_AFTER }));
+            await copy(/copy secret/i);
+            unmount();
+            await runClearTimer();
+            expect(writeText).toHaveBeenLastCalledWith('');
+        });
+    });
+    describe('copied-indicator timer', () => {
+        beforeEach(() => {
+            jest.useFakeTimers();
+        });
+        afterEach(() => {
+            jest.runOnlyPendingTimers();
+            jest.useRealTimers();
+        });
+        it('does not throw on rapid double-copy or unmount before the timeout', async () => {
+            const { unmount } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.CopyField, { value: "abc", label: "Token" }));
+            const button = react_1.screen.getByRole('button', { name: /copy token/i });
+            await (0, react_1.act)(async () => {
+                react_1.fireEvent.click(button);
+            });
+            await (0, react_1.act)(async () => {
+                react_1.fireEvent.click(button);
+            });
+            // Unmount before the copied-icon timeout fires; the cleanup effect must
+            // clear the pending timer so no setState-after-unmount occurs.
+            expect(() => {
+                unmount();
+                jest.advanceTimersByTime(2000);
+            }).not.toThrow();
+        });
+    });
+});

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,qBAuJhB"}

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

@@ -0,0 +1,150 @@
+'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, "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, {}) })] })] }));
+}

package/dist/components/ui/icon-button/styles.css

@@ -1,33 +1,33 @@
 @theme inline {
-    --spacing-icon-button-p: calc(var(--spacing) * 2)
+  --spacing-icon-button-p: calc(var(--spacing) * 2);
 }
 
 @layer components {
-    .icon-button-base {
-        @apply p-icon-button-p rounded-md size-10 [&>*]:size-6;
-    }
+  .icon-button-base {
+    @apply p-icon-button-p size-10 rounded-md [&>*]:size-6 [&>*]:shrink-0;
+  }
 
-    .icon-button-read-only {
-        @apply data-[read-only=true]:border data-[read-only=true]:border-button-border;
-    }
+  .icon-button-read-only {
+    @apply data-[read-only=true]:border-button-border data-[read-only=true]:border;
+  }
 
-    .icon-button-disabled {
-        @apply disabled:border disabled:border-button-border;
-    }
+  .icon-button-disabled {
+    @apply disabled:border-button-border disabled:border;
+  }
 
-    .icon-button-small {
-        @apply size-8 [&>*]:size-4;
-    }
+  .icon-button-small {
+    @apply size-8 [&>*]:size-4;
+  }
 
-    .icon-button-rounded {
-        @apply rounded-full;
-    }
+  .icon-button-rounded {
+    @apply rounded-full;
+  }
 
-    /* Overwrite for outline style */
-    .button-outline.icon-button-disabled {
-        @apply disabled:border-transparent
-    }
-    .button-outline.icon-button-read-only {
-        @apply data-[read-only=true]:border-transparent
-    }
-}
+  /* Overwrite for outline style */
+  .button-outline.icon-button-disabled {
+    @apply disabled:border-transparent;
+  }
+  .button-outline.icon-button-read-only {
+    @apply data-[read-only=true]:border-transparent;
+  }
+}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,QAAA,MAAM,aAAa;;;8EAejB,CAAA;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,YAAY,CAAC,OAAO,aAAa,CAAC,EAClC,gBAAgB,GAAG,cAAc,CAClC,GACC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;CAC1B,CAAA;AAEH,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,cAAc,EACd,YAAY,EACZ,OAAO,EACP,MAAM,EACN,OAAO,EACP,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,qBAuEZ;AAED,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,QAAA,MAAM,aAAa;;;8EAejB,CAAA;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,YAAY,CAAC,OAAO,aAAa,CAAC,EAClC,gBAAgB,GAAG,cAAc,CAClC,GACC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG;IAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;CAC1B,CAAA;AAEH,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,cAAc,EACd,YAAY,EACZ,OAAO,EACP,MAAM,EACN,OAAO,EACP,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,qBAyEZ;AAED,cAAc,aAAa,CAAA"}

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

@@ -40,7 +40,6 @@ exports.Input = Input;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const utils_1 = require("../../../lib/utils");
-const form_1 = require("../../../components/ui/form");
 const class_variance_authority_1 = require("class-variance-authority");
 const inputVariants = (0, class_variance_authority_1.cva)('input-base input-disabled input-read-only', {
     variants: {
@@ -59,7 +58,9 @@ const inputVariants = (0, class_variance_authority_1.cva)('input-base input-disa
     }
 });
 function Input({ className, startAdornment, endAdornment, onFocus, onBlur, onClick, ref, ...props }) {
-    const { formItemId } = (0, form_1.useFormField)();
+    // Fallback id so a standalone Input is still labelable. Inside a form,
+    // FormControl injects its own id through `props` below and overrides this.
+    const generatedId = React.useId();
     const [focus, setFocus] = React.useState(false);
     const inputRef = React.useRef(null);
     React.useImperativeHandle(ref, () => ({
@@ -90,7 +91,7 @@ function Input({ className, startAdornment, endAdornment, onFocus, onBlur, onCli
         setFocus(false);
         onBlur?.(e);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "input-wrapper", className: (0, utils_1.cn)('input-wrapper input-wrapper-focus'), "data-focus": focus, onClick: handleWrapperClick, children: [startAdornment, (0, jsx_runtime_1.jsx)("input", { ref: inputRef, id: formItemId, "data-slot": "input", className: (0, utils_1.cn)(inputVariants({
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "input-wrapper", className: (0, utils_1.cn)('input-wrapper input-wrapper-focus'), "data-focus": focus, onClick: handleWrapperClick, children: [startAdornment, (0, jsx_runtime_1.jsx)("input", { ref: inputRef, id: generatedId, "data-slot": "input", className: (0, utils_1.cn)(inputVariants({
                     startAdornment: !!startAdornment,
                     endAdornment: !!endAdornment
                 }), className), onFocus: handleFocus, onBlur: handleBlur, ...props }), endAdornment] }));

package/dist/components/ui/input/input.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=input.test.d.ts.map

package/dist/components/ui/input/input.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.test.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input/input.test.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA"}

package/dist/components/ui/input/input.test.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const react_hook_form_1 = require("react-hook-form");
+const _1 = require(".");
+const form_1 = require("../form");
+/**
+ * Regression coverage for standalone use.
+ *
+ * `Input` is a primitive with two callers: `InputField`, which wraps it in
+ * `FormField`/`FormItem`, and plain standalone use such as a search box. It
+ * used to call `useFormField`, which destructures `useFormContext()` — null
+ * with no provider above — so every standalone `<Input />` threw "Cannot
+ * destructure property 'getFieldState' of useFormContext(...) as it is null".
+ *
+ * It now reads no form context at all: a local `useId` covers the standalone
+ * case, and inside a form `FormControl`'s Slot injects the real id as a prop.
+ */
+describe('Input outside a form', () => {
+    it('renders with no react-hook-form provider', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Input, { placeholder: "Search permissions by name..." }));
+        expect(react_1.screen.getByPlaceholderText('Search permissions by name...')).toBeInTheDocument();
+    });
+    it('still gets an id so a label can be associated with it', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Input, { "aria-label": "Search" }));
+        expect(react_1.screen.getByRole('textbox', { name: 'Search' })).toHaveAttribute('id');
+    });
+    it('keeps value/onChange behaviour intact', () => {
+        const onChange = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.Input, { value: "abc", onChange: onChange, "aria-label": "Search" }));
+        const input = react_1.screen.getByRole('textbox', { name: 'Search' });
+        expect(input).toHaveValue('abc');
+        react_1.fireEvent.change(input, { target: { value: 'abcd' } });
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ target: input }));
+    });
+});
+function FormHarness() {
+    const form = (0, react_hook_form_1.useForm)({ defaultValues: { email: 'ada@example.com' } });
+    return ((0, jsx_runtime_1.jsx)(form_1.Form, { ...form, children: (0, jsx_runtime_1.jsx)(form_1.FormField, { control: form.control, name: "email", render: ({ field }) => ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { children: [(0, jsx_runtime_1.jsx)(form_1.FormLabel, { children: "E-mail" }), (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(_1.Input, { ...field }) })] })) }) }));
+}
+describe('Input inside a form', () => {
+    it('is still wired to its FormItem id, so the label points at it', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FormHarness, {}));
+        const input = react_1.screen.getByLabelText('E-mail');
+        expect(input).toHaveValue('ada@example.com');
+        // The id must come from FormItem's context, not the standalone fallback.
+        expect(input.getAttribute('id')).toMatch(/-form-item$/);
+    });
+});

package/dist/components/ui/qr-code/index.d.ts

@@ -0,0 +1,26 @@
+export type QRCodeProps = {
+    /**
+     * The `otpauth://totp/...` URI to encode. An empty or whitespace-only value
+     * renders nothing (never a broken QR).
+     */
+    value: string;
+    /**
+     * Rendered square edge in px. Drives both width and height of the SVG.
+     * @defaultValue 160
+     */
+    size?: number;
+    /**
+     * Optional image URL rendered in the center of the code (e.g. a brand logo).
+     * When set, the error-correction level is raised to `H` so the code stays
+     * scannable despite the occluded modules, and the modules behind the image
+     * are excavated to the background color.
+     */
+    logoSrc?: string;
+    /**
+     * Accessible name for the QR image. Falls back to a generic label when
+     * omitted. Consumers should pass an i18n string.
+     */
+    'aria-label'?: string;
+};
+export declare function QRCode({ value, size, logoSrc, 'aria-label': ariaLabel }: QRCodeProps): import("react").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/qr-code/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/qr-code/index.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAUD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,IAAmB,EACnB,OAAO,EACP,YAAY,EAAE,SAA8B,EAC7C,EAAE,WAAW,sCA2Bb"}

package/dist/components/ui/qr-code/index.js

@@ -0,0 +1,27 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QRCode = QRCode;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const qrcode_react_1 = require("qrcode.react");
+const DEFAULT_SIZE = 160;
+const DEFAULT_ARIA_LABEL = 'QR code';
+/**
+ * Center image edge as a fraction of the code size. Kept small so error
+ * correction can recover the excavated modules.
+ */
+const LOGO_SIZE_RATIO = 0.22;
+function QRCode({ value, size = DEFAULT_SIZE, logoSrc, 'aria-label': ariaLabel = DEFAULT_ARIA_LABEL }) {
+    if (!value || value.trim() === '') {
+        return null;
+    }
+    const logoSize = Math.round(size * LOGO_SIZE_RATIO);
+    return ((0, jsx_runtime_1.jsx)(qrcode_react_1.QRCodeSVG, { "data-slot": "qr-code", value: value, size: size, role: "img", "aria-label": ariaLabel, level: logoSrc ? 'H' : 'L', imageSettings: logoSrc
+            ? {
+                src: logoSrc,
+                height: logoSize,
+                width: logoSize,
+                excavate: true
+            }
+            : undefined }));
+}

package/dist/components/ui/qr-code/qr-code.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=qr-code.test.d.ts.map

package/dist/components/ui/qr-code/qr-code.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-code.test.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/qr-code/qr-code.test.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA"}

package/dist/components/ui/qr-code/qr-code.test.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const _1 = require(".");
+const SAMPLE = 'otpauth://totp/Lerian:user@acme?secret=JBSWY3DPEHPK3PXP&issuer=Lerian';
+describe('QRCode', () => {
+    it('renders an svg when value is present', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.QRCode, { value: SAMPLE }));
+        const svg = container.querySelector('svg');
+        expect(svg).toBeInTheDocument();
+    });
+    it('exposes the QR as an image to assistive tech', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.QRCode, { value: SAMPLE }));
+        expect(react_1.screen.getByRole('img')).toBeInTheDocument();
+    });
+    it('renders nothing when value is an empty string', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.QRCode, { value: "" }));
+        expect(container).toBeEmptyDOMElement();
+        expect(react_1.screen.queryByRole('img')).not.toBeInTheDocument();
+    });
+    it('renders nothing when value is whitespace only', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.QRCode, { value: "   " }));
+        expect(container).toBeEmptyDOMElement();
+        expect(react_1.screen.queryByRole('img')).not.toBeInTheDocument();
+    });
+    it('applies the provided aria-label', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.QRCode, { value: SAMPLE, "aria-label": "Scan this QR code" }));
+        expect(react_1.screen.getByRole('img', { name: 'Scan this QR code' })).toBeInTheDocument();
+    });
+    it('falls back to a generic accessible name when aria-label is omitted', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.QRCode, { value: SAMPLE }));
+        const svg = react_1.screen.getByRole('img');
+        expect(svg).toHaveAccessibleName();
+        expect(svg.getAttribute('aria-label')).toBeTruthy();
+    });
+    it('applies the provided size to width and height', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.QRCode, { value: SAMPLE, size: 200 }));
+        const svg = container.querySelector('svg');
+        expect(svg).toHaveAttribute('width', '200');
+        expect(svg).toHaveAttribute('height', '200');
+    });
+    it('defaults width and height to 160 when size is omitted', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.QRCode, { value: SAMPLE }));
+        const svg = container.querySelector('svg');
+        expect(svg).toHaveAttribute('width', '160');
+        expect(svg).toHaveAttribute('height', '160');
+    });
+    it('embeds the center logo when logoSrc is provided', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.QRCode, { value: SAMPLE, logoSrc: "/logo.svg" }));
+        const image = container.querySelector('image');
+        expect(image).toBeInTheDocument();
+        expect(image).toHaveAttribute('href', '/logo.svg');
+    });
+    it('renders no embedded image when logoSrc is omitted', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.QRCode, { value: SAMPLE }));
+        expect(container.querySelector('image')).not.toBeInTheDocument();
+    });
+});

package/dist/components/ui/sidebar/sidebar-item-icon-button.d.ts

@@ -7,6 +7,6 @@ type SidebarItemIconButtonProps = React.ComponentProps<typeof Link> & {
     inactive?: boolean;
     disabled?: boolean;
 };
-export declare const SidebarItemIconButton: ({ title, icon, href, active, inactive, disabled, ...props }: SidebarItemIconButtonProps) => React.JSX.Element;
+export declare const SidebarItemIconButton: ({ className, title, icon, href, active, inactive, disabled, ...props }: SidebarItemIconButtonProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=sidebar-item-icon-button.d.ts.map

package/dist/components/ui/sidebar/sidebar-item-icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-item-icon-button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-item-icon-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,IAAI,MAAM,WAAW,CAAA;AAW5B,KAAK,0BAA0B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IACpE,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,qBAAqB,GAAI,6DAQnC,0BAA0B,sBAoC5B,CAAA"}
+{"version":3,"file":"sidebar-item-icon-button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-item-icon-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,IAAI,MAAM,WAAW,CAAA;AAW5B,KAAK,0BAA0B,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IACpE,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,qBAAqB,GAAI,wEASnC,0BAA0B,sBAqC5B,CAAA"}

package/dist/components/ui/sidebar/sidebar-item-icon-button.js

@@ -11,10 +11,10 @@ const button_1 = require("../../ui/button");
 const tooltip_1 = require("../../ui/tooltip");
 const utils_1 = require("../../../lib/utils");
 const icon_button_1 = require("../icon-button");
-const SidebarItemIconButton = ({ title, icon, href, active, inactive, disabled, ...props }) => {
+const SidebarItemIconButton = ({ className, title, icon, href, active, inactive, disabled, ...props }) => {
     const sharedClassName = (0, utils_1.cn)((0, button_1.buttonVariants)({
         variant: active ? 'tertiary' : 'outline'
-    }), (0, icon_button_1.iconButtonVariants)(), inactive && 'hover:border-transparent', disabled && 'cursor-default opacity-30');
+    }), (0, icon_button_1.iconButtonVariants)(), inactive && 'hover:border-transparent', disabled && 'cursor-default opacity-30', className);
     return ((0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { delayDuration: 0, children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { asChild: true, children: disabled || inactive ? ((0, jsx_runtime_1.jsx)("div", { "data-slot": "sidebar-item-icon-button", className: sharedClassName, children: icon })) : ((0, jsx_runtime_1.jsx)(link_1.default, { "data-slot": "sidebar-item-icon-button", href: href, className: sharedClassName, ...props, children: icon })) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { side: "right", children: title })] }) }));
 };
 exports.SidebarItemIconButton = SidebarItemIconButton;

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export * from './components/ui/card';
 export * from './components/ui/checkbox';
 export * from './components/ui/collapsible';
 export * from './components/ui/command';
+export * from './components/ui/copy-field';
 export * from './components/ui/dialog';
 export * from './components/ui/dropdown-menu';
 export * from './components/ui/input';
@@ -22,6 +23,7 @@ export * from './components/ui/paper';
 export * from './components/ui/paper-collapsible';
 export * from './components/ui/popover';
 export * from './components/ui/progress';
+export * from './components/ui/qr-code';
 export * from './components/ui/select';
 export * from './components/ui/separator';
 export * from './components/ui/sheet';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAGA,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,mCAAmC,CAAA;AACjD,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AAGpC,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC7E,cAAc,8CAA8C,CAAA;AAC5D,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAGA,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,mCAAmC,CAAA;AACjD,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AAGpC,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC7E,cAAc,8CAA8C,CAAA;AAC5D,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA"}

package/dist/index.js

@@ -30,6 +30,7 @@ __exportStar(require("./components/ui/card"), exports);
 __exportStar(require("./components/ui/checkbox"), exports);
 __exportStar(require("./components/ui/collapsible"), exports);
 __exportStar(require("./components/ui/command"), exports);
+__exportStar(require("./components/ui/copy-field"), exports);
 __exportStar(require("./components/ui/dialog"), exports);
 __exportStar(require("./components/ui/dropdown-menu"), exports);
 __exportStar(require("./components/ui/input"), exports);
@@ -41,6 +42,7 @@ __exportStar(require("./components/ui/paper"), exports);
 __exportStar(require("./components/ui/paper-collapsible"), exports);
 __exportStar(require("./components/ui/popover"), exports);
 __exportStar(require("./components/ui/progress"), exports);
+__exportStar(require("./components/ui/qr-code"), exports);
 __exportStar(require("./components/ui/select"), exports);
 __exportStar(require("./components/ui/separator"), exports);
 __exportStar(require("./components/ui/sheet"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "1.2.0-beta.10",
+  "version": "1.2.0-beta.12",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {
@@ -53,6 +53,7 @@
     "dayjs": "^1.11.21",
     "input-otp": "^1.4.2",
     "postcss": "^8.5.16",
+    "qrcode.react": "^4.2.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.2",