@stridge/noctis 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,157 @@
+import { SkeletonVariant } from "./skeleton.types.js";
+import { SkeletonLayoutPropsArgs, SkeletonPartProps, SkeletonShapePropsArgs, boxProps, circleProps, lineProps, rootProps, textProps } from "./skeleton.props.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+
+//#region src/components/skeleton/skeleton.d.ts
+/**
+ * The accessible loading group — a `role="status"` live region that announces "Loading" to assistive
+ * tech while its placeholder shapes show. Lays its children out as a vertical stack by default (restyle
+ * via `className`/`style` for any other arrangement) and shares its `variant` down to every child shape,
+ * so you set the animation once on the group. Swap the announced text with `label`, or unmount the whole
+ * group once the real content is ready.
+ *
+ * The placeholder shapes (`Skeleton.Box`/`Circle`/`Text`) are decorative (`aria-hidden`) — this region
+ * is the single thing screen readers hear, so the loading state is conveyed once, not once per shape.
+ *
+ * @see {@link Skeleton.Root.Props}
+ */
+declare function SkeletonRoot({
+  variant,
+  label,
+  className,
+  children,
+  ...props
+}: Skeleton.Root.Props): ReactElement;
+/**
+ * A rectangular placeholder — the general-purpose block for an image, a card, a thumbnail, or any
+ * fixed-shape region. Fills its inline space and defaults to a short height; set `style`/`className`
+ * dimensions to match the content it stands in for. Decorative (`aria-hidden`); the animation comes from
+ * its own `variant` or the surrounding `Skeleton.Root`.
+ */
+declare function SkeletonBox({
+  variant,
+  className,
+  ...props
+}: Skeleton.Box.Props): ReactElement;
+/**
+ * A circular placeholder — for an avatar, a status dot, or an icon. Defaults to a `2.5rem` disc; size it
+ * with `style`/`className` to match the element it stands in for. Decorative (`aria-hidden`).
+ */
+declare function SkeletonCircle({
+  variant,
+  className,
+  ...props
+}: Skeleton.Circle.Props): ReactElement;
+/**
+ * A multi-line text placeholder — a stack of line bars standing in for a paragraph. Renders `lines` bars
+ * (default 3); the last bar is drawn shorter so the block reads as ragged prose, not a solid box. The
+ * line height tracks the surrounding font size. Decorative (`aria-hidden`); compose `Skeleton.Line`
+ * directly for full control over individual line widths.
+ */
+declare function SkeletonText({
+  lines,
+  variant,
+  className,
+  ...props
+}: Skeleton.Text.Props): ReactElement;
+/**
+ * A single text-line placeholder bar. Use it directly inside a `Skeleton.Text` (or any layout) when you
+ * want to set per-line widths via `style`/`className` instead of the uniform `Skeleton.Text` block.
+ * Decorative (`aria-hidden`).
+ */
+declare function SkeletonLine({
+  variant,
+  className,
+  ...props
+}: Skeleton.Line.Props): ReactElement;
+/**
+ * A loading placeholder that mirrors the shape of the content it stands in for. `Skeleton.Root` is the
+ * accessible group (a `role="status"` region) that announces the load and shares the animation `variant`
+ * to its shapes; compose `Skeleton.Box` (a rectangle), `Skeleton.Circle` (an avatar/icon disc), and
+ * `Skeleton.Text` (a paragraph of `Skeleton.Line`s) inside it. Each shape also works standalone.
+ *
+ * The default `shimmer` variant sweeps a light band across each placeholder; `pulse` fades it and `none`
+ * holds it static. Every variant respects `prefers-reduced-motion`, and the placeholder fill is the
+ * surface-adaptive `well` overlay so it stays visible on any surface. Styling is precompiled CSS keyed
+ * off the `data-slot` anchor (`skeleton.css`); the shapes are accent-independent and purely presentational.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop types are exposed through
+ * the matching `Skeleton` namespace — e.g. `Skeleton.Root.Props`.
+ */
+declare const Skeleton: {
+  /** The accessible loading group. `Skeleton.Root.props({ variant })` → its prop bag. */Root: typeof SkeletonRoot & {
+    props: typeof rootProps;
+  }; /** A rectangular placeholder. `Skeleton.Box.props({ variant })` → its spreadable prop bag. */
+  Box: typeof SkeletonBox & {
+    props: typeof boxProps;
+  }; /** A circular placeholder. `Skeleton.Circle.props({ variant })` → its spreadable prop bag. */
+  Circle: typeof SkeletonCircle & {
+    props: typeof circleProps;
+  }; /** A multi-line text placeholder. `Skeleton.Text.props()` → its spreadable prop bag. */
+  Text: typeof SkeletonText & {
+    props: typeof textProps;
+  }; /** A single text-line placeholder. `Skeleton.Line.props({ variant })` → its spreadable prop bag. */
+  Line: typeof SkeletonLine & {
+    props: typeof lineProps;
+  };
+};
+/**
+ * Per-part prop types. Types-only — it emits no runtime code and merges with the `Skeleton` object
+ * above, so `Skeleton.Root` is the component value while `Skeleton.Root.Props` is its prop type.
+ */
+declare namespace Skeleton {
+  /** Animation style — `shimmer` | `pulse` | `none`. */
+  type Variant = SkeletonVariant;
+  /** The spreadable data-attribute prop bag every `Skeleton.*.props()` returns (D12). */
+  type PartProps = SkeletonPartProps;
+  namespace Root {
+    type Props = ComponentPropsWithRef<"div"> & {
+      /**
+       * Animation style shared down to every child shape.
+       * @default "shimmer"
+       */
+      variant?: SkeletonVariant;
+      /**
+       * The accessible name announced for the loading region; overrides the localized "Loading".
+       */
+      label?: string;
+    };
+    /** Argument to the `Skeleton.Root.props(...)` escape-hatch helper. */
+    type PropsArgs = SkeletonShapePropsArgs;
+  }
+  namespace Box {
+    type Props = ComponentPropsWithRef<"div"> & {
+      /** Animation style; inherits from the surrounding `Skeleton.Root` when unset. @default "shimmer" */variant?: SkeletonVariant;
+    };
+    /** Argument to the `Skeleton.Box.props(...)` escape-hatch helper. */
+    type PropsArgs = SkeletonShapePropsArgs;
+  }
+  namespace Circle {
+    type Props = ComponentPropsWithRef<"div"> & {
+      /** Animation style; inherits from the surrounding `Skeleton.Root` when unset. @default "shimmer" */variant?: SkeletonVariant;
+    };
+    /** Argument to the `Skeleton.Circle.props(...)` escape-hatch helper. */
+    type PropsArgs = SkeletonShapePropsArgs;
+  }
+  namespace Text {
+    type Props = ComponentPropsWithRef<"div"> & {
+      /**
+       * How many line bars to render; the last bar is drawn shorter.
+       * @default 3
+       */
+      lines?: number; /** Animation style; inherits from the surrounding `Skeleton.Root` when unset. @default "shimmer" */
+      variant?: SkeletonVariant;
+    };
+    /** Argument to the `Skeleton.Text.props(...)` escape-hatch helper. */
+    type PropsArgs = SkeletonLayoutPropsArgs;
+  }
+  namespace Line {
+    type Props = ComponentPropsWithRef<"div"> & {
+      /** Animation style; inherits from the surrounding `Skeleton.Root` when unset. @default "shimmer" */variant?: SkeletonVariant;
+    };
+    /** Argument to the `Skeleton.Line.props(...)` escape-hatch helper. */
+    type PropsArgs = SkeletonShapePropsArgs;
+  }
+}
+//#endregion
+export { Skeleton };

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,130 @@
+"use client";
+import { useInjectedLabels } from "../../core/use-injected-labels.js";
+import { VisuallyHidden } from "../../core/visually-hidden/visually-hidden.js";
+import { SkeletonProvider, useSkeletonContext } from "./skeleton.context.js";
+import { boxProps, circleProps, lineProps, rootProps, textProps } from "./skeleton.props.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/skeleton/skeleton.tsx
+/** English fallbacks and catalog keys for the loading region's accessible name (resolved per locale). */
+const DEFAULT_LABELS = { loading: "Loading" };
+const LABEL_KEYS = { loading: "skeleton.loading" };
+/**
+* The accessible loading group — a `role="status"` live region that announces "Loading" to assistive
+* tech while its placeholder shapes show. Lays its children out as a vertical stack by default (restyle
+* via `className`/`style` for any other arrangement) and shares its `variant` down to every child shape,
+* so you set the animation once on the group. Swap the announced text with `label`, or unmount the whole
+* group once the real content is ready.
+*
+* The placeholder shapes (`Skeleton.Box`/`Circle`/`Text`) are decorative (`aria-hidden`) — this region
+* is the single thing screen readers hear, so the loading state is conveyed once, not once per shape.
+*
+* @see {@link Skeleton.Root.Props}
+*/
+function SkeletonRoot({ variant = "shimmer", label, className, children, ...props }) {
+	const labels = useInjectedLabels(DEFAULT_LABELS, LABEL_KEYS, label === void 0 ? void 0 : { loading: label });
+	return /* @__PURE__ */ jsx("div", {
+		...rootProps({
+			variant,
+			className
+		}),
+		role: "status",
+		"aria-busy": "true",
+		...props,
+		children: /* @__PURE__ */ jsxs(SkeletonProvider, {
+			value: { variant },
+			children: [/* @__PURE__ */ jsx(VisuallyHidden, { children: labels.loading }), children]
+		})
+	});
+}
+/**
+* A rectangular placeholder — the general-purpose block for an image, a card, a thumbnail, or any
+* fixed-shape region. Fills its inline space and defaults to a short height; set `style`/`className`
+* dimensions to match the content it stands in for. Decorative (`aria-hidden`); the animation comes from
+* its own `variant` or the surrounding `Skeleton.Root`.
+*/
+function SkeletonBox({ variant, className, ...props }) {
+	const { variant: inherited } = useSkeletonContext();
+	return /* @__PURE__ */ jsx("div", {
+		...boxProps({
+			variant: variant ?? inherited,
+			className
+		}),
+		"aria-hidden": "true",
+		...props
+	});
+}
+/**
+* A circular placeholder — for an avatar, a status dot, or an icon. Defaults to a `2.5rem` disc; size it
+* with `style`/`className` to match the element it stands in for. Decorative (`aria-hidden`).
+*/
+function SkeletonCircle({ variant, className, ...props }) {
+	const { variant: inherited } = useSkeletonContext();
+	return /* @__PURE__ */ jsx("div", {
+		...circleProps({
+			variant: variant ?? inherited,
+			className
+		}),
+		"aria-hidden": "true",
+		...props
+	});
+}
+/**
+* A multi-line text placeholder — a stack of line bars standing in for a paragraph. Renders `lines` bars
+* (default 3); the last bar is drawn shorter so the block reads as ragged prose, not a solid box. The
+* line height tracks the surrounding font size. Decorative (`aria-hidden`); compose `Skeleton.Line`
+* directly for full control over individual line widths.
+*/
+function SkeletonText({ lines = 3, variant, className, ...props }) {
+	const { variant: inherited } = useSkeletonContext();
+	const resolved = variant ?? inherited;
+	return /* @__PURE__ */ jsx("div", {
+		...textProps({ className }),
+		"aria-hidden": "true",
+		...props,
+		children: Array.from({ length: Math.max(0, lines) }, (_, i) => /* @__PURE__ */ jsx(SkeletonLine, { variant: resolved }, i))
+	});
+}
+/**
+* A single text-line placeholder bar. Use it directly inside a `Skeleton.Text` (or any layout) when you
+* want to set per-line widths via `style`/`className` instead of the uniform `Skeleton.Text` block.
+* Decorative (`aria-hidden`).
+*/
+function SkeletonLine({ variant, className, ...props }) {
+	const { variant: inherited } = useSkeletonContext();
+	return /* @__PURE__ */ jsx("div", {
+		...lineProps({
+			variant: variant ?? inherited,
+			className
+		}),
+		"aria-hidden": "true",
+		...props
+	});
+}
+/**
+* A loading placeholder that mirrors the shape of the content it stands in for. `Skeleton.Root` is the
+* accessible group (a `role="status"` region) that announces the load and shares the animation `variant`
+* to its shapes; compose `Skeleton.Box` (a rectangle), `Skeleton.Circle` (an avatar/icon disc), and
+* `Skeleton.Text` (a paragraph of `Skeleton.Line`s) inside it. Each shape also works standalone.
+*
+* The default `shimmer` variant sweeps a light band across each placeholder; `pulse` fades it and `none`
+* holds it static. Every variant respects `prefers-reduced-motion`, and the placeholder fill is the
+* surface-adaptive `well` overlay so it stays visible on any surface. Styling is precompiled CSS keyed
+* off the `data-slot` anchor (`skeleton.css`); the shapes are accent-independent and purely presentational.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop types are exposed through
+* the matching `Skeleton` namespace — e.g. `Skeleton.Root.Props`.
+*/
+const Skeleton = {
+	/** The accessible loading group. `Skeleton.Root.props({ variant })` → its prop bag. */
+	Root: Object.assign(SkeletonRoot, { props: rootProps }),
+	/** A rectangular placeholder. `Skeleton.Box.props({ variant })` → its spreadable prop bag. */
+	Box: Object.assign(SkeletonBox, { props: boxProps }),
+	/** A circular placeholder. `Skeleton.Circle.props({ variant })` → its spreadable prop bag. */
+	Circle: Object.assign(SkeletonCircle, { props: circleProps }),
+	/** A multi-line text placeholder. `Skeleton.Text.props()` → its spreadable prop bag. */
+	Text: Object.assign(SkeletonText, { props: textProps }),
+	/** A single text-line placeholder. `Skeleton.Line.props({ variant })` → its spreadable prop bag. */
+	Line: Object.assign(SkeletonLine, { props: lineProps })
+};
+//#endregion
+export { Skeleton };

