@cytario/design 1.13.0 → 1.14.0

package/dist/index.d.ts

@@ -619,7 +619,7 @@ declare function Banner({ children, variant, title, icon, dismissible, onDismiss
 type MetricCardSize = "sm" | "md";
 interface MetricCardProps {
     /** Metric label (e.g., "Total Spend") */
-    label: string;
+    label: React__default.ReactNode;
     /** Primary value (formatted string or component) */
     value: React__default.ReactNode;
     /** Secondary content rendered below the value */
@@ -633,6 +633,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 +958,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, 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 };