@crazy-staff/ui 0.0.0-stage → 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,3887 @@
+import { ClassValue } from "clsx";
+import { registerHyperellipse } from "hyperellipse";
+import { Button as Button$1 } from "@base-ui/react/button";
+import * as React from "react";
+import { Input as Input$1 } from "@base-ui/react/input";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+import { HTMLMotionProps } from "motion/react";
+import { Field as Field$1 } from "@base-ui/react/field";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+import { CheckboxGroup as CheckboxGroup$1 } from "@base-ui/react/checkbox-group";
+import { Radio as Radio$1 } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+import { Select as Select$1 } from "@base-ui/react/select";
+import { Slider as Slider$1 } from "@base-ui/react/slider";
+import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+import { NumberField as NumberField$1 } from "@base-ui/react/number-field";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
+import { Menu } from "@base-ui/react/menu";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
+import { PreviewCard } from "@base-ui/react/preview-card";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+import { Separator as Separator$1 } from "@base-ui/react/separator";
+import { Progress as Progress$1 } from "@base-ui/react/progress";
+import { useRender } from "@base-ui/react/use-render";
+import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
+import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+import { OTPField } from "@base-ui/react/otp-field";
+import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
+import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
+import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
+import { ChartCurve } from "@tanstack/charts";
+import { ChartProps as ChartProps$1, RendererChart } from "@tanstack/react-charts/tooltip";
+import { ColumnDef, ReactTable, Row, RowData, TableOptions } from "@tanstack/react-table";
+import { GroupProps, PanelProps, SeparatorProps as SeparatorProps$1 } from "react-resizable-panels";
+import { VariantProps } from "tailwind-variants";
+/**
+ * tailwind-merge has to know our theme keys, otherwise it can't tell that
+ * `rounded-card` overrides `rounded-control` or that `h-control` is a height.
+ * The same config feeds both `cn()` and the `tv()` factory so a single merge
+ * table is used everywhere.
+ */
+export declare const twMergeConfig: {
+  readonly extend: {
+    readonly theme: {
+      readonly color: readonly ['background', 'foreground', 'frame', 'popover', 'hover', 'surface', 'surface-2', 'muted', 'border', 'border-strong', 'input', 'input-border', 'ring', 'accent', 'accent-foreground', 'accent-soft', 'accent-soft-foreground', 'danger', 'danger-foreground', 'success', 'warning'];
+      readonly radius: readonly ['chip', 'control-sm', 'control', 'control-lg', 'item', 'card', 'panel', 'switch'];
+      readonly shadow: readonly ['control', 'button', 'glow', 'card', 'card-hover', 'overlay'];
+      readonly font: readonly ['sans', 'mono', 'heading'];
+      readonly spacing: readonly ['control', 'control-sm', 'control-lg'];
+      readonly ease: readonly ['ui', 'spring'];
+    };
+  };
+};
+/** Join class names and resolve Tailwind conflicts (last one wins). */
+export declare function cn(...inputs: ClassValue[]): string;
+/** `tv` preconfigured with our tailwind-merge table. */
+export declare const tv: import("tailwind-variants").TV<import("tailwind-variants").TVCustomConfig>;
+type Options$3 = Parameters<typeof registerHyperellipse>[0];
+/**
+ * Turns on squircle corners everywhere the `squircle` class is used. Chromium renders the CSS
+ * `corner-shape` property natively; Firefox (Zen) and Safari get the `hyperellipse` fallback.
+ * Call once on the client; calling again returns the same controller. No-op during SSR.
+ *
+ * When the fallback runs, `<html data-squircle-fallback>` is set. The theme then stops
+ * transitioning background, border and shadow on squircle elements: the fallback paints them
+ * into an SVG layer from the computed style and would capture a half-way (transparent) colour.
+ */
+export declare function registerSquircles(options?: Options$3): import("hyperellipse").HyperellipseController;
+export declare const buttonStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    solid: string;
+    soft: string;
+    outline: string;
+    ghost: string;
+    danger: string;
+  };
+  size: {
+    sm: string;
+    md: string;
+    lg: string;
+    icon: string;
+    'icon-sm': string;
+  };
+  /** A soft accent glow under solid buttons. Off by default; use it for the one main action. */
+  glow: {
+    true: string;
+    false: string;
+  };
+}, undefined, string[], undefined, undefined, undefined>;
+interface ButtonProps extends React.ComponentPropsWithRef<typeof Button$1>, VariantProps<typeof buttonStyles> {}
+/**
+ * The primary action control. Token-driven: radius, height, shadow and accent
+ * all come from `--cui-*`, so an app restyles every button by overriding tokens.
+ */
+export declare function Button({ className, variant, size, glow, ...props }: ButtonProps): React.JSX.Element;
+export declare const chipStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    soft: string;
+    solid: string;
+    outline: string;
+    neutral: string;
+    /** Status chips: a faint tint of the status colour with the colour itself as ink. */
+    success: string;
+    warning: string;
+    danger: string;
+  };
+  size: {
+    sm: string;
+    md: string;
+  };
+}, undefined, string[], undefined, undefined, undefined>;
+interface ChipProps extends React.ComponentPropsWithRef<'span'>, VariantProps<typeof chipStyles> {}
+/** A small status label ("verified", "new", a tag). Smallest radius of the scale. */
+export declare function Chip({ className, variant, size, ...props }: ChipProps): React.JSX.Element;
+export declare const inputStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: string;
+    md: string;
+    lg: string;
+  };
+}, undefined, string[], undefined, undefined, undefined>;
+interface InputProps extends Omit<React.ComponentPropsWithRef<typeof Input$1>, 'size'>, VariantProps<typeof inputStyles> {}
+/** A single-line text field. Works standalone or inside a Base UI `Field`. */
+export declare function Input({ className, size, ...props }: InputProps): React.JSX.Element;
+export declare const switchStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+      thumb: string;
+    };
+    md: {
+      root: string;
+      thumb: string;
+    };
+    lg: {
+      root: string;
+      thumb: string;
+    };
+  };
+}, {
+  root: string[];
+  thumb: string[];
+  label: string[];
+  text: string;
+  description: string;
+}, undefined, undefined, undefined, undefined>;
+interface SwitchProps extends Omit<React.ComponentPropsWithRef<typeof Switch$1.Root>, 'className'>, VariantProps<typeof switchStyles> {
+  /** Text next to the switch; the whole row becomes clickable. */
+  label?: React.ReactNode;
+  /** A muted line under the label. */
+  description?: React.ReactNode;
+  /** Classes for the row (or the switch, without a label), merged last. */
+  className?: string;
+  /** Override individual slot class names. */
+  classNames?: {
+    root?: string;
+    thumb?: string;
+    label?: string;
+    description?: string;
+  };
+}
+/**
+ * An on/off switch. The thumb glides with a spring ease (zeroed by reduced motion through the tokens).
+ * With `label`, the switch sits at the end of a clickable row, like a settings list.
+ */
+export declare function Switch({ className, classNames, size, label, description, ...props }: SwitchProps): React.JSX.Element;
+export declare const cardStyles: import("tailwind-variants").TVReturnType<{
+  interactive: {
+    true: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  header: string;
+  title: string;
+  description: string;
+  body: string;
+  footer: string;
+}, undefined, undefined, undefined, undefined>;
+type DivProps$3 = React.ComponentPropsWithRef<'div'>;
+interface CardRootProps extends DivProps$3, VariantProps<typeof cardStyles> {}
+interface CardProps extends Omit<CardRootProps, 'title'> {
+  /** Heading of the card. With a title or description, children go into `Card.Body`. */
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  /** Actions at the bottom (buttons, links). */
+  footer?: React.ReactNode;
+  classNames?: {
+    header?: string;
+    title?: string;
+    description?: string;
+    body?: string;
+    footer?: string;
+  };
+}
+declare function CardRoot({ className, interactive, ...props }: CardRootProps): React.JSX.Element;
+declare function CardHeader({ className, ...props }: DivProps$3): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentPropsWithRef<'h3'>): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentPropsWithRef<'p'>): React.JSX.Element;
+declare function CardBody({ className, ...props }: DivProps$3): React.JSX.Element;
+declare function CardFooter({ className, ...props }: DivProps$3): React.JSX.Element;
+/**
+ * Short form: `<Card title="Infinite mana" description="…" footer={<Button>Enable</Button>}>…</Card>`.
+ * Without `title`, `description` or `footer` it is just the surface and children render as they are.
+ */
+declare function CardSimple({ title, description, footer, classNames, children, ...props }: CardProps): React.JSX.Element;
+/**
+ * A surface that groups content.
+ *   <Card title="Infinite mana" footer={…}>…</Card>
+ * or compound: <Card.Root><Card.Header>…</Card.Header><Card.Body>…</Card.Body></Card.Root>
+ */
+export declare const Card: typeof CardSimple & {
+  Root: typeof CardRoot;
+  Header: typeof CardHeader;
+  Title: typeof CardTitle;
+  Description: typeof CardDescription;
+  Body: typeof CardBody;
+  Footer: typeof CardFooter;
+};
+interface RevealProps extends HTMLMotionProps<'div'> {
+  /** Seconds before the element starts to appear. */
+  delay?: number;
+  /** Animate only the first time it scrolls into view. @default true */
+  once?: boolean;
+}
+/** Fades and lifts its content in when it scrolls into view. Static with reduced motion. */
+declare function RevealRoot({ delay, once, transition, ...props }: RevealProps): import("react").JSX.Element;
+interface RevealGroupProps extends HTMLMotionProps<'div'> {
+  /** Seconds between two children. @default 0.06 */
+  stagger?: number;
+  once?: boolean;
+}
+/** Reveals its `Reveal.Item` children one after another (cards in a grid, list rows). */
+declare function RevealGroup({ stagger, once, ...props }: RevealGroupProps): import("react").JSX.Element;
+declare function RevealItem(props: HTMLMotionProps<'div'>): import("react").JSX.Element;
+export declare const Reveal: typeof RevealRoot & {
+  Group: typeof RevealGroup;
+  Item: typeof RevealItem;
+};
+export declare const revealEase: readonly [0.22, 1, 0.36, 1];
+interface LabelProps extends React.ComponentPropsWithRef<'label'> {
+  /** Adds a required marker after the text. Put `required` on the control too. */
+  required?: boolean;
+  /** Dims the label to match a disabled control. */
+  disabled?: boolean;
+}
+/** A label for a form control. Inside a `Field`, use `Field.Label` instead. */
+export declare function Label({ className, required, disabled, children, ...props }: LabelProps): React.JSX.Element;
+export declare const labelStyles: import("tailwind-variants").TVReturnType<{}, {
+  base: string[];
+  required: string;
+}, undefined, undefined, undefined, undefined>;
+declare function FieldRoot({ className, ...props }: React.ComponentPropsWithRef<typeof Field$1.Root>): React.JSX.Element;
+declare function FieldLabel({ className, required, children, ...props }: React.ComponentPropsWithRef<typeof Field$1.Label> & {
+  required?: boolean;
+}): React.JSX.Element;
+/**
+ * The text input of the field, styled like `Input`. To put another text control in a field, pass it
+ * as `render` (e.g. `render={<Textarea />}`): it then keeps its own styles.
+ */
+declare function FieldControl({ className, render, ...props }: React.ComponentPropsWithRef<typeof Field$1.Control>): React.JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentPropsWithRef<typeof Field$1.Description>): React.JSX.Element;
+declare function FieldError({ className, ...props }: React.ComponentPropsWithRef<typeof Field$1.Error>): React.JSX.Element;
+interface FieldProps extends Omit<React.ComponentPropsWithRef<typeof Field$1.Root>, 'className'> {
+  /** The label above the control. */
+  label?: React.ReactNode;
+  /** Adds a required marker to the label. Put `required` on the control too. */
+  required?: boolean;
+  /** Help text under the control, linked with `aria-describedby`. */
+  description?: React.ReactNode;
+  /** Shown when the control is invalid (or always, with `match={true}` via `errorMatch`). */
+  error?: React.ReactNode;
+  /** Passed to `Field.Error`'s `match` (e.g. `'valueMissing'`, or `true` to always show). */
+  errorMatch?: React.ComponentProps<typeof Field$1.Error>['match'];
+  className?: string;
+  classNames?: {
+    root?: string;
+    label?: string;
+    description?: string;
+    error?: string;
+  };
+  children?: React.ReactNode;
+}
+/**
+ * A labelled form field. Short form: `<Field label="Name" description="…"><Field.Control /></Field>`.
+ * Compound: `Field.Root`, `Field.Label`, `Field.Control`, `Field.Description`, `Field.Error`.
+ */
+declare function FieldSimple({ label, required, description, error, errorMatch, className, classNames, children, ...props }: FieldProps): React.JSX.Element;
+export declare const Field: typeof FieldSimple & {
+  Root: typeof FieldRoot;
+  Label: typeof FieldLabel;
+  Control: typeof FieldControl;
+  Description: typeof FieldDescription;
+  Error: typeof FieldError;
+};
+export declare const fieldStyles: import("tailwind-variants").TVReturnType<{}, {
+  root: string;
+  label: string;
+  description: string;
+  error: string;
+}, undefined, undefined, undefined, undefined>;
+/**
+ * The native resize grip is off (`resize-none`): with squircle corners the polyfill in Firefox/Safari
+ * draws stray lines around it. A small grip of our own sits in the bottom-right padding instead.
+ */
+export declare const textareaStyles: import("tailwind-variants").TVReturnType<{
+  resize: {
+    none: {};
+    vertical: {
+      textarea: string;
+    };
+  };
+}, {
+  root: string;
+  textarea: string[];
+  grip: string[];
+}, undefined, undefined, undefined, undefined>;
+interface TextareaProps extends Omit<React.ComponentPropsWithRef<'textarea'>, 'className'>, VariantProps<typeof textareaStyles> {
+  /** Grow (and shrink) with the content. Cap it with a `max-h-*` class; past that it scrolls. */
+  autoResize?: boolean;
+  /** Classes for the `<textarea>`, merged last. */
+  className?: string;
+  /** Classes per slot: `root` (the wrapper), `textarea`, `grip`. */
+  classNames?: {
+    root?: string;
+    textarea?: string;
+    grip?: string;
+  };
+}
+/**
+ * A multi-line text field. With `resize="vertical"` (default) a small grip in the bottom-right corner
+ * changes the height by dragging it or with the arrow keys; `autoResize` grows it with the content.
+ * No shadow and no native grip (squircle polyfill rules).
+ */
+export declare function Textarea({ className, classNames, resize, autoResize, ref, onInput, disabled, value, ...props }: TextareaProps): React.JSX.Element;
+type RootProps$1 = Omit<React.ComponentPropsWithRef<typeof Checkbox$1.Root>, 'className'> & {
+  className?: string;
+};
+/** The box itself, without the label row. Renders a `<span role="checkbox">` and a hidden input. */
+declare function CheckboxRoot({ className, ...props }: RootProps$1): React.JSX.Element;
+type IndicatorProps = Omit<React.ComponentPropsWithRef<typeof Checkbox$1.Indicator>, 'className'> & {
+  className?: string;
+};
+/** The tick (or the dash when indeterminate). Without children it draws the default icons. */
+declare function CheckboxIndicator({ className, children, ...props }: IndicatorProps): React.JSX.Element;
+interface CheckboxProps extends RootProps$1 {
+  /** Text next to the box; the whole row becomes clickable. */
+  label?: React.ReactNode;
+  /** A muted line under the label. */
+  description?: React.ReactNode;
+  /** Classes for the row (or the box, without a label), merged last. */
+  className?: string;
+  /** Classes per slot. */
+  classNames?: {
+    root?: string;
+    indicator?: string;
+    label?: string;
+    description?: string;
+  };
+}
+/** A box to tick. `indeterminate` (or a `parent` box in a group) shows a dash. */
+declare function CheckboxSimple({ label, description, className, classNames, ...props }: CheckboxProps): React.JSX.Element;
+interface CheckboxGroupProps extends Omit<React.ComponentPropsWithRef<typeof CheckboxGroup$1>, 'className'> {
+  className?: string;
+}
+/** Several checkboxes sharing one array value. */
+export declare function CheckboxGroup({ className, ...props }: CheckboxGroupProps): React.JSX.Element;
+export declare const Checkbox: typeof CheckboxSimple & {
+  Root: typeof CheckboxRoot;
+  Indicator: typeof CheckboxIndicator;
+};
+export declare const checkboxStyles: import("tailwind-variants").TVReturnType<{}, {
+  root: string[];
+  indicator: string[];
+  check: string;
+  dash: string;
+  label: string[];
+  text: string;
+  description: string;
+  group: string;
+}, undefined, undefined, undefined, undefined>;
+interface RadioProps extends Omit<React.ComponentPropsWithRef<typeof Radio$1.Root>, 'className'> {
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  className?: string;
+  classNames?: {
+    item?: string;
+    radio?: string;
+    indicator?: string;
+    description?: string;
+  };
+}
+/** One option of a `RadioGroup`. */
+export declare function Radio({ label, description, className, classNames, ...props }: RadioProps): React.JSX.Element;
+interface RadioGroupItem {
+  value: string;
+  label: React.ReactNode;
+  description?: React.ReactNode;
+  disabled?: boolean;
+}
+interface RadioGroupProps extends Omit<React.ComponentPropsWithRef<typeof RadioGroup$1>, 'className'> {
+  /** Short form: the options. Or pass `<Radio>` children. */
+  items?: RadioGroupItem[];
+  className?: string;
+}
+/** Pick one option. `<RadioGroup items={[…]} />` or `<RadioGroup><Radio value="a" label="A" /></RadioGroup>`. */
+export declare function RadioGroup({ items, className, children, ...props }: RadioGroupProps): React.JSX.Element;
+export declare const radioGroupStyles: import("tailwind-variants").TVReturnType<{}, {
+  group: string;
+  radio: string[];
+  indicator: string[];
+  item: string;
+  text: string;
+  description: string;
+}, undefined, undefined, undefined, undefined>;
+export declare const selectStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      trigger: string;
+    };
+    md: {
+      trigger: string;
+    };
+    lg: {
+      trigger: string;
+    };
+  };
+}, {
+  trigger: string[];
+  value: string;
+  icon: string;
+  positioner: string;
+  popup: string[];
+  item: string[];
+  itemIndicator: string;
+  groupLabel: string;
+  separator: string;
+}, undefined, undefined, undefined, undefined>;
+type Cls = {
+  className?: string;
+};
+type Props$4<C extends React.ElementType> = Omit<React.ComponentPropsWithRef<C>, 'className'> & Cls;
+declare function SelectTrigger({ className, children, size, ...props }: Props$4<typeof Select$1.Trigger> & VariantProps<typeof selectStyles>): React.JSX.Element;
+declare function SelectValue({ className, ...props }: Props$4<typeof Select$1.Value>): React.JSX.Element;
+/** The popup: portal + positioner + popup + list in one. */
+declare function SelectContent({ className, children, sideOffset, alignItemWithTrigger, ...props }: Props$4<typeof Select$1.Popup> & {
+  sideOffset?: number;
+  alignItemWithTrigger?: boolean;
+}): React.JSX.Element;
+declare function SelectItem({ className, children, ...props }: Props$4<typeof Select$1.Item>): React.JSX.Element;
+declare function SelectGroupLabel({ className, ...props }: Props$4<typeof Select$1.GroupLabel>): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: Props$4<typeof Select$1.Separator>): React.JSX.Element;
+interface SelectOption {
+  value: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+}
+interface SelectProps extends VariantProps<typeof selectStyles> {
+  /** The options. */
+  items: SelectOption[];
+  /** Shown in the trigger while nothing is picked. */
+  placeholder?: React.ReactNode;
+  /** The picked value (controlled). */
+  value?: string | null;
+  /** The value picked at first (uncontrolled). */
+  defaultValue?: string | null;
+  /** Called with the new value. */
+  onValueChange?: (value: string | null) => void;
+  /** Called when the popup opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Turns the whole select off. */
+  disabled?: boolean;
+  /** Shows the value but blocks changes. */
+  readOnly?: boolean;
+  /** Field name, for native form submission. */
+  name?: string;
+  /** A value must be picked before the form submits. */
+  required?: boolean;
+  /** Id of the trigger, for an external `<Label htmlFor>`. */
+  id?: string;
+  'aria-label'?: string;
+  /** Classes for the trigger, merged last. */
+  className?: string;
+  /** Classes per slot. */
+  classNames?: {
+    trigger?: string;
+    popup?: string;
+    item?: string;
+  };
+}
+/**
+ * Pick one value. Short form: `<Select items={[{ value, label }]} placeholder="…" />`.
+ * Compound: `Select.Root`, `Select.Trigger`, `Select.Value`, `Select.Content`, `Select.Item`,
+ * `Select.Group`, `Select.GroupLabel`, `Select.Separator`.
+ */
+declare function SelectSimple({ items, placeholder, className, classNames, 'aria-label': ariaLabel, id, size, onValueChange, onOpenChange, ...props }: SelectProps): React.JSX.Element;
+export declare const Select: typeof SelectSimple & {
+  Root: typeof Select$1.Root;
+  Trigger: typeof SelectTrigger;
+  Value: typeof SelectValue;
+  Content: typeof SelectContent;
+  Item: typeof SelectItem;
+  Group: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  GroupLabel: typeof SelectGroupLabel;
+  Separator: typeof SelectSeparator;
+};
+interface SliderProps extends Omit<React.ComponentPropsWithRef<typeof Slider$1.Root>, 'className'> {
+  /** Text above the track. */
+  label?: React.ReactNode;
+  /** Show the current value next to the label. */
+  showValue?: boolean;
+  /** Classes for the root, merged last. */
+  className?: string;
+  /** Classes per slot. */
+  classNames?: {
+    root?: string;
+    label?: string;
+    value?: string;
+    track?: string;
+    indicator?: string;
+    thumb?: string;
+  };
+}
+/**
+ * Pick a value on a track. Pass an array as `defaultValue` for a range (two thumbs).
+ * Compound parts (styled): `Slider.Root`, `Slider.Label`, `Slider.Value`, `Slider.Control`, `Slider.Track`,
+ * `Slider.Indicator`, `Slider.Thumb`.
+ */
+declare function SliderSimple({ label, showValue, className, classNames, defaultValue, value, ...props }: SliderProps): React.JSX.Element;
+type Part<C extends React.ElementType> = Omit<React.ComponentPropsWithRef<C>, 'className'> & {
+  className?: string;
+};
+declare function SliderRoot({ className, ...props }: Part<typeof Slider$1.Root>): React.JSX.Element;
+declare function SliderLabel({ className, ...props }: Part<typeof Slider$1.Label>): React.JSX.Element;
+declare function SliderValue({ className, ...props }: Part<typeof Slider$1.Value>): React.JSX.Element;
+declare function SliderControl({ className, ...props }: Part<typeof Slider$1.Control>): React.JSX.Element;
+declare function SliderTrack({ className, ...props }: Part<typeof Slider$1.Track>): React.JSX.Element;
+declare function SliderIndicator({ className, ...props }: Part<typeof Slider$1.Indicator>): React.JSX.Element;
+declare function SliderThumb({ className, ...props }: Part<typeof Slider$1.Thumb>): React.JSX.Element;
+export declare const Slider: typeof SliderSimple & {
+  Root: typeof SliderRoot;
+  Label: typeof SliderLabel;
+  Value: typeof SliderValue;
+  Control: typeof SliderControl;
+  Track: typeof SliderTrack;
+  Indicator: typeof SliderIndicator;
+  Thumb: typeof SliderThumb;
+};
+export declare const sliderStyles: import("tailwind-variants").TVReturnType<{}, {
+  root: string;
+  header: string;
+  label: string;
+  value: string;
+  control: string;
+  track: string;
+  indicator: string;
+  thumb: string[];
+}, undefined, undefined, undefined, undefined>;
+export declare const toggleStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    ghost: string;
+    outline: string;
+  };
+  size: {
+    sm: string;
+    md: string;
+    lg: string;
+    'icon-sm': string;
+    icon: string;
+    'icon-lg': string;
+  };
+}, undefined, string[], undefined, undefined, undefined>;
+interface ToggleProps extends Omit<React.ComponentPropsWithRef<typeof Toggle$1>, 'className'>, VariantProps<typeof toggleStyles> {
+  className?: string;
+}
+/** A button that stays pressed (bold, show grid…). Pressed state uses the soft accent. */
+export declare function Toggle({ className, variant, size, ...props }: ToggleProps): React.JSX.Element;
+/**
+ * Looks like a row of `Toggle`s: transparent items, muted text, and the pressed one on the soft
+ * accent fill. In single mode the fill glides from item to item (a `motion` layout animation on
+ * transform only); with `multiple` each pressed item gets its own fill.
+ */
+export declare const toggleGroupStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    /** A thin frame around the items, for a segmented control. */
+    outline: {
+      root: string;
+    };
+    /** No frame: a bare row of toggles, for toolbars. */
+    ghost: {
+      root: string;
+    };
+  };
+  size: {
+    sm: {
+      root: string;
+      item: string;
+      indicator: string;
+      hover: string;
+    };
+    md: {
+      root: string;
+      item: string;
+      indicator: string;
+      hover: string;
+    };
+    lg: {
+      root: string;
+      item: string;
+      indicator: string;
+      hover: string;
+    };
+  };
+  iconOnly: {
+    true: {
+      item: string;
+    };
+  };
+}, {
+  root: string;
+  item: string[];
+  indicator: string;
+  /** The neutral hover block that glides between items (`glideBlockClass` + the item radius). */
+  hover: string;
+}, undefined, undefined, undefined, undefined>;
+type Styles = VariantProps<typeof toggleGroupStyles>;
+interface ToggleGroupItemProps extends Omit<Toggle$1.Props<string>, 'className' | 'render'> {
+  /** The value this item adds to the group's value when pressed. */
+  value: string;
+  className?: string;
+}
+/** One toggle in a `ToggleGroup`. Renders a `<button>` with `aria-pressed`. */
+declare function ToggleGroupItem({ className, children, ...props }: ToggleGroupItemProps): React.JSX.Element;
+interface ToggleGroupItem {
+  value: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+  'aria-label'?: string;
+}
+interface ToggleGroupProps extends Omit<ToggleGroup$1.Props<string>, 'className'>, Styles {
+  /** Short form: the options. Or pass `<ToggleGroup.Item value="…">` children. */
+  items?: ToggleGroupItem[];
+  className?: string;
+  classNames?: {
+    root?: string;
+    item?: string;
+    indicator?: string;
+    hover?: string;
+  };
+}
+/**
+ * A row of toggles. Single (default): a segmented control whose soft accent fill glides to the
+ * pressed item. `multiple`: a toolbar where any number of items can be pressed.
+ * Short form: `<ToggleGroup items={[{ value, label }]} />`. Compound: `ToggleGroup.Item`.
+ */
+declare function ToggleGroupRoot({ items, size, variant, iconOnly, multiple, className, classNames, children, ref, ...props }: ToggleGroupProps): React.JSX.Element;
+export declare const ToggleGroup: typeof ToggleGroupRoot & {
+  Item: typeof ToggleGroupItem;
+};
+export declare const kbdStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: string;
+    md: string;
+  };
+}, undefined, string[], undefined, undefined, undefined>;
+interface KbdProps extends React.ComponentPropsWithRef<'kbd'>, VariantProps<typeof kbdStyles> {}
+/** A keyboard key: `<Kbd>Ctrl</Kbd><Kbd>K</Kbd>`. */
+export declare function Kbd({ className, size, ...props }: KbdProps): React.JSX.Element;
+/** Keys pressed together, with a small gap. */
+export declare function KbdGroup({ className, ...props }: React.ComponentPropsWithRef<'span'>): React.JSX.Element;
+export declare const inputGroupStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  input: string;
+  addon: string;
+}, undefined, undefined, undefined, undefined>;
+type Size$3 = VariantProps<typeof inputGroupStyles>['size'];
+declare function InputGroupRoot({ className, size, ...props }: React.ComponentPropsWithRef<'div'> & {
+  size?: Size$3;
+}): React.JSX.Element;
+declare function InputGroupInput({ className, ...props }: Omit<React.ComponentPropsWithRef<typeof Input$1>, 'className'> & {
+  className?: string;
+}): React.JSX.Element;
+declare function InputGroupAddon({ className, ...props }: React.ComponentPropsWithRef<'span'>): React.JSX.Element;
+interface InputGroupProps extends Omit<React.ComponentPropsWithRef<typeof Input$1>, 'className' | 'size'>, VariantProps<typeof inputGroupStyles> {
+  /** Icon or text before the input (e.g. a search icon, "https://"). */
+  start?: React.ReactNode;
+  /** Icon, text or a small button after the input (e.g. a `Kbd`, a clear button). */
+  end?: React.ReactNode;
+  className?: string;
+  classNames?: {
+    root?: string;
+    input?: string;
+    start?: string;
+    end?: string;
+  };
+}
+/**
+ * An input with add-ons. Short form: `<InputGroup start={<Search />} end={<Kbd>K</Kbd>} />`.
+ * Compound: `InputGroup.Root`, `InputGroup.Addon`, `InputGroup.Input`.
+ */
+declare function InputGroupSimple({ start, end, size, className, classNames, ...props }: InputGroupProps): React.JSX.Element;
+export declare const InputGroup: typeof InputGroupSimple & {
+  Root: typeof InputGroupRoot;
+  Input: typeof InputGroupInput;
+  Addon: typeof InputGroupAddon;
+};
+/**
+ * Joins buttons: inner corners go square, neighbouring borders overlap by one pixel.
+ * Works with any Button variant; outline reads best.
+ */
+export declare const buttonGroupStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    horizontal: string[];
+    vertical: string[];
+  };
+}, undefined, "inline-flex isolate [&>*:focus-visible]:z-10", undefined, undefined, undefined>;
+interface ButtonGroupProps extends React.ComponentPropsWithRef<'div'>, VariantProps<typeof buttonGroupStyles> {}
+/** Buttons joined into one control: `<ButtonGroup><Button variant="outline">…</Button>…</ButtonGroup>`. */
+export declare function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps): React.JSX.Element;
+/**
+ * Looks like `Input`: the group carries the border, the radius and the focus colour, the steppers sit
+ * inside it as small ghost buttons with a concentric radius (group radius minus the 4px inset).
+ * The input is a text input with `inputmode`, so there are never native spinner buttons.
+ */
+export declare const numberFieldStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      group: string;
+      button: string;
+    };
+    md: {
+      group: string;
+      button: string;
+    };
+    lg: {
+      group: string;
+      button: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+  scrubArea: string;
+  scrubCursor: string;
+  group: string[];
+  input: string[];
+  button: string[];
+  scrubHandle: string;
+}, undefined, undefined, undefined, undefined>;
+type Slots$2 = keyof ReturnType<typeof numberFieldStyles>;
+type PartProps<T extends React.ElementType> = Omit<React.ComponentPropsWithRef<T>, 'className'> & {
+  className?: string;
+};
+interface NumberFieldRootProps extends PartProps<typeof NumberField$1.Root>, VariantProps<typeof numberFieldStyles> {}
+declare function NumberFieldRoot({ size, className, ...props }: NumberFieldRootProps): React.JSX.Element;
+/** The bordered box around the steppers and the input. */
+declare function NumberFieldGroup({ className, ...props }: PartProps<typeof NumberField$1.Group>): React.JSX.Element;
+/** The text input (`inputmode="decimal"`), formatted with the field's locale. */
+declare function NumberFieldInput({ className, ...props }: PartProps<typeof NumberField$1.Input>): React.JSX.Element;
+/** The minus button. Children replace the icon. */
+declare function NumberFieldDecrement({ className, children, ...props }: PartProps<typeof NumberField$1.Decrement>): React.JSX.Element;
+/** The plus button. Children replace the icon. */
+declare function NumberFieldIncrement({ className, children, ...props }: PartProps<typeof NumberField$1.Increment>): React.JSX.Element;
+/** Drag horizontally over its children to change the value. Put a label or an icon inside. */
+declare function NumberFieldScrubArea({ className, ...props }: PartProps<typeof NumberField$1.ScrubArea>): React.JSX.Element;
+/** The cursor shown while scrubbing (the real pointer is locked and hidden). */
+declare function NumberFieldScrubAreaCursor({ className, children, ...props }: PartProps<typeof NumberField$1.ScrubAreaCursor>): React.JSX.Element;
+interface NumberFieldProps extends NumberFieldRootProps {
+  /** A label above the field. With `scrub`, dragging it changes the value. */
+  label?: React.ReactNode;
+  /**
+   * Change the value by dragging horizontally: over the `label` if there is one, otherwise over a
+   * small handle at the start of the field. @default false
+   */
+  scrub?: boolean;
+  /** Shown while the field is empty. */
+  placeholder?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  /** Hide the minus and plus buttons (arrow keys and the wheel still step). @default false */
+  hideButtons?: boolean;
+  classNames?: Partial<Record<Slots$2, string>>;
+}
+/**
+ * A field for numbers with our own minus and plus buttons (no native spinners).
+ *   <NumberField aria-label="Ore" defaultValue={50} min={0} max={999} />
+ * Arrow keys step by `step`, Shift by `largeStep`, Alt by `smallStep`.
+ * Compound: NumberField.Root / Group / Decrement / Input / Increment / ScrubArea / ScrubAreaCursor.
+ */
+declare function NumberFieldSimple({ label, scrub, placeholder, hideButtons, size, className, classNames, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...props }: NumberFieldProps): React.JSX.Element;
+export declare const NumberField: typeof NumberFieldSimple & {
+  Root: typeof NumberFieldRoot;
+  Group: typeof NumberFieldGroup;
+  Input: typeof NumberFieldInput;
+  Decrement: typeof NumberFieldDecrement;
+  Increment: typeof NumberFieldIncrement;
+  ScrubArea: typeof NumberFieldScrubArea;
+  ScrubAreaCursor: typeof NumberFieldScrubAreaCursor;
+};
+type Side$3 = 'top' | 'right' | 'bottom' | 'left' | 'inline-start' | 'inline-end';
+type Align$1 = 'start' | 'center' | 'end';
+interface TooltipContentProps extends React.ComponentPropsWithRef<typeof Tooltip$1.Popup> {
+  /** Which side of the trigger the tooltip appears on. @default 'top' */
+  side?: Side$3;
+  /** How the tooltip lines up with the trigger along that side. @default 'center' */
+  align?: Align$1;
+  /** Gap between trigger and tooltip, in px. @default 8 */
+  sideOffset?: number;
+  classNames?: {
+    positioner?: string;
+    popup?: string;
+  };
+}
+declare function TooltipContent({ side, align, sideOffset, className, classNames, ...props }: TooltipContentProps): React.JSX.Element;
+interface TooltipProps extends Omit<React.ComponentProps<typeof Tooltip$1.Root>, 'children'> {
+  /** The hint text. */
+  content: React.ReactNode;
+  /** The element that shows the tooltip on hover and focus. */
+  children: React.ReactElement;
+  side?: Side$3;
+  align?: Align$1;
+  /** Milliseconds before it opens. @default 400 */
+  delay?: number;
+  /** Milliseconds before it closes once the pointer leaves. @default 0 */
+  closeDelay?: number;
+  className?: string;
+  classNames?: {
+    positioner?: string;
+    popup?: string;
+  };
+}
+/**
+ * A short hint on hover or focus.
+ *   <Tooltip content="Copy"><Button size="icon">…</Button></Tooltip>
+ * Wrap a group in `Tooltip.Provider` so neighbouring tooltips open instantly one after another.
+ */
+declare function TooltipSimple({ content, children, side, align, delay, closeDelay, className, classNames, ...root }: TooltipProps): React.JSX.Element;
+export declare const Tooltip: typeof TooltipSimple & {
+  Provider: React.FC<import("@base-ui/react").TooltipProviderProps>;
+  Root: <Payload>(props: Tooltip$1.Root.Props<Payload>) => React.JSX.Element;
+  Trigger: Tooltip$1.Trigger;
+  Content: typeof TooltipContent;
+};
+/**
+ * Same surface as popovers and menus, just smaller: a small-control radius (never the chip one, which
+ * read as a sharp box), roomy padding and regular-weight text. No arrow: a pointed tip breaks the
+ * squircle outline, and the side offset already makes the anchor obvious.
+ */
+export declare const tooltipStyles: import("tailwind-variants").TVReturnType<{}, {
+  positioner: string;
+  popup: string[];
+}, undefined, undefined, undefined, undefined>;
+type Side$2 = 'top' | 'right' | 'bottom' | 'left' | 'inline-start' | 'inline-end';
+type Align = 'start' | 'center' | 'end';
+interface PopoverContentProps extends React.ComponentPropsWithRef<typeof Popover$1.Popup> {
+  side?: Side$2;
+  align?: Align;
+  sideOffset?: number;
+  /** Show a small close button in the corner. @default false */
+  showClose?: boolean;
+  classNames?: {
+    positioner?: string;
+    popup?: string;
+  };
+}
+declare function PopoverContent({ side, align, sideOffset, showClose, className, classNames, children, ...props }: PopoverContentProps): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: React.ComponentPropsWithRef<typeof Popover$1.Title>): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: React.ComponentPropsWithRef<typeof Popover$1.Description>): React.JSX.Element;
+interface PopoverProps extends Omit<React.ComponentProps<typeof Popover$1.Root>, 'children'> {
+  /** The element that opens the popover (a Button, a link …). */
+  trigger: React.ReactElement;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  side?: Side$2;
+  align?: Align;
+  /** Show a small close button in the corner. @default false */
+  showClose?: boolean;
+  className?: string;
+  classNames?: {
+    positioner?: string;
+    popup?: string;
+  };
+  children?: React.ReactNode;
+}
+/**
+ * Floating content anchored to a trigger.
+ *   <Popover trigger={<Button>Open</Button>} title="Filters">…</Popover>
+ * or compound: Popover.Root / Trigger / Content / Title / Description / Close.
+ */
+declare function PopoverSimple({ trigger, title, description, side, align, showClose, className, classNames, children, ...root }: PopoverProps): React.JSX.Element;
+export declare const Popover: typeof PopoverSimple & {
+  Root: typeof Popover$1.Root;
+  Trigger: Popover$1.Trigger;
+  Content: typeof PopoverContent;
+  Title: typeof PopoverTitle;
+  Description: typeof PopoverDescription;
+  Close: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+/** Surface shared by every floating panel (popover, menu, tooltip, hover card, dialog). */
+export declare const popupSurface = "squircle border border-border bg-popover text-foreground shadow-overlay outline-none";
+/** Enter/exit like Fumadocs' popups: fade + a small scale from the trigger. */
+export declare const popupMotion: string;
+/** A dimmed, slightly blurred backdrop for modal overlays. */
+export declare const backdropStyles = "fixed inset-0 z-50 bg-black/30 backdrop-blur-xs transition-opacity duration-[var(--cui-duration-normal)] ease-ui data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";
+export declare const popoverStyles: import("tailwind-variants").TVReturnType<{}, {
+  positioner: string;
+  popup: string[];
+  title: string;
+  description: string;
+  close: string;
+}, undefined, undefined, undefined, undefined>;
+export declare const dialogStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      popup: string;
+    };
+    md: {
+      popup: string;
+    };
+    lg: {
+      popup: string;
+    };
+  };
+}, {
+  backdrop: string;
+  popup: string[];
+  header: string;
+  title: string;
+  description: string;
+  body: string;
+  footer: string;
+  close: string;
+}, undefined, undefined, undefined, undefined>;
+type DivProps$2 = React.ComponentPropsWithRef<'div'>;
+interface DialogContentProps extends React.ComponentPropsWithRef<typeof Dialog$1.Popup>, VariantProps<typeof dialogStyles> {
+  /** Show the close button in the corner. @default true */
+  showClose?: boolean;
+  classNames?: {
+    backdrop?: string;
+    popup?: string;
+  };
+}
+declare function DialogContent({ size, showClose, className, classNames, children, ...props }: DialogContentProps): React.JSX.Element;
+declare const DialogHeader: ({ className, ...props }: DivProps$2) => React.JSX.Element;
+declare const DialogBody: ({ className, ...props }: DivProps$2) => React.JSX.Element;
+declare const DialogFooter: ({ className, ...props }: DivProps$2) => React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentPropsWithRef<typeof Dialog$1.Title>): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentPropsWithRef<typeof Dialog$1.Description>): React.JSX.Element;
+interface DialogProps extends Omit<React.ComponentProps<typeof Dialog$1.Root>, 'children'> {
+  trigger?: React.ReactElement;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** Buttons at the bottom; wrap the closing ones in `Dialog.Close render={…}`. */
+  footer?: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  children?: React.ReactNode;
+}
+/**
+ * A modal window.
+ *   <Dialog trigger={<Button>Edit</Button>} title="Edit kit" footer={…}>…</Dialog>
+ * or compound: Dialog.Root / Trigger / Content / Header / Title / Description / Body / Footer / Close.
+ */
+declare function DialogSimple({ trigger, title, description, footer, size, className, children, ...root }: DialogProps): React.JSX.Element;
+export declare const Dialog: typeof DialogSimple & {
+  Root: <Payload>(props: Dialog$1.Root.Props<Payload>) => React.JSX.Element;
+  Trigger: Dialog$1.Trigger;
+  Content: typeof DialogContent;
+  Header: typeof DialogHeader;
+  Title: typeof DialogTitle;
+  Description: typeof DialogDescription;
+  Body: typeof DialogBody;
+  Footer: typeof DialogFooter;
+  Close: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+/** Same panel as Dialog, narrower and without a corner close button. */
+export declare const alertDialogStyles: import("tailwind-variants").TVReturnType<{}, {
+  header: string;
+}, undefined, {
+  size: {
+    sm: {
+      popup: string;
+    };
+    md: {
+      popup: string;
+    };
+    lg: {
+      popup: string;
+    };
+  };
+}, {
+  backdrop: string;
+  popup: string[];
+  header: string;
+  title: string;
+  description: string;
+  body: string;
+  footer: string;
+  close: string;
+}, import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      popup: string;
+    };
+    md: {
+      popup: string;
+    };
+    lg: {
+      popup: string;
+    };
+  };
+}, {
+  backdrop: string;
+  popup: string[];
+  header: string;
+  title: string;
+  description: string;
+  body: string;
+  footer: string;
+  close: string;
+}, undefined, undefined, undefined, undefined>>;
+type DivProps$1 = React.ComponentPropsWithRef<'div'>;
+interface AlertDialogContentProps extends React.ComponentPropsWithRef<typeof AlertDialog$1.Popup>, VariantProps<typeof alertDialogStyles> {
+  classNames?: {
+    backdrop?: string;
+    popup?: string;
+  };
+}
+declare function AlertDialogContent({ size, className, classNames, ...props }: AlertDialogContentProps): React.JSX.Element;
+declare const AlertDialogHeader: ({ className, ...props }: DivProps$1) => React.JSX.Element;
+declare const AlertDialogFooter: ({ className, ...props }: DivProps$1) => React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentPropsWithRef<typeof AlertDialog$1.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentPropsWithRef<typeof AlertDialog$1.Description>): React.JSX.Element;
+interface AlertDialogProps extends Omit<React.ComponentProps<typeof AlertDialog$1.Root>, 'children'> {
+  trigger?: React.ReactElement;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** @default 'Cancel' */
+  cancelLabel?: React.ReactNode;
+  /** @default 'Continue' */
+  actionLabel?: React.ReactNode;
+  onAction?: () => void;
+  /** `danger` paints the action red (delete, reset …). @default 'default' */
+  tone?: 'default' | 'danger';
+  className?: string;
+}
+/**
+ * A modal that asks to confirm an action. Clicking outside doesn't dismiss it.
+ *   <AlertDialog trigger={<Button variant="danger">Delete</Button>} title="Delete kit?" tone="danger" onAction={…} />
+ */
+declare function AlertDialogSimple({ trigger, title, description, cancelLabel, actionLabel, onAction, tone, className, ...root }: AlertDialogProps): React.JSX.Element;
+export declare const AlertDialog: typeof AlertDialogSimple & {
+  Root: typeof AlertDialog$1.Root;
+  Trigger: AlertDialog$1.Trigger;
+  Content: typeof AlertDialogContent;
+  Header: typeof AlertDialogHeader;
+  Title: typeof AlertDialogTitle;
+  Description: typeof AlertDialogDescription;
+  Footer: typeof AlertDialogFooter;
+  Close: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+/** A floating side panel, inset from the window edge like the docs page panel. */
+export declare const sheetStyles: import("tailwind-variants").TVReturnType<{
+  side: {
+    right: {
+      popup: string;
+    };
+    left: {
+      popup: string;
+    };
+    top: {
+      popup: string;
+    };
+    bottom: {
+      popup: string;
+    };
+  };
+}, {
+  backdrop: string;
+  popup: string[];
+  header: string;
+  title: string;
+  description: string;
+  body: string;
+  footer: string;
+  close: string;
+}, undefined, undefined, undefined, undefined>;
+type DivProps = React.ComponentPropsWithRef<'div'>;
+interface SheetContentProps extends React.ComponentPropsWithRef<typeof Dialog$1.Popup>, VariantProps<typeof sheetStyles> {
+  /** @default true */
+  showClose?: boolean;
+  classNames?: {
+    backdrop?: string;
+    popup?: string;
+  };
+}
+declare function SheetContent({ side, showClose, className, classNames, children, ...props }: SheetContentProps): React.JSX.Element;
+declare const SheetHeader: ({ className, ...props }: DivProps) => React.JSX.Element;
+declare const SheetBody: ({ className, ...props }: DivProps) => React.JSX.Element;
+declare const SheetFooter: ({ className, ...props }: DivProps) => React.JSX.Element;
+declare function SheetTitle({ className, ...props }: React.ComponentPropsWithRef<typeof Dialog$1.Title>): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: React.ComponentPropsWithRef<typeof Dialog$1.Description>): React.JSX.Element;
+interface SheetProps extends Omit<React.ComponentProps<typeof Dialog$1.Root>, 'children'> {
+  trigger?: React.ReactElement;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  footer?: React.ReactNode;
+  side?: 'right' | 'left' | 'top' | 'bottom';
+  className?: string;
+  children?: React.ReactNode;
+}
+/**
+ * A side panel over the page (filters, settings, details).
+ *   <Sheet trigger={<Button>Filters</Button>} title="Filters" side="right">…</Sheet>
+ */
+declare function SheetSimple({ trigger, title, description, footer, side, className, children, ...root }: SheetProps): React.JSX.Element;
+export declare const Sheet: typeof SheetSimple & {
+  Root: <Payload>(props: Dialog$1.Root.Props<Payload>) => React.JSX.Element;
+  Trigger: Dialog$1.Trigger;
+  Content: typeof SheetContent;
+  Header: typeof SheetHeader;
+  Title: typeof SheetTitle;
+  Description: typeof SheetDescription;
+  Body: typeof SheetBody;
+  Footer: typeof SheetFooter;
+  Close: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+interface DrawerContentProps extends React.ComponentPropsWithRef<typeof Drawer$1.Popup> {
+  /** Show the grab handle at the top. @default true */
+  showHandle?: boolean;
+  classNames?: {
+    backdrop?: string;
+    viewport?: string;
+    popup?: string;
+    content?: string;
+  };
+}
+declare function DrawerContent({ showHandle, className, classNames, children, ...props }: DrawerContentProps): React.JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentPropsWithRef<typeof Drawer$1.Title>): React.JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentPropsWithRef<typeof Drawer$1.Description>): React.JSX.Element;
+declare const DrawerBody: ({ className, ...props }: React.ComponentPropsWithRef<'div'>) => React.JSX.Element;
+declare const DrawerFooter: ({ className, ...props }: React.ComponentPropsWithRef<'div'>) => React.JSX.Element;
+interface DrawerProps extends Omit<React.ComponentProps<typeof Drawer$1.Root>, 'children'> {
+  trigger?: React.ReactElement;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  footer?: React.ReactNode;
+  className?: string;
+  children?: React.ReactNode;
+}
+/**
+ * A panel that slides up from the bottom and closes with a swipe down.
+ *   <Drawer trigger={<Button>Details</Button>} title="Kit details">…</Drawer>
+ * or compound: Drawer.Root / Trigger / Content / Title / Description / Body / Footer / Close.
+ */
+declare function DrawerSimple({ trigger, title, description, footer, className, children, ...root }: DrawerProps): React.JSX.Element;
+export declare const Drawer: typeof DrawerSimple & {
+  Root: typeof Drawer$1.Root;
+  Trigger: Drawer$1.Trigger;
+  Content: typeof DrawerContent;
+  Title: typeof DrawerTitle;
+  Description: typeof DrawerDescription;
+  Body: typeof DrawerBody;
+  Footer: typeof DrawerFooter;
+  Close: Drawer$1.Close;
+};
+/**
+ * A bottom panel you can swipe down to close (mobile-friendly sheet). The slide is a little slower
+ * than other overlays (1.8 × the normal duration) because it travels the whole height of the screen;
+ * it is still derived from the token, so reduced motion turns it off.
+ */
+export declare const drawerStyles: import("tailwind-variants").TVReturnType<{}, {
+  backdrop: string[];
+  viewport: string;
+  popup: string[];
+  handle: string;
+  content: string;
+  title: string;
+  description: string;
+  body: string;
+  footer: string;
+}, undefined, undefined, undefined, undefined>;
+type Side$1 = 'top' | 'right' | 'bottom' | 'left' | 'inline-start' | 'inline-end';
+interface DropdownMenuContentProps extends React.ComponentPropsWithRef<typeof Menu.Popup> {
+  side?: Side$1;
+  align?: 'start' | 'center' | 'end';
+  sideOffset?: number;
+  classNames?: {
+    positioner?: string;
+    popup?: string;
+  };
+}
+declare function DropdownMenuContent({ side, align, sideOffset, className, classNames, ...props }: DropdownMenuContentProps): React.JSX.Element;
+interface DropdownMenuItemProps extends React.ComponentPropsWithRef<typeof Menu.Item> {
+  /** Paint the item in the danger colour (delete, sign out …). */
+  danger?: boolean;
+}
+declare function DropdownMenuItem({ danger, className, ...props }: DropdownMenuItemProps): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentPropsWithRef<typeof Menu.CheckboxItem>): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentPropsWithRef<typeof Menu.RadioItem>): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentPropsWithRef<typeof Menu.Separator>): React.JSX.Element;
+declare function DropdownMenuGroupLabel({ className, ...props }: React.ComponentPropsWithRef<typeof Menu.GroupLabel>): React.JSX.Element;
+/** A keyboard hint at the end of an item, e.g. `Ctrl K`. */
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentPropsWithRef<'kbd'>): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, children, ...props }: React.ComponentPropsWithRef<typeof Menu.SubmenuTrigger>): React.JSX.Element;
+declare function DropdownMenuSubContent(props: DropdownMenuContentProps): React.JSX.Element;
+type DropdownMenuEntry = {
+  type?: 'item';
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  shortcut?: string;
+  danger?: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+} | {
+  type: 'separator';
+} | {
+  type: 'label';
+  label: React.ReactNode;
+};
+interface DropdownMenuProps extends Omit<React.ComponentProps<typeof Menu.Root>, 'children'> {
+  /** The button that opens the menu. */
+  trigger: React.ReactElement;
+  items: DropdownMenuEntry[];
+  side?: Side$1;
+  align?: 'start' | 'center' | 'end';
+  className?: string;
+}
+/**
+ * A menu opened by a button.
+ *   <DropdownMenu trigger={<Button>Options</Button>} items={[{ label: 'Rename', shortcut: 'F2' }]} />
+ * or compound: DropdownMenu.Root / Trigger / Content / Item / CheckboxItem / RadioGroup / RadioItem /
+ * Group / GroupLabel / Separator / Shortcut / Sub / SubTrigger / SubContent.
+ */
+declare function DropdownMenuSimple({ trigger, items, side, align, className, ...root }: DropdownMenuProps): React.JSX.Element;
+export declare const DropdownMenu: typeof DropdownMenuSimple & {
+  Root: typeof Menu.Root;
+  Trigger: Menu.Trigger;
+  Content: typeof DropdownMenuContent;
+  Item: typeof DropdownMenuItem;
+  CheckboxItem: typeof DropdownMenuCheckboxItem;
+  RadioGroup: React.NamedExoticComponent<Omit<import("@base-ui/react").MenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  RadioItem: typeof DropdownMenuRadioItem;
+  Group: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  GroupLabel: typeof DropdownMenuGroupLabel;
+  Separator: typeof DropdownMenuSeparator;
+  Shortcut: typeof DropdownMenuShortcut;
+  Sub: typeof Menu.SubmenuRoot;
+  SubTrigger: typeof DropdownMenuSubTrigger;
+  SubContent: typeof DropdownMenuSubContent;
+};
+/** Shared by Dropdown Menu and Context Menu. */
+export declare const menuStyles: import("tailwind-variants").TVReturnType<{}, {
+  positioner: string;
+  popup: string[];
+  item: string[];
+  danger: string;
+  indicator: string;
+  separator: string;
+  groupLabel: string;
+  shortcut: string;
+  subChevron: string;
+}, undefined, undefined, undefined, undefined>;
+interface ContextMenuContentProps extends React.ComponentPropsWithRef<typeof ContextMenu$1.Popup> {
+  classNames?: {
+    positioner?: string;
+    popup?: string;
+  };
+}
+declare function ContextMenuContent({ className, classNames, ...props }: ContextMenuContentProps): React.JSX.Element;
+declare function ContextMenuTrigger({ className, ...props }: React.ComponentPropsWithRef<typeof ContextMenu$1.Trigger>): React.JSX.Element;
+interface ContextMenuProps extends Omit<React.ComponentProps<typeof ContextMenu$1.Root>, 'children'> {
+  items: DropdownMenuEntry[];
+  /** The area that opens the menu on right click (or long press). */
+  children: React.ReactNode;
+  className?: string;
+}
+/**
+ * A menu on right click.
+ *   <ContextMenu items={[{ label: 'Copy', shortcut: 'Ctrl C' }]}><div>…</div></ContextMenu>
+ * Compound parts share Dropdown Menu's items: ContextMenu.Item, .Separator, .Shortcut …
+ */
+declare function ContextMenuSimple({ items, children, className, ...root }: ContextMenuProps): React.JSX.Element;
+export declare const ContextMenu: typeof ContextMenuSimple & {
+  Root: typeof ContextMenu$1.Root;
+  Trigger: typeof ContextMenuTrigger;
+  Content: typeof ContextMenuContent;
+  Item: ({ danger, className, ...props }: DropdownMenuItemProps) => React.JSX.Element;
+  CheckboxItem: ({ className, children, ...props }: React.ComponentPropsWithRef<typeof ContextMenu$1.CheckboxItem>) => React.JSX.Element;
+  RadioGroup: React.NamedExoticComponent<Omit<import("@base-ui/react").MenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  RadioItem: ({ className, children, ...props }: React.ComponentPropsWithRef<typeof ContextMenu$1.RadioItem>) => React.JSX.Element;
+  Group: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  GroupLabel: ({ className, ...props }: React.ComponentPropsWithRef<typeof ContextMenu$1.GroupLabel>) => React.JSX.Element;
+  Separator: ({ className, ...props }: React.ComponentPropsWithRef<typeof ContextMenu$1.Separator>) => React.JSX.Element;
+  Shortcut: ({ className, ...props }: React.ComponentPropsWithRef<'kbd'>) => React.JSX.Element;
+};
+/** Context Menu reuses the menu look; only the trigger area is its own. */
+export declare const contextMenuStyles: import("tailwind-variants").TVReturnType<{}, {
+  area: string;
+}, undefined, {}, {
+  positioner: string;
+  popup: string[];
+  item: string[];
+  danger: string;
+  indicator: string;
+  separator: string;
+  groupLabel: string;
+  shortcut: string;
+  subChevron: string;
+}, import("tailwind-variants").TVReturnType<{}, {
+  positioner: string;
+  popup: string[];
+  item: string[];
+  danger: string;
+  indicator: string;
+  separator: string;
+  groupLabel: string;
+  shortcut: string;
+  subChevron: string;
+}, undefined, undefined, undefined, undefined>>;
+interface HoverCardContentProps extends React.ComponentPropsWithRef<typeof PreviewCard.Popup> {
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  align?: 'start' | 'center' | 'end';
+  sideOffset?: number;
+  classNames?: {
+    positioner?: string;
+    popup?: string;
+  };
+}
+declare function HoverCardContent({ side, align, sideOffset, className, classNames, ...props }: HoverCardContentProps): React.JSX.Element;
+interface HoverCardProps extends Omit<React.ComponentProps<typeof PreviewCard.Root>, 'children'> {
+  /** Usually a link (`<a href>`); the card opens while it's hovered or focused. */
+  trigger: React.ReactElement;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  align?: 'start' | 'center' | 'end';
+  /** Milliseconds before it opens. @default 500 */
+  delay?: number;
+  /** Milliseconds before it closes once the pointer leaves. @default 300 */
+  closeDelay?: number;
+  className?: string;
+  classNames?: {
+    positioner?: string;
+    popup?: string;
+  };
+  children: React.ReactNode;
+}
+/**
+ * A preview card on hover — a user, a linked docs page, a feature.
+ *   <HoverCard trigger={<a href="/u/dawid">@dawid</a>}>…</HoverCard>
+ */
+declare function HoverCardSimple({ trigger, side, align, delay, closeDelay, className, classNames, children, ...root }: HoverCardProps): React.JSX.Element;
+export declare const HoverCard: typeof HoverCardSimple & {
+  Root: <Payload>(props: PreviewCard.Root.Props<Payload>) => React.JSX.Element;
+  Trigger: PreviewCard.Trigger;
+  Content: typeof HoverCardContent;
+};
+export declare const hoverCardStyles: import("tailwind-variants").TVReturnType<{}, {
+  positioner: string;
+  popup: string[];
+}, undefined, undefined, undefined, undefined>;
+/** The app-wide toast queue; `toast()` adds to it, `<Toaster />` shows it. */
+export declare const toastManager: import("@base-ui/react").ToastManager<any>;
+type AddOptions = Parameters<typeof toastManager.add>[0];
+type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading';
+type ToastOptions = Omit<AddOptions, 'title' | 'type'> & {
+  type?: ToastType;
+};
+declare function show(title: React.ReactNode, options?: ToastOptions): string;
+/**
+ * Show a toast from anywhere:
+ *   toast('Saved');  toast.success('Kit created', { description: '12 items' });
+ *   const id = toast.loading('Copying build…');  toast.update(id, { title: 'Copied', type: 'success' });
+ *   toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: 'Failed' });
+ */
+export declare const toast: typeof show & {
+  success: (title: React.ReactNode, options?: ToastOptions) => string;
+  error: (title: React.ReactNode, options?: ToastOptions) => string;
+  warning: (title: React.ReactNode, options?: ToastOptions) => string;
+  info: (title: React.ReactNode, options?: ToastOptions) => string;
+  /** Stays until updated or closed (no timeout). */
+  loading: (title: React.ReactNode, options?: ToastOptions) => string;
+  promise: <Value, T extends any = any>(promiseValue: Promise<Value>, options: import("@base-ui/react").ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
+  update: <T extends any = any>(id: string, updates: import("@base-ui/react").ToastManagerUpdateOptions<T> | ((prevToast: import("@base-ui/react").ToastObject<T>) => import("@base-ui/react").ToastManagerUpdateOptions<T>)) => void;
+  close: (id?: string) => void;
+};
+interface ToasterProps {
+  /** Milliseconds a toast stays. @default 5000 */
+  timeout?: number;
+  /** Toasts shown at once. @default 3 */
+  limit?: number;
+  className?: string;
+  classNames?: {
+    viewport?: string;
+    root?: string;
+  };
+}
+/** Mount once (e.g. in the root layout). Shows the toasts added with `toast()`. */
+export declare function Toaster({ timeout, limit, className, classNames }: ToasterProps): React.JSX.Element;
+/**
+ * Stacked toasts, adapted from Base UI's toast example: the front toast is full size, the ones
+ * behind peek out and shrink; hovering expands the stack. Toasts don't use `squircle`: the stack
+ * needs the `::after` hover bridge, which the squircle polyfill would take over in Firefox.
+ */
+export declare const toastStyles: import("tailwind-variants").TVReturnType<{}, {
+  viewport: string;
+  root: string[];
+  content: string[];
+  icon: string;
+  text: string;
+  title: string;
+  description: string;
+  action: string;
+  close: string;
+}, undefined, undefined, undefined, undefined>;
+interface TabsRootProps extends React.ComponentPropsWithRef<typeof Tabs$1.Root> {
+  /** `pill`: a soft fill glides behind the active tab. `line`: an underline glides under it. @default 'pill' */
+  variant?: 'pill' | 'line';
+  /** @default 'md' */
+  size?: 'sm' | 'md';
+  /** Mark the active tab with the soft accent; `false` uses a neutral fill. @default true */
+  accent?: boolean;
+}
+declare function TabsRoot({ className, variant, size, accent, ...props }: TabsRootProps): React.JSX.Element;
+interface TabsListProps extends React.ComponentPropsWithRef<typeof Tabs$1.List> {
+  classNames?: {
+    list?: string;
+    indicator?: string;
+    hover?: string;
+  };
+}
+/**
+ * The tab row. Two blocks glide in it: the active fill (or underline) follows the selected tab, and
+ * one neutral hover block follows the mouse or keyboard focus. The hover block hides on the active tab
+ * and never starts its slide from it (same behaviour as the sidebar).
+ */
+declare function TabsList({ className, classNames, children, ref, ...props }: TabsListProps): React.JSX.Element;
+declare function TabsTab({ className, ...props }: React.ComponentPropsWithRef<typeof Tabs$1.Tab>): React.JSX.Element;
+/** The content of one tab. The new panel fades and rises in when the tab changes. */
+declare function TabsPanel({ className, ...props }: React.ComponentPropsWithRef<typeof Tabs$1.Panel>): React.JSX.Element;
+interface TabItem {
+  value: string;
+  label: React.ReactNode;
+  content: React.ReactNode;
+  disabled?: boolean;
+}
+interface TabsProps extends Omit<TabsRootProps, 'children'> {
+  items: TabItem[];
+  classNames?: {
+    list?: string;
+    tab?: string;
+    indicator?: string;
+    hover?: string;
+    panel?: string;
+  };
+}
+/** One-line form: `<Tabs items={[{ value, label, content }]} />`. */
+declare function TabsSimple({ items, classNames, defaultValue, ...props }: TabsProps): React.JSX.Element;
+export declare const Tabs: typeof TabsSimple & {
+  Root: typeof TabsRoot;
+  List: typeof TabsList;
+  Tab: typeof TabsTab;
+  Panel: typeof TabsPanel;
+};
+/**
+ * Tabs look like our Toggle: quiet ghost buttons, and the active one sits on a soft squircle fill
+ * that glides between tabs. Hover is one neutral block that glides on its own (glide.ts) and never
+ * sits on the active tab. The `line` variant keeps the same hover block and underlines the active tab.
+ */
+export declare const tabsStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    /** A soft fill glides behind the active tab (like a pressed Toggle). */
+    pill: {
+      list: string;
+      indicator: string;
+    };
+    /** An underline glides under the active tab (page sections, install steps). */
+    line: {
+      list: string;
+      indicator: string[];
+    };
+  };
+  size: {
+    sm: {
+      tab: string;
+    };
+    md: {
+      tab: string;
+    };
+  };
+  /** Active tab in the soft accent (default) or in a neutral fill. */
+  accent: {
+    true: {
+      tab: string;
+    };
+    false: {
+      tab: string;
+    };
+  };
+}, {
+  root: string;
+  list: string;
+  tab: string[];
+  hover: string;
+  indicator: string[];
+  panel: string[];
+}, undefined, undefined, undefined, undefined>;
+type Variant = 'card' | 'separated' | 'plain';
+interface AccordionRootProps extends React.ComponentPropsWithRef<typeof Accordion$1.Root> {
+  /** `card`: one framed card. `separated`: a card per item. `plain`: no frame. @default 'card' */
+  variant?: Variant;
+}
+declare function AccordionRoot({ className, variant, ...props }: AccordionRootProps): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentPropsWithRef<typeof Accordion$1.Item>): React.JSX.Element;
+interface AccordionTriggerProps extends React.ComponentPropsWithRef<typeof Accordion$1.Trigger> {
+  classNames?: {
+    header?: string;
+    chevron?: string;
+  };
+}
+/** The clickable row; includes the heading wrapper and the chevron. */
+declare function AccordionTrigger({ className, classNames, children, ...props }: AccordionTriggerProps): React.JSX.Element;
+interface AccordionPanelProps extends React.ComponentPropsWithRef<typeof Accordion$1.Panel> {
+  classNames?: {
+    content?: string;
+  };
+}
+declare function AccordionPanel({ className, classNames, children, ...props }: AccordionPanelProps): React.JSX.Element;
+interface AccordionItemData {
+  value: string;
+  title: React.ReactNode;
+  content: React.ReactNode;
+  disabled?: boolean;
+}
+interface AccordionProps extends Omit<AccordionRootProps, 'children'> {
+  items: AccordionItemData[];
+}
+/** One-line form: `<Accordion items={[{ value, title, content }]} />`. */
+declare function AccordionSimple({ items, ...props }: AccordionProps): React.JSX.Element;
+export declare const Accordion: typeof AccordionSimple & {
+  Root: typeof AccordionRoot;
+  Item: typeof AccordionItem;
+  Trigger: typeof AccordionTrigger;
+  Panel: typeof AccordionPanel;
+};
+/**
+ * Items keep a little space around the trigger, so the hover fill is an inset squircle with
+ * padding of its own instead of a band that runs into the text.
+ */
+export declare const accordionStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    /** Items in one bordered card, divided by lines. */
+    card: {
+      root: string;
+      item: string;
+    };
+    /** Separate cards with a gap between them. */
+    separated: {
+      root: string;
+      item: string;
+    };
+    /** No frame: rows divided by lines, for FAQs inside a page. */
+    plain: {
+      item: string;
+    };
+  };
+}, {
+  root: string;
+  item: string;
+  header: string;
+  trigger: string[];
+  chevron: string;
+  panel: string[];
+  content: string;
+}, undefined, undefined, undefined, undefined>;
+declare function CollapsibleRoot({ className, ...props }: React.ComponentPropsWithRef<typeof Collapsible$1.Root>): React.JSX.Element;
+interface CollapsibleTriggerProps extends React.ComponentPropsWithRef<typeof Collapsible$1.Trigger> {
+  /** Show the rotating chevron before the label. @default true */
+  chevron?: boolean;
+}
+declare function CollapsibleTrigger({ className, chevron, children, ...props }: CollapsibleTriggerProps): React.JSX.Element;
+declare function CollapsiblePanel({ className, ...props }: React.ComponentPropsWithRef<typeof Collapsible$1.Panel>): React.JSX.Element;
+interface CollapsibleProps extends Omit<React.ComponentPropsWithRef<typeof Collapsible$1.Root>, 'title'> {
+  title: React.ReactNode;
+  classNames?: {
+    trigger?: string;
+    panel?: string;
+  };
+}
+/** One-line form: `<Collapsible title="Advanced">…</Collapsible>`. */
+declare function CollapsibleSimple({ title, classNames, children, ...props }: CollapsibleProps): React.JSX.Element;
+export declare const Collapsible: typeof CollapsibleSimple & {
+  Root: typeof CollapsibleRoot;
+  Trigger: typeof CollapsibleTrigger;
+  Panel: typeof CollapsiblePanel;
+};
+export declare const collapsibleStyles: import("tailwind-variants").TVReturnType<{}, {
+  root: string;
+  trigger: string[];
+  chevron: string;
+  panel: string[];
+}, undefined, undefined, undefined, undefined>;
+/** Avatars stay circular (like the switch): a face reads best in a circle. */
+export declare const avatarStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+      fallback: string;
+    };
+    md: {
+      root: string;
+      fallback: string;
+    };
+    lg: {
+      root: string;
+      fallback: string;
+    };
+  };
+}, {
+  root: string;
+  image: string;
+  fallback: string;
+}, undefined, undefined, undefined, undefined>;
+type Size$2 = VariantProps<typeof avatarStyles>['size'];
+interface AvatarRootProps extends React.ComponentPropsWithRef<typeof Avatar$1.Root> {
+  size?: Size$2;
+}
+declare function AvatarRoot({ className, size, ...props }: AvatarRootProps): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentPropsWithRef<typeof Avatar$1.Image>): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentPropsWithRef<typeof Avatar$1.Fallback>): React.JSX.Element;
+/** "Dawid Seipold" → "DS". */
+export declare function initials(name: string): string;
+interface AvatarProps extends Omit<AvatarRootProps, 'children'> {
+  src?: string;
+  /** Used for the alt text and the initials fallback. */
+  name: string;
+  classNames?: {
+    image?: string;
+    fallback?: string;
+  };
+}
+/** One-line form: `<Avatar src={url} name="Dawid Seipold" />`. Falls back to initials. */
+declare function AvatarSimple({ src, name, classNames, ...props }: AvatarProps): React.JSX.Element;
+export declare const Avatar: typeof AvatarSimple & {
+  Root: typeof AvatarRoot;
+  Image: typeof AvatarImage;
+  Fallback: typeof AvatarFallback;
+};
+export declare const alertStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    info: {
+      root: string;
+      icon: string;
+    };
+    success: {
+      root: string;
+      icon: string;
+    };
+    warning: {
+      root: string;
+      icon: string;
+    };
+    danger: {
+      root: string;
+      icon: string;
+    };
+    neutral: {
+      root: string;
+      icon: string;
+    };
+  };
+}, {
+  root: string;
+  icon: string;
+  body: string;
+  title: string;
+  description: string;
+}, undefined, undefined, undefined, undefined>;
+interface AlertProps extends Omit<React.ComponentPropsWithRef<'div'>, 'title'>, VariantProps<typeof alertStyles> {
+  title?: React.ReactNode;
+  /** Replace the variant's icon; `false` hides it. */
+  icon?: React.ReactNode | false;
+  classNames?: {
+    icon?: string;
+    body?: string;
+    title?: string;
+    description?: string;
+  };
+}
+/**
+ * A callout. `danger` and `warning` use role="alert", the others role="status".
+ * Compound parts: `Alert.Title`, `Alert.Description` (put them in `children` instead of `title`).
+ */
+declare function AlertRoot({ className, classNames, variant, title, icon, children, ...props }: AlertProps): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentPropsWithRef<'div'>): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentPropsWithRef<'div'>): React.JSX.Element;
+export declare const Alert: typeof AlertRoot & {
+  Title: typeof AlertTitle;
+  Description: typeof AlertDescription;
+};
+interface SeparatorProps extends React.ComponentPropsWithRef<typeof Separator$1> {
+  /** Text in the middle of a horizontal line ("or", a date…). */
+  label?: React.ReactNode;
+  classNames?: {
+    line?: string;
+  };
+}
+/** A thin line between content, optionally with a label in the middle. */
+export declare function Separator({ className, classNames, orientation, label, ...props }: SeparatorProps): React.JSX.Element;
+export declare const separatorStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    horizontal: {
+      root: string;
+    };
+    vertical: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  labelled: string;
+  line: string;
+}, undefined, undefined, undefined, undefined>;
+export declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
+  shape: {
+    line: string;
+    block: string;
+    card: string;
+    circle: string;
+  };
+}, undefined, "squircle block bg-surface-2 bg-no-repeat", undefined, undefined, undefined>;
+interface SkeletonProps extends Omit<React.ComponentPropsWithRef<'span'>, 'onAnimationStart' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationEnd'>, VariantProps<typeof skeletonStyles> {
+  /** Lines of text to fake; the last one is shorter. */
+  lines?: number;
+}
+/** A placeholder while content loads. A soft shimmer runs across it unless motion is reduced. */
+export declare function Skeleton({ lines, className, ...props }: SkeletonProps): React.JSX.Element;
+export declare const spinnerStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+  };
+  tone: {
+    accent: {
+      root: string;
+    };
+    muted: {
+      root: string;
+    };
+    current: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  track: string;
+  arc: string;
+}, undefined, undefined, undefined, undefined>;
+interface SpinnerProps extends React.ComponentPropsWithRef<'svg'>, VariantProps<typeof spinnerStyles> {
+  /** Read by screen readers. @default 'Loading' */
+  label?: string;
+}
+/** An indeterminate loading indicator. Slows down (but keeps turning) with reduced motion. */
+export declare function Spinner({ className, size, tone, label, ...props }: SpinnerProps): React.JSX.Element;
+export declare const progressStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      track: string;
+    };
+    md: {
+      track: string;
+    };
+    lg: {
+      track: string;
+    };
+  };
+}, {
+  root: string;
+  header: string;
+  label: string;
+  value: string;
+  track: string;
+  indicator: string[];
+}, undefined, undefined, undefined, undefined>;
+type Size$1 = VariantProps<typeof progressStyles>['size'];
+declare function ProgressRoot({ className, ...props }: React.ComponentPropsWithRef<typeof Progress$1.Root>): React.JSX.Element;
+declare function ProgressLabel({ className, ...props }: React.ComponentPropsWithRef<typeof Progress$1.Label>): React.JSX.Element;
+declare function ProgressValue({ className, ...props }: React.ComponentPropsWithRef<typeof Progress$1.Value>): React.JSX.Element;
+interface ProgressTrackProps extends React.ComponentPropsWithRef<typeof Progress$1.Track> {
+  size?: Size$1;
+  classNames?: {
+    indicator?: string;
+  };
+}
+/** The bar; includes its indicator. */
+declare function ProgressTrack({ className, classNames, size, ...props }: ProgressTrackProps): React.JSX.Element;
+interface ProgressProps extends Omit<React.ComponentPropsWithRef<typeof Progress$1.Root>, 'children'> {
+  label?: React.ReactNode;
+  /** Show the percentage next to the label. @default true when there is a label */
+  showValue?: boolean;
+  size?: Size$1;
+  classNames?: {
+    header?: string;
+    label?: string;
+    value?: string;
+    track?: string;
+    indicator?: string;
+  };
+}
+/** One-line form: `<Progress value={42} label="Downloading" />`. `value={null}` is indeterminate. */
+declare function ProgressSimple({ label, showValue, size, classNames, ...props }: ProgressProps): React.JSX.Element;
+export declare const Progress: typeof ProgressSimple & {
+  Root: typeof ProgressRoot;
+  Label: typeof ProgressLabel;
+  Value: typeof ProgressValue;
+  Track: typeof ProgressTrack;
+};
+declare function BreadcrumbRoot({ className, ...props }: React.ComponentPropsWithRef<'nav'>): React.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentPropsWithRef<'ol'>): React.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentPropsWithRef<'li'>): React.JSX.Element;
+type BreadcrumbLinkProps = useRender.ComponentProps<'a'>;
+/** A link in the trail. Pass `render={<Link to="…" />}` to use a router link. */
+declare function BreadcrumbLink({ className, render, ...props }: BreadcrumbLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentPropsWithRef<'span'>): React.JSX.Element;
+declare function BreadcrumbSeparator({ className, children, ...props }: React.ComponentPropsWithRef<'li'>): React.JSX.Element;
+interface BreadcrumbItemData {
+  label: React.ReactNode;
+  href?: string;
+}
+interface BreadcrumbProps extends React.ComponentPropsWithRef<'nav'> {
+  /** The last item is the current page. */
+  items: BreadcrumbItemData[];
+  /** Turns an item into a router link: `(item) => <Link to={item.href} />`. */
+  renderLink?: (item: BreadcrumbItemData) => React.ReactElement;
+}
+/** One-line form: `<Breadcrumb items={[{ label: 'Docs', href: '/docs' }, { label: 'Button' }]} />`. */
+declare function BreadcrumbSimple({ items, renderLink, ...props }: BreadcrumbProps): React.JSX.Element;
+export declare const Breadcrumb: typeof BreadcrumbSimple & {
+  Root: typeof BreadcrumbRoot;
+  List: typeof BreadcrumbList;
+  Item: typeof BreadcrumbItem;
+  Link: typeof BreadcrumbLink;
+  Page: typeof BreadcrumbPage;
+  Separator: typeof BreadcrumbSeparator;
+};
+export declare const breadcrumbStyles: import("tailwind-variants").TVReturnType<{}, {
+  root: string;
+  list: string;
+  item: string;
+  link: string[];
+  page: string;
+  separator: string;
+}, undefined, undefined, undefined, undefined>;
+type Slot = number | 'ellipsis';
+/**
+ * The pages to show: first, last, the current one with `siblings` on each side, and 'ellipsis'
+ * for the gaps. The number of slots stays the same on every page (so the bar never jumps):
+ * `paginationRange(1, 20)` → [1, 2, 3, 4, 5, 'ellipsis', 20],
+ * `paginationRange(10, 20)` → [1, 'ellipsis', 9, 10, 11, 'ellipsis', 20].
+ */
+export declare function paginationRange(page: number, total: number, siblings?: number): Slot[];
+interface PaginationProps extends Omit<React.ComponentPropsWithRef<'nav'>, 'onChange'> {
+  /** The current page, from 1. */
+  page: number;
+  /** The number of pages. */
+  total: number;
+  onPageChange: (page: number) => void;
+  /** Pages on each side of the current one. @default 1 */
+  siblings?: number;
+  /** Show the words "Previous" and "Next" next to the arrows (from the `sm` breakpoint). @default true */
+  labels?: boolean;
+  classNames?: {
+    list?: string;
+    page?: string;
+    current?: string;
+    hover?: string;
+    ellipsis?: string;
+    nav?: string;
+  };
+}
+/**
+ * Moves between pages of results. The current page sits on a soft accent thumb that slides between
+ * slots with a spring; when the window of pages moves, the numbers roll through their slots like an
+ * odometer, in a small wave from the current page outwards. Hover is one neutral block that glides
+ * between buttons (never over the current one). With reduced motion everything changes at once.
+ */
+export declare function Pagination({ page, total, onPageChange, siblings, labels, className, classNames, ...props }: PaginationProps): React.JSX.Element;
+/**
+ * The bar holds three layers: the neutral hover block (glide.ts), the accent thumb under the current
+ * page, and the buttons on top. Buttons have no fill of their own, so nothing flashes on hover.
+ */
+export declare const paginationStyles: import("tailwind-variants").TVReturnType<{}, {
+  root: string;
+  area: string;
+  list: string;
+  page: string[];
+  hover: string;
+  current: string;
+  thumbFill: string[];
+  clip: string;
+  number: string;
+  ellipsis: string;
+  nav: string;
+}, undefined, undefined, undefined, undefined>;
+type Div = React.ComponentPropsWithRef<'div'>;
+declare const EmptyRoot: ({ className, ...p }: Div) => React.JSX.Element;
+declare const EmptyIcon: ({ className, ...p }: Div) => React.JSX.Element;
+declare const EmptyTitle: ({ className, ...p }: React.ComponentPropsWithRef<'h3'>) => React.JSX.Element;
+declare const EmptyDescription: ({ className, ...p }: React.ComponentPropsWithRef<'p'>) => React.JSX.Element;
+declare const EmptyActions: ({ className, ...p }: Div) => React.JSX.Element;
+interface EmptyProps extends Omit<Div, 'title'> {
+  icon?: React.ReactNode;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  /** Buttons under the text. */
+  action?: React.ReactNode;
+  classNames?: {
+    icon?: string;
+    title?: string;
+    description?: string;
+    actions?: string;
+  };
+}
+/** An empty state: icon tile, title, a line of text and an action. */
+declare function EmptySimple({ icon, title, description, action, classNames, children, ...props }: EmptyProps): React.JSX.Element;
+export declare const Empty: typeof EmptySimple & {
+  Root: typeof EmptyRoot;
+  Icon: typeof EmptyIcon;
+  Title: typeof EmptyTitle;
+  Description: typeof EmptyDescription;
+  Actions: typeof EmptyActions;
+};
+export declare const emptyStyles: import("tailwind-variants").TVReturnType<{}, {
+  root: string;
+  icon: string;
+  title: string;
+  description: string;
+  actions: string;
+}, undefined, undefined, undefined, undefined>;
+export declare const scrollAreaStyles: import("tailwind-variants").TVReturnType<{
+  /** Fade the content at the top and bottom edges (like the docs sidebar). */
+  fade: {
+    true: {
+      viewport: string;
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  viewport: string;
+  scrollbar: string[];
+  thumb: string;
+  corner: string;
+}, undefined, undefined, undefined, undefined>;
+declare function Root({ className, ...p }: React.ComponentPropsWithRef<typeof ScrollArea$1.Root>): React.JSX.Element;
+declare function Viewport({ className, ...p }: React.ComponentPropsWithRef<typeof ScrollArea$1.Viewport>): React.JSX.Element;
+/** A thin scrollbar that shows on hover and while scrolling; includes its thumb. */
+declare function Scrollbar({ className, ...p }: React.ComponentPropsWithRef<typeof ScrollArea$1.Scrollbar>): React.JSX.Element;
+interface ScrollAreaProps extends React.ComponentPropsWithRef<typeof ScrollArea$1.Root>, VariantProps<typeof scrollAreaStyles> {
+  /** Which scrollbars to render. @default 'vertical' */
+  orientation?: 'vertical' | 'horizontal' | 'both';
+  classNames?: {
+    viewport?: string;
+    scrollbar?: string;
+  };
+}
+/** One-line form: `<ScrollArea className="h-64">…</ScrollArea>`. */
+declare function ScrollAreaSimple({ orientation, fade, classNames, children, ...props }: ScrollAreaProps): React.JSX.Element;
+export declare const ScrollArea: typeof ScrollAreaSimple & {
+  Root: typeof Root;
+  Viewport: typeof Viewport;
+  Content: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Scrollbar: typeof Scrollbar;
+  Corner: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaCornerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export declare const tableStyles: import("tailwind-variants").TVReturnType<{
+  /** Highlight rows on hover (lists you can click into). */
+  hover: {
+    true: {
+      row: string;
+    };
+    false: {};
+  };
+  /** Tighter rows. */
+  dense: {
+    true: {
+      head: string;
+      cell: string;
+    };
+    false: {};
+  };
+  /**
+   * `fixed`: column widths come from the first row / `<col>` widths, not from the content, so they
+   * never jump when the rows change. `auto`: the browser sizes columns to their content.
+   */
+  layout: {
+    auto: {
+      table: string;
+    };
+    fixed: {
+      table: string;
+      cell: string;
+    };
+  };
+}, {
+  wrapper: string;
+  table: string;
+  caption: string;
+  header: string;
+  body: string;
+  footer: string;
+  row: string;
+  head: string;
+  cell: string;
+}, undefined, undefined, undefined, undefined>;
+type Options$2 = VariantProps<typeof tableStyles>;
+interface TableRootProps extends React.ComponentPropsWithRef<'table'>, Options$2 {
+  classNames?: {
+    wrapper?: string;
+  };
+}
+/** The table in a rounded, horizontally scrolling frame (like the docs tables of crazy-hub). */
+declare function TableRoot({ className, classNames, hover, dense, layout, ...props }: TableRootProps): React.JSX.Element;
+declare const TableHeader: ({ className, ...p }: React.ComponentPropsWithRef<'thead'>) => React.JSX.Element;
+declare const TableBody: ({ className, ...p }: React.ComponentPropsWithRef<'tbody'>) => React.JSX.Element;
+declare const TableFooter: ({ className, ...p }: React.ComponentPropsWithRef<'tfoot'>) => React.JSX.Element;
+declare const TableRow: ({ className, ...p }: React.ComponentPropsWithRef<'tr'>) => React.JSX.Element;
+declare const TableHead: ({ className, ...p }: React.ComponentPropsWithRef<'th'>) => React.JSX.Element;
+declare const TableCell: ({ className, ...p }: React.ComponentPropsWithRef<'td'>) => React.JSX.Element;
+declare const TableCaption: ({ className, ...p }: React.ComponentPropsWithRef<'caption'>) => React.JSX.Element;
+interface TableColumn<Row> {
+  key: string;
+  header: React.ReactNode;
+  cell?: (row: Row) => React.ReactNode;
+  className?: string;
+  /**
+   * A fixed width (px number or CSS length). When any column has one the table switches to a fixed
+   * layout, so widths don't follow the content; columns without a width share the rest.
+   */
+  width?: number | string;
+}
+interface TableProps<Row> extends Omit<TableRootProps, 'children'> {
+  columns: TableColumn<Row>[];
+  rows: Row[];
+  /** Stable key per row. @default index */
+  rowKey?: (row: Row, index: number) => React.Key;
+  caption?: React.ReactNode;
+}
+/** One-line form for simple data: `<Table columns={…} rows={…} />`. For sorting/filtering see Data Table. */
+declare function TableSimple<Row extends Record<string, unknown>>({ columns, rows, rowKey, caption, layout, ...props }: TableProps<Row>): React.JSX.Element;
+export declare const Table: typeof TableSimple & {
+  Root: typeof TableRoot;
+  Header: typeof TableHeader;
+  Body: typeof TableBody;
+  Footer: typeof TableFooter;
+  Row: typeof TableRow;
+  Head: typeof TableHead;
+  Cell: typeof TableCell;
+  Caption: typeof TableCaption;
+};
+export declare const aspectRatioStyles: import("tailwind-variants").TVReturnType<{
+  rounded: {
+    true: string;
+    false: string;
+  };
+}, undefined, "relative w-full overflow-hidden [&>img]:absolute [&>img]:inset-0 [&>img]:size-full [&>img]:object-cover [&>video]:absolute [&>video]:inset-0 [&>video]:size-full [&>video]:object-cover", undefined, undefined, undefined>;
+interface AspectRatioProps extends React.ComponentPropsWithRef<'div'>, VariantProps<typeof aspectRatioStyles> {
+  /** Width / height, e.g. `16 / 9`. @default 1 */
+  ratio?: number;
+}
+/** Keeps its content (image, video, map) at a fixed ratio; media inside fills it. */
+export declare function AspectRatio({ ratio, rounded, className, style, ...props }: AspectRatioProps): React.JSX.Element;
+/**
+ * Days are 2.5rem buttons inside 2.75rem cells (2 / 2.25rem on phones), so there is air around every day. A range is one soft
+ * band per week row (a single element, so no seams between cells) with rounded ends; the picked ends are
+ * solid accent days inside it, their radius concentric with the band's (band = day radius + 2px inset).
+ */
+export declare const calendarStyles: import("tailwind-variants").TVReturnType<{}, {
+  root: string;
+  nav: string;
+  navButton: string;
+  viewport: string;
+  months: string;
+  month: string;
+  caption: string;
+  captionMonth: string;
+  captionYear: string;
+  grid: string;
+  weekdays: string;
+  weekday: string;
+  week: string;
+  cell: string;
+  band: string[];
+  day: string[];
+}, undefined, undefined, undefined, undefined>;
+interface DateRange {
+  from: Date;
+  to?: Date | null;
+}
+type Slots$1 = keyof ReturnType<typeof calendarStyles>;
+interface CalendarBaseProps {
+  /** The first month shown (controlled). */
+  month?: Date;
+  /** The first month shown at start. Defaults to the selected date or today. */
+  defaultMonth?: Date;
+  onMonthChange?: (month: Date) => void;
+  /** The earliest day that can be picked. */
+  min?: Date;
+  /** The latest day that can be picked. */
+  max?: Date;
+  /** Days that can't be picked: a list, or a function that returns `true` for a disabled day. */
+  disabledDates?: Date[] | ((date: Date) => boolean);
+  /** Disable the whole calendar. */
+  disabled?: boolean;
+  /** BCP 47 locale for month and weekday names. @default 'en' */
+  locale?: string;
+  /** 0 = Sunday … 6 = Saturday. @default 1 */
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  /** How many months to show side by side. @default 1 */
+  numberOfMonths?: number;
+  /** Show the days of the neighbouring months. @default true */
+  showOutsideDays?: boolean;
+  /** Move focus into the grid on mount (used by Date Picker). */
+  autoFocus?: boolean;
+  'aria-label'?: string;
+  className?: string;
+  classNames?: Partial<Record<Slots$1, string>>;
+}
+interface CalendarSingleProps extends CalendarBaseProps {
+  mode?: 'single';
+  value?: Date | null;
+  defaultValue?: Date | null;
+  onValueChange?: (value: Date | null) => void;
+}
+interface CalendarRangeProps extends CalendarBaseProps {
+  mode: 'range';
+  value?: DateRange | null;
+  defaultValue?: DateRange | null;
+  onValueChange?: (value: DateRange | null) => void;
+}
+type CalendarProps = CalendarSingleProps | CalendarRangeProps;
+/**
+ * A month grid for picking a day or a range of days.
+ *   <Calendar value={date} onValueChange={setDate} />
+ *   <Calendar mode="range" numberOfMonths={2} value={range} onValueChange={setRange} />
+ * Names come from `Intl`; arrow keys, Home/End and Page Up/Down move the focus.
+ */
+export declare function Calendar(props: CalendarProps): React.JSX.Element;
+export declare const datePickerStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      trigger: string;
+    };
+    md: {
+      trigger: string;
+    };
+    lg: {
+      trigger: string;
+    };
+  };
+}, {
+  trigger: string[];
+  value: string;
+  placeholder: string;
+  icon: string;
+  popup: string;
+  calendar: string;
+}, undefined, undefined, undefined, undefined>;
+type Slots = keyof ReturnType<typeof datePickerStyles>;
+type CalendarPassThrough = Pick<CalendarProps, 'min' | 'max' | 'disabledDates' | 'locale' | 'weekStartsOn' | 'numberOfMonths' | 'showOutsideDays'>;
+interface DatePickerBaseProps extends CalendarPassThrough, VariantProps<typeof datePickerStyles> {
+  /** Text shown while nothing is picked. */
+  placeholder?: React.ReactNode;
+  /** Options for `Intl.DateTimeFormat` used to show the value in the trigger. @default { dateStyle: 'medium' } */
+  formatOptions?: Intl.DateTimeFormatOptions;
+  /** Disable the trigger. */
+  disabled?: boolean;
+  /** Submit the value with a form, as `YYYY-MM-DD` (range: `name` + `[from]` / `[to]`). */
+  name?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  side?: 'top' | 'bottom' | 'left' | 'right';
+  align?: 'start' | 'center' | 'end';
+  id?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  className?: string;
+  classNames?: Partial<Record<Slots, string>>;
+}
+interface DatePickerSingleProps extends DatePickerBaseProps {
+  mode?: 'single';
+  value?: Date | null;
+  defaultValue?: Date | null;
+  onValueChange?: (value: Date | null) => void;
+}
+interface DatePickerRangeProps extends DatePickerBaseProps {
+  mode: 'range';
+  value?: DateRange | null;
+  defaultValue?: DateRange | null;
+  onValueChange?: (value: DateRange | null) => void;
+}
+type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+/**
+ * A field that opens a Calendar in a popover.
+ *   <DatePicker value={date} onValueChange={setDate} placeholder="Pick a date" />
+ *   <DatePicker mode="range" numberOfMonths={2} value={range} onValueChange={setRange} />
+ */
+export declare function DatePicker(props: DatePickerProps): React.JSX.Element;
+export declare const comboboxStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      inputGroup: string;
+    };
+    md: {
+      inputGroup: string;
+    };
+    lg: {
+      inputGroup: string;
+    };
+  };
+  multiple: {
+    true: {
+      inputGroup: string;
+      input: string;
+    };
+    false: {
+      input: string;
+    };
+  };
+}, {
+  inputGroup: string[];
+  input: string;
+  actions: string;
+  action: string[];
+  chips: string;
+  chip: string[];
+  chipRemove: string[];
+  positioner: string;
+  popup: string[];
+  list: string;
+  item: string[];
+  itemIndicator: string;
+  empty: string;
+  group: string;
+  groupLabel: string;
+  separator: string;
+}, undefined, undefined, undefined, undefined>;
+type Size = VariantProps<typeof comboboxStyles>['size'];
+type Props$3<C extends React.ElementType> = Omit<React.ComponentPropsWithRef<C>, 'className'> & {
+  className?: string;
+};
+/** The field around the input, trigger, clear button and chips; the popup is anchored to it. */
+declare function ComboboxInputGroup({ className, size, multiple, ...props }: Props$3<typeof Combobox$1.InputGroup> & {
+  size?: Size;
+  multiple?: boolean;
+}): React.JSX.Element;
+declare function ComboboxInput({ className, ...props }: Props$3<typeof Combobox$1.Input>): React.JSX.Element;
+/** Holds the clear and open buttons at the end of the field. */
+declare const ComboboxActions: ({ className, ...props }: React.ComponentPropsWithRef<'div'>) => React.JSX.Element;
+declare function ComboboxTrigger({ className, children, ...props }: Props$3<typeof Combobox$1.Trigger>): React.JSX.Element;
+declare function ComboboxClear({ className, children, ...props }: Props$3<typeof Combobox$1.Clear>): React.JSX.Element;
+declare function ComboboxChips({ className, ...props }: Props$3<typeof Combobox$1.Chips>): React.JSX.Element;
+/** A picked value in multiple mode, with a remove button. Backspace/Delete removes a focused chip. */
+declare function ComboboxChip({ className, children, removeLabel, ...props }: Props$3<typeof Combobox$1.Chip> & {
+  removeLabel?: string;
+}): React.JSX.Element;
+/** The popup: portal + positioner + popup in one. Put `Combobox.Empty` and `Combobox.List` inside. */
+declare function ComboboxContent({ className, sideOffset, align, ...props }: Props$3<typeof Combobox$1.Popup> & {
+  sideOffset?: number;
+  align?: 'start' | 'center' | 'end';
+}): React.JSX.Element;
+declare function ComboboxList({ className, ...props }: Props$3<typeof Combobox$1.List>): React.JSX.Element;
+declare function ComboboxItem({ className, children, ...props }: Props$3<typeof Combobox$1.Item>): React.JSX.Element;
+declare function ComboboxEmpty({ className, ...props }: Props$3<typeof Combobox$1.Empty>): React.JSX.Element;
+declare function ComboboxGroup({ className, ...props }: Props$3<typeof Combobox$1.Group>): React.JSX.Element;
+declare function ComboboxGroupLabel({ className, ...props }: Props$3<typeof Combobox$1.GroupLabel>): React.JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: Props$3<typeof Combobox$1.Separator>): React.JSX.Element;
+interface ComboboxOption {
+  value: string;
+  label: string;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+interface ComboboxGroupData {
+  label: string;
+  items: ComboboxOption[];
+}
+interface ComboboxBaseProps {
+  /** Options as strings, `{ value, label }` objects, or groups `{ label, items }`. */
+  items: (string | ComboboxOption)[] | ComboboxGroupData[];
+  placeholder?: string;
+  /** Shown when nothing matches the typed text. @default 'No results.' */
+  emptyText?: React.ReactNode;
+  size?: Size;
+  disabled?: boolean;
+  required?: boolean;
+  /** Submit the value with a form. */
+  name?: string;
+  id?: string;
+  'aria-label'?: string;
+  className?: string;
+  classNames?: {
+    inputGroup?: string;
+    input?: string;
+    popup?: string;
+    item?: string;
+    chip?: string;
+  };
+}
+interface ComboboxSingleProps extends ComboboxBaseProps {
+  multiple?: false;
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+  /** Show a button that clears the value. @default true */
+  clearable?: boolean;
+}
+interface ComboboxMultipleProps extends ComboboxBaseProps {
+  multiple: true;
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  clearable?: boolean;
+}
+type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
+/**
+ * A select you can type into to filter.
+ *   <Combobox items={['Gothic 1', 'Gothic 2']} placeholder="Pick a game" />
+ *   <Combobox multiple items={…} />  // picked values become chips
+ * Compound: Combobox.Root / InputGroup / Input / Actions / Trigger / Clear / Chips / Chip / Value /
+ * Content / Empty / List / Item / Group / GroupLabel / Collection / Separator.
+ */
+declare function ComboboxSimple(props: ComboboxProps): React.JSX.Element;
+export declare const Combobox: typeof ComboboxSimple & {
+  Root: typeof Combobox$1.Root;
+  InputGroup: typeof ComboboxInputGroup;
+  Input: typeof ComboboxInput;
+  Actions: typeof ComboboxActions;
+  Trigger: typeof ComboboxTrigger;
+  Clear: typeof ComboboxClear;
+  Chips: typeof ComboboxChips;
+  Chip: typeof ComboboxChip;
+  Value: typeof Combobox$1.Value;
+  Content: typeof ComboboxContent;
+  Empty: typeof ComboboxEmpty;
+  List: typeof ComboboxList;
+  Item: typeof ComboboxItem;
+  Group: typeof ComboboxGroup;
+  GroupLabel: typeof ComboboxGroupLabel;
+  Collection: typeof Combobox$1.Collection;
+  Separator: typeof ComboboxSeparator;
+  useFilter: typeof Combobox$1.useFilter;
+  createItems: typeof Combobox$1.createItems;
+};
+type Props$2<C extends React.ElementType> = Omit<React.ComponentPropsWithRef<C>, 'className'> & {
+  className?: string;
+};
+type AutocompleteRootProps = React.ComponentProps<typeof Autocomplete.Root>;
+interface CommandRootProps extends Pick<AutocompleteRootProps, 'items' | 'filter' | 'filteredItems' | 'itemToStringValue' | 'limit' | 'loopFocus'> {
+  /** The typed text (controlled). */
+  search?: string;
+  defaultSearch?: string;
+  onSearchChange?: (search: string) => void;
+  className?: string;
+  children?: React.ReactNode;
+  'aria-label'?: string;
+}
+/**
+ * The palette: an always-open list filtered by the input. Arrow keys move, Enter runs the item.
+ * Pass `items` (flat or `{ label, items }` groups) and render them with `Command.List`, or render
+ * `Command.Item`s yourself and filter them by passing `filteredItems`.
+ */
+declare function CommandRoot({ search, defaultSearch, onSearchChange, className, children, itemToStringValue, 'aria-label': ariaLabel, ...props }: CommandRootProps): React.JSX.Element;
+declare function CommandInput({ className, ...props }: Props$2<typeof Autocomplete.Input>): React.JSX.Element;
+declare function CommandList({ className, ...props }: Props$2<typeof Autocomplete.List>): React.JSX.Element;
+declare function CommandEmpty({ className, ...props }: Props$2<typeof Autocomplete.Empty>): React.JSX.Element;
+declare function CommandGroup({ className, ...props }: Props$2<typeof Autocomplete.Group>): React.JSX.Element;
+declare function CommandGroupLabel({ className, ...props }: Props$2<typeof Autocomplete.GroupLabel>): React.JSX.Element;
+declare function CommandSeparator({ className, ...props }: Props$2<typeof Autocomplete.Separator>): React.JSX.Element;
+interface CommandItemProps extends Props$2<typeof Autocomplete.Item> {
+  /** Runs on click and on Enter. */
+  onSelect?: () => void;
+}
+declare function CommandItem({ className, onSelect, onClick, ...props }: CommandItemProps): React.JSX.Element;
+/** Keys at the end of an item: `<Command.Shortcut keys="Ctrl+G" />` or `keys={['Ctrl', 'G']}`. */
+declare function CommandShortcut({ keys, className, ...props }: React.ComponentPropsWithRef<'span'> & {
+  keys: string | string[];
+}): React.JSX.Element;
+/** A strip under the list for hints (`↑↓ to move`, `Enter to run`). */
+declare function CommandFooter({ className, ...props }: React.ComponentPropsWithRef<'div'>): React.JSX.Element;
+/** Shown instead of the list while results load (`role="status"`). */
+declare function CommandLoading({ className, children, ...props }: React.ComponentPropsWithRef<'div'>): React.JSX.Element;
+/** Stacks a breadcrumb line, a title and a description inside an item. */
+declare function CommandItemContent({ className, ...props }: React.ComponentPropsWithRef<'span'>): React.JSX.Element;
+interface CommandItemBreadcrumbsProps extends Omit<React.ComponentPropsWithRef<'span'>, 'children'> {
+  /** The path above the title, e.g. `['Components', 'Button']`. */
+  items: React.ReactNode[];
+}
+/** The small section / path line above an item's title. */
+declare function CommandItemBreadcrumbs({ items, className, ...props }: CommandItemBreadcrumbsProps): React.JSX.Element;
+declare function CommandItemTitle({ className, ...props }: React.ComponentPropsWithRef<'span'>): React.JSX.Element;
+declare function CommandItemDescription({ className, ...props }: React.ComponentPropsWithRef<'span'>): React.JSX.Element;
+/** Splits `text` into parts, `match: true` for every piece that matches a word of `query`. */
+export declare function highlightParts(text: string, query: string): {
+  text: string;
+  match: boolean;
+}[];
+interface CommandHighlightProps extends Omit<React.ComponentPropsWithRef<'span'>, 'children'> {
+  text: string;
+  /** The words to mark. @default the text typed into the palette */
+  query?: string;
+  classNames?: {
+    mark?: string;
+  };
+}
+/** The text with every match of the query wrapped in `<mark>`. */
+declare function CommandHighlight({ text, query, className, classNames, ...props }: CommandHighlightProps): React.JSX.Element;
+interface CommandJumpItemProps extends CommandItemProps {
+  /** The words before the target. @default 'Jump to' */
+  label?: React.ReactNode;
+}
+/** A quick action at the top of the list: `Jump to <target>`, with an Enter hint when highlighted. */
+declare function CommandJumpItem({ label, children, className, ...props }: CommandJumpItemProps): React.JSX.Element;
+interface CommandHintProps extends Omit<React.ComponentPropsWithRef<'span'>, 'children'> {
+  /** Keys, e.g. `['↑', '↓']` or `'Enter'`. */
+  keys: string | string[];
+  /** What the keys do, e.g. `'to move'`. */
+  children?: React.ReactNode;
+}
+/** A key hint for the footer: `<Command.Hint keys="Enter">to open</Command.Hint>`. */
+declare function CommandHint({ keys, children, className, ...props }: CommandHintProps): React.JSX.Element;
+interface CommandFilterOption {
+  value: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+}
+interface CommandFilterProps {
+  /** Name shown before the value, e.g. `'Section'`. */
+  label: string;
+  options: CommandFilterOption[];
+  value?: string;
+  /** The value that means "not filtered", shown plainly. @default the first option */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  className?: string;
+  classNames?: {
+    trigger?: string;
+    content?: string;
+    option?: string;
+  };
+}
+/** One filter in the footer: a small `Label: value` button opening a radio menu. */
+declare function CommandFilter({ label, options, value, defaultValue, onValueChange, className, classNames }: CommandFilterProps): React.JSX.Element;
+interface CommandFiltersProps extends React.ComponentPropsWithRef<'div'> {
+  /** Called by the "Clear filters" button. Leave out to hide the button. */
+  onClear?: () => void;
+  /** Whether any filter is set; the button is visible only then, but its place is always kept. */
+  canClear?: boolean;
+  /** @default 'Clear filters' */
+  clearLabel?: React.ReactNode;
+  classNames?: {
+    list?: string;
+    clear?: string;
+  };
+}
+/**
+ * The filter row. Filters wrap onto more lines when narrow; "Clear filters" sits in its own slot at the
+ * end that never wraps and keeps its space when hidden, so setting a filter never moves anything.
+ */
+declare function CommandFilters({ onClear, canClear, clearLabel, className, classNames, children, ...props }: CommandFiltersProps): React.JSX.Element;
+interface CommandItemData {
+  value: string;
+  label: string;
+  icon?: React.ReactNode;
+  /** Shown as Kbd keys, e.g. `'Ctrl+G'`. */
+  shortcut?: string | string[];
+  /** Extra words that match the search (e.g. `['invincible']` for God mode). */
+  keywords?: string[];
+  /** A second line under the label. */
+  description?: string;
+  /** A path line above the label, e.g. `['Player']`. */
+  breadcrumbs?: string[];
+  disabled?: boolean;
+  onSelect?: () => void;
+}
+interface CommandGroupData {
+  label: string;
+  items: CommandItemData[];
+}
+interface CommandProps extends Omit<CommandRootProps, 'items' | 'children'> {
+  /** Groups of commands. */
+  groups: CommandGroupData[];
+  placeholder?: string;
+  /** Shown when nothing matches. @default 'No results.' */
+  emptyText?: React.ReactNode;
+  /** Content under the list (key hints, `Command.Filters`). */
+  footer?: React.ReactNode;
+  /** Show `Command.Loading` instead of the list. */
+  loading?: boolean;
+  /** @default 'Searching…' */
+  loadingText?: React.ReactNode;
+  classNames?: {
+    root?: string;
+    input?: string;
+    list?: string;
+    item?: string;
+  };
+}
+/**
+ * A command palette.
+ *   <Command groups={[{ label: 'Player', items: [{ value: 'god', label: 'God mode', shortcut: 'Ctrl+G' }] }]} />
+ * In a modal: <Command.Dialog open={open} onOpenChange={setOpen} groups={…} />.
+ * Compound: Command.Root / Input / List / Empty / Loading / Group / GroupLabel / Collection / Item /
+ * ItemContent / ItemBreadcrumbs / ItemTitle / ItemDescription / Highlight / JumpItem / Shortcut /
+ * Separator / Footer / Hint / Filters / Filter.
+ */
+declare function CommandSimple({ groups, placeholder, emptyText, footer, loading, loadingText, className, classNames, filter, ...props }: CommandProps): React.JSX.Element;
+interface CommandDialogProps extends Partial<CommandProps> {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** The element that opens the palette. */
+  trigger?: React.ReactElement;
+  /** A handle from `Dialog.createHandle()`, so triggers elsewhere in the app (`<Dialog.Trigger handle>`) open it. */
+  handle?: Dialog$1.Handle<unknown>;
+  /** Accessible name of the dialog. @default 'Command palette' */
+  title?: string;
+  /** Close the dialog after an item runs. @default true */
+  closeOnSelect?: boolean;
+  /** Your own `Command.Root` content instead of `groups`. */
+  children?: React.ReactNode;
+}
+/** The palette in a modal, positioned high on the screen like Spotlight. */
+declare function CommandDialog({ open: openProp, defaultOpen, onOpenChange, trigger, handle, title, closeOnSelect, children, groups, className, ...props }: CommandDialogProps): React.JSX.Element;
+export declare const Command: typeof CommandSimple & {
+  Root: typeof CommandRoot;
+  Input: typeof CommandInput;
+  List: typeof CommandList;
+  Empty: typeof CommandEmpty;
+  Group: typeof CommandGroup;
+  GroupLabel: typeof CommandGroupLabel;
+  Collection: typeof Autocomplete.Collection;
+  Item: typeof CommandItem;
+  Shortcut: typeof CommandShortcut;
+  Separator: typeof CommandSeparator;
+  Footer: typeof CommandFooter;
+  Loading: typeof CommandLoading;
+  ItemContent: typeof CommandItemContent;
+  ItemBreadcrumbs: typeof CommandItemBreadcrumbs;
+  ItemTitle: typeof CommandItemTitle;
+  ItemDescription: typeof CommandItemDescription;
+  Highlight: typeof CommandHighlight;
+  JumpItem: typeof CommandJumpItem;
+  Hint: typeof CommandHint;
+  Filters: typeof CommandFilters;
+  Filter: typeof CommandFilter;
+  Dialog: typeof CommandDialog;
+};
+export declare const commandStyles: import("tailwind-variants").TVReturnType<{}, {
+  root: string;
+  inputWrap: string;
+  input: string;
+  list: string;
+  empty: string;
+  loading: string;
+  group: string;
+  groupLabel: string;
+  item: string[];
+  itemContent: string;
+  itemBreadcrumbs: string;
+  itemTitle: string;
+  itemDescription: string;
+  highlight: string;
+  jump: string;
+  jumpTarget: string;
+  jumpKey: string;
+  shortcut: string;
+  separator: string;
+  footer: string;
+  hint: string;
+  filters: string;
+  filterList: string;
+  filterTrigger: string[];
+  filterTriggerActive: string;
+  filterLabel: string;
+  filterValue: string;
+  filterOption: string;
+  filterOptionDescription: string;
+  clear: string[];
+  backdrop: string;
+  dialog: string[];
+}, undefined, undefined, undefined, undefined>;
+export declare const inputOtpStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      slot: string;
+    };
+    md: {
+      slot: string;
+    };
+    lg: {
+      slot: string;
+    };
+  };
+}, {
+  root: string;
+  group: string;
+  slot: string[];
+  separator: string;
+}, undefined, undefined, undefined, undefined>;
+type RootProps = React.ComponentPropsWithRef<typeof OTPField.Root>;
+interface InputOTPRootProps extends Omit<RootProps, 'className'>, VariantProps<typeof inputOtpStyles> {
+  className?: string;
+}
+declare function InputOTPRoot({ size, className, ...props }: InputOTPRootProps): React.JSX.Element;
+/** One character box. */
+declare function InputOTPSlot({ className, ...props }: Omit<React.ComponentPropsWithRef<typeof OTPField.Input>, 'className'> & {
+  className?: string;
+}): React.JSX.Element;
+/** Slots that sit closer together. */
+declare function InputOTPGroup({ className, ...props }: React.ComponentPropsWithRef<'div'>): React.JSX.Element;
+/** A dash between groups (or your own children). Announced as a separator. */
+declare function InputOTPSeparator({ className, children, ...props }: Omit<React.ComponentPropsWithRef<typeof OTPField.Separator>, 'className'> & {
+  className?: string;
+}): React.JSX.Element;
+interface InputOTPProps extends InputOTPRootProps {
+  /** Split the slots into groups with a separator between, e.g. `[3, 3]`. Must add up to `length`. */
+  groups?: number[];
+  /** What goes between groups. @default a dash */
+  separator?: React.ReactNode;
+  /** Hint shown in empty slots, one character per slot (e.g. `'•'`). */
+  slotPlaceholder?: string;
+  classNames?: {
+    root?: string;
+    group?: string;
+    slot?: string;
+    separator?: string;
+  };
+}
+/**
+ * A one-time code field made of single-character slots. Paste, arrows and Backspace work across slots.
+ *   <InputOTP length={6} groups={[3, 3]} />
+ * Compound: InputOTP.Root / Group / Slot / Separator.
+ */
+declare function InputOTPSimple({ length, groups, separator, slotPlaceholder, className, classNames, 'aria-label': ariaLabel, ...props }: InputOTPProps): React.JSX.Element;
+export declare const InputOTP: typeof InputOTPSimple & {
+  Root: typeof InputOTPRoot;
+  Group: typeof InputOTPGroup;
+  Slot: typeof InputOTPSlot;
+  Separator: typeof InputOTPSeparator;
+};
+export declare const nativeSelectStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      select: string;
+      icon: string;
+    };
+    md: {
+      select: string;
+    };
+    lg: {
+      select: string;
+      icon: string;
+    };
+  };
+}, {
+  root: string;
+  select: string[];
+  icon: string;
+}, undefined, undefined, undefined, undefined>;
+interface NativeSelectOption {
+  value: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+}
+interface NativeSelectProps extends Omit<React.ComponentPropsWithRef<'select'>, 'size'>, VariantProps<typeof nativeSelectStyles> {
+  /** Options to render; you can pass `<option>` children instead. */
+  options?: NativeSelectOption[];
+  /** A first, empty option shown while nothing is picked. */
+  placeholder?: string;
+  classNames?: {
+    root?: string;
+    select?: string;
+    icon?: string;
+  };
+}
+/**
+ * The browser's own `<select>`, styled like Input with a chevron. Best on phones and in long forms.
+ *   <NativeSelect options={[{ value: 'g1', label: 'Gothic 1' }]} />
+ * or with children: `<NativeSelect><NativeSelect.Option value="g1">Gothic 1</NativeSelect.Option></NativeSelect>`.
+ */
+declare function NativeSelectRoot({ options, placeholder, size, className, classNames, children, ...props }: NativeSelectProps): React.JSX.Element;
+declare const NativeSelectOption: (props: React.ComponentPropsWithRef<'option'>) => React.JSX.Element;
+declare const NativeSelectOptGroup: (props: React.ComponentPropsWithRef<'optgroup'>) => React.JSX.Element;
+export declare const NativeSelect: typeof NativeSelectRoot & {
+  Option: typeof NativeSelectOption;
+  OptGroup: typeof NativeSelectOptGroup;
+};
+type Props$1<C extends React.ElementType> = Omit<React.ComponentPropsWithRef<C>, 'className'> & {
+  className?: string;
+};
+declare function MenubarRoot({ className, ...props }: Props$1<typeof Menubar$1>): React.JSX.Element;
+/** A top-level button of the bar; opens its menu. */
+declare function MenubarTrigger({ className, ...props }: Props$1<typeof Menu.Trigger>): React.JSX.Element;
+interface MenubarMenuData {
+  label: React.ReactNode;
+  items: DropdownMenuEntry[];
+  disabled?: boolean;
+}
+interface MenubarProps extends Omit<Props$1<typeof Menubar$1>, 'children'> {
+  /** The menus, left to right. Items use the Dropdown Menu entry format. */
+  menus: MenubarMenuData[];
+  classNames?: {
+    root?: string;
+    trigger?: string;
+    popup?: string;
+  };
+}
+/**
+ * A row of menus, like the one at the top of a desktop app. Arrow keys move between menus.
+ *   <Menubar menus={[{ label: 'File', items: [{ label: 'Save', shortcut: 'Ctrl S' }] }]} />
+ * Compound: Menubar.Root / Menu / Trigger / Content / Item / CheckboxItem / RadioGroup / RadioItem /
+ * Group / GroupLabel / Separator / Shortcut / Sub / SubTrigger / SubContent (the Dropdown Menu parts).
+ */
+declare function MenubarSimple({ menus, className, classNames, ...props }: MenubarProps): React.JSX.Element;
+export declare const Menubar: typeof MenubarSimple & {
+  Root: typeof MenubarRoot;
+  Menu: typeof Menu.Root;
+  Trigger: typeof MenubarTrigger;
+  Content: ({ side, align, sideOffset, className, classNames, ...props }: DropdownMenuContentProps) => React.JSX.Element;
+  Item: ({ danger, className, ...props }: DropdownMenuItemProps) => React.JSX.Element;
+  CheckboxItem: ({ className, children, ...props }: React.ComponentPropsWithRef<typeof Menu.CheckboxItem>) => React.JSX.Element;
+  RadioGroup: React.NamedExoticComponent<Omit<import("@base-ui/react").MenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  RadioItem: ({ className, children, ...props }: React.ComponentPropsWithRef<typeof Menu.RadioItem>) => React.JSX.Element;
+  Group: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  GroupLabel: ({ className, ...props }: React.ComponentPropsWithRef<typeof Menu.GroupLabel>) => React.JSX.Element;
+  Separator: ({ className, ...props }: React.ComponentPropsWithRef<typeof Menu.Separator>) => React.JSX.Element;
+  Shortcut: ({ className, ...props }: React.ComponentPropsWithRef<'kbd'>) => React.JSX.Element;
+  Sub: typeof Menu.SubmenuRoot;
+  SubTrigger: ({ className, children, ...props }: React.ComponentPropsWithRef<typeof Menu.SubmenuTrigger>) => React.JSX.Element;
+  SubContent: (props: DropdownMenuContentProps) => React.JSX.Element;
+};
+export declare const menubarStyles: import("tailwind-variants").TVReturnType<{}, {
+  root: string;
+  trigger: string[];
+}, undefined, undefined, undefined, undefined>;
+type Props<C extends React.ElementType> = Omit<React.ComponentPropsWithRef<C>, 'className'> & {
+  className?: string;
+};
+declare function NavigationMenuRoot({ className, ...props }: Props<typeof NavigationMenu$1.Root>): React.JSX.Element;
+/** The row of triggers and links, with a highlight that glides to the hovered or open item. */
+declare function NavigationMenuList({ className, classNames, children, ...props }: Props<typeof NavigationMenu$1.List> & {
+  classNames?: {
+    indicator?: string;
+  };
+}): React.JSX.Element;
+declare function NavigationMenuItem(props: React.ComponentPropsWithRef<typeof NavigationMenu$1.Item>): React.JSX.Element;
+/** Opens the item's panel. A chevron is added after the label. */
+declare function NavigationMenuTrigger({ className, children, ...props }: Props<typeof NavigationMenu$1.Trigger>): React.JSX.Element;
+/** The panel of an item. It slides in from the side the pointer came from. */
+declare function NavigationMenuContent({ className, ...props }: Props<typeof NavigationMenu$1.Content>): React.JSX.Element;
+/** A link. Top-level links look like triggers; pass `render` to use your router's link. */
+declare function NavigationMenuLink({ className, ...props }: Props<typeof NavigationMenu$1.Link>): React.JSX.Element;
+interface NavigationMenuLinkCardProps extends Omit<Props<typeof NavigationMenu$1.Link>, 'title'> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+}
+/** A link inside a panel: icon, title and a line of description. */
+declare function NavigationMenuLinkCard({ title, description, icon, className, ...props }: NavigationMenuLinkCardProps): React.JSX.Element;
+/** The floating box the panels render in; it resizes smoothly between panels. */
+declare function NavigationMenuViewport({ className, classNames, sideOffset, align }: {
+  className?: string;
+  classNames?: {
+    positioner?: string;
+    popup?: string;
+    viewport?: string;
+  };
+  sideOffset?: number;
+  align?: 'start' | 'center' | 'end';
+}): React.JSX.Element;
+interface NavigationMenuLinkData {
+  title: React.ReactNode;
+  href: string;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+}
+type NavigationMenuItemData = {
+  label: React.ReactNode;
+  href: string;
+  active?: boolean;
+} | {
+  label: React.ReactNode;
+  links: NavigationMenuLinkData[];
+  columns?: 1 | 2;
+} | {
+  label: React.ReactNode;
+  content: React.ReactNode;
+};
+interface NavigationMenuProps extends Omit<Props<typeof NavigationMenu$1.Root>, 'children'> {
+  items: NavigationMenuItemData[];
+  classNames?: {
+    list?: string;
+    trigger?: string;
+    content?: string;
+    popup?: string;
+  };
+}
+/**
+ * Site navigation with panels, like the top bar of a docs site.
+ *   <NavigationMenu items={[{ label: 'Docs', links: [{ title: 'Install', href: '/docs/install' }] }, { label: 'Blog', href: '/blog' }]} />
+ * Compound: NavigationMenu.Root / List / Item / Trigger / Content / Link / LinkCard / Viewport.
+ */
+declare function NavigationMenuSimple({ items, className, classNames, ...props }: NavigationMenuProps): React.JSX.Element;
+export declare const NavigationMenu: typeof NavigationMenuSimple & {
+  Root: typeof NavigationMenuRoot;
+  List: typeof NavigationMenuList;
+  Item: typeof NavigationMenuItem;
+  Trigger: typeof NavigationMenuTrigger;
+  Content: typeof NavigationMenuContent;
+  Link: typeof NavigationMenuLink;
+  LinkCard: typeof NavigationMenuLinkCard;
+  Viewport: typeof NavigationMenuViewport;
+};
+export declare const navigationMenuStyles: import("tailwind-variants").TVReturnType<{}, {
+  root: string;
+  list: string;
+  indicator: string[];
+  trigger: string[];
+  icon: string;
+  content: string[];
+  positioner: string[];
+  popup: string[];
+  viewport: string;
+  cardList: string;
+  card: string[];
+  cardIcon: string;
+  cardTitle: string;
+  cardDescription: string;
+}, undefined, undefined, undefined, undefined>;
+type CarouselApi = NonNullable<UseEmblaCarouselType[1]>;
+type CarouselOptions = NonNullable<Parameters<typeof useEmblaCarousel>[0]>;
+type CarouselPlugins = Parameters<typeof useEmblaCarousel>[1];
+type Orientation$1 = 'horizontal' | 'vertical';
+interface CarouselContextValue {
+  viewportRef: UseEmblaCarouselType[0];
+  api: CarouselApi | undefined;
+  orientation: Orientation$1;
+  selected: number;
+  count: number;
+  canPrev: boolean;
+  canNext: boolean;
+  prev: () => void;
+  next: () => void;
+  goTo: (index: number) => void;
+}
+/** The carousel state inside `Carousel.Root`: `{ api, selected, count, prev, next, goTo, … }`. */
+export declare function useCarousel(): CarouselContextValue;
+interface CarouselRootProps extends React.ComponentPropsWithRef<'div'> {
+  /** Embla options (`align`, `slidesToScroll`, `dragFree` …). `loop` and `orientation` have their own props. */
+  opts?: Omit<CarouselOptions, 'loop' | 'axis'>;
+  plugins?: CarouselPlugins;
+  /** Wrap from the last slide to the first. */
+  loop?: boolean;
+  /** @default 'horizontal' */
+  orientation?: Orientation$1;
+  /** Receives the Embla API once it is ready. */
+  setApi?: (api: CarouselApi) => void;
+  /** Called when the current slide changes. */
+  onSelectedChange?: (index: number) => void;
+}
+/** Holds the state; arrow keys on any focused part move between slides. */
+declare function CarouselRoot({ opts, plugins, loop, orientation, setApi, onSelectedChange, className, onKeyDownCapture, children, ...props }: CarouselRootProps): React.JSX.Element;
+interface CarouselContentProps extends React.ComponentPropsWithRef<'div'> {
+  classNames?: {
+    viewport?: string;
+  };
+}
+/** The clipped viewport and the moving track. Put `Carousel.Item`s inside. */
+declare function CarouselContent({ className, classNames, ...props }: CarouselContentProps): React.JSX.Element;
+interface CarouselItemProps extends React.ComponentPropsWithRef<'div'> {
+  /** Wrap the content in a squircle card. @default true */
+  card?: boolean;
+  classNames?: {
+    card?: string;
+  };
+}
+/**
+ * One slide. Its width is `basis-full`; pass e.g. `className="md:basis-1/2"` to show several at once.
+ * The slide's label ("2 of 5") is added for screen readers.
+ */
+declare function CarouselItem({ card, className, classNames, children, ...props }: CarouselItemProps): React.JSX.Element;
+declare function CarouselPrevious({ className, children, ...props }: ButtonProps): React.JSX.Element;
+declare function CarouselNext({ className, children, ...props }: ButtonProps): React.JSX.Element;
+interface CarouselDotsProps extends React.ComponentPropsWithRef<'div'> {
+  classNames?: {
+    dot?: string;
+    current?: string;
+  };
+}
+/** One dot per snap point; the current one is an accent pill that glides. */
+declare function CarouselDots({ className, classNames, ...props }: CarouselDotsProps): React.JSX.Element;
+/** The default control row: previous, dots, next. */
+declare function CarouselControls({ className, ...props }: React.ComponentPropsWithRef<'div'>): React.JSX.Element;
+interface CarouselProps extends Omit<CarouselRootProps, 'children'> {
+  /** One node per slide. */
+  slides: React.ReactNode[];
+  /** Show the previous/next buttons. @default true */
+  arrows?: boolean;
+  /** Show the dots. @default true */
+  dots?: boolean;
+  /** Wrap each slide in a card. @default true */
+  card?: boolean;
+  classNames?: {
+    viewport?: string;
+    content?: string;
+    item?: string;
+    card?: string;
+    controls?: string;
+  };
+}
+/**
+ * Slides that scroll horizontally, with arrows, dots, swipe and keyboard.
+ *   <Carousel loop slides={[<Slide1 />, <Slide2 />]} />
+ * or compound: Carousel.Root / Content / Item / Previous / Next / Dots / Controls, plus `useCarousel()`.
+ */
+declare function CarouselSimple({ slides, arrows, dots, card, classNames, ...props }: CarouselProps): React.JSX.Element;
+export declare const Carousel: typeof CarouselSimple & {
+  Root: typeof CarouselRoot;
+  Content: typeof CarouselContent;
+  Item: typeof CarouselItem;
+  Previous: typeof CarouselPrevious;
+  Next: typeof CarouselNext;
+  Dots: typeof CarouselDots;
+  Controls: typeof CarouselControls;
+};
+/**
+ * Slides are squircle cards in a clipped viewport; the controls sit in a row underneath (never over
+ * the slides and never outside the frame, so nothing overflows on a phone). The current dot is one
+ * accent pill that glides between dots (transform only).
+ */
+export declare const carouselStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    horizontal: {
+      container: string;
+      item: string;
+    };
+    vertical: {
+      container: string;
+      item: string;
+    };
+  };
+}, {
+  root: string;
+  viewport: string;
+  container: string;
+  item: string;
+  card: string;
+  controls: string;
+  dots: string;
+  dot: string[];
+  dotCurrent: string;
+}, undefined, undefined, undefined, undefined>;
+/**
+ * The chart frame. TanStack Charts paints axes and labels with `currentColor`, so the frame sets the
+ * muted ink; series colours and the tooltip surface are CSS variables set from our tokens (see
+ * `chartVariables` in chart.tsx). The tooltip gets the popover look; its corners use `corner-shape`
+ * natively where supported, without the polyfill (it moves on every pointer move).
+ */
+export declare const chartStyles: import("tailwind-variants").TVReturnType<{
+  legendPosition: {
+    top: {
+      legend: string;
+    };
+    bottom: {
+      legend: string;
+    };
+  };
+}, {
+  root: string;
+  chart: string[];
+  legend: string;
+  legendItem: string;
+  legendButton: string[];
+  swatch: string;
+  tooltip: string[];
+  tooltipTitle: string;
+  tooltipRow: string;
+  tooltipSwatch: string;
+  tooltipLabel: string;
+  tooltipValue: string;
+  tooltipShare: string;
+  tooltipTotal: string;
+  loading: string;
+  loadingBar: string;
+  empty: string;
+}, undefined, undefined, undefined, undefined>;
+/** Straight lines between points. */
+export declare const curveLinear: ChartCurve;
+/** A smooth monotone curve: no overshoot above peaks or below dips. */
+export declare const curveSmooth: ChartCurve;
+declare const chartCurves: {
+  readonly linear: ChartCurve;
+  readonly smooth: ChartCurve;
+};
+type ChartCurveName = keyof typeof chartCurves;
+/** How numbers are written: a preset, `Intl.NumberFormat` options or your own function. */
+type ChartValueFormat = 'number' | 'compact' | 'percent' | Intl.NumberFormatOptions | ((value: number) => string);
+/** How x values are written: a date preset, `Intl.DateTimeFormat` options or your own function. */
+type ChartXFormat<TValue = unknown> = 'day' | 'week' | 'month' | 'year' | Intl.DateTimeFormatOptions | ((value: TValue) => string);
+/**
+ * The series palette: the accent first, then calmer colours derived from it (hue turns in OKLCH
+ * with a little less chroma, so they sit next to the accent without shouting), then the muted ink.
+ * Every step reads an optional `--cui-chart-N` token first, so an app can set its own palette.
+ */
+export declare const chartPalette: readonly ['var(--cui-chart-1, var(--cui-accent))', 'var(--cui-chart-2, oklch(from var(--cui-accent) l calc(c * 0.8) calc(h - 115)))', 'var(--cui-chart-3, oklch(from var(--cui-accent) l calc(c * 0.8) calc(h + 70)))', 'var(--cui-chart-4, oklch(from var(--cui-accent) l calc(c * 0.8) calc(h + 150)))', 'var(--cui-chart-5, oklch(from var(--cui-accent) l calc(c * 0.8) calc(h - 50)))', 'var(--cui-chart-6, var(--cui-muted))'];
+/** The CSS variables TanStack Charts reads: palette and tooltip surface, all from our tokens. */
+export declare const chartVariables: React.CSSProperties;
+/** Colour of the series at `index` (cycles through the palette). */
+export declare const chartColor: (index: number) => string;
+interface ChartSeries {
+  /** The field of each data row that holds this series' values. */
+  key: string;
+  /** Name in the legend and tooltip. @default key */
+  label?: string;
+  /** Any CSS colour; defaults to the palette. */
+  color?: string;
+}
+interface ChartReferenceLine {
+  /** Where the line sits on the y axis. */
+  value: number;
+  /** Text drawn above the line, at the left. */
+  label?: string;
+  /** Any CSS colour. @default the muted ink */
+  color?: string;
+}
+interface ChartLegendItem {
+  label: string;
+  color: string;
+  /** Series key, passed to `onToggle`. @default label */
+  key?: string;
+  /** Drawn as switched off (hollow swatch, dimmed). */
+  hidden?: boolean;
+}
+interface ChartLegendProps extends Omit<React.ComponentPropsWithRef<'ul'>, 'onToggle'> {
+  items: ChartLegendItem[];
+  position?: 'top' | 'bottom';
+  /** Makes each item a toggle button; called with the item's key. */
+  onToggle?: (key: string) => void;
+  classNames?: {
+    item?: string;
+    swatch?: string;
+  };
+}
+/** Swatches with series names, as HTML (readable, wraps on a phone). With `onToggle`, each is a toggle. */
+declare function ChartLegend({ items, position, onToggle, className, classNames, ...props }: ChartLegendProps): React.JSX.Element;
+type ChartRenderer = React.ComponentProps<typeof RendererChart>['renderer'];
+type ChartRootProps = ChartProps$1 & Omit<React.ComponentPropsWithRef<'div'>, keyof ChartProps$1> & {
+  /** A TanStack renderer, e.g. `motion()` from `@tanstack/charts/motion` for entrance animation. */
+  renderer?: ChartRenderer;
+  classNames?: {
+    chart?: string;
+  };
+};
+/**
+ * The frame for your own TanStack Charts definition: our palette, ink and tooltip surface around the
+ * `Chart` of `@tanstack/react-charts`. Use `chartColor(i)` in marks for series colours.
+ */
+declare function ChartRoot({ definition, ariaLabel, ariaDescription, height, aspectRatio, initialWidth, onFocusChange, onSelect, renderTooltipBody, renderer, className, classNames, style, children, ...props }: ChartRootProps): React.JSX.Element;
+interface ChartProps<TRow extends Record<string, unknown>> extends Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'onSelect'>, VariantProps<typeof chartStyles> {
+  /** `line`, `area` or `bar`. @default 'line' */
+  type?: 'line' | 'area' | 'bar';
+  /** One row per category (week, build…), with one field per series. */
+  data: readonly TRow[];
+  /** The field with the category shown on the x axis (strings, numbers or dates). */
+  x: keyof TRow & string;
+  /** The series to draw; each reads `row[key]`. */
+  series: ChartSeries[];
+  /** What the chart shows, for screen readers. */
+  ariaLabel: string;
+  ariaDescription?: string;
+  /** Height in pixels; the width follows the container. @default 280 */
+  height?: number;
+  /** `smooth` draws a monotone curve (no overshoot), `linear` straight segments. @default 'smooth' */
+  curve?: ChartCurveName;
+  /** Stack areas or bars; `percent` stacks shares of the total (0–100 %). Bars are grouped otherwise. */
+  stacked?: boolean | 'percent';
+  /** Fill under lines with the series colour fading to transparent. @default true for `area` */
+  gradient?: boolean;
+  /** Dots on line points. */
+  points?: boolean;
+  /** Show the legend; its items toggle series. @default true with more than one series */
+  legend?: boolean;
+  /** Series keys hidden (controlled). */
+  hiddenSeries?: string[];
+  /** Series keys hidden at first (uncontrolled). */
+  defaultHiddenSeries?: string[];
+  onHiddenSeriesChange?: (hidden: string[]) => void;
+  /** Horizontal grid lines. @default true */
+  grid?: boolean;
+  /** Crosshair and tooltip listing every series at the hovered x. @default true */
+  tooltip?: boolean;
+  /** Formats values on the y axis and in the tooltip. @default 'number' */
+  valueFormat?: ChartValueFormat;
+  /** Formats x values on the axis and in the tooltip heading (dates: `day`, `week`, `month`, `year`). */
+  xFormat?: ChartXFormat<TRow[keyof TRow & string]>;
+  /** Locale for number and date formatting. @default 'en-US' */
+  locale?: string;
+  /** Dashed horizontal lines: goals, limits, averages. */
+  referenceLines?: ChartReferenceLine[];
+  /** Shows a skeleton instead of the chart. */
+  loading?: boolean;
+  /** What the empty state says when `data` is empty. */
+  empty?: {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+  };
+  /** Lines grow from the baseline and bars rise on mount; off with reduced motion. @default true */
+  animate?: boolean;
+  classNames?: {
+    chart?: string;
+    legend?: string;
+    tooltip?: string;
+  };
+}
+/**
+ * A line, area or bar chart (TanStack Charts) in our colours: gradient fills, smooth curves, a
+ * crosshair tooltip with every series, a legend that toggles series, stacking, reference lines,
+ * loading and empty states, and an entrance animation.
+ *   <Chart type="area" data={weeks} x="week" series={[{ key: 'votes', label: 'Votes' }]} ariaLabel="Votes per week" />
+ * For anything else, build a TanStack definition and render it in `Chart.Root`.
+ */
+declare function ChartSimple<TRow extends Record<string, unknown>>({ type, data, x, series, ariaLabel, ariaDescription, height, curve, stacked, gradient, points, legend, legendPosition, hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, grid, tooltip: showTooltip, valueFormat, xFormat, locale, referenceLines, loading, empty, animate, className, classNames, style, ...props }: ChartProps<TRow>): React.JSX.Element;
+export declare const Chart: typeof ChartSimple & {
+  Root: typeof ChartRoot;
+  Legend: typeof ChartLegend;
+};
+interface CodeThemes {
+  light: string;
+  dark: string;
+}
+interface HighlightOptions {
+  lang: string;
+  themes?: CodeThemes;
+  /** 1-based line numbers to mark. */
+  highlightLines?: number[];
+}
+/**
+ * Highlights `code` with Shiki and returns HTML: `<pre><code><span class="line">…`. Tokens are painted
+ * with `light-dark()`, so they follow the page's `color-scheme`. Shiki, the language and the themes
+ * load on first use and results are cached. Unknown languages fall back to plain text.
+ */
+export declare function highlightCode(code: string, { lang, themes, highlightLines }: HighlightOptions): Promise<string>;
+interface CodeBlockCopyProps extends Omit<ButtonProps, 'value'> {
+  /** The text to copy. */
+  value: string;
+}
+/** A button that copies `value` and shows a check for a moment. */
+declare function CodeBlockCopy({ value, className, onClick, ...props }: CodeBlockCopyProps): React.JSX.Element;
+interface CodeBlockProps extends Omit<React.ComponentPropsWithRef<'div'>, 'title'> {
+  code: string;
+  /** A Shiki language id. @default 'tsx' */
+  lang?: string;
+  /** A file name or title shown in a bar above the code. */
+  title?: React.ReactNode;
+  /** The icon before the title. @default <FileCode /> */
+  icon?: React.ReactNode;
+  lineNumbers?: boolean;
+  /** 1-based line numbers to mark with the accent. */
+  highlightLines?: number[];
+  /** Fold code longer than this many lines behind a "View code" button. */
+  collapsedLines?: number;
+  /** Label of the unfold button. @default 'View code' */
+  expandLabel?: string;
+  /** Show the copy button. @default true */
+  copyable?: boolean;
+  /** Shiki themes for light and dark. @default { light: 'github-light', dark: 'github-dark' } */
+  themes?: CodeThemes;
+  classNames?: {
+    header?: string;
+    title?: string;
+    pre?: string;
+    copy?: string;
+    fold?: string;
+  };
+}
+/**
+ * Highlighted code with a copy button, an optional file-name bar, line numbers, marked lines and
+ * folding for long snippets.
+ *   <CodeBlock code={source} lang="ts" title="trainer.config.ts" lineNumbers highlightLines={[3]} />
+ */
+declare function CodeBlockRoot({ code, lang, title, icon, lineNumbers, highlightLines, collapsedLines, expandLabel, copyable, themes, className, classNames, ...props }: CodeBlockProps): React.JSX.Element;
+export declare const CodeBlock: typeof CodeBlockRoot & {
+  Copy: typeof CodeBlockCopy;
+};
+/**
+ * Highlighted code in a squircle frame. Shiki paints each token with `light-dark(light, dark)`, so the
+ * colours follow `color-scheme`, which the theme sets on `.dark`: no `dark:` variant, no second pass.
+ * Lines are blocks in a grid (one row each) so highlights span the full scroll width; line numbers are
+ * a CSS counter. The line height is fixed (1.5rem) because the copy button is centred on line one.
+ */
+export declare const codeBlockStyles: import("tailwind-variants").TVReturnType<{}, {
+  root: string;
+  header: string;
+  title: string;
+  body: string;
+  pre: string[];
+  lineNumbers: string[];
+  copy: string;
+  fold: string;
+  foldOpen: string;
+  foldButton: string;
+}, undefined, undefined, undefined, undefined>;
+/** What a column can tell the data table through `meta`. */
+interface DataTableColumnMeta {
+  /**
+   * A fixed width (px number or any CSS length). The table uses a fixed layout, so widths never jump
+   * when sorting, paging or selecting; columns without a width share the space that's left.
+   * Give one to short columns (status, numbers, dates).
+   */
+  width?: number | string;
+}
+/**
+ * The TanStack Table v9 features a data table uses: sorting, column + global filtering, column
+ * visibility, row selection and pagination (client side). Pass it to `createColumnHelper` so column
+ * definitions are typed against the same features.
+ */
+export declare const dataTableFeatures: {
+  rowSortingFeature: import("@tanstack/react-table").TableFeature;
+  sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  sortFns: {
+    alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+  };
+  columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+  globalFilteringFeature: import("@tanstack/react-table").TableFeature;
+  filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  filterFns: {
+    includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    equals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    arrIncludesSome: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+  };
+  columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+  rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+  rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+  paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  columnMeta: DataTableColumnMeta;
+};
+type DataTableFeatures = typeof dataTableFeatures;
+type DataTableColumn<TData extends RowData> = ColumnDef<DataTableFeatures, TData, any>;
+type DataTableInstance<TData extends RowData> = ReactTable<DataTableFeatures, TData>;
+/** A column helper typed for data tables: `const col = createDataTableColumns<Post>()`. */
+export declare function createDataTableColumns<TData extends RowData>(): import("@tanstack/react-table").ColumnHelper<{
+  rowSortingFeature: import("@tanstack/react-table").TableFeature;
+  sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  sortFns: {
+    alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+  };
+  columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+  globalFilteringFeature: import("@tanstack/react-table").TableFeature;
+  filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  filterFns: {
+    includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    equals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    arrIncludesSome: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+  };
+  columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+  rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+  rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+  paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  columnMeta: DataTableColumnMeta;
+}, TData>;
+type Options$1<TData extends RowData> = Omit<TableOptions<DataTableFeatures, TData>, 'features' | 'columns'>;
+interface UseDataTableOptions<TData extends RowData> extends Options$1<TData> {
+  columns: DataTableColumn<TData>[];
+  /** Add a checkbox column to select rows. */
+  selectable?: boolean;
+  /** Rows per page. @default 10 */
+  pageSize?: number;
+}
+/**
+ * Creates the table instance for the compound form. Keep `columns` and `data` stable (module scope,
+ * state or `useMemo`), otherwise the row models rebuild on every render.
+ */
+export declare function useDataTable<TData extends RowData>({ columns, selectable, pageSize, initialState, ...options }: UseDataTableOptions<TData>): ReactTable<{
+  rowSortingFeature: import("@tanstack/react-table").TableFeature;
+  sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  sortFns: {
+    alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    basic: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+  };
+  columnFilteringFeature: import("@tanstack/react-table").TableFeature;
+  globalFilteringFeature: import("@tanstack/react-table").TableFeature;
+  filteredRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  filterFns: {
+    includesString: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    equals: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+    arrIncludesSome: import("@tanstack/react-table").CreatedFilterFn<any, any>;
+  };
+  columnVisibilityFeature: import("@tanstack/react-table").TableFeature;
+  rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+  rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+  paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+  columnMeta: DataTableColumnMeta;
+}, TData, import("@tanstack/react-table").TableState_ColumnFiltering & import("@tanstack/react-table").TableState_ColumnVisibility & import("@tanstack/react-table").TableState_GlobalFiltering & import("@tanstack/react-table").TableState_RowPagination & import("@tanstack/react-table").TableState_RowSelection & import("@tanstack/react-table").TableState_RowSorting>;
+/** The table instance inside `DataTable.Root`. */
+export declare function useDataTableContext<TData extends RowData = RowData>(): DataTableInstance<TData>;
+interface DataTableRootProps<TData extends RowData> extends React.ComponentPropsWithRef<'div'> {
+  table: DataTableInstance<TData>;
+}
+declare function DataTableRoot<TData extends RowData>({ table, className, ...props }: DataTableRootProps<TData>): React.JSX.Element;
+declare const DataTableToolbar: ({ className, ...p }: React.ComponentPropsWithRef<'div'>) => React.JSX.Element;
+interface DataTableSearchProps {
+  placeholder?: string;
+  /** Filter one column instead of all of them. */
+  column?: string;
+  className?: string;
+  'aria-label'?: string;
+}
+/** A search field that filters the rows (all columns, or one with `column`). */
+declare function DataTableSearch({ placeholder, column, className, 'aria-label': label }: DataTableSearchProps): React.JSX.Element;
+/** A "View" menu with one checkbox per column that can be hidden. */
+declare function DataTableColumnToggle({ label, className }: {
+  label?: React.ReactNode;
+  className?: string;
+}): React.JSX.Element;
+interface DataTableContentProps extends Omit<TableRootProps, 'children' | 'layout'> {
+  /** Shown in one row when no rows match. @default 'No results.' */
+  empty?: React.ReactNode;
+  /** Called when a row is clicked (open a post, a tester). */
+  onRowClick?: (row: Row<DataTableFeatures, RowData>) => void;
+}
+/** The table: sortable headers, selectable rows, an empty row when nothing matches. */
+declare function DataTableContent({ empty, onRowClick, hover, style, ...props }: DataTableContentProps): React.JSX.Element;
+/** "2 of 12 selected" when rows can be selected, otherwise the number of rows. */
+declare function DataTableCount({ className }: {
+  className?: string;
+}): React.JSX.Element;
+/** Our Pagination bound to the table's pages. Hidden when everything fits on one page. */
+declare function DataTablePagination({ className }: {
+  className?: string;
+}): React.JSX.Element | null;
+declare const DataTableFooter: ({ className, ...p }: React.ComponentPropsWithRef<'div'>) => React.JSX.Element;
+interface DataTableProps<TData extends RowData> extends UseDataTableOptions<TData> {
+  /** Show the search field; a string sets its placeholder. @default true */
+  search?: boolean | string;
+  /** Filter only this column with the search field. */
+  searchColumn?: string;
+  /** Show the column visibility menu. @default true */
+  columnToggle?: boolean;
+  /** Extra controls in the toolbar (filters, a "New" button). */
+  toolbar?: React.ReactNode;
+  empty?: React.ReactNode;
+  onRowClick?: (row: Row<DataTableFeatures, TData>) => void;
+  /** Tighter rows. */
+  dense?: boolean;
+  className?: string;
+}
+/**
+ * Sorting, filtering, row selection, column visibility and pagination on our Table.
+ *   <DataTable columns={columns} data={posts} getRowId={(p) => p.id} selectable />
+ * or compound: `useDataTable()` + DataTable.Root / Toolbar / Search / ColumnToggle / Content / Footer /
+ * Count / Pagination.
+ */
+declare function DataTableSimple<TData extends RowData>({ search, searchColumn, columnToggle, toolbar, empty, onRowClick, dense, className, ...options }: DataTableProps<TData>): React.JSX.Element;
+export declare const DataTable: typeof DataTableSimple & {
+  Root: typeof DataTableRoot;
+  Toolbar: typeof DataTableToolbar;
+  Search: typeof DataTableSearch;
+  ColumnToggle: typeof DataTableColumnToggle;
+  Content: typeof DataTableContent;
+  Footer: typeof DataTableFooter;
+  Count: typeof DataTableCount;
+  Pagination: typeof DataTablePagination;
+};
+/** The data table is our Table plus a toolbar (search, column menu) and a footer (selection, pages). */
+export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{}, {
+  root: string;
+  toolbar: string;
+  search: string;
+  sortButton: string[];
+  sortIcon: string;
+  selectCell: string;
+  selectedRow: string;
+  empty: string;
+  footer: string;
+  count: string;
+}, undefined, undefined, undefined, undefined>;
+type Orientation = 'horizontal' | 'vertical';
+interface ResizableGroupProps extends Omit<GroupProps, 'orientation'> {
+  /** `horizontal` puts panels side by side, `vertical` stacks them. @default 'horizontal' */
+  orientation?: Orientation;
+}
+/** Holds the panels and the handles between them. Panels and handles must be its direct children. */
+declare function ResizableGroup({ orientation, className, ...props }: ResizableGroupProps): React.JSX.Element;
+type ResizablePanelProps = PanelProps;
+/** One resizable area. Sizes: numbers are pixels, strings without a unit are percentages. */
+declare function ResizablePanel({ className, ...props }: ResizablePanelProps): React.JSX.Element;
+interface ResizableHandleProps extends SeparatorProps$1 {
+  /** Show a small grip on the line. */
+  withHandle?: boolean;
+  classNames?: {
+    grip?: string;
+  };
+}
+/** The draggable line between two panels; also focusable and moved with the arrow keys. */
+declare function ResizableHandle({ withHandle, className, classNames, ...props }: ResizableHandleProps): React.JSX.Element;
+/**
+ * Panels split by draggable handles.
+ *   <Resizable.Group>
+ *     <Resizable.Panel defaultSize="30">…</Resizable.Panel>
+ *     <Resizable.Handle withHandle />
+ *     <Resizable.Panel>…</Resizable.Panel>
+ *   </Resizable.Group>
+ */
+export declare const Resizable: {
+  Group: typeof ResizableGroup;
+  Panel: typeof ResizablePanel;
+  Handle: typeof ResizableHandle;
+};
+/**
+ * Panels split by a hairline. The hairline turns accent while hovered or dragged; the optional grip is a
+ * small rounded tile on the line. The hit area is wider than the line (a transparent pseudo-element).
+ */
+export declare const resizableStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    horizontal: {
+      group: string;
+      handle: string;
+      grip: string;
+    };
+    vertical: {
+      group: string;
+      handle: string;
+      grip: string;
+    };
+  };
+}, {
+  group: string;
+  panel: string;
+  handle: string[];
+  grip: string[];
+}, undefined, undefined, undefined, undefined>;
+interface SidebarContextValue {
+  /** Desktop: the sidebar is shown. */
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  /** Phone: the drawer is shown. */
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  /** Opens/closes the drawer on a phone, the sidebar otherwise. */
+  toggle: () => void;
+  id: string;
+}
+/** The sidebar state inside `Sidebar.Provider`: `{ open, setOpen, openMobile, setOpenMobile, toggle }`. */
+export declare function useSidebar(): SidebarContextValue;
+interface SidebarProviderProps extends React.ComponentPropsWithRef<'div'> {
+  /** Desktop open state (controlled). */
+  open?: boolean;
+  /** @default true */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Toggle with Ctrl/⌘ + this key; `false` turns the shortcut off. @default 'b' */
+  shortcut?: string | false;
+  /** Sidebar width, any CSS length. @default '16rem' */
+  width?: string;
+}
+/** Holds the open state and lays out the sidebar next to `Sidebar.Inset` on the frame colour. */
+declare function SidebarProvider({ open: openProp, defaultOpen, onOpenChange, shortcut, width, className, style, ...props }: SidebarProviderProps): React.JSX.Element;
+interface SidebarProps extends React.ComponentPropsWithRef<'aside'> {
+  /** Name of the navigation landmark. @default 'Sidebar' */
+  label?: string;
+  classNames?: {
+    column?: string;
+    drawer?: string;
+    backdrop?: string;
+  };
+}
+/**
+ * The sidebar: an `<aside>` on desktop that collapses completely, and a drawer from the left on phones
+ * (opened by `Sidebar.Trigger`). Its children are rendered in whichever is shown.
+ */
+declare function SidebarRoot({ label, className, classNames, children, ...props }: SidebarProps): React.JSX.Element;
+declare const SidebarHeader: ({ className, ...p }: React.ComponentPropsWithRef<'div'>) => React.JSX.Element;
+declare const SidebarFooter: ({ className, ...p }: React.ComponentPropsWithRef<'div'>) => React.JSX.Element;
+declare const SidebarSeparator: ({ className, ...p }: React.ComponentPropsWithRef<'div'>) => React.JSX.Element;
+/** The scrolling middle part with the groups. */
+declare function SidebarContent({ className, ...props }: React.ComponentPropsWithRef<'nav'>): React.JSX.Element;
+interface SidebarGroupProps extends Omit<React.ComponentPropsWithRef<'div'>, 'title'> {
+  /** The small heading above the rows. */
+  label?: React.ReactNode;
+  classNames?: {
+    label?: string;
+    list?: string;
+  };
+}
+/** A labelled group of rows. Each child becomes a list item. */
+declare function SidebarGroup({ label, className, classNames, children, ...props }: SidebarGroupProps): React.JSX.Element;
+declare function SidebarList({ className, children, ...props }: React.ComponentPropsWithRef<'ul'>): React.JSX.Element;
+declare const SidebarGroupLabel: ({ className, ...p }: React.ComponentPropsWithRef<'div'>) => React.JSX.Element;
+interface SidebarItemProps extends useRender.ComponentProps<'a'> {
+  icon?: React.ReactNode;
+  /** The current page: soft accent fill, `aria-current="page"`. */
+  active?: boolean;
+  /** Text at the end of the row (a count, a shortcut). */
+  badge?: React.ReactNode;
+  disabled?: boolean;
+}
+/**
+ * A row. Renders a link; `render={<Link to="…" />}` for a router link or `render={<button />}` for an
+ * action. On a phone, choosing a row closes the drawer.
+ */
+declare function SidebarItem({ icon, active, badge, disabled, className, render, children, onClick, ...props }: SidebarItemProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Nested rows under an item, with a guide line. */
+declare function SidebarSub({ className, children, ...props }: React.ComponentPropsWithRef<'ul'>): React.JSX.Element;
+/** Opens and closes the sidebar (the drawer on a phone). */
+declare function SidebarTrigger({ className, onClick, children, ...props }: ButtonProps): React.JSX.Element;
+/** The page panel next to the sidebar (rounded, on the background colour). */
+declare function SidebarInset({ className, ...props }: React.ComponentPropsWithRef<'main'>): React.JSX.Element;
+/**
+ * The app sidebar of crazy-hub.
+ *   <Sidebar.Provider>
+ *     <Sidebar>
+ *       <Sidebar.Header>…</Sidebar.Header>
+ *       <Sidebar.Content>
+ *         <Sidebar.Group label="Feedback">
+ *           <Sidebar.Item href="/ideas" icon={<Lightbulb />} active>Ideas</Sidebar.Item>
+ *         </Sidebar.Group>
+ *       </Sidebar.Content>
+ *     </Sidebar>
+ *     <Sidebar.Inset><Sidebar.Trigger /> …</Sidebar.Inset>
+ *   </Sidebar.Provider>
+ */
+export declare const Sidebar: typeof SidebarRoot & {
+  Provider: typeof SidebarProvider;
+  Header: typeof SidebarHeader;
+  Content: typeof SidebarContent;
+  Footer: typeof SidebarFooter;
+  Separator: typeof SidebarSeparator;
+  Group: typeof SidebarGroup;
+  GroupLabel: typeof SidebarGroupLabel;
+  List: typeof SidebarList;
+  Item: typeof SidebarItem;
+  Sub: typeof SidebarSub;
+  Trigger: typeof SidebarTrigger;
+  Inset: typeof SidebarInset;
+};
+/**
+ * The hover of a menu column (from crazy-hub, which took it from Fumadocs): one neutral block per area
+ * glides to the row under the mouse or the keyboard focus. Rows that already show their own fill (the
+ * active row) count as empty space, so the block never paints over the accent and never starts its
+ * slide from there: leaving the active row, the block fades in at the next row instead of sliding.
+ */
+export declare const glideBlockClass: string;
+/**
+ * Starts the glide in `area`; returns a cleanup. The block is the area's child with
+ * `[data-glide-block]`. Rows inside `[data-no-glide-area]` are ignored.
+ */
+export declare function glide(area: HTMLElement): () => void;
+/** A ref callback that runs `glide` on the element while it is mounted. */
+export declare function useGlide<T extends HTMLElement>(): (node: T | null) => void;
+/**
+ * The app sidebar of crazy-hub: it sits on the frame colour next to the page panel (the framed app
+ * layout). Rows are muted; the active row has the soft accent fill; one neutral block glides under
+ * the hovered row (see glide.ts). Collapsing hides the sidebar completely: the column closes and the
+ * content slides out a little and fades. On phones it is a drawer from the left.
+ */
+export declare const sidebarStyles: import("tailwind-variants").TVReturnType<{}, {
+  provider: string;
+  aside: string[];
+  column: string[];
+  area: string;
+  header: string;
+  content: string;
+  footer: string;
+  separator: string;
+  group: string;
+  groupLabel: string;
+  list: string;
+  item: string[];
+  badge: string;
+  sub: string;
+  inset: string[];
+  trigger: string;
+  backdrop: string[];
+  drawer: string[];
+}, undefined, undefined, undefined, undefined>;
+/** One look per text element, shared by the parts and by the `Prose` wrapper. */
+export declare const typographyStyles: import("tailwind-variants").TVReturnType<{}, {
+  h1: string;
+  h2: string;
+  h3: string;
+  h4: string;
+  p: string;
+  lead: string;
+  large: string;
+  small: string;
+  muted: string;
+  blockquote: string;
+  list: string;
+  inlineCode: string;
+  link: string;
+  kbd: string;
+  hr: string;
+}, undefined, undefined, undefined, undefined>;
+/**
+ * Long-form text from markdown or a CMS: every child element gets the same look as the parts.
+ * Spacing follows a vertical rhythm: block elements are separated by `margin-top`, headings get more.
+ */
+export declare const proseStyles: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: string;
+    md: string;
+    lg: string;
+  };
+}, undefined, string[], undefined, undefined, undefined>;
+interface ProseProps extends useRender.ComponentProps<'div'>, VariantProps<typeof proseStyles> {}
+/**
+ * Styles every element inside: headings, paragraphs, lists, quotes, code, tables, links. Use it around
+ * rendered markdown or CMS content. `render={<article />}` changes the element.
+ */
+export declare function Prose({ className, size, render, ...props }: ProseProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/**
+ * Text parts with the same look as `Prose`, for UI text outside long-form content:
+ *   <Typography.H2>Roadmap</Typography.H2> <Typography.Lead>What we build next.</Typography.Lead>
+ * Each part takes `render` to swap the element (`<Typography.H2 render={<h3 />}>` keeps the h2 look).
+ */
+export declare const Typography: {
+  H1: {
+    ({ className, render, ...props }: useRender.ComponentProps<"h1", {}, import("@base-ui/react").HTMLProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+  };
+  H2: {
+    ({ className, render, ...props }: useRender.ComponentProps<"h2", {}, import("@base-ui/react").HTMLProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+  };
+  H3: {
+    ({ className, render, ...props }: useRender.ComponentProps<"h3", {}, import("@base-ui/react").HTMLProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+  };
+  H4: {
+    ({ className, render, ...props }: useRender.ComponentProps<"h4", {}, import("@base-ui/react").HTMLProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+  };
+  P: {
+    ({ className, render, ...props }: useRender.ComponentProps<"p", {}, import("@base-ui/react").HTMLProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+  };
+  Lead: {
+    ({ className, render, ...props }: useRender.ComponentProps<"p", {}, import("@base-ui/react").HTMLProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+  };
+  Large: {
+    ({ className, render, ...props }: useRender.ComponentProps<"div", {}, import("@base-ui/react").HTMLProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+  };
+  Small: {
+    ({ className, render, ...props }: useRender.ComponentProps<"small", {}, import("@base-ui/react").HTMLProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+  };
+  Muted: {
+    ({ className, render, ...props }: useRender.ComponentProps<"p", {}, import("@base-ui/react").HTMLProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+  };
+  Blockquote: {
+    ({ className, render, ...props }: useRender.ComponentProps<"blockquote", {}, import("@base-ui/react").HTMLProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+  };
+  List: {
+    ({ className, render, ...props }: useRender.ComponentProps<"ul", {}, import("@base-ui/react").HTMLProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+  };
+  InlineCode: {
+    ({ className, render, ...props }: useRender.ComponentProps<"code", {}, import("@base-ui/react").HTMLProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+  };
+  Link: {
+    ({ className, render, ...props }: useRender.ComponentProps<"a", {}, import("@base-ui/react").HTMLProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+  };
+  Kbd: {
+    ({ className, render, ...props }: useRender.ComponentProps<"kbd", {}, import("@base-ui/react").HTMLProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+  };
+  Prose: typeof Prose;
+};
+/**
+ * A list row: media, title + description, actions. `outline` and `muted` frame it like a small card;
+ * `plain` (default) leaves it bare for use inside a group. Rows that are links or buttons get a soft
+ * hover fill (background-color only, which the squircle fallback can paint).
+ */
+export declare const itemStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    plain: {
+      root: string;
+    };
+    outline: {
+      root: string;
+    };
+    muted: {
+      root: string;
+    };
+  };
+  size: {
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+  media: string;
+  content: string;
+  title: string;
+  description: string;
+  actions: string;
+  header: string;
+  footer: string;
+}, undefined, undefined, undefined, undefined>;
+export declare const itemMediaStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    /** Anything: an avatar, a custom element. */
+    default: string;
+    /** A tinted squircle tile with the icon in accent ink. */
+    icon: string;
+    /** A picture cropped to a tile. */
+    image: string;
+  };
+}, undefined, "flex shrink-0 items-center justify-center [&_svg]:pointer-events-none", undefined, undefined, undefined>;
+export declare const itemGroupStyles: import("tailwind-variants").TVReturnType<{
+  /** Rows inside one shared frame, divided by hairlines. */
+  framed: {
+    true: {
+      root: string;
+    };
+    false: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  separator: string;
+}, undefined, undefined, undefined, undefined>;
+type Options = VariantProps<typeof itemStyles>;
+interface ItemRootProps extends useRender.ComponentProps<'div'>, Options {}
+/** The row itself. Pass `render={<a href="…" />}` (or a router link) to make the whole row a link. */
+declare function ItemRoot({ className, variant, size, render, ...props }: ItemRootProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+interface ItemMediaProps extends React.ComponentPropsWithRef<'div'>, VariantProps<typeof itemMediaStyles> {}
+declare function ItemMedia({ className, variant, ...props }: ItemMediaProps): React.JSX.Element;
+declare const ItemContent: ({ className, ...p }: React.ComponentPropsWithRef<'div'>) => React.JSX.Element;
+declare const ItemTitle: ({ className, ...p }: React.ComponentPropsWithRef<'div'>) => React.JSX.Element;
+declare const ItemDescription: ({ className, ...p }: React.ComponentPropsWithRef<'p'>) => React.JSX.Element;
+declare const ItemActions: ({ className, ...p }: React.ComponentPropsWithRef<'div'>) => React.JSX.Element;
+declare const ItemHeader: ({ className, ...p }: React.ComponentPropsWithRef<'div'>) => React.JSX.Element;
+declare const ItemFooter: ({ className, ...p }: React.ComponentPropsWithRef<'div'>) => React.JSX.Element;
+interface ItemGroupProps extends React.ComponentPropsWithRef<'div'>, VariantProps<typeof itemGroupStyles> {}
+/** A list of items. `framed` puts them in one card with hairlines between rows. */
+export declare function ItemGroup({ className, framed, ...props }: ItemGroupProps): React.JSX.Element;
+/** A hairline between rows of a group. */
+export declare function ItemSeparator({ className, ...props }: React.ComponentPropsWithRef<'div'>): React.JSX.Element;
+interface ItemProps extends Omit<ItemRootProps, 'title'> {
+  /** An icon, shown on a tinted tile. */
+  icon?: React.ReactNode;
+  /** Any media (avatar, image) shown as is; wins over `icon`. */
+  media?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  /** Controls on the right: a button, a switch, a chip. */
+  actions?: React.ReactNode;
+  classNames?: {
+    media?: string;
+    content?: string;
+    title?: string;
+    description?: string;
+    actions?: string;
+  };
+}
+/**
+ * A list row: media, title and description, actions.
+ *   <Item icon={<Shield />} title="God mode" description="No damage taken." actions={<Switch />} />
+ * or compound: Item.Root / Media / Content / Title / Description / Actions / Header / Footer.
+ */
+declare function ItemSimple({ icon, media, title, description, actions, classNames, children, ...props }: ItemProps): React.JSX.Element;
+export declare const Item: typeof ItemSimple & {
+  Root: typeof ItemRoot;
+  Media: typeof ItemMedia;
+  Content: typeof ItemContent;
+  Title: typeof ItemTitle;
+  Description: typeof ItemDescription;
+  Actions: typeof ItemActions;
+  Header: typeof ItemHeader;
+  Footer: typeof ItemFooter;
+  Group: typeof ItemGroup;
+  Separator: typeof ItemSeparator;
+};
+/**
+ * An overlay pinned to one edge of its positioned parent. The layers are stacked `backdrop-filter`
+ * blurs, each masked to a band, so the blur grows towards the edge instead of starting at a hard line.
+ */
+export declare const progressiveBlurStyles: import("tailwind-variants").TVReturnType<{
+  side: {
+    top: {
+      root: string;
+    };
+    bottom: {
+      root: string;
+    };
+    left: {
+      root: string;
+    };
+    right: {
+      root: string;
+    };
+  };
+}, {
+  root: string;
+  layer: string;
+  tint: string;
+}, undefined, undefined, undefined, undefined>;
+type Side = 'top' | 'bottom' | 'left' | 'right';
+interface ProgressiveBlurProps extends Omit<React.ComponentPropsWithRef<'div'>, 'children'>, VariantProps<typeof progressiveBlurStyles> {
+  /** The edge the blur grows towards. @default 'bottom' */
+  side?: Side;
+  /** How far the blur reaches in from the edge: pixels or any CSS length. @default 64 */
+  size?: number | string;
+  /** The blur at the edge, in pixels; it fades out inwards. @default 8 */
+  strength?: number;
+  /** Number of stacked layers; more is smoother and costs more. @default 8 */
+  layers?: number;
+  /**
+   * Also fade towards a colour at the edge, so text under the blur disappears completely.
+   * `true` uses the page background; pass a CSS colour (`var(--cui-surface)`) inside cards.
+   */
+  tint?: boolean | string;
+  classNames?: {
+    layer?: string;
+    tint?: string;
+  };
+}
+/**
+ * Blurs whatever is behind it progressively towards one edge. Put it inside a positioned parent
+ * (`relative`) over a scroll area, a card, an image or a list end; it never catches the pointer.
+ *   <div className="relative"><ScrollArea …/><ProgressiveBlur side="bottom" size={72} /></div>
+ */
+export declare function ProgressiveBlur({ side, size, strength, layers, tint, className, classNames, style, ...props }: ProgressiveBlurProps): React.JSX.Element;
+export type { AccordionItemData, AccordionPanelProps, AccordionProps, AccordionRootProps, AccordionTriggerProps, AlertDialogContentProps, AlertDialogProps, AlertProps, AspectRatioProps, AvatarProps, AvatarRootProps, BreadcrumbItemData, BreadcrumbLinkProps, BreadcrumbProps, ButtonGroupProps, ButtonProps, CalendarProps, CalendarRangeProps, CalendarSingleProps, CardProps, CarouselApi, CarouselContentProps, CarouselDotsProps, CarouselItemProps, CarouselOptions, CarouselProps, CarouselRootProps, ChartCurveName, ChartLegendItem, ChartLegendProps, ChartProps, ChartReferenceLine, ChartRootProps, ChartSeries, ChartValueFormat, ChartXFormat, CheckboxGroupProps, CheckboxProps, ChipProps, CodeBlockCopyProps, CodeBlockProps, CodeThemes, CollapsibleProps, CollapsibleTriggerProps, ComboboxGroupData, ComboboxMultipleProps, ComboboxOption, ComboboxProps, ComboboxSingleProps, CommandDialogProps, CommandFilterOption, CommandFilterProps, CommandFiltersProps, CommandGroupData, CommandHighlightProps, CommandHintProps, CommandItemBreadcrumbsProps, CommandItemData, CommandItemProps, CommandJumpItemProps, CommandProps, CommandRootProps, ContextMenuContentProps, ContextMenuProps, DataTableColumn, DataTableContentProps, DataTableFeatures, DataTableInstance, DataTableProps, DataTableRootProps, DataTableSearchProps, DatePickerProps, DatePickerRangeProps, DatePickerSingleProps, DateRange, DialogContentProps, DialogProps, DrawerContentProps, DrawerProps, DropdownMenuContentProps, DropdownMenuEntry, DropdownMenuItemProps, DropdownMenuProps, EmptyProps, FieldProps, HighlightOptions, HoverCardContentProps, HoverCardProps, InputGroupProps, InputOTPProps, InputOTPRootProps, InputProps, ItemGroupProps, ItemMediaProps, ItemProps, ItemRootProps, KbdProps, LabelProps, MenubarMenuData, MenubarProps, NativeSelectOption, NativeSelectProps, NavigationMenuItemData, NavigationMenuLinkCardProps, NavigationMenuLinkData, NavigationMenuProps, NumberFieldProps, NumberFieldRootProps, PaginationProps, PopoverContentProps, PopoverProps, ProgressProps, ProgressTrackProps, ProgressiveBlurProps, ProseProps, RadioGroupItem, RadioGroupProps, RadioProps, ResizableGroupProps, ResizableHandleProps, ResizablePanelProps, RevealGroupProps, RevealProps, ScrollAreaProps, SelectOption, SelectProps, SeparatorProps, SheetContentProps, SheetProps, SidebarGroupProps, SidebarItemProps, SidebarProps, SidebarProviderProps, SkeletonProps, SliderProps, SpinnerProps, SwitchProps, TabItem, TableColumn, TableProps, TableRootProps, TabsListProps, TabsProps, TabsRootProps, TextareaProps, ToastOptions, ToastType, ToasterProps, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleProps, TooltipContentProps, TooltipProps, UseDataTableOptions, VariantProps };