@cytario/design 1.12.0 → 1.13.0

package/dist/index.d.ts

@@ -518,6 +518,121 @@ interface StorageConnectionCardProps {
 }
 declare function StorageConnectionCard({ name, provider, region, status, errorMessage, imageCount, children, href, onInfo, className, }: StorageConnectionCardProps): react_jsx_runtime.JSX.Element;
 
+type BadgeVariant = "neutral" | "purple" | "teal" | "rose" | "slate" | "green" | "amber";
+type BadgeSize = "sm" | "md";
+interface BadgeProps {
+    /** Badge text content */
+    children: React__default.ReactNode;
+    /** Color variant */
+    variant?: BadgeVariant;
+    /** Size preset */
+    size?: BadgeSize;
+    /** Optional leading icon */
+    icon?: LucideIcon;
+    /** Merge override */
+    className?: string;
+}
+declare function Badge({ children, variant, size, icon: IconComponent, className, }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+type CardPadding = "none" | "sm" | "md" | "lg";
+interface CardProps {
+    /** Card body content */
+    children: React__default.ReactNode;
+    /** Optional header content */
+    header?: React__default.ReactNode;
+    /** Optional footer content (rendered with top border separator) */
+    footer?: React__default.ReactNode;
+    /** Body padding preset */
+    padding?: CardPadding;
+    /** Makes the card a clickable link */
+    href?: string;
+    /** 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;
+
+type DeltaFormat = "currency" | "percentage" | "combined";
+type DeltaMode = "inline" | "pill";
+interface DeltaIndicatorProps {
+    /** Current period value */
+    current: number;
+    /** Comparison period value */
+    previous: number;
+    /** Display format */
+    format?: DeltaFormat;
+    /** Display mode: inline (no background) or pill (tinted background) */
+    mode?: DeltaMode;
+    /** Optional prefix label (e.g., "MoM", "YoY") */
+    label?: string;
+    /** When true, increase = green, decrease = red (for metrics where higher is better) */
+    reverseColor?: boolean;
+    /** Renders "N/A" in muted text */
+    unavailable?: boolean;
+    /** Custom unavailable text */
+    unavailableText?: string;
+    /** Merge override */
+    className?: string;
+}
+declare function DeltaIndicator({ current, previous, format, mode, label, reverseColor, unavailable, unavailableText, className, }: DeltaIndicatorProps): react_jsx_runtime.JSX.Element;
+
+type ProgressBarVariant = "brand" | "success" | "warning" | "danger" | "neutral";
+type ProgressBarSize = "sm" | "md" | "lg";
+interface ProgressBarProps {
+    /** Percentage value (0-100) */
+    value: number;
+    /** Label text above the bar */
+    label?: string;
+    /** Description text (right-aligned, above bar) */
+    description?: string;
+    /** Fill color variant */
+    variant?: ProgressBarVariant;
+    /** Bar height */
+    size?: ProgressBarSize;
+    /** Show percentage text */
+    showValue?: boolean;
+    /** Merge override */
+    className?: string;
+}
+declare function ProgressBar({ value, label, description, variant, size, showValue, className, }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+
+type BannerVariant = "info" | "warning" | "danger" | "success";
+interface BannerProps {
+    /** Banner content */
+    children: ReactNode;
+    /** Visual variant */
+    variant?: BannerVariant;
+    /** Bold lead text */
+    title?: string;
+    /** Leading icon (auto-selected per variant if not set) */
+    icon?: LucideIcon;
+    /** Shows dismiss button */
+    dismissible?: boolean;
+    /** Dismiss callback */
+    onDismiss?: () => void;
+    /** Merge override */
+    className?: string;
+}
+declare function Banner({ children, variant, title, icon, dismissible, onDismiss, className, }: BannerProps): react_jsx_runtime.JSX.Element | null;
+
+type MetricCardSize = "sm" | "md";
+interface MetricCardProps {
+    /** Metric label (e.g., "Total Spend") */
+    label: string;
+    /** Primary value (formatted string or component) */
+    value: React__default.ReactNode;
+    /** Secondary content rendered below the value */
+    secondary?: React__default.ReactNode;
+    /** Makes the entire card a clickable link */
+    href?: string;
+    /** Size preset */
+    size?: MetricCardSize;
+    /** Merge override */
+    className?: string;
+}
+declare function MetricCard({ label, value, secondary, href, size, className, }: MetricCardProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -571,6 +686,16 @@ declare const ColorSlate600 = "#475569";
 declare const ColorSlate700 = "#334155";
 declare const ColorSlate800 = "#1e293b";
 declare const ColorSlate900 = "#0f172a";
+declare const ColorAmber50 = "#fffbeb";
+declare const ColorAmber100 = "#fef3c7";
+declare const ColorAmber200 = "#fde68a";
+declare const ColorAmber300 = "#fcd34d";
+declare const ColorAmber400 = "#fbbf24";
+declare const ColorAmber500 = "#f59e0b";
+declare const ColorAmber600 = "#d97706";
+declare const ColorAmber700 = "#b45309";
+declare const ColorAmber800 = "#92400e";
+declare const ColorAmber900 = "#78350f";
 declare const ColorNeutral0 = "#ffffff";
 declare const ColorNeutral50 = "#f9fafb";
 declare const ColorNeutral100 = "#f3f4f6";
@@ -636,6 +761,37 @@ declare const ColorOverlayBackdrop = "#00000066";
 declare const ColorStatusSuccess = "#22c55e";
 declare const ColorStatusDanger = "#f43f5e";
 declare const ColorStatusWarning = "#d97706";
+declare const ColorStatusInfo = "#64748b";
+declare const ColorDeltaIncreaseBg = "#fff1f2";
+declare const ColorDeltaIncreaseText = "#be123c";
+declare const ColorDeltaIncreaseIcon = "#f43f5e";
+declare const ColorDeltaDecreaseBg = "#f0fdf4";
+declare const ColorDeltaDecreaseText = "#15803d";
+declare const ColorDeltaDecreaseIcon = "#22c55e";
+declare const ColorDeltaFlatBg = "#f3f4f6";
+declare const ColorDeltaFlatText = "#6b7280";
+declare const ColorDeltaFlatIcon = "#9ca3af";
+declare const ColorProgressTrack = "#e5e7eb";
+declare const ColorProgressFill = "#6b2695";
+declare const ColorProgressFillSuccess = "#22c55e";
+declare const ColorProgressFillWarning = "#f59e0b";
+declare const ColorProgressFillDanger = "#f43f5e";
+declare const ColorBannerInfoBg = "#f8fafc";
+declare const ColorBannerInfoText = "#334155";
+declare const ColorBannerInfoBorder = "#e2e8f0";
+declare const ColorBannerInfoIcon = "#64748b";
+declare const ColorBannerWarningBg = "#fffbeb";
+declare const ColorBannerWarningText = "#92400e";
+declare const ColorBannerWarningBorder = "#fde68a";
+declare const ColorBannerWarningIcon = "#f59e0b";
+declare const ColorBannerDangerBg = "#fff1f2";
+declare const ColorBannerDangerText = "#be123c";
+declare const ColorBannerDangerBorder = "#fecdd3";
+declare const ColorBannerDangerIcon = "#f43f5e";
+declare const ColorBannerSuccessBg = "#f0fdf4";
+declare const ColorBannerSuccessText = "#15803d";
+declare const ColorBannerSuccessBorder = "#bbf7d0";
+declare const ColorBannerSuccessIcon = "#22c55e";
 declare const ColorBadgePurpleBg = "#ead9f5";
 declare const ColorBadgePurpleText = "#5c2483";
 declare const ColorBadgeTealBg = "#d0f0f0";
@@ -646,6 +802,10 @@ declare const ColorBadgeRoseBg = "#ffe4e6";
 declare const ColorBadgeRoseText = "#be123c";
 declare const ColorBadgeNeutralBg = "#f3f4f6";
 declare const ColorBadgeNeutralText = "#374151";
+declare const ColorBadgeGreenBg = "#dcfce7";
+declare const ColorBadgeGreenText = "#15803d";
+declare const ColorBadgeAmberBg = "#fef3c7";
+declare const ColorBadgeAmberText = "#b45309";
 declare const Spacing1 = "4px";
 declare const Spacing2 = "8px";
 declare const Spacing3 = "12px";
@@ -679,4 +839,4 @@ declare const LineHeightTight = 1.25;
 declare const LineHeightNormal = 1.5;
 declare const LineHeightRelaxed = 1.625;
 
-export { BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Cell, Checkbox, type CheckboxProps, ColorActionDanger, ColorActionDangerHover, ColorActionDefault, ColorActionDefaultHover, ColorActionInfo, ColorActionInfoHover, ColorActionPrimary, ColorActionPrimaryActive, ColorActionPrimaryHover, ColorActionSecondary, ColorActionSecondaryHover, ColorActionSuccess, ColorActionSuccessHover, ColorBadgeNeutralBg, ColorBadgeNeutralText, ColorBadgePurpleBg, ColorBadgePurpleText, ColorBadgeRoseBg, ColorBadgeRoseText, ColorBadgeSlateBg, ColorBadgeSlateText, ColorBadgeTealBg, ColorBadgeTealText, ColorBorderAccent, ColorBorderBrand, ColorBorderDanger, ColorBorderDefault, ColorBorderFocus, ColorBorderInfo, ColorBorderStrong, ColorBorderSuccess, ColorBorderWarning, ColorBrandAccent, ColorBrandPrimary, ColorGreen100, ColorGreen200, ColorGreen300, ColorGreen400, ColorGreen50, ColorGreen500, ColorGreen600, ColorGreen700, ColorGreen800, ColorGreen900, ColorNeutral0, ColorNeutral100, ColorNeutral1000, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorNeutral950, ColorOverlayBackdrop, 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, 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, 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, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, 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, 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 };