import { JSX } from 'solid-js'; export { T as TablePanel, a as TablePanelProps } from '../TablePanel-C7i99nvl.js'; export { BubblePoint, Chart, ChartData, ChartDataset, ChartProps, ChartType, ScatterPoint, Sparkline, SparklineProps } from '../charts/index.js'; import { a as InputProps } from '../Input-Dzvde_F6.js'; import { a as PaginationProps } from '../Pagination-BMqBzMLT.js'; import 'chart.js'; import '../component-size-BIaRRIRi.js'; type AvatarShape = 'circle' | 'rounded' | 'square'; type AvatarColor = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info'; type SizeKey = 'sm' | 'md' | 'lg'; type AvatarRing = true | { color?: string; /** When false, ring sits on the avatar edge (no gap). Use for stacks. Default true. */ offset?: boolean; }; type AvatarBadgePlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; interface AvatarProps extends Omit, 'children'> { /** Display name: used for title and for initials. Initials = first letter of first name + first letter of last name (last word = last name, rest = first name). Single word → one letter. */ name: string; /** Optional image URL; when set, shows image instead of initials. */ imageUrl?: string | null; /** Size: sm = 32px, md = 40px, lg = 48px. */ size?: SizeKey; /** Shape: circle (default), rounded (rounded-lg), or square. */ shape?: AvatarShape; /** Ring outline around the avatar. true = default ring with offset; or { color?, offset?: boolean } for custom or no-offset (e.g. ring={{ offset: false }} for stack cutout). */ ring?: AvatarRing; /** Background and text color when showing initials. Ignored when imageUrl is set. */ color?: AvatarColor; /** Optional badge (e.g. Badge) overlaid on a corner. Use badgePlacement to choose which corner (default bottom-right). */ badge?: JSX.Element; /** When true, badge receives pointer events (e.g. for clickable status menus). Default false (decorative). */ badgeInteractive?: boolean; /** Pass the same size as your Badge so placement is correct. Default: same as avatar size. */ badgeSize?: SizeKey; /** Dot = status dot only; content = icon or count badge (larger dimensions). Content uses a larger base offset for proper placement. Default: dot. */ badgeKind?: 'dot' | 'content'; /** Where the badge sits on the avatar. Default: bottom-right. */ badgePlacement?: AvatarBadgePlacement; /** When true, avatar is purely decorative: aria-hidden, no role/label. Use when visible name text is adjacent (e.g. inside Persona). */ decorative?: boolean; } /** * Avatar with initials or image, optional ring, badge overlay, and multiple shapes/colors. * Use as a standalone avatar or compose with Badge for status indicators. * * } /> */ declare function Avatar(props: AvatarProps): JSX.Element; type ColorSwatchVariant = 'rounded' | 'circle' | 'square'; interface ColorSwatchProps { /** Color as hex string (e.g. #3b82f6). */ value: string; /** Shape: rounded (default), circle, or square. */ variant?: ColorSwatchVariant; /** Optional accessible name for the color. */ colorName?: string; class?: string; style?: JSX.CSSProperties; 'aria-label'?: string; } /** Renders a color swatch (Kobalte ColorSwatch). Value is a hex string. */ declare function ColorSwatch(props: ColorSwatchProps): JSX.Element; interface PersonaProps extends Omit, 'children'> { /** Display name (primary text); also used for avatar initials. */ name: string; /** Optional image URL for the avatar. */ imageUrl?: string | null; /** Optional secondary line (e.g. role, email). */ secondary?: string; /** Avatar and text size. Default: md. */ size?: SizeKey; /** Avatar shape passed through to Avatar. Default: circle. */ shape?: AvatarShape; /** Avatar color passed through to Avatar. Default: neutral. */ color?: AvatarColor; /** Optional content after the text block (e.g. actions). */ children?: JSX.Element; } /** * A row combining Avatar with primary name and optional secondary text. * Use in lists, dropdowns, or cards for a compact user/profile display. */ declare function Persona(props: PersonaProps): JSX.Element; type BadgeVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info'; type BadgeSize = 'sm' | 'md' | 'lg'; interface BadgeProps extends Omit, 'children'> { /** Color variant. Default: neutral. */ variant?: BadgeVariant; /** Badge size; scales dot and pill. Default: md. */ size?: BadgeSize; /** Optional icon shown inside the badge. Use for icon-only badge. */ icon?: JSX.Element; /** Optional count or label shown inside the badge (e.g. "3"). When omitted and no icon, renders as a dot only. */ children?: JSX.Element; /** When true (default), badge is hidden from assistive tech. Set false for meaningful status/count badges. */ decorative?: boolean; } /** * Small badge for the corner of an avatar (e.g. online status dot or count). * Use as the badge prop of Avatar: } /> */ declare function Badge(props: BadgeProps): JSX.Element; interface AvatarGroupItem { name: string; imageUrl?: string | null; } type AvatarStacking = 'first-on-top' | 'last-on-top'; interface AvatarGroupProps extends Omit, 'children'> { /** List of avatars to show. When max is set, only this many are shown plus a "+N" overflow. */ avatars: AvatarGroupItem[]; /** Max avatars to show before showing "+N". Omit to show all. */ max?: number; /** Size passed to each Avatar. */ size?: SizeKey; /** Shape passed to each Avatar. */ shape?: AvatarShape; /** Overlap amount: sm = tighter stack, md = default, lg = more overlap. */ overlap?: 'sm' | 'md' | 'lg'; /** Z-index stacking order for overlapping avatars. Default: last-on-top (DOM-natural). */ stacking?: AvatarStacking; } /** * Group of avatars stacked horizontally with overlap. Use max to show a "+N" overflow. */ declare function AvatarGroup(props: AvatarGroupProps): JSX.Element; interface CarouselSlide { id: string; content: JSX.Element; } interface CarouselProps extends JSX.HTMLAttributes { slides: CarouselSlide[]; /** Auto-advance interval in ms (cycle time); 0 to disable */ autoPlayInterval?: number; /** Show dot indicators below the carousel. Default true; set false to hide. */ showDots?: boolean; /** Show prev/next arrow buttons. Default false; set showArrows or showArrows={true} to enable. */ showArrows?: boolean; /** Dot indicators alignment: start, center, or end. Default start. */ dotsPosition?: 'start' | 'center' | 'end'; /** Dot color scheme: 'light' (white dots, for dark/colored backgrounds) or 'dark' (ink dots, for light backgrounds). Default 'light'. */ dotsVariant?: 'light' | 'dark'; /** Optional Tailwind class(es) applied as a background strip behind the dots row (e.g. 'bg-primary-500'). Forces white dots when set. */ dotsBgClass?: string; /** When true, renders dots absolutely positioned over the bottom of the slide (instead of below it). Slide content should add bottom padding to avoid overlap. */ dotsOverlay?: boolean; /** Custom color for the progress bar (e.g. '#3b82f6', 'var(--color-primary-500)', or 'bg-primary-500'). When set, overrides the default progress bar color. */ progressBarColor?: string; /** Accessible label for the carousel region. */ 'aria-label'?: string; } declare function Carousel(props: CarouselProps): JSX.Element; interface EmptyStateProps extends JSX.HTMLAttributes { title: string; description?: JSX.Element; icon?: JSX.Element; actions?: JSX.Element; /** When true, sets role="status" + aria-live="polite" so screen readers announce the empty state. Default: false. */ announce?: boolean; } declare function EmptyState(props: EmptyStateProps): JSX.Element; type TagVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info'; type TagStyle = 'default' | 'solid'; type TagSize = 'sm' | 'md' | 'lg' | 'xl'; interface TagProps extends Omit, 'color'> { /** Semantic color variant. Ignored when color is set. Default: neutral. */ variant?: TagVariant; /** Tag size. Default: md. */ size?: TagSize; /** Visual style: default (light background) or solid (surface background). Default: default. */ visualStyle?: TagStyle; /** CSS color for a status indicator dot before children (e.g. "#22c55e"). */ statusColor?: string; /** Accessible label for the status dot (e.g. "Active"). Rendered as sr-only text. When omitted, the dot is purely decorative. */ statusLabel?: string; /** Arbitrary CSS color for a fully custom tag. Sets bg (10% opacity), border (25% opacity), and text color. Overrides variant. */ color?: string; /** Icon rendered before the label. */ iconStart?: JSX.Element; /** Icon rendered after the label. */ iconEnd?: JSX.Element; } declare function Tag(rawProps: TagProps): JSX.Element; type KbdVariant = 'default' | 'flat'; type KbdSize = 'sm' | 'md' | 'lg'; interface KbdProps extends JSX.HTMLAttributes { /** Visual style. default = raised key with bottom border; flat = simple outlined. Default: default. */ variant?: KbdVariant; /** Size. Default: md. */ size?: KbdSize; children?: JSX.Element; } interface KbdShortcutProps { /** Ordered list of key labels to display (e.g. [KEY.Cmd, 'K']). */ keys: string[]; /** Passed to each Kbd. Default: default. */ variant?: KbdVariant; /** Passed to each Kbd. Default: md. */ size?: KbdSize; /** Separator rendered between keys. Default: '+'. */ separator?: string; class?: string; } /** Common special key symbols for use with Kbd and KbdShortcut. */ declare const KEY: { readonly Cmd: "⌘"; readonly Shift: "⇧"; readonly Option: "⌥"; readonly Alt: "⌥"; readonly Ctrl: "⌃"; readonly Enter: "↵"; readonly Backspace: "⌫"; readonly Delete: "⌦"; readonly Escape: "Esc"; readonly Tab: "⇥"; readonly Up: "↑"; readonly Down: "↓"; readonly Left: "←"; readonly Right: "→"; }; /** * Displays a single keyboard key. * Use KbdShortcut for multi-key combinations. */ declare function Kbd(props: KbdProps): JSX.Element; /** * Displays a keyboard shortcut as a sequence of Kbd keys separated by a delimiter. * * @example * * */ declare function KbdShortcut(props: KbdShortcutProps): JSX.Element; interface StatCardProps extends JSX.HTMLAttributes { label: string; /** Optional subtitle or category below the label (e.g. "Travel and tourism"). */ subtitle?: string; /** Optional icon (e.g. app logo) shown at top left. */ icon?: JSX.Element; /** Accessible label for the icon when it conveys meaning. When set, icon wrapper gets role="img" + aria-label. When omitted, the wrapper is transparent — the icon child controls its own accessibility. */ iconLabel?: string; /** Optional content at top right (e.g. Tag or "Connect" button). */ topRight?: JSX.Element; value?: string | number | null; helperText?: string; trendLabel?: string; /** Optional secondary line below trendLabel (e.g. "last week"). Rendered smaller and muted. */ trendSubLabel?: string; /** Default: 'positive' (emerald). */ trendVariant?: 'positive' | 'neutral' | 'negative'; trendIcon?: JSX.Element; emptyText?: string; /** Optional content rendered below the trend block. Use for breakdown rows, sub-metrics, or any body content. Works with both chartPosition values. */ body?: JSX.Element; /** Optional chart or sparkline. Use chartPosition to place under the trend or to the right. */ chart?: JSX.Element; /** Where to render the chart: under the trend (default) or in a column to the right of the value/trend. */ chartPosition?: 'under' | 'right'; /** When set, the chart wrapper gets role="img" + aria-label instead of aria-hidden. The chart child should be decorative (aria-hidden) to avoid duplicate announcements. */ chartA11yLabel?: string; /** Tailwind height class for the chart wrapper. Default 'h-10' (under) or 'h-20' (right). */ chartHeight?: string; /** Tailwind width classes for the right-position chart wrapper. Default 'w-36 sm:w-44'. Only applies when chartPosition is 'right'. */ chartWidth?: string; } declare function StatCard(props: StatCardProps): JSX.Element; type TimelineItemStatus = 'completed' | 'active' | 'pending' | 'error'; type TimelineVariant = 'default' | 'compact' | 'outlined'; type TimelineConnector = 'solid' | 'dashed' | 'dotted'; interface TimelineItem { id?: string; /** Main heading for the event */ title: JSX.Element; /** Secondary description text */ description?: JSX.Element; /** Timestamp or label shown beside the title */ time?: JSX.Element; /** Custom icon/content inside the dot. If omitted, a default dot or status icon renders. */ icon?: JSX.Element; /** Controls the dot color and default icon. Default: 'pending'. */ status?: TimelineItemStatus; /** Extra content slot rendered below description */ content?: JSX.Element; /** Override the dot color with any Tailwind bg class e.g. 'bg-purple-500' */ color?: string; } interface TimelineProps extends Omit, 'children'> { /** Timeline entries */ items: TimelineItem[]; /** Visual style. Default: 'default'. */ variant?: TimelineVariant; /** Connector line style. Default: 'solid'. */ connector?: TimelineConnector; /** Show connector line between items. Default: true. */ showConnector?: boolean; /** Place timestamp to the left of the connector. Default: false. */ timeLeft?: boolean; } declare function Timeline(props: TimelineProps): JSX.Element; interface TreeNode { /** Unique identifier */ id: string; /** Display label */ label: JSX.Element; /** Optional icon shown before the label */ icon?: JSX.Element; /** Child nodes */ children?: TreeNode[]; /** Prevents selection and interaction */ disabled?: boolean; } interface TreeViewProps extends Omit, 'children' | 'onSelect'> { /** Tree data */ nodes: TreeNode[]; /** Controlled selected node id */ selected?: string; /** Callback when a node is selected */ onSelect?: (id: string) => void; /** Default selected node id (uncontrolled) */ defaultSelected?: string; /** Controlled expanded node ids */ expanded?: string[]; /** Callback when expanded state changes */ onExpandedChange?: (ids: string[]) => void; /** Default expanded ids (uncontrolled) */ defaultExpanded?: string[]; /** Pixels of indentation per level. Default: 16. */ indent?: number; /** Show connecting lines between nodes. Default: true. */ showLines?: boolean; } declare function TreeView(props: TreeViewProps): JSX.Element; interface VideoProps { /** Video source URL */ src: string; /** Poster image URL shown before playback */ poster?: string; /** Show native browser controls. Default: true */ controls?: boolean; /** Autoplay the video. Default: false. Note: forces muted=true to satisfy browser autoplay policy. */ autoplay?: boolean; /** Mute the video. Default: false */ muted?: boolean; /** Loop the video. Default: false */ loop?: boolean; /** CSS aspect-ratio value e.g. '16/9', '4/3', '1/1', '9/16'. Default: '16/9' */ aspectRatio?: string; /** Max width of the container (CSS value). Default: '100%' */ width?: string; /** Max height of the container (CSS value). Rarely needed with aspect-ratio. */ height?: string; /** Fallback content to render when the video fails to load */ fallback?: JSX.Element; /** Preload strategy. Default: 'metadata' */ preload?: 'none' | 'metadata' | 'auto'; /** Whether the video fills its container. Default: true */ fluid?: boolean; class?: string; /** Forwarded to the