@stridge/noctis 1.0.0-beta.0

package/dist/components/separator/separator.d.ts

@@ -0,0 +1,69 @@
+import { SeparatorOrientation } from "./separator.types.js";
+import { SeparatorProps, SeparatorPropsArgs, separatorProps } from "./separator.props.js";
+import { separator_d_exports } from "../../primitives/separator.js";
+import { ReactElement } from "react";
+
+//#region src/components/separator/separator.d.ts
+/**
+ * A hairline divider, built on Base UI's `Separator`. Semantic by default — Base UI gives it the
+ * `separator` role with the orientation, so screen readers announce the division without any extra
+ * wiring. A horizontal separator spans the inline flow; a vertical one divides items in a row.
+ *
+ * Pass `decorative` when the line is purely visual and the regions it splits already read as distinct
+ * to assistive tech (dividers between groups in a toolbar, or between landmarked sections): the element
+ * drops to `role="none"` so screen readers skip it. Leave it off (the default) when the line itself is
+ * what conveys the structure.
+ *
+ * Styling is precompiled in `separator.css`, keyed off the `data-slot="noctis-separator"` anchor plus
+ * the `data-orientation` Base UI stamps; the line's colour, thickness, and inset flow through the
+ * `--_separator-*` internals. Decorative or not, the paint is identical — only the role differs. To
+ * draw the same hairline on a non-`<Separator>` element, spread {@link Separator.props} onto it instead.
+ *
+ * @see {@link Separator.Props}
+ */
+declare function SeparatorImpl({
+  orientation,
+  decorative,
+  className,
+  ...props
+}: Separator.Props): ReactElement;
+/**
+ * The hairline divider. The component value carries the D12 `props()` escape hatch via `Object.assign`:
+ * spread `Separator.props({ orientation })` onto an element a `<Separator>` can't render to draw the
+ * same line. It returns a spreadable `{ "data-slot": "noctis-separator", ...dataAttrs }` bag the
+ * precompiled `separator.css` keys off.
+ */
+declare const Separator: typeof SeparatorImpl & {
+  props: typeof separatorProps;
+};
+/**
+ * Per-part prop and option types. Merges with the `Separator` function above, so `Separator` is the
+ * component value while `Separator.Props` is its prop type and `Separator.props` is the escape-hatch
+ * helper.
+ */
+declare namespace Separator {
+  type Props = Omit<separator_d_exports.Separator.Props, "className" | "orientation"> & {
+    /**
+     * The line's orientation. Horizontal spans the inline flow; vertical divides items in a row.
+     * @default "horizontal"
+     */
+    orientation?: SeparatorOrientation;
+    /**
+     * Treat the line as purely visual. When `true`, the element renders with `role="none"` so
+     * assistive tech skips it — for dividers whose regions are already distinct (toolbar groups,
+     * landmarked sections). When `false`, it keeps the announced `separator` role. The paint is
+     * identical either way; only the role changes.
+     * @default false
+     */
+    decorative?: boolean; /** Merged onto the rendered element's class list. */
+    className?: string;
+  };
+  /** The line's orientation. */
+  type Orientation = SeparatorOrientation;
+  /** Argument to the `Separator.props(...)` escape-hatch helper. */
+  type PropsArgs = SeparatorPropsArgs;
+  /** The spreadable data-attribute prop bag `Separator.props()` returns (D12). */
+  type PartProps = SeparatorProps;
+}
+//#endregion
+export { Separator };

package/dist/components/separator/separator.js

