artefact-design-system 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,834 @@
+import * as React$1 from 'react';
+import { ElementType, CSSProperties, ReactNode, HTMLAttributes, ComponentProps, ButtonHTMLAttributes } from 'react';
+import { Icon as Icon$1, IconWeight } from '@phosphor-icons/react';
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { Avatar as Avatar$1, Separator as Separator$1, Checkbox as Checkbox$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, Label as Label$1, NavigationMenu as NavigationMenu$1, Progress as Progress$1, RadioGroup as RadioGroup$1, Select as Select$1, Switch as Switch$1, Tabs as Tabs$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Tooltip as Tooltip$1 } from 'radix-ui';
+import * as RechartsPrimitive from 'recharts';
+import { TooltipValueType } from 'recharts';
+import { ToasterProps } from 'sonner';
+
+/** Color — ONE place, every color, named by role. References to the CSS
+ *  custom properties defined in index.css; values live there ONCE, this is
+ *  just a typed name for each. (Previously split into `color` (shadcn's
+ *  contract slots) and a separate `brand` object (orange/green/warn/plum) —
+ *  merged because that split actively hid a bug: shadcn's own `--accent`
+ *  slot is its internal hover fill (cream-2, == `muted`), which collided in
+ *  name with our real brand orange in the other object. One namespace, no
+ *  same-named-different-color trap.) */
+declare const color: {
+    readonly background: "var(--background)";
+    readonly foreground: "var(--foreground)";
+    readonly card: "var(--card)";
+    readonly cardForeground: "var(--card-foreground)";
+    readonly popover: "var(--popover)";
+    readonly popoverForeground: "var(--popover-foreground)";
+    readonly ink3: "var(--brand-ink-3)";
+    readonly primary: "var(--primary)";
+    readonly primaryForeground: "var(--primary-foreground)";
+    readonly secondary: "var(--secondary)";
+    readonly secondaryForeground: "var(--secondary-foreground)";
+    readonly muted: "var(--muted)";
+    readonly mutedForeground: "var(--muted-foreground)";
+    readonly border: "var(--border)";
+    readonly input: "var(--input)";
+    readonly ring: "var(--ring)";
+    readonly destructive: "var(--destructive)";
+    readonly accent: "var(--brand-accent)";
+    readonly accentForeground: "var(--brand-accent-foreground)";
+    readonly accentHover: "var(--brand-accent-hover)";
+    readonly accentSoft: "var(--brand-accent-soft)";
+    readonly accentSoftForeground: "var(--brand-accent-soft-foreground)";
+    readonly accentGradient: "var(--brand-accent-gradient)";
+    readonly green: "var(--brand-green)";
+    readonly greenForeground: "var(--brand-green-foreground)";
+    readonly greenHover: "var(--brand-green-hover)";
+    readonly greenSoft: "var(--brand-green-soft)";
+    readonly greenSoftForeground: "var(--brand-green-soft-foreground)";
+    readonly warn: "var(--brand-warn)";
+    readonly warnForeground: "var(--brand-warn-foreground)";
+    readonly warnHover: "var(--brand-warn-hover)";
+    readonly warnSoft: "var(--brand-warn-soft)";
+    readonly warnSoftForeground: "var(--brand-warn-soft-foreground)";
+    readonly plum: "var(--brand-plum)";
+    readonly plumForeground: "var(--brand-plum-foreground)";
+    readonly plumHover: "var(--brand-plum-hover)";
+    readonly plumSoft: "var(--brand-plum-soft)";
+    readonly plumSoftForeground: "var(--brand-plum-soft-foreground)";
+    readonly danger: "var(--brand-danger)";
+    readonly dangerForeground: "var(--brand-danger-foreground)";
+    readonly dangerHover: "var(--brand-danger-hover)";
+    readonly dangerSoft: "var(--brand-danger-soft)";
+    readonly dangerSoftForeground: "var(--brand-danger-soft-foreground)";
+    readonly chart1: "var(--chart-1)";
+    readonly chart2: "var(--chart-2)";
+    readonly chart3: "var(--chart-3)";
+    readonly chart4: "var(--chart-4)";
+    readonly chart5: "var(--chart-5)";
+    readonly chartSurface: "var(--brand-chart-surface)";
+    readonly scrim: "var(--brand-scrim)";
+};
+type ColorKey = keyof typeof color;
+/** Keys of `color` that have all 4 role siblings (`XForeground`/`XHover`/
+ *  `XSoft`/`XSoftForeground`) — computed at the TYPE level too, not just at
+ *  runtime, so `color[`${role}Foreground`]` type-checks under `strict`
+ *  without a cast. */
+type SemanticRoleKey = {
+    [K in ColorKey]: `${K}Foreground` extends ColorKey ? `${K}Hover` extends ColorKey ? `${K}Soft` extends ColorKey ? `${K}SoftForeground` extends ColorKey ? K : never : never : never : never;
+}[ColorKey];
+/** Every "full role" name in `color` — derived from the naming convention
+ *  itself (a role is any key with matching `Foreground`/`Hover`/`Soft`/
+ *  `SoftForeground` siblings), not a second hand-maintained list. Add a new
+ *  role above (all 5 suffixed keys) and it appears here — and in
+ *  Foundation/Colors' story, which reads THIS — with zero other edits.
+ *  This is the fix for the class of bug `scrim` shipped with (built, wired
+ *  into a real component, invisible in Storybook because the demo story
+ *  hand-listed variants instead of reading the source object). */
+declare const semanticRoles: SemanticRoleKey[];
+/** The `chartN` keys in `color`, in order — same reasoning as
+ *  `semanticRoles`: derived from the naming pattern, so a 6th chart color
+ *  added to `color` above shows up in Foundation/Colors' Charts story with
+ *  no edit there. */
+declare const chartKeys: ("background" | "foreground" | "card" | "cardForeground" | "popover" | "popoverForeground" | "ink3" | "primary" | "primaryForeground" | "secondary" | "secondaryForeground" | "muted" | "mutedForeground" | "border" | "input" | "ring" | "destructive" | "accent" | "accentForeground" | "accentHover" | "accentSoft" | "accentSoftForeground" | "accentGradient" | "green" | "greenForeground" | "greenHover" | "greenSoft" | "greenSoftForeground" | "warn" | "warnForeground" | "warnHover" | "warnSoft" | "warnSoftForeground" | "plum" | "plumForeground" | "plumHover" | "plumSoft" | "plumSoftForeground" | "danger" | "dangerForeground" | "dangerHover" | "dangerSoft" | "dangerSoftForeground" | "chart1" | "chart2" | "chart3" | "chart4" | "chart5" | "chartSurface" | "scrim")[];
+/** Radius scale — named steps over the single --radius token (index.css). */
+declare const radius: {
+    readonly sm: "var(--radius-sm)";
+    readonly md: "var(--radius-md)";
+    readonly lg: "var(--radius-lg)";
+    readonly xl: "var(--radius-xl)";
+    readonly "2xl": "var(--radius-2xl)";
+    readonly pill: 999;
+};
+/** Spacing scale (px) — synthesized from values actually used across
+ *  komanda.html/dashboard.html (6/8/12/16/18/20/24/28...), rounded into a
+ *  shared step scale so primitives/components pick from one set. */
+declare const spacing: {
+    readonly none: 0;
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly base: 16;
+    readonly lg: 20;
+    readonly xl: 24;
+    readonly "2xl": 32;
+    readonly "3xl": 40;
+    readonly "4xl": 56;
+};
+type SpacingKey = keyof typeof spacing;
+/** Type scale (px + line-height) — the three named tokens komanda.html
+ *  declares itself (--text-footnote/caption/body) extended upward with the
+ *  heading sizes actually found in its markup (18/20/24), plus one larger
+ *  step (`display`) for hero-scale contexts not yet exercised by either
+ *  source page. */
+declare const type: {
+    readonly footnote: {
+        readonly size: 12;
+        readonly lineHeight: 1.45;
+    };
+    readonly caption: {
+        readonly size: 14;
+        readonly lineHeight: 1.45;
+    };
+    readonly body: {
+        readonly size: 16;
+        readonly lineHeight: 1.55;
+    };
+    readonly subhead: {
+        readonly size: 18;
+        readonly lineHeight: 1.35;
+    };
+    readonly title: {
+        readonly size: 20;
+        readonly lineHeight: 1.3;
+    };
+    readonly headline: {
+        readonly size: 24;
+        readonly lineHeight: 1.25;
+    };
+    readonly display: {
+        readonly size: 32;
+        readonly lineHeight: 1.15;
+    };
+};
+type TypeKey = keyof typeof type;
+/** Font family — self-hosted Struve, see brand-overrides.css for @font-face. */
+declare const font: {
+    readonly sans: "var(--font-sans)";
+};
+
+type Len = number | string | SpacingKey;
+type BoxOwnProps = {
+    as?: ElementType;
+    p?: Len;
+    px?: Len;
+    py?: Len;
+    radius?: Len;
+    width?: Len;
+    maxWidth?: Len;
+    minWidth?: Len;
+    grow?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+};
+type BoxProps = BoxOwnProps & Omit<HTMLAttributes<HTMLElement>, keyof BoxOwnProps>;
+/** Box — the base container. The thing a Card (or anything) is built ON. */
+declare function Box({ as: As, p, px, py, radius, width, maxWidth, minWidth, grow, className, style, children, ...rest }: BoxProps): React$1.JSX.Element;
+type FlexProps = BoxProps & {
+    direction?: "row" | "column";
+    gap?: Len;
+    align?: CSSProperties["alignItems"];
+    justify?: CSSProperties["justifyContent"];
+    wrap?: boolean;
+};
+/** Flex — a flex container. Wraps by default → naturally responsive. */
+declare function Flex({ direction, gap, align, justify, wrap, style, children, ...box }: FlexProps): React$1.JSX.Element;
+/** Stack — Flex preset for the common vertical layout case. */
+declare function Stack({ gap, ...props }: Omit<FlexProps, "direction">): React$1.JSX.Element;
+type GridProps = BoxProps & {
+    /** cards reflow: as many minColWidth-wide columns as fit, each stretching */
+    minColWidth?: Len;
+    /** OR a fixed column count */
+    columns?: number;
+    gap?: Len;
+    align?: CSSProperties["alignItems"];
+};
+/** Grid — auto-fit reflow (intrinsically responsive, no breakpoints needed). */
+declare function Grid({ minColWidth, columns, gap, align, style, children, ...box }: GridProps): React$1.JSX.Element;
+/** Container — max-width centered content column. */
+declare function Container({ size, style, children, ...box }: BoxProps & {
+    size?: Len;
+}): React$1.JSX.Element;
+
+declare const VARIANTS: {
+    glass: {
+        style: CSSProperties;
+        description: string;
+    };
+    paper: {
+        style: CSSProperties;
+        description: string;
+    };
+    muted: {
+        style: CSSProperties;
+        description: string;
+    };
+    plain: {
+        style: CSSProperties;
+        description: string;
+    };
+    scrim: {
+        style: CSSProperties;
+        description: string;
+    };
+};
+type SurfaceVariant = keyof typeof VARIANTS;
+/** The variant registry itself — Foundation/Surface's story iterates this
+ *  directly instead of hand-listing each variant (see file header). */
+declare const SURFACE_VARIANTS: {
+    glass: {
+        style: CSSProperties;
+        description: string;
+    };
+    paper: {
+        style: CSSProperties;
+        description: string;
+    };
+    muted: {
+        style: CSSProperties;
+        description: string;
+    };
+    plain: {
+        style: CSSProperties;
+        description: string;
+    };
+    scrim: {
+        style: CSSProperties;
+        description: string;
+    };
+};
+type SurfaceProps = ComponentProps<typeof Box> & {
+    variant?: SurfaceVariant;
+};
+declare function Surface({ variant, radius, style, ...box }: SurfaceProps): React$1.JSX.Element;
+
+type TitledRowProps = {
+    title?: ReactNode;
+    side?: ReactNode;
+    rail?: number;
+    gap?: number;
+    children: ReactNode;
+};
+declare function TitledRow({ title, side, rail, gap, children }: TitledRowProps): React$1.JSX.Element;
+
+declare function AppShell({ sidebar, children }: {
+    sidebar: ReactNode;
+    children: ReactNode;
+}): React$1.JSX.Element;
+
+declare const REGISTRY: {
+    readonly home: Icon$1;
+    readonly team: Icon$1;
+    readonly orders: Icon$1;
+    readonly knowledge: Icon$1;
+    readonly settings: Icon$1;
+    readonly search: Icon$1;
+    readonly add: Icon$1;
+    readonly remove: Icon$1;
+    readonly close: Icon$1;
+    readonly check: Icon$1;
+    readonly more: Icon$1;
+    readonly bell: Icon$1;
+    readonly "caret-down": Icon$1;
+    readonly "caret-right": Icon$1;
+    readonly "caret-up": Icon$1;
+    readonly "arrow-up": Icon$1;
+    readonly "arrow-down": Icon$1;
+    readonly "arrow-right": Icon$1;
+    readonly star: Icon$1;
+    readonly warning: Icon$1;
+    readonly "trend-up": Icon$1;
+    readonly "trend-down": Icon$1;
+    readonly spark: Icon$1;
+    readonly lock: Icon$1;
+    readonly "lock-open": Icon$1;
+    readonly voice: Icon$1;
+    readonly info: Icon$1;
+    readonly lightbulb: Icon$1;
+    readonly "chart-line-up": Icon$1;
+    readonly dashboard: Icon$1;
+    readonly send: Icon$1;
+};
+type IconName = keyof typeof REGISTRY;
+declare const ICON_NAMES: IconName[];
+type IconProps = {
+    name: IconName;
+    /** px; matches the surrounding text/control size */
+    size?: number;
+    weight?: IconWeight;
+    color?: string;
+    className?: string;
+    /** decorative by default; pass a label to expose it to AT */
+    label?: string;
+};
+declare function Icon({ name, size, weight, color, className, label, }: IconProps): React$1.JSX.Element;
+
+type RadiusKey = keyof typeof radius;
+type ImageProps = {
+    src: string;
+    /** required — decorative images should use alt="" explicitly, not omit it */
+    alt: string;
+    width?: number | string;
+    height?: number | string;
+    fit?: "cover" | "contain";
+    radius?: RadiusKey | number | string;
+    loading?: "lazy" | "eager";
+    className?: string;
+    style?: CSSProperties;
+};
+declare function Image({ src, alt, width, height, fit, radius, loading, className, style, }: ImageProps): React$1.JSX.Element;
+
+type TextProps = {
+    /** which element this renders as — independent of visual size */
+    as?: ElementType;
+    /** Foundation type-scale step */
+    size?: TypeKey;
+    weight?: CSSProperties["fontWeight"];
+    /** a resolved token value, e.g. `color.mutedForeground` or `color.accent` */
+    color?: string;
+    align?: CSSProperties["textAlign"];
+    /** clip to one line with an ellipsis instead of wrapping */
+    truncate?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+};
+declare function Text({ as: As, size, weight, color: textColor, align, truncate, className, style, children, }: TextProps): React$1.JSX.Element;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const alertVariants: (props?: ({
+    variant?: "destructive" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React$1.JSX.Element;
+declare function AlertTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertDescription({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertAction({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+
+declare function Avatar({ className, size, ...props }: React$1.ComponentProps<typeof Avatar$1.Root> & {
+    size?: "default" | "sm" | "lg";
+}): React$1.JSX.Element;
+declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof Avatar$1.Image>): React$1.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<typeof Avatar$1.Fallback>): React$1.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+
+declare const badgeVariants: (props?: ({
+    variant?: "secondary" | "destructive" | "link" | "default" | "outline" | "ghost" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): React$1.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "secondary" | "destructive" | "link" | "default" | "outline" | "ghost" | null | undefined;
+    size?: "xs" | "sm" | "lg" | "default" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): React$1.JSX.Element;
+
+declare function Separator({ className, orientation, decorative, ...props }: React$1.ComponentProps<typeof Separator$1.Root>): React$1.JSX.Element;
+
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): React$1.JSX.Element;
+declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): React$1.JSX.Element;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): React$1.JSX.Element;
+
+declare function Card({ className, size, ...props }: React$1.ComponentProps<"div"> & {
+    size?: "default" | "sm";
+}): React$1.JSX.Element;
+declare function CardHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardDescription({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardAction({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type TooltipNameType = number | string;
+type ChartConfig = Record<string, {
+    label?: React$1.ReactNode;
+    icon?: React$1.ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})>;
+declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React$1.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React$1.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    initialDimension?: {
+        width: number;
+        height: number;
+    };
+}): React$1.JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => React$1.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React$1.ComponentProps<typeof RechartsPrimitive.Tooltip> & React$1.ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+} & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): React$1.JSX.Element | null;
+declare const ChartLegend: React$1.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React$1.ReactPortal | null>;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React$1.ComponentProps<"div"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+} & RechartsPrimitive.DefaultLegendContentProps): React$1.JSX.Element | null;
+
+declare function Checkbox({ className, ...props }: React$1.ComponentProps<typeof Checkbox$1.Root>): React$1.JSX.Element;
+
+declare function Dialog({ ...props }: React$1.ComponentProps<typeof Dialog$1.Root>): React$1.JSX.Element;
+declare function DialogTrigger({ ...props }: React$1.ComponentProps<typeof Dialog$1.Trigger>): React$1.JSX.Element;
+declare function DialogPortal({ ...props }: React$1.ComponentProps<typeof Dialog$1.Portal>): React$1.JSX.Element;
+declare function DialogClose({ ...props }: React$1.ComponentProps<typeof Dialog$1.Close>): React$1.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Overlay>): React$1.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React$1.ComponentProps<typeof Dialog$1.Content> & {
+    showCloseButton?: boolean;
+}): React$1.JSX.Element;
+declare function DialogHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React$1.ComponentProps<"div"> & {
+    showCloseButton?: boolean;
+}): React$1.JSX.Element;
+declare function DialogTitle({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Title>): React$1.JSX.Element;
+declare function DialogDescription({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Description>): React$1.JSX.Element;
+
+declare function DropdownMenu({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Root>): React$1.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Portal>): React$1.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Trigger>): React$1.JSX.Element;
+declare function DropdownMenuContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Content>): React$1.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Group>): React$1.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React$1.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.CheckboxItem> & {
+    inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.RadioGroup>): React$1.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.RadioItem> & {
+    inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Label> & {
+    inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Separator>): React$1.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Sub>): React$1.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.SubTrigger> & {
+    inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.SubContent>): React$1.JSX.Element;
+
+declare function Empty({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+    variant?: "default" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): React$1.JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): React$1.JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+
+declare function Label({ className, ...props }: React$1.ComponentProps<typeof Label$1.Root>): React$1.JSX.Element;
+
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): React$1.JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+    variant?: "legend" | "label";
+}): React$1.JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): React$1.JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): React$1.JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): React$1.JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+    children?: React.ReactNode;
+}): React$1.JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): React$1.JSX.Element | null;
+
+declare function Input({ className, type, ...props }: React$1.ComponentProps<"input">): React$1.JSX.Element;
+
+declare function InputGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React$1.JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React$1.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): React$1.JSX.Element;
+declare function InputGroupText({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): React$1.JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): React$1.JSX.Element;
+
+declare function ItemGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function ItemSeparator({ className, ...props }: React$1.ComponentProps<typeof Separator>): React$1.JSX.Element;
+declare const itemVariants: (props?: ({
+    variant?: "muted" | "default" | "outline" | null | undefined;
+    size?: "xs" | "sm" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Item({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
+    asChild?: boolean;
+}): React$1.JSX.Element;
+declare const itemMediaVariants: (props?: ({
+    variant?: "image" | "default" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ItemMedia({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): React$1.JSX.Element;
+declare function ItemContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function ItemTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function ItemDescription({ className, ...props }: React$1.ComponentProps<"p">): React$1.JSX.Element;
+declare function ItemActions({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function ItemHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function ItemFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+
+declare function NavigationMenu({ className, children, viewport, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Root> & {
+    viewport?: boolean;
+}): React$1.JSX.Element;
+declare function NavigationMenuList({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.List>): React$1.JSX.Element;
+declare function NavigationMenuItem({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Item>): React$1.JSX.Element;
+declare const navigationMenuTriggerStyle: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare function NavigationMenuTrigger({ className, children, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Trigger>): React$1.JSX.Element;
+declare function NavigationMenuContent({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Content>): React$1.JSX.Element;
+declare function NavigationMenuViewport({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Viewport>): React$1.JSX.Element;
+declare function NavigationMenuLink({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Link>): React$1.JSX.Element;
+declare function NavigationMenuIndicator({ className, ...props }: React$1.ComponentProps<typeof NavigationMenu$1.Indicator>): React$1.JSX.Element;
+
+declare function Pagination({ className, ...props }: React$1.ComponentProps<"nav">): React$1.JSX.Element;
+declare function PaginationContent({ className, ...props }: React$1.ComponentProps<"ul">): React$1.JSX.Element;
+declare function PaginationItem({ ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+type PaginationLinkProps = {
+    isActive?: boolean;
+} & Pick<React$1.ComponentProps<typeof Button>, "size"> & React$1.ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React$1.JSX.Element;
+declare function PaginationPrevious({ className, text, ...props }: React$1.ComponentProps<typeof PaginationLink> & {
+    text?: string;
+}): React$1.JSX.Element;
+declare function PaginationNext({ className, text, ...props }: React$1.ComponentProps<typeof PaginationLink> & {
+    text?: string;
+}): React$1.JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+
+declare function Progress({ className, value, ...props }: React$1.ComponentProps<typeof Progress$1.Root>): React$1.JSX.Element;
+
+declare function RadioGroup({ className, ...props }: React$1.ComponentProps<typeof RadioGroup$1.Root>): React$1.JSX.Element;
+declare function RadioGroupItem({ className, ...props }: React$1.ComponentProps<typeof RadioGroup$1.Item>): React$1.JSX.Element;
+
+declare function Select({ ...props }: React$1.ComponentProps<typeof Select$1.Root>): React$1.JSX.Element;
+declare function SelectGroup({ className, ...props }: React$1.ComponentProps<typeof Select$1.Group>): React$1.JSX.Element;
+declare function SelectValue({ ...props }: React$1.ComponentProps<typeof Select$1.Value>): React$1.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: React$1.ComponentProps<typeof Select$1.Trigger> & {
+    size?: "sm" | "default";
+}): React$1.JSX.Element;
+declare function SelectContent({ className, children, position, align, ...props }: React$1.ComponentProps<typeof Select$1.Content>): React$1.JSX.Element;
+declare function SelectLabel({ className, ...props }: React$1.ComponentProps<typeof Select$1.Label>): React$1.JSX.Element;
+declare function SelectItem({ className, children, ...props }: React$1.ComponentProps<typeof Select$1.Item>): React$1.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React$1.ComponentProps<typeof Select$1.Separator>): React$1.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React$1.ComponentProps<typeof Select$1.ScrollUpButton>): React$1.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React$1.ComponentProps<typeof Select$1.ScrollDownButton>): React$1.JSX.Element;
+
+declare const Toaster: ({ ...props }: ToasterProps) => React$1.JSX.Element;
+
+declare function Spinner({ className, ...props }: React.ComponentProps<"svg">): React$1.JSX.Element;
+
+declare function Switch({ className, size, ...props }: React$1.ComponentProps<typeof Switch$1.Root> & {
+    size?: "sm" | "default";
+}): React$1.JSX.Element;
+
+declare function Table({ className, ...props }: React$1.ComponentProps<"table">): React$1.JSX.Element;
+declare function TableHeader({ className, ...props }: React$1.ComponentProps<"thead">): React$1.JSX.Element;
+declare function TableBody({ className, ...props }: React$1.ComponentProps<"tbody">): React$1.JSX.Element;
+declare function TableFooter({ className, ...props }: React$1.ComponentProps<"tfoot">): React$1.JSX.Element;
+declare function TableRow({ className, ...props }: React$1.ComponentProps<"tr">): React$1.JSX.Element;
+declare function TableHead({ className, ...props }: React$1.ComponentProps<"th">): React$1.JSX.Element;
+declare function TableCell({ className, ...props }: React$1.ComponentProps<"td">): React$1.JSX.Element;
+declare function TableCaption({ className, ...props }: React$1.ComponentProps<"caption">): React$1.JSX.Element;
+
+declare function Tabs({ className, orientation, ...props }: React$1.ComponentProps<typeof Tabs$1.Root>): React$1.JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "line" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, ...props }: React$1.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): React$1.JSX.Element;
+declare function TabsTrigger({ className, ...props }: React$1.ComponentProps<typeof Tabs$1.Trigger>): React$1.JSX.Element;
+declare function TabsContent({ className, ...props }: React$1.ComponentProps<typeof Tabs$1.Content>): React$1.JSX.Element;
+
+declare function Textarea({ className, ...props }: React$1.ComponentProps<"textarea">): React$1.JSX.Element;
+
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Toggle({ className, variant, size, ...props }: React$1.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): React$1.JSX.Element;
+
+declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: React$1.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+}): React$1.JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: React$1.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): React$1.JSX.Element;
+
+declare function TooltipProvider({ delayDuration, ...props }: React$1.ComponentProps<typeof Tooltip$1.Provider>): React$1.JSX.Element;
+declare function Tooltip({ ...props }: React$1.ComponentProps<typeof Tooltip$1.Root>): React$1.JSX.Element;
+declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof Tooltip$1.Trigger>): React$1.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof Tooltip$1.Content>): React$1.JSX.Element;
+
+type AdviceCardProps = {
+    icon: IconName;
+    /** ink (default, most advice) or accent (rare — the source reserves this for a genuine highlight, e.g. a new record) */
+    tone?: "ink" | "accent";
+    value: ReactNode;
+    text: ReactNode;
+    note?: ReactNode;
+};
+declare function AdviceCard({ icon, tone, value, text, note }: AdviceCardProps): React$1.JSX.Element;
+
+declare function Chip({ children, style, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): React$1.JSX.Element;
+
+type FormFieldProps = {
+    label: string;
+    htmlFor?: string;
+    description?: string;
+    error?: string;
+    children: ReactNode;
+};
+declare function FormField({ label, htmlFor, description, error, children }: FormFieldProps): React$1.JSX.Element;
+
+type FilterSelectProps = {
+    label: string;
+    placeholder: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    onClear?: () => void;
+    options: {
+        value: string;
+        label: string;
+    }[];
+};
+declare function FilterSelect({ label, placeholder, value, onValueChange, onClear, options }: FilterSelectProps): React$1.JSX.Element;
+
+declare function MessageBubble({ from, children }: {
+    from: "user" | "bot";
+    children: ReactNode;
+}): React$1.JSX.Element;
+
+type SearchProps = {
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+};
+declare function Search({ placeholder, value, onChange, className }: SearchProps): React$1.JSX.Element;
+
+declare function Toolbar({ children, orientation, bare, }: {
+    children: ReactNode;
+    orientation?: "horizontal" | "vertical";
+    /** Skip the muted-pill chrome — just the Radix roving-focus root + layout.
+     *  Use this when the toolbar holds exactly ONE already-styled group (e.g.
+     *  a lone ToolbarToggleGroup, which paints its own pill background) —
+     *  the default chrome is for combining multiple groups/separators/actions
+     *  under one shared housing (see the PeriodAndActions story). Without
+     *  `bare`, a single already-backgrounded group nests inside this one's
+     *  own background/radius, producing a visible pill-in-a-pill seam. */
+    bare?: boolean;
+}): React$1.JSX.Element;
+/** ToolbarGroup — a cluster of related controls (e.g. the period toggle). */
+declare function ToolbarGroup({ children }: {
+    children: ReactNode;
+}): React$1.JSX.Element;
+/** ToolbarToggleGroup — single-select segmented control (roving focus, real
+ *  radiogroup semantics) — e.g. Месяц / Неделя / День. */
+declare function ToolbarToggleGroup({ value, onValueChange, children, }: {
+    value: string;
+    onValueChange?: (v: string) => void;
+    children: ReactNode;
+}): React$1.JSX.Element;
+declare function ToolbarToggleItem({ value, children, }: {
+    value: string;
+    children: ReactNode;
+}): React$1.JSX.Element;
+/** ToolbarSeparator — vertical divider between groups. Uses `color.input`
+ *  (komanda's own --line-2 "visible hairline" token), NOT `color.border` —
+ *  `--border` is deliberately transparent project-wide, which would make
+ *  this invisible (see the `[data-slot="separator"]` note in
+ *  brand-overrides.css; this one needs its own fix since it's built on raw
+ *  Radix, not shadcn's Separator, so that CSS override doesn't reach it). */
+declare function ToolbarSeparator(): React$1.JSX.Element;
+/** ToolbarButton — wraps our Button primitive so it participates in the
+ *  toolbar's roving-focus group instead of being a separate tab stop. */
+declare function ToolbarButton({ children }: {
+    children: ReactNode;
+}): React$1.JSX.Element;
+
+declare function TypingIndicator(): React$1.JSX.Element;
+
+type ChartSeries = {
+    key: string;
+    label: string;
+    color: string;
+};
+type BarChartProps = {
+    data: Record<string, unknown>[];
+    xKey: string;
+    series: ChartSeries[];
+    height?: number;
+    showLegend?: boolean;
+};
+declare function BarChart({ data, xKey, series, height, showLegend }: BarChartProps): React$1.JSX.Element;
+
+/** AreaChart — Components tier, real Recharts (stacked area — cumulative trends). */
+type AreaChartProps = {
+    data: Record<string, unknown>[];
+    xKey: string;
+    series: ChartSeries[];
+    height?: number;
+    showLegend?: boolean;
+    stacked?: boolean;
+};
+declare function AreaChart({ data, xKey, series, height, showLegend, stacked }: AreaChartProps): React$1.JSX.Element;
+
+type DistributionSegment = {
+    label: string;
+    count: string;
+    widthPct: number;
+};
+type DistributionGroup = {
+    name: string;
+    total: string;
+    segments: DistributionSegment[];
+};
+declare function DistributionChart({ groups, rowHeight }: {
+    groups: DistributionGroup[];
+    rowHeight?: number;
+}): React$1.JSX.Element;
+
+/** DonutChart — Components tier, real Recharts (categorical breakdown). */
+type DonutSlice = {
+    key: string;
+    label: string;
+    value: number;
+    color: string;
+};
+type DonutChartProps = {
+    data: DonutSlice[];
+    height?: number;
+    showLegend?: boolean;
+};
+declare function DonutChart({ data, height, showLegend }: DonutChartProps): React$1.JSX.Element;
+
+/** LineChart — Components tier, real Recharts (multi-series trend line). */
+type LineChartProps = {
+    data: Record<string, unknown>[];
+    xKey: string;
+    series: ChartSeries[];
+    height?: number;
+    showLegend?: boolean;
+};
+declare function LineChart({ data, xKey, series, height, showLegend }: LineChartProps): React$1.JSX.Element;
+
+type ChipQuestion = {
+    question: string;
+    answer: ReactNode;
+};
+type AssistantDockProps = {
+    title?: string;
+    intro?: string;
+    chips?: ChipQuestion[];
+    fallbackAnswer?: ReactNode;
+    placeholder?: string;
+};
+declare function AssistantDock({ title, intro, chips, fallbackAnswer, placeholder, }: AssistantDockProps): React$1.JSX.Element;
+
+type NavItem = {
+    key: string;
+    label: string;
+    icon: IconName;
+};
+declare const EXAMPLE_NAV_ITEMS: NavItem[];
+type SidebarNavProps = {
+    active?: string;
+    items: NavItem[];
+    avatarInitials?: string;
+    avatarTitle?: string;
+    showSettings?: boolean;
+    /** Which client's dashboard this is (Артефакт serves several). Omit to
+     *  hide the chip entirely — DON'T default this to any one client's name. */
+    clientLabel?: string;
+    /** Single-letter badge for the chip; falls back to `clientLabel`'s first
+     *  character if omitted. */
+    clientInitial?: string;
+};
+declare function SidebarNav({ active, items, avatarInitials, avatarTitle, showSettings, clientLabel, clientInitial, }: SidebarNavProps): React$1.JSX.Element;
+
+export { AdviceCard, type AdviceCardProps, Alert, AlertAction, AlertDescription, AlertTitle, AppShell, AreaChart, type AreaChartProps, AssistantDock, type AssistantDockProps, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChart, type BarChartProps, Box, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, type ChartSeries, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Chip, type ChipQuestion, Container, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DistributionChart, type DistributionGroup, type DistributionSegment, DonutChart, type DonutChartProps, type DonutSlice, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EXAMPLE_NAV_ITEMS, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterSelect, type FilterSelectProps, Flex, FormField, Grid, ICON_NAMES, Icon, type IconName, type IconProps, Image, type ImageProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, LineChart, type LineChartProps, MessageBubble, type NavItem, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Progress, RadioGroup, RadioGroupItem, SURFACE_VARIANTS, Search, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SidebarNav, type SidebarNavProps, type SpacingKey, Spinner, Stack, Surface, type SurfaceProps, type SurfaceVariant, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, type TextProps, Textarea, TitledRow, type TitledRowProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TypeKey, TypingIndicator, badgeVariants, buttonGroupVariants, buttonVariants, chartKeys, cn, color, font, navigationMenuTriggerStyle, radius, semanticRoles, spacing, tabsListVariants, toggleVariants, type };