@cytario/design 1.13.1 → 1.15.0

package/dist/index.d.ts

@@ -117,8 +117,10 @@ interface SelectProps extends Omit<SelectProps$1<SelectItem>, "children"> {
     placeholder?: string;
     /** Error message displayed below the trigger */
     errorMessage?: string;
+    /** 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. */
+    hideLabel?: boolean;
 }
-declare function Select({ label, items, placeholder, errorMessage, isDisabled, isRequired, className, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+declare function Select({ label, items, placeholder, errorMessage, hideLabel, isDisabled, isRequired, className, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
 
 type TableSize = "compact" | "comfortable";
 interface DataTableProps extends TableProps {
@@ -494,6 +496,41 @@ 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";
+    /** 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) */
+    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;
+
 interface StorageConnectionCardProps {
     /** Display name for the connection */
     name: string;
@@ -511,12 +548,14 @@ interface StorageConnectionCardProps {
     children?: React__default.ReactNode;
     /** Navigation target — clicking the card navigates here */
     href?: string;
+    /** Handler for click/press interaction (use instead of href for programmatic navigation) */
+    onPress?: () => void;
     /** 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;
+declare function StorageConnectionCard({ name, provider, region, status, errorMessage, imageCount, children, href, onPress, onInfo, className, }: StorageConnectionCardProps): react_jsx_runtime.JSX.Element;
 
 type BadgeVariant = "neutral" | "purple" | "teal" | "rose" | "slate" | "green" | "amber";
 type BadgeSize = "sm" | "md";
@@ -546,12 +585,14 @@ interface CardProps {
     padding?: CardPadding;
     /** Makes the card a clickable link */
     href?: string;
+    /** Handler for click/press interaction (use instead of href for programmatic navigation) */
+    onPress?: () => void;
     /** Enables hover elevation even without href */
     interactive?: boolean;
     /** Merge override */
     className?: string;
 }
-declare function Card({ children, header, footer, padding, href, interactive, className, }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ children, header, footer, padding, href, onPress, interactive, className, }: CardProps): react_jsx_runtime.JSX.Element;
 
 type DeltaFormat = "currency" | "percentage" | "combined";
 type DeltaMode = "inline" | "pill";
@@ -633,6 +674,125 @@ interface MetricCardProps {
 }
 declare function MetricCard({ label, value, secondary, href, size, className, }: MetricCardProps): react_jsx_runtime.JSX.Element;
 
+interface SectionHeaderProps {
+    /** Section title rendered as an H2 heading */
+    title: string;
+    /** Optional action elements (buttons, badges, etc.) rendered on the right */
+    children?: React__default.ReactNode;
+    /** Additional CSS classes applied to the outer container */
+    className?: string;
+}
+/**
+ * Section header with a title on the left and optional action slots on the right.
+ *
+ * Mirrors the `SectionHeader` pattern from cytario-web's `Container.tsx`.
+ * The title renders as an `<H2>` heading; any `children` are placed in a
+ * flex container that aligns to the trailing edge.
+ */
+declare function SectionHeader({ title, children, className, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Available pill color variants, mapped to existing badge design tokens.
+ *
+ * The seven base variants correspond 1:1 to the `--color-badge-*` token set
+ * defined in `tokens/semantic.json`.
+ */
+type PillColor = "neutral" | "purple" | "teal" | "rose" | "slate" | "green" | "amber";
+interface PillProps {
+    /** Pill label content */
+    children: React__default.ReactNode;
+    /**
+     * Explicit color variant, or `"auto"` to derive from `name` via
+     * deterministic hash. Defaults to `"auto"` when `name` is provided,
+     * `"neutral"` otherwise.
+     */
+    color?: PillColor | "auto";
+    /**
+     * String used for deterministic hash-based color assignment.
+     * When provided and `color` is `"auto"` (or omitted), the pill color
+     * is derived from this value so the same name always produces the same
+     * color across renders and sessions.
+     */
+    name?: string;
+    /** Additional CSS class names merged via tailwind-merge */
+    className?: string;
+}
+/**
+ * Deterministic string-to-color hash, matching the algorithm used in
+ * cytario-web's `Pill.tsx`.
+ */
+declare function pillColorFromName(name: string): PillColor;
+/**
+ * Pill -- a small, rounded label used for tags, user groups, and status
+ * indicators. Supports deterministic hash-based coloring so the same
+ * `name` always renders the same color.
+ */
+declare function Pill({ children, color, name, className }: PillProps): react_jsx_runtime.JSX.Element;
+
+interface GroupPillProps {
+    /**
+     * Slash-separated group path, e.g. `"/org/team/admins"`.
+     * Leading slash is optional and stripped before splitting.
+     */
+    path: string;
+    /**
+     * Maximum number of path segments to display as full pills.
+     * Extra leading segments are collapsed into small colored dots.
+     * @default 3
+     */
+    visibleCount?: number;
+    /** Additional CSS class names merged via tailwind-merge */
+    className?: string;
+}
+/**
+ * GroupPill -- displays a hierarchical group path as a row of
+ * deterministically-colored pills. When the path has more segments
+ * than `visibleCount`, the leading overflow segments are shown as
+ * small colored dots to preserve context without consuming space.
+ */
+declare function GroupPill({ path, visibleCount, className, }: GroupPillProps): react_jsx_runtime.JSX.Element | null;
+
+interface FormWizardContextValue {
+    /** Zero-based index of the currently active step */
+    currentStep: number;
+    /** Total number of steps in the wizard */
+    totalSteps: number;
+    /** Whether the user can navigate backwards */
+    canGoBack: boolean;
+    /** Navigate to the previous step */
+    goBack: () => void;
+    /** Whether the current step is the last step */
+    isLastStep: boolean;
+}
+declare function useFormWizard(): FormWizardContextValue;
+interface FormWizardProps {
+    /** Zero-based index of the currently active step */
+    currentStep: number;
+    /** Total number of steps in the wizard */
+    totalSteps: number;
+    /** Callback invoked when the step should change */
+    onStepChange: (step: number) => void;
+    /** Wizard content (step panels, progress indicator, navigation) */
+    children: React__default.ReactNode;
+}
+declare function FormWizard({ currentStep, totalSteps, onStepChange, children, }: FormWizardProps): react_jsx_runtime.JSX.Element;
+
+interface FormWizardProgressProps {
+    /** Labels for each step, displayed below the step circles */
+    labels: string[];
+}
+declare function FormWizardProgress({ labels }: FormWizardProgressProps): react_jsx_runtime.JSX.Element;
+
+interface FormWizardNavProps {
+    /** Callback invoked when the user presses Next or Submit */
+    onNext: () => void;
+    /** Whether the form is currently submitting (shows loading state on the submit button) */
+    isSubmitting?: boolean;
+    /** Label for the submit button on the last step (defaults to "Submit") */
+    submitLabel?: string;
+}
+declare function FormWizardNav({ onNext, isSubmitting, submitLabel, }: FormWizardNavProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -839,4 +999,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, 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, MetricCard, type MetricCardProps, type MetricCardSize, 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, 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 };
+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, 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, getFileIcon, getTypeLabel, pillColorFromName, useFormWizard, useInputGroup, useToast };