package/dist/components/skeleton/skeleton.props.d.ts

@@ -0,0 +1,47 @@
+import { SkeletonVariant } from "./skeleton.types.js";
+
+//#region src/components/skeleton/skeleton.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Skeleton.*.props()` returns. */
+type SkeletonPartProps = {
+  /** The slot value the matching `skeleton.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string; /** A data-attribute present (string) or absent (`undefined`); never `false`. */
+  [attr: `data-${string}`]: string | undefined;
+};
+/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
+interface BasePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to a shape's `.props(...)` — its animation variant plus the optional `className`. */
+interface SkeletonShapePropsArgs extends BasePropsArgs {
+  /** Animation style — `shimmer` (default) | `pulse` | `none`. @default "shimmer" */
+  variant?: SkeletonVariant;
+}
+/** Argument to a layout part's `.props(...)` — no animation of its own; the lines inside animate. */
+type SkeletonLayoutPropsArgs = BasePropsArgs;
+/** Root prop bag: the status-region slot plus the `data-variant` it shares down to its shapes. */
+declare function rootProps({
+  variant,
+  className
+}?: SkeletonShapePropsArgs): SkeletonPartProps;
+/** Box prop bag: the rectangle slot plus its `data-variant`. */
+declare function boxProps({
+  variant,
+  className
+}?: SkeletonShapePropsArgs): SkeletonPartProps;
+/** Circle prop bag: the disc slot plus its `data-variant`. */
+declare function circleProps({
+  variant,
+  className
+}?: SkeletonShapePropsArgs): SkeletonPartProps;
+/** Text prop bag: the lines wrapper slot (a layout stack — its `Skeleton.Line`s carry the animation). */
+declare function textProps({
+  className
+}?: SkeletonLayoutPropsArgs): SkeletonPartProps;
+/** Line prop bag: a single text-line slot plus its `data-variant`. */
+declare function lineProps({
+  variant,
+  className
+}?: SkeletonShapePropsArgs): SkeletonPartProps;
+//#endregion
+export { SkeletonLayoutPropsArgs, SkeletonPartProps, SkeletonShapePropsArgs, boxProps, circleProps, lineProps, rootProps, textProps };

