@lerianstudio/sindarian-ui 2.0.0-beta.2 → 2.0.0-beta.20

package/LICENSE

@@ -0,0 +1,93 @@
+Elastic License 2.0
+
+URL: https://www.elastic.co/licensing/elastic-license
+
+## Acceptance
+
+By using the software, you agree to all of the terms and conditions below.
+
+## Copyright License
+
+The licensor grants you a non-exclusive, royalty-free, worldwide,
+non-sublicensable, non-transferable license to use, copy, distribute, make
+available, and prepare derivative works of the software, in each case subject to
+the limitations and conditions below.
+
+## Limitations
+
+You may not provide the software to third parties as a hosted or managed
+service, where the service provides users with access to any substantial set of
+the features or functionality of the software.
+
+You may not move, change, disable, or circumvent the license key functionality
+in the software, and you may not remove or obscure any functionality in the
+software that is protected by the license key.
+
+You may not alter, remove, or obscure any licensing, copyright, or other notices
+of the licensor in the software. Any use of the licensor's trademarks is subject
+to applicable law.
+
+## Patents
+
+The licensor grants you a license, under any patent claims the licensor can
+license, or becomes able to license, to make, have made, use, sell, offer for
+sale, import and have imported the software, in each case subject to the
+limitations and conditions in this license. This license does not cover any
+patent claims that you cause to be infringed by modifications or additions to
+the software. If you or your company make any written claim that the software
+infringes or contributes to infringement of any patent, your patent license for
+the software granted under these terms ends immediately. If your company makes
+such a claim, your patent license ends immediately for work on behalf of your
+company.
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of the software from you
+also gets a copy of these terms.
+
+If you modify the software, you must include in any modified copies of the
+software prominent notices stating that you have modified the software.
+
+## No Other Rights
+
+These terms do not imply any licenses other than those expressly granted in
+these terms.
+
+## Termination
+
+If you use the software in violation of these terms, such use is not licensed,
+and your licenses will automatically terminate. If the licensor provides you
+with a notice of your violation, and you cease all violation of this license no
+later than 30 days after you receive that notice, your licenses will be
+reinstated retroactively. However, if you violate these terms after such
+reinstatement, any additional violation of these terms will cause your licenses
+to terminate automatically and permanently.
+
+## No Liability
+
+*As far as the law allows, the software comes as is, without any warranty or
+condition, and the licensor will not be liable to you for any damages arising
+out of these terms or the use or nature of the software, under any kind of
+legal claim.*
+
+## Definitions
+
+The **licensor** is the entity offering these terms, and the **software** is the
+software the licensor makes available under these terms, including any portion
+of it.
+
+**you** refers to the individual or entity agreeing to these terms.
+
+**your company** is any legal entity, sole proprietorship, or other kind of
+organization that you work for, plus all organizations that have control over,
+are under the control of, or are under common control with that
+organization. **control** means ownership of substantially all the assets of an
+entity, or the power to direct its management and policies by vote, contract, or
+otherwise. Control can be direct or indirect.
+
+**your licenses** are all the licenses granted to you for the software under
+these terms.
+
+**use** means anything you do with the software requiring one of your licenses.
+
+**trademark** means trademarks, service marks, and similar rights.

package/README.md

@@ -161,6 +161,57 @@ twice. The rules are identical and the duplication is harmless, costing roughly
 8 KB pre-gzip. Keep the app's `@import 'tailwindcss'` first; do not drop it to
 avoid the duplicate.
 
+## 📱 What a call site controls on a phone
+
+### `SheetContent` fills the screen below `sm`
+
+The panel was `w-2/5` with `p-12` at every viewport, which at 390px is a 156px
+panel with 9px of readable field inside it. Below 40rem it is now full width
+with 16px of side padding; the desktop panel is unchanged.
+
+A call site that declares its own width keeps it — the phone values carry the
+`max-sm:` modifier and tailwind-merge only drops a conflicting class with
+matching modifiers, so `className="w-[594px]"` still means 594px on a desktop
+AND full width on a phone, with no edit. A call site that wants its own phone
+geometry states it the same way:
+
+```tsx
+<SheetContent className="w-[594px] max-sm:w-[320px] max-sm:p-0" />
+```
+
+That modifier rule cuts both ways, and the padding is where a call site feels
+it: a bare `p-0` drops `p-12` and **cannot** reach `max-sm:px-4` either, so a
+panel that asked for no padding gets 16px a side below 40rem. If it genuinely
+wants none, `max-sm:p-0` is the one token that says so.
+
+The navigation drawer is exempt and says so itself; nothing at a call site is
+needed for it.
+
+### `SidebarTrigger` hides in pixels, not rems
+
+Its default is `min-[768px]:hidden`, the exact complement of the media query
+the drawer decision subscribes to. Do not restate that boundary as `md:hidden`
+anywhere: `md` is 48rem, and a rem inside a media query follows the browser's
+default font size, so the two flip at different widths as soon as a reader
+changes that setting — which left viewports with no rail and no hamburger.
+
+### `IconButton size="small"` answers a 2.5rem target
+
+The glyph stays 2rem; the tap target is an absolutely positioned pseudo-element
+at `.icon-button-base`'s own size, so no layout moves and a table row keeps its
+height. A call site needs nothing. Two of these side by side want at least
+`gap-1` between them, which is what makes each target stop at its neighbour's
+visible edge.
+
+### A `w-*` on an input is a preferred size; `shrink-0` on the wrapper is the floor
+
+`.input-base` declares no width, so the control contributes its intrinsic size
+and compresses when an ancestor says it may. A width utility on the input is
+therefore what it asks for, not what it keeps: in a row under pressure the
+field still gives. A field that must not give says so on its own wrapper with
+`shrink-0`, and a column that must compress says `min-w-0` on its own flex
+item. See `scripts/measure-input-shrink.mjs` for the fixtures and the numbers.
+
 ## 📚 Component Categories
 
 ### UI Primitives