@@ -0,0 +1,44 @@
+"use client";
+import { separator_exports } from "../../primitives/separator.js";
+import { SEPARATOR_SLOTS } from "./separator.slots.js";
+import { separatorProps } from "./separator.props.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/separator/separator.tsx
+/**
+* A hairline divider, built on Base UI's `Separator`. Semantic by default — Base UI gives it the
+* `separator` role with the orientation, so screen readers announce the division without any extra
+* wiring. A horizontal separator spans the inline flow; a vertical one divides items in a row.
+*
+* Pass `decorative` when the line is purely visual and the regions it splits already read as distinct
+* to assistive tech (dividers between groups in a toolbar, or between landmarked sections): the element
+* drops to `role="none"` so screen readers skip it. Leave it off (the default) when the line itself is
+* what conveys the structure.
+*
+* Styling is precompiled in `separator.css`, keyed off the `data-slot="noctis-separator"` anchor plus
+* the `data-orientation` Base UI stamps; the line's colour, thickness, and inset flow through the
+* `--_separator-*` internals. Decorative or not, the paint is identical — only the role differs. To
+* draw the same hairline on a non-`<Separator>` element, spread {@link Separator.props} onto it instead.
+*
+* @see {@link Separator.Props}
+*/
+function SeparatorImpl({ orientation = "horizontal", decorative = false, className, ...props }) {
+	return /* @__PURE__ */ jsx(separator_exports.Separator, {
+		"data-slot": SEPARATOR_SLOTS.root,
+		orientation,
+		className,
+		...props,
+		...decorative ? {
+			role: "none",
+			"aria-orientation": void 0
+		} : {}
+	});
+}
+/**
+* The hairline divider. The component value carries the D12 `props()` escape hatch via `Object.assign`:
+* spread `Separator.props({ orientation })` onto an element a `<Separator>` can't render to draw the
+* same line. It returns a spreadable `{ "data-slot": "noctis-separator", ...dataAttrs }` bag the
+* precompiled `separator.css` keys off.
+*/
+const Separator = Object.assign(SeparatorImpl, { props: separatorProps });
+//#endregion
+export { Separator };

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

