@cytario/design 8.0.0 → 9.0.0

package/dist/index.d.ts

@@ -2,17 +2,24 @@ import { ButtonProps as ButtonProps$1, LinkProps as LinkProps$1, ToggleButtonPro
 export { Key, RouterConfig, RouterProvider, Tab as UnstyledTab, TabList as UnstyledTabList, TabPanel as UnstyledTabPanel, Tabs as UnstyledTabs } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ComponentType, ReactNode, Ref, InputHTMLAttributes } from 'react';
+import React__default, { ComponentType, HTMLAttributes, ReactNode, Ref, InputHTMLAttributes } from 'react';
 import { LucideIcon, LucideProps } from 'lucide-react';
 
-declare const ColorTeal500 = "#35b7b8";
-declare const ColorPurple700 = "#5c2483";
+type LogoProps = {
+    /** Override the wordmark fill (defaults to theme-driven --logo-fill) */
+    color?: string;
+    /** Override the accent fill on the "o" (defaults to theme-driven --logo-highlight) */
+    highlightColor?: string;
+    scale?: number;
+    className?: string;
+};
+declare function Logo({ color, highlightColor, scale, className, }: LogoProps): react_jsx_runtime.JSX.Element;
 
 type ButtonSize = "xs" | "sm" | "md" | "lg";
 type ButtonVariant = "primary" | "secondary" | "destructive" | "success" | "warning" | "info" | "neutral" | "outline" | "ghost";
 
 /** Union of every registered icon name. */
