@lerianstudio/sindarian-ui 2.0.0-beta.4 → 2.0.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +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"}
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,qBAiGzB"}
@@ -89,5 +89,8 @@ function ConfirmationDialog({ open, onOpenChange, title = null, description = nu
89
89
  if (busy) {
90
90
  event.preventDefault();
91
91
  }
92
- }, 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' })] })] }) }));
92
+ }, 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 ||
93
+ title === false ||
94
+ title === true ||
95
+ 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' })] })] }) }));
93
96
  }
@@ -1,12 +1,5 @@
1
1
  import * as React from 'react';
2
2
  import { type VariantProps } from 'class-variance-authority';
3
- /**
4
- * `credit` is the accounting reading of a credit amount, NOT an alias of
5
- * `destructive` (an error/alarm). The credit role is a tint-and-ink pair:
6
- * `--credit-foreground` mirrors `--credit` by contract, so the red carries the
7
- * role as text over a tinted surface. Do not "fix" this into a solid
8
- * `bg-credit` fill — that renders red-on-red and is invisible.
9
- */
10
3
  /**
11
4
  * `gap-1` is load-bearing, not decoration: a badge holding a label AND an
12
5
  * element child (`ID<code>ctx-123</code>`) has nothing between them otherwise —
@@ -14,6 +7,17 @@ import { type VariantProps } from 'class-variance-authority';
14
7
  * anonymous flex item — so the screen reads `IDctx-123`. Consumers were pasting
15
8
  * `className="gap-1"` per call site; `cn` runs tailwind-merge, so an explicit
16
9
  * `gap-2` still wins. Single-child badges are unaffected: gap needs two items.
10
+ *
11
+ * `whitespace-nowrap` keeps the pill a pill. `rounded-full` draws the ends as
12
+ * semicircles sized to ONE line box, so a label that wraps stretches those caps
13
+ * over two lines and the shape reads as a rounded blob, not a token. It bit a
14
+ * consumer table whose column was sized to its content: `min-content` on
15
+ * wrappable text resolves to the WIDEST WORD, so a three-word group name landed
16
+ * at 112px wide and 46px tall against the 26px of a single-line badge. Nowrap
17
+ * also pins `min-content` to the full label, which is what lets a caller cap the
18
+ * box with `max-w-*` plus a truncating child and get an ellipsis. A caller that
19
+ * genuinely wants a wrapping badge passes `whitespace-normal`; tailwind-merge
20
+ * lets it win.
17
21
  */
