@cytario/design 2.4.0 → 3.0.0

package/dist/index.d.ts

@@ -581,40 +581,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 +1022,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, 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

@@ -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,