@madebywild/wvk 0.0.1 → 0.1.0

package/dist/index.d.ts

@@ -1,17 +1,38 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 import { SVGProps } from 'react';
+import { HTMLMotionProps } from 'framer-motion';
+export { AnimatePresence, Variants, motion } from 'framer-motion';
 import { VariantProps } from 'class-variance-authority';
+import { useRender } from '@base-ui-components/react/use-render';
+import * as _base_ui_components_react_checkbox from '@base-ui-components/react/checkbox';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { W as WireframeIcons } from './index-CQDaCDUc.js';
+import * as _base_ui_components_react_menu from '@base-ui-components/react/menu';
+import { Menu as Menu$1 } from '@base-ui-components/react/menu';
+import * as _base_ui_components_react_meter from '@base-ui-components/react/meter';
+import * as _base_ui_components_react_progress from '@base-ui-components/react/progress';
+import * as _base_ui_components_react_radio from '@base-ui-components/react/radio';
+import * as _base_ui_components_react_radio_group from '@base-ui-components/react/radio-group';
+import * as _base_ui_components_react_toggle from '@base-ui-components/react/toggle';
+import { Toggle } from '@base-ui-components/react/toggle';
+import * as _base_ui_components_react_select from '@base-ui-components/react/select';
+import * as _base_ui_components_react_tabs from '@base-ui-components/react/tabs';
+import { Tabs as Tabs$1 } from '@base-ui-components/react/tabs';
+import * as _base_ui_components_react_switch from '@base-ui-components/react/switch';
+import * as _base_ui_components_react_tooltip from '@base-ui-components/react/tooltip';
+import { Tooltip as Tooltip$1 } from '@base-ui-components/react/tooltip';
 import { ClassValue } from 'clsx';
 