@@ -304,7 +355,7 @@ See [CHANGELOG.md](./CHANGELOG.md) for a detailed history of changes.
 
 ## 📄 License
 
-This project is licensed under the ISC License.
+This project is licensed under the Elastic License 2.0 (ELv2).
 
 ---
 

package/dist/components/breadcrumb/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,cAAc,EAAE,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,WAAW,eAAe,sBAoBpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,cAAc,EAAE,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,WAAW,eAAe,sBAmDpD,CAAA"}

package/dist/components/breadcrumb/index.js

@@ -8,6 +8,30 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const breadcrumb_1 = require("../../components/ui/breadcrumb");
 const Breadcrumb = ({ paths }) => {
-    return ((0, jsx_runtime_1.jsx)(breadcrumb_1.Breadcrumb, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbList, { children: paths.map((path, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbItem, { children: path.href ? ((0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbLink, { href: path.href, children: path.name })) : ((0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbPage, { children: path.name })) }), (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbSeparator, {})] }, index))) }) }));
+    const last = paths.length - 1;
+    return ((0, jsx_runtime_1.jsx)(breadcrumb_1.Breadcrumb, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbList, { children: paths.map((path, index) => {
+                /**
+                 * ⛔ THE LAST CRUMB IS THE PAGE, whatever the caller passed.
+                 *
+                 * The page marker used to be a side effect of the caller omitting
+                 * `href`, and nothing in `getBreadcrumbPaths` makes the last entry
+                 * omit one. A trail whose final entry carried an href therefore had
+                 * no `aria-current="page"` anywhere — a screen reader could not tell
+                 * which of three links was the page being read — and the crumb was a
+                 * live link back to the page the reader is already on.
+                 *
+                 * ⚠️ AND AN HREF-LESS ANCESTOR IS NOT A SWITCHED-OFF LINK. It used
+                 * to reach `BreadcrumbPage` too, which hard-codes `role="link"
+                 * aria-disabled="true"` — the right shape for the page you are ON,
+                 * a destination that exists and simply is not navigable from here.
+                 * An ancestor with no href is a grouping label: there is no page
+                 * behind it, so "Settings, link, dimmed" told the reader a
+                 * destination was unavailable to them rather than that it was never
+                 * a destination, and inflated the link count of the trail. It is
+                 * plain text now, and only the last crumb is the page.
+                 */
+                const isLast = index === last;
+                return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbItem, { children: path.href && !isLast ? ((0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbLink, { href: path.href, children: path.name })) : isLast ? ((0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbPage, { children: path.name })) : ((0, jsx_runtime_1.jsx)("span", { className: "breadcrumb-page", children: path.name })) }), !isLast && (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadcrumbSeparator, {})] }, index));
+            }) }) }));
 };
 exports.Breadcrumb = Breadcrumb;

package/dist/components/card/account-card/index.js

@@ -39,7 +39,7 @@ function AccountBalanceCardHeader({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "account-balance-card-header", className: (0, utils_1.cn)('flex flex-col', className), ...props }));
 }
 function AccountBalanceCardTitle({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("p", { "data-slot": "account-balance-card-title", className: (0, utils_1.cn)('text-shadcn-600 text-lg font-bold', className), ...props }));
+    return ((0, jsx_runtime_1.jsx)("p", { "data-slot": "account-balance-card-title", className: (0, utils_1.cn)('text-foreground text-lg font-bold', className), ...props }));
 }
 function AccountBalanceCardDeleteButton({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { variant: "outline", size: "small", rounded: true, "data-slot": "account-balance-card-delete-button", className: (0, utils_1.cn)('absolute top-3 right-3', className), ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash, { className: "text-muted-foreground h-4 w-4" }) }));
