@vikram-hegde/skeletal 0.0.1

package/dist/index-B0uNLS7z.d.ts

@@ -0,0 +1,301 @@
+import { n as ButtonProps } from "./button-Dvd4n2U4.js";
+import { a as DialogClose, r as DialogDescription, t as DialogTitle } from "./dialog-title-jyf86Q8C.js";
+import { t as DialogPortal } from "./dialog-portal-BF89FBeX.js";
+import { HTMLAttributes } from "react";
+import { DrawerBackdropProps, DrawerContentProps, DrawerPopupProps, DrawerRootProps, DrawerSwipeAreaProps, DrawerTriggerProps, DrawerViewportProps } from "@base-ui/react/drawer";
+//#region src/drawer/drawer-backdrop.d.ts
+/**
+ * An overlay displayed beneath the drawer popup. Renders a `<div>` element.
+ *
+ * Clicking the backdrop dismisses the drawer (unless
+ * `disablePointerDismissal` is set on the root). It dims the page and fades as
+ * the drawer is swiped toward dismissal (its opacity tracks the drawer's swipe
+ * progress), and can be customised with `className` or the `render` prop.
+ */
+interface DrawerBackdropProps$1 extends DrawerBackdropProps {}
+declare function DrawerBackdrop({ className, ...props }: DrawerBackdropProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/drawer/drawer-content.d.ts
+/**
+ * The padded content container inside the drawer popup. Renders a `<div>`
+ * element.
+ *
+ * Per the Base UI anatomy, render `<Drawer.Title>`, `<Drawer.Description>`,
+ * and the drawer's actions inside `<Drawer.Content>`:
+ *
+ * ```tsx
+ * <Drawer.Popup>
+ *   <Drawer.Content>
+ *     <Drawer.Title>Settings</Drawer.Title>
+ *     <Drawer.Description>…</Drawer.Description>
+ *     <Drawer.Close>Close</Drawer.Close>
+ *   </Drawer.Content>
+ * </Drawer.Popup>
+ * ```
+ *
+ * The content is padded (`1.5rem`), measure-constrained, and wrapped in a
+ * `Stack` layout primitive for the drawer's vertical rhythm
+ * (`space="1.25rem"`), matching `Dialog.Content`. It also lets users select
+ * text inside the drawer without triggering the swipe-to-dismiss gesture.
+ *
+ * `Drawer.Content` is the scrollable region of the popup: when it overflows,
+ * it scrolls between an optional sticky `Drawer.Header` (above) and `Drawer.Footer`
+ * (below), which stay pinned.
+ */
+interface DrawerContentProps$1 extends DrawerContentProps {}
+declare function DrawerContent({ className, children, ...props }: DrawerContentProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/drawer/drawer-footer.d.ts
+/**
+ * A sticky footer bar for drawer actions. Renders a `<div>` element.
+ *
+ * Render it as a direct child of `Drawer.Popup`, after `Drawer.Content`. It
+ * stays pinned to the popup's bottom edge while the content scrolls beneath it
+ * — the conventional placement for a drawer's primary/destructive actions:
+ *
+ * ```tsx
+ * <Drawer.Popup>
+ *   <Drawer.Content>…</Drawer.Content>
+ *   <Drawer.Footer>
+ *     <Drawer.Close>Cancel</Drawer.Close>
+ *     <Drawer.Close variant="primary">Save</Drawer.Close>
+ *   </Drawer.Footer>
+ * </Drawer.Popup>
+ * ```
+ *
+ * Styled as a muted bar with a top border and a right-aligned, wrapping row of
+ * buttons — the same treatment as `Dialog.Footer`. Override alignment with
+ * `className` or `style` (e.g. `justifyContent: "space-between"`) when needed.
+ */
+interface DrawerFooterProps extends HTMLAttributes<HTMLDivElement> {}
+declare function DrawerFooter({ className, ...props }: DrawerFooterProps): import("react").JSX.Element;
+//#endregion
+//#region src/drawer/drawer-header.d.ts
+/**
+ * A sticky top bar for the drawer. Renders a `<div>` element.
+ *
+ * Render it as a direct child of `Drawer.Popup`, before `Drawer.Content`. It
+ * stays pinned to the popup's top edge while the content scrolls beneath it —
+ * pair it with `Drawer.Footer` so actions are always visible:
+ *
+ * ```tsx
+ * <Drawer.Popup>
+ *   <Drawer.Header>
+ *     <Drawer.Title>Filters</Drawer.Title>
+ *     <Drawer.Close size="sm" variant="ghost">✕</Drawer.Close>
+ *   </Drawer.Header>
+ *   <Drawer.Content>…</Drawer.Content>
+ *   <Drawer.Footer>
+ *     <Drawer.Close>Reset</Drawer.Close>
+ *     <Drawer.Close variant="primary">Apply</Drawer.Close>
+ *   </Drawer.Footer>
+ * </Drawer.Popup>
+ * ```
+ *
+ * Styled as a bar on the popup surface (same background as the content) with a
+ * bottom border to separate it from the body. It is a plain container — put
+ * the title on the left and trailing actions on the right
+ * (`justify-content: space-between`), and override alignment with `className`
+ * or `style` when needed.
+ */
+interface DrawerHeaderProps extends HTMLAttributes<HTMLDivElement> {}
+declare function DrawerHeader({ className, ...props }: DrawerHeaderProps): import("react").JSX.Element;
+//#endregion
+//#region src/drawer/drawer-popup.d.ts
+/**
+ * The extent of the drawer along its slide axis.
+ *
+ * For left/right drawers this is the panel width; for top/bottom sheets it is
+ * the maximum height (the sheet grows to its content, capped at this size):
+ * - `sm`: 20rem
+ * - `md`: 24rem — default; most drawers.
+ * - `lg`: 32rem — wide panels and complex forms.
+ *
+ * @default 'md'
+ */
+type DrawerPopupSize = "sm" | "md" | "lg";
+/**
+ * The sliding panel itself. Renders a `<div>` element with the popup role.
+ *
+ * Per the Base UI anatomy it sits inside `<Drawer.Viewport>`, which pins it to
+ * the edge selected by the root's `side` prop. The popup carries the surface
+ * (background, border, shadow, radius) and animates in and out of view —
+ * including following the finger while the drawer is being swiped to dismiss.
+ *
+ * Accepts all Base UI popup props, including `initialFocus` and `finalFocus`
+ * for controlling focus when the drawer opens and closes.
+ *
+ * `size` controls the drawer's extent along its slide axis. The popup lays out
+ * as a column: render `<Drawer.Content>` for the scrollable middle, with an
+ * optional sticky `<Drawer.Header>` and `<Drawer.Footer>` that stay pinned.
+ *
+ * @default size = 'md'
+ */
+interface DrawerPopupProps$1 extends DrawerPopupProps {
+  /** Extent of the drawer along its slide axis. @default 'md' */
+  size?: DrawerPopupSize;
+}
+declare function DrawerPopup({ className, size, children, ...props }: DrawerPopupProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/drawer/drawer-root.d.ts
+/**
+ * The edge of the screen the drawer slides out from.
+ *
+ * Pairs with `side` to position the drawer and pick the swipe gesture:
+ * - `right`: a side panel on the right edge (default) — dismiss by swiping right.
+ * - `left`: a side panel on the left edge — dismiss by swiping left.
+ * - `bottom`: a bottom sheet — dismiss by swiping down.
+ * - `top`: a top sheet — dismiss by swiping up.
+ *
+ * @default 'right'
+ */
+type DrawerSide = "left" | "right" | "top" | "bottom";
+/**
+ * The root of the drawer, grouping all parts together. Renders no DOM element.
+ *
+ * All Base UI root props are supported: `open`, `defaultOpen`, `modal`,
+ * `onOpenChange`, `onOpenChangeComplete`, `actionsRef`, `handle`,
+ * `triggerId`, `snapPoints`, and `swipeDirection`.
+ *
+ * `side` picks which edge the drawer slides from and is the recommended way to
+ * position it — it maps to `swipeDirection` under the hood. Pass
+ * `swipeDirection` directly instead when you need fine-grained control (or
+ * snap points, which only apply to top/bottom sheets).
+ *
+ * Use `open` + `onOpenChange` to control the drawer; otherwise it is
+ * uncontrolled. `modal` accepts `true`, `'trap-focus'`, or `false`.
+ *
+ * @default modal = true, side = 'right'
+ */
+interface DrawerProps<Payload = unknown> extends DrawerRootProps<Payload> {
+  /** Edge of the screen the drawer slides out from. @default 'right' */
+  side?: DrawerSide;
+}
+declare function DrawerRoot<Payload>({ side, swipeDirection, ...props }: DrawerProps<Payload>): import("react").JSX.Element;
+//#endregion
+//#region src/drawer/drawer-swipe-area.d.ts
+/**
+ * An invisible area that listens for swipe gestures to open the drawer. Renders
+ * a `<div>` element.
+ *
+ * Place it along the edge the drawer slides out from. The default
+ * `swipeDirection` (opposite of the root's) matches that edge, so a right-side
+ * drawer opens by swiping from the right edge, a bottom sheet by swiping up
+ * from the bottom edge, and so on.
+ *
+ * The swipe area is styled to fill the screen edge it sits on (a thin strip).
+ * Style it with `className` if you want to make it visible or resize it.
+ *
+ * @default disabled = false
+ */
+interface DrawerSwipeAreaProps$1 extends DrawerSwipeAreaProps {}
+declare function DrawerSwipeArea({ className, ...props }: DrawerSwipeAreaProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/drawer/drawer-trigger.d.ts
+/**
+ * A button that opens the drawer. Renders a `<button>` element.
+ *
+ * Composed from the `Button` component via Base UI's `render` prop, so it
+ * accepts all `Button` props (`variant`, `size`, `fullWidth`, `disabled`,
+ * `onClick`, ...) plus the drawer-trigger props from Base UI (`payload`,
+ * `handle`, `id`). Defaults to the `primary` variant.
+ *
+ * The `payload` prop lets you pass data from the trigger to the drawer's
+ * render-prop content.
+ */
+interface DrawerTriggerProps$1<Payload = unknown> extends ButtonProps, Omit<DrawerTriggerProps<Payload>, "className" | "style" | "render" | "nativeButton"> {}
+declare function DrawerTrigger<Payload>({ className, variant, size, fullWidth, ...props }: DrawerTriggerProps$1<Payload>): import("react").JSX.Element;
+//#endregion
+//#region src/drawer/drawer-viewport.d.ts
+/**
+ * The full-screen positioning container for the drawer popup. Renders a
+ * `<div>` element.
+ *
+ * Per the Base UI anatomy, render `<Drawer.Popup>` inside
+ * `<Drawer.Viewport>`:
+ *
+ * ```tsx
+ * <Drawer.Portal>
+ *   <Drawer.Backdrop />
+ *   <Drawer.Viewport>
+ *     <Drawer.Popup>...</Drawer.Popup>
+ *   </Drawer.Viewport>
+ * </Drawer.Portal>
+ * ```
+ *
+ * The viewport is `position: fixed`, fills the screen, and pins the popup to
+ * the edge selected by the root's `side` prop (left/right drawers stretch to
+ * full height, top/bottom sheets stretch to full width). The drawer's swipe
+ * gesture is registered on the viewport, so don't wrap the popup in an extra
+ * positioning element.
+ *
+ * Styled with the `drawer__viewport` BEM class; override positioning with
+ * `className` if you need a different layout.
+ */
+interface DrawerViewportProps$1 extends DrawerViewportProps {}
+declare function DrawerViewport({ className, ...props }: DrawerViewportProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/drawer/index.d.ts
+/**
+ * Compound component for drawers.
+ *
+ * Assemble the parts as properties of the object:
+ *
+ * ```tsx
+ * import { Drawer } from '@vikram-hegde/skeletal'
+ *
+ * <Drawer.Root side="right">
+ *   <Drawer.Trigger>Open</Drawer.Trigger>
+ *   <Drawer.Portal>
+ *     <Drawer.Backdrop />
+ *     <Drawer.Viewport>
+ *       <Drawer.Popup>
+ *         <Drawer.Header>
+ *           <Drawer.Title>Title</Drawer.Title>
+ *           <Drawer.Close size="sm" variant="ghost">✕</Drawer.Close>
+ *         </Drawer.Header>
+ *         <Drawer.Content>
+ *           <Drawer.Description>Description</Drawer.Description>
+ *         </Drawer.Content>
+ *         <Drawer.Footer>
+ *           <Drawer.Close>Cancel</Drawer.Close>
+ *           <Drawer.Close variant="primary">Confirm</Drawer.Close>
+ *         </Drawer.Footer>
+ *       </Drawer.Popup>
+ *     </Drawer.Viewport>
+ *   </Drawer.Portal>
+ * </Drawer.Root>
+ * ```
+ *
+ * Composition follows the Base UI anatomy — `Drawer.Viewport` is the
+ * full-screen positioning/scroll container that pins `Drawer.Popup` to the
+ * edge set by the root's `side` prop.
+ *
+ * All parts are thin styled wrappers over Base UI's `Drawer`, so every Base UI
+ * prop, `render` override, and ref behaves the same. The drawer adds swipe-to-
+ * dismiss gestures on top of a Dialog, so `Backdrop`, `Viewport`, `Popup`,
+ * `Content`, and `SwipeArea` are drawer-specific; `Portal`, `Title`,
+ * `Description`, and `Close` are the same styled parts as `Dialog`'s (their
+ * prop types live under `Dialog*Props`). `Header` and `Footer` are plain
+ * sticky bars that stay pinned while `Content` scrolls.
+ *
+ * Position the drawer with the `side` prop on `Root`. Use `SwipeArea` to let
+ * users swipe open a closed drawer from the screen edge.
+ */
+declare const Drawer$1: {
+  Root: typeof DrawerRoot;
+  Trigger: typeof DrawerTrigger;
+  Portal: typeof DialogPortal;
+  Backdrop: typeof DrawerBackdrop;
+  Viewport: typeof DrawerViewport;
+  Popup: typeof DrawerPopup;
+  Header: typeof DrawerHeader;
+  Content: typeof DrawerContent;
+  Footer: typeof DrawerFooter;
+  Title: typeof DialogTitle;
+  Description: typeof DialogDescription;
+  Close: typeof DialogClose;
+  SwipeArea: typeof DrawerSwipeArea;
+};
+//#endregion
+export { DrawerProps as a, DrawerPopupSize as c, DrawerContentProps$1 as d, DrawerBackdropProps$1 as f, DrawerSwipeAreaProps$1 as i, DrawerHeaderProps as l, DrawerViewportProps$1 as n, DrawerSide as o, DrawerTriggerProps$1 as r, DrawerPopupProps$1 as s, Drawer$1 as t, DrawerFooterProps as u };

package/dist/index-B63PSP58.d.ts

@@ -0,0 +1,94 @@
+import { SwitchRootProps, SwitchThumbProps } from "@base-ui/react/switch";
+//#region src/switch/switch-root.d.ts
+/**
+ * An on/off toggle for instant-effect settings (not form data — use
+ * `Checkbox` when the value is submitted). Renders a `<span>` with a hidden
+ * `<input>` beside it, so it still participates in native form submission
+ * and validation (`name` / `value`, submits `"on"` by default) without extra
+ * wiring.
+ *
+ * Works directly with headless form libraries — the hidden input carries the
+ * value; libraries only need the controlled pair and blur/ref:
+ *
+ * - **React Hook Form** — wrap with `Controller` and map the change handler:
+ *
+ * ```tsx
+ * <Controller
+ *   control={control}
+ *   name="notifications"
+ *   render={({ field }) => (
+ *     <Switch.Root
+ *       checked={field.value}
+ *       onCheckedChange={(checked) => field.onChange(checked)}
+ *       onBlur={field.onBlur}
+ *       inputRef={field.ref}
+ *     />
+ *   )}
+ * />
+ * ```
+ *
+ * - **TanStack Form** — drive it from `form.Field` state:
+ *
+ * ```tsx
+ * <form.Field name="notifications">
+ *   {(field) => (
+ *     <Switch.Root
+ *       checked={field.state.value}
+ *       onCheckedChange={(checked) => field.handleChange(checked)}
+ *       onBlur={field.handleBlur}
+ *     />
+ *   )}
+ * </form.Field>
+ * ```
+ *
+ * - **Formisch** / uncontrolled forms — just pass `name`; the hidden input
+ *   submits `value` (default `"on"`) when on, like a native checkbox.
+ *
+ * Validation styling (`data-invalid`, `data-valid`, ...) activates when the
+ * switch is wrapped in Base UI's `Field.Root`. Label it with an enclosing
+ * `<label>`.
+ */
+interface SwitchProps extends SwitchRootProps {}
+declare function SwitchRoot({ className, children, ...props }: SwitchProps): import("react").JSX.Element;
+//#endregion
+//#region src/switch/switch-thumb.d.ts
+/**
+ * The knob that slides along the track. Renders a `<span>`. Place exactly one
+ * inside a `Switch.Root` — the track animates its position via
+ * `data-checked` (`translate`), tinted from theme tokens so no color props
+ * are needed.
+ */
+interface SwitchThumbProps$1 extends SwitchThumbProps {}
+declare function SwitchThumb({ className, ...props }: SwitchThumbProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/switch/index.d.ts
+/**
+ * Compound component for an on/off setting.
+ *
+ * Assemble the parts as properties of the object:
+ *
+ * ```tsx
+ * import { Switch } from '@vikram-hegde/skeletal'
+ *
+ * <label>
+ *   <Switch.Root defaultChecked name="notifications" />
+ *   Notifications
+ * </label>
+ * ```
+ *
+ * Use a switch for instant-effect settings that don't wait on form
+ * submission ("Dark mode", "Mute"); use `Checkbox` when the value is part of
+ * submitted form data or represents membership in a list. See the Root docs
+ * for react-hook-form / TanStack Form wiring — the hidden native input keeps
+ * those integrations working.
+ *
+ * All parts are thin styled wrappers over Base UI's `Switch`, so every Base
+ * UI prop, `render` override, and ref behaves the same. Part prop types are
+ * exported separately (`SwitchProps`, ...).
+ */
+declare const Switch$1: {
+  Root: typeof SwitchRoot;
+  Thumb: typeof SwitchThumb;
+};
+//#endregion
+export { SwitchThumbProps$1 as n, SwitchProps as r, Switch$1 as t };

package/dist/index-BBOkTl3h.d.ts

@@ -0,0 +1,261 @@
+import { r as DialogBackdrop, t as DialogViewport } from "./dialog-viewport-CaMWJrCJ.js";
+import { t as DialogPortal } from "./dialog-portal-BF89FBeX.js";
+import { DialogPopupProps, DialogRootChangeEventDetails, DialogRootProps } from "@base-ui/react/dialog";
+import { HTMLAttributes, ReactNode } from "react";
+import { AutocompleteEmptyProps, AutocompleteGroupLabelProps, AutocompleteGroupProps, AutocompleteInputGroupProps, AutocompleteInputProps, AutocompleteItemProps, AutocompleteListProps, AutocompleteRootChangeEventDetails, AutocompleteRootProps } from "@base-ui/react/autocomplete";
+//#region src/command-palette/command-palette-content.d.ts
+/**
+ * The palette card: a compact, flush container holding the input and the
+ * command list. Renders a `<div>` element with the dialog popup role.
+ *
+ * Styled with the `command__content` BEM class — no inner padding; the input
+ * group and list define their own rhythm.
+ *
+ * Responsive: below `48rem` the palette renders as a full-width bottom sheet
+ * with rounded top corners, pinned to the bottom edge and sliding up on open.
+ */
+interface CommandPaletteContentProps extends DialogPopupProps {}
+declare function CommandPaletteContent({ className, ...props }: CommandPaletteContentProps): import("react").JSX.Element;
+//#endregion
+//#region src/command-palette/command-palette-empty.d.ts
+/**
+ * Rendered when the query matches no commands. Renders a `<div>` element.
+ */
+interface CommandPaletteEmptyProps extends AutocompleteEmptyProps {}
+declare function CommandPaletteEmpty({ className, ...props }: CommandPaletteEmptyProps): import("react").JSX.Element;
+//#endregion
+//#region src/command-palette/command-palette-footer.d.ts
+/**
+ * A footer bar for keyboard-shortcut hints and other instruction text.
+ * Renders a `<div>` element.
+ *
+ * Place it as the last child of `CommandPalette.Content`, after the list (or
+ * the empty state), to surface affordances like navigation keys:
+ *
+ * ```tsx
+ * <CommandPalette.Footer>
+ *   <kbd>↑↓</kbd> to navigate · <kbd>↵</kbd> to select
+ * </CommandPalette.Footer>
+ * ```
+ *
+ * It sits flush against the card's bottom edge with a top border and muted
+ * background, reading as a distinct section rather than a loose row of text.
+ * Content is laid out in a left-aligned, wrapping row with a small gap;
+ * override alignment with `className` or `style` when needed.
+ */
+interface CommandPaletteFooterProps extends HTMLAttributes<HTMLDivElement> {}
+declare function CommandPaletteFooter({ className, ...props }: CommandPaletteFooterProps): import("react").JSX.Element;
+//#endregion
+//#region src/command-palette/command-palette-group.d.ts
+/**
+ * Groups related commands under an accessible label. Renders a `<div>`
+ * element.
+ *
+ * Pair with `<CommandPalette.GroupLabel>` inside the group; Base UI wires the
+ * `aria-labelledby` association automatically. Pass the group's items via the
+ * `items` prop so filtering and keyboard navigation can find them.
+ *
+ * ```tsx
+ * <CommandPalette.List>
+ *   {(group) => (
+ *     <CommandPalette.Group key={group.value} items={group.items}>
+ *       <CommandPalette.GroupLabel>{group.value}</CommandPalette.GroupLabel>
+ *       {group.items.map((command) => (
+ *         <CommandPalette.Item key={command.id} value={command.label}>
+ *           {command.label}
+ *         </CommandPalette.Item>
+ *       ))}
+ *     </CommandPalette.Group>
+ *   )}
+ * </CommandPalette.List>
+ * ```
+ *
+ * Rendered with `display: contents` so its items participate directly in the
+ * scroll list.
+ */
+interface CommandPaletteGroupProps extends AutocompleteGroupProps {}
+declare function CommandPaletteGroup({ className, ...props }: CommandPaletteGroupProps): import("react").JSX.Element;
+//#endregion
+//#region src/command-palette/command-palette-group-label.d.ts
+/**
+ * A label for a `<CommandPalette.Group>`, automatically associated with it for
+ * screen readers. Renders a `<div>` element.
+ *
+ * Styled small, muted and uppercase; add a `<CommandPalette.Group>` before the
+ * group to visually divide it from the commands above.
+ */
+interface CommandPaletteGroupLabelProps extends AutocompleteGroupLabelProps {}
+declare function CommandPaletteGroupLabel({ className, ...props }: CommandPaletteGroupLabelProps): import("react").JSX.Element;
+//#endregion
+//#region src/command-palette/command-palette-input.d.ts
+/**
+ * The search input that filters the commands as you type. Renders an `<input>`
+ * element. Borderless and transparent — the surrounding `InputGroup` provides
+ * the chrome.
+ */
+interface CommandPaletteInputProps extends AutocompleteInputProps {}
+declare function CommandPaletteInput({ className, ...props }: CommandPaletteInputProps): import("react").JSX.Element;
+//#endregion
+//#region src/command-palette/command-palette-input-group.d.ts
+/**
+ * A row containing the search icon and the query input, separated from the
+ * list by a bottom border. Renders a `<div>` element.
+ *
+ * The icon and input are composed in a `Cluster` layout primitive
+ * (`space="0.625rem"`, `align="center"`).
+ */
+interface CommandPaletteInputGroupProps extends AutocompleteInputGroupProps {}
+declare function CommandPaletteInputGroup({ className, children, ...props }: CommandPaletteInputGroupProps): import("react").JSX.Element;
+//#endregion
+//#region src/command-palette/command-palette-item.d.ts
+/**
+ * A single command row. Renders a `<div>` element with the option role.
+ *
+ * Runs whatever you pass to `onClick` when activated (click or Enter on the
+ * highlighted item). Pass `hint` for a muted, right-aligned shortcut or group
+ * label.
+ */
+interface CommandPaletteItemProps extends AutocompleteItemProps {
+  /**
+   * A muted hint shown on the right side of the row (e.g. a keyboard shortcut
+   * or the command's group).
+   */
+  hint?: ReactNode;
+}
+declare function CommandPaletteItem({ className, hint, children, ...props }: CommandPaletteItemProps): import("react").JSX.Element;
+//#endregion
+//#region src/command-palette/command-palette-list.d.ts
+/**
+ * The scrollable list of filtered commands. Renders a `<div>` element with the
+ * listbox role.
+ *
+ * The children can be a render function that receives each filtered item:
+ *
+ * ```tsx
+ * <CommandPalette.List>
+ *   {(command) => <CommandPalette.Item value={command.id}>…</CommandPalette.Item>}
+ * </CommandPalette.List>
+ * ```
+ */
+interface CommandPaletteListProps extends AutocompleteListProps {}
+declare function CommandPaletteList({ className, ...props }: CommandPaletteListProps): import("react").JSX.Element;
+//#endregion
+//#region src/command-palette/command-palette-root.d.ts
+/**
+ * The open/close event details shared by the underlying Dialog and Autocomplete.
+ */
+type CommandPaletteOpenChangeDetails = DialogRootChangeEventDetails | AutocompleteRootChangeEventDetails;
+/**
+ * The root of the command palette, composing a modal Dialog with a
+ * query-filtered Autocomplete list. Renders no DOM element.
+ *
+ * Use `open` + `onOpenChange` to control the palette (e.g. a Cmd/Ctrl+K
+ * shortcut) and `items` to provide the commands. Items are filtered as the
+ * user types; highlight/selection and keyboard navigation are handled by Base
+ * UI's Autocomplete.
+ *
+ * ```tsx
+ * <CommandPalette.Root
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   items={commands}
+ *   autoHighlight="always"
+ * >
+ *   <CommandPalette.Portal>
+ *     <CommandPalette.Backdrop />
+ *     <CommandPalette.Viewport>
+ *       <CommandPalette.Content>
+ *         <CommandPalette.InputGroup>
+ *           <Icon name={MagnifyingGlass} size={16} />
+ *           <CommandPalette.Input placeholder="Type a command…" />
+ *         </CommandPalette.InputGroup>
+ *         <CommandPalette.List>
+ *           {(command) => (
+ *             <CommandPalette.Item
+ *               key={command.id}
+ *               value={command.id}
+ *               onClick={() => runCommand(command)}
+ *             >
+ *               {command.label}
+ *             </CommandPalette.Item>
+ *           )}
+ *         </CommandPalette.List>
+ *         <CommandPalette.Empty>No commands found.</CommandPalette.Empty>
+ *         <CommandPalette.Footer>
+ *           <kbd>↑↓</kbd> navigate · <kbd>↵</kbd> select
+ *         </CommandPalette.Footer>
+ *       </CommandPalette.Content>
+ *     </CommandPalette.Viewport>
+ *   </CommandPalette.Portal>
+ * </CommandPalette.Root>
+ * ```
+ */
+interface CommandPaletteRootProps<Item> extends DialogRootProps, Pick<AutocompleteRootProps<Item>, "value" | "defaultValue" | "onValueChange" | "onItemHighlighted" | "mode" | "autoHighlight" | "keepHighlight" | "highlightItemOnHover" | "itemToStringValue" | "submitOnItemClick" | "filter"> {
+  /**
+   * The commands to filter and display.
+   */
+  items?: readonly Item[];
+  /**
+   * Event handler called when the palette opens or closes.
+   */
+  onOpenChange?: (open: boolean, eventDetails: CommandPaletteOpenChangeDetails) => void;
+}
+declare function CommandPaletteRoot<Item>({ open, defaultOpen, onOpenChange, onOpenChangeComplete, modal, children, items, value, defaultValue, onValueChange, onItemHighlighted, mode, autoHighlight, keepHighlight, highlightItemOnHover, itemToStringValue, submitOnItemClick, filter, ...dialogProps }: CommandPaletteRootProps<Item>): import("react").JSX.Element;
+//#endregion
+//#region src/command-palette/index.d.ts
+/**
+ * Compound component for a command palette.
+ *
+ * Assemble the parts as properties of the object:
+ *
+ * ```tsx
+ * import { CommandPalette } from '@vikram-hegde/skeletal'
+ *
+ * <CommandPalette.Root open={open} onOpenChange={setOpen} items={commands}>
+ *   <CommandPalette.Portal>
+ *     <CommandPalette.Backdrop />
+ *     <CommandPalette.Viewport>
+ *       <CommandPalette.Content>
+ *         <CommandPalette.InputGroup>
+ *           <Icon name={MagnifyingGlass} size={16} />
+ *           <CommandPalette.Input placeholder="Type a command…" />
+ *         </CommandPalette.InputGroup>
+ *         <CommandPalette.List>
+ *           {(command) => (
+ *             <CommandPalette.Item value={command.id} onClick={…}>
+ *               {command.label}
+ *             </CommandPalette.Item>
+ *           )}
+ *         </CommandPalette.List>
+ *         <CommandPalette.Empty>No commands found.</CommandPalette.Empty>
+ *         <CommandPalette.Footer>
+ *           <kbd>↑↓</kbd> navigate · <kbd>↵</kbd> select
+ *         </CommandPalette.Footer>
+ *       </CommandPalette.Content>
+ *     </CommandPalette.Viewport>
+ *   </CommandPalette.Portal>
+ * </CommandPalette.Root>
+ * ```
+ *
+ * The palette is a modal Dialog composed with a query-filtered Base UI
+ * Autocomplete (`inline` mode): typing filters the items, arrow keys navigate,
+ * and Enter/click executes the highlighted command via the item's `onClick`.
+ * Open it with a shortcut by controlling `open`.
+ */
+declare const CommandPalette: {
+  Root: typeof CommandPaletteRoot;
+  Portal: typeof DialogPortal;
+  Backdrop: typeof DialogBackdrop;
+  Viewport: typeof DialogViewport;
+  Content: typeof CommandPaletteContent;
+  InputGroup: typeof CommandPaletteInputGroup;
+  Input: typeof CommandPaletteInput;
+  List: typeof CommandPaletteList;
+  Group: typeof CommandPaletteGroup;
+  GroupLabel: typeof CommandPaletteGroupLabel;
+  Item: typeof CommandPaletteItem;
+  Empty: typeof CommandPaletteEmpty;
+  Footer: typeof CommandPaletteFooter;
+};
+//#endregion
+export { CommandPaletteItemProps as a, CommandPaletteGroupLabelProps as c, CommandPaletteEmptyProps as d, CommandPaletteContentProps as f, CommandPaletteListProps as i, CommandPaletteGroupProps as l, CommandPaletteOpenChangeDetails as n, CommandPaletteInputGroupProps as o, CommandPaletteRootProps as r, CommandPaletteInputProps as s, CommandPalette as t, CommandPaletteFooterProps as u };