design-zystem 1.0.391 → 1.0.392

package/dist/ui/index.d.mts

@@ -10,6 +10,7 @@ import * as RadixAvatar from '@radix-ui/react-avatar';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
+import * as RadixToggle from '@radix-ui/react-toggle';
 import { DocumentProps } from 'react-pdf';
 import * as RadixScrollArea from '@radix-ui/react-scroll-area';
 
@@ -1243,12 +1244,13 @@ interface PaginationProps {
 /** Structure calquée sur `Pagination`/`PaginationContent`/`PaginationItem` de shadcn (nav > ul > li). */
 declare const Pagination: ({ currentPage, totalItems, itemsPerPage, onPageChange, showSummary, summaryLabel, }: PaginationProps) => react.JSX.Element;
 
-interface TagBubbleProps {
+type TagBubbleColor = ColorToken | HexColor;
+interface TagBubbleProps extends Omit<ComponentPropsWithoutRef<typeof RadixToggle.Root>, 'pressed' | 'defaultPressed' | 'onPressedChange' | 'onClick' | 'children' | 'className' | 'type'> {
     label: string;
     hideDot?: boolean;
     active?: boolean;
-    activeColor?: ColorToken;
-    inactiveColor?: ColorToken;
+    activeColor?: TagBubbleColor;
+    inactiveColor?: TagBubbleColor;
     /** Actif : bordure épaisse + texte `activeColor`, fond en variante claire (ex. `blue_950` → `bg-blue-50`). */
     activeFill?: boolean;
     /** Forme pilule (`rounded-full`) à la place du rectangle arrondi par défaut. */
@@ -1259,7 +1261,7 @@ interface TagBubbleProps {
     className?: string;
 }
 /** Construit sur `@radix-ui/react-toggle` (comme le `Toggle` de shadcn) — chip filtre à deux états, pressable au clavier. */
-declare const TagBubble: ({ label, hideDot, active, activeColor, inactiveColor, activeFill, pill, count, countColor, onClick, className, }: TagBubbleProps) => react.JSX.Element;
+declare const TagBubble: ({ label, hideDot, active, activeColor, inactiveColor, activeFill, pill, count, countColor, onClick, className, ...rest }: TagBubbleProps) => react.JSX.Element;
 
 interface HistoryChange {
     label: string;

package/dist/ui/index.d.ts

@@ -10,6 +10,7 @@ import * as RadixAvatar from '@radix-ui/react-avatar';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
+import * as RadixToggle from '@radix-ui/react-toggle';
 import { DocumentProps } from 'react-pdf';
 import * as RadixScrollArea from '@radix-ui/react-scroll-area';
 
@@ -1243,12 +1244,13 @@ interface PaginationProps {
 /** Structure calquée sur `Pagination`/`PaginationContent`/`PaginationItem` de shadcn (nav > ul > li). */
 declare const Pagination: ({ currentPage, totalItems, itemsPerPage, onPageChange, showSummary, summaryLabel, }: PaginationProps) => react.JSX.Element;
 
-interface TagBubbleProps {
+type TagBubbleColor = ColorToken | HexColor;
+interface TagBubbleProps extends Omit<ComponentPropsWithoutRef<typeof RadixToggle.Root>, 'pressed' | 'defaultPressed' | 'onPressedChange' | 'onClick' | 'children' | 'className' | 'type'> {
     label: string;
     hideDot?: boolean;
     active?: boolean;
-    activeColor?: ColorToken;
-    inactiveColor?: ColorToken;
+    activeColor?: TagBubbleColor;
+    inactiveColor?: TagBubbleColor;
     /** Actif : bordure épaisse + texte `activeColor`, fond en variante claire (ex. `blue_950` → `bg-blue-50`). */
     activeFill?: boolean;
     /** Forme pilule (`rounded-full`) à la place du rectangle arrondi par défaut. */
@@ -1259,7 +1261,7 @@ interface TagBubbleProps {
     className?: string;
 }
 /** Construit sur `@radix-ui/react-toggle` (comme le `Toggle` de shadcn) — chip filtre à deux états, pressable au clavier. */
-declare const TagBubble: ({ label, hideDot, active, activeColor, inactiveColor, activeFill, pill, count, countColor, onClick, className, }: TagBubbleProps) => react.JSX.Element;
+declare const TagBubble: ({ label, hideDot, active, activeColor, inactiveColor, activeFill, pill, count, countColor, onClick, className, ...rest }: TagBubbleProps) => react.JSX.Element;
 
 interface HistoryChange {
     label: string;

package/dist/ui/index.js

@@ -5951,33 +5951,49 @@ var BORDER_CLASS = {
   "orange-600": "border-orange-600",
   "purple-700": "border-purple-700"
 };
-var TagBubble = ({
-  label,
-  hideDot = false,
-  active = false,
-  activeColor = "blue-700",
-  inactiveColor = "grey-600",
-  activeFill = false,
-  pill = false,
-  count,
-  countColor = "green-700",
-  onClick,
-  className
-}) => {
+var isHexColor = (color) => color.startsWith("#");
+var TagBubble = (_a) => {
+  var _b = _a, {
+    label,
+    hideDot = false,
+    active = false,
+    activeColor = "blue-700",
+    inactiveColor = "grey-600",
+    activeFill = false,
+    pill = false,
+    count,
+    countColor = "green-700",
+    onClick,
+    className
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "hideDot",
+    "active",
+    "activeColor",
+    "inactiveColor",
+    "activeFill",
+    "pill",
+    "count",
+    "countColor",
+    "onClick",
+    "className"
+  ]);
   const showCount = count !== void 0 && count !== null;
   const filled = activeFill && active;
+  const dotColor = active ? activeColor : inactiveColor;
+  const filledHexColor = filled && isHexColor(activeColor) ? activeColor : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
     RadixToggle.Root,
-    {
+    __spreadProps(__spreadValues({}, rest), {
       type: "button",
       pressed: active,
       onClick,
+      style: __spreadValues({ borderColor: filledHexColor }, rest.style),
       className: cn(
         "inline-flex items-center gap-2 border px-2.5 py-1.5 outline-none",
         pill ? "rounded-full" : "rounded-[6px]",
         filled ? cn(
-          LIGHT_BG_CLASS[activeColor],
-          BORDER_CLASS[activeColor],
+          isHexColor(activeColor) ? "bg-white" : [LIGHT_BG_CLASS[activeColor], BORDER_CLASS[activeColor]],
           "border-2"
         ) : "border-grey-200 bg-white",
         "focus-visible:ring-2 focus-visible:ring-blue-200",
@@ -5989,8 +6005,9 @@ var TagBubble = ({
           {
             className: cn(
               "h-2 w-2 shrink-0 rounded-full",
-              DOT_CLASS[active ? activeColor : inactiveColor]
-            )
+              !isHexColor(dotColor) && DOT_CLASS[dotColor]
+            ),
+            style: isHexColor(dotColor) ? { backgroundColor: dotColor } : void 0
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
@@ -5998,14 +6015,15 @@ var TagBubble = ({
           {
             className: cn(
               "whitespace-nowrap text-xs font-semibold",
-              filled ? TEXT_CLASS2[activeColor] : "text-neutral-800"
+              filled ? !isHexColor(activeColor) && TEXT_CLASS2[activeColor] : "text-neutral-800"
             ),
+            style: { color: filledHexColor },
             children: label
           }
         ),
         showCount && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Badge, { theme: countColor, size: "s", children: count })
       ]
-    }
+    })
   );
 };
 

package/dist/ui/index.mjs

@@ -5780,33 +5780,49 @@ var BORDER_CLASS = {
   "orange-600": "border-orange-600",
   "purple-700": "border-purple-700"
 };
-var TagBubble = ({
-  label,
-  hideDot = false,
-  active = false,
-  activeColor = "blue-700",
-  inactiveColor = "grey-600",
-  activeFill = false,
-  pill = false,
-  count,
-  countColor = "green-700",
-  onClick,
-  className
-}) => {
+var isHexColor = (color) => color.startsWith("#");
+var TagBubble = (_a) => {
+  var _b = _a, {
+    label,
+    hideDot = false,
+    active = false,
+    activeColor = "blue-700",
+    inactiveColor = "grey-600",
+    activeFill = false,
+    pill = false,
+    count,
+    countColor = "green-700",
+    onClick,
+    className
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "hideDot",
+    "active",
+    "activeColor",
+    "inactiveColor",
+    "activeFill",
+    "pill",
+    "count",
+    "countColor",
+    "onClick",
+    "className"
+  ]);
   const showCount = count !== void 0 && count !== null;
   const filled = activeFill && active;
+  const dotColor = active ? activeColor : inactiveColor;
+  const filledHexColor = filled && isHexColor(activeColor) ? activeColor : void 0;
   return /* @__PURE__ */ jsxs37(
     RadixToggle.Root,
-    {
+    __spreadProps(__spreadValues({}, rest), {
       type: "button",
       pressed: active,
       onClick,
+      style: __spreadValues({ borderColor: filledHexColor }, rest.style),
       className: cn(
         "inline-flex items-center gap-2 border px-2.5 py-1.5 outline-none",
         pill ? "rounded-full" : "rounded-[6px]",
         filled ? cn(
-          LIGHT_BG_CLASS[activeColor],
-          BORDER_CLASS[activeColor],
+          isHexColor(activeColor) ? "bg-white" : [LIGHT_BG_CLASS[activeColor], BORDER_CLASS[activeColor]],
           "border-2"
         ) : "border-grey-200 bg-white",
         "focus-visible:ring-2 focus-visible:ring-blue-200",
@@ -5818,8 +5834,9 @@ var TagBubble = ({
           {
             className: cn(
               "h-2 w-2 shrink-0 rounded-full",
-              DOT_CLASS[active ? activeColor : inactiveColor]
-            )
+              !isHexColor(dotColor) && DOT_CLASS[dotColor]
+            ),
+            style: isHexColor(dotColor) ? { backgroundColor: dotColor } : void 0
           }
         ),
         /* @__PURE__ */ jsx73(
@@ -5827,14 +5844,15 @@ var TagBubble = ({
           {
             className: cn(
               "whitespace-nowrap text-xs font-semibold",
-              filled ? TEXT_CLASS2[activeColor] : "text-neutral-800"
+              filled ? !isHexColor(activeColor) && TEXT_CLASS2[activeColor] : "text-neutral-800"
             ),
+            style: { color: filledHexColor },
             children: label
           }
         ),
         showCount && /* @__PURE__ */ jsx73(Badge, { theme: countColor, size: "s", children: count })
       ]
-    }
+    })
   );
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.391",
+  "version": "1.0.392",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",