package/dist/components/skeleton/skeleton.props.js

@@ -0,0 +1,57 @@
+import { SKELETON_SLOTS } from "./skeleton.slots.js";
+//#region src/components/skeleton/skeleton.props.ts
+/**
+* The D12 unified variant contract for Skeleton — the data-attribute-native styling helpers.
+*
+* Each part exposes a `props(...)` builder returning a **spreadable props object** of the form
+* `{ "data-slot": "noctis-skeleton-<part>", ...dataAttrs }`. Under the single-`data-slot` anchor model
+* the `data-slot` is the only styling hook needed — `skeleton.css` keys every rule off it plus the
+* `data-variant` animation recipe — so spreading a part's `props()` onto a *foreign* element styles it
+* as that placeholder:
+*
+*     <div {...Skeleton.Box.props({ variant: "pulse" })} style={{ height: 48 }} />
+*     // → <div data-slot="noctis-skeleton-box" data-variant="pulse" aria-hidden="true">
+*
+* The escape hatch carries no className (styling is attribute-driven); an optional `className`
+* passthrough is accepted and forwarded verbatim. The same variant→data-attribute→values mapping is
+* emitted as data from the token graph (`generated/declarations.json` → `variantSchema`) so non-React /
+* agent consumers can hand-write the markup from the docs.
+*/
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Root prop bag: the status-region slot plus the `data-variant` it shares down to its shapes. */
+function rootProps({ variant = "shimmer", className } = {}) {
+	return withClassName({
+		"data-slot": SKELETON_SLOTS.root,
+		"data-variant": variant
+	}, className);
+}
+/** Box prop bag: the rectangle slot plus its `data-variant`. */
+function boxProps({ variant = "shimmer", className } = {}) {
+	return withClassName({
+		"data-slot": SKELETON_SLOTS.box,
+		"data-variant": variant
+	}, className);
+}
+/** Circle prop bag: the disc slot plus its `data-variant`. */
+function circleProps({ variant = "shimmer", className } = {}) {
+	return withClassName({
+		"data-slot": SKELETON_SLOTS.circle,
+		"data-variant": variant
+	}, className);
+}
+/** Text prop bag: the lines wrapper slot (a layout stack — its `Skeleton.Line`s carry the animation). */
+function textProps({ className } = {}) {
+	return withClassName({ "data-slot": SKELETON_SLOTS.text }, className);
+}
+/** Line prop bag: a single text-line slot plus its `data-variant`. */
+function lineProps({ variant = "shimmer", className } = {}) {
+	return withClassName({
+		"data-slot": SKELETON_SLOTS.line,
+		"data-variant": variant
+	}, className);
+}
+//#endregion
+export { boxProps, circleProps, lineProps, rootProps, textProps };

