@kinetixui/ui 0.23.3 → 0.24.0

package/README.md

@@ -0,0 +1,134 @@
+# @kinetixui/ui
+
+The React implementation of KinetixUI — CVA + Radix + Tailwind components styled only against the
+KinetixUI semantic token layer, never a raw hex.
+
+**Beta.** The catalogue is settled enough to build on (97 of 98 entries are lifecycle `stable`), but the
+package is pre-1.0 and minor versions can still move an API.
+
+```bash
+npm install @kinetixui/ui
+```
+
+`@kinetixui/tokens` comes with it as a real dependency, so the token contract is always present and in
+step. React 18 or 19 is a peer you supply.
+
+## Two ways to install, and they are genuinely different
+
+| | npm package | Registry (copy the source) |
+| --- | --- | --- |
+| Command | `npm install @kinetixui/ui` | `npx @kinetixui/cli add button` |
+| You get | A versioned dependency | The component's source, in your repo |
+| Updates | `npm update` | You own it; re-run `add` to take a newer version |
+| Editing | Wrap or restyle from outside | Edit the file |
+| Cost | The whole library resolves (see **Bundle size** below) | Only the components you asked for |
+
+Both compile against the same tokens. Most teams want the registry for components and npm for tokens.
+
+## Minimal usage
+
+Three things have to be true: the token stylesheet is loaded, the Tailwind preset is applied, and
+`.dark` is on an ancestor when you want the dark set.
+
+```css
+/* your global stylesheet */
+@import "@kinetixui/tokens/css";
+@import "@kinetixui/tokens/css/dark";
+```
+
+```ts
+// tailwind.config.ts
+import preset from "@kinetixui/ui/tailwind.config";
+
+export default {
+  presets: [preset],
+  content: ["./src/**/*.{ts,tsx}", "./node_modules/@kinetixui/ui/dist/**/*.js"],
+};
+```
+
+```tsx
+import { Button, Card, CardContent, Dialog, DialogContent, DialogTrigger } from "@kinetixui/ui";
+
+export function Example() {
+  return (
+    <Card>
+      <CardContent>
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="Primary">Open</Button>
+          </DialogTrigger>
+          <DialogContent>Anything.</DialogContent>
+        </Dialog>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+## Entry points
+
+| import | contains |
+| --- | --- |
+| `@kinetixui/ui` | every component and its prop types |
+| `@kinetixui/ui/tailwind.config` | the Tailwind preset — token scales, the `.dark` variant, the animation utilities |
+
+There is no per-component subpath today. That is the reason for the note below.
+
+## Bundle size
+
+**This package does not tree-shake per component.** `dist/` is a single pre-bundled ES module, so a
+bundler cannot drop the components you did not import: measured with esbuild, `import { Button }` alone
+produces roughly 678 KB minified, against roughly 1,015 KB for importing everything. `sideEffects: false`
+is declared and correct, and it does not help — the granularity problem is the single module, not the
+side-effect hint.
+
+So: if bundle size is the constraint, use the registry (`npx @kinetixui/cli add button`) and take only
+the components you need. If you are building an app that will use most of the catalogue behind a
+code-split route, the npm package is fine.
+
+This is a packaging limitation with a known fix (subpath exports per component, as `@kinetixui/iot`
+already does) and it is tracked in
+[`marketing/audits/TREE-SHAKING.md`](https://github.com/zedalleys/kinetixui/blob/main/marketing/audits/TREE-SHAKING.md).
+
+## Environment
+
+- **React** 18 or 19 (`react` and `react-dom` are peers)
+- **Tailwind CSS** 3.4, via the exported preset
+- ESM only — the package is `"type": "module"` and ships no CommonJS build
+- TypeScript types are shipped (`dist/index.d.ts`)
+
+## Accessibility
+
+Interactive components are built on Radix primitives, so keyboard behaviour and ARIA wiring come from a
+maintained implementation rather than a hand-rolled one. Focus is always visible via the `--ring` token
+and `focus-visible`.
+
+What is actually verified, per component, is published rather than asserted: every component in this
+package passes axe with **all rules enabled, in light and dark**, with an empty baseline — a new
+violation fails CI, and so does a baselined one that stops occurring. Contrast is a separate gate: every
+semantic token pair is audited against WCAG AA in both themes. The per-component, per-kind evidence
+table is at [kinetixui.com/docs/platforms](https://kinetixui.com/docs/platforms).
+
+RTL is in progress. Components are being converted from physical to logical Tailwind utilities and the
+conversion is enforced forward in CI, but it is not complete — see
+[RTL](https://kinetixui.com/docs/rtl) for where it stands.
+
+## Limitations worth knowing before you adopt
+
+- Pre-1.0: minor versions can move an API.
+- No per-component tree-shaking (above).
+- One catalogue entry, `combobox`, is a documented **recipe** over `Command` rather than a component —
+  there is no `Combobox` export. The catalogue is 98 entries, 97 of which are components.
+- No visual-regression suite exists yet, on any platform.
+
+## Links
+
+- Documentation — <https://kinetixui.com/docs>
+- Components — <https://kinetixui.com/components>
+- Installation — <https://kinetixui.com/docs/installation>
+- Per-platform coverage and evidence — <https://kinetixui.com/docs/platforms>
+- Source — <https://github.com/zedalleys/kinetixui>
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -31,7 +31,6 @@ import * as RechartsPrimitive from 'recharts';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import * as _tanstack_react_table from '@tanstack/react-table';
 import { RowData, ColumnDef } from '@tanstack/react-table';
-import * as vaul from 'vaul';
 import { Drawer as Drawer$1 } from 'vaul';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
@@ -80,9 +79,24 @@ declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.Re
  *
  * Figma's component bundles a label + helper text; those live in the `Field`
  * composition (their colour tracks the control's state). This is the bare
- * control. Tokens: border `--input`, focus `--ring`, error `--destructive`,
+ * control. Tokens: border `--muted-foreground`, focus `--ring`, error `--destructive`,
  * radius `--radius-sm` (Figma `input` = 4px), padding `--spacing-3`,
  * text = Body Medium (14 / 20, +0.25).
+ *
+ * It follows the text-entry state contract (TOKENS.md, "Text entry and navigation"):
+ *
+ *   rest       edge `--muted-foreground` at 80% — 3.4:1 light / 5.4:1 dark on a card, where `--input` was
+ *              2.2:1 / 2.4:1 and was the only thing marking where the field is (SC 1.4.11)
+ *   hover      a pointer that can hover: the edge steps to full `--muted-foreground`. Not on a focused,
+ *              invalid, read-only or disabled field — hover never takes over a stronger state
+ *   focus      `--action` edge + the `--shadow-focus` ring, the strongest signal, unchanged by the pointer
+ *   invalid    `aria-invalid="true"` → `--destructive` edge and ring, which hover does not replace; the
+ *              field's error text is the non-colour cue (SC 1.4.1)
+ *   read-only  an inset `--muted` fill, full-strength text, no hover: readable and selectable, not editable
+ *   disabled   `--opacity-disabled`, inert
+ *
+ * Motion: border-color, box-shadow and background-color over `duration-instant` with `ease-standard`.
+ * Reduced motion collapses it (the library floor) and lands on the same end state.
  */
 declare const inputVariants: (props?: ({
     state?: "Default" | "Focus" | "Disabled" | "Error" | null | undefined;
@@ -97,7 +111,22 @@ declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefA
  * 01. Form Inputs › Textarea (node 54855:13857).
  *
  * Identical to `Input` except the field is multi-line: `min-h-[100px]`
- * (Figma `h: 100`) and vertical resize. Same state matrix and tokens.
+ * (Figma `h: 100`) and vertical resize. Same state matrix and tokens as Input:
+ *
+ * It follows the text-entry state contract (TOKENS.md, "Text entry and navigation"):
+ *
+ *   rest       edge `--muted-foreground` at 80% — 3.4:1 light / 5.4:1 dark on a card, where `--input` was
+ *              2.2:1 / 2.4:1 and was the only thing marking where the field is (SC 1.4.11)
+ *   hover      a pointer that can hover: the edge steps to full `--muted-foreground`. Not on a focused,
+ *              invalid, read-only or disabled field — hover never takes over a stronger state
+ *   focus      `--action` edge + the `--shadow-focus` ring, the strongest signal, unchanged by the pointer
+ *   invalid    `aria-invalid="true"` → `--destructive` edge and ring, which hover does not replace; the
+ *              field's error text is the non-colour cue (SC 1.4.1)
+ *   read-only  an inset `--muted` fill, full-strength text, no hover: readable and selectable, not editable
+ *   disabled   `--opacity-disabled`, inert
+ *
+ * Motion: border-color, box-shadow and background-color over `duration-instant` with `ease-standard`.
+ * Reduced motion collapses it (the library floor) and lands on the same end state.
  */
 declare const textareaVariants: (props?: ({
     state?: "Default" | "Focus" | "Disabled" | "Error" | null | undefined;
@@ -119,7 +148,10 @@ declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAt
 
 declare const AlertDialog: React$1.FC<AlertDialogPrimitive.AlertDialogProps>;
 declare const AlertDialogTrigger: React$1.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const AlertDialogPortal: React$1.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+declare const AlertDialogPortal: {
+    ({ container, ...props }: AlertDialogPrimitive.AlertDialogPortalProps): React$1.JSX.Element | null;
+    displayName: string;
+};
 declare const AlertDialogOverlay: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const AlertDialogContent: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const AlertDialogHeader: {
@@ -154,8 +186,19 @@ interface KinetixDirectionProviderProps {
  *   <html dir={dir}>
  *     <KinetixDirectionProvider dir={dir}>{children}</KinetixDirectionProvider>
  *   </html>
+ *
+ * It also scopes: a provider around one section (with `dir` on that section's element) gives that section
+ * its own direction, and the overlays opened from inside it portal with that direction too, without
+ * touching `<html>`. The nearest provider wins.
  */
 declare function KinetixDirectionProvider({ dir, children }: KinetixDirectionProviderProps): React$1.JSX.Element;
+/**
+ * The element the nearest `KinetixDirectionProvider` wants overlays portaled into. `undefined` outside one
+ * (portal to `<body>` as usual); `null` inside one whose host is not attached yet, in which case render
+ * nothing and try again, which happens before paint. Every overlay in this library follows this; use it for a
+ * custom portal so it gets the same direction.
+ */
+declare function useKinetixPortalContainer(): HTMLElement | null | undefined;
 
 declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
@@ -204,7 +247,13 @@ declare const BreadcrumbEllipsis: {
     displayName: string;
 };
 
-declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Render as the single child element (Radix Slot) instead of a `<div>` — e.g.
+     *  `<Card asChild><a href="/reports/q3">…</a></Card>`. When that element is an `<a href>` or a `<button>`,
+     *  the card takes the interactive states; anything else stays static. */
+    asChild?: boolean;
+}
+declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
@@ -212,20 +261,63 @@ declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttribu
 declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
- * Checkbox — reconciled 1:1 with the KinetixUI design source, node 54863:483.
- * 18px box, 4px radius, 2px border. Unchecked border = `--input`; checked /
- * indeterminate fill = `--primary`. Focus = 2px `--ring` offset. `aria-invalid`
- * paints the box (and the composed label/helper) with `--destructive`.
+ * Checkbox — from the KinetixUI design source, node 54863:483: 18px box, 4px radius, 2px border, checked /
+ * indeterminate fill = `--action`, focus = 2px `--ring` offset.
+ *
+ * It follows the selection-control state contract (TOKENS.md, "Selection controls"):
+ *
+ *   rest      unchecked boundary `--muted-foreground`, not `--input`. The box is the only thing that says a
+ *             checkbox is there, so its edge must clear SC 1.4.11's 3:1 (`--input` is 2.2:1 light / 2.7:1
+ *             dark — a tracked exception for field outlines, where the field's fill and label carry it).
+ *   hover     a pointer that can hover: a `--foreground` state layer at 8% around the box, and the unchecked
+ *             edge darkens to `--foreground`; checked fills step to `--action`/90
+ *   pressed   the state layer deepens to 14%; checked fills to `--action`/85
+ *   checked   `--action` fill AND a glyph — shape, not only colour
+ *   invalid   `aria-invalid="true"` → `--destructive` edge (and fill when checked); the field's error text
+ *             is the non-colour cue
+ *   focus     the 2px offset ring, `!important` so no hover or pressed layer can cover it
+ *   disabled  `--opacity-disabled`, and the hover/pressed layers are keyed on `:enabled`, so it never answers
+ *
+ * Motion: colour and box-shadow over `duration-instant` (100ms, the press/toggle step) with `ease-standard`.
+ * The checked state itself does not animate. Reduced motion collapses the transition (the library floor in
+ * tailwind.config.ts) and lands on the same end state.
  */
 declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const Collapsible: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const CollapsibleTrigger: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const CollapsibleContent: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * The disclosure transition, which this component shipped without.
+ *
+ * Collapsible was a bare re-export: three primitives passed through untouched. Its content appeared
+ * and vanished in a single frame while `Accordion` — the same disclosure gesture on a sibling Radix
+ * primitive — animated its height. Measured before this change, the content went 0px to 84px with no
+ * animation at all, against the accordion's 0px → 24.64px → 36px over 200ms.
+ *
+ * Disclosure is the case where motion carries meaning rather than decorating it: the content growing
+ * out of the trigger is what says it belongs to the thing you just pressed, and where it will go when
+ * you press it again. Appearing instantly makes the page look like it was replaced instead.
+ *
+ * `overflow-hidden` is load-bearing, not cosmetic — the height animation clips its content as it
+ * runs, and without it the text is laid out at full height from the first frame and simply spills
+ * out of the collapsing box.
+ *
+ * Reduced motion needs nothing here. The package's base layer collapses `animation-duration` for
+ * everything it ships, and the content still lands at its full height because the keyframe's end
+ * state is unchanged — proven in both directions by `scripts/motion.mjs`.
+ *
+ * Wrapping the primitive rather than re-exporting it adds a `className` that merges with the
+ * caller's, which is the convention every other component here follows. The props, the ref and the
+ * data attributes are the primitive's own, so nothing a consumer passes today behaves differently.
+ */
+declare const CollapsibleContent: React$1.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogPortal: {
+    ({ container, ...props }: DialogPrimitive.DialogPortalProps): React$1.JSX.Element | null;
+    displayName: string;
+};
 declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -243,7 +335,10 @@ declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPr
 declare const DropdownMenu: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuPortal: React$1.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuPortal: {
+    ({ container, ...props }: DropdownMenuPrimitive.DropdownMenuPortalProps): React$1.JSX.Element | null;
+    displayName: string;
+};
 declare const DropdownMenuSub: React$1.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
 declare const DropdownMenuRadioGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -305,9 +400,13 @@ declare const PopoverContent: React$1.ForwardRefExoticComponent<Omit<PopoverPrim
 declare const Progress: React$1.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
- * RadioGroup — reconciled 1:1 with the KinetixUI design source, node 54863:536.
- * 18px circle, 2px border. Unchecked border = `--input`; checked border + dot =
- * `--primary`. Focus = 2px `--ring` offset. `aria-invalid` → `--destructive`.
+ * RadioGroup — from the KinetixUI design source, node 54863:536: 18px circle, 2px border, checked border +
+ * dot = `--action`, focus = 2px `--ring` offset.
+ *
+ * Each item follows the selection-control state contract (TOKENS.md, "Selection controls"), exactly as
+ * Checkbox does: a `--muted-foreground` unchecked edge that clears 3:1, an 8% `--foreground` state layer on
+ * hover (14% pressed), a dot as the shape cue for checked, `aria-invalid="true"` → `--destructive` edge and
+ * dot, a focus ring no other layer can cover, and no response at all while disabled.
  */
 declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
@@ -315,11 +414,6 @@ declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupP
 declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
-/**
- * Select — reconciled 1:1 with the KinetixUI design source, node 54855:13882.
- * The trigger mirrors Input: `rounded-sm`, `border-input`, `--spacing-3` pad,
- * Body Medium text, a soft `--shadow-focus` glow, `--destructive` on aria-invalid.
- */
 declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
@@ -334,7 +428,10 @@ declare const Separator: React$1.ForwardRefExoticComponent<Omit<SeparatorPrimiti
 declare const Sheet: React$1.FC<DialogPrimitive.DialogProps>;
 declare const SheetTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
+declare const SheetPortal: {
+    ({ container, ...props }: DialogPrimitive.DialogPortalProps): React$1.JSX.Element | null;
+    displayName: string;
+};
 declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
     side?: "bottom" | "left" | "right" | "top" | null | undefined;
@@ -395,9 +492,14 @@ type ToasterProps = React.ComponentProps<typeof Toaster$1>;
 declare function Toaster({ theme, ...props }: ToasterProps): React$1.JSX.Element;
 
 /**
- * Switch — reconciled 1:1 with the KinetixUI design source, node 54855:13984.
- * 48×24 pill track. Off = `--tertiary` (#b0b0b0), on = `--primary`. 20px
- * `--background` thumb, travels 24px. Focus = 2px `--ring` offset.
+ * Switch — from the KinetixUI design source, node 54855:13984: 48×24 pill track, off = `--tertiary`, on =
+ * `--action`, 20px `--background` thumb that travels 24px, focus = 2px `--ring` offset.
+ *
+ * It follows the selection-control state contract (TOKENS.md, "Selection controls"): the same 8% / 14%
+ * `--foreground` state layer as Checkbox and Radio on hover and press, the on track steps to `--action`/90
+ * under the pointer, the thumb's position is the shape cue for on/off, the focus ring cannot be covered by
+ * any other layer, and a disabled switch does not answer the pointer. The off track stays `--tertiary`
+ * (2.6:1, a tracked SC 1.4.11 exception in check-contrast.mjs): the thumb and `aria-checked` carry it.
  */
 declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -437,6 +539,26 @@ declare const TableHead: React$1.ForwardRefExoticComponent<React$1.ThHTMLAttribu
 declare const TableCell: React$1.ForwardRefExoticComponent<React$1.TdHTMLAttributes<HTMLTableCellElement> & React$1.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLTableCaptionElement> & React$1.RefAttributes<HTMLTableCaptionElement>>;
 
+/**
+ * Tabs — one navigation group, following the navigation state contract (TOKENS.md, "Text entry and
+ * navigation") and the surface model:
+ *
+ *   list       an inset well, `--surface-grouped` — below a Card in both themes; at large text sizes the tabs
+ *              wrap inside it rather than running off the page
+ *   rest       unselected tabs in `--muted-foreground`
+ *   hover      an unselected tab gets the selection controls' `--foreground` state layer at 8% and
+ *              `--foreground` text
+ *   selected   a small raised surface on the well — `--card`, the Card's half-strength `--border` edge and
+ *              `sm` depth — and `--foreground` text, so it is surface + edge + depth, never colour alone. The
+ *              list used to be `--muted` with a `--background` tab, which in dark mode put the selected tab
+ *              BELOW its well (measured: tab L 0.0031, well L 0.0167) — the inversion SegmentedControl had
+ *   focus      the 2px `--ring`, `!important` so the selected tab's edge cannot cover it; the selected
+ *              surface stays under it
+ *   disabled   `--opacity-disabled`, inert
+ *
+ * There is no pressed state: Radix selects a tab on pointer-down, so pressing IS selecting.
+ * Motion: colour, background and box-shadow over `duration-fast` with `ease-standard`; nothing moves.
+ */
 declare const Tabs: React$1.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
@@ -630,7 +752,10 @@ declare const CommandShortcut: {
 declare const ContextMenu: React$1.FC<ContextMenuPrimitive.ContextMenuProps>;
 declare const ContextMenuTrigger: React$1.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React$1.RefAttributes<HTMLSpanElement>>;
 declare const ContextMenuGroup: React$1.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
-declare const ContextMenuPortal: React$1.FC<ContextMenuPrimitive.ContextMenuPortalProps>;
+declare const ContextMenuPortal: {
+    ({ container, ...props }: ContextMenuPrimitive.ContextMenuPortalProps): React$1.JSX.Element | null;
+    displayName: string;
+};
 declare const ContextMenuSub: React$1.FC<ContextMenuPrimitive.ContextMenuSubProps>;
 declare const ContextMenuRadioGroup: React$1.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const ContextMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
@@ -683,7 +808,10 @@ declare const Drawer: {
     displayName: string;
 };
 declare const DrawerTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
-declare const DrawerPortal: typeof vaul.Portal;
+declare const DrawerPortal: {
+    ({ container, ...props }: DialogPrimitive.DialogPortalProps): React$1.JSX.Element | null;
+    displayName: string;
+};
 declare const DrawerClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const DrawerOverlay: React$1.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const DrawerContent: React$1.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -745,6 +873,18 @@ declare const FormMessage: React$1.ForwardRefExoticComponent<React$1.HTMLAttribu
  * source's "Fixed Add-on" pattern. Border / focus glow / invalid state apply to
  * the whole group.
  *
+ * The shell follows the text-entry state contract (TOKENS.md, "Composite fields"): it is ONE field, so it
+ * carries the field's edge, hover, focus, invalid, read-only and disabled states, read from the input inside
+ * it. Add-ons draw no border of their own except an `InputGroupButton`'s quiet internal divider.
+ *
+ *   rest       edge `--muted-foreground` at 80% (3:1 on a card; `--input` was 2.2:1)
+ *   hover      the edge steps to full `--muted-foreground` — never over focus, invalid, read-only or disabled
+ *   focus      the INPUT focused → `--action` edge + `--shadow-focus` on the shell. An add-on button focused
+ *              → that button's own inset ring, and the shell stays at rest: the ring says which part has focus
+ *   invalid    `aria-invalid="true"` on the input → `--destructive` edge, kept under the pointer and focus
+ *   read-only  `readonly` on the input → the inset `--muted` fill
+ *   disabled   a disabled input → `--opacity-disabled`, inert
+ *
  * <InputGroup>
  *   <InputGroupText>https://</InputGroupText>
  *   <InputGroupInput placeholder="kinetixui.com" />
@@ -801,7 +941,10 @@ declare const PasswordInput: React$1.ForwardRefExoticComponent<Omit<React$1.Inpu
 
 declare const MenubarMenu: (props: React$1.ComponentProps<typeof MenubarPrimitive.Menu>) => React$1.JSX.Element;
 declare const MenubarGroup: (props: React$1.ComponentProps<typeof MenubarPrimitive.Group>) => React$1.JSX.Element;
-declare const MenubarPortal: (props: React$1.ComponentProps<typeof MenubarPrimitive.Portal>) => React$1.JSX.Element;
+declare const MenubarPortal: {
+    ({ container, ...props }: MenubarPrimitive.MenubarPortalProps): React$1.JSX.Element | null;
+    displayName: string;
+};
 declare const MenubarSub: (props: React$1.ComponentProps<typeof MenubarPrimitive.Sub>) => React$1.JSX.Element;
 declare const MenubarRadioGroup: (props: React$1.ComponentProps<typeof MenubarPrimitive.RadioGroup>) => React$1.JSX.Element;
 declare const Menubar: React$1.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -948,6 +1091,12 @@ declare const informVariants: (props?: ({
 interface InformProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof informVariants> {
     hideIcon?: boolean;
     onDismiss?: () => void;
+    /**
+     * Replaces the default dismiss mark (lucide's `X`) with your own icon — any icon library or SVG.
+     * The button keeps its accessible name ("Dismiss") and sizes any SVG inside it to 14px, so the icon
+     * needs no size, colour or aria attributes of its own. See /docs/icons.
+     */
+    dismissIcon?: React$1.ReactNode;
     /** optional CTA rendered below the message */
     action?: {
         label: React$1.ReactNode;
@@ -1189,9 +1338,19 @@ declare const Metric: React$1.ForwardRefExoticComponent<MetricProps & React$1.Re
 
 /**
  * NumberInput — a numeric field with increment / decrement controls.
- * The wrapper shows `--shadow-focus` on `focus-within`; each stepper also
- * draws its own `--ring` inset outline on `:focus-visible` so keyboard users
- * can tell which control is focused.
+ *
+ * The wrapper is ONE field and follows the text-entry state contract (TOKENS.md, "Composite fields"); the
+ * steppers sit inside its edge, separated by quiet internal dividers rather than borders of their own.
+ *
+ *   rest       edge `--muted-foreground` at 80% (3:1 on a card; `--input` was 2.2:1)
+ *   hover      the edge steps to full `--muted-foreground` — never over focus, invalid, read-only or disabled
+ *   focus      the INPUT focused → `--action` edge + `--shadow-focus` on the wrapper. A stepper focused → its
+ *              own inset `--ring`, and the wrapper stays at rest, so the ring says which part has focus
+ *   invalid    `aria-invalid="true"` (passed through to the input) → `--destructive` edge, kept under the
+ *              pointer and focus
+ *   read-only  `readOnly` → the inset `--muted` fill, and the steppers are disabled: a read-only value is
+ *              not one a button may change either
+ *   disabled   `--opacity-disabled`, inert
  */
 interface NumberInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange"> {
     value?: number;
@@ -1305,6 +1464,12 @@ declare const ButtonGroupText: React$1.ForwardRefExoticComponent<React$1.HTMLAtt
  * Matches Input's `inputVariants` styling 1:1 so the two are drop-in
  * interchangeable in a Field. Gap-fill addition (not in the original
  * Figma source) — matches the shadcn/ui Native Select API shape.
+ *
+ * Same text-entry state contract as Input (TOKENS.md, "Text entry and navigation") — rest edge, hover,
+ * focus, invalid, disabled — minus read-only, which `<select>` does not have. Its placeholder is the
+ * empty-valued option: while it is the selection the field's text is `--muted-foreground`, so an unanswered
+ * select reads as unanswered next to a filled one (it used to render in the value's colour). The options in
+ * the open picker keep `--foreground`.
  */
 declare const nativeSelectVariants: (props?: ({
     state?: "Default" | "Focus" | "Disabled" | "Error" | null | undefined;
@@ -1353,6 +1518,12 @@ declare const bannerVariants: (props?: ({
 interface BannerProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof bannerVariants> {
     hideIcon?: boolean;
     onDismiss?: () => void;
+    /**
+     * Replaces the default dismiss mark (lucide's `X`) with your own icon — any icon library or SVG.
+     * The button keeps its accessible name ("Dismiss") and sizes any SVG inside it to 14px, so the icon
+     * needs no size, colour or aria attributes of its own. See /docs/icons.
+     */
+    dismissIcon?: React$1.ReactNode;
     /** optional CTA rendered inline after the message */
     action?: {
         label: React$1.ReactNode;
@@ -1370,6 +1541,16 @@ declare const Banner: React$1.ForwardRefExoticComponent<BannerProps & React$1.Re
  * is fixed, not exposed — a segmented control that could go fully
  * unselected or multi-select isn't the pattern. Gap-fill addition (not in
  * the original Figma source).
+ *
+ * Surfaces follow the surface model (TOKENS.md): the track is an inset well, `--surface-grouped`, and the
+ * chosen segment is a small raised surface on it — `--card`, the Card's half-strength `--border` edge and
+ * `sm` depth. The track used to be `--muted` with a `--background` segment, which in dark mode put the
+ * chosen segment BELOW its track (`--background` is the darkest surface), so it read as a hole.
+ *
+ * States (TOKENS.md, "Selection controls"): an unchosen segment answers the pointer with the same
+ * `--foreground` state layer the other selection controls use (8% hover, 14% pressed) and `--foreground`
+ * text; chosen is surface + edge + depth + `--foreground` text, so it is never colour alone; focus is the
+ * ring; disabled is inert.
  */
 type SegmentedControlProps = Omit<ToggleGroupPrimitive.ToggleGroupSingleProps, "type">;
 declare const SegmentedControl: React$1.ForwardRefExoticComponent<SegmentedControlProps & React$1.RefAttributes<HTMLDivElement>>;
@@ -1845,4 +2026,4 @@ declare const MarkdownEditor: React$1.ForwardRefExoticComponent<MarkdownEditorPr
 /** Merges Tailwind class names, resolving conflicts (clsx + tailwind-merge). */
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBar, AppBarActions, AppBarBrand, AppBarLink, type AppBarLinkProps, AppBarNav, AspectRatio, AudioPlayer, type AudioPlayerProps, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, Banner, type BannerProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, type CircularProgressProps, CodeBlock, type CodeBlockFile, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, type ColorPickerProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparisonSlider, type ComparisonSliderProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, type DataGridColumn, type DataGridProps, type DataGridRange, type DataGridSelection, DataTable, DatePicker, type DatePickerProps, DescriptionList, DescriptionListItem, type DescriptionListItemProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffViewer, type DiffViewerProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, EmptyTitle, Fab, type FabProps, Field, FieldControl, FieldDescription, FieldLabel, FieldMessage, FileUpload, FileUploadItem, type FileUploadItemProps, type FileUploadProps, Footer, FooterBottom, FooterColumn, type FooterColumnProps, FooterLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Image, type ImageProps, Inform, type InformProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, JsonViewer, type JsonViewerProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, KinetixDirectionProvider, type KinetixDirectionProviderProps, Label, List, ListItem, type ListItemProps, MarkdownEditor, type MarkdownEditorProps, Marquee, type MarqueeProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBubble, type MessageBubbleProps, Metric, type MetricProps, Modal, type ModalProps, type ModalType, MultiSelect, type MultiSelectOption, type MultiSelectProps, NativeSelect, NativeSelectOptGroup, type NativeSelectOptGroupProps, NativeSelectOption, type NativeSelectOptionProps, type NativeSelectProps, NavigationBar, type NavigationBarProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotificationCenter, NotificationCenterContent, type NotificationCenterContentProps, NotificationCenterTrigger, type NotificationCenterTriggerProps, NotificationItem, type NotificationItemProps, NumberInput, type NumberInputProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Quote, type QuoteProps, RadioGroup, RadioGroupItem, Rating, type RatingProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SegmentedControl, SegmentedControlItem, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarProvider, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, type SpinnerProps, Stepper, type StepperProps, type StepperStep, Switch, TabBar, TabBarItem, type TabBarItemProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, Toaster, type TocItem, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, type TourProps, type TourStep, TreeItem, type TreeItemProps, TreeView, type TreeViewProps, TypingIndicator, type UploadFile, VirtualList, type VirtualListProps, badgeVariants, bannerVariants, buttonVariants, cn, emptyMediaVariants, fabVariants, formatBytes, informVariants, inputVariants, messageVariants, nativeSelectVariants, navigationMenuTriggerStyle, spinnerVariants, tagVariants, textareaVariants, toggleVariants, useAppBar, useFormField, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBar, AppBarActions, AppBarBrand, AppBarLink, type AppBarLinkProps, AppBarNav, AspectRatio, AudioPlayer, type AudioPlayerProps, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, Banner, type BannerProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, ButtonGroupText, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, type CircularProgressProps, CodeBlock, type CodeBlockFile, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, type ColorPickerProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ComparisonSlider, type ComparisonSliderProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, type DataGridColumn, type DataGridProps, type DataGridRange, type DataGridSelection, DataTable, DatePicker, type DatePickerProps, DescriptionList, DescriptionListItem, type DescriptionListItemProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffViewer, type DiffViewerProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, EmptyTitle, Fab, type FabProps, Field, FieldControl, FieldDescription, FieldLabel, FieldMessage, FileUpload, FileUploadItem, type FileUploadItemProps, type FileUploadProps, Footer, FooterBottom, FooterColumn, type FooterColumnProps, FooterLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Image, type ImageProps, Inform, type InformProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, JsonViewer, type JsonViewerProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, KinetixDirectionProvider, type KinetixDirectionProviderProps, Label, List, ListItem, type ListItemProps, MarkdownEditor, type MarkdownEditorProps, Marquee, type MarqueeProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBubble, type MessageBubbleProps, Metric, type MetricProps, Modal, type ModalProps, type ModalType, MultiSelect, type MultiSelectOption, type MultiSelectProps, NativeSelect, NativeSelectOptGroup, type NativeSelectOptGroupProps, NativeSelectOption, type NativeSelectOptionProps, type NativeSelectProps, NavigationBar, type NavigationBarProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotificationCenter, NotificationCenterContent, type NotificationCenterContentProps, NotificationCenterTrigger, type NotificationCenterTriggerProps, NotificationItem, type NotificationItemProps, NumberInput, type NumberInputProps, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Quote, type QuoteProps, RadioGroup, RadioGroupItem, Rating, type RatingProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SegmentedControl, SegmentedControlItem, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarProvider, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, type SpinnerProps, Stepper, type StepperProps, type StepperStep, Switch, TabBar, TabBarItem, type TabBarItemProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, Toaster, type TocItem, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tour, type TourProps, type TourStep, TreeItem, type TreeItemProps, TreeView, type TreeViewProps, TypingIndicator, type UploadFile, VirtualList, type VirtualListProps, badgeVariants, bannerVariants, buttonVariants, cn, emptyMediaVariants, fabVariants, formatBytes, informVariants, inputVariants, messageVariants, nativeSelectVariants, navigationMenuTriggerStyle, spinnerVariants, tagVariants, textareaVariants, toggleVariants, useAppBar, useFormField, useKinetixPortalContainer, useSidebar };