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

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

@@ -1,12 +1,5 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-/**
- * `credit` is the accounting reading of a credit amount, NOT an alias of
- * `destructive` (an error/alarm). The credit role is a tint-and-ink pair:
- * `--credit-foreground` mirrors `--credit` by contract, so the red carries the
- * role as text over a tinted surface. Do not "fix" this into a solid
- * `bg-credit` fill — that renders red-on-red and is invisible.
- */
 /**
  * `gap-1` is load-bearing, not decoration: a badge holding a label AND an
  * element child (`ID<code>ctx-123</code>`) has nothing between them otherwise —
@@ -14,6 +7,17 @@ import { type VariantProps } from 'class-variance-authority';
  * anonymous flex item — so the screen reads `IDctx-123`. Consumers were pasting
  * `className="gap-1"` per call site; `cn` runs tailwind-merge, so an explicit
  * `gap-2` still wins. Single-child badges are unaffected: gap needs two items.
+ *
+ * `whitespace-nowrap` keeps the pill a pill. `rounded-full` draws the ends as
+ * semicircles sized to ONE line box, so a label that wraps stretches those caps
+ * over two lines and the shape reads as a rounded blob, not a token. It bit a
+ * consumer table whose column was sized to its content: `min-content` on
+ * wrappable text resolves to the WIDEST WORD, so a three-word group name landed
+ * at 112px wide and 46px tall against the 26px of a single-line badge. Nowrap
+ * also pins `min-content` to the full label, which is what lets a caller cap the
+ * box with `max-w-*` plus a truncating child and get an ellipsis. A caller that
+ * genuinely wants a wrapping badge passes `whitespace-normal`; tailwind-merge
+ * lets it win.
  */
 declare const badgeVariants: (props?: ({
     variant?: "default" | "secondary" | "outline" | "destructive" | "alert" | "success" | "active" | "inactive" | "credit" | "error" | "info" | "purple" | null | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE;;;;;;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"}
+{"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"}

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

@@ -6,13 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../../../lib/utils");
 const react_slot_1 = require("@radix-ui/react-slot");
-/**
- * `credit` is the accounting reading of a credit amount, NOT an alias of
- * `destructive` (an error/alarm). The credit role is a tint-and-ink pair:
- * `--credit-foreground` mirrors `--credit` by contract, so the red carries the
- * role as text over a tinted surface. Do not "fix" this into a solid
- * `bg-credit` fill — that renders red-on-red and is invisible.
- */
 /**
  * `gap-1` is load-bearing, not decoration: a badge holding a label AND an
  * 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");
  * anonymous flex item — so the screen reads `IDctx-123`. Consumers were pasting
  * `className="gap-1"` per call site; `cn` runs tailwind-merge, so an explicit
  * `gap-2` still wins. Single-child badges are unaffected: gap needs two items.
+ *
+ * `whitespace-nowrap` keeps the pill a pill. `rounded-full` draws the ends as
+ * semicircles sized to ONE line box, so a label that wraps stretches those caps
+ * over two lines and the shape reads as a rounded blob, not a token. It bit a
+ * consumer table whose column was sized to its content: `min-content` on
+ * wrappable text resolves to the WIDEST WORD, so a three-word group name landed
+ * at 112px wide and 46px tall against the 26px of a single-line badge. Nowrap
+ * also pins `min-content` to the full label, which is what lets a caller cap the
+ * box with `max-w-*` plus a truncating child and get an ellipsis. A caller that
+ * genuinely wants a wrapping badge passes `whitespace-normal`; tailwind-merge
+ * lets it win.
  */
-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', {
+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', {
     variants: {
         variant: {
             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
             inactive: 'bg-muted text-foreground border-muted-foreground/40 py-[2px] px-3',
             secondary: 'border-transparent bg-muted-foreground text-white dark:text-black',
             destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+            /**
+             * The accounting reading of a credit amount, NOT an alias of
+             * `destructive` (an error/alarm). The credit role is a tint-and-ink
+             * pair: `--credit-foreground` mirrors `--credit` by contract, so the
+             * red carries the role as text over a tinted surface. Do not "fix"
+             * this into a solid `bg-credit` fill — that renders red-on-red and is
+             * invisible.
+             */
             credit: 'border-credit/30 bg-credit/10 text-credit-foreground px-[10px] py-1',
             error: 'border-system-error-border bg-system-error-surface text-system-error-text px-[10px] py-1',
             success: 'border-system-success-border bg-system-success-surface text-system-success-text px-[10px] py-1',

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

@@ -1,12 +1,5 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-/**
- * `credit` is the accounting reading of a credit amount, NOT an alias of
- * `destructive` (an error/alarm). The credit role is a tint-and-ink pair:
- * `--credit-foreground` mirrors `--credit` by contract, so the red carries the
- * role as text over a tinted surface. Do not "fix" this into a solid
- * `bg-credit` fill — that renders red-on-red and is invisible.
- */
 /**
  * `gap-1` is load-bearing, not decoration: a badge holding a label AND an
  * element child (`ID<code>ctx-123</code>`) has nothing between them otherwise —
@@ -14,6 +7,17 @@ import { type VariantProps } from 'class-variance-authority';
  * anonymous flex item — so the screen reads `IDctx-123`. Consumers were pasting
  * `className="gap-1"` per call site; `cn` runs tailwind-merge, so an explicit
  * `gap-2` still wins. Single-child badges are unaffected: gap needs two items.
+ *
+ * `whitespace-nowrap` keeps the pill a pill. `rounded-full` draws the ends as
+ * semicircles sized to ONE line box, so a label that wraps stretches those caps
+ * over two lines and the shape reads as a rounded blob, not a token. It bit a
+ * consumer table whose column was sized to its content: `min-content` on
+ * wrappable text resolves to the WIDEST WORD, so a three-word group name landed
+ * at 112px wide and 46px tall against the 26px of a single-line badge. Nowrap
+ * also pins `min-content` to the full label, which is what lets a caller cap the
+ * box with `max-w-*` plus a truncating child and get an ellipsis. A caller that
+ * genuinely wants a wrapping badge passes `whitespace-normal`; tailwind-merge
+ * lets it win.
  */
 declare const badgeVariants: (props?: ({
     variant?: "default" | "secondary" | "outline" | "destructive" | "alert" | "success" | "active" | "inactive" | "credit" | "error" | "info" | "purple" | null | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE;;;;;;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"}
+{"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"}

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

@@ -2,13 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils.js';
 import { Slot } from '@radix-ui/react-slot';
-/**
- * `credit` is the accounting reading of a credit amount, NOT an alias of
- * `destructive` (an error/alarm). The credit role is a tint-and-ink pair:
- * `--credit-foreground` mirrors `--credit` by contract, so the red carries the
- * role as text over a tinted surface. Do not "fix" this into a solid
- * `bg-credit` fill — that renders red-on-red and is invisible.
- */
 /**
  * `gap-1` is load-bearing, not decoration: a badge holding a label AND an
  * element child (`ID<code>ctx-123</code>`) has nothing between them otherwise —
@@ -16,8 +9,19 @@ import { Slot } from '@radix-ui/react-slot';
  * anonymous flex item — so the screen reads `IDctx-123`. Consumers were pasting
  * `className="gap-1"` per call site; `cn` runs tailwind-merge, so an explicit
  * `gap-2` still wins. Single-child badges are unaffected: gap needs two items.
+ *
+ * `whitespace-nowrap` keeps the pill a pill. `rounded-full` draws the ends as
+ * semicircles sized to ONE line box, so a label that wraps stretches those caps
+ * over two lines and the shape reads as a rounded blob, not a token. It bit a
+ * consumer table whose column was sized to its content: `min-content` on
+ * wrappable text resolves to the WIDEST WORD, so a three-word group name landed
+ * at 112px wide and 46px tall against the 26px of a single-line badge. Nowrap
+ * also pins `min-content` to the full label, which is what lets a caller cap the
+ * box with `max-w-*` plus a truncating child and get an ellipsis. A caller that
+ * genuinely wants a wrapping badge passes `whitespace-normal`; tailwind-merge
+ * lets it win.
  */
-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', {
+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', {
     variants: {
         variant: {
             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
             inactive: 'bg-muted text-foreground border-muted-foreground/40 py-[2px] px-3',
             secondary: 'border-transparent bg-muted-foreground text-white dark:text-black',
             destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+            /**
+             * The accounting reading of a credit amount, NOT an alias of
+             * `destructive` (an error/alarm). The credit role is a tint-and-ink
+             * pair: `--credit-foreground` mirrors `--credit` by contract, so the
+             * red carries the role as text over a tinted surface. Do not "fix"
+             * this into a solid `bg-credit` fill — that renders red-on-red and is
+             * invisible.
+             */
             credit: 'border-credit/30 bg-credit/10 text-credit-foreground px-[10px] py-1',
             error: 'border-system-error-border bg-system-error-surface text-system-error-text px-[10px] py-1',
             success: 'border-system-success-border bg-system-success-surface text-system-success-text px-[10px] py-1',

package/package.json

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