package/dist/components/skeleton/skeleton.slots.d.ts

@@ -0,0 +1,15 @@
+//#region src/components/skeleton/skeleton.slots.d.ts
+/**
+ * The `data-*` hooks `Skeleton` stamps on its parts, for host-side styling and tests. The slot values
+ * mark each rendered element; `data-variant` carries the animation recipe (`shimmer` | `pulse` |
+ * `none`) the precompiled `skeleton.css` keys each shape's sweep/fade off. The variant rides the root
+ * AND every shape, so a standalone shape animates without a `Skeleton.Root`.
+ */
+declare enum SkeletonDataAttributes {
+  /** The rendered element's slot — the anchor `skeleton.css` styles. */
+  slot = "data-slot",
+  /** The animation style — `shimmer` (a moving sweep, the default) | `pulse` (a gentle fade) | `none` (static). */
+  variant = "data-variant"
+}
+//#endregion
+export { SkeletonDataAttributes };

package/dist/components/skeleton/skeleton.slots.js

@@ -0,0 +1,28 @@
+//#region src/components/skeleton/skeleton.slots.ts
+/**
+* The slot vocabulary every `Skeleton` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, kebab-cased `{component}[-{part}]` under the `noctis-` prefix;
+* SLOTS.md still tracks the same anatomy.
+*/
+const SKELETON_SLOTS = {
+	root: "noctis-skeleton",
+	box: "noctis-skeleton-box",
+	circle: "noctis-skeleton-circle",
+	text: "noctis-skeleton-text",
+	line: "noctis-skeleton-line"
+};
+/**
+* The `data-*` hooks `Skeleton` stamps on its parts, for host-side styling and tests. The slot values
+* mark each rendered element; `data-variant` carries the animation recipe (`shimmer` | `pulse` |
+* `none`) the precompiled `skeleton.css` keys each shape's sweep/fade off. The variant rides the root
+* AND every shape, so a standalone shape animates without a `Skeleton.Root`.
+*/
+let SkeletonDataAttributes = /* @__PURE__ */ function(SkeletonDataAttributes) {
+	/** The rendered element's slot — the anchor `skeleton.css` styles. */
+	SkeletonDataAttributes["slot"] = "data-slot";
+	/** The animation style — `shimmer` (a moving sweep, the default) | `pulse` (a gentle fade) | `none` (static). */
+	SkeletonDataAttributes["variant"] = "data-variant";
+	return SkeletonDataAttributes;
+}({});
+//#endregion
+export { SKELETON_SLOTS, SkeletonDataAttributes };

package/dist/components/skeleton/skeleton.types.d.ts

@@ -0,0 +1,13 @@
+//#region src/components/skeleton/skeleton.types.d.ts
+/**
+ * The animation vocabulary `Skeleton` paints. Authored source of truth since styling is precompiled in
+ * `skeleton.css`. Types-only: no runtime code, so it never participates in the styling layer.
+ */
+/**
+ * A skeleton's animation style — a moving `shimmer` sweep (the default), a gentle `pulse` fade, or a
+ * static `none`. Every variant respects `prefers-reduced-motion: reduce`, falling back to a calm static
+ * fill when the user asks for reduced motion.
+ */
+type SkeletonVariant = "shimmer" | "pulse" | "none";
+//#endregion
+export { SkeletonVariant };

package/dist/components/surface/surface.d.ts

@@ -1,6 +1,6 @@
+import { useRender } from "../../core/render.js";
 import { SurfaceElevation, SurfaceShade, SurfaceShadow } from "./surface.types.js";
 import { SurfacePartProps, SurfaceRootPropsArgs, rootProps } from "./surface.props.js";
