@cytario/design 1.14.0 → 1.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -117,8 +117,10 @@ interface SelectProps extends Omit<SelectProps$1<SelectItem>, "children"> {
117
117
  placeholder?: string;
118
118
  /** Error message displayed below the trigger */
119
119
  errorMessage?: string;
120
+ /** When true, visually hides the label (remains accessible to screen readers). Useful when Select is used inside a Field that already renders a visible label. */
121
+ hideLabel?: boolean;
120
122
  }
121
- declare function Select({ label, items, placeholder, errorMessage, isDisabled, isRequired, className, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
123
+ declare function Select({ label, items, placeholder, errorMessage, hideLabel, isDisabled, isRequired, className, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
122
124
 
123
125
  type TableSize = "compact" | "comfortable";
124
126
  interface DataTableProps extends TableProps {
@@ -357,16 +359,62 @@ interface MenuItemData {
357
359
  target?: string;
358
360
  isDisabled?: boolean;
359
361
  isDanger?: boolean;
362
+ /** Optional end content rendered after the label (e.g. badge, shortcut hint) */
363
+ endContent?: React__default.ReactNode;
360
364
  }
361
365
  interface MenuProps {
362
- /** Items to render in the menu */
363
- items: MenuItemData[];
366
+ /** Items for simple flat menus (backward compat). Mutually exclusive with content. */
367
+ items?: MenuItemData[];
368
+ /** Menu content for composition mode — MenuSection, MenuItem, MenuSeparator */
369
+ content?: React__default.ReactNode;
364
370
  /** Trigger element (typically a Button or IconButton) */
365
371
  children: React__default.ReactNode;
372
+ /** Called when any MenuItem is activated (receives the item key) */
373
+ onAction?: (key: string) => void;
366
374
  /** Additional CSS classes for the menu popover */
367
375
  className?: string;
368
376
  }
369
- declare function Menu({ items, children, className }: MenuProps): react_jsx_runtime.JSX.Element;
377
+ declare function Menu({ items, content, children, onAction, className }: MenuProps): react_jsx_runtime.JSX.Element;
378
+
379
+ interface MenuItemProps {
380
+ id: string;
381
+ /** Item label */
382
+ children: React__default.ReactNode;
383
+ icon?: LucideIcon;
384
+ /** End-slot content: badges, shortcuts, chevrons */
385
+ endContent?: React__default.ReactNode;
386
+ onAction?: () => void;
387
+ href?: string;
388
+ target?: string;
389
+ isDisabled?: boolean;
390
+ isDanger?: boolean;
391
+ /** Accessible text override for complex children */
392
+ textValue?: string;
393
+ className?: string;
394
+ }
395
+ declare function MenuItem({ id, children, icon, endContent, onAction, href, target, isDisabled, isDanger, textValue, className, }: MenuItemProps): react_jsx_runtime.JSX.Element;
396
+
397
+ interface MenuSectionProps {
398
+ /** Optional section header — string renders as styled text, ReactNode for custom */
399
+ header?: React__default.ReactNode;
400
+ /** MenuItems within this section */
401
+ children: React__default.ReactNode;
402
+ /** Accessible label for the section group (useful when header is absent or non-textual) */
403
+ "aria-label"?: string;
404
+ className?: string;
405
+ }
406
+ declare function MenuSection({ header, children, "aria-label": ariaLabel, className, }: MenuSectionProps): react_jsx_runtime.JSX.Element;
407
+
408
+ interface MenuHeaderProps {
409
+ children: React__default.ReactNode;
410
+ className?: string;
411
+ }
412
+ declare function MenuHeader({ children, className }: MenuHeaderProps): react_jsx_runtime.JSX.Element;
413
+
414
+ interface MenuSeparatorProps {
415
+ className?: string;
416
+ }
417
+ declare function MenuSeparator({ className }: MenuSeparatorProps): react_jsx_runtime.JSX.Element;
370
418
 
371
419
  interface PopoverProps {
372
420
  /** Controls open state (uncontrolled by default via DialogTrigger) */
@@ -494,6 +542,41 @@ interface SegmentedControlItemProps extends Omit<ToggleButtonProps$1, "className
494
542
  }
495
543
  declare function SegmentedControlItem({ className, ...props }: SegmentedControlItemProps): react_jsx_runtime.JSX.Element;
496
544
 
545
+ declare function getFileIcon(type: "directory" | "file", extension?: string): LucideIcon;
546
+ declare function getTypeLabel(type: "directory" | "file", extension?: string): string;
547
+ declare function FileIcon({ type, extension, size, }: {
548
+ type: "directory" | "file";
549
+ extension?: string;
550
+ size?: number;
551
+ }): react_jsx_runtime.JSX.Element;
552
+ interface FileCardProps {
553
+ /** File or folder name */
554
+ name: string;
555
+ /** Whether this is a directory or file */
556
+ type: "directory" | "file";
557
+ /** Human-readable file size (e.g., "12.3 GB") */
558
+ size?: string;
559
+ /** Last modified date/time */
560
+ modified?: string;
561
+ /** File extension (e.g., "ome.tif", "csv") */
562
+ extension?: string;
563
+ /** Whether a thumbnail preview is available */
564
+ hasPreview?: boolean;
565
+ /** Compact mode (smaller card, square aspect, minimal metadata) */
566
+ compact?: boolean;
567
+ /** Custom thumbnail content (e.g., an image preview) */
568
+ children?: React__default.ReactNode;
569
+ /** Info button handler */
570
+ onInfo?: () => void;
571
+ /** Navigation target — clicking the card navigates here */
572
+ href?: string;
573
+ /** Handler for click/press interaction (use instead of href for programmatic navigation) */
574
+ onPress?: () => void;
575
+ /** Additional CSS classes */
576
+ className?: string;
577
+ }
578
+ declare function FileCard({ name, type, size, extension, compact, children, onInfo, href, onPress, className, }: FileCardProps): react_jsx_runtime.JSX.Element;
579
+
497
580
  interface StorageConnectionCardProps {
498
581
  /** Display name for the connection */
499
582
  name: string;
@@ -511,12 +594,14 @@ interface StorageConnectionCardProps {
511
594
  children?: React__default.ReactNode;
512
595
  /** Navigation target — clicking the card navigates here */
513
596
  href?: string;
597
+ /** Handler for click/press interaction (use instead of href for programmatic navigation) */
598
+ onPress?: () => void;
514
599
  /** Info button handler */
515
600
  onInfo?: () => void;
516
601
  /** Additional CSS classes */
517
602
  className?: string;
518
603
  }
519
- declare function StorageConnectionCard({ name, provider, region, status, errorMessage, imageCount, children, href, onInfo, className, }: StorageConnectionCardProps): react_jsx_runtime.JSX.Element;
604
+ declare function StorageConnectionCard({ name, provider, region, status, errorMessage, imageCount, children, href, onPress, onInfo, className, }: StorageConnectionCardProps): react_jsx_runtime.JSX.Element;
520
605
 
521
606
  type BadgeVariant = "neutral" | "purple" | "teal" | "rose" | "slate" | "green" | "amber";
522
607
  type BadgeSize = "sm" | "md";
@@ -546,12 +631,14 @@ interface CardProps {
546
631
  padding?: CardPadding;
547
632
  /** Makes the card a clickable link */
548
633
  href?: string;
634
+ /** Handler for click/press interaction (use instead of href for programmatic navigation) */
635
+ onPress?: () => void;
549
636
  /** Enables hover elevation even without href */
550
637
  interactive?: boolean;
551
638
  /** Merge override */
552
639
  className?: string;
553
640
  }
554
- declare function Card({ children, header, footer, padding, href, interactive, className, }: CardProps): react_jsx_runtime.JSX.Element;
641
+ declare function Card({ children, header, footer, padding, href, onPress, interactive, className, }: CardProps): react_jsx_runtime.JSX.Element;
555
642
 
556
643
  type DeltaFormat = "currency" | "percentage" | "combined";
557
644
  type DeltaMode = "inline" | "pill";
@@ -958,4 +1045,4 @@ declare const LineHeightTight = 1.25;
958
1045
  declare const LineHeightNormal = 1.5;
959
1046
  declare const LineHeightRelaxed = 1.625;
960
1047
 
961
- 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, 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, GroupPill, type GroupPillProps, 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, MetricCard, type MetricCardProps, type MetricCardSize, 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, ToastProvider, type ToastVariant, ToggleButton, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonVariant, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, createToastBridge, pillColorFromName, useFormWizard, useInputGroup, useToast };
1048
+ 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, GroupPill, type GroupPillProps, 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, MenuHeader, type MenuHeaderProps, MenuItem, type MenuItemData, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MetricCard, type MetricCardProps, type MetricCardSize, 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, ToastProvider, type ToastVariant, ToggleButton, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonVariant, Tooltip, type TooltipProps, Tree, type TreeNode, type TreeProps, createToastBridge, getFileIcon, getTypeLabel, pillColorFromName, useFormWizard, useInputGroup, useToast };