@@ -51,19 +51,19 @@ function AccountBalanceCardLoading({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { "data-slot": "account-balance-card-loading", className: (0, utils_1.cn)('bg-muted mt-3 h-3 w-full rounded-md', className), ...props }));
 }
 function AccountBalanceCardEmpty({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("p", { "data-slot": "account-balance-card-empty", className: (0, utils_1.cn)('text-shadcn-500 mt-3 text-center text-sm font-normal', className), ...props }));
+    return ((0, jsx_runtime_1.jsx)("p", { "data-slot": "account-balance-card-empty", className: (0, utils_1.cn)('text-muted-foreground mt-3 text-center text-sm font-normal', className), ...props }));
 }
 function AccountBalanceCardInfo({ className, assetCode, value, children: _children, ref, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, "data-slot": "account-balance-card-info", className: (0, utils_1.cn)('text-shadcn-500 mt-3 flex flex-row items-center justify-between text-sm font-normal', className), ...props, children: [(0, jsx_runtime_1.jsx)("p", { children: assetCode }), (0, jsx_runtime_1.jsx)("p", { children: value })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, "data-slot": "account-balance-card-info", className: (0, utils_1.cn)('text-muted-foreground mt-3 flex flex-row items-center justify-between text-sm font-normal', className), ...props, children: [(0, jsx_runtime_1.jsx)("p", { children: assetCode }), (0, jsx_runtime_1.jsx)("p", { children: value })] }));
 }
 function AccountBalanceCardUpdateButton({ className: _className, loading, timestamp, loadingLabel = 'Updating...', updatedInLabel = 'Updated in', updatedLabel = 'Updated', onRefresh, children: _children, ref, ...props }) {
     const _time = (0, use_time_1.useTime)({ interval: 1000 * 60 });
     const updated = react_1.default.useMemo(() => {
         return !(0, dayjs_1.default)(timestamp).isBefore((0, dayjs_1.default)().subtract(1, 'minute'));
     }, [_time, timestamp]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex flex-row items-center justify-end gap-2", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-shadcn-500 text-xs font-medium", children: [loading && loadingLabel, !loading && !updated && updatedInLabel, !loading && updated && updatedLabel] }), !loading && updated && ((0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { className: "text-system-success-h1a h-4 w-4" })), (!updated || loading) && ((0, jsx_runtime_1.jsx)(button_1.Button, { ref: ref, variant: "link", "data-slot": "account-balance-card-update-button", className: "h-3 p-0", onClick: onRefresh, disabled: loading, ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { className: (0, utils_1.cn)('size-4', { 'motion-safe:animate-spin': loading }) }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex flex-row items-center justify-end gap-2", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-muted-foreground text-xs font-medium", children: [loading && loadingLabel, !loading && !updated && updatedInLabel, !loading && updated && updatedLabel] }), !loading && updated && ((0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { className: "text-system-success-h1a h-4 w-4" })), (!updated || loading) && ((0, jsx_runtime_1.jsx)(button_1.Button, { ref: ref, variant: "link", "data-slot": "account-balance-card-update-button", className: "h-3 p-0", onClick: onRefresh, disabled: loading, ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { className: (0, utils_1.cn)('size-4', { 'motion-safe:animate-spin': loading }) }) }))] }));
 }
 function AccountBalanceCardTrigger({ className, openLabel, closeLabel, children: _children, ...props }) {
     const { open } = react_1.default.useContext(AccountBalanceCardContext);
-    return ((0, jsx_runtime_1.jsx)(collapsible_1.CollapsibleTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "link", "data-slot": "account-balance-card-trigger", className: (0, utils_1.cn)('text-shadcn-600/40 h-4 p-0 text-xs', className), ...props, children: !open ? openLabel : closeLabel }) }));
+    return ((0, jsx_runtime_1.jsx)(collapsible_1.CollapsibleTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "link", "data-slot": "account-balance-card-trigger", className: (0, utils_1.cn)('text-muted-foreground h-4 p-0 text-xs', className), ...props, children: !open ? openLabel : closeLabel }) }));
 }

package/dist/components/card/basic-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/card/basic-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAO7B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAO5B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAO7B;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAE7B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/card/basic-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAO7B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAO5B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAU7B;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAE7B"}

package/dist/components/card/basic-card/index.js

@@ -10,10 +10,10 @@ function BasicCard({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('bg-card flex flex-col rounded-lg p-6', className), ...props }));
 }
 function BasicCardTitle({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("h2", { className: (0, utils_1.cn)('text-shadcn-600 mb-4 text-sm font-medium', className), ...props }));
+    return ((0, jsx_runtime_1.jsx)("h2", { className: (0, utils_1.cn)('text-foreground mb-4 text-sm font-medium', className), ...props }));
 }
 function BasicCardContent({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('text-shadcn-500 mb-6 text-sm font-medium', className), ...props }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('text-muted-foreground mb-6 text-sm font-medium', className), ...props }));
 }
 function BasicCardAction({ className, ...props }) {
     return (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('flex flex-col', className), ...props });

package/dist/components/card/entity-card/index.js

@@ -61,7 +61,7 @@ function EntityCardDescription({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)("p", { "data-slot": "entity-card-description", className: (0, utils_1.cn)('text-muted-foreground text-xs font-medium', className), ...props }));
 }
 function EntityCardList({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("ul", { "data-slot": "entity-card-list", className: (0, utils_1.cn)('text-shadcn-500 mx-2 list-inside list-disc space-y-1 text-xs font-medium', className), ...props }));
+    return ((0, jsx_runtime_1.jsx)("ul", { "data-slot": "entity-card-list", className: (0, utils_1.cn)('text-muted-foreground mx-2 list-inside list-disc space-y-1 text-xs font-medium', className), ...props }));
 }
 function EntityCardFooter({ className, children, ...props }) {
     return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "entity-card-footer", className: (0, utils_1.cn)('text-muted-foreground flex flex-col gap-2 text-xs font-medium', className), ...props, children: [(0, jsx_runtime_1.jsx)(separator_1.Separator, {}), (0, jsx_runtime_1.jsx)("div", { className: "[&>svg]:text-muted-foreground flex flex-row items-center gap-2 [&>svg]:size-4 [&>svg]:stroke-[1.5]", children: children })] }));

