@cytario/design 1.9.0 → 1.11.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { ButtonProps as ButtonProps$1, TextFieldProps, SelectProps as SelectProps$1, CellProps, ColumnProps, TableProps, RowProps, TableBodyProps, TableHeaderProps, CheckboxProps as CheckboxProps$1, SwitchProps as SwitchProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, ToggleButtonProps as ToggleButtonProps$1, PopoverProps as PopoverProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1 } from 'react-aria-components';
-export { Key, RouterConfig, RouterProvider } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, TextFieldProps, SelectProps as SelectProps$1, CellProps, ColumnProps, TableProps, RowProps, TableBodyProps, TableHeaderProps, CheckboxProps as CheckboxProps$1, SwitchProps as SwitchProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, ToggleButtonProps as ToggleButtonProps$1, PopoverProps as PopoverProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, ToggleButtonGroupProps, Key } from 'react-aria-components';
+export { Key, RouterConfig, RouterProvider, Tab as UnstyledTab, TabList as UnstyledTabList, TabPanel as UnstyledTabPanel, Tabs as UnstyledTabs } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { LucideIcon } from 'lucide-react';
 import * as React$1 from 'react';
@@ -137,10 +137,12 @@ interface DialogProps {
     onOpenChange: (isOpen: boolean) => void;
     title: string;
     size?: "sm" | "md" | "lg" | "xl";
+    /** Whether clicking outside the dialog dismisses it. Defaults to true. */
+    isDismissable?: boolean;
     children: React__default.ReactNode;
     className?: string;
 }
