@cytario/design 9.0.0 → 9.2.0

package/dist/index.js

@@ -1411,6 +1411,7 @@ import {
   TableBody as AriaTableBody,
   TableHeader as AriaTableHeader
 } from "react-aria-components";
+import { twMerge as twMerge11 } from "tailwind-merge";
 import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var tableSizeClass = {
   compact: "[--table-row-py:theme(spacing.1)]",
@@ -1425,28 +1426,29 @@ function Table2({
     AriaTable,
     {
       ...props,
-      className: [
+      className: twMerge11(
         "w-full border-collapse text-sm text-foreground",
         tableSizeClass[size],
         className
-      ].filter(Boolean).join(" ")
+      )
     }
   );
 }
 function TableHeader(props) {
   return /* @__PURE__ */ jsx17(AriaTableHeader, { ...props });
 }
-function Column(props) {
+function Column({ className, ...props }) {
   return /* @__PURE__ */ jsx17(
     AriaColumn,
     {
       ...props,
-      className: [
+      className: twMerge11(
         "px-3 py-2 text-left font-semibold text-muted-foreground",
         "border-b-2 border-border",
         "cursor-default select-none outline-none",
-        "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]"
-      ].join(" "),
+        "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]",
+        className
+      ),
       children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-1", children: [
         props.children,
         allowsSorting && /* @__PURE__ */ jsx17("span", { "aria-hidden": "true", className: "text-muted-foreground", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
@@ -1457,33 +1459,40 @@ function Column(props) {
 function TableBody(props) {
   return /* @__PURE__ */ jsx17(AriaTableBody, { ...props });
 }
-function Row(props) {
+function Row({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsx17(
     AriaRow,
     {
       ...props,
-      className: [
+      className: twMerge11(
         "border-b border-border",
         "even:bg-card",
         "hover:bg-muted",
+        "data-[selected]:bg-accent",
+        "data-[selected]:ring-2 data-[selected]:ring-ring data-[selected]:ring-inset",
         "outline-none",
         "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]",
-        "transition-colors"
-      ].join(" ")
+        "transition-colors",
+        className
+      )
     }
   );
 }
-function Cell(props) {
+function Cell({ className, ...props }) {
   return /* @__PURE__ */ jsx17(
     AriaCell,
     {
       ...props,
-      className: [
+      className: twMerge11(
         "px-3 py-(--table-row-py)",
         "text-foreground",
         "outline-none",
-        "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]"
-      ].join(" ")
+        "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]",
+        className
+      )
     }
   );
 }
@@ -2050,7 +2059,7 @@ function Breadcrumbs({ items, className }) {
 import {
   ToggleButton as AriaToggleButton2
 } from "react-aria-components";
-import { twMerge as twMerge11 } from "tailwind-merge";
+import { twMerge as twMerge12 } from "tailwind-merge";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var squareSizeStyles2 = {
   xs: "h-6 w-6 text-xs",
@@ -2100,7 +2109,7 @@ function ToggleButton({
     AriaToggleButton2,
     {
       ...props,
-      className: ({ isSelected }) => twMerge11(
+      className: ({ isSelected }) => twMerge12(
         "inline-flex items-center justify-center gap-2 cursor-pointer",
         isSquare ? "rounded-none" : "rounded-md",
         "font-medium",
@@ -2123,7 +2132,7 @@ import {
   MenuItem as AriaMenuItem,
   Popover as Popover2
 } from "react-aria-components";
-import { twMerge as twMerge12 } from "tailwind-merge";
+import { twMerge as twMerge13 } from "tailwind-merge";
 
 // src/components/Menu/menuStyles.ts
 var popoverStyles = `
@@ -2150,7 +2159,7 @@ function Menu2({
   const selectionProps = selectionMode && selectionMode !== "none" ? { selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange } : {};
   return /* @__PURE__ */ jsxs18(MenuTrigger, { children: [
     children,
-    /* @__PURE__ */ jsx29(Popover2, { className: twMerge12(popoverStyles, className), children: items ? /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx29(Popover2, { className: twMerge13(popoverStyles, className), children: items ? /* @__PURE__ */ jsx29(
       AriaMenu,
       {
         items,
@@ -2209,7 +2218,7 @@ import {
   Popover as Popover3,
   Pressable
 } from "react-aria-components";
-import { twMerge as twMerge13 } from "tailwind-merge";
+import { twMerge as twMerge14 } from "tailwind-merge";
 import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 function useContextMenu({
   content,
@@ -2275,7 +2284,7 @@ function useContextMenu({
             isNonModal: true,
             placement: "bottom start",
             ref: popoverRef,
-            className: twMerge13(popoverStyles, className),
+            className: twMerge14(popoverStyles, className),
             children: /* @__PURE__ */ jsx30(
               AriaMenu2,
               {
@@ -2438,7 +2447,7 @@ import {
   Popover as AriaPopover,
   Button as AriaButton3
 } from "react-aria-components";
-import { twMerge as twMerge14 } from "tailwind-merge";
+import { twMerge as twMerge15 } from "tailwind-merge";
 import { jsx as jsx36 } from "react/jsx-runtime";
 function Popover4({ children, isOpen, onOpenChange }) {
   return /* @__PURE__ */ jsx36(DialogTrigger, { isOpen, onOpenChange, children });
@@ -2448,7 +2457,7 @@ function PopoverTrigger({ children, className }) {
     inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer
     focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm
   `;
-  return /* @__PURE__ */ jsx36(AriaButton3, { className: twMerge14(cx, className), children });
+  return /* @__PURE__ */ jsx36(AriaButton3, { className: twMerge15(cx, className), children });
 }
 function PopoverContent({
   placement = "bottom",
@@ -2475,7 +2484,7 @@ function PopoverContent({
       ...rest,
       placement,
       offset: offsetPx,
-      className: twMerge14(cx, className),
+      className: twMerge15(cx, className),
       children
     }
   );
@@ -2483,7 +2492,7 @@ function PopoverContent({
 
 // src/components/Tabs/Tabs.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { twMerge as twMerge15 } from "tailwind-merge";
+import { twMerge as twMerge16 } from "tailwind-merge";
 import {
   Tabs as AriaTabs,
   TabList as AriaTabList,
@@ -2513,7 +2522,7 @@ function Tabs({
     {
       ...props,
       orientation,
-      className: twMerge15(
+      className: twMerge16(
         orientation === "vertical" ? "flex" : "",
         className
       ),
@@ -2532,7 +2541,7 @@ function TabList({
     AriaTabList,
     {
       ...props,
-      className: ({ orientation }) => twMerge15(
+      className: ({ orientation }) => twMerge16(
         baseStyles,
         orientation === "vertical" ? verticalStyles : "",
         className
@@ -2548,14 +2557,14 @@ function Tab({ className, ...props }) {
       ...props,
       className: ({ isSelected, isDisabled, isHovered, isPressed }) => {
         if (variant === "unstyled") {
-          return twMerge15(
+          return twMerge16(
             "cursor-pointer outline-none",
             "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             isDisabled ? "opacity-50 pointer-events-none" : "",
             className
           );
         }
-        return twMerge15(
+        return twMerge16(
           // Base
           "cursor-pointer outline-none transition-colors",
           "font-medium",
@@ -2603,7 +2612,7 @@ function TabPanel({ className, ...props }) {
     AriaTabPanel,
     {
       ...props,
-      className: twMerge15(
+      className: twMerge16(
         variant === "unstyled" ? "outline-none" : "mt-4 outline-none",
         className
       )
@@ -2621,7 +2630,7 @@ import {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
-import { twMerge as twMerge16 } from "tailwind-merge";
+import { twMerge as twMerge17 } from "tailwind-merge";
 import {
   ToggleButtonGroup as AriaToggleButtonGroup,
   ToggleButton as AriaToggleButton3
@@ -2654,7 +2663,7 @@ function SegmentedControl({
       selectedKeys: isNoneMode ? /* @__PURE__ */ new Set() : selectedKeys,
       defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
       onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
-      className: twMerge16(
+      className: twMerge17(
         "inline-flex items-center rounded-lg border border-border bg-muted p-0.5 gap-0.5",
         className
       ),
@@ -2671,7 +2680,7 @@ function SegmentedControlItem({
     AriaToggleButton3,
     {
       ...props,
-      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge16(
+      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge17(
         // Base layout
         "inline-flex items-center justify-center",
         "rounded-md",
@@ -2692,7 +2701,7 @@ function SegmentedControlItem({
 }
 
 // src/components/Badge/Badge.tsx
-import { twMerge as twMerge17 } from "tailwind-merge";
+import { twMerge as twMerge18 } from "tailwind-merge";
 import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
 var colorStyles = {
   purple: "bg-badge-purple-bg text-badge-purple-text border-badge-purple-text/20",
@@ -2719,7 +2728,7 @@ function Badge({
   return /* @__PURE__ */ jsxs23(
     "span",
     {
-      className: twMerge17(
+      className: twMerge18(
         "inline-flex items-center gap-1 rounded-full border",
         "font-medium leading-tight tracking-wider tabular-nums",
         colorStyles[color],
@@ -2736,10 +2745,10 @@ function Badge({
 }
 
 // src/components/Card/Card.tsx
-import { twMerge as twMerge18 } from "tailwind-merge";
+import { twMerge as twMerge19 } from "tailwind-merge";
 import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
 function Card({ children, header, footer, className }) {
-  const cx = twMerge18(
+  const cx = twMerge19(
     `
       bg-card p-8
       border border-border
@@ -2757,7 +2766,7 @@ function Card({ children, header, footer, className }) {
 
 // src/components/DeltaIndicator/DeltaIndicator.tsx
 import { ArrowUp as ArrowUp2, ArrowDown as ArrowDown2, Minus as Minus2 } from "lucide-react";
-import { twMerge as twMerge19 } from "tailwind-merge";
+import { twMerge as twMerge20 } from "tailwind-merge";
 import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
@@ -2814,7 +2823,7 @@ function DeltaIndicator({
     return /* @__PURE__ */ jsxs25(
       "span",
       {
-        className: twMerge19(
+        className: twMerge20(
           "inline-flex items-center gap-1 font-medium",
           "text-muted-foreground",
           className
@@ -2853,7 +2862,7 @@ function DeltaIndicator({
   return /* @__PURE__ */ jsxs25(
     "span",
     {
-      className: twMerge19(
+      className: twMerge20(
         "inline-flex items-center gap-1 font-medium",
         colorStyles2,
         isPill && [
@@ -2873,7 +2882,7 @@ function DeltaIndicator({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { twMerge as twMerge20 } from "tailwind-merge";
+import { twMerge as twMerge21 } from "tailwind-merge";
 import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
 var fillStyles = {
   brand: "bg-progress-fill",
@@ -2897,7 +2906,7 @@ function ProgressBar({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxs26("div", { className: twMerge20("w-full", className), children: [
+  return /* @__PURE__ */ jsxs26("div", { className: twMerge21("w-full", className), children: [
     (label || description || showValue) && /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between mb-2", children: [
       /* @__PURE__ */ jsx42("span", { className: "text-sm font-medium text-foreground", children: label }),
       /* @__PURE__ */ jsx42("span", { className: "text-sm text-muted-foreground", children: description ?? (showValue ? `${clampedValue}%` : null) })
@@ -2910,14 +2919,14 @@ function ProgressBar({
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-label": label ?? "Progress",
-        className: twMerge20(
+        className: twMerge21(
           "w-full rounded-full bg-progress-track",
           sizeStyles6[size]
         ),
         children: /* @__PURE__ */ jsx42(
           "div",
           {
-            className: twMerge20(
+            className: twMerge21(
               "h-full rounded-full transition-all duration-300",
               fillStyles[variant]
             ),
@@ -2937,7 +2946,7 @@ import {
   AlertCircle as AlertCircle2,
   CheckCircle2 as CheckCircle22
 } from "lucide-react";
-import { twMerge as twMerge21 } from "tailwind-merge";
+import { twMerge as twMerge22 } from "tailwind-merge";
 import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
@@ -2986,7 +2995,7 @@ function Banner({
     "div",
     {
       role: config.role,
-      className: twMerge21(
+      className: twMerge22(
         "flex items-start gap-3 rounded-lg border px-4 py-3",
         "text-sm",
         config.containerClass,
@@ -2998,7 +3007,7 @@ function Banner({
           {
             icon: resolvedIcon,
             size: "md",
-            className: twMerge21("mt-0.5", config.iconClass)
+            className: twMerge22("mt-0.5", config.iconClass)
           }
         ),
         /* @__PURE__ */ jsxs27("div", { className: "flex-1", children: [
@@ -3024,7 +3033,7 @@ function Banner({
 }
 
 // src/components/MetricCard/MetricCard.tsx
-import { twMerge as twMerge22 } from "tailwind-merge";
+import { twMerge as twMerge23 } from "tailwind-merge";
 import { Fragment as Fragment8, jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
@@ -3047,18 +3056,18 @@ function MetricCard({
   className
 }) {
   const config = sizeConfig[size];
-  const containerClass = twMerge22(
+  const containerClass = twMerge23(
     "bg-background border border-border rounded-lg shadow-sm",
     config.padding,
     href && "block transition-shadow hover:shadow-md hover:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 outline-none",
     className
   );
   const content = /* @__PURE__ */ jsxs28(Fragment8, { children: [
-    /* @__PURE__ */ jsx44("div", { className: twMerge22(config.labelClass, "text-muted-foreground"), children: label }),
+    /* @__PURE__ */ jsx44("div", { className: twMerge23(config.labelClass, "text-muted-foreground"), children: label }),
     /* @__PURE__ */ jsx44(
       "div",
       {
-        className: twMerge22(
+        className: twMerge23(
           config.valueClass,
           "font-semibold text-foreground mt-1 tabular-nums"
         ),
@@ -3075,7 +3084,7 @@ function MetricCard({
 
 // src/components/SectionHeader/SectionHeader.tsx
 import { forwardRef as forwardRef7 } from "react";
-import { twMerge as twMerge23 } from "tailwind-merge";
+import { twMerge as twMerge24 } from "tailwind-merge";
 import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
 var SectionHeader = forwardRef7(
   function SectionHeader2({ title, as = "h2", children, className, ...rest }, ref) {
@@ -3083,7 +3092,7 @@ var SectionHeader = forwardRef7(
       "div",
       {
         ref,
-        className: twMerge23(
+        className: twMerge24(
           "flex flex-wrap items-center gap-3 pt-0 pb-4",
           className
         ),
@@ -3144,7 +3153,7 @@ function DescriptionListItem({
 DescriptionList.Item = DescriptionListItem;
 
 // src/components/PathPill/PathPill.tsx
-import { twMerge as twMerge24 } from "tailwind-merge";
+import { twMerge as twMerge25 } from "tailwind-merge";
 import { jsx as jsx47 } from "react/jsx-runtime";
 var hashColors = [
   "purple",
@@ -3174,12 +3183,12 @@ function PathPill({
   return /* @__PURE__ */ jsx47(
     "div",
     {
-      className: twMerge24("relative flex", className),
+      className: twMerge25("relative flex", className),
       "aria-label": `Path: ${fullPath}`,
       children: segments.map((segment, i) => {
         const isCollapsed = i < dotCount;
         const isLast = i === segments.length - 1;
-        const cx = twMerge24(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
+        const cx = twMerge25(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
         const color = colorFn ? colorFn(segment, i) : pillColorFromName(segment);
         return /* @__PURE__ */ jsx47(
           Badge,