package/dist/components/dialog/confirmation-dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/confirmation-dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuD9B,KAAK,6BAA6B,GAAG;IACnC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAA;IAC3D;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,KAAK,8BAA8B,GAC/B;IACE,OAAO,EAAE,OAAO,CAAA;IAChB;;;;;;OAMG;IACH,YAAY,EAAE,MAAM,CAAA;CACrB,GACD;IACE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;yEACqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAEL,MAAM,MAAM,uBAAuB,GAAG,6BAA6B,GACjE,8BAA8B,CAAA;AAEhC,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,KAAY,EACZ,WAAkB,EAClB,OAAmB,EACnB,OAAO,EACP,SAAoB,EACpB,QAAmB,EACnB,YAAY,EACZ,WAAW,EACX,YAAY,EACb,EAAE,uBAAuB,qBA8FzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/dialog/confirmation-dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuD9B,KAAK,6BAA6B,GAAG;IACnC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAA;IAC3D;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,KAAK,8BAA8B,GAC/B;IACE,OAAO,EAAE,OAAO,CAAA;IAChB;;;;;;OAMG;IACH,YAAY,EAAE,MAAM,CAAA;CACrB,GACD;IACE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;yEACqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAEL,MAAM,MAAM,uBAAuB,GAAG,6BAA6B,GACjE,8BAA8B,CAAA;AAEhC,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,KAAY,EACZ,WAAkB,EAClB,OAAmB,EACnB,OAAO,EACP,SAAoB,EACpB,QAAmB,EACnB,YAAY,EACZ,WAAW,EACX,YAAY,EACb,EAAE,uBAAuB,qBAiGzB"}

package/dist/components/dialog/confirmation-dialog/index.js

@@ -89,5 +89,8 @@ function ConfirmationDialog({ open, onOpenChange, title = null, description = nu
                 if (busy) {
                     event.preventDefault();
                 }
-            }, children: [(0, jsx_runtime_1.jsxs)(alert_dialog_1.AlertDialogHeader, { className: "flex-row items-center", children: [(0, jsx_runtime_1.jsx)(ConfirmationDialogIcon, { variant: variant }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [title == null || title === false || title === true || title === '' ? ((0, jsx_runtime_1.jsx)(alert_dialog_1.AlertDialogTitle, { className: "sr-only", children: confirmLabel || 'Confirm' })) : ((0, jsx_runtime_1.jsx)(alert_dialog_1.AlertDialogTitle, { children: title })), description == null ? null : ((0, jsx_runtime_1.jsx)(alert_dialog_1.AlertDialogDescription, { children: description }))] })] }), pendingLabel ? ((0, jsx_runtime_1.jsx)("span", { role: "status", className: "sr-only", children: busy ? pendingLabel : '' })) : null, (0, jsx_runtime_1.jsxs)(alert_dialog_1.AlertDialogFooter, { className: "gap-4", children: [(0, jsx_runtime_1.jsx)(alert_dialog_1.AlertDialogCancel, { asChild: true, variant: "secondary", children: (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onCancel, disabled: busy, variant: "secondary", size: "small", children: cancelLabel ?? 'Cancel' }) }), (0, jsx_runtime_1.jsx)(loading_button_1.LoadingButton, { loading: busy, onClick: handleConfirm, variant: "primary", size: "small", "data-testid": "confirm", children: confirmLabel ?? 'Confirm' })] })] }) }));
+            }, children: [(0, jsx_runtime_1.jsxs)(alert_dialog_1.AlertDialogHeader, { className: "flex-row items-center", children: [(0, jsx_runtime_1.jsx)(ConfirmationDialogIcon, { variant: variant }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [title == null ||
+                                    title === false ||
+                                    title === true ||
+                                    title === '' ? ((0, jsx_runtime_1.jsx)(alert_dialog_1.AlertDialogTitle, { className: "sr-only", children: confirmLabel || 'Confirm' })) : ((0, jsx_runtime_1.jsx)(alert_dialog_1.AlertDialogTitle, { children: title })), description == null ? null : ((0, jsx_runtime_1.jsx)(alert_dialog_1.AlertDialogDescription, { children: description }))] })] }), pendingLabel ? ((0, jsx_runtime_1.jsx)("span", { role: "status", className: "sr-only", children: busy ? pendingLabel : '' })) : null, (0, jsx_runtime_1.jsxs)(alert_dialog_1.AlertDialogFooter, { className: "gap-4", children: [(0, jsx_runtime_1.jsx)(alert_dialog_1.AlertDialogCancel, { asChild: true, variant: "secondary", children: (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onCancel, disabled: busy, variant: "secondary", size: "small", children: cancelLabel ?? 'Cancel' }) }), (0, jsx_runtime_1.jsx)(loading_button_1.LoadingButton, { loading: busy, onClick: handleConfirm, variant: "primary", size: "small", "data-testid": "confirm", children: confirmLabel ?? 'Confirm' })] })] }) }));
 }

package/dist/components/entity-box/index.d.ts

