@tapizlabs/ui 0.2.1 → 0.2.3

package/dist/index.d.ts

@@ -174,9 +174,13 @@ declare const Icons: {
     externalLink: react.JSX.Element;
 };
 
+interface BaseProps {
+    className?: string;
+}
+
 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 {
+interface ButtonProps extends BaseProps {
     children?: ReactNode;
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
     disabled?: boolean;
@@ -185,7 +189,6 @@ interface ButtonProps {
     size?: Size;
     icon?: ButtonIcon;
     iconRight?: ButtonIcon;
-    className?: string;
     type?: "button" | "submit" | "reset";
     title?: string;
     fullWidth?: boolean;
@@ -264,9 +267,8 @@ interface ToastProviderProps {
 declare function ToastProvider({ children }: ToastProviderProps): react.JSX.Element;
 declare function useToast(): ToastContextValue;
 
-interface FormErrorProps {
+interface FormErrorProps extends BaseProps {
     message: string | null | undefined;
-    className?: string;
 }
 declare function FormError({ message, className }: FormErrorProps): react.JSX.Element | null;
 
@@ -335,24 +337,21 @@ declare function Tooltip({ text, children, position, align, width, wFull }: Tool
 
 type CardVariant = "surface" | "raised" | "outlined" | "brutal" | "glass";
 type CardPadding = "none" | "sm" | "md" | "lg";
-interface CardProps {
+interface CardProps extends BaseProps {
     children: ReactNode;
-    className?: string;
     hover?: boolean;
     style?: CSSProperties;
     variant?: CardVariant;
     padding?: CardPadding;
 }
-interface CardSectionProps {
+interface CardSectionProps extends BaseProps {
     children: ReactNode;
-    className?: string;
 }
 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;
 
-interface SkeletonProps {
-    className?: string;
+interface SkeletonProps extends BaseProps {
 }
 declare function Skeleton({ className }: SkeletonProps): react.JSX.Element;
 
@@ -370,10 +369,9 @@ declare function SkeletonTable({ rows, cols }: {
 declare function SkeletonPageHeader(): react.JSX.Element;
 
 type Variant = "default" | "success" | "warning" | "danger" | "info" | "muted";
-interface BadgeProps {
+interface BadgeProps extends BaseProps {
     children: ReactNode;
     variant?: Variant;
-    className?: string;
 }
 declare function Badge({ children, variant, className }: BadgeProps): react.JSX.Element;
 
@@ -389,24 +387,22 @@ declare function ErrorState({ title, error, }: {
     error: Error | null;
 }): react.JSX.Element;
 
-interface StructuredInfoBannerProps {
+interface StructuredInfoBannerProps extends BaseProps {
     title: string;
     description: string;
     text?: never;
     variant?: never;
-    className?: string;
 }
-interface InlineInfoBannerProps {
+interface InlineInfoBannerProps extends BaseProps {
     text: string;
     variant?: "info" | "warn" | "lock";
-    className?: string;
     title?: never;
     description?: never;
 }
 type InfoBannerProps = StructuredInfoBannerProps | InlineInfoBannerProps;
 declare function InfoBanner(props: InfoBannerProps): react.JSX.Element;
 
-interface PageHeaderProps {
+interface PageHeaderProps extends BaseProps {
     title: string;
     subtitle?: string;
     description?: ReactNode;
@@ -416,38 +412,34 @@ interface PageHeaderProps {
     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 {
+interface MetricCardProps extends BaseProps {
     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 {
+interface StatGridProps extends BaseProps {
     children: ReactNode;
-    className?: string;
     minColumnWidth?: string;
 }
 declare function StatGrid({ children, className, minColumnWidth }: StatGridProps): react.JSX.Element;
 
-interface SectionCardProps {
+interface SectionCardProps extends BaseProps {
     title?: ReactNode;
     eyebrow?: ReactNode;
     description?: ReactNode;
     action?: ReactNode;
     children: ReactNode;
-    className?: string;
 }
 declare function SectionCard({ title, eyebrow, description, action, children, className }: SectionCardProps): react.JSX.Element;
 
@@ -488,17 +480,15 @@ interface PaginationProps {
 }
 declare function Pagination({ page, totalPages, onChange, totalItems, pageSize, labels }: PaginationProps): react.JSX.Element | null;
 
-interface SectionTitleProps {
+interface SectionTitleProps extends BaseProps {
     children: ReactNode;
-    className?: string;
 }
 declare function SectionTitle({ children, className }: SectionTitleProps): react.JSX.Element;
 
 type StatusBadgeVariant = "default" | "active" | "inactive" | "warning" | "success" | "danger" | "info" | "pending";
-interface StatusBadgeProps {
+interface StatusBadgeProps extends BaseProps {
     label: ReactNode;
     variant?: StatusBadgeVariant;
-    className?: string;
 }
 declare function StatusBadge({ label, variant, className }: StatusBadgeProps): react.JSX.Element;
 
@@ -623,56 +613,50 @@ interface DataTableProps<T> {
  */
 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 {
+interface MarketingShellProps extends BaseProps {
     children: ReactNode;
-    className?: string;
     grid?: boolean;
     noise?: boolean;
 }
 declare function MarketingShell({ children, className, grid, noise }: MarketingShellProps): react.JSX.Element;
 
-interface HeroFrameProps {
+interface HeroFrameProps extends BaseProps {
     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 {
+interface FeatureCardProps extends BaseProps {
     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 {
+interface FeatureGridProps extends BaseProps {
     children: ReactNode;
-    className?: string;
 }
 declare function FeatureGrid({ children, className }: FeatureGridProps): react.JSX.Element;
 
-interface CTASectionProps {
+interface CTASectionProps extends BaseProps {
     eyebrow?: ReactNode;
     title: ReactNode;
     description?: ReactNode;
     actions?: ReactNode;
-    className?: string;
 }
 declare function CTASection({ eyebrow, title, description, actions, className }: CTASectionProps): react.JSX.Element;
 
-interface MockupFrameProps {
+interface MockupFrameProps extends BaseProps {
     children: ReactNode;
     title?: ReactNode;
     toolbar?: ReactNode;
-    className?: string;
 }
 declare function MockupFrame({ children, title, toolbar, className }: MockupFrameProps): react.JSX.Element;
 
@@ -681,52 +665,47 @@ interface ComparisonTableRow {
     included: ReactNode;
     alternative?: ReactNode;
 }
-interface ComparisonTableProps {
+interface ComparisonTableProps extends BaseProps {
     rows: ComparisonTableRow[];
     featureHeader?: ReactNode;
     includedHeader?: ReactNode;
     alternativeHeader?: ReactNode;
-    className?: string;
 }
 declare function ComparisonTable({ rows, featureHeader, includedHeader, alternativeHeader, className }: ComparisonTableProps): react.JSX.Element;
 
-interface AppShellProps {
+interface AppShellProps extends BaseProps {
     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 {
+interface SplitPaneProps extends BaseProps {
     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 {
+interface StackProps extends BaseProps {
     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 {
+interface ClusterProps extends BaseProps {
     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;
 
@@ -735,10 +714,9 @@ interface BreadcrumbItem {
     href?: string;
     current?: boolean;
 }
-interface BreadcrumbsProps {
+interface BreadcrumbsProps extends BaseProps {
     items: BreadcrumbItem[];
     separator?: ReactNode;
-    className?: string;
 }
 declare function Breadcrumbs({ items, separator, className }: BreadcrumbsProps): react.JSX.Element;
 
@@ -755,11 +733,10 @@ interface SidebarNavGroup {
     label?: ReactNode;
     items: SidebarNavItem[];
 }
-interface SidebarNavProps {
+interface SidebarNavProps extends BaseProps {
     groups: SidebarNavGroup[];
     header?: ReactNode;
     footer?: ReactNode;
-    className?: string;
 }
 declare function SidebarNav({ groups, header, footer, className }: SidebarNavProps): react.JSX.Element;
 
@@ -769,11 +746,10 @@ interface TopNavLink {
     active?: boolean;
     onClick?: () => void;
 }
-interface TopNavProps {
+interface TopNavProps extends BaseProps {
     brand?: ReactNode;
     links?: TopNavLink[];
     actions?: ReactNode;
-    className?: string;
     sticky?: boolean;
 }
 declare function TopNav({ brand, links, actions, className, sticky }: TopNavProps): react.JSX.Element;
@@ -785,11 +761,10 @@ interface TabItem {
     badge?: ReactNode;
     disabled?: boolean;
 }
-interface TabsProps {
+interface TabsProps extends BaseProps {
     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;
@@ -801,11 +776,10 @@ interface AccordionItem {
     meta?: ReactNode;
     disabled?: boolean;
 }
-interface AccordionProps {
+interface AccordionProps extends BaseProps {
     items: AccordionItem[];
     openIds?: string[];
     onToggle?: (id: string) => void;
-    className?: string;
     allowMultiple?: boolean;
 }
 declare function Accordion({ items, openIds, onToggle, className }: AccordionProps): react.JSX.Element;
@@ -816,14 +790,13 @@ interface StepItem {
     description?: ReactNode;
     status?: "complete" | "current" | "upcoming" | "error";
 }
-interface StepperProps {
+interface StepperProps extends BaseProps {
     steps: StepItem[];
     orientation?: "horizontal" | "vertical";
-    className?: string;
 }
 declare function Stepper({ steps, orientation, className }: StepperProps): react.JSX.Element;
 
-interface DrawerProps {
+interface DrawerProps extends BaseProps {
     open: boolean;
     onClose?: () => void;
     title?: ReactNode;
@@ -831,16 +804,14 @@ interface DrawerProps {
     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 {
+interface PopoverProps extends BaseProps {
     trigger: ReactNode;
     children: ReactNode;
     open?: boolean;
     align?: "start" | "end";
-    className?: string;
 }
 declare function Popover({ trigger, children, open, align, className }: PopoverProps): react.JSX.Element;
 
@@ -868,24 +839,22 @@ interface CommandMenuProps {
 }
 declare function CommandMenu({ open, onClose, query, onQueryChange, groups, placeholder, empty }: CommandMenuProps): react.JSX.Element | null;
 
-interface FormFieldProps {
+interface FormFieldProps extends BaseProps {
     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 {
+interface SwitchProps extends BaseProps {
     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;
 
@@ -894,55 +863,49 @@ interface ToggleOption {
     label: ReactNode;
     disabled?: boolean;
 }
-interface ToggleGroupProps {
+interface ToggleGroupProps extends BaseProps {
     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 {
+interface InputGroupProps extends BaseProps {
     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 {
+interface AlertProps extends BaseProps {
     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 {
+interface ProgressProps extends BaseProps {
     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 {
+interface AvatarProps extends BaseProps {
     src?: string;
     name?: string;
     size?: "xs" | "sm" | "md" | "lg";
-    className?: string;
 }
 declare function Avatar({ src, name, size, className }: AvatarProps): react.JSX.Element;
 
-interface KbdProps {
+interface KbdProps extends BaseProps {
     children: ReactNode;
-    className?: string;
 }
 declare function Kbd({ children, className }: KbdProps): react.JSX.Element;
 
@@ -954,9 +917,8 @@ interface TimelineItem {
     icon?: ReactNode;
     tone?: "neutral" | "info" | "success" | "warning" | "danger";
 }
-interface TimelineProps {
+interface TimelineProps extends BaseProps {
     items: TimelineItem[];
-    className?: string;
 }
 declare function Timeline({ items, className }: TimelineProps): react.JSX.Element;
 
@@ -965,19 +927,17 @@ interface KeyValueItem {
     value: ReactNode;
     description?: ReactNode;
 }
-interface KeyValueListProps {
+interface KeyValueListProps extends BaseProps {
     items: KeyValueItem[];
-    className?: string;
     density?: "compact" | "normal";
 }
 declare function KeyValueList({ items, className, density }: KeyValueListProps): react.JSX.Element;
 
-interface CodeBlockProps {
+interface CodeBlockProps extends BaseProps {
     children: ReactNode;
     language?: string;
     title?: ReactNode;
     actions?: ReactNode;
-    className?: string;
 }
 declare function CodeBlock({ children, language, title, actions, className }: CodeBlockProps): react.JSX.Element;
 
@@ -985,31 +945,28 @@ interface LogoCloudItem {
     name: string;
     logo?: ReactNode;
 }
-interface LogoCloudProps {
+interface LogoCloudProps extends BaseProps {
     title?: ReactNode;
     items: LogoCloudItem[];
-    className?: string;
 }
 declare function LogoCloud({ title, items, className }: LogoCloudProps): react.JSX.Element;
 
-interface TestimonialCardProps {
+interface TestimonialCardProps extends BaseProps {
     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 {
+interface PricingCardProps extends BaseProps {
     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;
 
@@ -1018,9 +975,8 @@ interface StatsBandItem {
     label: ReactNode;
     description?: ReactNode;
 }
-interface StatsBandProps {
+interface StatsBandProps extends BaseProps {
     items: StatsBandItem[];
-    className?: string;
 }
 declare function StatsBand({ items, className }: StatsBandProps): react.JSX.Element;
 
@@ -1034,49 +990,44 @@ interface TapizPresetDefinition {
 declare const tapizFrameworkPresets: Record<TapizFrameworkPreset, TapizPresetDefinition>;
 
 type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
-interface ContainerProps {
+interface ContainerProps extends BaseProps {
     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 {
+interface SurfaceProps extends BaseProps {
     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 {
+interface DividerProps extends BaseProps {
     orientation?: "horizontal" | "vertical";
     label?: string;
-    className?: string;
 }
 declare function Divider({ orientation, label, className }: DividerProps): react.JSX.Element;
 
-interface ResponsiveGridProps {
+interface ResponsiveGridProps extends BaseProps {
     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 {
+interface SparklineProps extends BaseProps {
     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;
@@ -1086,43 +1037,39 @@ interface BarListItem {
     value: number;
     detail?: ReactNode;
 }
-interface BarListProps {
+interface BarListProps extends BaseProps {
     items: BarListItem[];
     max?: number;
     valueFormatter?: (value: number) => ReactNode;
-    className?: string;
 }
 declare function BarList({ items, max, valueFormatter, className }: BarListProps): react.JSX.Element;
 
-interface DonutMetricProps {
+interface DonutMetricProps extends BaseProps {
     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 {
+interface FilterChipProps extends BaseProps {
     children: ReactNode;
     active?: boolean;
     onRemove?: () => void;
-    className?: string;
 }
 declare function FilterChip({ children, active, onRemove, className }: FilterChipProps): react.JSX.Element;
 
-interface DataToolbarProps {
+interface DataToolbarProps extends BaseProps {
     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 {
+interface ResourceCardProps extends BaseProps {
     title: ReactNode;
     description?: ReactNode;
     eyebrow?: ReactNode;
@@ -1131,28 +1078,25 @@ interface ResourceCardProps {
     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 {
+interface IntegrationCardProps extends BaseProps {
     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 {
+interface HealthIndicatorProps extends BaseProps {
     tone?: HealthTone;
     label?: ReactNode;
     detail?: ReactNode;
-    className?: string;
 }
 declare function HealthIndicator({ tone, label, detail, className }: HealthIndicatorProps): react.JSX.Element;
 
@@ -1163,9 +1107,8 @@ interface AuditLogItem {
     detail?: ReactNode;
     initials?: string;
 }
-interface AuditLogProps {
+interface AuditLogProps extends BaseProps {
     items: AuditLogItem[];
-    className?: string;
 }
 declare function AuditLog({ items, className }: AuditLogProps): react.JSX.Element;
 
@@ -1182,9 +1125,8 @@ interface KanbanColumn {
     description?: ReactNode;
     items: KanbanCardItem[];
 }
-interface KanbanBoardProps {
+interface KanbanBoardProps extends BaseProps {
     columns: KanbanColumn[];
-    className?: string;
 }
 declare function KanbanBoard({ columns, className }: KanbanBoardProps): react.JSX.Element;
 
@@ -1198,10 +1140,9 @@ interface AccessMatrixPermission {
     description?: ReactNode;
     roles: Record<string, boolean>;
 }
-interface AccessMatrixProps {
+interface AccessMatrixProps extends BaseProps {
     roles: AccessMatrixRole[];
     permissions: AccessMatrixPermission[];
-    className?: string;
 }
 declare function AccessMatrix({ roles, permissions, className }: AccessMatrixProps): react.JSX.Element;
 
@@ -1212,10 +1153,9 @@ interface CalendarGridDay {
     selected?: boolean;
     events?: ReactNode[];
 }
-interface CalendarGridProps {
+interface CalendarGridProps extends BaseProps {
     days: CalendarGridDay[];
     weekdays?: ReactNode[];
-    className?: string;
 }
 declare function CalendarGrid({ days, weekdays, className }: CalendarGridProps): react.JSX.Element;
 
@@ -1229,7 +1169,6 @@ interface FileDropzoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     title?: ReactNode;
     description?: ReactNode;
     actionLabel?: ReactNode;
-    className?: string;
 }
 declare function FileDropzone({ title, description, actionLabel, className, ...props }: FileDropzoneProps): react.JSX.Element;
 
@@ -1245,21 +1184,19 @@ interface TextareaCounterProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
 declare function TextareaCounter({ maxLength, value, className, ...props }: TextareaCounterProps): react.JSX.Element;
 
 type CalloutTone = "info" | "success" | "warning" | "danger" | "neutral";
-interface CalloutProps {
+interface CalloutProps extends BaseProps {
     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 {
+interface LoadingOverlayProps extends BaseProps {
     visible?: boolean;
     label?: ReactNode;
     children: ReactNode;
-    className?: string;
 }
 declare function LoadingOverlay({ visible, label, children, className }: LoadingOverlayProps): react.JSX.Element;
 
@@ -1271,23 +1208,15 @@ interface NotificationItem {
     unread?: boolean;
     action?: ReactNode;
 }
-interface NotificationListProps {
+interface NotificationListProps extends BaseProps {
     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 {
+interface MasonryGridProps extends BaseProps {
     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;
@@ -1298,19 +1227,17 @@ interface PageRailItem {
     active?: boolean;
     meta?: ReactNode;
 }
-interface PageRailProps {
+interface PageRailProps extends BaseProps {
     title?: ReactNode;
     items: PageRailItem[];
     actions?: ReactNode;
-    className?: string;
     style?: CSSProperties;
 }
 declare function PageRail({ title, items, actions, className, style }: PageRailProps): react.JSX.Element;
 
-interface StickyBarProps {
+interface StickyBarProps extends BaseProps {
     children: ReactNode;
     position?: "top" | "bottom";
-    className?: string;
     style?: CSSProperties;
 }
 declare function StickyBar({ children, position, className, style }: StickyBarProps): react.JSX.Element;
@@ -1327,12 +1254,11 @@ interface ComboboxProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "c
 }
 declare function Combobox({ options, placeholder, invalid, className, ...props }: ComboboxProps): react.JSX.Element;
 
-interface DateRangePickerProps {
+interface DateRangePickerProps extends BaseProps {
     startLabel?: string;
     endLabel?: string;
     startProps?: InputHTMLAttributes<HTMLInputElement>;
     endProps?: InputHTMLAttributes<HTMLInputElement>;
-    className?: string;
 }
 declare function DateRangePicker({ startLabel, endLabel, startProps, endProps, className }: DateRangePickerProps): react.JSX.Element;
 
@@ -1341,30 +1267,27 @@ interface ColorSwatchOption {
     label: ReactNode;
     color: string;
 }
-interface ColorSwatchPickerProps {
+interface ColorSwatchPickerProps extends BaseProps {
     options: ColorSwatchOption[];
     value?: string;
     onChange?: (value: string) => void;
-    className?: string;
 }
 declare function ColorSwatchPicker({ options, value, onChange, className }: ColorSwatchPickerProps): react.JSX.Element;
 
-interface RatingInputProps {
+interface RatingInputProps extends BaseProps {
     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 {
+interface ScoreRingProps extends BaseProps {
     value: number;
     max?: number;
     label?: ReactNode;
     size?: number;
-    className?: string;
 }
 declare function ScoreRing({ value, max, label, size, className }: ScoreRingProps): react.JSX.Element;
 
@@ -1373,11 +1296,10 @@ interface HeatmapCell {
     label?: ReactNode;
     title?: string;
 }
-interface HeatmapGridProps {
+interface HeatmapGridProps extends BaseProps {
     cells: HeatmapCell[];
     columns?: number;
     max?: number;
-    className?: string;
 }
 declare function HeatmapGrid({ cells, columns, max, className }: HeatmapGridProps): react.JSX.Element;
 
@@ -1386,17 +1308,15 @@ interface FunnelStep {
     value: number;
     meta?: ReactNode;
 }
-interface FunnelChartProps {
+interface FunnelChartProps extends BaseProps {
     steps: FunnelStep[];
-    className?: string;
 }
 declare function FunnelChart({ steps, className }: FunnelChartProps): react.JSX.Element;
 
-interface ComparisonMeterProps {
+interface ComparisonMeterProps extends BaseProps {
     leftLabel: ReactNode;
     rightLabel: ReactNode;
     value: number;
-    className?: string;
 }
 declare function ComparisonMeter({ leftLabel, rightLabel, value, className }: ComparisonMeterProps): react.JSX.Element;
 
@@ -1407,9 +1327,8 @@ interface ActivityFeedItem {
     avatarUrl?: string;
     meta?: ReactNode;
 }
-interface ActivityFeedProps {
+interface ActivityFeedProps extends BaseProps {
     items: ActivityFeedItem[];
-    className?: string;
 }
 declare function ActivityFeed({ items, className }: ActivityFeedProps): react.JSX.Element;
 
@@ -1421,9 +1340,8 @@ interface InboxItem {
     unread?: boolean;
     tag?: ReactNode;
 }
-interface InboxListProps {
+interface InboxListProps extends BaseProps {
     items: InboxItem[];
-    className?: string;
 }
 declare function InboxList({ items, className }: InboxListProps): react.JSX.Element;
 
@@ -1433,19 +1351,17 @@ interface ApprovalItem {
     description?: ReactNode;
     priority?: "low" | "medium" | "high";
 }
-interface ApprovalQueueProps {
+interface ApprovalQueueProps extends BaseProps {
     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 {
+interface SLAStatusProps extends BaseProps {
     label: ReactNode;
     value: number;
     target?: number;
-    className?: string;
 }
 declare function SLAStatus({ label, value, target, className }: SLAStatusProps): react.JSX.Element;
 
@@ -1456,10 +1372,9 @@ interface FeatureFlag {
     enabled?: boolean;
     rollout?: ReactNode;
 }
-interface FeatureFlagTableProps {
+interface FeatureFlagTableProps extends BaseProps {
     flags: FeatureFlag[];
     onToggle?: (key: string, enabled: boolean) => void;
-    className?: string;
 }
 declare function FeatureFlagTable({ flags, onToggle, className }: FeatureFlagTableProps): react.JSX.Element;
 
@@ -1468,17 +1383,15 @@ interface PlanUsageItem {
     used: number;
     limit: number;
 }
-interface PlanUsageProps {
+interface PlanUsageProps extends BaseProps {
     title?: ReactNode;
     items: PlanUsageItem[];
-    className?: string;
 }
 declare function PlanUsage({ title, items, className }: PlanUsageProps): react.JSX.Element;
 
-interface AnnouncementBarProps {
+interface AnnouncementBarProps extends BaseProps {
     children: ReactNode;
     action?: ReactNode;
-    className?: string;
 }
 declare function AnnouncementBar({ children, action, className }: AnnouncementBarProps): react.JSX.Element;
 
@@ -1486,11 +1399,10 @@ interface FAQItem {
     question: ReactNode;
     answer: ReactNode;
 }
-interface FAQSectionProps {
+interface FAQSectionProps extends BaseProps {
     title?: ReactNode;
     description?: ReactNode;
     items: FAQItem[];
-    className?: string;
 }
 declare function FAQSection({ title, description, items, className }: FAQSectionProps): react.JSX.Element;
 
@@ -1500,19 +1412,17 @@ interface RoadmapItem {
     status?: ReactNode;
     quarter?: ReactNode;
 }
-interface RoadmapListProps {
+interface RoadmapListProps extends BaseProps {
     items: RoadmapItem[];
-    className?: string;
 }
 declare function RoadmapList({ items, className }: RoadmapListProps): react.JSX.Element;
 
 type InlineStatusTone = "neutral" | "success" | "warning" | "danger" | "info";
-interface InlineStatusProps {
+interface InlineStatusProps extends BaseProps {
     tone?: InlineStatusTone;
     children: ReactNode;
     pulse?: boolean;
-    className?: string;
 }
 declare function InlineStatus({ tone, children, pulse, className }: InlineStatusProps): react.JSX.Element;
 
-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 };
+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, type BaseProps, 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, 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 };