-import { useRender } from "../../core/render.js";
 import { JSX, ReactElement, Ref } from "react";
 
 //#region src/components/surface/surface.d.ts

package/dist/icons/glyphs.js

@@ -1,2 +1,2 @@
-import { Check as CheckIcon, ChevronDown as ChevronDownIcon, ChevronRight as ChevronRightIcon, ChevronUp as ChevronUpIcon, ChevronsUpDown as ChevronsUpDownIcon, File as FileIcon, LoaderCircle as SpinnerIcon, Minus as MinusIcon, MoreHorizontal as MoreHorizontalIcon, Pipette as PipetteIcon, Plus as PlusIcon, Search as SearchIcon, Terminal as TerminalIcon, X as XIcon } from "lucide-react";
-export { CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, FileIcon, MinusIcon, MoreHorizontalIcon, PipetteIcon, PlusIcon, SearchIcon, SpinnerIcon, TerminalIcon, XIcon };
+import { Check as CheckIcon, ChevronDown as ChevronDownIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, ChevronUp as ChevronUpIcon, ChevronsLeft as ChevronsLeftIcon, ChevronsRight as ChevronsRightIcon, ChevronsUpDown as ChevronsUpDownIcon, File as FileIcon, LoaderCircle as SpinnerIcon, Minus as MinusIcon, MoreHorizontal as MoreHorizontalIcon, Pipette as PipetteIcon, Plus as PlusIcon, Search as SearchIcon, Terminal as TerminalIcon, X as XIcon } from "lucide-react";
+export { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, FileIcon, MinusIcon, MoreHorizontalIcon, PipetteIcon, PlusIcon, SearchIcon, SpinnerIcon, TerminalIcon, XIcon };

package/dist/index.d.ts

@@ -14,9 +14,16 @@ import { AvatarDataAttributes } from "./components/avatar/avatar.slots.js";
 import { BadgeSize, BadgeTone, BadgeVariant } from "./components/badge/badge.types.js";
 import { Badge } from "./components/badge/badge.js";
 import { BadgeDataAttributes } from "./components/badge/badge.slots.js";
+import { SkeletonVariant } from "./components/skeleton/skeleton.types.js";
+import { Skeleton } from "./components/skeleton/skeleton.js";
+import { SkeletonDataAttributes } from "./components/skeleton/skeleton.slots.js";
+import { BreadcrumbSize } from "./components/breadcrumb/breadcrumb.types.js";
+import { mergeProps, useRender } from "./core/render.js";
+import { Primitive } from "./core/primitive/primitive.js";
+import { Breadcrumb } from "./components/breadcrumb/breadcrumb.js";
+import { BreadcrumbDataAttributes } from "./components/breadcrumb/breadcrumb.slots.js";
 import { Button } from "./components/button/button.js";
 import { ButtonDataAttributes } from "./components/button/button.slots.js";
-import { mergeProps, useRender } from "./core/render.js";
 import { Surface } from "./components/surface/surface.js";
 import { ColorFormat } from "./components/color-picker/color.js";
 import { ColorPickerLabels } from "./components/color-picker/context.js";
@@ -33,6 +40,12 @@ import { Collapsible } from "./components/collapsible/collapsible.js";
 import { CollapsibleDataAttributes } from "./components/collapsible/collapsible.slots.js";
 import { Combobox } from "./components/combobox/combobox.js";
 import { ComboboxDataAttributes } from "./components/combobox/combobox.slots.js";
+import { CommandPage } from "./components/command/command.context.js";
+import { Command } from "./components/command/command.js";
+import { CommandDataAttributes } from "./components/command/command.slots.js";
+import { commandScore } from "./components/command/command-score.js";
+import { RankOptions, RankableItem, rankItems } from "./components/command/command-rank.js";
+import { UseCommandRankingOptions, createRankingWorker, useCommandRanking } from "./components/command/use-command-ranking.js";
 import { Menu } from "./components/menu/menu.js";
 import { MenuDataAttributes } from "./components/menu/menu.slots.js";
 import { ContextMenu } from "./components/context-menu/context-menu.js";
@@ -74,6 +87,9 @@ import { NumberFieldDataAttributes } from "./components/number-field/number-fiel
 import { OtpFieldSize } from "./components/otp-field/otp-field.props.js";
 import { OtpField } from "./components/otp-field/otp-field.js";
 import { OtpFieldDataAttributes } from "./components/otp-field/otp-field.slots.js";
+import { PaginationLabels, PaginationSize } from "./components/pagination/pagination.types.js";
+import { Pagination } from "./components/pagination/pagination.js";
+import { PaginationDataAttributes } from "./components/pagination/pagination.slots.js";
 import { PreviewCard } from "./components/preview-card/preview-card.js";
 import { PreviewCardDataAttributes } from "./components/preview-card/preview-card.slots.js";
 import { Popover } from "./components/popover/popover.js";
@@ -101,7 +117,6 @@ import { Toast } from "./components/toast/toast.js";
 import { ToastDataAttributes } from "./components/toast/toast.slots.js";
 import { Tooltip } from "./components/tooltip/tooltip.js";
 import { TooltipDataAttributes } from "./components/tooltip/tooltip.slots.js";
-import { Primitive } from "./core/primitive/primitive.js";
 import { RADIUS_PRESETS } from "./core/radius-scope/radius-scope.styles.js";
 import { RadiusScope } from "./core/radius-scope/radius-scope.js";
 import { ScrollArea } from "./components/scroll-area/scroll-area.js";
@@ -126,4 +141,4 @@ import { NoctisProvider } from "./core/noctis-provider.js";
 /** Package identifier — the workspace-resolution marker consumed by the app scaffold. */
 declare const UI_PACKAGE: "@stridge/noctis";
 //#endregion