@@ -1,8 +1,24 @@
 import React from 'react';
 import { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
 declare function EntityBox({ className, children, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-declare function EntityBoxCollapsible({ className, ...props }: CollapsibleProps): React.JSX.Element;
-declare function EntityBoxCollapsibleTrigger(props: CollapsibleTriggerProps): React.JSX.Element;
+declare function EntityBoxCollapsible({ className, open, defaultOpen, onOpenChange, ...props }: CollapsibleProps): React.JSX.Element;
+export type EntityBoxCollapsibleTriggerProps = CollapsibleTriggerProps & {
+    /** Accessible name while the box is closed. */
+    expandLabel?: string;
+    /** Accessible name while the box is open. */
+    collapseLabel?: string;
+};
+/**
+ * ⛔ THIS TRIGGER HAS NO TEXT NODE. It is a `Settings2` glyph inside a Button,
+ * so without an `aria-label` a screen reader announced "button" and nothing
+ * else (SC 4.1.2) — and this is the control that opens the filter panel on
+ * every console list page.
+ *
+ * The name describes the ACTION and Radix's `aria-expanded` carries the state,
+ * so the two halves do not repeat each other. English defaults because no
+ * consumer passes a label today; a translated console overrides both.
+ */
+declare function EntityBoxCollapsibleTrigger({ expandLabel, collapseLabel, 'aria-label': ariaLabel, ...props }: EntityBoxCollapsibleTriggerProps): React.JSX.Element;
 declare function EntityBoxCollapsibleContent({ children, ...props }: CollapsibleContentProps): React.JSX.Element;
 export interface EntityBoxHeaderProps extends React.ComponentProps<'div'> {
     title: string;

package/dist/components/entity-box/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/entity-box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAczB,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,6BAA6B,CAAA;AAIpC,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAa7B;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAUtE;AAED,iBAAS,2BAA2B,CAAC,KAAK,EAAE,uBAAuB,qBAQlE;AAED,iBAAS,2BAA2B,CAAC,EACnC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,qBAOzB;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACvE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC/B;AAED,iBAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,EACT,EAAE,EAAE,OAAc,EAClB,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAkCtB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAU7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAa7B;AAED,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,2BAA2B,EAC3B,2BAA2B,EAC3B,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EACjB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/entity-box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAczB,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,6BAA6B,CAAA;AAIpC,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAa7B;AAYD,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAoBlB;AAED,MAAM,MAAM,gCAAgC,GAAG,uBAAuB,GAAG;IACvE,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;;;;;;;GASG;AACH,iBAAS,2BAA2B,CAAC,EACnC,WAAsB,EACtB,aAA0B,EAC1B,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,gCAAgC,qBAclC;AAED,iBAAS,2BAA2B,CAAC,EACnC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,qBAOzB;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACvE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC/B;AAED,iBAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,EACT,EAAE,EAAE,OAAc,EAClB,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAkCtB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAU7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAa7B;AAED,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,2BAA2B,EAC3B,2BAA2B,EAC3B,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EACjB,CAAA"}

package/dist/components/entity-box/index.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityBox = EntityBox;
 exports.EntityBoxCollapsible = EntityBoxCollapsible;
@@ -8,6 +11,7 @@ exports.EntityBoxHeaderTitle = EntityBoxHeaderTitle;
 exports.EntityBoxBanner = EntityBoxBanner;
 exports.EntityBoxActions = EntityBoxActions;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const utils_1 = require("../../lib/utils");
 const tooltip_1 = require("../ui/tooltip");
 const lucide_react_1 = require("lucide-react");
@@ -17,11 +21,35 @@ const separator_1 = require("../ui/separator");
 function EntityBox({ className, children, ...props }) {
     return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "entity-box", className: (0, utils_1.cn)('shadow-entity-box bg-card mb-2 flex items-center justify-between rounded-lg p-6', className), ...props, children: children }));
 }
-function EntityBoxCollapsible({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(collapsible_1.Collapsible, { className: (0, utils_1.cn)('shadow-entity-box bg-card mb-2 flex flex-col rounded-lg', className), ...props }));
+/**
+ * The open state, republished for the trigger.
+ *
+ * Radix keeps it in a context it does not export, and the trigger one element
+ * down needs it to say what activating it will DO. Mirroring it here rather
+ * than forcing every consumer to lift the state: all ten console call sites
+ * render `<EntityBoxCollapsible>` uncontrolled.
+ */
+const EntityBoxCollapsibleContext = react_1.default.createContext(false);
+function EntityBoxCollapsible({ className, open, defaultOpen, onOpenChange, ...props }) {
+    const [uncontrolled, setUncontrolled] = react_1.default.useState(defaultOpen ?? false);
+    return ((0, jsx_runtime_1.jsx)(EntityBoxCollapsibleContext.Provider, { value: open ?? uncontrolled, children: (0, jsx_runtime_1.jsx)(collapsible_1.Collapsible, { className: (0, utils_1.cn)('shadow-entity-box bg-card mb-2 flex flex-col rounded-lg', className), open: open, defaultOpen: defaultOpen, onOpenChange: (next) => {
+                setUncontrolled(next);
+                onOpenChange?.(next);
+            }, ...props }) }));
 }
-function EntityBoxCollapsibleTrigger(props) {
-    return ((0, jsx_runtime_1.jsx)(collapsible_1.CollapsibleTrigger, { ...props, asChild: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "secondary", className: "h-[34px] w-[34px] p-2", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings2, { size: 16 }) }) }));
+/**
+ * ⛔ THIS TRIGGER HAS NO TEXT NODE. It is a `Settings2` glyph inside a Button,
+ * so without an `aria-label` a screen reader announced "button" and nothing
+ * else (SC 4.1.2) — and this is the control that opens the filter panel on
+ * every console list page.
+ *
+ * The name describes the ACTION and Radix's `aria-expanded` carries the state,
+ * so the two halves do not repeat each other. English defaults because no
+ * consumer passes a label today; a translated console overrides both.
+ */
+function EntityBoxCollapsibleTrigger({ expandLabel = 'Expand', collapseLabel = 'Collapse', 'aria-label': ariaLabel, ...props }) {
+    const open = react_1.default.useContext(EntityBoxCollapsibleContext);
+    return ((0, jsx_runtime_1.jsx)(collapsible_1.CollapsibleTrigger, { ...props, asChild: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "secondary", className: "h-[34px] w-[34px] p-2", "aria-label": ariaLabel ?? (open ? collapseLabel : expandLabel), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings2, { size: 16, "aria-hidden": true }) }) }));
 }
 function EntityBoxCollapsibleContent({ children, ...props }) {
     return ((0, jsx_runtime_1.jsxs)(collapsible_1.CollapsibleContent, { ...props, children: [(0, jsx_runtime_1.jsx)(separator_1.Separator, { orientation: "horizontal" }), (0, jsx_runtime_1.jsx)("div", { className: "grid w-full grid-cols-3 p-6", children: children })] }));

package/dist/components/form/date-picker-field/index.js

@@ -73,7 +73,7 @@ const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeh
             const handleSelect = (date) => {
                 field.onChange(convertDateToOutputFormat(date));
             };
-            return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: value ? ((0, jsx_runtime_1.jsx)("span", { className: "text-foreground flex-1 text-left font-bold", children: (0, dayjs_1.default)(value).format(dateFormat) })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "single", 
+            return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('bg-input hover:bg-input border-input-border text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: value ? ((0, jsx_runtime_1.jsx)("span", { className: "text-foreground flex-1 text-left font-bold", children: (0, dayjs_1.default)(value).format(dateFormat) })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "single", 
                                     // `required` mirrors the field's own required: a required
                                     // field is not emptied by a re-click; an optional one keeps
                                     // react-day-picker's clear gesture.

package/dist/components/form/date-range-field/index.js

@@ -52,7 +52,7 @@ const DateRangeField = ({ name, label, tooltip, labelExtra, description, placeho
     const [open, setOpen] = React.useState(false);
     return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, render: ({ field }) => {
             const value = field.value;
-            return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: value?.from ? ((0, jsx_runtime_1.jsx)("span", { className: "text-foreground flex-1 text-left font-bold", children: value.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, dayjs_1.default)(value.from).format(dateFormat), " -", ' ', (0, dayjs_1.default)(value.to).format(dateFormat)] })) : ((0, dayjs_1.default)(value.from).format(dateFormat)) })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "range", defaultMonth: value?.from, selected: value, onSelect: field.onChange, numberOfMonths: numberOfMonths, disabled: disabled || readOnly, locale: locale }) })] }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
+            return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('bg-input hover:bg-input border-input-border text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: value?.from ? ((0, jsx_runtime_1.jsx)("span", { className: "text-foreground flex-1 text-left font-bold", children: value.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, dayjs_1.default)(value.from).format(dateFormat), " -", ' ', (0, dayjs_1.default)(value.to).format(dateFormat)] })) : ((0, dayjs_1.default)(value.from).format(dateFormat)) })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "range", defaultMonth: value?.from, selected: value, onSelect: field.onChange, numberOfMonths: numberOfMonths, disabled: disabled || readOnly, locale: locale }) })] }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
         } }));
 };
 exports.DateRangeField = DateRangeField;