-declare const Alert: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+declare const alertVariants: (props?: ({
     variant?: "info" | "warning" | "error" | "success" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AlertProps = Omit<HTMLMotionProps<"div">, "children"> & VariantProps<typeof alertVariants> & {
     title?: string;
     icon?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
+    children?: React.ReactNode;
+};
+declare const Alert: React.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 type BottomTabBarProps = {
     value: string;
@@ -42,31 +63,36 @@ declare const BottomTabBarItem: React.ForwardRefExoticComponent<Omit<Omit<React.
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "primaryLight" | "primaryOutline" | "secondaryOutline" | "ghost" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
+    iconOnly?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const Button: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "primary" | "secondary" | "primaryLight" | "primaryOutline" | "secondaryOutline" | "ghost" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+type ButtonBaseProps = React.ComponentPropsWithoutRef<"button"> & Omit<VariantProps<typeof buttonVariants>, "iconOnly"> & {
     /**
-     * When true, renders the child element as the button (via Radix Slot).
-     * `leadingIcon` and `trailingIcon` are ignored when `asChild` is set —
-     * the child is rendered as-is without icon wrappers.
+     * Replace the rendered element with a custom one (e.g. an `<a>` from a router).
+     * Mirrors Base UI's `render` prop — pass either a React element to clone, or a
+     * callback `(props, state) => ReactElement`. `leadingIcon` and `trailingIcon`
+     * are ignored when `render` is provided so the consumer keeps full control.
      */
-    asChild?: boolean;
-    /** Optional icon before the label (e.g. from `../../icons`). Ignored when `asChild` is true. */
+    render?: useRender.RenderProp;
+    /** Optional icon before the label (e.g. from `../../icons`). Ignored when `render` is provided or `iconOnly` is true. */
     leadingIcon?: React.ReactNode;
-    /** Optional icon after the label. Ignored when `asChild` is true. */
+    /** Optional icon after the label. Ignored when `render` is provided or `iconOnly` is true. */
     trailingIcon?: React.ReactNode;
-} & React.RefAttributes<HTMLButtonElement>>;
+};
+type ButtonProps = (ButtonBaseProps & {
+    /** Render as a square icon-only button. `children` should be a single icon and `aria-label` is required for accessibility. */
+    iconOnly: true;
+    "aria-label": string;
+}) | (ButtonBaseProps & {
+    iconOnly?: false;
+});
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const checkboxFrameVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onChange" | "value" | "type"> & VariantProps<(props?: ({
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_components_react_checkbox.CheckboxRootProps & React.RefAttributes<HTMLElement>, "ref">, "render" | "onCheckedChange"> & VariantProps<(props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
-    checked?: boolean;
-    indeterminate?: boolean;
     onCheckedChange?: (checked: boolean) => void;
 } & React.RefAttributes<HTMLButtonElement>>;
 
@@ -123,7 +149,7 @@ declare function FieldGroup({ fieldLabel, label, labelRequired, labelOptional, l
 
 type TagLeadingIconName = keyof typeof WireframeIcons;
 /** Sorted export names from `../icons` for pickers and docs. */
-declare const TAG_LEADING_ICON_NAMES: ("Accessibility" | "Accessibility2" | "Ai" | "Android" | "Apple" | "ArrowBack" | "ArrowDown" | "ArrowForward" | "ArrowLeft" | "ArrowLeftRight" | "ArrowRedo" | "ArrowRight" | "ArrowUndo" | "ArrowUp" | "ArrowUpDown" | "ArrowUpLeft" | "ArrowUpRight" | "Atom" | "Attachment" | "BarChart" | "Battery" | "Bell" | "Book" | "Bookmark" | "BookmarkActive" | "Calendar" | "Camera" | "CaretDown" | "CaretLeft" | "CaretRight" | "CaretUp" | "CaretUpDown" | "Cart" | "Cell" | "ChatBubble" | "Checkmark" | "ChevronDown" | "ChevronLeft" | "ChevronRight" | "ChevronUp" | "ChevronUpDown" | "Clipboard" | "Clock" | "Close" | "Cloud" | "CloudySun" | "Code" | "Comparison01" | "Comparison02" | "Compass" | "Create" | "CreditCard" | "CurrencyDollarSign" | "CurrencyEuroSign" | "Database" | "Desktop" | "Download" | "DragIndicator" | "Dribbble" | "Edit" | "Error" | "Execute" | "Exit" | "Expand" | "Eye" | "EyeActive" | "Facebook" | "File" | "Filter01" | "Filter02" | "Flag" | "Flash" | "FloatingWheel" | "Folder" | "Food" | "Globe" | "Google" | "Gps" | "Grid" | "Hashtag" | "Headphones" | "Heart" | "HeartActive" | "Home" | "Hourglass" | "Image" | "Inbox" | "Info" | "Instagram" | "Interface" | "InterfaceFilled" | "Language" | "Layers" | "LayoutAlign1Left" | "LayoutAlign2CenterHorizontal" | "LayoutAlign3Right" | "LayoutAlign4Top" | "LayoutAlign5CenterVertical" | "LayoutAlign6Bottom" | "LetterStamp" | "LightBulb" | "Link" | "Linkedin" | "List" | "Loading" | "Lock" | "LockOpen" | "MagicWand" | "MagnifyingGlass" | "Mail" | "Map" | "Maximize1" | "Maximize2" | "Menu" | "Minimize" | "Minus" | "Mobile" | "Mobile2" | "Mobile3" | "Monitoring" | "Moon" | "MoreHorizontal" | "MoreVertical" | "Music" | "Package" | "Pause" | "Phone" | "PieChart" | "Pin" | "Pinterest" | "Play" | "Plus" | "Puzzle" | "Question" | "Rain" | "Receipt" | "Refresh" | "Reply" | "Robot" | "Rocket" | "ScanCode" | "Settings" | "Share" | "Shuffle" | "SmileyHappy" | "SmileyNeutral" | "SmileySad" | "Soundcloud" | "Spotify" | "Star" | "StarActive" | "Stop" | "Stopwatch" | "Sun" | "Tag" | "Target" | "TextAlignCenter" | "TextAlignLeft" | "TextAlignRight" | "ThumbsDown" | "ThumbsUp" | "Tiktok" | "TrashBin" | "Twitter" | "User" | "Video" | "VideoCamera" | "Voice" | "VolumeDown" | "VolumeOff" | "VolumeUp" | "Warning" | "Watch" | "Wayfinding" | "Wc" | "Whatsapp" | "Wifi" | "Window" | "WorkBag" | "XTwitter" | "Youtube" | "ZoomMinus" | "ZoomPlus")[];
+declare const TAG_LEADING_ICON_NAMES: ("Menu" | "Window" | "Accessibility" | "Accessibility2" | "Ai" | "Android" | "Apple" | "ArrowBack" | "ArrowDown" | "ArrowForward" | "ArrowLeft" | "ArrowLeftRight" | "ArrowRedo" | "ArrowRight" | "ArrowUndo" | "ArrowUp" | "ArrowUpDown" | "ArrowUpLeft" | "ArrowUpRight" | "Atom" | "Attachment" | "BarChart" | "Battery" | "Bell" | "Book" | "Bookmark" | "BookmarkActive" | "Calendar" | "Camera" | "CaretDown" | "CaretLeft" | "CaretRight" | "CaretUp" | "CaretUpDown" | "Cart" | "Cell" | "ChatBubble" | "Checkmark" | "ChevronDown" | "ChevronLeft" | "ChevronRight" | "ChevronUp" | "ChevronUpDown" | "Clipboard" | "Clock" | "Close" | "Cloud" | "CloudySun" | "Code" | "Comparison01" | "Comparison02" | "Compass" | "Create" | "CreditCard" | "CurrencyDollarSign" | "CurrencyEuroSign" | "Database" | "Desktop" | "Download" | "DragIndicator" | "Dribbble" | "Edit" | "Error" | "Execute" | "Exit" | "Expand" | "Eye" | "EyeActive" | "Facebook" | "File" | "Filter01" | "Filter02" | "Flag" | "Flash" | "FloatingWheel" | "Folder" | "Food" | "Globe" | "Google" | "Gps" | "Grid" | "Hashtag" | "Headphones" | "Heart" | "HeartActive" | "Home" | "Hourglass" | "Image" | "Inbox" | "Info" | "Instagram" | "Interface" | "InterfaceFilled" | "Language" | "Layers" | "LayoutAlign1Left" | "LayoutAlign2CenterHorizontal" | "LayoutAlign3Right" | "LayoutAlign4Top" | "LayoutAlign5CenterVertical" | "LayoutAlign6Bottom" | "LetterStamp" | "LightBulb" | "Link" | "Linkedin" | "List" | "Loading" | "Lock" | "LockOpen" | "MagicWand" | "MagnifyingGlass" | "Mail" | "Map" | "Maximize1" | "Maximize2" | "Minimize" | "Minus" | "Mobile" | "Mobile2" | "Mobile3" | "Monitoring" | "Moon" | "MoreHorizontal" | "MoreVertical" | "Music" | "Package" | "Pause" | "Phone" | "PieChart" | "Pin" | "Pinterest" | "Play" | "Plus" | "Puzzle" | "Question" | "Rain" | "Receipt" | "Refresh" | "Reply" | "Robot" | "Rocket" | "ScanCode" | "Settings" | "Share" | "Shuffle" | "SmileyHappy" | "SmileyNeutral" | "SmileySad" | "Soundcloud" | "Spotify" | "Star" | "StarActive" | "Stop" | "Stopwatch" | "Sun" | "Tag" | "Target" | "TextAlignCenter" | "TextAlignLeft" | "TextAlignRight" | "ThumbsDown" | "ThumbsUp" | "Tiktok" | "TrashBin" | "Twitter" | "User" | "Video" | "VideoCamera" | "Voice" | "VolumeDown" | "VolumeOff" | "VolumeUp" | "Warning" | "Watch" | "Wayfinding" | "Wc" | "Whatsapp" | "Wifi" | "WorkBag" | "XTwitter" | "Youtube" | "ZoomMinus" | "ZoomPlus")[];
 type TagLeadingIconProps = {
     name: TagLeadingIconName;
 } & SVGProps<SVGSVGElement>;
@@ -162,7 +188,14 @@ declare const linkVariants: (props?: ({
 declare const Link: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & VariantProps<(props?: ({
     theme?: "dark" | "light" | "medium" | null | undefined;
     size?: "body" | "caption" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLAnchorElement>>;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    /**
+     * Whether the underline is rendered by default.
+     * - `false` (default): underline animates in on hover.
+     * - `true`: underline is shown initially and animates out on hover.
+     */
+    underlined?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
 
 declare const listItemVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
@@ -208,6 +241,36 @@ interface VideoControlsProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const VideoControls: React.ForwardRefExoticComponent<VideoControlsProps & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Compound menu built on Base UI's `Menu` primitives. Use this when you need a popover-style
+ * dropdown with rich item content (icons, dividers, submenus) — for a real form `<select>`,
+ * use {@link Select} instead.
+ *
+ * Example:
+ * ```tsx
+ * <Menu>
+ *   <MenuTrigger render={<Button variant="ghost" />}>Actions</MenuTrigger>
+ *   <MenuPopup>
+ *     <MenuItem onClick={onCopy}>Copy</MenuItem>
+ *     <MenuItem onClick={onDelete}>Delete</MenuItem>
+ *   </MenuPopup>
+ * </Menu>
+ * ```
+ */
+declare const Menu: typeof Menu$1.Root;
+declare const MenuTrigger: Menu$1.Trigger;
+/** Combines Portal + Positioner + Popup with kit styling defaults. */
+declare const MenuPopup: React.ForwardRefExoticComponent<Omit<_base_ui_components_react_menu.MenuPopupProps & React.RefAttributes<Element>, "ref"> & {
+    /** Side (relative to the trigger) where the popup is placed. */
+    side?: "top" | "right" | "bottom" | "left";
+    /** Pixel gap between trigger and popup. */
+    sideOffset?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const MenuItem: React.ForwardRefExoticComponent<Omit<_base_ui_components_react_menu.MenuItemProps & React.RefAttributes<Element>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MenuGroup: React.ForwardRefExoticComponent<_base_ui_components_react_menu.MenuGroupProps & React.RefAttributes<Element>>;
+declare const MenuGroupLabel: React.ForwardRefExoticComponent<_base_ui_components_react_menu.MenuGroupLabelProps & React.RefAttributes<HTMLDivElement>>;
+
 declare const Pagination: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "role"> & VariantProps<(props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
@@ -216,7 +279,27 @@ declare const Pagination: React.ForwardRefExoticComponent<Omit<Omit<React.Detail
     onPageChange?: (page: number) => void;
 } & React.RefAttributes<HTMLDivElement>>;
 
-declare const ProgressBar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+/**
+ * Determinate (or indeterminate) task progress bar — built on Base UI Progress.
+ * Use this for "loading", "uploading", or any *task* whose completion you can describe.
+ * For showing a measurement within a known range (battery, disk usage, score), use {@link Meter}.
+ */
+declare const ProgressBar: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_components_react_progress.ProgressRootProps & React.RefAttributes<HTMLDivElement>, "ref">, "value"> & {
+    /**
+     * Progress value 0–100. Pass `null` for indeterminate (animated, unknown duration).
+     * @default 0
+     */
+    value?: number | null;
+} & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Static measurement within a known range — built on Base UI Meter.
+ * Use for battery level, disk usage, score, etc. For task progress, use {@link ProgressBar}.
+ */
+declare const Meter: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_components_react_meter.MeterRootProps & React.RefAttributes<HTMLDivElement>, "ref">, "value"> & {
+    /**
+     * Current value within `[min, max]`.
+     * @default 0
+     */
     value?: number;
 } & React.RefAttributes<HTMLDivElement>>;
 
@@ -231,6 +314,12 @@ declare const Radio: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTM
     /** Mirrored to `data-value` for grouping/lookup outside the component. */
     value?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_components_react_radio_group.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref">, "onValueChange"> & {
+    onValueChange?: (value: string) => void;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_components_react_radio.RadioRootProps & React.RefAttributes<HTMLElement>, "ref">, "render"> & VariantProps<(props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 
 declare const controlVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
@@ -245,7 +334,7 @@ type SegmentedControlProps = Omit<VariantProps<typeof controlVariants>, "widthMo
     /** Preferred change handler. Called whenever the selected segment changes. */
     onValueChange?: (value: string) => void;
     className?: string;
-    /** Passed to the root element (e.g. for `role="tablist"` labeling). */
+    /** Passed to the root element (e.g. for labelling the toggle group). */
     "aria-label"?: string;
     children: React.ReactNode;
 };
@@ -261,11 +350,11 @@ declare const SegmentedControl: React.ForwardRefExoticComponent<Omit<VariantProp
     /** Preferred change handler. Called whenever the selected segment changes. */
     onValueChange?: (value: string) => void;
     className?: string;
-    /** Passed to the root element (e.g. for `role="tablist"` labeling). */
+    /** Passed to the root element (e.g. for labelling the toggle group). */
     "aria-label"?: string;
     children: React.ReactNode;
 } & React.RefAttributes<HTMLDivElement>>;
-type SegmentedControlItemProps = Omit<React.ComponentPropsWithoutRef<"button">, "children"> & {
+type SegmentedControlItemProps = Omit<React.ComponentPropsWithoutRef<typeof Toggle>, "children" | "value"> & {
     value: string;
     /** Visible text; omit for icon-only segments (do not pass an empty string). */
     label?: string;
@@ -273,7 +362,7 @@ type SegmentedControlItemProps = Omit<React.ComponentPropsWithoutRef<"button">,
     icon?: React.ReactNode;
     iconPlacement?: "leading" | "trailing";
 };
-declare const SegmentedControlItem: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & {
+declare const SegmentedControlItem: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_components_react_toggle.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref">, "children" | "value"> & {
     value: string;
     /** Visible text; omit for icon-only segments (do not pass an empty string). */
     label?: string;
@@ -282,7 +371,7 @@ declare const SegmentedControlItem: React.ForwardRefExoticComponent<Omit<Omit<Re
     iconPlacement?: "leading" | "trailing";
 } & React.RefAttributes<HTMLButtonElement>>;
 /** Alias for {@link SegmentedControlItem} (same pattern as `TabsTrigger`). */
-declare const SegmentedControlTrigger: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & {
+declare const SegmentedControlTrigger: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_components_react_toggle.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref">, "children" | "value"> & {
     value: string;
     /** Visible text; omit for icon-only segments (do not pass an empty string). */
     label?: string;
@@ -293,24 +382,56 @@ declare const SegmentedControlTrigger: React.ForwardRefExoticComponent<Omit<Omit
 
 /**
  * Idle stroke via box-shadow (no layout shift). Active/focused = 2px input focus ring.
- * Native <select> focus is mirrored with onFocus/onBlur for reliable shell styling.
- *
- * The <select> is position:absolute inset-0 so the entire shell is clickable — padding
- * lives on the select, not the shell, otherwise clicks on padded areas hit the div.
+ * Mirrors {@link TextInput} so Select sits on the same shell baseline.
  */
 declare const selectShellVariants: (props?: ({
     inputStyle?: "border" | "solid" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const selectFieldVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const Select: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & VariantProps<(props?: ({
-    inputStyle?: "border" | "solid" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & FieldLabelSlotProps & {
+type SelectBaseProps = VariantProps<typeof selectShellVariants> & FieldLabelSlotProps & {
     placeholder?: string;
-} & React.RefAttributes<HTMLSelectElement>>;
+    /** Custom class for the trigger (the visible select shell). */
+    className?: string;
+    /** Aria-label for the trigger when there is no visible label. */
+    "aria-label"?: string;
+    /** Children should be `<SelectItem>` (and optional `<SelectGroup>` / `<SelectSeparator>`). */
+    children?: React.ReactNode;
+    disabled?: boolean;
+    id?: string;
+    /** Identifies the field when a form is submitted. */
+    name?: string;
+    /** Whether the user must choose a value. */
+    required?: boolean;
+    /** Whether the popup is open (controlled). */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+type SelectSingleProps = SelectBaseProps & {
+    multiple?: false;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+};
+type SelectMultipleProps = SelectBaseProps & {
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+type SelectProps = SelectSingleProps | SelectMultipleProps;
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_components_react_select.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref">, "children"> & {
+    /** Item label / content (visible text). */
+    children?: React.ReactNode;
+    /** Optional glyph rendered before the label. */
+    leadingIcon?: React.ReactNode;
+    /** Optional glyph rendered after the label (sits before the selection indicator in single-select mode). */
+    trailingIcon?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const SelectGroup: React.ForwardRefExoticComponent<_base_ui_components_react_select.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectGroupLabel: React.ForwardRefExoticComponent<Omit<_base_ui_components_react_select.SelectGroupLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 type SliderValue = number | [number, number];
 declare const Slider: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "defaultValue" | "onChange"> & {
@@ -318,6 +439,7 @@ declare const Slider: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHT
     onChange?: (value: SliderValue) => void;
     min?: number;
     max?: number;
+    step?: number;
     disabled?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 
@@ -345,23 +467,21 @@ declare const StarRating: React.ForwardRefExoticComponent<StarRatingProps & Reac
 declare const tabListVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type TabsProps = {
+type TabsProps = Omit<React.ComponentPropsWithoutRef<typeof Tabs$1.Root>, "value" | "defaultValue" | "onValueChange"> & {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     children: React.ReactNode;
-    className?: string;
 };
-declare function Tabs({ value: valueProp, defaultValue, onValueChange, children, className, }: TabsProps): react_jsx_runtime.JSX.Element;
-declare const TabList: React.ForwardRefExoticComponent<VariantProps<(props?: ({
+declare function Tabs({ value, defaultValue, onValueChange, className, children, ...rest }: TabsProps): react_jsx_runtime.JSX.Element;
+declare const TabList: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_components_react_tabs.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref">, "children"> & VariantProps<(props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** When true, each tab sizes to its label/icon; the list row remains full width. */
     autoWidth?: boolean;
     children: React.ReactNode;
-    className?: string;
 } & React.RefAttributes<HTMLDivElement>>;
-type TabProps = Omit<React.ComponentPropsWithoutRef<"button">, "children"> & {
+type TabProps = Omit<React.ComponentPropsWithoutRef<typeof Tabs$1.Tab>, "children" | "value"> & {
     /** Segment id; required when using controlled `Tabs`. */
     value?: string;
     /** Optional; use `children` for text if you prefer. */
@@ -369,11 +489,9 @@ type TabProps = Omit<React.ComponentPropsWithoutRef<"button">, "children"> & {
     /** Optional; omit for label-only triggers. */
     icon?: React.ReactNode;
     iconPlacement?: "leading" | "trailing";
-    /** When not using `Tabs` context, marks the selected tab. */
-    active?: boolean;
     children?: React.ReactNode;
 };
-declare const Tab: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & {
+declare const Tab: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_components_react_tabs.TabsTabProps & React.RefAttributes<Element>, "ref">, "children" | "value"> & {
     /** Segment id; required when using controlled `Tabs`. */
     value?: string;
     /** Optional; use `children` for text if you prefer. */
@@ -381,21 +499,20 @@ declare const Tab: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLP
     /** Optional; omit for label-only triggers. */
     icon?: React.ReactNode;
     iconPlacement?: "leading" | "trailing";
-    /** When not using `Tabs` context, marks the selected tab. */
-    active?: boolean;
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLButtonElement>>;
+declare const TabPanel: React.ForwardRefExoticComponent<_base_ui_components_react_tabs.TabsPanelProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabIndicator: React.ForwardRefExoticComponent<_base_ui_components_react_tabs.TabsIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
 /** Same component as {@link TabList}; matches common Radix-style naming. */
-declare const TabsList: React.ForwardRefExoticComponent<VariantProps<(props?: ({
+declare const TabsList: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_components_react_tabs.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref">, "children"> & VariantProps<(props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** When true, each tab sizes to its label/icon; the list row remains full width. */
     autoWidth?: boolean;
     children: React.ReactNode;
-    className?: string;
 } & React.RefAttributes<HTMLDivElement>>;
 /** Same component as {@link Tab}; matches common Radix-style naming. */
-declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & {
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_components_react_tabs.TabsTabProps & React.RefAttributes<Element>, "ref">, "children" | "value"> & {
     /** Segment id; required when using controlled `Tabs`. */
     value?: string;
     /** Optional; use `children` for text if you prefer. */
@@ -403,10 +520,10 @@ declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<React.Detai
     /** Optional; omit for label-only triggers. */
     icon?: React.ReactNode;
     iconPlacement?: "leading" | "trailing";
-    /** When not using `Tabs` context, marks the selected tab. */
-    active?: boolean;
     children?: React.ReactNode;
 } & React.RefAttributes<HTMLButtonElement>>;
+/** Same component as {@link TabPanel}; matches common Radix-style naming. */
+declare const TabsContent: React.ForwardRefExoticComponent<_base_ui_components_react_tabs.TabsPanelProps & React.RefAttributes<HTMLDivElement>>;
 
 /** Default tag / label glyph for the optional custom `icon` slot (uses `currentColor`). */
 declare function TagIconGlyph(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
@@ -481,35 +598,115 @@ declare const TextInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAtt
  */
 declare const toggleSwitchVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
-    checked?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const toggleThumbVariants: (props?: ({
-    checked?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const ToggleSwitch: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onChange" | "value" | "type"> & Omit<VariantProps<(props?: ({
+declare const toggleThumbVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const ToggleSwitch: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_components_react_switch.SwitchRootProps & React.RefAttributes<HTMLElement>, "ref">, "render" | "onCheckedChange"> & VariantProps<(props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
-    checked?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string>, "checked"> & {
-    checked?: boolean;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onCheckedChange?: (checked: boolean) => void;
 } & React.RefAttributes<HTMLButtonElement>>;
 
+declare const tooltipVariants: (props?: ({
+    theme?: "dark" | "light" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    direction?: "center" | "left" | "right" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Presentational tooltip box (no interaction). Use this when the tooltip's positioning is
+ * already handled by its container — for example, alongside a custom hover/focus group.
+ *
+ * For an interactive, floating tooltip with delay, focus, and collision handling, use the
+ * {@link TooltipPopup} compound (Base UI primitives).
+ */
 declare const Tooltip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<(props?: ({
     theme?: "dark" | "light" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     direction?: "center" | "left" | "right" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Optional `<TooltipProvider>` wraps a subtree to share hover-delay state across multiple
+ * tooltips so opening one lets siblings open without re-waiting.
+ */
+declare const TooltipProvider: React.FC<_base_ui_components_react_tooltip.TooltipProviderProps>;
+/**
+ * Interactive, floating tooltip compound built on Base UI primitives. Pass any element as
+ * `trigger` (it must be focusable to support keyboard users) and the tooltip body as
+ * `children`. The popup uses the kit's dark/light themes and arrow caret.
+ */
+type TooltipPopupProps = Omit<React.ComponentPropsWithoutRef<typeof Tooltip$1.Popup>, "children"> & VariantProps<typeof tooltipVariants> & {
+    /** Element that triggers the tooltip on hover/focus. Must be a single, focusable element. */
+    trigger: React.ReactElement<Record<string, unknown>>;
+    /** Tooltip content. */
+    children: React.ReactNode;
+    /** Side (relative to the trigger) where the popup is placed. */
+    side?: "top" | "right" | "bottom" | "left";
+    /** Pixel gap between trigger and popup. */
+    sideOffset?: number;
+};
+declare function TooltipPopup({ trigger, children, theme, size, side, sideOffset, className, ...rest }: TooltipPopupProps): react_jsx_runtime.JSX.Element;
+
+type WhimsyCursorProps = {
+    /** Rotation angle in degrees applied on hover (negative = left tilt). Defaults to -22. */
+    hoverRotateDeg?: number;
+};
+/**
+ * Replaces the native cursor with a DOM-rendered SVG that follows the pointer
+ * and tilts left with a small spring bounce when hovering interactive elements.
+ *
+ * Mount once near the root (e.g. inside ThemeProvider). It is a no-op on
+ * coarse-pointer devices and respects `prefers-reduced-motion`.
+ */
+declare function WhimsyCursor({ hoverRotateDeg, }?: WhimsyCursorProps): react_jsx_runtime.JSX.Element;
 
 type AppTheme = "light" | "dark";
+/**
+ * Cursor style variant.
+ * - `"default"` — the chunky kit signature pointer (with WhimsyCursor by default)
+ * - `"arrow"` — slim classic arrow; WhimsyCursor auto-suppresses to keep the
+ *   native arrow visible
+ */
+type CursorStyle = "default" | "arrow";
+/**
+ * Toggle for the auto-mounted {@link WhimsyCursor}:
+ * - `true` (default) mounts it with default options
+ * - `false` disables it
+ * - an object passes through as `WhimsyCursor` props (e.g. `{ hoverRotateDeg: -10 }`)
+ */
+type WhimsyCursorOption = boolean | WhimsyCursorProps;
 type ThemeContextValue = {
     theme: AppTheme;
     setTheme: (t: AppTheme) => void;
+    cursorStyle: CursorStyle;
+    setCursorStyle: (c: CursorStyle) => void;
 };
 declare const ThemeContext: React.Context<ThemeContextValue | null>;
-declare function ThemeProvider({ children }: {
+type ThemeProviderProps = {
     children: React.ReactNode;
-}): react_jsx_runtime.JSX.Element;
+    /**
+     * Initial cursor style. `"default"` (chunky kit pointer + WhimsyCursor) or
+     * `"arrow"` (slim arrow, no WhimsyCursor). Defaults to `"default"`.
+     *
+     * Persisted to localStorage under `wvk-cursor-style`; the persisted value
+     * wins on next mount. To make this stick across SSR without a flash, mirror
+     * the value in your anti-flash inline script.
+     */
+    cursorStyle?: CursorStyle;
+    /**
+     * Auto-mount the {@link WhimsyCursor} alongside the provider so consumers get
+     * the kit's signature pointer behaviour with no extra wiring.
+     *
+     * Defaults to `true`. Pass `false` to disable, or an object to forward props
+     * (e.g. `{ hoverRotateDeg: -10 }`). Auto-suppressed when `cursorStyle` is
+     * `"arrow"` so the slim native cursor stays visible.
+     */
+    whimsyCursor?: WhimsyCursorOption;
+};
+declare function ThemeProvider({ children, cursorStyle: cursorStyleProp, whimsyCursor, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 declare function useTheme(): ThemeContextValue;
+declare function useCursorStyle(): {
+    cursorStyle: CursorStyle;
+    setCursorStyle: (c: CursorStyle) => void;
+};
 
 declare function ThemeSwitcher(): react_jsx_runtime.JSX.Element | null;
 
@@ -535,12 +732,32 @@ declare const wvkIconSmClass = "size-[length:var(--wvk-icon-sm)] min-h-0 min-w-0
  */
 declare const wvkIconBoxLgClass = "inline-flex size-[length:var(--wvk-icon-lg)] shrink-0 items-center justify-center [&_svg]:size-full [&_svg]:aspect-square";
 
-declare const BUTTON_DECORATIVE_ICON_NAMES: readonly ["none", "plus", "chevronRight", "home", "search", "user", "settings"];
-type ButtonDecorativeIconName = (typeof BUTTON_DECORATIVE_ICON_NAMES)[number];
-declare function ButtonDecorativeIconGlyph({ name, size, className, }: {
-    name: Exclude<ButtonDecorativeIconName, "none">;
-    size: "sm" | "md" | "lg";
-    className?: string;
-}): react_jsx_runtime.JSX.Element | null;
+/** Wrap a list container with this to stagger children in. */
+declare const staggerContainer: {
+    hidden: {
+        opacity: number;
+    };
+    show: {
+        opacity: number;
+        transition: {
+            staggerChildren: number;
+        };
+    };
+};
+/** Pair with `staggerContainer` on each list child. */
+declare const fadeInUp: {
+    hidden: {
+        opacity: number;
+        y: number;
+    };
+    show: {
+        opacity: number;
+        y: number;
+        transition: {
+            duration: number;
+            ease: "easeOut";
+        };
+    };
+};
 
-export { Alert, type AppTheme, BUTTON_DECORATIVE_ICON_NAMES, BottomTabBar, BottomTabBarItem, type BottomTabBarItemProps, type BottomTabBarProps, Button, ButtonDecorativeIconGlyph, type ButtonDecorativeIconName, Checkbox, FieldGroup, type FieldGroupProps, FieldLabel, type FieldLabelProps, type FieldLabelSlotProps, ImagePlaceholder, InfoBar, type InfoBarLeadingIconName, Link, ListItem, LoadingSpinner, type LoadingSpinnerProps, Pagination, ProgressBar, Radio, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, SegmentedControlTrigger, Select, Slider, SplitButton, StarRating, TAG_LEADING_ICON_NAMES, Tab, TabList, type TabProps, Tabs, TabsList, TabsTrigger, Tag, TagIconGlyph, TagLeadingIcon, type TagLeadingIconName, TextArea, TextInput, TextInputCalendarIcon, TextInputSearchIcon, ThemeContext, ThemeProvider, ThemeSwitcher, ToggleSwitch, Tooltip, VideoControls, VideoPlaceholder, buttonVariants, checkboxFrameVariants, cn, hasRenderableFieldLabelText, linkVariants, listItemVariants, placeholderVariants, radioFrameVariants, selectFieldVariants, selectShellVariants, selectShellVariants as selectVariants, splitButtonVariants, tabListVariants, tagVariants, textAreaFieldVariants, textAreaShellVariants, textInputShellVariants, toggleSwitchVariants, toggleThumbVariants, useTheme, wvkIconBoxLgClass, wvkIconLgClass, wvkIconMdClass, wvkIconSmClass };
+export { Alert, type AppTheme, BottomTabBar, BottomTabBarItem, type BottomTabBarItemProps, type BottomTabBarProps, Button, Checkbox, type CursorStyle, FieldGroup, type FieldGroupProps, FieldLabel, type FieldLabelProps, type FieldLabelSlotProps, ImagePlaceholder, InfoBar, type InfoBarLeadingIconName, Link, ListItem, LoadingSpinner, type LoadingSpinnerProps, Menu, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuSeparator, MenuTrigger, Meter, Pagination, ProgressBar, Radio, RadioGroup, RadioGroupItem, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, SegmentedControlTrigger, Select, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, Slider, SplitButton, StarRating, TAG_LEADING_ICON_NAMES, Tab, TabIndicator, TabList, TabPanel, type TabProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagIconGlyph, TagLeadingIcon, type TagLeadingIconName, TextArea, TextInput, TextInputCalendarIcon, TextInputSearchIcon, ThemeContext, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, ToggleSwitch, Tooltip, TooltipPopup, TooltipProvider, VideoControls, VideoPlaceholder, WhimsyCursor, type WhimsyCursorOption, type WhimsyCursorProps, buttonVariants, checkboxFrameVariants, cn, fadeInUp, hasRenderableFieldLabelText, linkVariants, listItemVariants, placeholderVariants, radioFrameVariants, selectShellVariants, selectShellVariants as selectVariants, splitButtonVariants, staggerContainer, tabListVariants, tagVariants, textAreaFieldVariants, textAreaShellVariants, textInputShellVariants, toggleSwitchVariants, toggleThumbVariants, useCursorStyle, useTheme, wvkIconBoxLgClass, wvkIconLgClass, wvkIconMdClass, wvkIconSmClass };