@@ -0,0 +1,30 @@
+import { SEPARATOR_SLOTS } from "./separator.slots.js";
+import { SeparatorOrientation } from "./separator.types.js";
+
+//#region src/components/separator/separator.props.d.ts
+/** A spreadable data-attribute prop bag — the shape `Separator.props()` returns. */
+type SeparatorProps = {
+  /** The catalog slot `separator.css` keys every rule off. */"data-slot": typeof SEPARATOR_SLOTS.root; /** The orientation axis the cross-axis size keys off. */
+  "data-orientation": SeparatorOrientation; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string;
+};
+/** Argument to `Separator.props(...)` — the orientation the `separator.css` rules key the line off. */
+interface SeparatorPropsArgs {
+  /**
+   * The line's orientation.
+   * @default "horizontal"
+   */
+  orientation?: SeparatorOrientation;
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/**
+ * Separator prop bag: the `data-slot` anchor plus the `data-orientation` axis the `separator.css` rules
+ * read. Spread it onto a non-`<Separator>` element to draw the same hairline.
+ */
+declare function separatorProps({
+  orientation,
+  className
+}?: SeparatorPropsArgs): SeparatorProps;
+//#endregion
+export { SeparatorProps, SeparatorPropsArgs, separatorProps };

package/dist/components/separator/separator.props.js

@@ -0,0 +1,30 @@
+import { SEPARATOR_SLOTS } from "./separator.slots.js";
+//#region src/components/separator/separator.props.ts
+/**
+* The D12 props helper for Separator — the data-attribute-native styling hook.
+*
+* `props(...)` returns a **spreadable props object** keyed off the `data-slot` anchor the precompiled
+* `separator.css` reads, plus the `data-orientation` axis the cross-axis size keys off. Spread it onto
+* any element to style it as a separator line:
+*
+*     <div role="separator" {...Separator.props({ orientation: "vertical" })} />
+*     // → <div data-slot="noctis-separator" data-orientation="vertical">
+*
+* The bag carries no className; an optional `className` passthrough is accepted and forwarded verbatim.
+*/
+/**
+* Separator prop bag: the `data-slot` anchor plus the `data-orientation` axis the `separator.css` rules
+* read. Spread it onto a non-`<Separator>` element to draw the same hairline.
+*/
+function separatorProps({ orientation = "horizontal", className } = {}) {
+	const bag = {
+		"data-slot": SEPARATOR_SLOTS.root,
+		"data-orientation": orientation
+	};
+	return className === void 0 ? bag : {
+		...bag,
+		className
+	};
+}
+//#endregion
+export { separatorProps };

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

@@ -0,0 +1,22 @@
+//#region src/components/separator/separator.slots.d.ts
+/**
+ * The slot vocabulary the {@link Separator} stamps as its `data-slot`. The authored source the
+ * orchestration file reads from, kebab-cased under the `noctis-` prefix; SLOTS.md still generates from
+ * the token-graph declaration.
+ */
+declare const SEPARATOR_SLOTS: {
+  readonly root: "noctis-separator";
+};
+/**
+ * The data attributes the {@link Separator} (and the Base UI separator it renders) expose for styling
+ * and testing. Each member's value is the attribute name and its JSDoc is the description; the docs API
+ * reference reads this enum directly, so the documented attributes can't drift from the component.
+ */
+declare enum SeparatorDataAttributes {
+  /** The catalog slot the precompiled `separator.css` keys every rule off. */
+  slot = "data-slot",
+  /** The line's orientation — `horizontal` (default) | `vertical`; Base UI stamps it, and the CSS keys the cross-axis size off it. */
+  orientation = "data-orientation"
+}
+//#endregion
+export { SEPARATOR_SLOTS, SeparatorDataAttributes };

package/dist/components/separator/separator.slots.js

@@ -0,0 +1,21 @@
+//#region src/components/separator/separator.slots.ts
+/**
+* The slot vocabulary the {@link Separator} stamps as its `data-slot`. The authored source the
+* orchestration file reads from, kebab-cased under the `noctis-` prefix; SLOTS.md still generates from
+* the token-graph declaration.
+*/
+const SEPARATOR_SLOTS = { root: "noctis-separator" };
+/**
+* The data attributes the {@link Separator} (and the Base UI separator it renders) expose for styling
+* and testing. Each member's value is the attribute name and its JSDoc is the description; the docs API
+* reference reads this enum directly, so the documented attributes can't drift from the component.
+*/
+let SeparatorDataAttributes = /* @__PURE__ */ function(SeparatorDataAttributes) {
+	/** The catalog slot the precompiled `separator.css` keys every rule off. */
+	SeparatorDataAttributes["slot"] = "data-slot";
+	/** The line's orientation — `horizontal` (default) | `vertical`; Base UI stamps it, and the CSS keys the cross-axis size off it. */
+	SeparatorDataAttributes["orientation"] = "data-orientation";
+	return SeparatorDataAttributes;
+}({});
+//#endregion
+export { SEPARATOR_SLOTS, SeparatorDataAttributes };

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

@@ -0,0 +1,5 @@
+//#region src/components/separator/separator.types.d.ts
+/** The line's orientation — a horizontal rule across the flow, or a vertical divider between items. */
+type SeparatorOrientation = "horizontal" | "vertical";
+//#endregion
+export { SeparatorOrientation };

package/dist/components/sheet/index.d.ts

@@ -0,0 +1,3 @@
+import { SheetSide, SheetSize } from "./sheet.types.js";
+import { Sheet } from "./sheet.js";
+import { EMPTY_SHEET_STACK, SheetStack, SheetStackEntry, SheetStackEntryInput, SheetStackManager, sheetStackReducer, useSheetStack, useSheetStackContext } from "./sheet-stack.js";

package/dist/components/sheet/sheet-stack.d.ts

@@ -0,0 +1,106 @@
+import { Sheet } from "./sheet.js";
+import { ReactElement, ReactNode } from "react";
+
+//#region src/components/sheet/sheet-stack.d.ts
+/** A mounted layer in the stack. Carries its own content and panel shape, plus its visibility. */
+interface SheetStackEntry {
+  /** Stable identity for the layer — its React key and the handle `close`/`remove` take. */
+  key: string;
+  /** What the panel renders. Compose `Sheet.Header`/`Body`/`Footer` and a `Sheet.Close` here. */
+  content: ReactNode;
+  /** Which edge this layer docks to. Defaults to `end`. */
+  side?: Sheet.Side;
+  /** This layer's cross-axis extent. Defaults to `md`. */
+  size?: Sheet.Size;
+  /** Whether the layer is currently shown. Stays mounted while `false` so it can animate out. */
+  open: boolean;
+}
+/** A layer to add — like {@link SheetStackEntry} but visibility and key are managed for you. */
+interface SheetStackEntryInput {
+  /** Optional stable key. One is generated when omitted. Reusing a key replaces that layer. */
+  key?: string;
+  content: ReactNode;
+  side?: Sheet.Side;
+  size?: Sheet.Size;
+}
+/**
+ * Imperative control over a stack of layers. The state lives here; the UI is dependency-injected via
+ * `<SheetStack manager={…}>`. Sibling and nested components reach the same manager through
+ * {@link useSheetStackContext}, so a button anywhere under the provider can push or pop without prop
+ * threading.
+ */
+interface SheetStackManager {
+  /** Every mounted layer, back to front — including any currently animating out. */
+  entries: readonly SheetStackEntry[];
+  /** How many layers are currently shown. */
+  depth: number;
+  /** Push a new layer on top. Returns its key. */
+  push: (entry: SheetStackEntryInput) => string;
+  /** Hide the top-most layer (and let it animate out). */
+  pop: () => void;
+  /** Hide a layer and everything stacked above it. */
+  close: (key: string) => void;
+  /** Swap the whole stack for a new set of layers. */
+  replace: (entries: SheetStackEntryInput[]) => void;
+  /** Hide every layer. */
+  reset: () => void;
+  /** Unmount a layer immediately, skipping its exit animation. */
+  remove: (key: string) => void;
+}
+type Action = {
+  type: "push";
+  entry: SheetStackEntry;
+} | {
+  type: "pop";
+} | {
+  type: "close";
+  key: string;
+} | {
+  type: "replace";
+  entries: SheetStackEntry[];
+} | {
+  type: "reset";
+} | {
+  type: "remove";
+  key: string;
+};
+/** The empty stack. */
+declare const EMPTY_SHEET_STACK: readonly SheetStackEntry[];
+/**
+ * Pure stack transition. Exported so the state machine can be exercised directly: `push` de-duplicates
+ * by key (re-adding moves the layer to the top), `pop`/`close` only hide layers so they can animate
+ * out, and `remove` is the hard unmount that follows once the exit finishes.
+ */
+declare function sheetStackReducer(state: SheetStackEntry[], action: Action): SheetStackEntry[];
+/**
+ * Create a stack manager. Hold one of these at the top of a flow, render it with `<SheetStack>`, and
+ * drive it with `push`/`pop`/`close`. Each layer is a real nested Base UI dialog, so focus trapping,
+ * scroll-lock, and `Escape` ordering across the stack are handled for you.
+ */
+declare function useSheetStack(): SheetStackManager;
+/**
+ * Read the stack manager from context. Use it inside layer content (or anywhere under `<SheetStack>`)
+ * to push a deeper layer, pop back, or close the stack without threading the manager through props.
+ */
+declare function useSheetStackContext(): SheetStackManager;
+/**
+ * Renders a {@link SheetStackManager}'s layers as a stack of nested sheets and shares the manager
+ * through context. State is owned by `useSheetStack` and injected here, so the same layer content can
+ * be driven by any manager and read by any descendant.
+ */
+declare function SheetStack({
+  manager,
+  children
+}: SheetStack.Props): ReactElement;
+/**
+ * The component's prop type. Types-only — it emits no runtime code and merges with the `SheetStack`
+ * function above, so `SheetStack` is the component value while `SheetStack.Props` is its prop type.
+ */
+declare namespace SheetStack {
+  type Props = {
+    /** The manager from {@link useSheetStack}. */manager: SheetStackManager; /** Extra nodes rendered under the provider — e.g. triggers that call `manager` via context. */
+    children?: ReactNode;
+  };
+}
+//#endregion
+export { EMPTY_SHEET_STACK, SheetStack, SheetStackEntry, SheetStackEntryInput, SheetStackManager, sheetStackReducer, useSheetStack, useSheetStackContext };

package/dist/components/sheet/sheet-stack.js

@@ -0,0 +1,146 @@
+"use client";
+import { Sheet } from "./sheet.js";
+import { createContext, use, useMemo, useReducer, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/sheet/sheet-stack.tsx
+/** The empty stack. */
+const EMPTY_SHEET_STACK = [];
+/** Index of the top-most shown layer, or `-1` when none is shown. */
+function topVisibleIndex(state) {
+	for (let i = state.length - 1; i >= 0; i -= 1) if (state[i]?.open) return i;
+	return -1;
+}
+/**
+* Pure stack transition. Exported so the state machine can be exercised directly: `push` de-duplicates
+* by key (re-adding moves the layer to the top), `pop`/`close` only hide layers so they can animate
+* out, and `remove` is the hard unmount that follows once the exit finishes.
+*/
+function sheetStackReducer(state, action) {
+	switch (action.type) {
+		case "push": return [...state.filter((entry) => entry.key !== action.entry.key), action.entry];
+		case "pop": {
+			const index = topVisibleIndex(state);
+			if (index === -1) return state;
+			return state.map((entry, i) => i === index ? {
+				...entry,
+				open: false
+			} : entry);
+		}
+		case "close": {
+			const index = state.findIndex((entry) => entry.key === action.key);
+			if (index === -1) return state;
+			return state.map((entry, i) => i >= index ? {
+				...entry,
+				open: false
+			} : entry);
+		}
+		case "replace": return action.entries;
+		case "reset": return state.map((entry) => ({
+			...entry,
+			open: false
+		}));
+		case "remove": return state.filter((entry) => entry.key !== action.key);
+		default: return state;
+	}
+}
+/**
+* Create a stack manager. Hold one of these at the top of a flow, render it with `<SheetStack>`, and
+* drive it with `push`/`pop`/`close`. Each layer is a real nested Base UI dialog, so focus trapping,
+* scroll-lock, and `Escape` ordering across the stack are handled for you.
+*/
+function useSheetStack() {
+	const [entries, dispatch] = useReducer(sheetStackReducer, EMPTY_SHEET_STACK);
+	const counter = useRef(0);
+	return useMemo(() => {
+		return {
+			entries,
+			depth: entries.reduce((count, entry) => entry.open ? count + 1 : count, 0),
+			push(input) {
+				counter.current += 1;
+				const key = input.key ?? `sheet-stack-${counter.current}`;
+				dispatch({
+					type: "push",
+					entry: {
+						...input,
+						key,
+						open: true
+					}
+				});
+				return key;
+			},
+			pop() {
+				dispatch({ type: "pop" });
+			},
+			close(key) {
+				dispatch({
+					type: "close",
+					key
+				});
+			},
+			replace(inputs) {
+				counter.current += 1;
+				const base = counter.current;
+				dispatch({
+					type: "replace",
+					entries: inputs.map((input, i) => ({
+						...input,
+						key: input.key ?? `sheet-stack-${base}-${i}`,
+						open: true
+					}))
+				});
+			},
+			reset() {
+				dispatch({ type: "reset" });
+			},
+			remove(key) {
+				dispatch({
+					type: "remove",
+					key
+				});
+			}
+		};
+	}, [entries]);
+}
+const SheetStackContext = createContext(null);
+/**
+* Read the stack manager from context. Use it inside layer content (or anywhere under `<SheetStack>`)
+* to push a deeper layer, pop back, or close the stack without threading the manager through props.
+*/
+function useSheetStackContext() {
+	const manager = use(SheetStackContext);
+	if (!manager) throw new Error("useSheetStackContext must be used within <SheetStack>.");
+	return manager;
+}
+/** Render layers from `index` down, each nested inside the one before it so the stack reads as depth. */
+function renderLayer(entries, index, manager) {
+	if (index >= entries.length) return null;
+	const entry = entries[index];
+	if (!entry) return null;
+	return /* @__PURE__ */ jsx(Sheet.Root, {
+		open: entry.open,
+		onOpenChange: (open) => {
+			if (!open) manager.close(entry.key);
+		},
+		onOpenChangeComplete: (open) => {
+			if (!open) manager.remove(entry.key);
+		},
+		children: /* @__PURE__ */ jsxs(Sheet.Content, {
+			side: entry.side,
+			size: entry.size,
+			children: [entry.content, renderLayer(entries, index + 1, manager)]
+		})
+	}, entry.key);
+}
+/**
+* Renders a {@link SheetStackManager}'s layers as a stack of nested sheets and shares the manager
+* through context. State is owned by `useSheetStack` and injected here, so the same layer content can
+* be driven by any manager and read by any descendant.
+*/
+function SheetStack({ manager, children }) {
+	return /* @__PURE__ */ jsxs(SheetStackContext, {
+		value: manager,
+		children: [renderLayer(manager.entries, 0, manager), children]
+	});
+}
+//#endregion
+export { EMPTY_SHEET_STACK, SheetStack, sheetStackReducer, useSheetStack, useSheetStackContext };