@vikram-hegde/skeletal 0.0.1

package/dist/index-GOGpFujX.d.ts

@@ -0,0 +1,144 @@
+import { ScrollAreaContentProps, ScrollAreaCornerProps, ScrollAreaRootProps, ScrollAreaScrollbarProps, ScrollAreaThumbProps, ScrollAreaViewportProps } from "@base-ui/react/scroll-area";
+//#region src/scroll-area/scroll-area-content.d.ts
+/**
+ * Container for the scrollable content. Renders a `<div>`.
+ *
+ * Place it directly inside `ScrollArea.Viewport`. It ensures the content sizes
+ * correctly inside the clipped viewport and inherits overflow-edge variables
+ * when a child needs its own mask — set
+ * `--scroll-area-overflow-y-start: inherit` on that child.
+ */
+interface ScrollAreaContentProps$1 extends ScrollAreaContentProps {}
+declare function ScrollAreaContent({ className, ...props }: ScrollAreaContentProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/scroll-area/scroll-area-corner.d.ts
+/**
+ * The corner where vertical and horizontal scrollbars meet. Renders a `<div>`.
+ *
+ * Only needed when both scrollbars are present. It prevents the tracks from
+ * overlapping and exposes `--scroll-area-corner-width/height` for layout.
+ */
+interface ScrollAreaCornerProps$1 extends ScrollAreaCornerProps {}
+declare function ScrollAreaCorner({ className, ...props }: ScrollAreaCornerProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/scroll-area/scroll-area-root.d.ts
+/**
+ * Groups all parts of the scroll area. Renders a `<div>`.
+ *
+ * The root clips the viewport and positions custom scrollbars. Give it an
+ * explicit size (`height`, `max-height`, `width`) — the viewport fills it.
+ *
+ * ```tsx
+ * <ScrollArea.Root style={{ height: 200 }}>
+ *   <ScrollArea.Viewport>
+ *     <ScrollArea.Content>Long content…</ScrollArea.Content>
+ *   </ScrollArea.Viewport>
+ *   <ScrollArea.Scrollbar><ScrollArea.Thumb /></ScrollArea.Scrollbar>
+ * </ScrollArea.Root>
+ * ```
+ *
+ * All Base UI root props are supported: `overflowEdgeThreshold`, `style`,
+ * `className`, `render`.
+ */
+interface ScrollAreaRootProps$1 extends ScrollAreaRootProps {}
+declare function ScrollAreaRoot({ className, ...props }: ScrollAreaRootProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/scroll-area/scroll-area-scrollbar.d.ts
+/**
+ * A custom scrollbar track. Renders a `<div>` positioned over the viewport edge.
+ *
+ * Use `orientation="horizontal"` for the horizontal axis; defaults to
+ * `"vertical"`. The scrollbar fades in on hover or while scrolling and hides
+ * otherwise, keeping the chrome minimal. Pair it with `ScrollArea.Thumb`.
+ *
+ * ```tsx
+ * <ScrollArea.Scrollbar>
+ *   <ScrollArea.Thumb />
+ * </ScrollArea.Scrollbar>
+ * ```
+ */
+interface ScrollAreaScrollbarProps$1 extends ScrollAreaScrollbarProps {}
+declare function ScrollAreaScrollbar({ className, ...props }: ScrollAreaScrollbarProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/scroll-area/scroll-area-thumb.d.ts
+/**
+ * The draggable thumb inside the scrollbar track. Renders a `<div>`.
+ *
+ * Inherits the scrollbar's `data-orientation` (`vertical` | `horizontal`) and
+ * is sized via `--scroll-area-thumb-height/width` set by Base UI.
+ */
+interface ScrollAreaThumbProps$1 extends ScrollAreaThumbProps {}
+declare function ScrollAreaThumb({ className, ...props }: ScrollAreaThumbProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/scroll-area/scroll-area-viewport.d.ts
+/**
+ * The scrollable container. Renders a `<div>` with `overflow: scroll`.
+ *
+ * Content fades at the edges where more can be scrolled when `fade` is
+ * enabled. The fade uses a CSS `mask-image` driven by Base UI's
+ * `--scroll-area-overflow-*` variables, so no JavaScript or shadow overlays
+ * are needed. The fade animates naturally with the scroll position.
+ *
+ * For SSR the bottom/right edge falls back to the fade size so the hint is
+ * visible before hydration.
+ */
+interface ScrollAreaViewportProps$1 extends ScrollAreaViewportProps {
+  /**
+   * Whether to fade content at scroll edges.
+   *
+   * When `true` the viewport masks its content with a gradient that fades out
+   * at the top/bottom where more can be scrolled. The fade tracks
+   * `--scroll-area-overflow-y-start/end` automatically.
+   *
+   * Use `"horizontal"` or `"both"` for horizontal or combined axes. For most
+   * vertical lists (side navs, dropdowns) `true` (vertical) is correct.
+   *
+   * @default false
+   */
+  fade?: boolean | "horizontal" | "vertical" | "both";
+  /**
+   * The size of the fade gradient at each edge. Only applies when `fade` is set.
+   * Any CSS length. Use a larger value for a softer, longer fade.
+   *
+   * @default '2rem'
+   */
+  fadeSize?: string;
+}
+declare function ScrollAreaViewport({ className, style, fade, fadeSize, ...props }: ScrollAreaViewportProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/scroll-area/index.d.ts
+/**
+ * Compound component for a scrollable area with custom scrollbars and optional
+ * edge fades. Wraps Base UI's Scroll Area so every Base UI prop, `render`
+ * override, and ref works as documented.
+ *
+ * ```tsx
+ * import { ScrollArea } from '@project-backbone/skeletal'
+ *
+ * <ScrollArea.Root style={{ height: 200 }}>
+ *   <ScrollArea.Viewport fade>
+ *     <ScrollArea.Content>Long content…</ScrollArea.Content>
+ *   </ScrollArea.Viewport>
+ *   <ScrollArea.Scrollbar>
+ *     <ScrollArea.Thumb />
+ *   </ScrollArea.Scrollbar>
+ *   <ScrollArea.Corner />
+ * </ScrollArea.Root>
+ * ```
+ *
+ * Enable `fade` on the `Viewport` for a soft mask at scroll edges — ideal for
+ * side navs and lists where the content should hint at overflow. Tune the
+ * distance with `fadeSize` (e.g. `1.5rem`). The mask tracks
+ * `--scroll-area-overflow-y-start/end` automatically; no shadow overlays or
+ * scroll listeners are needed.
+ */
+declare const ScrollArea$1: {
+  Root: typeof ScrollAreaRoot;
+  Viewport: typeof ScrollAreaViewport;
+  Content: typeof ScrollAreaContent;
+  Scrollbar: typeof ScrollAreaScrollbar;
+  Thumb: typeof ScrollAreaThumb;
+  Corner: typeof ScrollAreaCorner;
+};
+//#endregion
+export { ScrollAreaRootProps$1 as a, ScrollAreaScrollbarProps$1 as i, ScrollAreaViewportProps$1 as n, ScrollAreaCornerProps$1 as o, ScrollAreaThumbProps$1 as r, ScrollAreaContentProps$1 as s, ScrollArea$1 as t };

package/dist/index-W3ozKcis.d.ts

@@ -0,0 +1,245 @@
+import { n as ButtonProps$1 } from "./button-Dvd4n2U4.js";
+import { ButtonState } from "@base-ui/react/button";
+import { CSSProperties } from "react";
+import { Popover, PopoverArrowProps, PopoverBackdropProps, PopoverCloseProps, PopoverDescriptionProps, PopoverPopupProps, PopoverPortalProps, PopoverPositionerProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps, PopoverViewportProps } from "@base-ui/react/popover";
+//#region src/popover/popover-arrow.d.ts
+/**
+ * A small arrow pointing from the popup to the trigger. Renders a `<div>`
+ * element.
+ *
+ * Place it inside `<Popover.Popup>` (before the content). It orients itself
+ * based on the popup's `data-side` attribute, so it works for any placement.
+ * Keep `arrowPadding` on the positioner in sync so the arrow never hangs off
+ * rounded corners.
+ */
+interface PopoverArrowProps$1 extends PopoverArrowProps {}
+declare function PopoverArrow({ className, ...props }: PopoverArrowProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/popover/popover-backdrop.d.ts
+/**
+ * An overlay displayed beneath the popover when `modal` is enabled on the
+ * root. Renders a `<div>` element.
+ *
+ * Clicking the backdrop dismisses the popover. It dims the page and fades
+ * in/out via `data-starting-style` / `data-ending-style`. Only rendered when
+ * `modal` is `true` — non-modal popovers have no backdrop.
+ */
+interface PopoverBackdropProps$1 extends PopoverBackdropProps {}
+declare function PopoverBackdrop({ className, ...props }: PopoverBackdropProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/popover/popover-close.d.ts
+/**
+ * A button that closes the popover. 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`, ...).
+ * Defaults to the `ghost` variant — use `variant="secondary"` for a footer
+ * action or `variant="primary"` for confirmations.
+ *
+ * When `modal` is `true` or `'trap-focus'` on the root, render a close button
+ * inside `<Popover.Popup>` so focus trapping has an escape target and touch
+ * screen readers can dismiss the popup. Visually hide it with `sr-only` if
+ * needed.
+ */
+interface PopoverCloseProps$1 extends Omit<ButtonProps$1, "render" | "className" | "style">, Omit<PopoverCloseProps, "className" | "style" | "render" | "nativeButton"> {
+  /** Class applied to the close button. */
+  className?: string;
+  /** Style applied to the close button. */
+  style?: React.CSSProperties;
+}
+declare function PopoverClose({ className, style, variant, size, fullWidth, ...props }: PopoverCloseProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/popover/popover-description.d.ts
+/**
+ * A paragraph with additional information about the popover. Renders a `<p>`
+ * element.
+ *
+ * Keep it specific and concise — it is announced alongside the title to
+ * screen readers.
+ */
+interface PopoverDescriptionProps$1 extends PopoverDescriptionProps {}
+declare function PopoverDescription({ className, ...props }: PopoverDescriptionProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/popover/popover-portal.d.ts
+/**
+ * Moves the popover popup to a different part of the DOM, appended to `<body>`
+ * by default. Renders a `<div>` element.
+ *
+ * `keepMounted` keeps the portal in the DOM while the popover is closed (useful
+ * for exit animations). `container` overrides the portal target.
+ *
+ * @default keepMounted = false
+ */
+interface PopoverPortalProps$1 extends PopoverPortalProps {}
+declare function PopoverPortal({ className, ...props }: PopoverPortalProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/popover/popover-positioner.d.ts
+/**
+ * Positions the popover popup against the trigger. Renders a `<div>` element.
+ *
+ * Accepts all Base UI positioner props: `side`, `align`, `sideOffset`,
+ * `alignOffset`, `collisionAvoidance`, `collisionBoundary`, `collisionPadding`,
+ * `sticky`, `positionMethod`, `arrowPadding`, and `anchor`.
+ *
+ * `side` may flip automatically to avoid collisions (default `'bottom'`).
+ * `align` controls the cross-axis placement — use `'start'` to align the
+ * popup's leading edge with the trigger. Pair `sideOffset` with
+ * `<Popover.Arrow>` so the arrow has room to point at the trigger.
+ *
+ * @default side = 'bottom'
+ * @default align = 'center'
+ * @default sideOffset = 8
+ */
+interface PopoverPositionerProps$1 extends PopoverPositionerProps {}
+declare function PopoverPositioner({ className, sideOffset, ...props }: PopoverPositionerProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/popover/popover-popup.d.ts
+/**
+ * The popover panel that holds the content. Renders a `<div>` element.
+ *
+ * Accepts all Base UI popup props, including `initialFocus` and `finalFocus`
+ * for controlling focus when the popover opens and closes. Content animates
+ * in/out via the `data-starting-style` / `data-ending-style` transitions and
+ * `data-instant` skips the animation for instant open types.
+ *
+ * By default the popup sizes to its content with a max width of `20rem`; pass
+ * `style={{ width: ... }}` or a `className` to constrain it. It supports
+ * `--popup-width` / `--popup-height` / `--available-width` CSS variables from
+ * the positioner for responsive sizing.
+ */
+interface PopoverPopupProps$1 extends PopoverPopupProps {}
+declare function PopoverPopup({ className, ...props }: PopoverPopupProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/popover/popover-root.d.ts
+/**
+ * Groups all parts of the popover. Renders no DOM element.
+ *
+ * All Base UI root props are supported: `open`, `defaultOpen`, `onOpenChange`,
+ * `onOpenChangeComplete`, `modal`, `triggerId`, `defaultTriggerId`, `handle`,
+ * `actionsRef`, and `children` (or a render function receiving `payload`).
+ *
+ * Use `open` + `onOpenChange` to control the popover; otherwise it is
+ * uncontrolled. `modal` accepts `true`, `'trap-focus'`, or `false`.
+ *
+ * - `true`: user interaction is limited to the popover — page scroll is locked
+ *   and outside pointer interactions are disabled.
+ * - `'trap-focus'`: focus is trapped inside the popover but page scroll and
+ *   outside pointer interactions remain enabled. Render `<Popover.Close>`
+ *   inside `<Popover.Popup>` so touch screen readers can escape.
+ * - `false`: interaction with the rest of the document stays enabled.
+ *
+ * @default modal = false
+ * @default defaultOpen = false
+ */
+interface PopoverProps<Payload = unknown> extends PopoverRootProps<Payload> {}
+declare function PopoverRoot<Payload>(props: PopoverProps<Payload>): import("react").JSX.Element;
+//#endregion
+//#region src/popover/popover-title.d.ts
+/**
+ * A heading that labels the popover. Renders an `<h2>` element.
+ *
+ * Prefer a short, specific title (e.g. "Notifications"). The popover is
+ * announced with this title for accessibility.
+ */
+interface PopoverTitleProps$1 extends PopoverTitleProps {}
+declare function PopoverTitle({ className, ...props }: PopoverTitleProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/popover/popover-trigger.d.ts
+/**
+ * A button that opens the popover. 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 popover-trigger props from Base UI (`payload`,
+ * `handle`, `openOnHover`, `delay`, `closeDelay`, `id`). Defaults to the
+ * `outline` variant.
+ *
+ * Set `openOnHover` to open on hover (useful for preview cards); tune it with
+ * `delay` and `closeDelay`. `payload` lets you pass data from the trigger to
+ * a render-prop `children` on the root.
+ *
+ * @default variant = 'outline'
+ * @default size = 'md'
+ * @default openOnHover = false
+ * @default delay = 300
+ * @default closeDelay = 0
+ */
+interface PopoverTriggerProps$1<Payload = unknown> extends Omit<ButtonProps$1, "className" | "style" | "render">, Omit<PopoverTriggerProps<Payload>, "className" | "style" | "render" | "nativeButton"> {
+  /** Class applied to the trigger button, or a function of the button state. */
+  className?: string | ((state: ButtonState) => string | undefined);
+  /** Style applied to the trigger button, or a function of the button state. */
+  style?: CSSProperties | ((state: ButtonState) => CSSProperties | undefined);
+}
+declare function PopoverTrigger<Payload>({ className, style, variant, size, fullWidth, ...props }: PopoverTriggerProps$1<Payload>): import("react").JSX.Element;
+//#endregion
+//#region src/popover/popover-viewport.d.ts
+/**
+ * The scroll container for popover content. Renders a `<div>` element.
+ *
+ * Place it inside `<Popover.Popup>` when the popover may overflow the viewport
+ * — it clips and scrolls while keeping the popup's border and shadow intact.
+ * This mirrors the `Viewport` pattern used by `Tooltip` and `Menu`.
+ */
+interface PopoverViewportProps$1 extends PopoverViewportProps {}
+declare function PopoverViewport({ className, ...props }: PopoverViewportProps$1): import("react").JSX.Element;
+//#endregion
+//#region src/popover/index.d.ts
+/**
+ * Compound component for popovers.
+ *
+ * Assemble the parts as properties of the object:
+ *
+ * ```tsx
+ * import { Popover } from '@vikram-hegde/skeletal'
+ *
+ * <Popover.Root>
+ *   <Popover.Trigger>Open</Popover.Trigger>
+ *   <Popover.Portal>
+ *     <Popover.Positioner sideOffset={8}>
+ *       <Popover.Popup>
+ *         <Popover.Arrow />
+ *         <Popover.Title>Notifications</Popover.Title>
+ *         <Popover.Description>You are all caught up.</Popover.Description>
+ *         <Popover.Close>Dismiss</Popover.Close>
+ *       </Popover.Popup>
+ *     </Popover.Positioner>
+ *   </Popover.Portal>
+ * </Popover.Root>
+ * ```
+ *
+ * Composition follows the Base UI anatomy — `Popover.Positioner` floats the
+ * popup against the trigger and handles collision avoidance; `Popover.Portal`
+ * moves it to `<body>`. Use `Popover.Backdrop` with `modal` on the root to
+ * dim the page. `Popover.Viewport` provides a scroll container for
+ * overflowing content.
+ *
+ * All parts are thin styled wrappers over Base UI's `Popover`, so every Base UI
+ * prop, `render` override, and ref behaves the same. Part prop types are
+ * exported separately (`PopoverProps`, `PopoverPopupProps`, etc.).
+ *
+ * Detached triggers are supported via `Popover.createHandle()`:
+ *
+ * ```tsx
+ * const handle = Popover.createHandle();
+ * <Popover.Trigger handle={handle}>Open</Popover.Trigger>
+ * <Popover.Root handle={handle}>…</Popover.Root>
+ * ```
+ */
+declare const Popover$1: {
+  Root: typeof PopoverRoot;
+  Trigger: typeof PopoverTrigger;
+  Portal: typeof PopoverPortal;
+  Backdrop: typeof PopoverBackdrop;
+  Positioner: typeof PopoverPositioner;
+  Popup: typeof PopoverPopup;
+  Arrow: typeof PopoverArrow;
+  Title: typeof PopoverTitle;
+  Description: typeof PopoverDescription;
+  Close: typeof PopoverClose;
+  Viewport: typeof PopoverViewport;
+  createHandle: typeof Popover.createHandle;
+};
+/** The handle created by `Popover.createHandle()`, for typing detached triggers. */
+type PopoverHandle<Payload> = Popover.Handle<Payload>;
+//#endregion
+export { PopoverTitleProps$1 as a, PopoverPositionerProps$1 as c, PopoverCloseProps$1 as d, PopoverBackdropProps$1 as f, PopoverTriggerProps$1 as i, PopoverPortalProps$1 as l, PopoverHandle as n, PopoverProps as o, PopoverArrowProps$1 as p, PopoverViewportProps$1 as r, PopoverPopupProps$1 as s, Popover$1 as t, PopoverDescriptionProps$1 as u };

package/dist/index-kpw3_4q_.d.ts

@@ -0,0 +1,50 @@
+import { Icon, IconProps, IconWeight } from "@phosphor-icons/react";
+//#region src/icon/icon.d.ts
+/**
+ * A single-color icon rendered from a Phosphor icon component.
+ *
+ * The `name` prop is type-restricted to Phosphor icon components, so only
+ * icons from `@phosphor-icons/react` are accepted:
+ *
+ * ```tsx
+ * import { Horse as HorseIcon } from '@phosphor-icons/react'
+ *
+ * <Icon name={HorseIcon} size={20} />
+ * ```
+ *
+ * By default the icon is decorative (`aria-hidden`); pass `alt` (rendered as
+ * a `<title>` by Phosphor) or `aria-label` to make it accessible to screen
+ * readers. Color inherits from the surrounding text via `currentColor`.
+ *
+ * All other Phosphor icon props pass through (`color`, `mirrored`, `title`,
+ * `style`, etc.), including `weight` which defaults to `'regular'`.
+ */
+interface IconProps$1 extends Omit<IconProps, "size" | "children" | "weight" | "alt" | "name"> {
+  /**
+   * The Phosphor icon component to render (e.g. `import { Horse as HorseIcon }`).
+   */
+  name: Icon;
+  /**
+   * Icon size, in pixels or any CSS length.
+   *
+   * Pass a string like `'1.25em'` to inherit the surrounding font size.
+   *
+   * @default 20
+   */
+  size?: string | number;
+  /**
+   * The icon's stroke weight.
+   *
+   * @default 'regular'
+   */
+  weight?: IconWeight;
+  /**
+   * Accessible description rendered as an SVG `<title>` element.
+   *
+   * Omit for purely decorative icons.
+   */
+  alt?: string;
+}
+declare function Icon$1({ name: IconComponent, size, weight, alt, className, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: IconProps$1): import("react").JSX.Element;
+//#endregion
+export { IconProps$1 as n, Icon$1 as t };