package/dist/components/form/date-time-picker-field/index.js

@@ -91,7 +91,7 @@ const DateTimePickerField = ({ name, label, tooltip, labelExtra, description, pl
                 setOpen(false);
             };
             const showClear = !!field.value && !readOnly && !disabled;
-            return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative w-full", children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', showClear && 'pr-8', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-foreground flex-1 text-left', validCurrent && 'font-bold'), children: validCurrent
+            return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative w-full", children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('bg-input hover:bg-input border-input-border text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', showClear && 'pr-8', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-foreground flex-1 text-left', validCurrent && 'font-bold'), children: validCurrent
                                                         ? validCurrent.format(dateFormat)
                                                         : placeholder }) }) }) }), showClear && ((0, jsx_runtime_1.jsx)("span", { role: "button", tabIndex: 0, "aria-label": "Clear date and time", className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute top-1/2 right-2 z-10 inline-flex shrink-0 -translate-y-1/2 rounded-sm outline-none focus-visible:ring-2", onClick: handleClear, onKeyDown: (e) => {
                                             if (e.key === 'Enter' || e.key === ' ') {

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

@@ -9,6 +9,10 @@ export type PasswordFieldProps<TFieldValues extends FieldValues = FieldValues, T
     required?: boolean;
     disabled?: boolean;
     'data-testid'?: string;
+    /** Accessible name of the eye button while the password is hidden. */
+    showPasswordLabel?: string;
+    /** Accessible name of the eye button while the password is showing. */
+    hidePasswordLabel?: string;
 };
-export declare function PasswordField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, tooltip, placeholder, control, required, disabled, 'data-testid': dataTestId }: PasswordFieldProps<TFieldValues, TName>): React.JSX.Element;
+export declare function PasswordField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, tooltip, placeholder, control, required, disabled, 'data-testid': dataTestId, showPasswordLabel, hidePasswordLabel }: PasswordFieldProps<TFieldValues, TName>): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/password-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAajE,MAAM,MAAM,kBAAkB,CAC5B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,IAC7D;IACF,IAAI,EAAE,KAAK,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,aAAa,CAC3B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,OAAO,EACP,WAAW,EACX,OAAO,EACP,QAAgB,EAChB,QAAgB,EAChB,aAAa,EAAE,UAAU,EAC1B,EAAE,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,qBA0CzC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/password-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAajE,MAAM,MAAM,kBAAkB,CAC5B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,IAC7D;IACF,IAAI,EAAE,KAAK,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,wBAAgB,aAAa,CAC3B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,OAAO,EACP,WAAW,EACX,OAAO,EACP,QAAgB,EAChB,QAAgB,EAChB,aAAa,EAAE,UAAU,EACzB,iBAAmC,EACnC,iBAAmC,EACpC,EAAE,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,qBAuDzC"}

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