18
22
  declare const badgeVariants: (props?: ({
19
23
  variant?: "default" | "secondary" | "outline" | "destructive" | "alert" | "success" | "active" | "inactive" | "credit" | "error" | "info" | "purple" | null | undefined;
@@ -1 +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;;;;;;GAMG;AACH;;;;;;;GAOG;AACH,QAAA,MAAM,aAAa;;;8EA6ClB,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,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAsBzE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
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;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,aAAa;;;8EAqDlB,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,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAsBzE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
@@ -6,13 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
6
6
  const class_variance_authority_1 = require("class-variance-authority");
7
7
  const utils_1 = require("../../../lib/utils");
8
8
  const react_slot_1 = require("@radix-ui/react-slot");
9
- /**
10
- * `credit` is the accounting reading of a credit amount, NOT an alias of
11
- * `destructive` (an error/alarm). The credit role is a tint-and-ink pair:
12
- * `--credit-foreground` mirrors `--credit` by contract, so the red carries the
13
- * role as text over a tinted surface. Do not "fix" this into a solid
14
- * `bg-credit` fill — that renders red-on-red and is invisible.
15
- */
16
9
  /**
17
10
  * `gap-1` is load-bearing, not decoration: a badge holding a label AND an
18
11
  * element child (`ID<code>ctx-123</code>`) has nothing between them otherwise —
@@ -20,8 +13,19 @@ const react_slot_1 = require("@radix-ui/react-slot");
20
13
  * anonymous flex item — so the screen reads `IDctx-123`. Consumers were pasting
21
14
  * `className="gap-1"` per call site; `cn` runs tailwind-merge, so an explicit
22
15
  * `gap-2` still wins. Single-child badges are unaffected: gap needs two items.
16
+ *
17
+ * `whitespace-nowrap` keeps the pill a pill. `rounded-full` draws the ends as
18
+ * semicircles sized to ONE line box, so a label that wraps stretches those caps
19
+ * over two lines and the shape reads as a rounded blob, not a token. It bit a
20
+ * consumer table whose column was sized to its content: `min-content` on
21
+ * wrappable text resolves to the WIDEST WORD, so a three-word group name landed
22
+ * at 112px wide and 46px tall against the 26px of a single-line badge. Nowrap
23
+ * also pins `min-content` to the full label, which is what lets a caller cap the
24
+ * box with `max-w-*` plus a truncating child and get an ellipsis. A caller that
25
+ * genuinely wants a wrapping badge passes `whitespace-normal`; tailwind-merge
26
+ * lets it win.
23
27
  */
24
- const badgeVariants = (0, class_variance_authority_1.cva)('inline-flex items-center gap-1 rounded-full border border-border px-2.5 py-0.5 text-sm font-medium transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2', {
28
+ const badgeVariants = (0, class_variance_authority_1.cva)('inline-flex items-center gap-1 whitespace-nowrap rounded-full border border-border px-2.5 py-0.5 text-sm font-medium transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2', {
25
29
  variants: {
26
30
  variant: {
27
31
  default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
@@ -29,6 +33,14 @@ const badgeVariants = (0, class_variance_authority_1.cva)('inline-flex items-cen
29
33
  inactive: 'bg-muted text-foreground border-muted-foreground/40 py-[2px] px-3',
30
34
  secondary: 'border-transparent bg-muted-foreground text-white dark:text-black',
31
35
  destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
36
+ /**
37
+ * The accounting reading of a credit amount, NOT an alias of
38
+ * `destructive` (an error/alarm). The credit role is a tint-and-ink
39
+ * pair: `--credit-foreground` mirrors `--credit` by contract, so the
40
+ * red carries the role as text over a tinted surface. Do not "fix"
41
+ * this into a solid `bg-credit` fill — that renders red-on-red and is
42
+ * invisible.
43
+ */
32
44
  credit: 'border-credit/30 bg-credit/10 text-credit-foreground px-[10px] py-1',
33
45
  error: 'border-system-error-border bg-system-error-surface text-system-error-text px-[10px] py-1',
34
46
  success: 'border-system-success-border bg-system-success-surface text-system-success-text px-[10px] py-1',
@@ -1 +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"}
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,qBAiGzB"}
@@ -53,5 +53,8 @@ export function ConfirmationDialog({ open, onOpenChange, title = null, descripti
53
53
  if (busy) {
54
54
  event.preventDefault();
55
55
  }
56
- }, children: [_jsxs(AlertDialogHeader, { className: "flex-row items-center", children: [_jsx(ConfirmationDialogIcon, { variant: variant }), _jsxs("div", { className: "flex flex-col gap-4", children: [title == null || title === false || title === true || title === '' ? (_jsx(AlertDialogTitle, { className: "sr-only", children: confirmLabel || 'Confirm' })) : (_jsx(AlertDialogTitle, { children: title })), description == null ? null : (_jsx(AlertDialogDescription, { children: description }))] })] }), pendingLabel ? (_jsx("span", { role: "status", className: "sr-only", children: busy ? pendingLabel : '' })) : null, _jsxs(AlertDialogFooter, { className: "gap-4", children: [_jsx(AlertDialogCancel, { asChild: true, variant: "secondary", children: _jsx(Button, { onClick: onCancel, disabled: busy, variant: "secondary", size: "small", children: cancelLabel ?? 'Cancel' }) }), _jsx(LoadingButton, { loading: busy, onClick: handleConfirm, variant: "primary", size: "small", "data-testid": "confirm", children: confirmLabel ?? 'Confirm' })] })] }) }));
56
+ }, children: [_jsxs(AlertDialogHeader, { className: "flex-row items-center", children: [_jsx(ConfirmationDialogIcon, { variant: variant }), _jsxs("div", { className: "flex flex-col gap-4", children: [title == null ||
57
+ title === false ||
58
+ title === true ||
59
+ title === '' ? (_jsx(AlertDialogTitle, { className: "sr-only", children: confirmLabel || 'Confirm' })) : (_jsx(AlertDialogTitle, { children: title })), description == null ? null : (_jsx(AlertDialogDescription, { children: description }))] })] }), pendingLabel ? (_jsx("span", { role: "status", className: "sr-only", children: busy ? pendingLabel : '' })) : null, _jsxs(AlertDialogFooter, { className: "gap-4", children: [_jsx(AlertDialogCancel, { asChild: true, variant: "secondary", children: _jsx(Button, { onClick: onCancel, disabled: busy, variant: "secondary", size: "small", children: cancelLabel ?? 'Cancel' }) }), _jsx(LoadingButton, { loading: busy, onClick: handleConfirm, variant: "primary", size: "small", "data-testid": "confirm", children: confirmLabel ?? 'Confirm' })] })] }) }));
57
60
  }
