@cytario/design 1.10.0 → 1.11.1

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-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';
+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';
@@ -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 {
@@ -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.
@@ -565,6 +619,9 @@ declare const ColorSurfaceSuccess = "#f0fdf4";
 declare const ColorSurfaceWarning = "#fffbeb";
 declare const ColorSurfaceInfo = "#f8fafc";
 declare const ColorSurfaceOverlay = "#000000cc";
+declare const ColorSurfaceHover = "#f3f4f6";
+declare const ColorSurfaceSelected = "#edf9f9";
+declare const ColorSurfaceSelectedHover = "#d0f0f0";
 declare const ColorBorderDefault = "#e5e7eb";
 declare const ColorBorderStrong = "#d1d5db";
 declare const ColorBorderBrand = "#5c2483";
@@ -608,4 +665,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, ColorSurfaceHover, ColorSurfaceInfo, ColorSurfaceMuted, ColorSurfaceOverlay, ColorSurfaceSelected, ColorSurfaceSelectedHover, 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",
@@ -1854,11 +1856,16 @@ function NodeRenderer({
   dragHandle,
   checkedIds,
   onCheckToggle,
-  selectionMode
+  selectionMode,
+  size,
+  onHover,
+  onHoverEnd
 }) {
   const data = node.data;
   const isCheckbox = selectionMode === "checkbox";
   const isChecked = isCheckbox && checkedIds.has(node.id);
+  const isSelected = node.isSelected && !isCheckbox;
+  const isCompact = size === "compact";
   const IconComponent = data.icon ? data.icon : node.isInternal ? Folder : File;
   return /* @__PURE__ */ jsxs19(
     "div",
@@ -1866,16 +1873,21 @@ function NodeRenderer({
       ref: dragHandle,
       style,
       className: [
-        "flex items-center gap-1 px-2 cursor-default select-none",
+        "relative flex items-center cursor-default select-none",
+        isCompact ? "gap-0.5 px-2" : "gap-1 px-3",
         "text-[length:var(--font-size-sm)] text-[var(--color-text-primary)]",
         "outline-none",
-        "transition-colors",
-        node.isSelected && !isCheckbox ? "bg-[var(--color-teal-50)]" : "hover:bg-[var(--color-teal-50)]",
-        node.isFocused ? "ring-2 ring-inset ring-[var(--color-border-focus)]" : ""
+        // Full-width background via pseudo-element
+        "before:absolute before:inset-y-0 before:left-[-100vw] before:right-0 before:-z-10 before:transition-colors",
+        isSelected ? "before:bg-[var(--color-surface-selected)] hover:before:bg-[var(--color-surface-selected-hover)] border-l-2 border-l-[var(--color-brand-accent)]" : "hover:before:bg-[var(--color-surface-hover)]",
+        node.isFocused ? "outline-2 outline-[var(--color-border-focus)] outline-offset-[-2px]" : ""
       ].filter(Boolean).join(" "),
       role: "treeitem",
       "aria-selected": isCheckbox ? isChecked : node.isSelected,
       "aria-expanded": node.isInternal ? node.isOpen : void 0,
+      "aria-level": node.level + 1,
+      onPointerEnter: () => onHover?.(node.data),
+      onPointerLeave: () => onHoverEnd?.(node.data),
       onClick: (e) => {
         if (isCheckbox) {
           onCheckToggle(node.id);
@@ -1895,10 +1907,10 @@ function NodeRenderer({
           {
             type: "button",
             className: [
-              "flex items-center justify-center w-5 h-5 shrink-0",
+              "flex items-center justify-center w-6 h-6 shrink-0",
               "rounded-[var(--border-radius-sm)]",
               "text-[var(--color-text-secondary)]",
-              "hover:text-[var(--color-text-primary)] hover:bg-[var(--color-neutral-100)]",
+              "hover:text-[var(--color-text-primary)]",
               "transition-transform",
               node.isInternal ? "visible" : "invisible"
             ].filter(Boolean).join(" "),
@@ -1961,6 +1973,8 @@ function Tree({
   selectedIds,
   onSelectionChange,
   onActivate,
+  onHover,
+  onHoverEnd,
   openByDefault = false,
   searchTerm,
   searchMatch,
@@ -2017,7 +2031,7 @@ function Tree({
     {
       role: "tree",
       "aria-label": ariaLabel,
-      className: ["outline-none", className].filter(Boolean).join(" "),
+      className: ["outline-none overflow-hidden", className].filter(Boolean).join(" "),
       children: /* @__PURE__ */ jsx28(
         ArboristTree,
         {
@@ -2043,7 +2057,10 @@ function Tree({
               ...props,
               checkedIds,
               onCheckToggle: handleCheckToggle,
-              selectionMode
+              selectionMode,
+              size,
+              onHover,
+              onHoverEnd
             }
           )
         }
@@ -2052,6 +2069,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";
@@ -2151,6 +2368,9 @@ var ColorSurfaceSuccess = "#f0fdf4";
 var ColorSurfaceWarning = "#fffbeb";
 var ColorSurfaceInfo = "#f8fafc";
 var ColorSurfaceOverlay = "#000000cc";
+var ColorSurfaceHover = "#f3f4f6";
+var ColorSurfaceSelected = "#edf9f9";
+var ColorSurfaceSelectedHover = "#d0f0f0";
 var ColorBorderDefault = "#e5e7eb";
 var ColorBorderStrong = "#d1d5db";
 var ColorBorderBrand = "#5c2483";
@@ -2287,9 +2507,12 @@ export {
   ColorSurfaceBrand,
   ColorSurfaceDanger,
   ColorSurfaceDefault,
+  ColorSurfaceHover,
   ColorSurfaceInfo,
   ColorSurfaceMuted,
   ColorSurfaceOverlay,
+  ColorSurfaceSelected,
+  ColorSurfaceSelectedHover,
   ColorSurfaceSubtle,
   ColorSurfaceSuccess,
   ColorSurfaceWarning,
@@ -2358,6 +2581,8 @@ export {
   RadioGroup,
   RouterProvider,
   Row,
+  SegmentedControl,
+  SegmentedControlItem,
   Select,
   Spacing1,
   Spacing12,
@@ -2368,6 +2593,7 @@ export {
   Spacing6,
   Spacing8,
   Spinner,
+  StorageConnectionCard,
   Switch,
   Tab,
   TabList,