-type IconName = "AlertCircle" | "AlertTriangle" | "AlignCenter" | "AlignLeft" | "AlignRight" | "Archive" | "ArrowDown" | "ArrowRight" | "ArrowUp" | "ArrowUpRight" | "Ban" | "Bookmark" | "BookmarkCheck" | "Braces" | "Building2" | "Check" | "CheckCircle" | "CheckCircle2" | "ChevronDown" | "ChevronRight" | "ChevronUp" | "Circle" | "CircleDot" | "CircleSlash" | "Clock" | "Cloud" | "Columns2" | "Columns3" | "Copy" | "CreditCard" | "Database" | "Download" | "Edit" | "EllipsisVertical" | "ExternalLink" | "Eye" | "EyeOff" | "File" | "FileSearch" | "FileSpreadsheet" | "FilterX" | "Folder" | "FolderPlus" | "FolderTree" | "Fullscreen" | "Grid2x2" | "Grid3x3" | "Heart" | "Image" | "ImageOff" | "Inbox" | "Info" | "KeyRound" | "Lasso" | "Layers" | "Layers2" | "LayoutDashboard" | "LayoutGrid" | "List" | "ListFilter" | "LogOut" | "Mail" | "MapPin" | "Maximize" | "Microscope" | "Minus" | "MoreVertical" | "Network" | "PanelLeftClose" | "PanelLeftOpen" | "PanelRightClose" | "PanelRightOpen" | "Pencil" | "Plug" | "Plus" | "Power" | "PowerOff" | "RefreshCw" | "RotateCcw" | "RotateCw" | "ScrollText" | "Search" | "SearchX" | "Send" | "Settings" | "Shield" | "ShieldCheck" | "Spline" | "Square" | "SquarePen" | "Star" | "Table" | "Tag" | "Trash2" | "Unplug" | "User" | "UserMinus" | "UserPlus" | "Users" | "UsersRound" | "X" | "XCircle" | "ZoomIn" | "ZoomOut";
+type IconName = "AlertCircle" | "AlertTriangle" | "AlignCenter" | "AlignLeft" | "AlignRight" | "Archive" | "ArrowDown" | "ArrowLeft" | "ArrowRight" | "ArrowUp" | "ArrowUpRight" | "Ban" | "Bookmark" | "BookmarkCheck" | "Braces" | "Building2" | "Calendar" | "Check" | "CheckCircle" | "CheckCircle2" | "ChevronDown" | "ChevronRight" | "ChevronUp" | "Circle" | "CircleDot" | "CircleSlash" | "Clock" | "Cloud" | "Columns2" | "Columns3" | "Copy" | "CreditCard" | "Database" | "Download" | "Edit" | "EllipsisVertical" | "ExternalLink" | "Eye" | "EyeOff" | "File" | "FileSearch" | "FileSpreadsheet" | "FilterX" | "Folder" | "FolderPlus" | "FolderTree" | "Fullscreen" | "Github" | "Grid2x2" | "Grid3x3" | "Heart" | "Image" | "ImageOff" | "Inbox" | "Info" | "KeyRound" | "Lasso" | "Layers" | "Layers2" | "LayoutDashboard" | "LayoutGrid" | "Linkedin" | "List" | "ListFilter" | "LogOut" | "Mail" | "MapPin" | "Maximize" | "Menu" | "Microscope" | "Minus" | "MoreVertical" | "Network" | "PanelLeftClose" | "PanelLeftOpen" | "PanelRightClose" | "PanelRightOpen" | "Pencil" | "Plug" | "Plus" | "Power" | "PowerOff" | "RefreshCw" | "RotateCcw" | "RotateCw" | "ScrollText" | "Search" | "SearchX" | "Send" | "Settings" | "Shield" | "ShieldCheck" | "Spline" | "Square" | "SquarePen" | "Star" | "Table" | "Tag" | "Trash2" | "Unplug" | "User" | "UserMinus" | "UserPlus" | "Users" | "UsersRound" | "X" | "XCircle" | "ZoomIn" | "ZoomOut";
 /**
  * Allowlist of icons available by name. Keys mirror the Lucide export name so
  * call sites read `<Icon icon="Search" />`. Add an entry here (and to IconName
@@ -55,6 +62,71 @@ interface SpinnerProps {
 }
 declare function Spinner({ size, "aria-label": ariaLabel, className, }: SpinnerProps): react_jsx_runtime.JSX.Element;
 
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type HeadingSize = HeadingLevel | "hero";
+interface HeadingProps extends React__default.HTMLAttributes<HTMLHeadingElement> {
+    as?: HeadingLevel;
+    size?: HeadingSize;
+    children: React__default.ReactNode;
+}
+declare const Heading: React__default.ForwardRefExoticComponent<HeadingProps & React__default.RefAttributes<HTMLHeadingElement>>;
+/** Convenience: renders `<h1>` with h1 styles (4xl→5xl responsive, bold) */
+declare const H1: React__default.ForwardRefExoticComponent<Omit<HeadingProps, "as"> & React__default.RefAttributes<HTMLHeadingElement>>;
+/** Convenience: renders `<h2>` with h2 styles (2xl→3xl responsive, bold) */
+declare const H2: React__default.ForwardRefExoticComponent<Omit<HeadingProps, "as"> & React__default.RefAttributes<HTMLHeadingElement>>;
+/** Convenience: renders `<h3>` with h3 styles (lg→xl responsive, bold) */
+declare const H3: React__default.ForwardRefExoticComponent<Omit<HeadingProps, "as"> & React__default.RefAttributes<HTMLHeadingElement>>;
+/** Convenience: renders `<h4>` with h4 styles (base→lg responsive, semibold) */
+declare const H4: React__default.ForwardRefExoticComponent<Omit<HeadingProps, "as"> & React__default.RefAttributes<HTMLHeadingElement>>;
+/** Convenience: renders `<h5>` with h5 styles (sm→base responsive, semibold) */
+declare const H5: React__default.ForwardRefExoticComponent<Omit<HeadingProps, "as"> & React__default.RefAttributes<HTMLHeadingElement>>;
+/** Convenience: renders `<h6>` with h6 styles (sm, semibold) */
+declare const H6: React__default.ForwardRefExoticComponent<Omit<HeadingProps, "as"> & React__default.RefAttributes<HTMLHeadingElement>>;
+
+interface ProseProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content rendered inside the `.prose` container */
+    children: ReactNode;
+    /** Visual size variant (default "default") */
+    size?: "sm" | "default" | "lg" | "xl";
+    /** Invert colours for dark backgrounds (default false) */
+    invert?: boolean;
+    className?: string;
+}
+/**
+ * Renders rich-text / long-form content with the Tailwind Typography plugin.
+ *
+ * Wrap markdown output, static documentation, or any long-form content that
+ * contains `<h1>`–`<h6>`, `<p>`, `<ul>`, `<ol>`, `<blockquote>`, `<code>` and
+ * similar elements. The wrapper applies the `prose` class family so the
+ * content inherits consistent typographic spacing and colour.
+ *
+ * @example
+ * <Prose size="lg">{renderMarkdown(content)}</Prose>
+ */
+declare const Prose: React$1.ForwardRefExoticComponent<ProseProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type DescriptionSize = "sm" | "md" | "lg" | "xl";
+interface DescriptionProps extends Omit<HTMLAttributes<HTMLParagraphElement>, "children"> {
+    /** Content rendered inside the paragraph */
+    children: ReactNode;
+    /** Visual size variant (default "md") */
+    size?: DescriptionSize;
+    /** Merge override */
+    className?: string;
+}
+/**
+ * Renders a single paragraph of muted body copy with responsive sizing.
+ *
+ * Use for lead text, supporting descriptions, and other non-heading prose.
+ * The element is a `<p>` so it participates in normal document flow. Pass
+ * `size` to scale the text; pass `className` to override colour, margin, or
+ * any other utility.
+ *
+ * @example
+ * <Description size="lg">Supporting copy beneath a heading.</Description>
+ */
+declare const Description: React$1.ForwardRefExoticComponent<DescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
+
 interface TooltipProps {
     /** Tooltip content; `null`/`undefined` disables the tooltip entirely */
     content: ReactNode;
@@ -282,27 +354,6 @@ interface FieldsetProps {
 }
 declare function Fieldset({ legend, children, className }: FieldsetProps): react_jsx_runtime.JSX.Element;
 
-type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-type HeadingSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
-type HeadingWeight = "semibold" | "bold";
-interface HeadingProps {
-    /** HTML heading element to render */
-    as?: HeadingLevel;
-    /** Visual size (defaults to match the `as` level) */
-    size?: HeadingSize;
-    /** Font weight (defaults to "semibold") */
-    weight?: HeadingWeight;
-    children: React__default.ReactNode;
-    className?: string;
-}
-declare function Heading({ as: Tag, size, weight, className, children, }: HeadingProps): react_jsx_runtime.JSX.Element;
-/** Convenience: renders `<h1>` at 2xl size with bold weight */
-declare function H1(props: Omit<HeadingProps, "as">): react_jsx_runtime.JSX.Element;
-/** Convenience: renders `<h2>` at xl size */
-declare function H2(props: Omit<HeadingProps, "as">): react_jsx_runtime.JSX.Element;
-/** Convenience: renders `<h3>` at lg size */
-declare function H3(props: Omit<HeadingProps, "as">): react_jsx_runtime.JSX.Element;
-
 type LinkVariant = "default" | "subtle";
 interface LinkProps extends Omit<LinkProps$1, "className"> {
     /** Visual style variant */
@@ -551,42 +602,27 @@ interface SegmentedControlItemProps extends Omit<ToggleButtonProps$1, "className
 }
 declare function SegmentedControlItem({ className, ...props }: SegmentedControlItemProps): 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 */
+type BadgeColor = "purple" | "teal" | "rose" | "slate" | "green" | "amber";
+type BadgeSize = "xs" | "sm" | "md" | "lg";
+interface BadgeProps extends Omit<React__default.HTMLAttributes<HTMLSpanElement>, "color"> {
+    children?: React__default.ReactNode;
+    color?: BadgeColor;
     size?: BadgeSize;
-    /** Optional leading icon */
     icon?: IconValue;
-    /** Merge override */
-    className?: string;
 }
-declare function Badge({ children, variant, size, icon, className, }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ children, color, size, icon, className, ...rest }: BadgeProps): react_jsx_runtime.JSX.Element;
 