@@ -1,12 +1,5 @@
1
1
  import * as React from 'react';
2
2
  import { type VariantProps } from 'class-variance-authority';
3
- /**
4
- * `credit` is the accounting reading of a credit amount, NOT an alias of
5
- * `destructive` (an error/alarm). The credit role is a tint-and-ink pair:
6
- * `--credit-foreground` mirrors `--credit` by contract, so the red carries the
7
- * role as text over a tinted surface. Do not "fix" this into a solid
8
- * `bg-credit` fill — that renders red-on-red and is invisible.
9
- */
10
3
  /**
11
4
  * `gap-1` is load-bearing, not decoration: a badge holding a label AND an
12
5
  * element child (`ID<code>ctx-123</code>`) has nothing between them otherwise —
@@ -14,6 +7,17 @@ import { type VariantProps } from 'class-variance-authority';
14
7
  * anonymous flex item — so the screen reads `IDctx-123`. Consumers were pasting
15
8
  * `className="gap-1"` per call site; `cn` runs tailwind-merge, so an explicit
16
9
  * `gap-2` still wins. Single-child badges are unaffected: gap needs two items.
10
+ *
11
+ * `whitespace-nowrap` keeps the pill a pill. `rounded-full` draws the ends as
12
+ * semicircles sized to ONE line box, so a label that wraps stretches those caps
13
+ * over two lines and the shape reads as a rounded blob, not a token. It bit a
14
+ * consumer table whose column was sized to its content: `min-content` on
15
+ * wrappable text resolves to the WIDEST WORD, so a three-word group name landed
16
+ * at 112px wide and 46px tall against the 26px of a single-line badge. Nowrap
17
+ * also pins `min-content` to the full label, which is what lets a caller cap the
18
+ * box with `max-w-*` plus a truncating child and get an ellipsis. A caller that
19
+ * genuinely wants a wrapping badge passes `whitespace-normal`; tailwind-merge
20
+ * lets it win.
17
21
  */