@@ -10,7 +10,7 @@ const form_1 = require("../../../components/ui/form");
 const input_1 = require("../../../components/ui/input");
 const lucide_react_1 = require("lucide-react");
 const icon_button_1 = require("../../../components/ui/icon-button");
-function PasswordField({ name, label, tooltip, placeholder, control, required = false, disabled = false, 'data-testid': dataTestId }) {
+function PasswordField({ name, label, tooltip, placeholder, control, required = false, disabled = false, 'data-testid': dataTestId, showPasswordLabel = 'Show password', hidePasswordLabel = 'Hide password' }) {
     const [show, setShow] = react_1.default.useState(false);
-    return ((0, jsx_runtime_1.jsx)(form_1.FormField, { control: control, name: name, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [(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)(input_1.Input, { ...field, type: show ? 'text' : 'password', placeholder: placeholder, endAdornment: (0, jsx_runtime_1.jsx)(input_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "outline", rounded: true, onClick: () => setShow(!show), children: show ? (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, {}) : (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, {}) }) }), disabled: disabled, className: "pr-10", "data-testid": dataTestId }) }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {})] })) }));
+    return ((0, jsx_runtime_1.jsx)(form_1.FormField, { control: control, name: name, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [(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)(input_1.Input, { ...field, type: show ? 'text' : 'password', placeholder: placeholder, endAdornment: (0, jsx_runtime_1.jsx)(input_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "outline", rounded: true, "aria-label": show ? hidePasswordLabel : showPasswordLabel, onClick: () => setShow(!show), children: show ? (0, jsx_runtime_1.jsx)(lucide_react_1.EyeOff, { "aria-hidden": true }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { "aria-hidden": true }) }) }), disabled: disabled, className: "pr-10", "data-testid": dataTestId }) }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {})] })) }));
 }

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

@@ -15,6 +15,20 @@ type SelectFieldSharedProps<T extends FieldValues = FieldValues> = PropsWithChil
     required?: boolean;
     /** Copy for the "nothing to pick" row. Defaults to "No options found." */
     emptyMessage?: string;