-type CardPadding = "none" | "sm" | "md" | "lg";
 interface CardProps {
     /** Card body content */
     children: React__default.ReactNode;
-    /** Optional header content */
+    /** Optional header content (rendered with bottom border separator) */
     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;
-    /** 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, onPress, interactive, className, }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ children, header, footer, className }: CardProps): react_jsx_runtime.JSX.Element;
 
 type DeltaFormat = "currency" | "percentage" | "combined";
 type DeltaMode = "inline" | "pill";
@@ -668,9 +704,11 @@ 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 */
+interface SectionHeaderProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Section title rendered as a heading (default H2) */
     title: string;
+    /** Heading level for the title (default "h2") */
+    as?: HeadingLevel;
     /** Optional action elements (buttons, badges, etc.) rendered on the right */
     children?: React__default.ReactNode;
     /** Additional CSS classes applied to the outer container */
@@ -680,37 +718,39 @@ interface SectionHeaderProps {
  * 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.
+ * The title renders as a heading (default `<H2>`); 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;
-
-declare const colorStyles: {
-    readonly slate: "bg-badge-slate-bg text-badge-slate-text border-badge-slate-text/20";
-    readonly purple: string;
-    readonly teal: string;
-    readonly rose: string;
-    readonly green: string;
-    readonly amber: string;
-};
-type PillColor = keyof typeof colorStyles;
-interface PillProps extends Omit<React__default.HTMLAttributes<HTMLSpanElement>, "children" | "color"> {
-    children?: string;
-    color?: PillColor;
+declare const SectionHeader: React__default.ForwardRefExoticComponent<SectionHeaderProps & React__default.RefAttributes<HTMLDivElement>>;
+
+type DescriptionListLayout = "stacked" | "horizontal";
+interface DescriptionListProps {
+    children: React__default.ReactNode;
+    /** Layout for all items: "stacked" (label above value) or "horizontal" (side by side) */
+    layout?: DescriptionListLayout;
+    className?: string;
+}
+interface DescriptionListItemProps {
+    label: string;
+    children: React__default.ReactNode;
+    /** De-emphasize the value text */
+    muted?: boolean;
+    /** When set, wraps value in a Tooltip showing the full text (useful for truncated ETags etc.) */
+    fullValue?: string;
+}
+declare function DescriptionList({ children, layout, className, }: DescriptionListProps): react_jsx_runtime.JSX.Element;
+declare namespace DescriptionList {
+    var Item: typeof DescriptionListItem;
 }
-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;
+declare function DescriptionListItem({ label, children, muted, fullValue, }: DescriptionListItemProps): react_jsx_runtime.JSX.Element;
 
+declare function pillColorFromName(name?: string): BadgeColor;
 interface PathPillProps {
     children: string;
-    /** Number of trailing segments to show; earlier ones collapse to dots. Defaults to all. */
     visibleCount?: number;
-    /** Override per-segment color. Falls back to hash-based `pillColorFromName`. */
-    colorFn?: (segment: string, index: number) => PillColor;
+    colorFn?: (segment: string, index: number) => BadgeColor;
     className?: string;
 }
-/** Renders a slash-separated path as overlapping, hash-colored pill segments. */
 declare function PathPill({ children, visibleCount, colorFn, className, }: PathPillProps): react_jsx_runtime.JSX.Element | null;
 
 interface FormWizardContextValue {
@@ -754,4 +794,4 @@ interface FormWizardNavProps {
 }
 declare function FormWizardNav({ onNext, isSubmitting, submitLabel, }: FormWizardNavProps): react_jsx_runtime.JSX.Element;
 
-export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Banner, type BannerProps, type BannerVariant, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, Cell, Checkbox, type CheckboxProps, ColorPurple700, ColorTeal500, Column, type DataTableProps, type DeltaFormat, DeltaIndicator, type DeltaIndicatorProps, type DeltaMode, Dialog, type DialogProps, EmptyState, type EmptyStateProps, Fieldset, type FieldsetProps, FormWizard, type FormWizardContextValue, FormWizardNav, type FormWizardNavProps, FormWizardProgress, type FormWizardProgressProps, type FormWizardProps, H1, H2, H3, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, IconButtonLink, type IconButtonLinkProps, type IconButtonProps, IconButtonToggle, type IconButtonToggleProps, type IconComponent, type IconName, type IconProps, type IconValue, Input, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, 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, Spinner, type SpinnerProps, 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, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonVariant, Tooltip, type TooltipProps, TruncatedText, type TruncatedTextProps, type UseContextMenuProps, type UseContextMenuResult, createToastBridge, iconRegistry, pillColorFromName, useContextMenu, useFormWizard, useToast };
+export { Badge, type BadgeColor, type BadgeProps, type BadgeSize, Banner, type BannerProps, type BannerVariant, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, Cell, Checkbox, type CheckboxProps, Column, type DataTableProps, type DeltaFormat, DeltaIndicator, type DeltaIndicatorProps, type DeltaMode, Description, DescriptionList, type DescriptionListItemProps, type DescriptionListLayout, type DescriptionListProps, type DescriptionProps, type DescriptionSize, Dialog, type DialogProps, EmptyState, type EmptyStateProps, Fieldset, type FieldsetProps, FormWizard, type FormWizardContextValue, FormWizardNav, type FormWizardNavProps, FormWizardProgress, type FormWizardProgressProps, type FormWizardProps, H1, H2, H3, H4, H5, H6, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, Icon, IconButton, IconButtonLink, type IconButtonLinkProps, type IconButtonProps, IconButtonToggle, type IconButtonToggleProps, type IconComponent, type IconName, type IconProps, type IconValue, Input, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, type LinkVariant, Logo, type LogoProps, 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, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarVariant, Prose, type ProseProps, 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, Spinner, type SpinnerProps, 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, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonVariant, Tooltip, type TooltipProps, TruncatedText, type TruncatedTextProps, type UseContextMenuProps, type UseContextMenuResult, createToastBridge, iconRegistry, pillColorFromName, useContextMenu, useFormWizard, useToast };