@lerianstudio/sindarian-ui 1.2.0-beta.11 → 1.2.0-beta.13

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/dialog/styles.css

@@ -9,11 +9,11 @@
   }
 
   .dialog-content {
-    @apply bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-8 border p-6 shadow-lg duration-200 sm:max-w-[425px] sm:rounded-lg;
+    @apply bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-8 border p-7 shadow-lg duration-200 sm:max-w-[425px] sm:rounded-lg;
   }
 
   .dialog-close {
-    @apply data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none;
+    @apply data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none;
   }
 
   .dialog-header {
@@ -25,7 +25,7 @@
   }
 
   .dialog-title {
-    @apply text-dialog-title-text text-lg font-bold leading-none tracking-tight;
+    @apply text-dialog-title-text text-lg leading-none font-bold tracking-tight;
   }
 
   .dialog-description {

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/input/styles.css

@@ -3,7 +3,7 @@
   --spacing-input-wrapper-p: calc(var(--spacing) * 2);
   --spacing-input-px: calc(var(--spacing) * 4);
   --color-input-foreground: var(--color-foreground);
-  --color-input-placeholder: var(--color-muted-foreground);
+  --color-input-placeholder: hsl(var(--input-placeholder));
   --color-input-border: var(--color-shadcn-400);
 
   --color-input-adornment: var(--color-container-text);
@@ -24,8 +24,12 @@
     @apply border-ring;
   }
 
+  /* Don't give the placeholder its own size or weight. At a smaller size it
+     still shares the input's baseline, so it rode ~0.75px below the value and
+     the text jumped the moment you typed; font-medium gave the hint the same
+     presence as the label naming the field. */
   .input-base {
-    @apply px-input-px text-input-foreground placeholder:text-input-placeholder h-full min-h-0 flex-1 border-none bg-transparent outline-none placeholder:text-sm placeholder:font-medium focus:ring-0 focus:ring-offset-0;
+    @apply px-input-px text-input-foreground placeholder:text-input-placeholder h-full min-h-0 flex-1 border-none bg-transparent outline-none focus:ring-0 focus:ring-offset-0;
   }
 
   .input-disabled {

package/dist/globals.css

@@ -228,6 +228,10 @@
     --destructive-foreground: 0 0% 100%; /* white */
     --border: 240 5% 90%; /* base/200 = #E4E4E7 */
     --input: 0 0% 100%; /* base/white */
+    /* One step lighter than --muted-foreground, which is also the label colour:
+       a placeholder that matches its own label has no hierarchy left to give.
+       Still 4.4:1 on the shadcn-100 field, so it stays legible as a hint. */
+    --input-placeholder: 240 4% 46%; /* base/500 = #71717A */
     --ring: 240 5% 65%; /* focus ring */
     --radius: 0.5rem;
 
@@ -292,6 +296,10 @@
     --popover-foreground: 240 5% 96%; /* base/100 = #F4F4F5 */
     --border: 240 5% 34%; /* base/600 = #52525B */
     --input: 240 4% 16%; /* base/800 = #27272A */
+    /* Held at base/400 rather than stepped down with the light theme: on the
+       dark field that is already only 5.8:1, and going lighter here means
+       darker, which would push the hint under the AA floor. */
+    --input-placeholder: 240 5% 65%; /* base/400 = #A1A1AA */
     --primary: 240 5% 96%; /* base/100 = #F4F4F5 */
     --primary-foreground: 240 4% 16%; /* base/800 = #27272A */
     --secondary: 240 4% 16%; /* base/800 = #27272A */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "1.2.0-beta.11",
+  "version": "1.2.0-beta.13",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {