@kjaniec-dev/ui 0.8.0 → 0.9.0

package/dist/index.d.cts

@@ -57,6 +57,47 @@ interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
 
+type ProgressRingSize = "sm" | "md" | "lg" | "xl";
+type ProgressRingTone = "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+interface ProgressRingProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Current progress value. Defaults to 0. */
+    value?: number;
+    /** Minimum progress value. Defaults to 0. */
+    min?: number;
+    /** Maximum progress value. Defaults to 100. */
+    max?: number;
+    /** Preset size of the ring. Defaults to "md". */
+    size?: ProgressRingSize;
+    /** Override stroke thickness (in px). */
+    strokeWidth?: number;
+    /** Color tone of the progress indicator. Defaults to "primary". */
+    tone?: ProgressRingTone;
+    /** Whether to show the percentage text inside the ring center if no children are provided. Defaults to false. */
+    showValue?: boolean;
+    /** Optional formatter for the center percentage display. */
+    formatValue?: (value: number, percentage: number) => React.ReactNode;
+    /** Additional CSS class for the background track circle. */
+    trackClassName?: string;
+    /** Additional CSS class for the progress indicator circle. */
+    indicatorClassName?: string;
+    /** Custom center content. */
+    children?: React.ReactNode;
+}
+declare const ProgressRing: React.ForwardRefExoticComponent<ProgressRingProps & React.RefAttributes<HTMLDivElement>>;
+interface ProgressRingFieldProps extends ProgressRingProps {
+    /** Field label text. */
+    label: string;
+    /** Helper hint text displayed beneath the control. */
+    hint?: string;
+    /** Error message displayed beneath the control. */
+    error?: string;
+    /** Renders a required indicator (*). */
+    required?: boolean;
+    /** Class name for the outer field wrapper div. */
+    fieldClassName?: string;
+}
+declare const ProgressRingField: React.ForwardRefExoticComponent<ProgressRingFieldProps & React.RefAttributes<HTMLDivElement>>;
+
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /** Visual error state (red border + ring). */
     error?: boolean;
@@ -144,6 +185,21 @@ interface SegmentedProps<T extends string> {
 /** Segmented control / single-select toggle group. Controlled. */
 declare function Segmented<T extends string>({ options, value, onChange, className, ...props }: SegmentedProps<T>): React.JSX.Element;
 
+interface ToggleGroupOption<T extends string> {
+    value: T;
+    label: React.ReactNode;
+}
+interface ToggleGroupProps<T extends string> {
+    options: ToggleGroupOption<T>[];
+    value: T[];
+    onChange: (value: T[]) => void;
+    disabled?: boolean;
+    className?: string;
+    "aria-label": string;
+}
+/** Multi-select toggle row. Always controlled — each button's pressed state is independent. */
+declare function ToggleGroup<T extends string>({ options, value, onChange, disabled, className, ...props }: ToggleGroupProps<T>): React.JSX.Element;
+
 interface CardProps extends Omit<React.AllHTMLAttributes<HTMLElement>, "as"> {
     as?: React.ElementType;
     /** Drop the border + heavier shadow for a floating look. */
@@ -306,7 +362,7 @@ interface ModalProps {
 }
 /** Centered overlay dialog. Closes on backdrop click and Escape. Includes focus trap and restore. */
 declare function Modal({ open, onClose, children, width, className, showClose }: ModalProps): React.JSX.Element;
-declare function ModalTitle({ className, id, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
+declare function ModalTitle({ className, id, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
 declare function ModalDescription({ className, id, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
 declare function ModalActions({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
 
@@ -333,6 +389,34 @@ interface PageHeaderProps {
 }
 declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
 
+type SectionHeaderAlign = "left" | "center";
+type SectionHeaderHeadingLevel = "h2" | "h3" | "h4";
+interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    kicker?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    align?: SectionHeaderAlign;
+    headingLevel?: SectionHeaderHeadingLevel;
+    divider?: boolean;
+}
+type SectionHeaderKickerProps = React.HTMLAttributes<HTMLParagraphElement>;
+interface SectionHeaderTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    as?: SectionHeaderHeadingLevel;
+}
+type SectionHeaderDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+type SectionHeaderActionsProps = React.HTMLAttributes<HTMLDivElement>;
+declare const SectionHeaderKicker: React.ForwardRefExoticComponent<SectionHeaderKickerProps & React.RefAttributes<HTMLParagraphElement>>;
+declare const SectionHeaderTitle: React.ForwardRefExoticComponent<SectionHeaderTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+declare const SectionHeaderDescription: React.ForwardRefExoticComponent<SectionHeaderDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+declare const SectionHeaderActions: React.ForwardRefExoticComponent<SectionHeaderActionsProps & React.RefAttributes<HTMLDivElement>>;
+declare const SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & React.RefAttributes<HTMLDivElement>> & {
+    Kicker: typeof SectionHeaderKicker;
+    Title: typeof SectionHeaderTitle;
+    Description: typeof SectionHeaderDescription;
+    Actions: typeof SectionHeaderActions;
+};
+
 interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
     icon?: React.ReactNode;
     title: string;
@@ -545,7 +629,7 @@ interface BottomSheetProps {
 }
 declare function BottomSheet({ open, onClose, children, maxWidth, className, showClose, }: BottomSheetProps): React.JSX.Element | null;
 declare function BottomSheetHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-declare function BottomSheetTitle({ className, id, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
+declare function BottomSheetTitle({ className, id, children, ...props }: React.HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
 declare function BottomSheetDescription({ className, id, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
 declare function BottomSheetContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
 declare function BottomSheetFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
@@ -573,6 +657,15 @@ interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLDivElement>>;
 
+interface SeparatorProps {
+    orientation?: "horizontal" | "vertical";
+    /** Purely visual by default (role="none", hidden from a11y tree). Set false for a semantically meaningful divider. */
+    decorative?: boolean;
+    className?: string;
+}
+/** Thin layout divider. Decorative by default; pass decorative={false} for a semantic role="separator". */
+declare function Separator({ orientation, decorative, className }: SeparatorProps): React.JSX.Element;
+
 interface PopoverProps {
     /** Trigger and content elements. */
     children: React.ReactNode;
@@ -595,4 +688,574 @@ interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function PopoverContent({ className, side, align, children, ...props }: PopoverContentProps): React.JSX.Element | null;
 
-export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, Alert, type AlertProps, Avatar, AvatarGroup, type AvatarProps, Badge, type BadgeProps, BottomNavigation, type BottomNavigationItem, type BottomNavigationProps, BottomSheet, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHeader, type BottomSheetProps, BottomSheetTitle, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbSeparator, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, CheckboxField, type CheckboxFieldProps, type CheckboxProps, CodeBlock, type CodeBlockProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, DashboardShell, type DashboardShellProps, DataTable, type DataTableColumn, type DataTableProps, DetailPageLayout, type DetailPageLayoutProps, Drawer, type DrawerProps, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuSeparator, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Fab, type FabProps, Field, FormField, type FormFieldProps, Hint, type HintProps, Input, type InputProps, Kbd, type KbdProps, Label, type LabelProps, MetricCard, type MetricCardProps, Modal, ModalActions, ModalDescription, type ModalProps, ModalTitle, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, Radio, type RadioProps, Segmented, type SegmentedOption, type SegmentedProps, Select, SelectField, type SelectFieldProps, type SelectProps, SettingsLayout, type SettingsLayoutProps, SidebarNav, type SidebarNavGroup, type SidebarNavItem, type SidebarNavProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stat, type StatProps, Switch, type SwitchProps, Table, TableBody, TableCell, type TableCellProps, TableHead, TableHeader, TableRow, TableToolbar, type TableToolbarProps, TableWrap, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, TextField, type TextFieldProps, Textarea, type TextareaProps, type ToastOptions, ToastProvider, type ToastTone, Tooltip, type TooltipProps, badgeVariants, buttonVariants, cn, sliderThumbCSS, useToast };
+interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface ComboboxBaseProps {
+    options: ComboboxOption[];
+    /** Trigger text when nothing is selected. Default "Select…". */
+    placeholder?: string;
+    /** Search input placeholder inside the popup. Default "Search…". */
+    searchPlaceholder?: string;
+    /** Shown when the filter matches no options. Default "No results". */
+    emptyMessage?: string;
+    disabled?: boolean;
+    /** Visual error state (red border + aria-invalid on the trigger). */
+    error?: boolean;
+    /** Marks the trigger aria-required (buttons have no native `required` attribute). */
+    required?: boolean;
+    className?: string;
+    id?: string;
+    name?: string;
+    "aria-describedby"?: string;
+}
+type ComboboxProps = (ComboboxBaseProps & {
+    multiple?: false;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+}) | (ComboboxBaseProps & {
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+});
+declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLButtonElement>>;
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+type ComboboxFieldProps = DistributiveOmit<ComboboxProps, "error"> & {
+    label: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+};
+declare const ComboboxField: React.ForwardRefExoticComponent<ComboboxFieldProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface CalendarProps {
+    value?: Date;
+    defaultValue?: Date;
+    onChange?: (date: Date) => void;
+    /** Controlled displayed month. Omit for uncontrolled behavior. */
+    month?: Date;
+    /** Initial displayed month when uncontrolled. Defaults to `value` ?? today. */
+    defaultMonth?: Date;
+    onMonthChange?: (month: Date) => void;
+    min?: Date;
+    max?: Date;
+    disabledDates?: (date: Date) => boolean;
+    className?: string;
+}
+declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
+
+interface DatePickerProps {
+    value?: Date;
+    defaultValue?: Date;
+    onChange?: (date: Date) => void;
+    min?: Date;
+    max?: Date;
+    disabledDates?: (date: Date) => boolean;
+    /** Trigger text when nothing is selected. Default "Pick a date…". */
+    placeholder?: string;
+    disabled?: boolean;
+    /** Visual error state (red border + aria-invalid on the trigger). */
+    error?: boolean;
+    /** Marks the trigger aria-required (buttons have no native `required` attribute). */
+    required?: boolean;
+    className?: string;
+    id?: string;
+    name?: string;
+    "aria-describedby"?: string;
+}
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
+interface DatePickerFieldProps extends Omit<DatePickerProps, "error"> {
+    label: string;
+    hint?: string;
+    error?: string;
+}
+declare const DatePickerField: React.ForwardRefExoticComponent<DatePickerFieldProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface DateRange {
+    start?: Date;
+    end?: Date;
+}
+interface RangeCalendarProps {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (range: DateRange) => void;
+    /** Controlled left-month. The right month is always this + 1 (locked navigation). */
+    month?: Date;
+    defaultMonth?: Date;
+    onMonthChange?: (month: Date) => void;
+    min?: Date;
+    max?: Date;
+    disabledDates?: (date: Date) => boolean;
+    className?: string;
+}
+declare const RangeCalendar: React.ForwardRefExoticComponent<RangeCalendarProps & React.RefAttributes<HTMLDivElement>>;
+
+interface DateRangePickerProps {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (range: DateRange) => void;
+    min?: Date;
+    max?: Date;
+    disabledDates?: (date: Date) => boolean;
+    /** Trigger text when nothing is selected. Default "Pick a date range…". */
+    placeholder?: string;
+    disabled?: boolean;
+    /** Visual error state (red border + aria-invalid on the trigger). */
+    error?: boolean;
+    /** Marks the trigger aria-required (buttons have no native `required` attribute). */
+    required?: boolean;
+    className?: string;
+    id?: string;
+    name?: string;
+    "aria-describedby"?: string;
+}
+declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLButtonElement>>;
+interface DateRangePickerFieldProps extends Omit<DateRangePickerProps, "error"> {
+    label: string;
+    hint?: string;
+    error?: string;
+}
+declare const DateRangePickerField: React.ForwardRefExoticComponent<DateRangePickerFieldProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface DropzoneProps {
+    onFiles: (files: File[]) => void;
+    /** Native picker filter hint. Real enforcement lives in FileUpload's validation. */
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    className?: string;
+    /** Overrides the default drop-region content. */
+    children?: React.ReactNode;
+    id?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+    "aria-required"?: boolean;
+}
+declare const Dropzone: React.ForwardRefExoticComponent<DropzoneProps & React.RefAttributes<HTMLButtonElement>>;
+
+type UploadStatus = "pending" | "uploading" | "success" | "error";
+interface UploadItem {
+    id: string;
+    file: File;
+    /** Defaults to "pending" when unset. Drives the row's rendering. */
+    status?: UploadStatus;
+    /** 0–100. Shown as a Progress bar when status === "uploading". */
+    progress?: number;
+    /** Shown (danger tone) when status === "error". */
+    error?: string;
+}
+interface FileRejection {
+    file: File;
+    reason: "type" | "size" | "count";
+}
+
+interface FileUploadProps {
+    value?: UploadItem[];
+    defaultValue?: UploadItem[];
+    onChange?: (items: UploadItem[]) => void;
+    /** Called with files rejected by validation on a given drop/selection. */
+    onReject?: (rejections: FileRejection[]) => void;
+    accept?: string;
+    maxSize?: number;
+    maxFiles?: number;
+    multiple?: boolean;
+    disabled?: boolean;
+    /** Visual error state (danger border + aria-invalid on the dropzone). */
+    error?: boolean;
+    /** aria-required on the dropzone. */
+    required?: boolean;
+    className?: string;
+    id?: string;
+    "aria-describedby"?: string;
+}
+declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLButtonElement>>;
+interface FileUploadFieldProps extends Omit<FileUploadProps, "error"> {
+    label: string;
+    hint?: string;
+    error?: string;
+}
+declare const FileUploadField: React.ForwardRefExoticComponent<FileUploadFieldProps & React.RefAttributes<HTMLButtonElement>>;
+
+type TimelineAlign = "left" | "right" | "alternate";
+type TimelineDotVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
+type TimelineDotSize = "sm" | "md" | "lg";
+interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: TimelineAlign;
+}
+declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<HTMLDivElement>>;
+interface TimelineItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    index?: number;
+}
+declare const TimelineItem: React.ForwardRefExoticComponent<TimelineItemProps & React.RefAttributes<HTMLDivElement>>;
+interface TimelineSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    isEven?: boolean;
+    align?: TimelineAlign;
+}
+declare const TimelineSeparator: React.ForwardRefExoticComponent<TimelineSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+interface TimelineConnectorProps extends React.HTMLAttributes<HTMLDivElement> {
+    dashed?: boolean;
+}
+declare const TimelineConnector: React.ForwardRefExoticComponent<TimelineConnectorProps & React.RefAttributes<HTMLDivElement>>;
+interface TimelineDotProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: TimelineDotVariant;
+    size?: TimelineDotSize;
+}
+declare const TimelineDot: React.ForwardRefExoticComponent<TimelineDotProps & React.RefAttributes<HTMLDivElement>>;
+interface TimelineContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    isEven?: boolean;
+    align?: TimelineAlign;
+}
+declare const TimelineContent: React.ForwardRefExoticComponent<TimelineContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const TimelineTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const TimelineTime: React.ForwardRefExoticComponent<React.TimeHTMLAttributes<HTMLTimeElement> & React.RefAttributes<HTMLTimeElement>>;
+
+interface UseStepperOptions {
+    initialStep?: number;
+    stepsCount: number;
+}
+interface UseStepperReturn {
+    activeStep: number;
+    completedSteps: number[];
+    setStep: (step: number) => void;
+    nextStep: () => void;
+    prevStep: () => void;
+    completeStep: (step: number) => void;
+    uncompleteStep: (step: number) => void;
+    reset: () => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+}
+declare function useStepper({ initialStep, stepsCount }: UseStepperOptions): UseStepperReturn;
+type StepperOrientation = "horizontal" | "vertical";
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    orientation?: StepperOrientation;
+    linear?: boolean;
+}
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+interface StepperContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: number;
+}
+declare const StepperContent: React.ForwardRefExoticComponent<StepperContentProps & React.RefAttributes<HTMLDivElement>>;
+type StepperListProps = React.HTMLAttributes<HTMLDivElement>;
+declare const StepperList: React.ForwardRefExoticComponent<StepperListProps & React.RefAttributes<HTMLDivElement>>;
+interface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: number;
+    disabled?: boolean;
+}
+declare const StepperItem: React.ForwardRefExoticComponent<StepperItemProps & React.RefAttributes<HTMLDivElement>>;
+type StepperSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
+declare const StepperSeparator: React.ForwardRefExoticComponent<StepperSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+type StepperTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+declare const StepperTrigger: React.ForwardRefExoticComponent<StepperTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+type StepperIndicatorProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const StepperIndicator: React.ForwardRefExoticComponent<StepperIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+type StepperTitleProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const StepperTitle: React.ForwardRefExoticComponent<StepperTitleProps & React.RefAttributes<HTMLSpanElement>>;
+type StepperDescriptionProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const StepperDescription: React.ForwardRefExoticComponent<StepperDescriptionProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
+    banner?: React.ReactNode;
+    header?: React.ReactNode;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    contentWidth?: "default" | "narrow" | "wide" | "full";
+    headerPosition?: "sticky" | "fixed" | "static";
+    headerVariant?: "glass" | "solid" | "transparent";
+    paddedContent?: boolean;
+    mobileNav?: React.ReactNode;
+}
+interface AppShellBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "primary" | "accent" | "muted";
+    closable?: boolean;
+    onClose?: () => void;
+    children: React.ReactNode;
+}
+interface AppShellHeaderProps extends React.HTMLAttributes<HTMLElement> {
+    variant?: "glass" | "solid" | "transparent";
+    position?: "sticky" | "fixed" | "static";
+    bordered?: boolean;
+    children?: React.ReactNode;
+    mobileNav?: React.ReactNode;
+}
+interface AppShellMainProps extends React.HTMLAttributes<HTMLElement> {
+    width?: "default" | "narrow" | "wide" | "full";
+    padded?: boolean;
+    children: React.ReactNode;
+}
+interface AppShellFooterProps extends React.HTMLAttributes<HTMLElement> {
+    bordered?: boolean;
+    children: React.ReactNode;
+}
+declare const AppShellBanner: React.ForwardRefExoticComponent<AppShellBannerProps & React.RefAttributes<HTMLDivElement>>;
+declare const AppShellHeader: React.ForwardRefExoticComponent<AppShellHeaderProps & React.RefAttributes<HTMLElement>>;
+declare const AppShellMain: React.ForwardRefExoticComponent<AppShellMainProps & React.RefAttributes<HTMLElement>>;
+declare const AppShellFooter: React.ForwardRefExoticComponent<AppShellFooterProps & React.RefAttributes<HTMLElement>>;
+type AppShellComponent = React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLDivElement>> & {
+    Banner: typeof AppShellBanner;
+    Header: typeof AppShellHeader;
+    Main: typeof AppShellMain;
+    Footer: typeof AppShellFooter;
+};
+declare const AppShell: AppShellComponent;
+
+type RatingSize = "sm" | "md" | "lg" | "xl";
+type RatingIconType = "star" | "heart" | "flame" | "shield" | "thumb";
+interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value?: number;
+    defaultValue?: number;
+    max?: number;
+    precision?: number;
+    size?: RatingSize;
+    icon?: RatingIconType | React.ComponentType<{
+        className?: string;
+    }>;
+    color?: string;
+    emptyColor?: string;
+    allowClear?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    hoverPreview?: boolean;
+    showValue?: boolean;
+    showCount?: boolean;
+    count?: number;
+    name?: string;
+    onChange?: (value: number) => void;
+    onHoverChange?: (value: number | null) => void;
+}
+declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
+
+interface RatingFieldProps extends RatingProps {
+    label?: React.ReactNode;
+    helperText?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    required?: boolean;
+    containerClassName?: string;
+}
+declare const RatingField: React.ForwardRefExoticComponent<RatingFieldProps & React.RefAttributes<HTMLDivElement>>;
+
+interface RatingDistributionItem {
+    stars: number;
+    count: number;
+    percentage: number;
+}
+interface RatingSummaryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    average: number;
+    totalCount: number;
+    distribution: RatingDistributionItem[];
+    max?: number;
+    size?: RatingSize;
+    icon?: RatingIconType | React.ComponentType<{
+        className?: string;
+    }>;
+}
+declare const RatingSummary: React.ForwardRefExoticComponent<RatingSummaryProps & React.RefAttributes<HTMLDivElement>>;
+
+type PricingFeatureItem = string | {
+    text: string;
+    included?: boolean;
+    tooltip?: string;
+};
+interface PricingCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    name: string;
+    price: string | number;
+    period?: string;
+    description?: string;
+    features?: PricingFeatureItem[];
+    variant?: "default" | "featured" | "outline";
+    badge?: string;
+    popular?: boolean;
+    ctaText?: string;
+    onCtaClick?: React.MouseEventHandler<HTMLButtonElement>;
+    ctaHref?: string;
+    cta?: React.ReactNode;
+    disabled?: boolean;
+}
+declare const PricingCard: React.ForwardRefExoticComponent<PricingCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface BlogCardAuthor {
+    name: string;
+    avatarUrl?: string;
+    role?: string;
+}
+interface BlogCardProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "title"> {
+    title: string;
+    description?: string;
+    coverUrl?: string;
+    coverAlt?: string;
+    category?: string;
+    readTime?: string;
+    publishedAt?: string;
+    author?: BlogCardAuthor;
+    orientation?: "vertical" | "horizontal";
+    href?: string;
+}
+declare const BlogCard: React.ForwardRefExoticComponent<BlogCardProps & React.RefAttributes<HTMLElement>>;
+
+interface ProjectCardMetric {
+    label?: string;
+    value: string | number;
+    icon?: React.ReactNode;
+}
+interface ProjectCardStatus {
+    label: string;
+    variant?: "success" | "warning" | "danger" | "neutral" | "info";
+}
+interface ProjectCardProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "title"> {
+    title: string;
+    description?: string;
+    status?: ProjectCardStatus;
+    techStack?: string[];
+    metrics?: ProjectCardMetric[];
+    updatedAt?: string;
+    actions?: React.ReactNode;
+}
+declare const ProjectCard: React.ForwardRefExoticComponent<ProjectCardProps & React.RefAttributes<HTMLElement>>;
+
+interface NotificationItemData {
+    /** Unique stable identifier. */
+    id: string;
+    /** Primary notification text. */
+    title: React.ReactNode;
+    /** Optional second line (preview, quote, etc.). */
+    body?: React.ReactNode;
+    /**
+     * Leading visual (28×28 circle).
+     * SVG ReactNode → icon mode. If avatarSrc is also provided, avatarSrc wins.
+     */
+    icon?: React.ReactNode;
+    /** Image URL for avatar mode. */
+    avatarSrc?: string;
+    /** 1–2 character initials for avatar fallback. */
+    avatarFallback?: string;
+    /** Shown as a relative time string. */
+    timestamp: Date | string;
+    /** Defaults to false (unread). */
+    read?: boolean;
+    /**
+     * If provided, the row renders as <a href={href}>.
+     * Clicking marks the item read and navigates.
+     */
+    href?: string;
+    /** Called after the row is clicked (after mark-read). */
+    onClick?: (id: string) => void;
+}
+declare function formatRelativeTime(date: Date | string): string;
+interface InboxStateReturn {
+    items: NotificationItemData[];
+    unreadCount: number;
+    markRead: (id: string) => void;
+    markAllRead: () => void;
+    dismiss: (id: string) => void;
+}
+/**
+ * Local-state convenience hook for InboxPopover.
+ * Intended for demos, Storybook stories, and simple apps.
+ *
+ * NOTE: `initial` is used only as the seed value for `useState`.
+ * Re-rendering the parent with a new `initial` array does NOT reset
+ * the hook's state. This is intentional — the hook owns its state
+ * independently after mount. To reset from the outside, remount the
+ * component using a `key` prop.
+ */
+declare function useInboxState(initial: NotificationItemData[]): InboxStateReturn;
+interface InboxPopoverProps {
+    children: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+declare function InboxPopover({ children, className, open: openProp, onOpenChange, }: InboxPopoverProps): React.JSX.Element;
+interface InboxTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Badge count. Hidden when 0 or undefined. */
+    unreadCount?: number;
+    /** Accessible label (default: "Notifications"). */
+    label?: string;
+}
+declare function InboxTrigger({ unreadCount, label, className, onClick, ...props }: InboxTriggerProps): React.JSX.Element;
+interface NotificationItemProps {
+    item: NotificationItemData;
+    onDismiss?: (id: string) => void;
+    className?: string;
+}
+declare function NotificationItem({ item, onDismiss, className }: NotificationItemProps): React.JSX.Element;
+interface InboxContentProps {
+    items: NotificationItemData[];
+    onMarkAllRead?: () => void;
+    onDismiss?: (id: string) => void;
+    viewAllHref?: string;
+    viewAllLabel?: string;
+    emptyState?: React.ReactNode;
+    width?: number | string;
+    maxHeight?: number | string;
+    className?: string;
+}
+declare function InboxContent({ items, onMarkAllRead, onDismiss, viewAllHref, viewAllLabel, emptyState, width, maxHeight, className, }: InboxContentProps): React.JSX.Element | null;
+
+declare const DEFAULT_COLOR_SWATCHES: readonly ["#EF4444", "#F97316", "#F59E0B", "#10B981", "#14B8A6", "#06B6D4", "#3B82F6", "#6366F1", "#8B5CF6", "#EC4899", "#64748B", "#1E293B"];
+declare function isValidHex(hex: string): boolean;
+declare function normalizeHex(hex: string): string;
+declare function hexToHsl(hex: string): {
+    h: number;
+    s: number;
+    l: number;
+};
+declare function hslToHex(h: number, s: number, l: number): string;
+interface ColorPickerSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    color: string;
+    selected?: boolean;
+    size?: "sm" | "md" | "lg";
+}
+declare const ColorPickerSwatch: React.ForwardRefExoticComponent<ColorPickerSwatchProps & React.RefAttributes<HTMLButtonElement>>;
+interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "value" | "defaultValue"> {
+    /** Current hex color value (controlled). */
+    value?: string;
+    /** Initial hex color value (uncontrolled). Defaults to "#3B82F6". */
+    defaultValue?: string;
+    /** Called when color changes. */
+    onChange?: (hex: string) => void;
+    /** Array of hex color strings for preset palette. Defaults to DEFAULT_COLOR_SWATCHES. */
+    swatches?: readonly string[] | string[];
+    /** Whether the picker is disabled. */
+    disabled?: boolean;
+    /** Whether to show the manual Hex text input inside the popover. Defaults to true. */
+    showHexInput?: boolean;
+    /** Additional class name for the container. */
+    className?: string;
+}
+declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>>;
+interface ColorPickerFieldProps extends ColorPickerProps {
+    label?: React.ReactNode;
+    hint?: React.ReactNode;
+    error?: React.ReactNode;
+    required?: boolean;
+}
+declare const ColorPickerField: React.ForwardRefExoticComponent<ColorPickerFieldProps & React.RefAttributes<HTMLDivElement>>;
+
+interface GalleryImage {
+    src: string;
+    alt?: string;
+    title?: string;
+    caption?: string;
+    thumbnailSrc?: string;
+}
+interface ImageGalleryProps {
+    images: GalleryImage[];
+    columns?: 2 | 3 | 4 | 5;
+    aspectRatio?: "square" | "video" | "4/3" | "auto" | string;
+    maxVisible?: number;
+    className?: string;
+    thumbnailClassName?: string;
+    lightboxClassName?: string;
+    onImageClick?: (index: number) => void;
+}
+declare function ImageGallery({ images, columns, aspectRatio, maxVisible, className, thumbnailClassName, lightboxClassName, onImageClick, }: ImageGalleryProps): React.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, Alert, type AlertProps, AppShell, AppShellBanner, type AppShellBannerProps, AppShellFooter, type AppShellFooterProps, AppShellHeader, type AppShellHeaderProps, AppShellMain, type AppShellMainProps, type AppShellProps, Avatar, AvatarGroup, type AvatarProps, Badge, type BadgeProps, BlogCard, type BlogCardAuthor, type BlogCardProps, BottomNavigation, type BottomNavigationItem, type BottomNavigationProps, BottomSheet, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHeader, type BottomSheetProps, BottomSheetTitle, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, CheckboxField, type CheckboxFieldProps, type CheckboxProps, CodeBlock, type CodeBlockProps, ColorPicker, ColorPickerField, type ColorPickerFieldProps, type ColorPickerProps, ColorPickerSwatch, type ColorPickerSwatchProps, Combobox, ComboboxField, type ComboboxFieldProps, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, ConfirmDialog, type ConfirmDialogProps, DEFAULT_COLOR_SWATCHES, DashboardShell, type DashboardShellProps, DataTable, type DataTableColumn, type DataTableProps, DatePicker, DatePickerField, type DatePickerFieldProps, type DatePickerProps, type DateRange, DateRangePicker, DateRangePickerField, type DateRangePickerFieldProps, type DateRangePickerProps, DetailPageLayout, type DetailPageLayoutProps, Drawer, type DrawerProps, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuSeparator, DropdownMenuTrigger, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Fab, type FabProps, Field, type FileRejection, FileUpload, FileUploadField, type FileUploadFieldProps, type FileUploadProps, FormField, type FormFieldProps, type GalleryImage, Hint, type HintProps, ImageGallery, type ImageGalleryProps, InboxContent, type InboxContentProps, InboxPopover, type InboxPopoverProps, type InboxStateReturn, InboxTrigger, type InboxTriggerProps, Input, type InputProps, Kbd, type KbdProps, Label, type LabelProps, MetricCard, type MetricCardProps, Modal, ModalActions, ModalDescription, type ModalProps, ModalTitle, NotificationItem, type NotificationItemData, type NotificationItemProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, PricingCard, type PricingCardProps, type PricingFeatureItem, Progress, type ProgressProps, ProgressRing, ProgressRingField, type ProgressRingFieldProps, type ProgressRingProps, type ProgressRingSize, type ProgressRingTone, ProjectCard, type ProjectCardMetric, type ProjectCardProps, type ProjectCardStatus, Radio, type RadioProps, RangeCalendar, type RangeCalendarProps, Rating, type RatingDistributionItem, RatingField, type RatingFieldProps, type RatingIconType, type RatingProps, type RatingSize, RatingSummary, type RatingSummaryProps, SectionHeader, type SectionHeaderActionsProps, type SectionHeaderAlign, type SectionHeaderDescriptionProps, type SectionHeaderHeadingLevel, type SectionHeaderKickerProps, type SectionHeaderProps, type SectionHeaderTitleProps, Segmented, type SegmentedOption, type SegmentedProps, Select, SelectField, type SelectFieldProps, type SelectProps, Separator, type SeparatorProps, SettingsLayout, type SettingsLayoutProps, SidebarNav, type SidebarNavGroup, type SidebarNavItem, type SidebarNavProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stat, type StatProps, Stepper, StepperContent, type StepperContentProps, StepperDescription, type StepperDescriptionProps, StepperIndicator, type StepperIndicatorProps, StepperItem, type StepperItemProps, StepperList, type StepperListProps, type StepperOrientation, type StepperProps, StepperSeparator, type StepperSeparatorProps, StepperTitle, type StepperTitleProps, StepperTrigger, type StepperTriggerProps, Switch, type SwitchProps, Table, TableBody, TableCell, type TableCellProps, TableHead, TableHeader, TableRow, TableToolbar, type TableToolbarProps, TableWrap, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, TextField, type TextFieldProps, Textarea, type TextareaProps, Timeline, type TimelineAlign, TimelineConnector, type TimelineConnectorProps, TimelineContent, type TimelineContentProps, TimelineDot, type TimelineDotProps, type TimelineDotSize, type TimelineDotVariant, TimelineItem, type TimelineItemProps, type TimelineProps, TimelineSeparator, type TimelineSeparatorProps, TimelineTime, TimelineTitle, type ToastOptions, ToastProvider, type ToastTone, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, Tooltip, type TooltipProps, type UploadItem, type UploadStatus, type UseStepperOptions, type UseStepperReturn, badgeVariants, buttonVariants, cn, formatRelativeTime, hexToHsl, hslToHex, isValidHex, normalizeHex, sliderThumbCSS, useInboxState, useStepper, useToast };