-export { Accordion, AccordionDataAttributes, type AccordionLevel, type AccordionSize, AlertDialog, type AlertDialogActionTone, AlertDialogDataAttributes, Autocomplete, AutocompleteDataAttributes, type AutocompleteSize, Avatar, AvatarDataAttributes, Badge, BadgeDataAttributes, type BadgeSize, type BadgeTone, type BadgeVariant, BrandLogo, Button, ButtonDataAttributes, ButtonGroup, ButtonGroupDataAttributes, Checkbox, CheckboxDataAttributes, CheckboxGroup, type ClassNameProp, CodeBlock, CodeBlockDataAttributes, Collapsible, CollapsibleDataAttributes, type ColorFormat, ColorPicker, type ColorPickerLabels, ColorSwatch, ColorSwatchPicker, Combobox, ComboboxDataAttributes, ContextMenu, ContextMenuDataAttributes, CopyButton, CopyButtonDataAttributes, Dialog, DialogDataAttributes, EMPTY_SHEET_STACK, Field, FieldDataAttributes, Fieldset, Form, Icon, type IconGlyph, InlineCode, Input, type InputAdornmentSide, type InputAdornmentVariant, InputDataAttributes, type InputSize, Kbd, Menu, MenuDataAttributes, Menubar, MenubarDataAttributes, Meter, MeterDataAttributes, NavigationMenu, NavigationMenuDataAttributes, NoctisProvider, NumberField, NumberFieldDataAttributes, OtpField, OtpFieldDataAttributes, type OtpFieldSize, type PackageManager, Popover, PopoverDataAttributes, PreviewCard, PreviewCardDataAttributes, Primitive, Progress, ProgressDataAttributes, type ProgressSize, RADIUS_PRESETS, Radio, RadioDataAttributes, RadiusScope, Rail, RailDataAttributes, ScrollArea, ScrollAreaDataAttributes, SearchDialog, SearchDialogDataAttributes, type SearchResult, Select, SelectDataAttributes, Separator, SeparatorDataAttributes, Sheet, SheetStack, type SheetStackEntry, type SheetStackEntryInput, type SheetStackManager, Slider, SliderDataAttributes, type SliderSize, Surface, Switch, SwitchDataAttributes, Table, Tabs, TabsDataAttributes, Textarea, TextareaDataAttributes, type TextareaSize, Toast, ToastDataAttributes, type ToastManager, type ToastObject, type ToastOptions, type ToastPlacement, type ToastPromiseOptions, type ToastStatusOptions, type ToastType, type ToastUpdateOptions, Toggle, ToggleDataAttributes, ToggleGroup, Toolbar, ToolbarDataAttributes, Tooltip, TooltipDataAttributes, UI_PACKAGE, VisuallyHidden, mergeClassName, mergeProps, sheetStackReducer, useCopy, useReducedMotion, useRender, useSheetStack, useSheetStackContext, useToast };
+export { Accordion, AccordionDataAttributes, type AccordionLevel, type AccordionSize, AlertDialog, type AlertDialogActionTone, AlertDialogDataAttributes, Autocomplete, AutocompleteDataAttributes, type AutocompleteSize, Avatar, AvatarDataAttributes, Badge, BadgeDataAttributes, type BadgeSize, type BadgeTone, type BadgeVariant, BrandLogo, Breadcrumb, BreadcrumbDataAttributes, type BreadcrumbSize, Button, ButtonDataAttributes, ButtonGroup, ButtonGroupDataAttributes, Checkbox, CheckboxDataAttributes, CheckboxGroup, type ClassNameProp, CodeBlock, CodeBlockDataAttributes, Collapsible, CollapsibleDataAttributes, type ColorFormat, ColorPicker, type ColorPickerLabels, ColorSwatch, ColorSwatchPicker, Combobox, ComboboxDataAttributes, Command, CommandDataAttributes, type CommandPage, ContextMenu, ContextMenuDataAttributes, CopyButton, CopyButtonDataAttributes, Dialog, DialogDataAttributes, EMPTY_SHEET_STACK, Field, FieldDataAttributes, Fieldset, Form, Icon, type IconGlyph, InlineCode, Input, type InputAdornmentSide, type InputAdornmentVariant, InputDataAttributes, type InputSize, Kbd, Menu, MenuDataAttributes, Menubar, MenubarDataAttributes, Meter, MeterDataAttributes, NavigationMenu, NavigationMenuDataAttributes, NoctisProvider, NumberField, NumberFieldDataAttributes, OtpField, OtpFieldDataAttributes, type OtpFieldSize, type PackageManager, Pagination, PaginationDataAttributes, type PaginationLabels, type PaginationSize, Popover, PopoverDataAttributes, PreviewCard, PreviewCardDataAttributes, Primitive, Progress, ProgressDataAttributes, type ProgressSize, RADIUS_PRESETS, Radio, RadioDataAttributes, RadiusScope, Rail, RailDataAttributes, type RankOptions, type RankableItem, ScrollArea, ScrollAreaDataAttributes, SearchDialog, SearchDialogDataAttributes, type SearchResult, Select, SelectDataAttributes, Separator, SeparatorDataAttributes, Sheet, SheetStack, type SheetStackEntry, type SheetStackEntryInput, type SheetStackManager, Skeleton, SkeletonDataAttributes, type SkeletonVariant, Slider, SliderDataAttributes, type SliderSize, Surface, Switch, SwitchDataAttributes, Table, Tabs, TabsDataAttributes, Textarea, TextareaDataAttributes, type TextareaSize, Toast, ToastDataAttributes, type ToastManager, type ToastObject, type ToastOptions, type ToastPlacement, type ToastPromiseOptions, type ToastStatusOptions, type ToastType, type ToastUpdateOptions, Toggle, ToggleDataAttributes, ToggleGroup, Toolbar, ToolbarDataAttributes, Tooltip, TooltipDataAttributes, UI_PACKAGE, type UseCommandRankingOptions, VisuallyHidden, commandScore, createRankingWorker, mergeClassName, mergeProps, rankItems, sheetStackReducer, useCommandRanking, useCopy, useReducedMotion, useRender, useSheetStack, useSheetStackContext, useToast };