18
22
  declare const badgeVariants: (props?: ({
19
23
  variant?: "default" | "secondary" | "outline" | "destructive" | "alert" | "success" | "active" | "inactive" | "credit" | "error" | "info" | "purple" | null | undefined;
@@ -1 +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;;;;;;GAMG;AACH;;;;;;;GAOG;AACH,QAAA,MAAM,aAAa;;;8EA6ClB,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,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAsBzE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
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;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,aAAa;;;8EAqDlB,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,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAsBzE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
@@ -2,13 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { cva } from 'class-variance-authority';
3
3
  import { cn } from '../../../lib/utils.js';
4
4
  import { Slot } from '@radix-ui/react-slot';
5
- /**
6
- * `credit` is the accounting reading of a credit amount, NOT an alias of
7
- * `destructive` (an error/alarm). The credit role is a tint-and-ink pair:
8
- * `--credit-foreground` mirrors `--credit` by contract, so the red carries the
9
- * role as text over a tinted surface. Do not "fix" this into a solid
10
- * `bg-credit` fill — that renders red-on-red and is invisible.
11
- */
12
5
  /**
13
6
  * `gap-1` is load-bearing, not decoration: a badge holding a label AND an
14
7
  * element child (`ID<code>ctx-123</code>`) has nothing between them otherwise —
@@ -16,8 +9,19 @@ import { Slot } from '@radix-ui/react-slot';
16
9
  * anonymous flex item — so the screen reads `IDctx-123`. Consumers were pasting
17
10
  * `className="gap-1"` per call site; `cn` runs tailwind-merge, so an explicit
18
11
  * `gap-2` still wins. Single-child badges are unaffected: gap needs two items.
12
+ *
13
+ * `whitespace-nowrap` keeps the pill a pill. `rounded-full` draws the ends as
14
+ * semicircles sized to ONE line box, so a label that wraps stretches those caps
15
+ * over two lines and the shape reads as a rounded blob, not a token. It bit a
16
+ * consumer table whose column was sized to its content: `min-content` on
17
+ * wrappable text resolves to the WIDEST WORD, so a three-word group name landed
18
+ * at 112px wide and 46px tall against the 26px of a single-line badge. Nowrap
19
+ * also pins `min-content` to the full label, which is what lets a caller cap the
20
+ * box with `max-w-*` plus a truncating child and get an ellipsis. A caller that
21
+ * genuinely wants a wrapping badge passes `whitespace-normal`; tailwind-merge
22
+ * lets it win.
19
23
  */
20
- const badgeVariants = cva('inline-flex items-center gap-1 rounded-full border border-border px-2.5 py-0.5 text-sm font-medium transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2', {
24
+ const badgeVariants = cva('inline-flex items-center gap-1 whitespace-nowrap rounded-full border border-border px-2.5 py-0.5 text-sm font-medium transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2', {
21
25
  variants: {
22
26
  variant: {
23
27
  default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
@@ -25,6 +29,14 @@ const badgeVariants = cva('inline-flex items-center gap-1 rounded-full border bo
25
29
  inactive: 'bg-muted text-foreground border-muted-foreground/40 py-[2px] px-3',
26
30
  secondary: 'border-transparent bg-muted-foreground text-white dark:text-black',
27
31
  destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
32
+ /**
33
+ * The accounting reading of a credit amount, NOT an alias of
34
+ * `destructive` (an error/alarm). The credit role is a tint-and-ink
35
+ * pair: `--credit-foreground` mirrors `--credit` by contract, so the
36
+ * red carries the role as text over a tinted surface. Do not "fix"
37
+ * this into a solid `bg-credit` fill — that renders red-on-red and is
38
+ * invisible.
39
+ */
28
40
  credit: 'border-credit/30 bg-credit/10 text-credit-foreground px-[10px] py-1',
29
41
  error: 'border-system-error-border bg-system-error-surface text-system-error-text px-[10px] py-1',
30
42
  success: 'border-system-success-border bg-system-success-surface text-system-success-text px-[10px] py-1',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lerianstudio/sindarian-ui",
3
- "version": "2.0.0-beta.4",
3
+ "version": "2.0.0-beta.6",
4
4
  "description": "Sindarian UI - A UI library for Midaz Console",
5
5
  "license": "ISC",
6
6
  "author": {
@@ -43,7 +43,8 @@
43
43
  "build:esm": "tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json --resolve-full-paths && copyfiles -u 1 \"src/**/*.cjs\" \"src/**/*.d.cts\" \"src/**/*.json\" dist/esm && node -e \"require('fs').writeFileSync('dist/esm/package.json',JSON.stringify({type:'module'}))\" && node scripts/check-esm-output.mjs",
44
44
  "copy:assets": "copyfiles -f src/public/**/* dist/public",
45
45
  "copy:styles": "copyfiles -u 1 src/**/*.css dist",
46
- "lint": "eslint . --fix",
46
+ "lint": "eslint .",
47
+ "lint:fix": "eslint . --fix",
47
48
  "storybook": "storybook dev -p 6007",
48
49
  "build-storybook": "storybook build",
49
50
  "test": "jest",