@tapizlabs/ui 0.1.5 → 0.2.1

package/dist/index.d.ts

@@ -67,7 +67,6 @@ declare const UserCheck: ({ size, className, style }: IconProps) => react.JSX.El
 declare const Hash: ({ size, className, style }: IconProps) => react.JSX.Element;
 declare const LogOut: ({ size, className, style }: IconProps) => react.JSX.Element;
 
-declare const Alert: ({ size, className, style }: IconProps) => react.JSX.Element;
 declare const Info: ({ size, className, style }: IconProps) => react.JSX.Element;
 declare const CheckCircle: ({ size, className, style }: IconProps) => react.JSX.Element;
 declare const Ban: ({ size, className, style }: IconProps) => react.JSX.Element;
@@ -175,7 +174,7 @@ declare const Icons: {
     externalLink: react.JSX.Element;
 };
 
-type Variant$1 = "primary" | "secondary" | "danger" | "ghost" | "success" | "warning" | "info" | "muted-primary" | "outline-primary" | "outline-secondary" | "outline-danger" | "outline-success" | "link";
+type Variant$1 = "primary" | "secondary" | "danger" | "ghost" | "success" | "warning" | "info" | "muted-primary" | "outline-primary" | "outline-secondary" | "outline-danger" | "outline-success" | "brutal" | "link";
 type Size = "xs" | "sm" | "md" | "lg" | "xl";
 interface ButtonProps {
     children?: ReactNode;
@@ -334,17 +333,21 @@ interface TooltipProps {
 }
 declare function Tooltip({ text, children, position, align, width, wFull }: TooltipProps): react.JSX.Element;
 
+type CardVariant = "surface" | "raised" | "outlined" | "brutal" | "glass";
+type CardPadding = "none" | "sm" | "md" | "lg";
 interface CardProps {
     children: ReactNode;
     className?: string;
     hover?: boolean;
     style?: CSSProperties;
+    variant?: CardVariant;
+    padding?: CardPadding;
 }
 interface CardSectionProps {
     children: ReactNode;
     className?: string;
 }
-declare function Card({ children, className, hover, style }: CardProps): react.JSX.Element;
+declare function Card({ children, className, hover, style, variant, padding, }: CardProps): react.JSX.Element;
 declare function CardHeader({ children, className }: CardSectionProps): react.JSX.Element;
 declare function CardBody({ children, className }: CardSectionProps): react.JSX.Element;
 
@@ -366,7 +369,7 @@ declare function SkeletonTable({ rows, cols }: {
 }): react.JSX.Element;
 declare function SkeletonPageHeader(): react.JSX.Element;
 
-type Variant = "default" | "success" | "warning" | "danger" | "muted";
+type Variant = "default" | "success" | "warning" | "danger" | "info" | "muted";
 interface BadgeProps {
     children: ReactNode;
     variant?: Variant;
@@ -406,11 +409,47 @@ declare function InfoBanner(props: InfoBannerProps): react.JSX.Element;
 interface PageHeaderProps {
     title: string;
     subtitle?: string;
+    description?: ReactNode;
     action?: ReactNode;
+    actions?: ReactNode;
+    icon?: ReactNode;
+    banner?: ReactNode;
+    breadcrumbs?: ReactNode;
+    meta?: ReactNode;
+    className?: string;
+    variant?: "default" | "enterprise" | "brutal";
+}
+declare function PageHeader({ title, subtitle, description, action, actions, icon, banner, breadcrumbs, meta, className, variant, }: PageHeaderProps): react.JSX.Element;
+
+type MetricTrendTone = "positive" | "negative" | "neutral" | "warning";
+interface MetricCardProps {
+    label: ReactNode;
+    value: ReactNode;
+    description?: ReactNode;
     icon?: ReactNode;
+    trend?: ReactNode;
+    trendTone?: MetricTrendTone;
+    className?: string;
+    variant?: "surface" | "raised" | "brutal";
+}
+declare function MetricCard({ label, value, description, icon, trend, trendTone, className, variant, }: MetricCardProps): react.JSX.Element;
+
+interface StatGridProps {
+    children: ReactNode;
+    className?: string;
+    minColumnWidth?: string;
+}
+declare function StatGrid({ children, className, minColumnWidth }: StatGridProps): react.JSX.Element;
+
+interface SectionCardProps {
+    title?: ReactNode;
+    eyebrow?: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    children: ReactNode;
     className?: string;
 }
-declare function PageHeader({ title, subtitle, action, icon, className }: PageHeaderProps): react.JSX.Element;
+declare function SectionCard({ title, eyebrow, description, action, children, className }: SectionCardProps): react.JSX.Element;
 
 interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> {
     value: string;
@@ -455,7 +494,7 @@ interface SectionTitleProps {
 }
 declare function SectionTitle({ children, className }: SectionTitleProps): react.JSX.Element;
 
-type StatusBadgeVariant = "default" | "active" | "inactive" | "warning" | "success" | "danger" | "pending";
+type StatusBadgeVariant = "default" | "active" | "inactive" | "warning" | "success" | "danger" | "info" | "pending";
 interface StatusBadgeProps {
     label: ReactNode;
     variant?: StatusBadgeVariant;
@@ -524,6 +563,8 @@ interface ServerSort {
     onSort: (field: string) => void;
 }
 
+type DataTableDensity = "compact" | "comfortable" | "spacious";
+type DataTableVariant = "default" | "enterprise" | "brutal";
 interface DataTableProps<T> {
     data: T[];
     columns: Column<T>[];
@@ -559,6 +600,15 @@ interface DataTableProps<T> {
      *   each row to a card via this function (keyed by `rowKey(row)`).
      */
     mobileCard?: (row: T) => ReactNode;
+    /** Visual density of header and cells. Defaults to comfortable. */
+    density?: DataTableDensity;
+    /** Enterprise adds stronger surface treatment; brutal adds 2px border + hard shadow. */
+    variant?: DataTableVariant;
+    /** Makes the table header sticky inside the scroll container. */
+    stickyHeader?: boolean;
+    /** Applies token-based zebra striping. Defaults to true. */
+    striped?: boolean;
+    className?: string;
 }
 /**
  * Generic, accessible, client-sortable table.
@@ -571,6 +621,898 @@ interface DataTableProps<T> {
  * - Optional `rowActions`, `serverSort`, `footer`, and `mobileCard` props are
  *   all additive — existing usages continue to work with zero changes.
  */
-declare function DataTable<T>({ data, columns, rowKey, isLoading, emptyState, onRowClick, loadingRows, rowActions, serverSort, footer, mobileCard, }: DataTableProps<T>): react.JSX.Element;
+declare function DataTable<T>({ data, columns, rowKey, isLoading, emptyState, onRowClick, loadingRows, rowActions, serverSort, footer, mobileCard, density, variant, stickyHeader, striped, className, }: DataTableProps<T>): react.JSX.Element;
+
+interface MarketingShellProps {
+    children: ReactNode;
+    className?: string;
+    grid?: boolean;
+    noise?: boolean;
+}
+declare function MarketingShell({ children, className, grid, noise }: MarketingShellProps): react.JSX.Element;
+
+interface HeroFrameProps {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    visual?: ReactNode;
+    meta?: ReactNode;
+    className?: string;
+}
+declare function HeroFrame({ eyebrow, title, description, actions, visual, meta, className }: HeroFrameProps): react.JSX.Element;
+
+interface FeatureCardProps {
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    eyebrow?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    variant?: "surface" | "brutal" | "raised";
+}
+declare function FeatureCard({ title, description, icon, eyebrow, children, className, variant }: FeatureCardProps): react.JSX.Element;
+
+interface FeatureGridProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function FeatureGrid({ children, className }: FeatureGridProps): react.JSX.Element;
+
+interface CTASectionProps {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}
+declare function CTASection({ eyebrow, title, description, actions, className }: CTASectionProps): react.JSX.Element;
+
+interface MockupFrameProps {
+    children: ReactNode;
+    title?: ReactNode;
+    toolbar?: ReactNode;
+    className?: string;
+}
+declare function MockupFrame({ children, title, toolbar, className }: MockupFrameProps): react.JSX.Element;
+
+interface ComparisonTableRow {
+    feature: ReactNode;
+    included: ReactNode;
+    alternative?: ReactNode;
+}
+interface ComparisonTableProps {
+    rows: ComparisonTableRow[];
+    featureHeader?: ReactNode;
+    includedHeader?: ReactNode;
+    alternativeHeader?: ReactNode;
+    className?: string;
+}
+declare function ComparisonTable({ rows, featureHeader, includedHeader, alternativeHeader, className }: ComparisonTableProps): react.JSX.Element;
+
+interface AppShellProps {
+    sidebar?: ReactNode;
+    topbar?: ReactNode;
+    children: ReactNode;
+    aside?: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    variant?: "default" | "grid" | "noise";
+}
+declare function AppShell({ sidebar, topbar, children, aside, className, contentClassName, variant }: AppShellProps): react.JSX.Element;
+
+interface SplitPaneProps {
+    primary: ReactNode;
+    secondary: ReactNode;
+    ratio?: "50/50" | "60/40" | "70/30";
+    reverseOnMobile?: boolean;
+    className?: string;
+}
+declare function SplitPane({ primary, secondary, ratio, reverseOnMobile, className }: SplitPaneProps): react.JSX.Element;
+
+interface StackProps {
+    children: ReactNode;
+    gap?: "xs" | "sm" | "md" | "lg" | "xl";
+    direction?: "vertical" | "horizontal";
+    align?: "start" | "center" | "end" | "stretch";
+    justify?: "start" | "center" | "between" | "end";
+    wrap?: boolean;
+    className?: string;
+}
+declare function Stack({ children, gap, direction, align, justify, wrap, className }: StackProps): react.JSX.Element;
+
+interface ClusterProps {
+    children: ReactNode;
+    gap?: "xs" | "sm" | "md" | "lg";
+    align?: "start" | "center" | "end";
+    justify?: "start" | "center" | "between" | "end";
+    className?: string;
+}
+declare function Cluster({ children, gap, align, justify, className }: ClusterProps): react.JSX.Element;
+
+interface BreadcrumbItem {
+    label: ReactNode;
+    href?: string;
+    current?: boolean;
+}
+interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    separator?: ReactNode;
+    className?: string;
+}
+declare function Breadcrumbs({ items, separator, className }: BreadcrumbsProps): react.JSX.Element;
+
+interface SidebarNavItem {
+    label: ReactNode;
+    href?: string;
+    icon?: ReactNode;
+    badge?: ReactNode;
+    active?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+interface SidebarNavGroup {
+    label?: ReactNode;
+    items: SidebarNavItem[];
+}
+interface SidebarNavProps {
+    groups: SidebarNavGroup[];
+    header?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+}
+declare function SidebarNav({ groups, header, footer, className }: SidebarNavProps): react.JSX.Element;
+
+interface TopNavLink {
+    label: ReactNode;
+    href?: string;
+    active?: boolean;
+    onClick?: () => void;
+}
+interface TopNavProps {
+    brand?: ReactNode;
+    links?: TopNavLink[];
+    actions?: ReactNode;
+    className?: string;
+    sticky?: boolean;
+}
+declare function TopNav({ brand, links, actions, className, sticky }: TopNavProps): react.JSX.Element;
+
+interface TabItem {
+    id: string;
+    label: ReactNode;
+    content: ReactNode;
+    badge?: ReactNode;
+    disabled?: boolean;
+}
+interface TabsProps {
+    items: TabItem[];
+    activeId: string;
+    onChange?: (id: string) => void;
+    className?: string;
+    variant?: "line" | "boxed" | "brutal";
+}
+declare function Tabs({ items, activeId, onChange, className, variant }: TabsProps): react.JSX.Element;
+
+interface AccordionItem {
+    id: string;
+    title: ReactNode;
+    content: ReactNode;
+    meta?: ReactNode;
+    disabled?: boolean;
+}
+interface AccordionProps {
+    items: AccordionItem[];
+    openIds?: string[];
+    onToggle?: (id: string) => void;
+    className?: string;
+    allowMultiple?: boolean;
+}
+declare function Accordion({ items, openIds, onToggle, className }: AccordionProps): react.JSX.Element;
+
+interface StepItem {
+    id: string;
+    label: ReactNode;
+    description?: ReactNode;
+    status?: "complete" | "current" | "upcoming" | "error";
+}
+interface StepperProps {
+    steps: StepItem[];
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+}
+declare function Stepper({ steps, orientation, className }: StepperProps): react.JSX.Element;
+
+interface DrawerProps {
+    open: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    description?: ReactNode;
+    children: ReactNode;
+    footer?: ReactNode;
+    side?: "left" | "right";
+    className?: string;
+}
+declare function Drawer({ open, onClose, title, description, children, footer, side, className }: DrawerProps): react.JSX.Element | null;
+
+interface PopoverProps {
+    trigger: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+    align?: "start" | "end";
+    className?: string;
+}
+declare function Popover({ trigger, children, open, align, className }: PopoverProps): react.JSX.Element;
+
+interface CommandItem {
+    id: string;
+    label: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    shortcut?: ReactNode;
+    disabled?: boolean;
+    onSelect?: () => void;
+}
+interface CommandGroup {
+    label?: ReactNode;
+    items: CommandItem[];
+}
+interface CommandMenuProps {
+    open: boolean;
+    onClose?: () => void;
+    query?: string;
+    onQueryChange?: (value: string) => void;
+    groups: CommandGroup[];
+    placeholder?: string;
+    empty?: ReactNode;
+}
+declare function CommandMenu({ open, onClose, query, onQueryChange, groups, placeholder, empty }: CommandMenuProps): react.JSX.Element | null;
+
+interface FormFieldProps {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    htmlFor?: string;
+    children: ReactNode;
+    className?: string;
+}
+declare function FormField({ label, hint, error, required, htmlFor, children, className }: FormFieldProps): react.JSX.Element;
+
+interface SwitchProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: ReactNode;
+    description?: ReactNode;
+    className?: string;
+}
+declare function Switch({ checked, onChange, disabled, label, description, className }: SwitchProps): react.JSX.Element;
+
+interface ToggleOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+interface ToggleGroupProps {
+    options: ToggleOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+    fullWidth?: boolean;
+}
+declare function ToggleGroup({ options, value, onChange, className, fullWidth }: ToggleGroupProps): react.JSX.Element;
+
+interface InputGroupProps {
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+declare function InputGroup({ prefix, suffix, children, className }: InputGroupProps): react.JSX.Element;
+
+type AlertTone = "info" | "success" | "warning" | "danger" | "neutral";
+interface AlertProps {
+    tone?: AlertTone;
+    title?: ReactNode;
+    children?: ReactNode;
+    icon?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}
+declare function Alert({ tone, title, children, icon, actions, className }: AlertProps): react.JSX.Element;
+
+interface ProgressProps {
+    value: number;
+    max?: number;
+    label?: string;
+    showValue?: boolean;
+    tone?: "accent" | "success" | "warning" | "danger";
+    className?: string;
+}
+declare function Progress({ value, max, label, showValue, tone, className }: ProgressProps): react.JSX.Element;
+
+interface AvatarProps {
+    src?: string;
+    name?: string;
+    size?: "xs" | "sm" | "md" | "lg";
+    className?: string;
+}
+declare function Avatar({ src, name, size, className }: AvatarProps): react.JSX.Element;
+
+interface KbdProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function Kbd({ children, className }: KbdProps): react.JSX.Element;
+
+interface TimelineItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    time?: ReactNode;
+    icon?: ReactNode;
+    tone?: "neutral" | "info" | "success" | "warning" | "danger";
+}
+interface TimelineProps {
+    items: TimelineItem[];
+    className?: string;
+}
+declare function Timeline({ items, className }: TimelineProps): react.JSX.Element;
+
+interface KeyValueItem {
+    keyLabel: ReactNode;
+    value: ReactNode;
+    description?: ReactNode;
+}
+interface KeyValueListProps {
+    items: KeyValueItem[];
+    className?: string;
+    density?: "compact" | "normal";
+}
+declare function KeyValueList({ items, className, density }: KeyValueListProps): react.JSX.Element;
+
+interface CodeBlockProps {
+    children: ReactNode;
+    language?: string;
+    title?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}
+declare function CodeBlock({ children, language, title, actions, className }: CodeBlockProps): react.JSX.Element;
+
+interface LogoCloudItem {
+    name: string;
+    logo?: ReactNode;
+}
+interface LogoCloudProps {
+    title?: ReactNode;
+    items: LogoCloudItem[];
+    className?: string;
+}
+declare function LogoCloud({ title, items, className }: LogoCloudProps): react.JSX.Element;
+
+interface TestimonialCardProps {
+    quote: ReactNode;
+    author: string;
+    role?: ReactNode;
+    avatarSrc?: string;
+    className?: string;
+    variant?: "surface" | "brutal";
+}
+declare function TestimonialCard({ quote, author, role, avatarSrc, className, variant }: TestimonialCardProps): react.JSX.Element;
+
+interface PricingCardProps {
+    name: ReactNode;
+    price: ReactNode;
+    description?: ReactNode;
+    features?: ReactNode[];
+    cta?: ReactNode;
+    highlighted?: boolean;
+    className?: string;
+}
+declare function PricingCard({ name, price, description, features, cta, highlighted, className }: PricingCardProps): react.JSX.Element;
+
+interface StatsBandItem {
+    value: ReactNode;
+    label: ReactNode;
+    description?: ReactNode;
+}
+interface StatsBandProps {
+    items: StatsBandItem[];
+    className?: string;
+}
+declare function StatsBand({ items, className }: StatsBandProps): react.JSX.Element;
+
+type TapizFrameworkPreset = "enterprise" | "brutal" | "dashboard" | "marketing" | "compact";
+interface TapizPresetDefinition {
+    shell: string;
+    card: string;
+    button: "primary" | "secondary" | "brutal";
+    density: "compact" | "comfortable" | "spacious";
+}
+declare const tapizFrameworkPresets: Record<TapizFrameworkPreset, TapizPresetDefinition>;
+
+type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
+interface ContainerProps {
+    children: ReactNode;
+    size?: ContainerSize;
+    padded?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Container({ children, size, padded, className, style }: ContainerProps): react.JSX.Element;
+
+type SurfaceVariant = "canvas" | "surface" | "raised" | "muted" | "brutal" | "inverse";
+type SurfacePadding = "none" | "sm" | "md" | "lg" | "xl";
+interface SurfaceProps {
+    children: ReactNode;
+    variant?: SurfaceVariant;
+    padding?: SurfacePadding;
+    bordered?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Surface({ children, variant, padding, bordered, className, style }: SurfaceProps): react.JSX.Element;
+
+interface DividerProps {
+    orientation?: "horizontal" | "vertical";
+    label?: string;
+    className?: string;
+}
+declare function Divider({ orientation, label, className }: DividerProps): react.JSX.Element;
+
+interface ResponsiveGridProps {
+    children: ReactNode;
+    min?: string;
+    gap?: "sm" | "md" | "lg" | "xl";
+    className?: string;
+    style?: CSSProperties;
+}
+declare function ResponsiveGrid({ children, min, gap, className, style }: ResponsiveGridProps): react.JSX.Element;
+
+interface SparklineProps {
+    values: number[];
+    width?: number;
+    height?: number;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Sparkline({ values, width, height, label, className, style }: SparklineProps): react.JSX.Element;
+
+interface BarListItem {
+    label: ReactNode;
+    value: number;
+    detail?: ReactNode;
+}
+interface BarListProps {
+    items: BarListItem[];
+    max?: number;
+    valueFormatter?: (value: number) => ReactNode;
+    className?: string;
+}
+declare function BarList({ items, max, valueFormatter, className }: BarListProps): react.JSX.Element;
+
+interface DonutMetricProps {
+    value: number;
+    max?: number;
+    label?: ReactNode;
+    caption?: ReactNode;
+    size?: number;
+    className?: string;
+}
+declare function DonutMetric({ value, max, label, caption, size, className }: DonutMetricProps): react.JSX.Element;
+
+interface FilterChipProps {
+    children: ReactNode;
+    active?: boolean;
+    onRemove?: () => void;
+    className?: string;
+}
+declare function FilterChip({ children, active, onRemove, className }: FilterChipProps): react.JSX.Element;
+
+interface DataToolbarProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    search?: ReactNode;
+    filters?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}
+declare function DataToolbar({ title, description, search, filters, actions, className }: DataToolbarProps): react.JSX.Element;
+
+interface ResourceCardProps {
+    title: ReactNode;
+    description?: ReactNode;
+    eyebrow?: ReactNode;
+    icon?: ReactNode;
+    meta?: ReactNode;
+    status?: ReactNode;
+    actions?: ReactNode;
+    href?: string;
+    className?: string;
+}
+declare function ResourceCard({ title, description, eyebrow, icon, meta, status, actions, href, className }: ResourceCardProps): react.JSX.Element;
+
+type IntegrationStatus = "connected" | "disconnected" | "syncing" | "error";
+interface IntegrationCardProps {
+    name: ReactNode;
+    description?: ReactNode;
+    logo?: ReactNode;
+    status?: IntegrationStatus;
+    lastSync?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}
+declare function IntegrationCard({ name, description, logo, status, lastSync, actions, className }: IntegrationCardProps): react.JSX.Element;
+
+type HealthTone = "operational" | "degraded" | "outage" | "unknown";
+interface HealthIndicatorProps {
+    tone?: HealthTone;
+    label?: ReactNode;
+    detail?: ReactNode;
+    className?: string;
+}
+declare function HealthIndicator({ tone, label, detail, className }: HealthIndicatorProps): react.JSX.Element;
+
+interface AuditLogItem {
+    actor: string;
+    action: ReactNode;
+    timestamp: ReactNode;
+    detail?: ReactNode;
+    initials?: string;
+}
+interface AuditLogProps {
+    items: AuditLogItem[];
+    className?: string;
+}
+declare function AuditLog({ items, className }: AuditLogProps): react.JSX.Element;
+
+interface KanbanCardItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    meta?: ReactNode;
+    tone?: "default" | "accent" | "success" | "warning" | "danger";
+}
+interface KanbanColumn {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    items: KanbanCardItem[];
+}
+interface KanbanBoardProps {
+    columns: KanbanColumn[];
+    className?: string;
+}
+declare function KanbanBoard({ columns, className }: KanbanBoardProps): react.JSX.Element;
+
+interface AccessMatrixRole {
+    key: string;
+    label: ReactNode;
+}
+interface AccessMatrixPermission {
+    key: string;
+    label: ReactNode;
+    description?: ReactNode;
+    roles: Record<string, boolean>;
+}
+interface AccessMatrixProps {
+    roles: AccessMatrixRole[];
+    permissions: AccessMatrixPermission[];
+    className?: string;
+}
+declare function AccessMatrix({ roles, permissions, className }: AccessMatrixProps): react.JSX.Element;
+
+interface CalendarGridDay {
+    date: ReactNode;
+    label?: ReactNode;
+    muted?: boolean;
+    selected?: boolean;
+    events?: ReactNode[];
+}
+interface CalendarGridProps {
+    days: CalendarGridDay[];
+    weekdays?: ReactNode[];
+    className?: string;
+}
+declare function CalendarGrid({ days, weekdays, className }: CalendarGridProps): react.JSX.Element;
+
+interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: string;
+    valueLabel?: string;
+}
+declare function Slider({ label, valueLabel, className, ...props }: SliderProps): react.JSX.Element;
+
+interface FileDropzoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    actionLabel?: ReactNode;
+    className?: string;
+}
+declare function FileDropzone({ title, description, actionLabel, className, ...props }: FileDropzoneProps): react.JSX.Element;
+
+interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    revealLabel?: ReactNode;
+}
+declare function PasswordInput({ revealLabel, className, ...props }: PasswordInputProps): react.JSX.Element;
+
+interface TextareaCounterProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    maxLength: number;
+    value?: string;
+}
+declare function TextareaCounter({ maxLength, value, className, ...props }: TextareaCounterProps): react.JSX.Element;
+
+type CalloutTone = "info" | "success" | "warning" | "danger" | "neutral";
+interface CalloutProps {
+    title?: ReactNode;
+    children?: ReactNode;
+    tone?: CalloutTone;
+    icon?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}
+declare function Callout({ title, children, tone, icon, actions, className }: CalloutProps): react.JSX.Element;
+
+interface LoadingOverlayProps {
+    visible?: boolean;
+    label?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+declare function LoadingOverlay({ visible, label, children, className }: LoadingOverlayProps): react.JSX.Element;
+
+interface NotificationItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    time?: ReactNode;
+    unread?: boolean;
+    action?: ReactNode;
+}
+interface NotificationListProps {
+    items: NotificationItem[];
+    className?: string;
+}
+declare function NotificationList({ items, className }: NotificationListProps): react.JSX.Element;
+
+interface TapizDocsPageProps {
+    title?: string;
+    subtitle?: string;
+}
+declare function TapizDocsPage({ title, subtitle }: TapizDocsPageProps): react.JSX.Element;
+
+interface MasonryGridProps {
+    children: ReactNode;
+    columns?: 2 | 3 | 4;
+    gap?: "sm" | "md" | "lg";
+    className?: string;
+    style?: CSSProperties;
+}
+declare function MasonryGrid({ children, columns, gap, className, style }: MasonryGridProps): react.JSX.Element;
+
+interface PageRailItem {
+    label: ReactNode;
+    href?: string;
+    active?: boolean;
+    meta?: ReactNode;
+}
+interface PageRailProps {
+    title?: ReactNode;
+    items: PageRailItem[];
+    actions?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function PageRail({ title, items, actions, className, style }: PageRailProps): react.JSX.Element;
+
+interface StickyBarProps {
+    children: ReactNode;
+    position?: "top" | "bottom";
+    className?: string;
+    style?: CSSProperties;
+}
+declare function StickyBar({ children, position, className, style }: StickyBarProps): react.JSX.Element;
+
+interface ComboboxOption {
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+}
+interface ComboboxProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "children"> {
+    options: ComboboxOption[];
+    placeholder?: string;
+    invalid?: boolean;
+}
+declare function Combobox({ options, placeholder, invalid, className, ...props }: ComboboxProps): react.JSX.Element;
+
+interface DateRangePickerProps {
+    startLabel?: string;
+    endLabel?: string;
+    startProps?: InputHTMLAttributes<HTMLInputElement>;
+    endProps?: InputHTMLAttributes<HTMLInputElement>;
+    className?: string;
+}
+declare function DateRangePicker({ startLabel, endLabel, startProps, endProps, className }: DateRangePickerProps): react.JSX.Element;
+
+interface ColorSwatchOption {
+    value: string;
+    label: ReactNode;
+    color: string;
+}
+interface ColorSwatchPickerProps {
+    options: ColorSwatchOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+}
+declare function ColorSwatchPicker({ options, value, onChange, className }: ColorSwatchPickerProps): react.JSX.Element;
+
+interface RatingInputProps {
+    value?: number;
+    max?: number;
+    icon?: ReactNode;
+    onChange?: (value: number) => void;
+    label?: string;
+    className?: string;
+}
+declare function RatingInput({ value, max, icon, onChange, label, className }: RatingInputProps): react.JSX.Element;
+
+interface ScoreRingProps {
+    value: number;
+    max?: number;
+    label?: ReactNode;
+    size?: number;
+    className?: string;
+}
+declare function ScoreRing({ value, max, label, size, className }: ScoreRingProps): react.JSX.Element;
+
+interface HeatmapCell {
+    value: number;
+    label?: ReactNode;
+    title?: string;
+}
+interface HeatmapGridProps {
+    cells: HeatmapCell[];
+    columns?: number;
+    max?: number;
+    className?: string;
+}
+declare function HeatmapGrid({ cells, columns, max, className }: HeatmapGridProps): react.JSX.Element;
+
+interface FunnelStep {
+    label: ReactNode;
+    value: number;
+    meta?: ReactNode;
+}
+interface FunnelChartProps {
+    steps: FunnelStep[];
+    className?: string;
+}
+declare function FunnelChart({ steps, className }: FunnelChartProps): react.JSX.Element;
+
+interface ComparisonMeterProps {
+    leftLabel: ReactNode;
+    rightLabel: ReactNode;
+    value: number;
+    className?: string;
+}
+declare function ComparisonMeter({ leftLabel, rightLabel, value, className }: ComparisonMeterProps): react.JSX.Element;
+
+interface ActivityFeedItem {
+    actor: string;
+    action: ReactNode;
+    time?: ReactNode;
+    avatarUrl?: string;
+    meta?: ReactNode;
+}
+interface ActivityFeedProps {
+    items: ActivityFeedItem[];
+    className?: string;
+}
+declare function ActivityFeed({ items, className }: ActivityFeedProps): react.JSX.Element;
+
+interface InboxItem {
+    title: ReactNode;
+    sender?: ReactNode;
+    snippet?: ReactNode;
+    time?: ReactNode;
+    unread?: boolean;
+    tag?: ReactNode;
+}
+interface InboxListProps {
+    items: InboxItem[];
+    className?: string;
+}
+declare function InboxList({ items, className }: InboxListProps): react.JSX.Element;
+
+interface ApprovalItem {
+    title: ReactNode;
+    requester?: ReactNode;
+    description?: ReactNode;
+    priority?: "low" | "medium" | "high";
+}
+interface ApprovalQueueProps {
+    items: ApprovalItem[];
+    onApprove?: (index: number) => void;
+    onReject?: (index: number) => void;
+    className?: string;
+}
+declare function ApprovalQueue({ items, onApprove, onReject, className }: ApprovalQueueProps): react.JSX.Element;
+
+interface SLAStatusProps {
+    label: ReactNode;
+    value: number;
+    target?: number;
+    className?: string;
+}
+declare function SLAStatus({ label, value, target, className }: SLAStatusProps): react.JSX.Element;
+
+interface FeatureFlag {
+    key: string;
+    name: ReactNode;
+    description?: ReactNode;
+    enabled?: boolean;
+    rollout?: ReactNode;
+}
+interface FeatureFlagTableProps {
+    flags: FeatureFlag[];
+    onToggle?: (key: string, enabled: boolean) => void;
+    className?: string;
+}
+declare function FeatureFlagTable({ flags, onToggle, className }: FeatureFlagTableProps): react.JSX.Element;
+
+interface PlanUsageItem {
+    label: ReactNode;
+    used: number;
+    limit: number;
+}
+interface PlanUsageProps {
+    title?: ReactNode;
+    items: PlanUsageItem[];
+    className?: string;
+}
+declare function PlanUsage({ title, items, className }: PlanUsageProps): react.JSX.Element;
+
+interface AnnouncementBarProps {
+    children: ReactNode;
+    action?: ReactNode;
+    className?: string;
+}
+declare function AnnouncementBar({ children, action, className }: AnnouncementBarProps): react.JSX.Element;
+
+interface FAQItem {
+    question: ReactNode;
+    answer: ReactNode;
+}
+interface FAQSectionProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    items: FAQItem[];
+    className?: string;
+}
+declare function FAQSection({ title, description, items, className }: FAQSectionProps): react.JSX.Element;
+
+interface RoadmapItem {
+    title: ReactNode;
+    description?: ReactNode;
+    status?: ReactNode;
+    quarter?: ReactNode;
+}
+interface RoadmapListProps {
+    items: RoadmapItem[];
+    className?: string;
+}
+declare function RoadmapList({ items, className }: RoadmapListProps): react.JSX.Element;
+
+type InlineStatusTone = "neutral" | "success" | "warning" | "danger" | "info";
+interface InlineStatusProps {
+    tone?: InlineStatusTone;
+    children: ReactNode;
+    pulse?: boolean;
+    className?: string;
+}
+declare function InlineStatus({ tone, children, pulse, className }: InlineStatusProps): react.JSX.Element;
 
-export { ActionMenu, type ActionMenuItem, type ActionMenuProps, Activity, ActivityMenu, Alert, AppleIcon, ArrowLeft, ArrowRight, Badge, Ban, BarChart, BaseModal, type BaseModalProps, Bell, Book, Button, type ButtonProps, Calendar, CalendarMonth, CalendarWeek, Card, CardBody, CardHeader, type CardProps, type CardSectionProps, Check, CheckCircle, CheckSquare, Checkbox, type CheckboxProps, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clipboard, Clock, type Column, type ColumnAlign, Compare, ConfirmDialog, type ConfirmDialogProps, Copy, Cpu, CreditCard, DataTable, type DataTableProps, Database, DefaultErrorFallback, Download, Edit, EmptyState, type EmptyStateProps, ErrorBoundary, ErrorState, ExternalLink, Eye, EyeOff, Faculty, FieldHint, type FieldHintProps, FieldLabel, type FieldLabelProps, FileText, FileUpload, FingerprintIcon, FormError, type FormErrorProps, FormIcon, FormulaIcon, Gear, Globe, GooglePlayIcon, GraduationCap, Grid, GridBg, HardDrive, Hash, HelpCircle, History, Home, Icons, Image, Info, InfoBanner, type InfoBannerProps, Input, type InputProps, Intersect, Layers, LockIcon, LogOut, LogoMark, Mail, Megaphone, Menu, Monitor, Moon, NavAnalytics, NavQrAttendance, NavScoresheet, NavSecurity, NumberIcon, OfficeHours, PageHeader, type PageHeaderProps, PageSpinner, Pagination, type PaginationLabels, type PaginationProps, Pdf, Plus, Printer, QrCode, RadioButton, type RadioButtonProps, Refresh, RefreshCw, Repeat, Report, RotateCcw, Scan, Search, SearchInput, type SearchInputProps, SectionIcons, SectionTitle, type SectionTitleProps, Select, type SelectProps, Server, type ServerSort, Shield, Skeleton, SkeletonBanner, SkeletonCard, SkeletonKpiCard, SkeletonPageHeader, type SkeletonProps, SkeletonTable, Smartphone, type SortDirection, type SortState, Spinner, type SpinnerProps, Spotlight, Star, StatusBadge, type StatusBadgeProps, type StatusBadgeVariant, Sun, Table, Tablet, TextIcon, Textarea, type TextareaProps, Toast, type ToastProps, ToastProvider, type ToastProviderProps, type ToastState, Tooltip, type TooltipProps, Trash, Trophy, TwoFAIcon, University, User, UserCheck, UserCog, UserMinus, UserPlus, Users, X, Zap, useToast };
+export { AccessMatrix, type AccessMatrixPermission, type AccessMatrixProps, type AccessMatrixRole, Accordion, type AccordionItem, type AccordionProps, ActionMenu, type ActionMenuItem, type ActionMenuProps, Activity, ActivityFeed, type ActivityFeedItem, type ActivityFeedProps, ActivityMenu, Alert, type AlertProps, type AlertTone, AnnouncementBar, type AnnouncementBarProps, AppShell, type AppShellProps, AppleIcon, type ApprovalItem, ApprovalQueue, type ApprovalQueueProps, ArrowLeft, ArrowRight, AuditLog, type AuditLogItem, type AuditLogProps, Avatar, type AvatarProps, Badge, Ban, BarChart, BarList, type BarListItem, type BarListProps, BaseModal, type BaseModalProps, Bell, Book, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CTASection, type CTASectionProps, Calendar, CalendarGrid, type CalendarGridDay, type CalendarGridProps, CalendarMonth, CalendarWeek, Callout, type CalloutProps, type CalloutTone, Card, CardBody, CardHeader, type CardPadding, type CardProps, type CardSectionProps, type CardVariant, Check, CheckCircle, CheckSquare, Checkbox, type CheckboxProps, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clipboard, Clock, Cluster, type ClusterProps, CodeBlock, type CodeBlockProps, type ColorSwatchOption, ColorSwatchPicker, type ColorSwatchPickerProps, type Column, type ColumnAlign, Combobox, type ComboboxOption, type ComboboxProps, type CommandGroup, type CommandItem, CommandMenu, type CommandMenuProps, Compare, ComparisonMeter, type ComparisonMeterProps, ComparisonTable, type ComparisonTableProps, type ComparisonTableRow, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerProps, type ContainerSize, Copy, Cpu, CreditCard, DataTable, type DataTableDensity, type DataTableProps, type DataTableVariant, DataToolbar, type DataToolbarProps, Database, DateRangePicker, type DateRangePickerProps, DefaultErrorFallback, Divider, type DividerProps, DonutMetric, type DonutMetricProps, Download, Drawer, type DrawerProps, Edit, EmptyState, type EmptyStateProps, ErrorBoundary, ErrorState, ExternalLink, Eye, EyeOff, type FAQItem, FAQSection, type FAQSectionProps, Faculty, FeatureCard, type FeatureCardProps, type FeatureFlag, FeatureFlagTable, type FeatureFlagTableProps, FeatureGrid, type FeatureGridProps, FieldHint, type FieldHintProps, FieldLabel, type FieldLabelProps, FileDropzone, type FileDropzoneProps, FileText, FileUpload, FilterChip, type FilterChipProps, FingerprintIcon, FormError, type FormErrorProps, FormField, type FormFieldProps, FormIcon, FormulaIcon, FunnelChart, type FunnelChartProps, type FunnelStep, Gear, Globe, GooglePlayIcon, GraduationCap, Grid, GridBg, HardDrive, Hash, HealthIndicator, type HealthIndicatorProps, type HealthTone, type HeatmapCell, HeatmapGrid, type HeatmapGridProps, HelpCircle, HeroFrame, type HeroFrameProps, History, Home, Icons, Image, type InboxItem, InboxList, type InboxListProps, Info, InfoBanner, type InfoBannerProps, InlineStatus, type InlineStatusProps, type InlineStatusTone, Input, InputGroup, type InputGroupProps, type InputProps, IntegrationCard, type IntegrationCardProps, type IntegrationStatus, Intersect, KanbanBoard, type KanbanBoardProps, type KanbanCardItem, type KanbanColumn, Kbd, type KbdProps, type KeyValueItem, KeyValueList, type KeyValueListProps, Layers, LoadingOverlay, type LoadingOverlayProps, LockIcon, LogOut, LogoCloud, type LogoCloudItem, type LogoCloudProps, LogoMark, Mail, MarketingShell, type MarketingShellProps, MasonryGrid, type MasonryGridProps, Megaphone, Menu, MetricCard, type MetricCardProps, type MetricTrendTone, MockupFrame, type MockupFrameProps, Monitor, Moon, NavAnalytics, NavQrAttendance, NavScoresheet, NavSecurity, type NotificationItem, NotificationList, type NotificationListProps, NumberIcon, OfficeHours, PageHeader, type PageHeaderProps, PageRail, type PageRailItem, type PageRailProps, PageSpinner, Pagination, type PaginationLabels, type PaginationProps, PasswordInput, type PasswordInputProps, Pdf, PlanUsage, type PlanUsageItem, type PlanUsageProps, Plus, Popover, type PopoverProps, PricingCard, type PricingCardProps, Printer, Progress, type ProgressProps, QrCode, RadioButton, type RadioButtonProps, RatingInput, type RatingInputProps, Refresh, RefreshCw, Repeat, Report, ResourceCard, type ResourceCardProps, ResponsiveGrid, type ResponsiveGridProps, type RoadmapItem, RoadmapList, type RoadmapListProps, RotateCcw, SLAStatus, type SLAStatusProps, Scan, ScoreRing, type ScoreRingProps, Search, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, SectionIcons, SectionTitle, type SectionTitleProps, Select, type SelectProps, Server, type ServerSort, Shield, SidebarNav, type SidebarNavGroup, type SidebarNavItem, type SidebarNavProps, Skeleton, SkeletonBanner, SkeletonCard, SkeletonKpiCard, SkeletonPageHeader, type SkeletonProps, SkeletonTable, Slider, type SliderProps, Smartphone, type SortDirection, type SortState, Sparkline, type SparklineProps, Spinner, type SpinnerProps, SplitPane, type SplitPaneProps, Spotlight, Stack, type StackProps, Star, StatGrid, type StatGridProps, StatsBand, type StatsBandItem, type StatsBandProps, StatusBadge, type StatusBadgeProps, type StatusBadgeVariant, type StepItem, Stepper, type StepperProps, StickyBar, type StickyBarProps, Sun, Surface, type SurfacePadding, type SurfaceProps, type SurfaceVariant, Switch, type SwitchProps, type TabItem, Table, Tablet, Tabs, type TabsProps, TapizDocsPage, type TapizDocsPageProps, type TapizFrameworkPreset, type TapizPresetDefinition, TestimonialCard, type TestimonialCardProps, TextIcon, Textarea, TextareaCounter, type TextareaCounterProps, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastProps, ToastProvider, type ToastProviderProps, type ToastState, ToggleGroup, type ToggleGroupProps, type ToggleOption, Tooltip, type TooltipProps, TopNav, type TopNavLink, type TopNavProps, Trash, Trophy, TwoFAIcon, University, User, UserCheck, UserCog, UserMinus, UserPlus, Users, X, Zap, tapizFrameworkPresets, useToast };