@vikram-hegde/skeletal 0.0.1

package/dist/index-CUy-9csi.d.ts

@@ -0,0 +1,135 @@
+import { CheckboxGroupProps } from "@base-ui/react/checkbox-group";
+import { CheckboxIndicatorProps, CheckboxRootProps } from "@base-ui/react/checkbox";
+//#region src/checkbox/checkbox-group.d.ts
+/**
+ * Shared state for a series of checkboxes. Renders a `<div>` laid out as a
+ * vertical stack.
+ *
+ * Place `Checkbox.Root` items inside; each child submits under its own
+ * `name` / `value`. For form libraries, treat the group as one array-valued
+ * field — e.g. with React Hook Form's `Controller`, keep the group controlled
+ * and map `onValueChange` to `field.onChange`:
+ *
+ * ```tsx
+ * <Controller
+ *   control={control}
+ *   name="protocols"
+ *   render={({ field }) => (
+ *     <Checkbox.Group value={field.value} onValueChange={field.onChange} onBlur={field.onBlur}>
+ *       <label><Checkbox.Root value="http" /> HTTP</label>
+ *       <label><Checkbox.Root value="https" /> HTTPS</label>
+ *     </Checkbox.Group>
+ *   )}
+ * />
+ * ```
+ *
+ * TanStack Form works the same way via `form.Field` (`field.state.value`,
+ * `field.handleChange`). For a "select all" parent checkbox, pass `allValues`
+ * (every child value) and add the `parent` prop on that checkbox — the group
+ * then drives its indeterminate state automatically.
+ *
+ * Label the group accessibly with `aria-labelledby` or by wrapping in Base
+ * UI's `Fieldset.Root`.
+ */
+interface CheckboxGroupProps$1 extends CheckboxGroupProps {}
+declare function CheckboxGroup$1({ className, ...props }: CheckboxGroupProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/checkbox/checkbox-indicator.d.ts
+/**
+ * The tick mark shown when the checkbox is checked. Renders a `<span>`.
+ *
+ * By default it draws a check icon, swapped for a dash when the parent
+ * `Checkbox.Root` is `indeterminate` (e.g. a "select all" parent). Both are
+ * tinted with the root's foreground color, so no color props are needed.
+ *
+ * Pass your own `children` or `render` to draw something else; they replace
+ * the default icons entirely. Unmounts while unchecked unless `keepMounted`
+ * is set. Animates in/out via `data-starting-style` / `data-ending-style`.
+ *
+ * @default keepMounted = false
+ */
+interface CheckboxIndicatorProps$1 extends CheckboxIndicatorProps {}
+declare function CheckboxIndicator({ className, render, children, ...props }: CheckboxIndicatorProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/checkbox/checkbox-root.d.ts
+/**
+ * A single checkbox control. Renders a `<span>` with a hidden `<input>`
+ * beside it, so it participates in native form submission and validation
+ * (`required`, `name` / `value`) without any extra wiring.
+ *
+ * Works directly with headless form libraries — the hidden input carries
+ * `name` and submits `value` when ticked:
+ *
+ * - **React Hook Form** — wrap with `Controller` and map the change handler:
+ *
+ * ```tsx
+ * <Controller
+ *   control={control}
+ *   name="terms"
+ *   render={({ field }) => (
+ *     <Checkbox.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="terms">
+ *   {(field) => (
+ *     <Checkbox.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` (or `"on"`) when checked, exactly like a native checkbox.
+ *
+ * Validation styling (`data-invalid`, `data-valid`, ...) activates when the
+ * checkbox is wrapped in Base UI's `Field.Root`.
+ */
+interface CheckboxProps extends CheckboxRootProps {}
+declare function CheckboxRoot({ className, children, ...props }: CheckboxProps): import("react").JSX.Element;
+//#endregion
+//#region src/checkbox/index.d.ts
+/**
+ * Compound component for ticking one or many independent options.
+ *
+ * Assemble the parts as properties of the object:
+ *
+ * ```tsx
+ * import { Checkbox } from '@vikram-hegde/skeletal'
+ *
+ * <label>
+ *   <Checkbox.Root defaultChecked name="terms" required />
+ *   Accept terms and conditions
+ * </label>
+ * ```
+ *
+ * Wrap several checkboxes in `Checkbox.Group` to manage them as one
+ * array-valued field (see the Group docs for react-hook-form / TanStack Form
+ * wiring), and add a parent checkbox with the `parent` prop + `allValues` on
+ * the group for "select all" behavior.
+ *
+ * All parts are thin styled wrappers over Base UI's `Checkbox`, so every Base
+ * UI prop, `render` override, and ref behaves the same. The hidden native
+ * input keeps native form submission and library integrations working. Part
+ * prop types are exported separately (`CheckboxProps`,
+ * `CheckboxGroupProps`, ...).
+ */
+declare const Checkbox$1: {
+  Root: typeof CheckboxRoot;
+  Group: typeof CheckboxGroup$1;
+  Indicator: typeof CheckboxIndicator;
+};
+//#endregion
+export { CheckboxGroupProps$1 as i, CheckboxProps as n, CheckboxIndicatorProps$1 as r, Checkbox$1 as t };

package/dist/index-CbMW32E9.d.ts

@@ -0,0 +1,82 @@
+import { r as DialogBackdrop, t as DialogViewport } from "./dialog-viewport-CaMWJrCJ.js";
+import { n as ButtonProps } from "./button-Dvd4n2U4.js";
+import { a as DialogClose, r as DialogDescription, t as DialogTitle } from "./dialog-title-jyf86Q8C.js";
+import { r as DialogContent, t as DialogFooter } from "./dialog-footer-bNVIVPbu.js";
+import { t as DialogPortal } from "./dialog-portal-BF89FBeX.js";
+import { AlertDialogRootProps, AlertDialogTriggerProps } from "@base-ui/react/alert-dialog";
+//#region src/alert-dialog/alert-dialog-root.d.ts
+/**
+ * The root of the alert dialog, grouping all parts together. Renders no DOM
+ * element.
+ *
+ * Semantically an alert dialog (`role="alertdialog"`) — always modal with
+ * focus trapped, and it cannot be dismissed by clicking outside. Note that
+ * pressing Esc still closes it (Base UI behavior). Use it for interruptions
+ * that require a decision.
+ *
+ * All Base UI root props are supported: `open`, `defaultOpen`,
+ * `onOpenChange`, `onOpenChangeComplete`, `actionsRef`, `handle`, and
+ * `triggerId`.
+ */
+interface AlertDialogProps<Payload = unknown> extends AlertDialogRootProps<Payload> {}
+declare function AlertDialogRoot<Payload>(props: AlertDialogProps<Payload>): import("react").JSX.Element;
+//#endregion
+//#region src/alert-dialog/alert-dialog-trigger.d.ts
+/**
+ * A button that opens the alert dialog. 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`, ...)
+ * plus the alert-dialog-trigger props from Base UI (`payload`, `handle`, `id`).
+ * Defaults to the `primary` variant; for destructive triggers (e.g. "Delete"),
+ * pass `variant="destructive"`.
+ */
+interface AlertDialogTriggerProps$1<Payload = unknown> extends ButtonProps, Omit<AlertDialogTriggerProps<Payload>, "className" | "style" | "render" | "nativeButton"> {}
+declare function AlertDialogTrigger<Payload>({ className, variant, size, fullWidth, ...props }: AlertDialogTriggerProps$1<Payload>): import("react").JSX.Element;
+//#endregion
+//#region src/alert-dialog/index.d.ts
+/**
+ * Compound component for alert dialogs.
+ *
+ * Assemble the parts as properties of the object:
+ *
+ * ```tsx
+ * import { AlertDialog } from '@vikram-hegde/skeletal'
+ *
+ * <AlertDialog.Root>
+ *   <AlertDialog.Trigger>Delete</AlertDialog.Trigger>
+ *   <AlertDialog.Portal>
+ *     <AlertDialog.Backdrop />
+ *     <AlertDialog.Viewport>
+ *       <AlertDialog.Content size="sm">
+ *         <AlertDialog.Title>Delete project?</AlertDialog.Title>
+ *         <AlertDialog.Description>This cannot be undone.</AlertDialog.Description>
+ *         <AlertDialog.Footer>
+ *           <AlertDialog.Close>Cancel</AlertDialog.Close>
+ *           <AlertDialog.Close variant="destructive">Delete</AlertDialog.Close>
+ *         </AlertDialog.Footer>
+ *       </AlertDialog.Content>
+ *     </AlertDialog.Viewport>
+ *   </AlertDialog.Portal>
+ * </AlertDialog.Root>
+ * ```
+ *
+ * An alert dialog is a dialog at heart, so `Portal`, `Backdrop`, `Content`,
+ * `Title`, `Description`, `Footer`, `Close`, and `Viewport` are the same styled
+ * parts as `Dialog`'s (their prop types live under `Dialog*Props`). Only `Root`
+ * and `Trigger` are alert-dialog specific.
+ */
+declare const AlertDialog$1: {
+  Root: typeof AlertDialogRoot;
+  Trigger: typeof AlertDialogTrigger;
+  Portal: typeof DialogPortal;
+  Backdrop: typeof DialogBackdrop;
+  Content: typeof DialogContent;
+  Title: typeof DialogTitle;
+  Description: typeof DialogDescription;
+  Footer: typeof DialogFooter;
+  Close: typeof DialogClose;
+  Viewport: typeof DialogViewport;
+};
+//#endregion
+export { AlertDialogTriggerProps$1 as n, AlertDialogProps as r, AlertDialog$1 as t };

package/dist/index-CyTcR6iv.d.ts

@@ -0,0 +1,433 @@
+import { ElementType, HTMLAttributes, ReactElement } from "react";
+//#region src/layout/layout-props.d.ts
+/**
+ * Props shared by every layout primitive: an optional element override and all
+ * standard HTML attributes (`className`, `style`, `id`, `aria-*`, ...).
+ */
+interface LayoutPrimitiveProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The element to render. Useful for semantics (e.g. a `Stack` of steps as an
+   * `<ol>`).
+   *
+   * @default 'div'
+   */
+  as?: ElementType;
+}
+//#endregion
+//#region src/layout/box.d.ts
+/**
+ * The padded container primitive: gives its content consistent padding and an
+ * optional border/background/color.
+ *
+ * Use for cards, panels, and any bounded surface. `invert` swaps the surface
+ * to the foreground color with background text — handy for emphasis bars.
+ */
+interface BoxProps extends LayoutPrimitiveProps {
+  /**
+   * Padding inside the box.
+   *
+   * @default '1.5rem'
+   */
+  padding?: string;
+  /**
+   * Border shorthand (width style color).
+   *
+   * @default 'none'
+   */
+  border?: string;
+  /**
+   * Background color.
+   *
+   * @default 'transparent'
+   */
+  background?: string;
+  /**
+   * Text color.
+   *
+   * @default 'inherit'
+   */
+  color?: string;
+  /**
+   * Swap the box's background and foreground tokens.
+   *
+   * Text becomes the background token, with slightly reduced padding.
+   *
+   * @default false
+   */
+  invert?: boolean;
+}
+declare function Box({ as, padding, border, background, color, invert, className, style, children, ...props }: BoxProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//#region src/layout/center.d.ts
+/**
+ * The centering primitive: constrains content to a readable measure and centers
+ * it horizontally.
+ *
+ * Use for prose, forms, and any content that benefits from a bounded line
+ * length. `intrinsic` centers content that is narrower than the measure
+ * without stretching it; `centerText` centers the text within.
+ */
+interface CenterProps extends LayoutPrimitiveProps {
+  /**
+   * The maximum content width (the measure).
+   *
+   * @default '60ch'
+   */
+  max?: string;
+  /**
+   * Horizontal gutters applied as padding on each side.
+   *
+   * @default '1rem'
+   */
+  gutters?: string;
+  /**
+   * Center narrower content instead of stretching it to the full width.
+   *
+   * @default false
+   */
+  intrinsic?: boolean;
+  /**
+   * Center the text of the content.
+   *
+   * @default false
+   */
+  centerText?: boolean;
+}
+declare function Center({ as, max, gutters, intrinsic, centerText, className, style, children, ...props }: CenterProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//#region src/layout/cluster.d.ts
+/**
+ * The group-by-row primitive: lays its children out horizontally and wraps
+ * them onto new rows when they run out of space, with a consistent gap.
+ *
+ * The natural choice for button/toolbar rows, tag groups, and any "chips"
+ * layout. `justify` controls the horizontal placement of the whole group and
+ * `align` the vertical alignment of items within a row.
+ */
+interface ClusterProps extends LayoutPrimitiveProps {
+  /**
+   * Gap between items (both axes).
+   *
+   * @default '1rem'
+   */
+  space?: string;
+  /**
+   * Horizontal placement of the group within the container.
+   *
+   * @default 'flex-start'
+   */
+  justify?: string;
+  /**
+   * Vertical alignment of items within a row.
+   *
+   * @default 'center'
+   */
+  align?: string;
+}
+declare function Cluster({ as, space, justify, align, className, style, children, ...props }: ClusterProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//#region src/layout/container.d.ts
+/**
+ * The page-width primitive: constrains content to a maximum width and centers
+ * it with horizontal gutters. The standard wrapper for page-level content.
+ */
+interface ContainerProps extends LayoutPrimitiveProps {
+  /**
+   * The maximum width of the container.
+   *
+   * @default '60rem'
+   */
+  max?: string;
+  /**
+   * Horizontal gutters applied as padding on each side.
+   *
+   * @default '1rem'
+   */
+  padding?: string;
+}
+declare function Container({ as, max, padding, className, style, children, ...props }: ContainerProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//#region src/layout/cover.d.ts
+/**
+ * The vertical-centering primitive: fills a minimum height and centers one
+ * child vertically while pinning the first and last children to the top and
+ * bottom edges.
+ *
+ * The classic full-viewport hero. Mark the child you want centered with
+ * `data-cover-center`:
+ *
+ * ```tsx
+ * <Cover minHeight="70svh">
+ *   <header />
+ *   <main data-cover-center>Centered</main>
+ *   <footer />
+ * </Cover>
+ * ```
+ */
+interface CoverProps extends LayoutPrimitiveProps {
+  /**
+   * The minimum height of the cover.
+   *
+   * @default '100svh'
+   */
+  minHeight?: string;
+  /**
+   * Space between the cover children (also used as the cover's padding).
+   *
+   * @default '1rem'
+   */
+  space?: string;
+}
+declare function Cover({ as, minHeight, space, className, style, children, ...props }: CoverProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//#region src/layout/frame.d.ts
+/**
+ * The aspect-ratio primitive: constrains its content to a fixed ratio. Media
+ * (`img`, `video`, `iframe`) fills and crops to cover the frame; any other
+ * content is centered and scrolls if it doesn't fit.
+ *
+ * Use for media thumbnails, video embeds, and images that must keep a ratio.
+ */
+interface FrameProps extends LayoutPrimitiveProps {
+  /**
+   * The aspect ratio, e.g. `'16 / 9'`, `'1 / 1'`, or a decimal.
+   *
+   * @default '16 / 9'
+   */
+  ratio?: string;
+}
+declare function Frame({ as, ratio, className, style, children, ...props }: FrameProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//#region src/layout/grid.d.ts
+/**
+ * The intrinsic grid primitive: auto-fills as many columns as fit, each at
+ * least `min` wide, and wraps onto new rows. No breakpoints required — the
+ * column count derives from the available space.
+ *
+ * Use for card galleries, product lists, and any collection of equal items.
+ */
+interface GridProps extends LayoutPrimitiveProps {
+  /**
+   * The smallest a column is allowed to be before wrapping.
+   *
+   * @default '16rem'
+   */
+  min?: string;
+  /**
+   * Gap between cells.
+   *
+   * @default '1rem'
+   */
+  gap?: string;
+}
+declare function Grid({ as, min, gap, className, style, children, ...props }: GridProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//#region src/layout/imposter.d.ts
+/**
+ * The overlay primitive: positions its content centered over its nearest
+ * positioned ancestor. Use sparingly — overlays obscure content — for
+ * modals, notifications, and floating action controls.
+ *
+ * ```tsx
+ * <div style={{ position: 'relative' }}>
+ *   <Imposter>Tooltip-ish</Imposter>
+ * </div>
+ * ```
+ */
+interface ImposterProps extends LayoutPrimitiveProps {
+  /**
+   * Position relative to the viewport instead of the parent.
+   *
+   * @default false
+   */
+  fixed?: boolean;
+  /**
+   * Keep the imposter clear of its container's edges by applying a margin.
+   *
+   * @default false
+   */
+  margin?: boolean;
+  /**
+   * Allow the imposter to break out of its container by this much on each side.
+   *
+   * @default '1rem'
+   */
+  breakout?: string;
+}
+declare function Imposter({ as, fixed, margin, breakout, className, style, children, ...props }: ImposterProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//#region src/layout/reel.d.ts
+/**
+ * The horizontal-scroll primitive: lays children out in a row that scrolls
+ * horizontally, with scroll-snap alignment.
+ *
+ * Use for horizontal strips that shouldn't wrap — carousels, table-like rows,
+ * and tab bars. Items are snap-aligned and kept at their natural width.
+ */
+interface ReelProps extends LayoutPrimitiveProps {
+  /**
+   * Space between items.
+   *
+   * @default '1rem'
+   */
+  space?: string;
+  /**
+   * Hide the horizontal scrollbar (visual-only; scrolling still works).
+   *
+   * @default false
+   */
+  noBar?: boolean;
+}
+declare function Reel({ as, space, noBar, className, style, children, ...props }: ReelProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//#region src/layout/sidebar.d.ts
+/**
+ * The media-object primitive: two children sit side by side — a fixed-width
+ * (or content-width) sidebar and a main element taking the rest of the space.
+ * When the container gets too narrow, they wrap to a stacked (vertical)
+ * configuration. No breakpoints required.
+ *
+ * Use for media + text, inputs + buttons, label + control rows. The sidebar is
+ * the FIRST child by default; pass `side="right"` to make the LAST child the
+ * sidebar.
+ *
+ * ```tsx
+ * <Sidebar sideWidth="12rem" space="1.5rem">
+ *   <img src="..." alt="" />
+ *   <p>Description</p>
+ * </Sidebar>
+ * ```
+ */
+interface SidebarProps extends LayoutPrimitiveProps {
+  /**
+   * Which child is the sidebar.
+   *
+   * @default 'left'
+   */
+  side?: "left" | "right";
+  /**
+   * Width of the sidebar in the horizontal configuration.
+   *
+   * When unset, the sidebar is sized by its content.
+   *
+   * @default 'content'
+   */
+  sideWidth?: string;
+  /**
+   * The narrowest the main element can be before the two children wrap.
+   *
+   * Should be a percentage.
+   *
+   * @default '50%'
+   */
+  contentMin?: string;
+  /**
+   * Space between the sidebar and the main element.
+   *
+   * @default '1rem'
+   */
+  space?: string;
+  /**
+   * Let each child adopt its natural height instead of stretching to match.
+   *
+   * @default false
+   */
+  noStretch?: boolean;
+}
+declare function Sidebar({ as, side, sideWidth, contentMin, space, noStretch, className, style, children, ...props }: SidebarProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//#region src/layout/stack.d.ts
+/**
+ * The vertical rhythm primitive: stacks its direct children with a consistent
+ * space between them.
+ *
+ * The recommended default for vertical composition. Combine with `space` to
+ * tune the rhythm and `splitAfter` to push a trailing group to the bottom
+ * (e.g. a card with footer actions pinned to its base).
+ *
+ * ```tsx
+ * <Stack space="1.5rem">
+ *   <header />
+ *   <main />
+ *   <footer />
+ * </Stack>
+ * ```
+ */
+interface StackProps extends LayoutPrimitiveProps {
+  /**
+   * Space between stacked items.
+   *
+   * @default '1.5rem'
+   */
+  space?: string;
+  /**
+   * Apply the space between items at every nesting level.
+   *
+   * By default the space applies to direct children only.
+   *
+   * @default false
+   */
+  recursive?: boolean;
+  /**
+   * Index (1-based) of the direct child at which the stack splits.
+   *
+   * That child and everything after it are pushed to the bottom via
+   * `margin-block-start: auto`. The child is cloned and restyled inline, so it
+   * must accept a `style` prop.
+   *
+   * @default undefined
+   */
+  splitAfter?: number;
+  /**
+   * Stretch the stack to fill its parent's height (`height: 100%`).
+   *
+   * Opt in explicitly — the stack does not stretch by default, so using one
+   * as the only child of a fixed-height scroll container (a nav pane, a docs
+   * page) keeps its content at natural height and preserves the container's
+   * bottom padding. Reach for it when the stack should pin content to the
+   * bottom of a definite-height box (dialog popups, cards with `splitAfter`
+   * footers).
+   *
+   * @default false
+   */
+  fill?: boolean;
+}
+declare function Stack({ as, space, recursive, splitAfter, fill, className, style, children, ...props }: StackProps): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+//#region src/layout/switcher.d.ts
+/**
+ * The mode-switch primitive: children sit in a single horizontal row when the
+ * container is wide enough, and switch directly to a single vertical column
+ * (bypassing intermediate states) when it isn't.
+ *
+ * Use for equal items that should never appear as "featured" by wrapping
+ * unevenly — e.g. product cards or numbered steps. The switch happens at
+ * `threshold` (a container-based breakpoint) and, with `limit`, when there are
+ * more items than fit comfortably in one row.
+ */
+interface SwitcherProps extends LayoutPrimitiveProps {
+  /**
+   * Container width at which the layout switches from horizontal to vertical.
+   *
+   * @default '30rem'
+   */
+  threshold?: string;
+  /**
+   * Space between the children.
+   *
+   * @default '1rem'
+   */
+  space?: string;
+  /**
+   * Maximum items allowed in the horizontal configuration.
+   *
+   * With more items than this, each is forced to a full row (stacked). Children
+   * are cloned and restyled inline, so they must accept a `style` prop.
+   *
+   * @default 4
+   */
+  limit?: number;
+}
+declare function Switcher({ as, threshold, space, limit, className, style, children, ...props }: SwitcherProps): ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { Box as C, CenterProps as S, LayoutPrimitiveProps as T, Container as _, Sidebar as a, ClusterProps as b, ReelProps as c, Grid as d, GridProps as f, CoverProps as g, Cover as h, StackProps as i, Imposter as l, FrameProps as m, SwitcherProps as n, SidebarProps as o, Frame as p, Stack as r, Reel as s, Switcher as t, ImposterProps as u, ContainerProps as v, BoxProps as w, Center as x, Cluster as y };