-declare function Dialog({ isOpen, onOpenChange, title, size, children, className, }: DialogProps): react_jsx_runtime.JSX.Element;
+declare function Dialog({ isOpen, onOpenChange, title, size, isDismissable, children, className, }: DialogProps): react_jsx_runtime.JSX.Element;
 
 type ToastVariant = "success" | "error" | "info";
 interface ToastData {
@@ -408,7 +410,7 @@ declare function PopoverTrigger({ children, className }: PopoverTriggerProps): r
  */
 declare function PopoverContent({ placement, offset: offsetPx, className, children, }: PopoverContentProps): react_jsx_runtime.JSX.Element;
 
-type TabsVariant = "underline" | "pills";
+type TabsVariant = "underline" | "pills" | "unstyled";
 type TabsSize = "sm" | "md" | "lg";
 interface TabsProps extends Omit<TabsProps$1, "className" | "orientation"> {
     /** Visual style variant */
@@ -452,6 +454,10 @@ interface TreeProps<T extends TreeNode = TreeNode> {
     selectedIds?: Set<string>;
     onSelectionChange?: (ids: Set<string>) => void;
     onActivate?: (node: T) => void;
+    /** Called when the pointer enters a tree node row. */
+    onHover?: (node: T) => void;
+    /** Called when the pointer leaves a tree node row. */
+    onHoverEnd?: (node: T) => void;
     openByDefault?: boolean;
     searchTerm?: string;
     searchMatch?: (node: T, term: string) => boolean;
@@ -462,7 +468,55 @@ interface TreeProps<T extends TreeNode = TreeNode> {
     treeRef?: React.Ref<TreeApi<T>>;
     className?: string;
 }
-declare function Tree<T extends TreeNode = TreeNode>({ data, "aria-label": ariaLabel, size, selectionMode, selectedIds, onSelectionChange, onActivate, openByDefault, searchTerm, searchMatch, height, indent, disableDrag, disableDrop, treeRef, className, }: TreeProps<T>): react_jsx_runtime.JSX.Element;
+declare function Tree<T extends TreeNode = TreeNode>({ data, "aria-label": ariaLabel, size, selectionMode, selectedIds, onSelectionChange, onActivate, onHover, onHoverEnd, openByDefault, searchTerm, searchMatch, height, indent, disableDrag, disableDrop, treeRef, className, }: TreeProps<T>): react_jsx_runtime.JSX.Element;
+
+type SegmentedControlSize = "sm" | "md" | "lg";
+type SegmentedControlSelectionMode = "single" | "none";
+interface SegmentedControlProps extends Omit<ToggleButtonGroupProps, "className" | "selectionMode" | "selectedKeys" | "defaultSelectedKeys" | "onSelectionChange"> {
+    /** Size preset for all items */
+    size?: SegmentedControlSize;
+    /** Selection behavior: "single" keeps one item selected, "none" means buttons fire actions without staying selected */
+    selectionMode?: SegmentedControlSelectionMode;
+    /** The currently selected keys (controlled, only for selectionMode="single") */
+    selectedKeys?: Iterable<Key>;
+    /** The initial selected keys (uncontrolled, only for selectionMode="single") */
+    defaultSelectedKeys?: Iterable<Key>;
+    /** Called when selection changes (only for selectionMode="single") */
+    onSelectionChange?: (keys: Set<Key>) => void;
+    /** Additional CSS classes */
+    className?: string;
+    children: ReactNode;
+}
+declare function SegmentedControl({ size, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, className, children, ...props }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
+interface SegmentedControlItemProps extends Omit<ToggleButtonProps$1, "className"> {
+    /** Additional CSS classes */
+    className?: string;
+}
+declare function SegmentedControlItem({ className, ...props }: SegmentedControlItemProps): react_jsx_runtime.JSX.Element;
+
+interface StorageConnectionCardProps {
+    /** Display name for the connection */
+    name: string;
+    /** Cloud provider identifier (e.g., "aws", "minio", "azure", "gcp") */
+    provider: string;
+    /** AWS region or equivalent */
+    region?: string;
+    /** Connection health status */
+    status: "connected" | "error" | "loading";
+    /** Human-readable error message when status is "error" */
+    errorMessage?: string;
+    /** Number of viewable images in the bucket */
+    imageCount?: number;
+    /** Children rendered in the preview area (e.g., an actual tile viewer, or an img) */
+    children?: React__default.ReactNode;
+    /** Navigation target — clicking the card navigates here */
+    href?: string;
+    /** Info button handler */
+    onInfo?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare function StorageConnectionCard({ name, provider, region, status, errorMessage, imageCount, children, href, onInfo, className, }: StorageConnectionCardProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Do not edit directly, this file was auto-generated.
@@ -608,4 +662,4 @@ declare const LineHeightTight = 1.25;
 declare const LineHeightNormal = 1.5;
 declare const LineHeightRelaxed = 1.625;
 
-export { BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Cell, Checkbox, type CheckboxProps, ColorActionDanger, ColorActionDangerHover, ColorActionDefault, ColorActionDefaultHover, ColorActionInfo, ColorActionInfoHover, ColorActionPrimary, ColorActionPrimaryActive, ColorActionPrimaryHover, ColorActionSecondary, ColorActionSecondaryHover, ColorActionSuccess, ColorActionSuccessHover, ColorBorderAccent, ColorBorderBrand, ColorBorderDanger, ColorBorderDefault, ColorBorderFocus, ColorBorderInfo, ColorBorderStrong, ColorBorderSuccess, ColorBorderWarning, ColorBrandAccent, ColorBrandPrimary, ColorGreen100, ColorGreen200, ColorGreen300, ColorGreen400, ColorGreen50, ColorGreen500, ColorGreen600, ColorGreen700, ColorGreen800, ColorGreen900, ColorNeutral0, ColorNeutral100, ColorNeutral1000, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorNeutral950, ColorOverlayBackdrop, ColorPurple100, ColorPurple200, ColorPurple300, ColorPurple400, ColorPurple50, ColorPurple500, ColorPurple600, ColorPurple700, ColorPurple800, ColorPurple900, ColorRose100, ColorRose200, ColorRose300, ColorRose400, ColorRose50, ColorRose500, ColorRose600, ColorRose700, ColorRose800, ColorRose900, ColorSlate100, ColorSlate200, ColorSlate300, ColorSlate400, ColorSlate50, ColorSlate500, ColorSlate600, ColorSlate700, ColorSlate800, ColorSlate900, ColorSurfaceAccent, ColorSurfaceBrand, ColorSurfaceDanger, ColorSurfaceDefault, ColorSurfaceInfo, ColorSurfaceMuted, ColorSurfaceOverlay, ColorSurfaceSubtle, ColorSurfaceSuccess, ColorSurfaceWarning, ColorTeal100, ColorTeal200, ColorTeal300, ColorTeal400, ColorTeal50, ColorTeal500, ColorTeal600, ColorTeal700, ColorTeal800, ColorTeal900, ColorTextAccent, ColorTextBrand, ColorTextDanger, ColorTextInfo, ColorTextInverse, ColorTextPrimary, ColorTextSecondary, ColorTextSuccess, ColorTextTertiary, ColorTextWarning, Column, type DataTableProps, Dialog, type DialogProps, EmptyState, type EmptyStateProps, Field, type FieldProps, Fieldset, type FieldsetProps, FontSize2xl, FontSize3xl, FontSize4xl, FontSize5xl, FontSizeBase, FontSizeLg, FontSizeSm, FontSizeXl, FontSizeXs, FontWeightBold, FontWeightExtrabold, FontWeightLight, FontWeightMedium, FontWeightRegular, FontWeightSemibold, type GroupPosition, H1, H2, H3, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, IconButtonLink, type IconButtonLinkProps, type IconButtonProps, type IconProps, Input, InputAddon, type InputAddonProps, InputGroup, InputGroupContext, type InputGroupProps, type InputProps, Label, type LabelProps, LineHeightNormal, LineHeightRelaxed, LineHeightTight, Link, type LinkProps, type LinkVariant, Menu, type MenuItemData, type MenuProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Row, Select, type SelectItem, type SelectProps, Spacing1, Spacing12, Spacing16, Spacing2, Spacing3, Spacing4, Spacing6, Spacing8, Spinner, type SpinnerProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, type TableSize, Tabs, type TabsProps, type TabsSize, type TabsVariant, type ToastBridge, type ToastContextValue, type ToastData, ToastProvider, type ToastVariant, ToggleButton, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonVariant, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, createToastBridge, useInputGroup, useToast };
+export { BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Cell, Checkbox, type CheckboxProps, ColorActionDanger, ColorActionDangerHover, ColorActionDefault, ColorActionDefaultHover, ColorActionInfo, ColorActionInfoHover, ColorActionPrimary, ColorActionPrimaryActive, ColorActionPrimaryHover, ColorActionSecondary, ColorActionSecondaryHover, ColorActionSuccess, ColorActionSuccessHover, ColorBorderAccent, ColorBorderBrand, ColorBorderDanger, ColorBorderDefault, ColorBorderFocus, ColorBorderInfo, ColorBorderStrong, ColorBorderSuccess, ColorBorderWarning, ColorBrandAccent, ColorBrandPrimary, ColorGreen100, ColorGreen200, ColorGreen300, ColorGreen400, ColorGreen50, ColorGreen500, ColorGreen600, ColorGreen700, ColorGreen800, ColorGreen900, ColorNeutral0, ColorNeutral100, ColorNeutral1000, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorNeutral950, ColorOverlayBackdrop, ColorPurple100, ColorPurple200, ColorPurple300, ColorPurple400, ColorPurple50, ColorPurple500, ColorPurple600, ColorPurple700, ColorPurple800, ColorPurple900, ColorRose100, ColorRose200, ColorRose300, ColorRose400, ColorRose50, ColorRose500, ColorRose600, ColorRose700, ColorRose800, ColorRose900, ColorSlate100, ColorSlate200, ColorSlate300, ColorSlate400, ColorSlate50, ColorSlate500, ColorSlate600, ColorSlate700, ColorSlate800, ColorSlate900, ColorSurfaceAccent, ColorSurfaceBrand, ColorSurfaceDanger, ColorSurfaceDefault, ColorSurfaceInfo, ColorSurfaceMuted, ColorSurfaceOverlay, ColorSurfaceSubtle, ColorSurfaceSuccess, ColorSurfaceWarning, ColorTeal100, ColorTeal200, ColorTeal300, ColorTeal400, ColorTeal50, ColorTeal500, ColorTeal600, ColorTeal700, ColorTeal800, ColorTeal900, ColorTextAccent, ColorTextBrand, ColorTextDanger, ColorTextInfo, ColorTextInverse, ColorTextPrimary, ColorTextSecondary, ColorTextSuccess, ColorTextTertiary, ColorTextWarning, Column, type DataTableProps, Dialog, type DialogProps, EmptyState, type EmptyStateProps, Field, type FieldProps, Fieldset, type FieldsetProps, FontSize2xl, FontSize3xl, FontSize4xl, FontSize5xl, FontSizeBase, FontSizeLg, FontSizeSm, FontSizeXl, FontSizeXs, FontWeightBold, FontWeightExtrabold, FontWeightLight, FontWeightMedium, FontWeightRegular, FontWeightSemibold, type GroupPosition, H1, H2, H3, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, IconButtonLink, type IconButtonLinkProps, type IconButtonProps, type IconProps, Input, InputAddon, type InputAddonProps, InputGroup, InputGroupContext, type InputGroupProps, type InputProps, Label, type LabelProps, LineHeightNormal, LineHeightRelaxed, LineHeightTight, Link, type LinkProps, type LinkVariant, Menu, type MenuItemData, type MenuProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Row, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, type SegmentedControlSelectionMode, type SegmentedControlSize, Select, type SelectItem, type SelectProps, Spacing1, Spacing12, Spacing16, Spacing2, Spacing3, Spacing4, Spacing6, Spacing8, Spinner, type SpinnerProps, StorageConnectionCard, type StorageConnectionCardProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, type TableSize, Tabs, type TabsProps, type TabsSize, type TabsVariant, type ToastBridge, type ToastContextValue, type ToastData, ToastProvider, type ToastVariant, ToggleButton, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonVariant, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, createToastBridge, useInputGroup, useToast };

package/dist/index.js

@@ -710,6 +710,7 @@ function Cell(props) {
       ...props,
       className: [
         "px-3 py-[var(--table-row-py)]",
+        "text-[var(--color-text-primary)]",
         "outline-none",
         "focus-visible:outline-2 focus-visible:outline-[var(--color-border-focus)] focus-visible:outline-offset-[-2px]"
       ].join(" ")
@@ -737,6 +738,7 @@ function Dialog({
   onOpenChange,
   title,
   size = "md",
+  isDismissable = true,
   children,
   className
 }) {
@@ -745,7 +747,7 @@ function Dialog({
     {
       isOpen,
       onOpenChange,
-      isDismissable: true,
+      isDismissable,
       className: [
         "fixed inset-0 z-50 bg-[var(--color-overlay-backdrop)] backdrop-blur-sm",
         "flex items-center justify-center",
@@ -1701,6 +1703,7 @@ function PopoverContent({
 
 // src/components/Tabs/Tabs.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
+import { twMerge as twMerge5 } from "tailwind-merge";
 import {
   Tabs as AriaTabs,
   TabList as AriaTabList,
@@ -1730,10 +1733,10 @@ function Tabs({
     {
       ...props,
       orientation,
-      className: [
+      className: twMerge5(
         orientation === "vertical" ? "flex" : "",
         className
-      ].filter(Boolean).join(" "),
+      ),
       children
     }
   ) });
@@ -1743,17 +1746,17 @@ function TabList({
   ...props
 }) {
   const { variant } = useContext3(TabsContext);
-  const baseStyles = variant === "underline" ? "flex items-center border-b border-[var(--color-border-default)]" : "inline-flex items-center bg-[var(--color-surface-muted)] rounded-[var(--border-radius-lg)] p-1 gap-1";
-  const verticalStyles = variant === "underline" ? "flex-col border-b-0 border-r border-[var(--color-border-default)]" : "flex-col";
+  const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-[var(--color-border-default)]" : "inline-flex items-center bg-[var(--color-surface-muted)] rounded-[var(--border-radius-lg)] p-1 gap-1";
+  const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-[var(--color-border-default)]" : "flex-col";
   return /* @__PURE__ */ jsx27(
     AriaTabList,
     {
       ...props,
-      className: ({ orientation }) => [
+      className: ({ orientation }) => twMerge5(
         baseStyles,
         orientation === "vertical" ? verticalStyles : "",
         className
-      ].filter(Boolean).join(" ")
+      )
     }
   );
 }
@@ -1763,25 +1766,34 @@ function Tab({ className, ...props }) {
     AriaTab,
     {
       ...props,
-      className: ({ isSelected, isDisabled, isHovered, isPressed }) => [
-        // Base
-        "cursor-pointer outline-none transition-colors",
-        "font-[var(--font-weight-medium)]",
-        // Focus ring
-        "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
-        // Disabled
-        isDisabled ? "opacity-50 pointer-events-none" : "",
-        // Size
-        sizeStyles5[size],
-        // Variant-specific styles
-        ...getTabVariantStyles(variant, {
-          isSelected,
-          isHovered,
-          isPressed,
-          isDisabled
-        }),
-        className
-      ].filter(Boolean).join(" ")
+      className: ({ isSelected, isDisabled, isHovered, isPressed }) => {
+        if (variant === "unstyled") {
+          return twMerge5(
+            "cursor-pointer outline-none",
+            "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
+            isDisabled ? "opacity-50 pointer-events-none" : "",
+            className
+          );
+        }
+        return twMerge5(
+          // Base
+          "cursor-pointer outline-none transition-colors",
+          "font-[var(--font-weight-medium)]",
+          // Focus ring
+          "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
+          // Disabled
+          isDisabled ? "opacity-50 pointer-events-none" : "",
+          // Size
+          sizeStyles5[size],
+          ...getTabVariantStyles(variant, {
+            isSelected,
+            isHovered,
+            isPressed,
+            isDisabled
+          }),
+          className
+        );
+      }
     }
   );
 }
@@ -1806,15 +1818,27 @@ function getTabVariantStyles(variant, state) {
   ];
 }
 function TabPanel({ className, ...props }) {
+  const { variant } = useContext3(TabsContext);
   return /* @__PURE__ */ jsx27(
     AriaTabPanel,
     {
       ...props,
-      className: ["mt-4 outline-none", className].filter(Boolean).join(" ")
+      className: twMerge5(
+        variant === "unstyled" ? "outline-none" : "mt-4 outline-none",
+        className
+      )
     }
   );
 }
 
+// src/index.ts
+import {
+  Tabs as Tabs2,
+  TabList as TabList2,
+  Tab as Tab2,
+  TabPanel as TabPanel2
+} from "react-aria-components";
+
 // src/components/Tree/Tree.tsx
 import { useCallback as useCallback2, useImperativeHandle, useRef as useRef2, useState as useState2 } from "react";
 import { Tree as ArboristTree } from "react-arborist";
@@ -1832,7 +1856,9 @@ function NodeRenderer({
   dragHandle,
   checkedIds,
   onCheckToggle,
-  selectionMode
+  selectionMode,
+  onHover,
+  onHoverEnd
 }) {
   const data = node.data;
   const isCheckbox = selectionMode === "checkbox";
@@ -1854,6 +1880,8 @@ function NodeRenderer({
       role: "treeitem",
       "aria-selected": isCheckbox ? isChecked : node.isSelected,
       "aria-expanded": node.isInternal ? node.isOpen : void 0,
+      onPointerEnter: () => onHover?.(node.data),
+      onPointerLeave: () => onHoverEnd?.(node.data),
       onClick: (e) => {
         if (isCheckbox) {
           onCheckToggle(node.id);
@@ -1939,6 +1967,8 @@ function Tree({
   selectedIds,
   onSelectionChange,
   onActivate,
+  onHover,
+  onHoverEnd,
   openByDefault = false,
   searchTerm,
   searchMatch,
@@ -2021,7 +2051,9 @@ function Tree({
               ...props,
               checkedIds,
               onCheckToggle: handleCheckToggle,
-              selectionMode
+              selectionMode,
+              onHover,
+              onHoverEnd
             }
           )
         }
@@ -2030,6 +2062,206 @@ function Tree({
   );
 }
 
+// src/components/SegmentedControl/SegmentedControl.tsx
+import { createContext as createContext4, useContext as useContext4 } from "react";
+import { twMerge as twMerge6 } from "tailwind-merge";
+import {
+  ToggleButtonGroup as AriaToggleButtonGroup,
+  ToggleButton as AriaToggleButton2
+} from "react-aria-components";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var SegmentedControlContext = createContext4({
+  size: "md"
+});
+var sizeStyles6 = {
+  sm: "px-2.5 py-1 text-xs",
+  md: "px-3 py-1.5 text-sm",
+  lg: "px-4 py-2 text-base"
+};
+function SegmentedControl({
+  size = "md",
+  selectionMode = "single",
+  selectedKeys,
+  defaultSelectedKeys,
+  onSelectionChange,
+  className,
+  children,
+  ...props
+}) {
+  const isNoneMode = selectionMode === "none";
+  return /* @__PURE__ */ jsx29(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx29(
+    AriaToggleButtonGroup,
+    {
+      ...props,
+      selectionMode: "single",
+      selectedKeys: isNoneMode ? /* @__PURE__ */ new Set() : selectedKeys,
+      defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
+      onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
+      className: twMerge6(
+        "inline-flex items-center rounded-[var(--border-radius-lg)] border border-[var(--color-border-default)] bg-[var(--color-surface-muted)] p-0.5 gap-0.5",
+        className
+      ),
+      children
+    }
+  ) });
+}
+function SegmentedControlItem({
+  className,
+  ...props
+}) {
+  const { size } = useContext4(SegmentedControlContext);
+  return /* @__PURE__ */ jsx29(
+    AriaToggleButton2,
+    {
+      ...props,
+      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge6(
+        // Base layout
+        "inline-flex items-center justify-center",
+        "rounded-[var(--border-radius-md)]",
+        "font-[var(--font-weight-medium)]",
+        "outline-none transition-colors cursor-pointer",
+        // Focus ring
+        "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-1",
+        // Disabled
+        isDisabled && "opacity-50 pointer-events-none",
+        // Size
+        sizeStyles6[size],
+        // Selected state
+        isSelected ? "bg-[var(--color-surface-default)] text-[var(--color-text-primary)] shadow-sm font-[var(--font-weight-semibold)]" : isPressed ? "bg-[var(--color-surface-subtle)] text-[var(--color-text-primary)]" : isHovered ? "bg-[var(--color-surface-subtle)] text-[var(--color-text-primary)]" : "bg-transparent text-[var(--color-text-secondary)]",
+        className
+      )
+    }
+  );
+}
+
+// src/components/StorageConnectionCard/StorageConnectionCard.tsx
+import { AlertCircle, Database, Info as Info2 } from "lucide-react";
+import { twMerge as twMerge7 } from "tailwind-merge";
+import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+var statusDotStyles = {
+  connected: "bg-emerald-500",
+  error: "bg-red-500",
+  loading: "bg-amber-500 animate-pulse"
+};
+var providerConfig = {
+  aws: { label: "AWS", color: "bg-orange-100 text-orange-700" },
+  azure: { label: "Azure", color: "bg-blue-100 text-blue-700" },
+  gcp: { label: "GCP", color: "bg-sky-100 text-sky-700" },
+  minio: { label: "MinIO", color: "bg-red-100 text-red-700" }
+};
+function ProviderBadge({ provider }) {
+  const config = providerConfig[provider.toLowerCase()];
+  const label = config?.label ?? provider;
+  const colorClass = config?.color ?? "bg-neutral-100 text-neutral-700";
+  return /* @__PURE__ */ jsx30(
+    "span",
+    {
+      className: twMerge7(
+        "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
+        colorClass
+      ),
+      children: label
+    }
+  );
+}
+function PreviewArea({
+  status,
+  errorMessage,
+  children
+}) {
+  if (status === "loading") {
+    return /* @__PURE__ */ jsx30("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx30(Spinner, { size: "lg", "aria-label": "Loading connection" }) });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ jsxs20("div", { className: "flex h-full flex-col items-center justify-center gap-2 bg-red-950/20 px-4", children: [
+      /* @__PURE__ */ jsx30(
+        Icon,
+        {
+          icon: AlertCircle,
+          size: "lg",
+          className: "text-red-400"
+        }
+      ),
+      errorMessage && /* @__PURE__ */ jsx30("p", { className: "text-center text-xs text-red-300", children: errorMessage })
+    ] });
+  }
+  if (children) {
+    return /* @__PURE__ */ jsx30("div", { className: "h-full w-full overflow-hidden", children });
+  }
+  return /* @__PURE__ */ jsx30("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx30(
+    Icon,
+    {
+      icon: Database,
+      size: "xl",
+      className: "text-[var(--color-neutral-600)]"
+    }
+  ) });
+}
+function StorageConnectionCard({
+  name,
+  provider,
+  region,
+  status,
+  errorMessage,
+  imageCount,
+  children,
+  href,
+  onInfo,
+  className
+}) {
+  const cardContent = /* @__PURE__ */ jsxs20(Fragment8, { children: [
+    /* @__PURE__ */ jsx30("div", { className: "aspect-[4/3] bg-[var(--color-neutral-900)] overflow-hidden rounded-t-[var(--border-radius-lg)]", children: /* @__PURE__ */ jsx30(PreviewArea, { status, errorMessage, children }) }),
+    /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1.5 border-t border-[var(--color-border-default)] bg-[var(--color-surface-default)] px-3 py-2.5 rounded-b-[var(--border-radius-lg)]", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx30(
+          "span",
+          {
+            className: twMerge7(
+              "mt-1.5 h-2 w-2 shrink-0 rounded-full",
+              statusDotStyles[status]
+            ),
+            "aria-label": `Status: ${status}`
+          }
+        ),
+        /* @__PURE__ */ jsx30("span", { className: "min-w-0 flex-1 line-clamp-2 text-sm font-medium text-[var(--color-text-primary)]", children: name }),
+        onInfo && /* @__PURE__ */ jsx30(
+          IconButton,
+          {
+            icon: Info2,
+            "aria-label": "Connection info",
+            variant: "ghost",
+            size: "sm",
+            className: "shrink-0 -mt-1 -mr-1",
+            onPress: () => {
+              onInfo();
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 pl-4", children: [
+        /* @__PURE__ */ jsx30(ProviderBadge, { provider }),
+        region && /* @__PURE__ */ jsx30("span", { className: "shrink-0 text-xs text-[var(--color-text-secondary)]", children: region }),
+        imageCount != null && status === "connected" && /* @__PURE__ */ jsxs20("span", { className: "ml-auto shrink-0 text-xs tabular-nums text-[var(--color-text-tertiary)]", children: [
+          imageCount,
+          " ",
+          imageCount === 1 ? "image" : "images"
+        ] })
+      ] })
+    ] })
+  ] });
+  const baseStyles = twMerge7(
+    "flex flex-col overflow-hidden rounded-[var(--border-radius-lg)]",
+    "border border-[var(--color-border-default)]",
+    "shadow-sm transition-all",
+    href && "hover:border-[var(--color-border-focus)] hover:shadow-md cursor-pointer",
+    className
+  );
+  if (href) {
+    return /* @__PURE__ */ jsx30("a", { href, className: twMerge7(baseStyles, "no-underline"), children: cardContent });
+  }
+  return /* @__PURE__ */ jsx30("div", { className: baseStyles, children: cardContent });
+}
+
 // src/tokens/tokens.ts
 var ColorPurple50 = "#f5f0fa";
 var ColorPurple100 = "#ead9f5";
@@ -2336,6 +2568,8 @@ export {
   RadioGroup,
   RouterProvider,
   Row,
+  SegmentedControl,
+  SegmentedControlItem,
   Select,
   Spacing1,
   Spacing12,
@@ -2346,6 +2580,7 @@ export {
   Spacing6,
   Spacing8,
   Spinner,
+  StorageConnectionCard,
   Switch,
   Tab,
   TabList,
@@ -2358,6 +2593,10 @@ export {
   ToggleButton,
   Tooltip,
   Tree,
+  Tab2 as UnstyledTab,
+  TabList2 as UnstyledTabList,
+  TabPanel2 as UnstyledTabPanel,
+  Tabs2 as UnstyledTabs,
   createToastBridge,
   useInputGroup,
   useToast