package/dist/index.js

@@ -12,6 +12,11 @@ import { AvatarDataAttributes } from "./components/avatar/avatar.slots.js";
 import { Avatar } from "./components/avatar/avatar.js";
 import { BadgeDataAttributes } from "./components/badge/badge.slots.js";
 import { Badge } from "./components/badge/badge.js";
+import { SkeletonDataAttributes } from "./components/skeleton/skeleton.slots.js";
+import { Skeleton } from "./components/skeleton/skeleton.js";
+import { Primitive } from "./core/primitive/primitive.js";
+import { BreadcrumbDataAttributes } from "./components/breadcrumb/breadcrumb.slots.js";
+import { Breadcrumb } from "./components/breadcrumb/breadcrumb.js";
 import { ButtonDataAttributes } from "./components/button/button.slots.js";
 import { Button } from "./components/button/button.js";
 import { ColorPicker } from "./components/color-picker/color-picker.js";
@@ -30,6 +35,13 @@ import { CollapsibleDataAttributes } from "./components/collapsible/collapsible.
 import { Collapsible } from "./components/collapsible/collapsible.js";
 import { ComboboxDataAttributes } from "./components/combobox/combobox.slots.js";
 import { Combobox } from "./components/combobox/combobox.js";
+import { DialogDataAttributes } from "./components/dialog/dialog.slots.js";
+import { Dialog } from "./components/dialog/dialog.js";
+import { CommandDataAttributes } from "./components/command/command.slots.js";
+import { Command } from "./components/command/command.js";
+import { commandScore } from "./components/command/command-score.js";
+import { rankItems } from "./components/command/command-rank.js";
+import { createRankingWorker, useCommandRanking } from "./components/command/use-command-ranking.js";
 import { Kbd } from "./components/kbd/kbd.js";
 import { MenuDataAttributes } from "./components/menu/menu.slots.js";
 import { Menu } from "./components/menu/menu.js";
@@ -41,8 +53,6 @@ import { InlineCode } from "./components/inline-code/inline-code.js";
 import { InputDataAttributes } from "./components/input/input.slots.js";
 import { Input } from "./components/input/input.js";
 import { SearchDialogDataAttributes } from "./components/search-dialog/search-dialog.slots.js";
-import { DialogDataAttributes } from "./components/dialog/dialog.slots.js";
-import { Dialog } from "./components/dialog/dialog.js";
 import { SearchDialog } from "./components/search-dialog/search-dialog.js";
 import { SelectDataAttributes } from "./components/select/select.slots.js";
 import { Select } from "./components/select/select.js";
@@ -65,6 +75,8 @@ import { NumberFieldDataAttributes } from "./components/number-field/number-fiel
 import { NumberField } from "./components/number-field/number-field.js";
 import { OtpFieldDataAttributes } from "./components/otp-field/otp-field.slots.js";
 import { OtpField } from "./components/otp-field/otp-field.js";
+import { PaginationDataAttributes } from "./components/pagination/pagination.slots.js";
+import { Pagination } from "./components/pagination/pagination.js";
 import { PreviewCardDataAttributes } from "./components/preview-card/preview-card.slots.js";
 import { PreviewCard } from "./components/preview-card/preview-card.js";
 import { PopoverDataAttributes } from "./components/popover/popover.slots.js";
@@ -89,7 +101,6 @@ import { useToast } from "./components/toast/toast.manager.js";
 import { Toast } from "./components/toast/toast.js";
 import { TooltipDataAttributes } from "./components/tooltip/tooltip.slots.js";
 import { Tooltip } from "./components/tooltip/tooltip.js";
-import { Primitive } from "./core/primitive/primitive.js";
 import { RADIUS_PRESETS } from "./core/radius-scope/radius-scope.styles.js";
 import { RadiusScope } from "./core/radius-scope/radius-scope.js";
 import { ScrollAreaDataAttributes } from "./components/scroll-area/scroll-area.slots.js";
@@ -111,4 +122,4 @@ import { NoctisProvider } from "./core/noctis-provider.js";
 /** Package identifier — the workspace-resolution marker consumed by the app scaffold. */
 const UI_PACKAGE = "@stridge/noctis";
 //#endregion