+    /**
+     * Rendered inside the trigger, before the value — where a filter bar wants
+     * its glyph. On the single select it shares one flex box with the value so
+     * the trigger keeps exactly two children; on the multi select the trigger
+     * already groups them. The node itself is passed through untouched, with
+     * no `aria-hidden`: the prop takes an arbitrary node, and hiding it from
+     * the accessibility tree on the caller's behalf would silence a node the
+     * caller may have made meaningful on purpose. The trigger is named by its
+     * label and its value, so the node passed here should be decorative.
+     *
+     * Spacing is the caller's: the kit adds no margin, because a gap here
+     * would double with the one every existing call site already carries.
+     */
+    leadingIcon?: ReactNode;
     /**
      * Placed on the field's own root box, merged with its spacing rather than
      * replacing it. The root is the element a parent grid positions, so
@@ -47,6 +61,6 @@ type SelectFieldModeProps = {
     onChange?: (value: string) => void;
 };
 export type SelectFieldProps<T extends FieldValues = FieldValues> = SelectFieldSharedProps<T> & SelectFieldModeProps;
-export declare const SelectField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage, className, onChange, ...others }: SelectFieldProps<T>) => React.JSX.Element;
+export declare const SelectField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage, leadingIcon, className, onChange, ...others }: SelectFieldProps<T>) => React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/select-field/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EACL,OAAO,EAEP,WAAW,EAEZ,MAAM,iBAAiB,CAAA;AAExB,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC7D,iBAAiB,GAAG;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;qCACiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAEH;;;;;;;;GAQG;AACH,KAAK,oBAAoB,GACrB;IACE,KAAK,EAAE,IAAI,CAAA;IACX;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACrC,GACD;IACE,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AAEL,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC9D,sBAAsB,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAA;AAWlD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,6KAkB9D,gBAAgB,CAAC,CAAC,CAAC,sBA6FrB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/select-field/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EACL,OAAO,EAEP,WAAW,EAEZ,MAAM,iBAAiB,CAAA;AAExB,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC7D,iBAAiB,GAAG;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;qCACiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAEH;;;;;;;;GAQG;AACH,KAAK,oBAAoB,GACrB;IACE,KAAK,EAAE,IAAI,CAAA;IACX;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACrC,GACD;IACE,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AAEL,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC9D,sBAAsB,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAA;AAWlD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,0LAmB9D,gBAAgB,CAAC,CAAC,CAAC,sBAgIrB,CAAA"}

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

@@ -6,20 +6,45 @@ const form_1 = require("../../../components/ui/form");
 const multiple_select_1 = require("../../../components/ui/multiple-select");
 const select_1 = require("../../../components/ui/select");
 const utils_1 = require("../../../lib/utils");
-const SelectField = ({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage = 'No options found.', className, onChange, ...others }) => {
+const SelectField = ({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage = 'No options found.', leadingIcon, className, onChange, ...others }) => {
     // The props union already pairs `multi` with the callback shape that branch
     // emits, but destructuring an intersection loses that correlation — TS sees
     // two unrelated callbacks. Both branches report through this one seam, each
     // with the payload its own union member declared.
     const emitChange = onChange;
+    /**
+     * ⛔ THE GLYPH AND THE VALUE ARE ONE FLEX CHILD, NEVER TWO.
+     *
+     * `.select-trigger` is `flex w-full items-center justify-between`, so a
+     * third child makes it split the free space into TWO gaps: on any trigger
+     * wider than its content — which is every filter bar — the selected value
+     * drifted to the middle of the box instead of sitting beside the glyph.
+     * Wrapped, the trigger is back to two children, content and chevron,
+     * whatever the caller passes.
+     *
+     * `min-w-0` keeps the value truncating: the wrapper is the flex item now,
+     * and a flex item never shrinks below its own min-content width. The
+     * trigger's `VALUE_OVERFLOW_CLASS` reaches through it by descendant
+     * selector.
+     *
+     * No `gap`: the prop's contract is that spacing is the caller's (the Tracer
+     * filter bars carry their own `mr-2`), and a kit gap would double with it.
+     *
+     * The MULTI trigger needs none of this — it already renders its children
+     * inside one `flex grow flex-wrap` box, so the icon already shares a parent
+     * with the value and the trigger root already has exactly two children.
+     * Wrapping there would put the selected-value badges in a non-wrapping row
+     * and stop the trigger growing to a second line.
+     */
+    const withLeadingIcon = (value) => leadingIcon ? ((0, jsx_runtime_1.jsxs)("span", { className: "flex min-w-0 items-center", children: [leadingIcon, value] })) : (value);
     const renderItem = (field) => {
         return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, className: className, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), multi ? ((0, jsx_runtime_1.jsxs)(multiple_select_1.MultipleSelect, { onValueChange: (value) => {
                         field.onChange(value);
                         emitChange?.(value);
-                    }, disabled: disabled, ...field, children: [(0, jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectTrigger, { readOnly: readOnly, children: (0, jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectValue, { placeholder: placeholder }) }), (0, jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectContent, { children: children })] })) : ((0, jsx_runtime_1.jsxs)(select_1.Select, { onValueChange: (value) => {
+                    }, disabled: disabled, ...field, children: [(0, jsx_runtime_1.jsxs)(multiple_select_1.MultipleSelectTrigger, { readOnly: readOnly, children: [leadingIcon, (0, jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectValue, { placeholder: placeholder })] }), (0, jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectContent, { children: children })] })) : ((0, jsx_runtime_1.jsxs)(select_1.Select, { onValueChange: (value) => {
                         field.onChange(value);
                         emitChange?.(value);
-                    }, value: field.value, disabled: disabled, open: readOnly ? false : undefined, onOpenChange: readOnly ? () => { } : undefined, children: [(0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { className: (0, utils_1.cn)(disabled && 'bg-shadcn-100'), readOnly: readOnly, "data-testid": others['data-testid'], children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: placeholder }) }) }), (0, jsx_runtime_1.jsxs)(select_1.SelectContent, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectEmpty, { children: emptyMessage }), children] })] })), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
+                    }, value: field.value, disabled: disabled, open: readOnly ? false : undefined, onOpenChange: readOnly ? () => { } : undefined, children: [(0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { className: (0, utils_1.cn)(disabled && 'bg-shadcn-100'), readOnly: readOnly, "data-testid": others['data-testid'], children: withLeadingIcon((0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: placeholder })) }) }), (0, jsx_runtime_1.jsxs)(select_1.SelectContent, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectEmpty, { children: emptyMessage }), children] })] })), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
     };
     if (!control) {
         // `value` undefined leaves Radix to keep its own state, so an uncontrolled

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/switch-field/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAClE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,+GAU9D,gBAAgB,CAAC,CAAC,CAAC,gCAiDrB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/switch-field/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAClE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,+GAU9D,gBAAgB,CAAC,CAAC,CAAC,gCAiDrB,CAAA"}

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

@@ -6,6 +6,11 @@ const form_1 = require("../../../components/ui/form");
 const switch_1 = require("../../../components/ui/switch");
 const tooltip_1 = require("../../../components/ui/tooltip");
 const SwitchField = ({ label, name, control, labelExtra, tooltip, required, disabled, disabledTooltip, 'data-testid': dataTestId }) => {
-    return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: disabled && disabledTooltip ? ((0, jsx_runtime_1.jsx)(tooltip_1.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex w-auto", children: (0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: field.value, onCheckedChange: field.onChange, disabled: disabled }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { children: disabledTooltip })] }) })) : ((0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: field.value, onCheckedChange: field.onChange, disabled: disabled, "data-testid": dataTestId })) }) }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {})] })) }));
+    return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, render: ({ field }) => {
+            // FormControl stamps the id the label points at on its direct child,
+            // so it must wrap the Switch itself, never the tooltip around it.
+            const control = ((0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: field.value, onCheckedChange: field.onChange, disabled: disabled, "data-testid": dataTestId }) }));
+            return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsx)("div", { className: "relative", children: disabled && disabledTooltip ? ((0, jsx_runtime_1.jsxs)(tooltip_1.Tooltip, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("div", { className: "inline-flex w-auto", children: control }) }), (0, jsx_runtime_1.jsx)(tooltip_1.TooltipContent, { children: disabledTooltip })] })) : (control) }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {})] }));
+        } }));
 };
 exports.SwitchField = SwitchField;