@cytario/design 3.1.1 → 3.1.2

package/dist/index.js

@@ -332,6 +332,7 @@ import {
   Input as AriaInput,
   Text
 } from "react-aria-components";
+import { twMerge as twMerge2 } from "tailwind-merge";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var alignClasses = {
   left: "text-left",
@@ -377,21 +378,21 @@ function Input({
       isDisabled,
       isRequired,
       isInvalid,
-      className: [
+      className: twMerge2(
         "flex w-full flex-col gap-1",
         inGroup ? "min-w-0 flex-1" : "",
         marginClass,
         className
-      ].filter(Boolean).join(" "),
+      ),
       children: [
         label && /* @__PURE__ */ jsxs4(
           Label,
           {
-            className: [
+            className: twMerge2(
               "text-sm",
               "font-medium",
               "text-(--color-text-primary)"
-            ].join(" "),
+            ),
             children: [
               label,
               isRequired && /* @__PURE__ */ jsx6(
@@ -408,7 +409,7 @@ function Input({
         prefix ? /* @__PURE__ */ jsxs4(
           "div",
           {
-            className: [
+            className: twMerge2(
               "flex items-center overflow-hidden",
               radiusClass,
               "border",
@@ -416,20 +417,20 @@ function Input({
               "outline-none transition-colors",
               borderColor,
               "focus-within:ring-2 focus-within:ring-(--color-border-focus) focus-within:border-(--color-border-focus)",
-              inGroup ? "focus-within:z-10" : "",
-              isDisabled ? "opacity-50 pointer-events-none" : ""
-            ].filter(Boolean).join(" "),
+              inGroup && "focus-within:z-10",
+              isDisabled && "opacity-50 pointer-events-none"
+            ),
             children: [
               /* @__PURE__ */ jsx6(
                 "span",
                 {
-                  className: [
+                  className: twMerge2(
                     "self-stretch flex items-center shrink-0 select-none",
                     "bg-(--color-surface-subtle)",
                     "border-r border-r-(--color-border-default)",
                     "text-(--color-text-secondary)",
                     sizeStyles[size]
-                  ].join(" "),
+                  ),
                   children: prefix
                 }
               ),
@@ -437,14 +438,14 @@ function Input({
                 AriaInput,
                 {
                   placeholder,
-                  className: [
+                  className: twMerge2(
                     "w-full bg-transparent",
                     sizeStyles[size],
                     alignClasses[align],
                     "text-(--color-text-primary)",
                     "placeholder:text-(--color-text-tertiary)",
                     "outline-none border-none"
-                  ].join(" ")
+                  )
                 }
               )
             ]
@@ -453,7 +454,7 @@ function Input({
           AriaInput,
           {
             placeholder,
-            className: [
+            className: twMerge2(
               "w-full",
               sizeStyles[size],
               alignClasses[align],
@@ -465,9 +466,9 @@ function Input({
               "outline-none transition-colors",
               borderColor,
               "focus:ring-2 focus:ring-(--color-border-focus) focus:border-(--color-border-focus)",
-              inGroup ? "focus:z-10" : "",
+              inGroup && "focus:z-10",
               "disabled:opacity-50 disabled:pointer-events-none"
-            ].join(" ")
+            )
           }
         ),
         description && !isInvalid && /* @__PURE__ */ jsx6(
@@ -502,7 +503,7 @@ import {
   Select as AriaSelect,
   SelectValue
 } from "react-aria-components";
-import { twMerge as twMerge2 } from "tailwind-merge";
+import { twMerge as twMerge3 } from "tailwind-merge";
 import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function Select({
   label,
@@ -524,7 +525,7 @@ function Select({
       isDisabled,
       isRequired,
       isInvalid: hasError,
-      className: twMerge2("flex flex-col gap-1", className),
+      className: twMerge3("flex flex-col gap-1", className),
       children: [
         label && /* @__PURE__ */ jsxs5(Label2, { className: "text-sm font-medium text-(--color-text-primary)", children: [
           label,
@@ -540,7 +541,7 @@ function Select({
         /* @__PURE__ */ jsxs5(
           Button2,
           {
-            className: twMerge2(
+            className: twMerge3(
               `
             inline-flex items-center justify-between
             w-full rounded-md
@@ -557,7 +558,7 @@ function Select({
               /* @__PURE__ */ jsx7(
                 SelectValue,
                 {
-                  className: twMerge2(
+                  className: twMerge3(
                     renderItem ? "min-w-0" : "truncate",
                     "data-placeholder:text-(--color-text-tertiary)"
                   ),
@@ -572,7 +573,7 @@ function Select({
                 ChevronDown,
                 {
                   "aria-hidden": true,
-                  className: twMerge2(
+                  className: twMerge3(
                     "shrink-0 text-(--color-text-secondary)",
                     size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4"
                   )
@@ -585,7 +586,7 @@ function Select({
         /* @__PURE__ */ jsx7(
           Popover,
           {
-            className: twMerge2(
+            className: twMerge3(
               "w-(--trigger-width)",
               "rounded-md",
               "border border-(--color-border-default)",
@@ -600,7 +601,7 @@ function Select({
               {
                 id: item.id,
                 textValue: item.name,
-                className: twMerge2(
+                className: twMerge3(
                   `
                   flex items-center justify-between gap-2
                   rounded-sm
@@ -1299,7 +1300,7 @@ function InputAddon({ children, className }) {
 }
 
 // src/components/Heading/Heading.tsx
-import { twMerge as twMerge3 } from "tailwind-merge";
+import { twMerge as twMerge4 } from "tailwind-merge";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var defaultSizeMap = {
   h1: "2xl",
@@ -1333,7 +1334,7 @@ function Heading2({
   return /* @__PURE__ */ jsx21(
     Tag,
     {
-      className: twMerge3(
+      className: twMerge4(
         weightStyles[weight],
         "text-(--color-text-primary)",
         sizeStyles3[resolvedSize],
@@ -1455,7 +1456,7 @@ function Breadcrumbs({ items, className }) {
 import {
   Link as AriaLink2
 } from "react-aria-components";
-import { twMerge as twMerge4 } from "tailwind-merge";
+import { twMerge as twMerge5 } from "tailwind-merge";
 import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var iconSizeMap3 = {
   sm: "sm",
@@ -1475,7 +1476,7 @@ function ButtonLink({
     AriaLink2,
     {
       ...props,
-      className: twMerge4(
+      className: twMerge5(
         "inline-flex items-center justify-center gap-2",
         "rounded-md",
         "font-medium",
@@ -1514,7 +1515,7 @@ function IconButtonLink({
     {
       ...props,
       "aria-label": ariaLabel,
-      className: twMerge4(
+      className: twMerge5(
         "inline-flex items-center justify-center",
         "rounded-md",
         "outline-none transition-colors no-underline",
@@ -1536,7 +1537,7 @@ function IconButtonLink({
 import {
   ToggleButton as AriaToggleButton
 } from "react-aria-components";
-import { twMerge as twMerge5 } from "tailwind-merge";
+import { twMerge as twMerge6 } from "tailwind-merge";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var sizeStyles4 = {
   sm: "px-3 py-1.5 text-sm",
@@ -1590,7 +1591,7 @@ function ToggleButton({
     AriaToggleButton,
     {
       ...props,
-      className: ({ isSelected }) => twMerge5(
+      className: ({ isSelected }) => twMerge6(
         "inline-flex items-center justify-center gap-2",
         isSquare ? "rounded-none" : "rounded-md",
         "font-medium",
@@ -1608,7 +1609,7 @@ function ToggleButton({
 
 // src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
-import { twMerge as twMerge6 } from "tailwind-merge";
+import { twMerge as twMerge7 } from "tailwind-merge";
 import {
   RadioGroup as AriaRadioGroup2,
   Radio as AriaRadio2
@@ -1638,7 +1639,7 @@ function ToggleButtonGroup({
     {
       ...props,
       orientation: "horizontal",
-      className: twMerge6(
+      className: twMerge7(
         "inline-flex items-center rounded-lg border border-(--color-border-default) bg-(--color-surface-muted) p-0.5 gap-0.5",
         className
       ),
@@ -1657,7 +1658,7 @@ function ToggleButtonGroupItem({
     AriaRadio2,
     {
       ...props,
-      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge6(
+      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge7(
         // Base layout
         "inline-flex items-center justify-center",
         "rounded-md",
@@ -1943,7 +1944,7 @@ function PopoverContent({
 
 // src/components/Tabs/Tabs.tsx
 import { createContext as createContext4, useContext as useContext4 } from "react";
-import { twMerge as twMerge7 } from "tailwind-merge";
+import { twMerge as twMerge8 } from "tailwind-merge";
 import {
   Tabs as AriaTabs,
   TabList as AriaTabList,
@@ -1973,7 +1974,7 @@ function Tabs({
     {
       ...props,
       orientation,
-      className: twMerge7(
+      className: twMerge8(
         orientation === "vertical" ? "flex" : "",
         className
       ),
@@ -1992,7 +1993,7 @@ function TabList({
     AriaTabList,
     {
       ...props,
-      className: ({ orientation }) => twMerge7(
+      className: ({ orientation }) => twMerge8(
         baseStyles,
         orientation === "vertical" ? verticalStyles : "",
         className
@@ -2008,14 +2009,14 @@ function Tab({ className, ...props }) {
       ...props,
       className: ({ isSelected, isDisabled, isHovered, isPressed }) => {
         if (variant === "unstyled") {
-          return twMerge7(
+          return twMerge8(
             "cursor-pointer outline-none",
             "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
             isDisabled ? "opacity-50 pointer-events-none" : "",
             className
           );
         }
-        return twMerge7(
+        return twMerge8(
           // Base
           "cursor-pointer outline-none transition-colors",
           "font-medium",
@@ -2063,7 +2064,7 @@ function TabPanel({ className, ...props }) {
     AriaTabPanel,
     {
       ...props,
-      className: twMerge7(
+      className: twMerge8(
         variant === "unstyled" ? "outline-none" : "mt-4 outline-none",
         className
       )
@@ -2315,7 +2316,7 @@ function Tree({
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { createContext as createContext5, useContext as useContext5 } from "react";
-import { twMerge as twMerge8 } from "tailwind-merge";
+import { twMerge as twMerge9 } from "tailwind-merge";
 import {
   ToggleButtonGroup as AriaToggleButtonGroup,
   ToggleButton as AriaToggleButton2
@@ -2348,7 +2349,7 @@ function SegmentedControl({
       selectedKeys: isNoneMode ? /* @__PURE__ */ new Set() : selectedKeys,
       defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
       onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
-      className: twMerge8(
+      className: twMerge9(
         "inline-flex items-center rounded-lg border border-(--color-border-default) bg-(--color-surface-muted) p-0.5 gap-0.5",
         className
       ),
@@ -2365,7 +2366,7 @@ function SegmentedControlItem({
     AriaToggleButton2,
     {
       ...props,
-      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge8(
+      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge9(
         // Base layout
         "inline-flex items-center justify-center",
         "rounded-md",
@@ -2507,7 +2508,7 @@ function FileCard({
 // src/components/StorageConnectionCard/StorageConnectionCard.tsx
 import { useCallback as useCallback4 } from "react";
 import { AlertCircle, Database } from "lucide-react";
-import { twMerge as twMerge9 } from "tailwind-merge";
+import { twMerge as twMerge10 } from "tailwind-merge";
 import { Fragment as Fragment10, jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
 var statusDotStyles = {
   connected: "bg-(--color-status-success)",
@@ -2575,7 +2576,7 @@ function StorageConnectionCard({
         status && /* @__PURE__ */ jsx38(
           "span",
           {
-            className: twMerge9(
+            className: twMerge10(
               "mt-1.5 h-2 w-2 shrink-0 rounded-full",
               statusDotStyles[status]
             ),
@@ -2603,10 +2604,10 @@ function StorageConnectionCard({
           }
         )
       ] }),
-      meta && /* @__PURE__ */ jsx38("div", { className: twMerge9("flex items-center gap-2", status && "pl-4"), children: meta })
+      meta && /* @__PURE__ */ jsx38("div", { className: twMerge10("flex items-center gap-2", status && "pl-4"), children: meta })
     ] })
   ] });
-  const baseStyles = twMerge9(
+  const baseStyles = twMerge10(
     "flex flex-col overflow-hidden rounded-lg",
     "border border-(--color-border-default)",
     "shadow-sm transition-all",
@@ -2615,7 +2616,7 @@ function StorageConnectionCard({
     className
   );
   if (href) {
-    return /* @__PURE__ */ jsx38("a", { href, className: twMerge9(baseStyles, "no-underline"), children: cardContent });
+    return /* @__PURE__ */ jsx38("a", { href, className: twMerge10(baseStyles, "no-underline"), children: cardContent });
   }
   if (onPress) {
     return /* @__PURE__ */ jsx38(
@@ -2634,7 +2635,7 @@ function StorageConnectionCard({
 }
 
 // src/components/Badge/Badge.tsx
-import { twMerge as twMerge10 } from "tailwind-merge";
+import { twMerge as twMerge11 } from "tailwind-merge";
 import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 var variantStyles4 = {
   neutral: "bg-(--color-badge-neutral-bg) text-(--color-badge-neutral-text)",
@@ -2663,7 +2664,7 @@ function Badge({
   return /* @__PURE__ */ jsxs25(
     "span",
     {
-      className: twMerge10(
+      className: twMerge11(
         "inline-flex items-center gap-1 rounded-full",
         "text-xs font-medium leading-tight",
         variantStyles4[variant],
@@ -2680,7 +2681,7 @@ function Badge({
 
 // src/components/Card/Card.tsx
 import { useCallback as useCallback5 } from "react";
-import { twMerge as twMerge11 } from "tailwind-merge";
+import { twMerge as twMerge12 } from "tailwind-merge";
 import { Fragment as Fragment11, jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 var paddingStyles = {
   none: "p-0",
@@ -2699,7 +2700,7 @@ function Card({
   className
 }) {
   const isInteractive = interactive || !!href || !!onPress;
-  const containerClass = twMerge11(
+  const containerClass = twMerge12(
     "bg-(--color-surface-default) border border-(--color-border-default) rounded-lg overflow-hidden shadow-sm",
     isInteractive && "transition-all hover:shadow-md hover:border-(--color-border-focus) cursor-pointer",
     (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
@@ -2718,7 +2719,7 @@ function Card({
     header && /* @__PURE__ */ jsx40(
       "div",
       {
-        className: twMerge11(
+        className: twMerge12(
           "border-b border-(--color-border-default)",
           paddingStyles[padding]
         ),
@@ -2729,7 +2730,7 @@ function Card({
     footer && /* @__PURE__ */ jsx40(
       "div",
       {
-        className: twMerge11(
+        className: twMerge12(
           "border-t border-(--color-border-default)",
           paddingStyles[padding]
         ),
@@ -2758,7 +2759,7 @@ function Card({
 
 // src/components/DeltaIndicator/DeltaIndicator.tsx
 import { ArrowUp, ArrowDown, Minus } from "lucide-react";
-import { twMerge as twMerge12 } from "tailwind-merge";
+import { twMerge as twMerge13 } from "tailwind-merge";
 import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
@@ -2815,7 +2816,7 @@ function DeltaIndicator({
     return /* @__PURE__ */ jsxs27(
       "span",
       {
-        className: twMerge12(
+        className: twMerge13(
           "inline-flex items-center gap-1 font-medium",
           "text-(--color-text-tertiary)",
           className
@@ -2854,7 +2855,7 @@ function DeltaIndicator({
   return /* @__PURE__ */ jsxs27(
     "span",
     {
-      className: twMerge12(
+      className: twMerge13(
         "inline-flex items-center gap-1 font-medium",
         colorStyles2,
         isPill && [
@@ -2874,7 +2875,7 @@ function DeltaIndicator({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { twMerge as twMerge13 } from "tailwind-merge";
+import { twMerge as twMerge14 } from "tailwind-merge";
 import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 var fillStyles = {
   brand: "bg-(--color-progress-fill)",
@@ -2898,7 +2899,7 @@ function ProgressBar({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxs28("div", { className: twMerge13("w-full", className), children: [
+  return /* @__PURE__ */ jsxs28("div", { className: twMerge14("w-full", className), children: [
     (label || description || showValue) && /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between mb-2", children: [
       /* @__PURE__ */ jsx42("span", { className: "text-sm font-medium text-(--color-text-primary)", children: label }),
       /* @__PURE__ */ jsx42("span", { className: "text-sm text-(--color-text-secondary)", children: description ?? (showValue ? `${clampedValue}%` : null) })
@@ -2911,14 +2912,14 @@ function ProgressBar({
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-label": label ?? "Progress",
-        className: twMerge13(
+        className: twMerge14(
           "w-full rounded-full bg-(--color-progress-track)",
           sizeStyles9[size]
         ),
         children: /* @__PURE__ */ jsx42(
           "div",
           {
-            className: twMerge13(
+            className: twMerge14(
               "h-full rounded-full transition-all duration-300",
               fillStyles[variant]
             ),
@@ -2939,7 +2940,7 @@ import {
   CheckCircle2,
   X as X3
 } from "lucide-react";
-import { twMerge as twMerge14 } from "tailwind-merge";
+import { twMerge as twMerge15 } from "tailwind-merge";
 import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
@@ -2988,7 +2989,7 @@ function Banner({
     "div",
     {
       role: config.role,
-      className: twMerge14(
+      className: twMerge15(
         "flex items-start gap-3 rounded-lg border px-4 py-3",
         "text-sm",
         config.containerClass,
@@ -2999,7 +3000,7 @@ function Banner({
           IconComponent,
           {
             size: 20,
-            className: twMerge14("shrink-0 mt-0.5", config.iconClass),
+            className: twMerge15("shrink-0 mt-0.5", config.iconClass),
             "aria-hidden": "true"
           }
         ),
@@ -3026,7 +3027,7 @@ function Banner({
 }
 
 // src/components/MetricCard/MetricCard.tsx
-import { twMerge as twMerge15 } from "tailwind-merge";
+import { twMerge as twMerge16 } from "tailwind-merge";
 import { Fragment as Fragment12, jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
@@ -3049,18 +3050,18 @@ function MetricCard({
   className
 }) {
   const config = sizeConfig[size];
-  const containerClass = twMerge15(
+  const containerClass = twMerge16(
     "bg-(--color-surface-default) border border-(--color-border-default) rounded-lg shadow-sm",
     config.padding,
     href && "block transition-shadow hover:shadow-md hover:border-(--color-border-focus) focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
     className
   );
   const content = /* @__PURE__ */ jsxs30(Fragment12, { children: [
-    /* @__PURE__ */ jsx44("div", { className: twMerge15(config.labelClass, "text-(--color-text-secondary)"), children: label }),
+    /* @__PURE__ */ jsx44("div", { className: twMerge16(config.labelClass, "text-(--color-text-secondary)"), children: label }),
     /* @__PURE__ */ jsx44(
       "div",
       {
-        className: twMerge15(
+        className: twMerge16(
           config.valueClass,
           "font-semibold text-(--color-text-primary) mt-1 tabular-nums"
         ),
@@ -3076,7 +3077,7 @@ function MetricCard({
 }
 
 // src/components/SectionHeader/SectionHeader.tsx
-import { twMerge as twMerge16 } from "tailwind-merge";
+import { twMerge as twMerge17 } from "tailwind-merge";
 import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
 function SectionHeader({
   title,
@@ -3086,7 +3087,7 @@ function SectionHeader({
   return /* @__PURE__ */ jsxs31(
     "div",
     {
-      className: twMerge16(
+      className: twMerge17(
         "flex flex-wrap items-center gap-3 py-4",
         className
       ),
@@ -3099,7 +3100,7 @@ function SectionHeader({
 }
 
 // src/components/Pill/Pill.tsx
-import { twMerge as twMerge17 } from "tailwind-merge";
+import { twMerge as twMerge18 } from "tailwind-merge";
 import { jsx as jsx46 } from "react/jsx-runtime";
 var hashColors = {
   purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text) border-(--color-badge-purple-text)/20",
@@ -3126,7 +3127,7 @@ function Pill({
   className,
   ...rest
 }) {
-  const cx = twMerge17(
+  const cx = twMerge18(
     `
     inline-flex items-center
     rounded-full
@@ -3142,7 +3143,7 @@ function Pill({
 }
 
 // src/components/Pill/PathPill.tsx
-import { twMerge as twMerge18 } from "tailwind-merge";
+import { twMerge as twMerge19 } from "tailwind-merge";
 import { jsx as jsx47 } from "react/jsx-runtime";
 function PathPill({
   children,
@@ -3156,12 +3157,12 @@ function PathPill({
   return /* @__PURE__ */ jsx47(
     "div",
     {
-      className: twMerge18("relative flex", className),
+      className: twMerge19("relative flex", className),
       "aria-label": `Path: ${fullPath}`,
       children: segments.map((segment, i) => {
         const isCollapsed = i < dotCount;
         const isLast = i === segments.length - 1;
-        const cx = twMerge18(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
+        const cx = twMerge19(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
         const color = pillColorFromName(segment);
         return /* @__PURE__ */ jsx47(
           Pill,