-export { Accordion, AccordionDataAttributes, AlertDialog, AlertDialogDataAttributes, Autocomplete, AutocompleteDataAttributes, Avatar, AvatarDataAttributes, Badge, BadgeDataAttributes, BrandLogo, Button, ButtonDataAttributes, ButtonGroup, ButtonGroupDataAttributes, Checkbox, CheckboxDataAttributes, CheckboxGroup, CodeBlock, CodeBlockDataAttributes, Collapsible, CollapsibleDataAttributes, ColorPicker, ColorSwatch, ColorSwatchPicker, Combobox, ComboboxDataAttributes, ContextMenu, ContextMenuDataAttributes, CopyButton, CopyButtonDataAttributes, Dialog, DialogDataAttributes, EMPTY_SHEET_STACK, Field, FieldDataAttributes, Fieldset, Form, Icon, InlineCode, Input, InputDataAttributes, Kbd, Menu, MenuDataAttributes, Menubar, MenubarDataAttributes, Meter, MeterDataAttributes, NavigationMenu, NavigationMenuDataAttributes, NoctisProvider, NumberField, NumberFieldDataAttributes, OtpField, OtpFieldDataAttributes, Popover, PopoverDataAttributes, PreviewCard, PreviewCardDataAttributes, Primitive, Progress, ProgressDataAttributes, RADIUS_PRESETS, Radio, RadioDataAttributes, RadiusScope, Rail, RailDataAttributes, ScrollArea, ScrollAreaDataAttributes, SearchDialog, SearchDialogDataAttributes, Select, SelectDataAttributes, Separator, SeparatorDataAttributes, Sheet, SheetStack, Slider, SliderDataAttributes, Surface, Switch, SwitchDataAttributes, Table, Tabs, TabsDataAttributes, Textarea, TextareaDataAttributes, Toast, ToastDataAttributes, Toggle, ToggleDataAttributes, ToggleGroup, Toolbar, ToolbarDataAttributes, Tooltip, TooltipDataAttributes, UI_PACKAGE, VisuallyHidden, mergeClassName, mergeProps, sheetStackReducer, useCopy, useReducedMotion, useRender, useSheetStack, useSheetStackContext, useToast };
+export { Accordion, AccordionDataAttributes, AlertDialog, AlertDialogDataAttributes, Autocomplete, AutocompleteDataAttributes, Avatar, AvatarDataAttributes, Badge, BadgeDataAttributes, BrandLogo, Breadcrumb, BreadcrumbDataAttributes, Button, ButtonDataAttributes, ButtonGroup, ButtonGroupDataAttributes, Checkbox, CheckboxDataAttributes, CheckboxGroup, CodeBlock, CodeBlockDataAttributes, Collapsible, CollapsibleDataAttributes, ColorPicker, ColorSwatch, ColorSwatchPicker, Combobox, ComboboxDataAttributes, Command, CommandDataAttributes, ContextMenu, ContextMenuDataAttributes, CopyButton, CopyButtonDataAttributes, Dialog, DialogDataAttributes, EMPTY_SHEET_STACK, Field, FieldDataAttributes, Fieldset, Form, Icon, InlineCode, Input, InputDataAttributes, Kbd, Menu, MenuDataAttributes, Menubar, MenubarDataAttributes, Meter, MeterDataAttributes, NavigationMenu, NavigationMenuDataAttributes, NoctisProvider, NumberField, NumberFieldDataAttributes, OtpField, OtpFieldDataAttributes, Pagination, PaginationDataAttributes, Popover, PopoverDataAttributes, PreviewCard, PreviewCardDataAttributes, Primitive, Progress, ProgressDataAttributes, RADIUS_PRESETS, Radio, RadioDataAttributes, RadiusScope, Rail, RailDataAttributes, ScrollArea, ScrollAreaDataAttributes, SearchDialog, SearchDialogDataAttributes, Select, SelectDataAttributes, Separator, SeparatorDataAttributes, Sheet, SheetStack, Skeleton, SkeletonDataAttributes, Slider, SliderDataAttributes, Surface, Switch, SwitchDataAttributes, Table, Tabs, TabsDataAttributes, Textarea, TextareaDataAttributes, Toast, ToastDataAttributes, Toggle, ToggleDataAttributes, ToggleGroup, Toolbar, ToolbarDataAttributes, Tooltip, TooltipDataAttributes, UI_PACKAGE, VisuallyHidden, commandScore, createRankingWorker, mergeClassName, mergeProps, rankItems, sheetStackReducer, useCommandRanking, useCopy, useReducedMotion, useRender, useSheetStack, useSheetStackContext, useToast };

package/dist/primitives/index.d.ts

@@ -50,12 +50,12 @@ export * from "@base-ui/react/field";
 export * from "@base-ui/react/checkbox-group";
 export * from "@base-ui/react/tabs";
 export * from "@base-ui/react/collapsible";
+export * from "@base-ui/react/dialog";
 export * from "@base-ui/react/context-menu";
 export * from "@base-ui/react/menu";
 export * from "@base-ui/react/fieldset";
 export * from "@base-ui/react/form";
 export * from "@base-ui/react/input";
-export * from "@base-ui/react/dialog";
 export * from "@base-ui/react/select";
 export * from "@base-ui/react/separator";
 export * from "@base-ui/react/menubar";

package/dist/primitives/index.js

@@ -15,12 +15,12 @@ import { checkbox_group_exports } from "./checkbox-group.js";
 import { tabs_exports } from "./tabs.js";
 import { collapsible_exports } from "./collapsible.js";
 import { Combobox } from "./combobox/combobox.js";
+import { dialog_exports } from "./dialog.js";
 import { context_menu_exports } from "./context-menu.js";
 import { menu_exports } from "./menu.js";
 import { fieldset_exports } from "./fieldset.js";
 import { form_exports } from "./form.js";
 import { input_exports } from "./input.js";
-import { dialog_exports } from "./dialog.js";
 import { select_exports } from "./select.js";
 import { separator_exports } from "./separator.js";
 import { menubar_exports } from "./menubar.js";
@@ -49,12 +49,12 @@ export * from "@base-ui/react/field";
 export * from "@base-ui/react/checkbox-group";
 export * from "@base-ui/react/tabs";
 export * from "@base-ui/react/collapsible";
+export * from "@base-ui/react/dialog";
 export * from "@base-ui/react/context-menu";
 export * from "@base-ui/react/menu";
 export * from "@base-ui/react/fieldset";
 export * from "@base-ui/react/form";
 export * from "@base-ui/react/input";
-export * from "@base-ui/react/dialog";
 export * from "@base-ui/react/select";
 export * from "@base-ui/react/separator";
 export * from "@base-ui/react/menubar";