@cytario/design 9.5.0 → 9.5.2

package/dist/index.js

@@ -1755,6 +1755,11 @@ import {
 } from "react-aria-components";
 import { Check as Check3 } from "lucide-react";
 import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+function stopToggleForInteractive(e) {
+  if (e.target instanceof Element && e.target.closest("a, button, input, select, textarea")) {
+    e.stopPropagation();
+  }
+}
 function Checkbox({ children, className, ...props }) {
   return /* @__PURE__ */ jsx22(
     AriaCheckbox,
@@ -1781,7 +1786,16 @@ function Checkbox({ children, className, ...props }) {
             ]
           }
         ),
-        children && /* @__PURE__ */ jsx22("span", { children })
+        children && /* @__PURE__ */ jsx22(
+          "span",
+          {
+            onPointerDown: stopToggleForInteractive,
+            onPointerUp: stopToggleForInteractive,
+            onMouseDown: stopToggleForInteractive,
+            onClick: stopToggleForInteractive,
+            children
+          }
+        )
       ] })
     }
   );
@@ -1840,17 +1854,24 @@ import {
   RadioGroup as AriaRadioGroup,
   Radio as AriaRadio
 } from "react-aria-components";
+import { twMerge as twMerge13 } from "tailwind-merge";
 import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
-function RadioGroup({ children, className, ...props }) {
+function RadioGroup({
+  children,
+  className,
+  orientation = "vertical",
+  ...props
+}) {
   return /* @__PURE__ */ jsx24(
     AriaRadioGroup,
     {
       ...props,
-      className: [
-        "flex flex-col gap-2",
-        "disabled:opacity-50",
+      orientation,
+      className: twMerge13(
+        "flex gap-2 disabled:opacity-50",
+        orientation === "horizontal" ? "flex-row" : "flex-col",
         className
-      ].filter(Boolean).join(" "),
+      ),
       children
     }
   );
@@ -2033,7 +2054,7 @@ function Breadcrumbs({ items, className }) {
 import {
   ToggleButton as AriaToggleButton2
 } from "react-aria-components";
-import { twMerge as twMerge13 } from "tailwind-merge";
+import { twMerge as twMerge14 } from "tailwind-merge";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var squareSizeStyles2 = {
   xs: "h-6 w-6 text-xs",
@@ -2083,7 +2104,7 @@ function ToggleButton({
     AriaToggleButton2,
     {
       ...props,
-      className: ({ isSelected }) => twMerge13(
+      className: ({ isSelected }) => twMerge14(
         "inline-flex items-center justify-center gap-2 cursor-pointer",
         isSquare ? "rounded-none" : "rounded-md",
         "font-medium",
@@ -2106,7 +2127,7 @@ import {
   MenuItem as AriaMenuItem,
   Popover as Popover2
 } from "react-aria-components";
-import { twMerge as twMerge14 } from "tailwind-merge";
+import { twMerge as twMerge15 } from "tailwind-merge";
 
 // src/components/Menu/menuStyles.ts
 var popoverStyles = `
@@ -2133,7 +2154,7 @@ function Menu2({
   const selectionProps = selectionMode && selectionMode !== "none" ? { selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange } : {};
   return /* @__PURE__ */ jsxs18(MenuTrigger, { children: [
     children,
-    /* @__PURE__ */ jsx29(Popover2, { className: twMerge14(popoverStyles, className), children: items ? /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx29(Popover2, { className: twMerge15(popoverStyles, className), children: items ? /* @__PURE__ */ jsx29(
       AriaMenu,
       {
         items,
@@ -2192,7 +2213,7 @@ import {
   Popover as Popover3,
   Pressable
 } from "react-aria-components";
-import { twMerge as twMerge15 } from "tailwind-merge";
+import { twMerge as twMerge16 } from "tailwind-merge";
 import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 function useContextMenu({
   content,
@@ -2258,7 +2279,7 @@ function useContextMenu({
             isNonModal: true,
             placement: "bottom start",
             ref: popoverRef,
-            className: twMerge15(popoverStyles, className),
+            className: twMerge16(popoverStyles, className),
             children: /* @__PURE__ */ jsx30(
               AriaMenu2,
               {
@@ -2421,7 +2442,7 @@ import {
   Popover as AriaPopover,
   Button as AriaButton3
 } from "react-aria-components";
-import { twMerge as twMerge16 } from "tailwind-merge";
+import { twMerge as twMerge17 } from "tailwind-merge";
 import { jsx as jsx36 } from "react/jsx-runtime";
 function Popover4({ children, isOpen, onOpenChange }) {
   return /* @__PURE__ */ jsx36(DialogTrigger, { isOpen, onOpenChange, children });
@@ -2431,7 +2452,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: twMerge16(cx, className), children });
+  return /* @__PURE__ */ jsx36(AriaButton3, { className: twMerge17(cx, className), children });
 }
 function PopoverContent({
   placement = "bottom",
@@ -2458,7 +2479,7 @@ function PopoverContent({
       ...rest,
       placement,
       offset: offsetPx,
-      className: twMerge16(cx, className),
+      className: twMerge17(cx, className),
       children
     }
   );
@@ -2466,7 +2487,7 @@ function PopoverContent({
 
 // src/components/Tabs/Tabs.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { twMerge as twMerge17 } from "tailwind-merge";
+import { twMerge as twMerge18 } from "tailwind-merge";
 import {
   Tabs as AriaTabs,
   TabList as AriaTabList,
@@ -2496,7 +2517,7 @@ function Tabs({
     {
       ...props,
       orientation,
-      className: twMerge17(
+      className: twMerge18(
         orientation === "vertical" ? "flex" : "",
         className
       ),
@@ -2515,7 +2536,7 @@ function TabList({
     AriaTabList,
     {
       ...props,
-      className: ({ orientation }) => twMerge17(
+      className: ({ orientation }) => twMerge18(
         baseStyles,
         orientation === "vertical" ? verticalStyles : "",
         className
@@ -2531,14 +2552,14 @@ function Tab({ className, ...props }) {
       ...props,
       className: ({ isSelected, isDisabled, isHovered, isPressed }) => {
         if (variant === "unstyled") {
-          return twMerge17(
+          return twMerge18(
             "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 twMerge17(
+        return twMerge18(
           // Base
           "cursor-pointer outline-none transition-colors",
           "font-medium",
@@ -2586,7 +2607,7 @@ function TabPanel({ className, ...props }) {
     AriaTabPanel,
     {
       ...props,
-      className: twMerge17(
+      className: twMerge18(
         variant === "unstyled" ? "outline-none" : "mt-4 outline-none",
         className
       )
@@ -2604,7 +2625,7 @@ import {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
-import { twMerge as twMerge18 } from "tailwind-merge";
+import { twMerge as twMerge19 } from "tailwind-merge";
 import {
   ToggleButtonGroup as AriaToggleButtonGroup,
   ToggleButton as AriaToggleButton3
@@ -2637,7 +2658,7 @@ function SegmentedControl({
       selectedKeys: isNoneMode ? /* @__PURE__ */ new Set() : selectedKeys,
       defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
       onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
-      className: twMerge18(
+      className: twMerge19(
         "inline-flex items-center rounded-lg border border-border bg-muted p-0.5 gap-0.5",
         className
       ),
@@ -2654,7 +2675,7 @@ function SegmentedControlItem({
     AriaToggleButton3,
     {
       ...props,
-      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge18(
+      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge19(
         // Base layout
         "inline-flex items-center justify-center",
         "rounded-md",
@@ -2675,13 +2696,13 @@ function SegmentedControlItem({
 }
 
 // src/components/Badge/Badge.tsx
-import { twMerge as twMerge20 } from "tailwind-merge";
+import { twMerge as twMerge21 } from "tailwind-merge";
 
 // src/components/MetricText/MetricText.tsx
-import { twMerge as twMerge19 } from "tailwind-merge";
+import { twMerge as twMerge20 } from "tailwind-merge";
 import { jsx as jsx39 } from "react/jsx-runtime";
 function MetricText({ className, ...rest }) {
-  const cx = twMerge19(
+  const cx = twMerge20(
     "text-xs font-medium leading-none tracking-wider tabular-nums",
     className
   );
@@ -2715,7 +2736,7 @@ function Badge({
   return /* @__PURE__ */ jsxs23(
     MetricText,
     {
-      className: twMerge20(
+      className: twMerge21(
         "inline-flex items-center gap-1 rounded-full border",
         colorStyles[color],
         sizeStyles6[size],
@@ -2731,10 +2752,10 @@ function Badge({
 }
 
 // src/components/Card/Card.tsx
-import { twMerge as twMerge21 } from "tailwind-merge";
+import { twMerge as twMerge22 } from "tailwind-merge";
 import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
 function Card({ children, header, footer, className }) {
-  const cx = twMerge21(
+  const cx = twMerge22(
     `
       bg-card p-8
       border border-border
@@ -2752,7 +2773,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 twMerge22 } from "tailwind-merge";
+import { twMerge as twMerge23 } from "tailwind-merge";
 import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
@@ -2809,7 +2830,7 @@ function DeltaIndicator({
     return /* @__PURE__ */ jsxs25(
       "span",
       {
-        className: twMerge22(
+        className: twMerge23(
           "inline-flex items-center gap-1 font-medium",
           "text-muted-foreground",
           className
@@ -2848,7 +2869,7 @@ function DeltaIndicator({
   return /* @__PURE__ */ jsxs25(
     "span",
     {
-      className: twMerge22(
+      className: twMerge23(
         "inline-flex items-center gap-1 font-medium",
         colorStyles2,
         isPill && [
@@ -2868,7 +2889,7 @@ function DeltaIndicator({
 }
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { twMerge as twMerge23 } from "tailwind-merge";
+import { twMerge as twMerge24 } from "tailwind-merge";
 import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
 var fillStyles = {
   brand: "bg-progress-fill",
@@ -2892,7 +2913,7 @@ function ProgressBar({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxs26("div", { className: twMerge23("w-full", className), children: [
+  return /* @__PURE__ */ jsxs26("div", { className: twMerge24("w-full", className), children: [
     (label || description || showValue) && /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between mb-2", children: [
       /* @__PURE__ */ jsx43("span", { className: "text-sm font-medium text-foreground", children: label }),
       /* @__PURE__ */ jsx43("span", { className: "text-sm text-muted-foreground", children: description ?? (showValue ? `${clampedValue}%` : null) })
@@ -2905,14 +2926,14 @@ function ProgressBar({
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-label": label ?? "Progress",
-        className: twMerge23(
+        className: twMerge24(
           "w-full rounded-full bg-progress-track",
           sizeStyles7[size]
         ),
         children: /* @__PURE__ */ jsx43(
           "div",
           {
-            className: twMerge23(
+            className: twMerge24(
               "h-full rounded-full transition-all duration-300",
               fillStyles[variant]
             ),
@@ -2932,7 +2953,7 @@ import {
   AlertCircle as AlertCircle2,
   CheckCircle2 as CheckCircle22
 } from "lucide-react";
-import { twMerge as twMerge24 } from "tailwind-merge";
+import { twMerge as twMerge25 } from "tailwind-merge";
 import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
@@ -2981,7 +3002,7 @@ function Banner({
     "div",
     {
       role: config.role,
-      className: twMerge24(
+      className: twMerge25(
         "flex items-start gap-3 rounded-lg border px-4 py-3",
         "text-sm",
         config.containerClass,
@@ -2993,7 +3014,7 @@ function Banner({
           {
             icon: resolvedIcon,
             size: "md",
-            className: twMerge24("mt-0.5", config.iconClass)
+            className: twMerge25("mt-0.5", config.iconClass)
           }
         ),
         /* @__PURE__ */ jsxs27("div", { className: "flex-1", children: [
@@ -3019,7 +3040,7 @@ function Banner({
 }
 
 // src/components/MetricCard/MetricCard.tsx
-import { twMerge as twMerge25 } from "tailwind-merge";
+import { twMerge as twMerge26 } from "tailwind-merge";
 import { Fragment as Fragment8, jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
@@ -3042,18 +3063,18 @@ function MetricCard({
   className
 }) {
   const config = sizeConfig[size];
-  const containerClass = twMerge25(
+  const containerClass = twMerge26(
     "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__ */ jsx45("div", { className: twMerge25(config.labelClass, "text-muted-foreground"), children: label }),
+    /* @__PURE__ */ jsx45("div", { className: twMerge26(config.labelClass, "text-muted-foreground"), children: label }),
     /* @__PURE__ */ jsx45(
       "div",
       {
-        className: twMerge25(
+        className: twMerge26(
           config.valueClass,
           "font-semibold text-foreground mt-1 tabular-nums"
         ),
@@ -3070,7 +3091,7 @@ function MetricCard({
 
 // src/components/SectionHeader/SectionHeader.tsx
 import { forwardRef as forwardRef7 } from "react";
-import { twMerge as twMerge26 } from "tailwind-merge";
+import { twMerge as twMerge27 } from "tailwind-merge";
 import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
 var SectionHeader = forwardRef7(
   function SectionHeader2({ title, as = "h2", children, className, ...rest }, ref) {
@@ -3078,7 +3099,7 @@ var SectionHeader = forwardRef7(
       "div",
       {
         ref,
-        className: twMerge26(
+        className: twMerge27(
           "flex flex-wrap items-center gap-3 pt-0 pb-4",
           className
         ),
@@ -3139,7 +3160,7 @@ function DescriptionListItem({
 DescriptionList.Item = DescriptionListItem;
 
 // src/components/PathPill/PathPill.tsx
-import { twMerge as twMerge27 } from "tailwind-merge";
+import { twMerge as twMerge28 } from "tailwind-merge";
 import { jsx as jsx48 } from "react/jsx-runtime";
 var hashColors = [
   "purple",
@@ -3169,12 +3190,12 @@ function PathPill({
   return /* @__PURE__ */ jsx48(
     "div",
     {
-      className: twMerge27("relative flex", className),
+      className: twMerge28("relative flex", className),
       "aria-label": `Path: ${fullPath}`,
       children: segments.map((segment, i) => {
         const isCollapsed = i < dotCount;
         const isLast = i === segments.length - 1;
-        const cx = twMerge27(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
+        const cx = twMerge28(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
         const color = colorFn ? colorFn(segment, i) : pillColorFromName(segment);
         return /* @__PURE__ */ jsx48(
           Badge,