@cytario/design 2.4.0 → 3.1.0

package/dist/index.d.ts

@@ -7,14 +7,15 @@ import React__default, { ReactNode } from 'react';
 import { TreeApi } from 'react-arborist';
 export { TreeApi } from 'react-arborist';
 
+type Size = "sm" | "md" | "lg";
 type ButtonVariant = "primary" | "secondary" | "ghost" | "destructive" | "default" | "success" | "info" | "neutral";
-type ButtonSize = "sm" | "md" | "lg";
 
+type ButtonSize$1 = Size;
 interface ButtonProps extends ButtonProps$1 {
     /** Visual style variant */
     variant?: ButtonVariant;
     /** Size preset */
-    size?: ButtonSize;
+    size?: ButtonSize$1;
     /** Shows a spinner and disables interaction */
     isLoading?: boolean;
     /** Lucide icon rendered before children */
@@ -94,7 +95,7 @@ interface InputProps extends Omit<TextFieldProps, "children" | "className"> {
     /** HTML input type */
     type?: "text" | "email" | "password" | "number";
     /** Controls padding and font size */
-    size?: "sm" | "md" | "lg";
+    size?: Size;
     /** Text prefix shown inside the input on the left (e.g., "$", "https://") */
     prefix?: string;
     /** Text alignment within the input */
@@ -113,11 +114,13 @@ interface SelectProps extends Omit<SelectProps$1<SelectItem>, "children"> {
     label?: string;
     placeholder?: string;
     errorMessage?: string;
+    /** Controls padding and font size */
+    size?: Size;
     /** Custom visual renderer for items in the dropdown and trigger.
      *  `item.name` remains the accessible label (used for typeahead and screen readers). */
     renderItem?: (item: SelectItem) => React__default.ReactNode;
 }
-declare function Select({ label, items, placeholder, errorMessage, isDisabled, isRequired, className, renderItem, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+declare function Select({ label, items, placeholder, errorMessage, size, isDisabled, isRequired, className, renderItem, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
 
 type TableSize = "compact" | "comfortable";
 interface DataTableProps extends TableProps {
@@ -303,6 +306,7 @@ interface BreadcrumbsProps {
 }
 declare function Breadcrumbs({ items, className }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
 
+type ButtonSize = Size;
 interface ButtonLinkProps extends Omit<LinkProps$1, "className"> {
     /** Visual style variant */
     variant?: ButtonVariant;
@@ -581,40 +585,25 @@ interface SegmentedControlItemProps extends Omit<ToggleButtonProps$1, "className
 }
 declare function SegmentedControlItem({ className, ...props }: SegmentedControlItemProps): react_jsx_runtime.JSX.Element;
 
-declare function getFileIcon(type: "directory" | "file", extension?: string): LucideIcon;
-declare function getTypeLabel(type: "directory" | "file", extension?: string): string;
-declare function FileIcon({ type, extension, size, }: {
-    type: "directory" | "file";
-    extension?: string;
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
 interface FileCardProps {
     /** File or folder name */
     name: string;
-    /** Whether this is a directory or file */
-    type: "directory" | "file";
+    /** Icon to display in thumbnail fallback and metadata row */
+    icon?: LucideIcon;
     /** Human-readable file size (e.g., "12.3 GB") */
     size?: string;
-    /** Last modified date/time */
-    modified?: string;
-    /** File extension (e.g., "ome.tif", "csv") */
-    extension?: string;
-    /** Whether a thumbnail preview is available */
-    hasPreview?: boolean;
     /** Compact mode (smaller card, square aspect, minimal metadata) */
     compact?: boolean;
     /** Custom thumbnail content (e.g., an image preview) */
     children?: React__default.ReactNode;
     /** Info button handler */
     onInfo?: () => void;
-    /** Navigation target — clicking the card navigates here */
-    href?: string;
-    /** Handler for click/press interaction (use instead of href for programmatic navigation) */
+    /** Handler for click/press interaction */
     onPress?: () => void;
     /** Additional CSS classes */
     className?: string;
 }
-declare function FileCard({ name, type, size, extension, compact, children, onInfo, href, onPress, className, }: FileCardProps): react_jsx_runtime.JSX.Element;
+declare function FileCard({ name, icon: IconComponent, size, compact, children, onInfo, onPress, className, }: FileCardProps): react_jsx_runtime.JSX.Element;
 
 interface StorageConnectionCardProps {
     name: string;
@@ -1037,4 +1026,4 @@ declare const LineHeightTight = 1.25;
 declare const LineHeightNormal = 1.5;
 declare const LineHeightRelaxed = 1.625;
 
-export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Banner, type BannerProps, type BannerVariant, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, Cell, Checkbox, type CheckboxProps, ColorActionDanger, ColorActionDangerHover, ColorActionDefault, ColorActionDefaultHover, ColorActionInfo, ColorActionInfoHover, ColorActionPrimary, ColorActionPrimaryActive, ColorActionPrimaryHover, ColorActionSecondary, ColorActionSecondaryHover, ColorActionSuccess, ColorActionSuccessHover, ColorAmber100, ColorAmber200, ColorAmber300, ColorAmber400, ColorAmber50, ColorAmber500, ColorAmber600, ColorAmber700, ColorAmber800, ColorAmber900, ColorBadgeAmberBg, ColorBadgeAmberText, ColorBadgeGreenBg, ColorBadgeGreenText, ColorBadgeNeutralBg, ColorBadgeNeutralText, ColorBadgePurpleBg, ColorBadgePurpleText, ColorBadgeRoseBg, ColorBadgeRoseText, ColorBadgeSlateBg, ColorBadgeSlateText, ColorBadgeTealBg, ColorBadgeTealText, ColorBannerDangerBg, ColorBannerDangerBorder, ColorBannerDangerIcon, ColorBannerDangerText, ColorBannerInfoBg, ColorBannerInfoBorder, ColorBannerInfoIcon, ColorBannerInfoText, ColorBannerSuccessBg, ColorBannerSuccessBorder, ColorBannerSuccessIcon, ColorBannerSuccessText, ColorBannerWarningBg, ColorBannerWarningBorder, ColorBannerWarningIcon, ColorBannerWarningText, ColorBorderAccent, ColorBorderBrand, ColorBorderDanger, ColorBorderDefault, ColorBorderFocus, ColorBorderInfo, ColorBorderStrong, ColorBorderSuccess, ColorBorderWarning, ColorBrandAccent, ColorBrandPrimary, ColorDeltaDecreaseBg, ColorDeltaDecreaseIcon, ColorDeltaDecreaseText, ColorDeltaFlatBg, ColorDeltaFlatIcon, ColorDeltaFlatText, ColorDeltaIncreaseBg, ColorDeltaIncreaseIcon, ColorDeltaIncreaseText, ColorGreen100, ColorGreen200, ColorGreen300, ColorGreen400, ColorGreen50, ColorGreen500, ColorGreen600, ColorGreen700, ColorGreen800, ColorGreen900, ColorNeutral0, ColorNeutral100, ColorNeutral1000, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorNeutral950, ColorOverlayBackdrop, ColorProgressFill, ColorProgressFillDanger, ColorProgressFillSuccess, ColorProgressFillWarning, ColorProgressTrack, 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, ColorStatusDanger, ColorStatusInfo, ColorStatusSuccess, ColorStatusWarning, ColorSurfaceAccent, ColorSurfaceBrand, ColorSurfaceDanger, ColorSurfaceDefault, ColorSurfaceHover, ColorSurfaceInfo, ColorSurfaceMuted, ColorSurfaceOverlay, ColorSurfacePressed, 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, type DeltaFormat, DeltaIndicator, type DeltaIndicatorProps, type DeltaMode, Dialog, type DialogProps, EmptyState, type EmptyStateProps, Field, type FieldProps, Fieldset, type FieldsetProps, FileCard, type FileCardProps, FileIcon, FontSize2xl, FontSize3xl, FontSize4xl, FontSize5xl, FontSizeBase, FontSizeLg, FontSizeSm, FontSizeXl, FontSizeXs, FontWeightBold, FontWeightExtrabold, FontWeightLight, FontWeightMedium, FontWeightRegular, FontWeightSemibold, FormWizard, type FormWizardContextValue, FormWizardNav, type FormWizardNavProps, FormWizardProgress, type FormWizardProgressProps, type FormWizardProps, 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, MenuCheckboxItem, type MenuCheckboxItemProps, MenuHeader, type MenuHeaderProps, MenuItem, type MenuItemData, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MetricCard, type MetricCardProps, type MetricCardSize, PathPill, type PathPillProps, Pill, type PillColor, type PillProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarVariant, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Row, SectionHeader, type SectionHeaderProps, 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, type ToastPlacement, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleButton, ToggleButtonGroup, ToggleButtonGroupItem, type ToggleButtonGroupItemProps, type ToggleButtonGroupProps, type ToggleButtonGroupSize, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonVariant, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, createToastBridge, getFileIcon, getTypeLabel, pillColorFromName, useFormWizard, useInputGroup, useToast };
+export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Banner, type BannerProps, type BannerVariant, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize$1 as ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, Cell, Checkbox, type CheckboxProps, ColorActionDanger, ColorActionDangerHover, ColorActionDefault, ColorActionDefaultHover, ColorActionInfo, ColorActionInfoHover, ColorActionPrimary, ColorActionPrimaryActive, ColorActionPrimaryHover, ColorActionSecondary, ColorActionSecondaryHover, ColorActionSuccess, ColorActionSuccessHover, ColorAmber100, ColorAmber200, ColorAmber300, ColorAmber400, ColorAmber50, ColorAmber500, ColorAmber600, ColorAmber700, ColorAmber800, ColorAmber900, ColorBadgeAmberBg, ColorBadgeAmberText, ColorBadgeGreenBg, ColorBadgeGreenText, ColorBadgeNeutralBg, ColorBadgeNeutralText, ColorBadgePurpleBg, ColorBadgePurpleText, ColorBadgeRoseBg, ColorBadgeRoseText, ColorBadgeSlateBg, ColorBadgeSlateText, ColorBadgeTealBg, ColorBadgeTealText, ColorBannerDangerBg, ColorBannerDangerBorder, ColorBannerDangerIcon, ColorBannerDangerText, ColorBannerInfoBg, ColorBannerInfoBorder, ColorBannerInfoIcon, ColorBannerInfoText, ColorBannerSuccessBg, ColorBannerSuccessBorder, ColorBannerSuccessIcon, ColorBannerSuccessText, ColorBannerWarningBg, ColorBannerWarningBorder, ColorBannerWarningIcon, ColorBannerWarningText, ColorBorderAccent, ColorBorderBrand, ColorBorderDanger, ColorBorderDefault, ColorBorderFocus, ColorBorderInfo, ColorBorderStrong, ColorBorderSuccess, ColorBorderWarning, ColorBrandAccent, ColorBrandPrimary, ColorDeltaDecreaseBg, ColorDeltaDecreaseIcon, ColorDeltaDecreaseText, ColorDeltaFlatBg, ColorDeltaFlatIcon, ColorDeltaFlatText, ColorDeltaIncreaseBg, ColorDeltaIncreaseIcon, ColorDeltaIncreaseText, ColorGreen100, ColorGreen200, ColorGreen300, ColorGreen400, ColorGreen50, ColorGreen500, ColorGreen600, ColorGreen700, ColorGreen800, ColorGreen900, ColorNeutral0, ColorNeutral100, ColorNeutral1000, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorNeutral950, ColorOverlayBackdrop, ColorProgressFill, ColorProgressFillDanger, ColorProgressFillSuccess, ColorProgressFillWarning, ColorProgressTrack, 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, ColorStatusDanger, ColorStatusInfo, ColorStatusSuccess, ColorStatusWarning, ColorSurfaceAccent, ColorSurfaceBrand, ColorSurfaceDanger, ColorSurfaceDefault, ColorSurfaceHover, ColorSurfaceInfo, ColorSurfaceMuted, ColorSurfaceOverlay, ColorSurfacePressed, 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, type DeltaFormat, DeltaIndicator, type DeltaIndicatorProps, type DeltaMode, Dialog, type DialogProps, EmptyState, type EmptyStateProps, Field, type FieldProps, Fieldset, type FieldsetProps, FileCard, type FileCardProps, FontSize2xl, FontSize3xl, FontSize4xl, FontSize5xl, FontSizeBase, FontSizeLg, FontSizeSm, FontSizeXl, FontSizeXs, FontWeightBold, FontWeightExtrabold, FontWeightLight, FontWeightMedium, FontWeightRegular, FontWeightSemibold, FormWizard, type FormWizardContextValue, FormWizardNav, type FormWizardNavProps, FormWizardProgress, type FormWizardProgressProps, type FormWizardProps, 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, MenuCheckboxItem, type MenuCheckboxItemProps, MenuHeader, type MenuHeaderProps, MenuItem, type MenuItemData, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MetricCard, type MetricCardProps, type MetricCardSize, PathPill, type PathPillProps, Pill, type PillColor, type PillProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarVariant, Radio, RadioButton, type RadioButtonProps, RadioGroup, type RadioGroupProps, type RadioProps, Row, SectionHeader, type SectionHeaderProps, 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, type ToastPlacement, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleButton, ToggleButtonGroup, ToggleButtonGroupItem, type ToggleButtonGroupItemProps, type ToggleButtonGroupProps, type ToggleButtonGroupSize, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonVariant, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, createToastBridge, pillColorFromName, useFormWizard, useInputGroup, useToast };

package/dist/index.js

@@ -10,6 +10,11 @@ import {
 import { twMerge } from "tailwind-merge";
 
 // src/components/_shared/styles.ts
+var sizeStyles = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-base",
+  lg: "px-6 py-3 text-lg"
+};
 var variantStyles = {
   primary: [
     "bg-(--color-action-primary) text-(--color-text-inverse)",
@@ -54,11 +59,6 @@ var variantStyles = {
     "pressed:bg-(--color-surface-muted)"
   ].join(" ")
 };
-var sizeStyles = {
-  sm: "px-3 py-1.5 text-sm",
-  md: "px-4 py-2 text-base",
-  lg: "px-6 py-3 text-lg"
-};
 
 // src/components/Icon/Icon.tsx
 import { jsx } from "react/jsx-runtime";
@@ -333,16 +333,6 @@ import {
   Text
 } from "react-aria-components";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var sizeClasses = {
-  sm: "px-3 py-1.5 text-sm",
-  md: "px-4 py-2 text-base",
-  lg: "px-4 py-3 text-lg"
-};
-var prefixSizeClasses = {
-  sm: "px-3 text-sm",
-  md: "px-3 text-base",
-  lg: "px-4 text-lg"
-};
 var alignClasses = {
   left: "text-left",
   center: "text-center",
@@ -438,7 +428,7 @@ function Input({
                     "bg-(--color-surface-subtle)",
                     "border-r border-r-(--color-border-default)",
                     "text-(--color-text-secondary)",
-                    prefixSizeClasses[size]
+                    sizeStyles[size]
                   ].join(" "),
                   children: prefix
                 }
@@ -449,7 +439,7 @@ function Input({
                   placeholder,
                   className: [
                     "w-full bg-transparent",
-                    sizeClasses[size],
+                    sizeStyles[size],
                     alignClasses[align],
                     "text-(--color-text-primary)",
                     "placeholder:text-(--color-text-tertiary)",
@@ -465,7 +455,7 @@ function Input({
             placeholder,
             className: [
               "w-full",
-              sizeClasses[size],
+              sizeStyles[size],
               alignClasses[align],
               radiusClass,
               "border",
@@ -519,6 +509,7 @@ function Select({
   items,
   placeholder = "Select an option",
   errorMessage,
+  size = "md",
   isDisabled,
   isRequired,
   className,
@@ -550,14 +541,17 @@ function Select({
           Button2,
           {
             className: twMerge2(
-              "inline-flex items-center justify-between",
-              "w-full rounded-md px-4 py-2",
-              "text-base text-left",
-              "border outline-none transition-colors",
-              hasError ? "border-(--color-border-danger)" : "border-(--color-border-default)",
-              "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2",
-              "cursor-pointer disabled:opacity-50 disabled:pointer-events-none",
-              "bg-(--color-surface-default)"
+              `
+            inline-flex items-center justify-between
+            w-full rounded-md
+            text-left
+            border outline-none transition-colors
+            focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2
+            cursor-pointer disabled:opacity-50 disabled:pointer-events-none
+            bg-(--color-surface-default)
+          `,
+              sizeStyles[size],
+              hasError ? "border-(--color-border-danger)" : "border-(--color-border-default)"
             ),
             children: [
               /* @__PURE__ */ jsx7(
@@ -578,7 +572,10 @@ function Select({
                 ChevronDown,
                 {
                   "aria-hidden": true,
-                  className: "h-4 w-4 shrink-0 text-(--color-text-secondary)"
+                  className: twMerge2(
+                    "shrink-0 text-(--color-text-secondary)",
+                    size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4"
+                  )
                 }
               )
             ]
@@ -604,13 +601,16 @@ function Select({
                 id: item.id,
                 textValue: item.name,
                 className: twMerge2(
-                  "flex items-center justify-between gap-2",
-                  "px-4 py-2 rounded-sm",
-                  "text-base text-(--color-text-primary)",
-                  "cursor-pointer outline-none",
-                  "hover:bg-(--color-surface-muted)",
-                  "focus-visible:bg-(--color-surface-muted)",
-                  "selected:text-(--color-action-primary) selected:font-medium"
+                  `
+                  flex items-center justify-between gap-2
+                  rounded-sm
+                  text-(--color-text-primary)
+                  cursor-pointer outline-none
+                  hover:bg-(--color-surface-muted)
+                  focus-visible:bg-(--color-surface-muted)
+                  selected:text-(--color-action-primary) selected:font-medium
+                `,
+                  sizeStyles[size]
                 ),
                 children: ({ isSelected }) => /* @__PURE__ */ jsxs5(Fragment, { children: [
                   /* @__PURE__ */ jsx7("span", { className: "truncate", children: renderItem ? renderItem(item) : item.name }),
@@ -2387,65 +2387,21 @@ function SegmentedControlItem({
 
 // src/components/FileCard/FileCard.tsx
 import { useCallback as useCallback3 } from "react";
-import {
-  File as File2,
-  FileSpreadsheet,
-  Folder as Folder2,
-  Image,
-  Info as Info2,
-  Microscope
-} from "lucide-react";
+import { File as File2, Info as Info2 } from "lucide-react";
 import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
-function getFileIcon(type, extension) {
-  if (type === "directory") return Folder2;
-  const ext = (extension ?? "").toLowerCase();
-  if (ext === "ome.tif" || ext === "ome.tiff") return Microscope;
-  if (/^(tiff?|png|jpe?g)$/.test(ext)) return Image;
-  if (/^(csv|parquet)$/.test(ext)) return FileSpreadsheet;
-  return File2;
-}
-function getTypeLabel(type, extension) {
-  if (type === "directory") return "Folder";
-  const ext = (extension ?? "").toLowerCase();
-  if (ext === "ome.tif" || ext === "ome.tiff") return "OME-TIFF";
-  if (/^tiff?$/.test(ext)) return "TIFF";
-  if (ext === "csv") return "CSV";
-  if (ext === "parquet") return "Parquet";
-  if (ext === "png") return "PNG";
-  if (/^jpe?g$/.test(ext)) return "JPEG";
-  return ext.toUpperCase() || "File";
-}
-function FileIcon({
-  type,
-  extension,
-  size = 16
-}) {
-  const IconComponent = getFileIcon(type, extension);
-  return /* @__PURE__ */ jsx37(
-    IconComponent,
-    {
-      size,
-      className: "shrink-0 text-(--color-text-secondary)"
-    }
-  );
-}
 function FileCard({
   name,
-  type,
+  icon: IconComponent = File2,
   size,
-  extension,
   compact = false,
   children,
   onInfo,
-  href,
   onPress,
   className
 }) {
-  const isInteractive = !!href || !!onPress;
+  const isInteractive = !!onPress;
   const radius = compact ? "rounded-md" : "rounded-lg";
-  const IconComponent = getFileIcon(type, extension);
   const iconSize = compact ? 24 : 32;
-  const iconColor = type === "directory" ? "text-(--color-text-tertiary)" : "text-(--color-text-secondary)";
   const thumbnailClass = compact ? "aspect-square rounded-t-(--border-radius-md)" : "aspect-[4/3] rounded-t-(--border-radius-lg)";
   const handleInfoClick = useCallback3(
     (e) => {
@@ -2471,7 +2427,7 @@ function FileCard({
       "div",
       {
         className: `shrink-0 overflow-hidden bg-neutral-900 ${thumbnailClass}`,
-        children: children ? /* @__PURE__ */ jsx37("div", { className: "h-full w-full overflow-hidden", children }) : /* @__PURE__ */ jsx37("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx37(IconComponent, { size: iconSize, className: iconColor }) })
+        children: children ? /* @__PURE__ */ jsx37("div", { className: "h-full w-full overflow-hidden", children }) : /* @__PURE__ */ jsx37("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx37(IconComponent, { size: iconSize, className: "text-(--color-text-secondary)" }) })
       }
     ),
     /* @__PURE__ */ jsx37(
@@ -2484,7 +2440,13 @@ function FileCard({
         ].join(" "),
         children: compact ? /* @__PURE__ */ jsx37("span", { className: "text-xs font-medium text-(--color-text-primary) truncate", children: name }) : /* @__PURE__ */ jsxs23(Fragment9, { children: [
           /* @__PURE__ */ jsxs23("span", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx37(FileIcon, { type, extension, size: 16 }),
+            /* @__PURE__ */ jsx37(
+              IconComponent,
+              {
+                size: 16,
+                className: "shrink-0 text-(--color-text-secondary)"
+              }
+            ),
             /* @__PURE__ */ jsx37("span", { className: "min-w-0 flex-1 text-sm font-medium text-(--color-text-primary) truncate", children: name }),
             onInfo && /* @__PURE__ */ jsx37(
               "span",
@@ -2525,17 +2487,6 @@ function FileCard({
     isInteractive && "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
     className
   ].filter(Boolean).join(" ");
-  if (href) {
-    return /* @__PURE__ */ jsx37(
-      "a",
-      {
-        href,
-        "aria-label": name,
-        className: [baseStyles, "no-underline"].join(" "),
-        children: cardContent
-      }
-    );
-  }
   if (onPress) {
     return /* @__PURE__ */ jsx37(
       "div",
@@ -3778,7 +3729,6 @@ export {
   Field,
   Fieldset,
   FileCard,
-  FileIcon,
   FontSize2xl,
   FontSize3xl,
   FontSize4xl,
@@ -3864,8 +3814,6 @@ export {
   TabPanel2 as UnstyledTabPanel,
   Tabs2 as UnstyledTabs,
   createToastBridge,
-  getFileIcon,
-  getTypeLabel,
   pillColorFromName,
   useFormWizard,
   useInputGroup,