@cytario/design 2.3.0 → 2.4.0

package/README.md

@@ -18,14 +18,13 @@ Single source of truth for the cytario corporate identity -- from brand foundati
 ### Prerequisites
 
 - Node.js 22+
-- pnpm 10+ (`corepack enable` to activate the bundled version)
 
 ### Install and run
 
 ```bash
-pnpm install
-pnpm build:tokens   # generate CSS variables + TypeScript constants from token JSON
-pnpm dev             # start Storybook at http://localhost:6006
+npm install
+npm run build:tokens   # generate CSS variables + TypeScript constants from token JSON
+npm run dev            # start Storybook at http://localhost:6006
 ```
 
 ## Project structure
@@ -75,7 +74,7 @@ Semantic tokens reference base tokens using `{color.purple.700}` syntax.
 ### Adding or modifying tokens
 
 1. Edit `tokens/base.json` (primitives) or `tokens/semantic.json` (aliases).
-2. Run `pnpm build:tokens` to regenerate the output files.
+2. Run `npm run build:tokens` to regenerate the output files.
 3. If you added a new color scale, also add matching entries to `src/styles/tailwind.css` under the `@theme` block so Tailwind utility classes are available.
 
 **Do not edit `src/tokens/variables.css` or `src/tokens/tokens.ts` directly** -- they are overwritten on every build.
@@ -129,12 +128,12 @@ Both colors have a full 50--900 scale defined in `tokens/base.json` for use in h
 
 | Command | Description |
 |---|---|
-| `pnpm dev` | Start Storybook dev server on port 6006 |
-| `pnpm build` | Build static Storybook site to `storybook-static/` |
-| `pnpm build:tokens` | Generate CSS and TypeScript from token JSON |
-| `pnpm test` | Run Vitest test suite (watch mode) |
-| `pnpm test -- --run` | Run tests once (CI mode) |
-| `pnpm lint` | Lint `src/` with ESLint |
+| `npm run dev` | Start Storybook dev server on port 6006 |
+| `npm run build` | Build static Storybook site to `storybook-static/` |
+| `npm run build:tokens` | Generate CSS and TypeScript from token JSON |
+| `npm test` | Run Vitest test suite (watch mode) |
+| `npx vitest run` | Run tests once (CI mode) |
+| `npm run lint` | Lint `src/` with ESLint |
 
 ## License
 

package/dist/index.d.ts

@@ -109,18 +109,15 @@ interface SelectItem {
     name: string;
 }
 interface SelectProps extends Omit<SelectProps$1<SelectItem>, "children"> {
-    /** Label displayed above the trigger (always visible) */
-    label: string;
-    /** Options to display in the dropdown */
     items: SelectItem[];
-    /** Placeholder text when no item is selected */
+    label?: string;
     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;
+    /** 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, hideLabel, isDisabled, isRequired, className, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+declare function Select({ label, items, placeholder, errorMessage, isDisabled, isRequired, className, renderItem, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
 
 type TableSize = "compact" | "comfortable";
 interface DataTableProps extends TableProps {
@@ -620,30 +617,19 @@ interface FileCardProps {
 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;
-    /** Cloud provider identifier (e.g., "aws", "minio", "azure", "gcp"). When omitted, the provider badge and region are hidden. */
-    provider?: string;
-    /** AWS region or equivalent (only rendered when provider is set) */
-    region?: string;
-    /** Connection health status. When omitted, the status dot is hidden and the preview area behaves as "connected". */
     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) */
+    /** Metadata row below the name (e.g. provider pill, scope pill, region text) */
+    meta?: React__default.ReactNode;
     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 */
+    /** Slot for action controls (e.g. a dropdown menu) rendered in the card header */
+    actions?: React__default.ReactNode;
     className?: string;
 }
-declare function StorageConnectionCard({ name, provider, region, status, errorMessage, imageCount, children, href, onPress, onInfo, className, }: StorageConnectionCardProps): react_jsx_runtime.JSX.Element;
+declare function StorageConnectionCard({ name, status, errorMessage, meta, children, href, onPress, actions, className, }: StorageConnectionCardProps): react_jsx_runtime.JSX.Element;
 
 type BadgeVariant = "neutral" | "purple" | "teal" | "rose" | "slate" | "green" | "amber";
 type BadgeSize = "sm" | "md";
@@ -779,66 +765,30 @@ interface SectionHeaderProps {
  */
 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;
+declare const colorStyles: {
+    readonly slate: "bg-(--color-badge-slate-bg) text-(--color-badge-slate-text) border-(--color-badge-slate-text)/20";
+    readonly purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text) border-(--color-badge-purple-text)/20";
+    readonly teal: "bg-(--color-badge-teal-bg) text-(--color-badge-teal-text) border-(--color-badge-teal-text)/20";
+    readonly rose: "bg-(--color-badge-rose-bg) text-(--color-badge-rose-text) border-(--color-badge-rose-text)/20";
+    readonly green: "bg-(--color-badge-green-bg) text-(--color-badge-green-text) border-(--color-badge-green-text)/20";
+    readonly amber: "bg-(--color-badge-amber-bg) text-(--color-badge-amber-text) border-(--color-badge-amber-text)/20";
+};
+type PillColor = keyof typeof colorStyles;
+interface PillProps extends Omit<React__default.HTMLAttributes<HTMLSpanElement>, "children" | "color"> {
+    children?: string;
+    color?: PillColor;
+}
+declare function pillColorFromName(name?: string): PillColor;
+/** Non-interactive hash-colored label badge. Color is derived from the text unless explicitly set. */
+declare function Pill({ children, color, className, ...rest }: 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
-     */
+interface PathPillProps {
+    children: string;
     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;
+/** Renders a slash-separated path as overlapping, hash-colored pill segments. */
+declare function PathPill({ children, visibleCount, className, }: PathPillProps): react_jsx_runtime.JSX.Element | null;
 
 interface FormWizardContextValue {
     /** Zero-based index of the currently active step */
@@ -1043,7 +993,7 @@ declare const ColorBannerSuccessIcon = "#22c55e";
 declare const ColorBadgePurpleBg = "#ead9f5";
 declare const ColorBadgePurpleText = "#5c2483";
 declare const ColorBadgeTealBg = "#d0f0f0";
-declare const ColorBadgeTealText = "#217d7e";
+declare const ColorBadgeTealText = "#1a6364";
 declare const ColorBadgeSlateBg = "#f1f5f9";
 declare const ColorBadgeSlateText = "#334155";
 declare const ColorBadgeRoseBg = "#ffe4e6";
@@ -1053,7 +1003,7 @@ declare const ColorBadgeNeutralText = "#374151";
 declare const ColorBadgeGreenBg = "#dcfce7";
 declare const ColorBadgeGreenText = "#15803d";
 declare const ColorBadgeAmberBg = "#fef3c7";
-declare const ColorBadgeAmberText = "#b45309";
+declare const ColorBadgeAmberText = "#92400e";
 declare const Spacing1 = "4px";
 declare const Spacing2 = "8px";
 declare const Spacing3 = "12px";
@@ -1087,4 +1037,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, 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, MenuCheckboxItem, type MenuCheckboxItemProps, 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, 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, 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 };