@stridge/noctis 1.0.0-beta.0

package/dist/components/context-menu/context-menu.props.d.ts

@@ -0,0 +1,22 @@
+//#region src/components/context-menu/context-menu.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `ContextMenu.*.props()` returns. */
+type ContextMenuPartProps = {
+  /** The slot value the matching `context-menu.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 (empty string) or absent (`undefined`); never `false`. */
+  [attr: `data-${string}`]: string | undefined;
+};
+/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
+interface ContextMenuPropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Trigger prop bag: just the slot anchor (the area that opens the menu on right-click / long-press). */
+declare function triggerProps({
+  className
+}?: ContextMenuPropsArgs): ContextMenuPartProps;
+/** Content prop bag: just the slot anchor (the popup surface paint is owned by the composed Surface). */
+declare function contentProps({
+  className
+}?: ContextMenuPropsArgs): ContextMenuPartProps;
+//#endregion
+export { ContextMenuPartProps, contentProps, triggerProps };

package/dist/components/context-menu/context-menu.props.js

@@ -0,0 +1,32 @@
+import { CONTEXT_MENU_SLOTS } from "./context-menu.slots.js";
+//#region src/components/context-menu/context-menu.props.ts
+/**
+* The D12 unified variant contract for ContextMenu — a per-part set of `props(...)` builders that each
+* return a **spreadable props object** of the form `{ "data-slot": "noctis-context-menu-<part>",
+* ...dataAttrs }`, derived from the part's inputs.
+*
+* Under the single-`data-slot` anchor model the `data-slot` is the only styling hook needed —
+* `context-menu.css` keys every rule off it — so spreading a part's `props()` onto a *foreign* element
+* styles it as that part:
+*
+*     <div {...ContextMenu.Trigger.props()}>Right-click me</div>
+*     // → <div data-slot="noctis-context-menu-trigger">
+*
+* The escape hatch carries no className (styling is attribute-driven); an optional `className`
+* passthrough is accepted and forwarded verbatim. The shared row family (items, groups, separators)
+* reuses `Menu`'s `props()` helpers — there is no second copy here.
+*/
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Trigger prop bag: just the slot anchor (the area that opens the menu on right-click / long-press). */
+function triggerProps({ className } = {}) {
+	return withClassName({ "data-slot": CONTEXT_MENU_SLOTS.trigger }, className);
+}
+/** Content prop bag: just the slot anchor (the popup surface paint is owned by the composed Surface). */
+function contentProps({ className } = {}) {
+	return withClassName({ "data-slot": CONTEXT_MENU_SLOTS.content }, className);
+}
+//#endregion
+export { contentProps, triggerProps };

package/dist/components/context-menu/context-menu.slots.d.ts

@@ -0,0 +1,24 @@
+//#region src/components/context-menu/context-menu.slots.d.ts
+/**
+ * The `data-*` hooks `ContextMenu` stamps on its parts, for host-side styling and tests. Slot values
+ * mark each rendered element; the state attributes are emitted by Base UI's ContextMenu — pair a slot
+ * with a state to target, say, the trigger only while its menu is open.
+ */
+declare enum ContextMenuDataAttributes {
+  /** The trigger area element. */
+  trigger = "data-slot",
+  /** Present on the trigger while a touch long-press is registering — paints the neutral pressed tint. */
+  pressed = "data-pressed",
+  /** Present on the trigger while its menu is open — the off-by-default "armed" tint hook. */
+  popupOpen = "data-popup-open",
+  /** The side of the anchor the content actually rendered on (`bottom`, `inline-end`, …). */
+  side = "data-side",
+  /** Present on the content for the first frame after mount — the transition's start state. */
+  startingStyle = "data-starting-style",
+  /** Present on the content while it transitions out before unmounting. */
+  endingStyle = "data-ending-style",
+  /** Present on the content when the change should not animate (keyboard open, dismissal). */
+  instant = "data-instant"
+}
+//#endregion
+export { ContextMenuDataAttributes };

package/dist/components/context-menu/context-menu.slots.js

@@ -0,0 +1,42 @@
+//#region src/components/context-menu/context-menu.slots.ts
+/**
+* The slot vocabulary every `ContextMenu` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, prefixed `noctis-context-menu-{part}` (the precompiled
+* `context-menu.css` keys its rules off these anchors); SLOTS.md still generates from the token-graph
+* declarations.
+*
+* Only the right-click-specific parts live here — the trigger area and the floating popup
+* (positioner / content / viewport). The row family (items, groups, separators, shortcuts) is
+* `Menu`'s, reused verbatim, so those parts carry their own `noctis-menu-*` slots and `menu.css`
+* styles them. `positioner` is a styling-only anchor (the z-index wrapper) and carries no token mint.
+*/
+const CONTEXT_MENU_SLOTS = {
+	trigger: "noctis-context-menu-trigger",
+	positioner: "noctis-context-menu-positioner",
+	content: "noctis-context-menu-content",
+	viewport: "noctis-context-menu-viewport"
+};
+/**
+* The `data-*` hooks `ContextMenu` stamps on its parts, for host-side styling and tests. Slot values
+* mark each rendered element; the state attributes are emitted by Base UI's ContextMenu — pair a slot
+* with a state to target, say, the trigger only while its menu is open.
+*/
+let ContextMenuDataAttributes = /* @__PURE__ */ function(ContextMenuDataAttributes) {
+	/** The trigger area element. */
+	ContextMenuDataAttributes["trigger"] = "data-slot";
+	/** Present on the trigger while a touch long-press is registering — paints the neutral pressed tint. */
+	ContextMenuDataAttributes["pressed"] = "data-pressed";
+	/** Present on the trigger while its menu is open — the off-by-default "armed" tint hook. */
+	ContextMenuDataAttributes["popupOpen"] = "data-popup-open";
+	/** The side of the anchor the content actually rendered on (`bottom`, `inline-end`, …). */
+	ContextMenuDataAttributes["side"] = "data-side";
+	/** Present on the content for the first frame after mount — the transition's start state. */
+	ContextMenuDataAttributes["startingStyle"] = "data-starting-style";
+	/** Present on the content while it transitions out before unmounting. */
+	ContextMenuDataAttributes["endingStyle"] = "data-ending-style";
+	/** Present on the content when the change should not animate (keyboard open, dismissal). */
+	ContextMenuDataAttributes["instant"] = "data-instant";
+	return ContextMenuDataAttributes;
+}({});
+//#endregion
+export { CONTEXT_MENU_SLOTS, ContextMenuDataAttributes };

package/dist/components/context-menu/index.d.ts

@@ -0,0 +1,2 @@
+import { ContextMenu } from "./context-menu.js";
+import { ContextMenuDataAttributes } from "./context-menu.slots.js";

package/dist/components/copy-button/copy-button.d.ts

@@ -0,0 +1,56 @@
+import { Button } from "../button/button.js";
+import { CopyButtonPartProps, CopyButtonRootPropsArgs, rootProps } from "./copy-button.props.js";
+import { ReactElement } from "react";
+
+//#region src/components/copy-button/copy-button.d.ts
+/**
+ * A clipboard {@link Button} on steroids. It owns the copy behaviour — a glyph that crossfades from
+ * clipboard to a check on success, a `data-copied` hook, and a state-aware `aria-label` from the labels
+ * (English defaults, so a consuming app can route them through its own i18n) — and is otherwise a plain
+ * Noctis `Button`. It sets no opinionated `variant`/`size`/`iconOnly`, so it drops into any context: a
+ * ghost icon in a code block, a `secondary` "Copy link" with a visible label, a primary action.
+ * `getText` is resolved at click time so it can read live DOM; everything else forwards to `Button`.
+ *
+ * Styling is precompiled in `copy-button.css`, keyed off the prefixed `data-slot` anchors
+ * (`noctis-code-copy*`) plus the per-glyph `data-glyph`/`data-copied` the crossfade rules read; the
+ * control chrome is the wrapped `Button`'s. The icon-only code affordance reads the `code-copy` size
+ * internal so it aligns with the code tab strip (the cross-component coupling that used to live in
+ * `code-block`), while a non-icon CopyButton stays unsized.
+ *
+ * @see {@link CopyButton.Props}
+ */
+declare function CopyButtonImpl({
+  getText,
+  copyLabel,
+  copiedLabel,
+  children,
+  ...props
+}: CopyButton.Props): ReactElement;
+/**
+ * The clipboard copy affordance. The component value carries the D12 `props()` escape hatch via
+ * `Object.assign`: spread `CopyButton.props({ copied })` onto an element a `<CopyButton>` can't render to
+ * stamp the `noctis-code-copy` slot + `data-copied` state the precompiled `copy-button.css` keys off (pair
+ * with `Button.props(...)` for the control chrome). It returns a spreadable `{ "data-slot":
+ * "noctis-code-copy", ...dataAttrs }` bag — the data-attribute-native escape hatch.
+ */
+declare const CopyButton: typeof CopyButtonImpl & {
+  props: typeof rootProps;
+};
+/**
+ * Per-part prop types. Types-only — it emits no runtime code and merges with the `CopyButton` value
+ * above, so `CopyButton` is the component value while `CopyButton.Props` is its prop type and
+ * `CopyButton.props` is the escape-hatch helper.
+ */
+declare namespace CopyButton {
+  type Props = Omit<Button.Props, "onClick" | "aria-label" | "title"> & {
+    /** Resolved at click time so it can read live DOM (the active panel's text). */getText: () => string; /** Accessible label at rest. Defaults to `Copy`; override to translate. */
+    copyLabel?: string; /** Accessible label just after copying. Defaults to `Copied`; override to translate. */
+    copiedLabel?: string;
+  };
+  /** Argument to the `CopyButton.props(...)` escape-hatch helper. */
+  type PropsArgs = CopyButtonRootPropsArgs;
+  /** The spreadable data-attribute prop bag `CopyButton.props()` returns (D12). */
+  type PartProps = CopyButtonPartProps;
+}
+//#endregion
+export { CopyButton };

package/dist/components/copy-button/copy-button.js

@@ -0,0 +1,88 @@
+"use client";
+import { Button } from "../button/button.js";
+import { useCopy } from "../../core/use-copy.js";
+import { COPY_BUTTON_SLOTS } from "./copy-button.slots.js";
+import { glyphBoxProps, glyphProps, rootProps } from "./copy-button.props.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/copy-button/copy-button.tsx
+/**
+* A clipboard {@link Button} on steroids. It owns the copy behaviour — a glyph that crossfades from
+* clipboard to a check on success, a `data-copied` hook, and a state-aware `aria-label` from the labels
+* (English defaults, so a consuming app can route them through its own i18n) — and is otherwise a plain
+* Noctis `Button`. It sets no opinionated `variant`/`size`/`iconOnly`, so it drops into any context: a
+* ghost icon in a code block, a `secondary` "Copy link" with a visible label, a primary action.
+* `getText` is resolved at click time so it can read live DOM; everything else forwards to `Button`.
+*
+* Styling is precompiled in `copy-button.css`, keyed off the prefixed `data-slot` anchors
+* (`noctis-code-copy*`) plus the per-glyph `data-glyph`/`data-copied` the crossfade rules read; the
+* control chrome is the wrapped `Button`'s. The icon-only code affordance reads the `code-copy` size
+* internal so it aligns with the code tab strip (the cross-component coupling that used to live in
+* `code-block`), while a non-icon CopyButton stays unsized.
+*
+* @see {@link CopyButton.Props}
+*/
+function CopyButtonImpl({ getText, copyLabel = "Copy", copiedLabel = "Copied", children, ...props }) {
+	const { copied, copy } = useCopy(getText);
+	const label = copied ? copiedLabel : copyLabel;
+	return /* @__PURE__ */ jsxs(Button, {
+		...props,
+		"data-slot": COPY_BUTTON_SLOTS.root,
+		"data-copied": copied || void 0,
+		onClick: copy,
+		"aria-label": label,
+		title: label,
+		children: [/* @__PURE__ */ jsx(CopyCheckGlyph, { copied }), children]
+	});
+}
+/**
+* Two stacked glyphs in one box that crossfade on `copied` — clipboard at rest, a check after. Each glyph
+* is self-contained: it carries its own `data-glyph` (clipboard|check) **and** `data-copied`, so the
+* crossfade rules in `copy-button.css` key off the glyph's own attributes, never a descendant
+* `[data-copied] …` selector. Sized on the `sm` icon step via the `--_code-copy-glyph-size` internal.
+*/
+function CopyCheckGlyph({ copied }) {
+	return /* @__PURE__ */ jsxs("span", {
+		...glyphBoxProps(),
+		children: [/* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.7",
+			"aria-hidden": true,
+			...glyphProps({
+				glyph: "clipboard",
+				copied
+			}),
+			children: [/* @__PURE__ */ jsx("rect", {
+				x: "9",
+				y: "9",
+				width: "13",
+				height: "13",
+				rx: "2"
+			}), /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })]
+		}), /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": true,
+			...glyphProps({
+				glyph: "check",
+				copied
+			}),
+			children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+		})]
+	});
+}
+/**
+* The clipboard copy affordance. The component value carries the D12 `props()` escape hatch via
+* `Object.assign`: spread `CopyButton.props({ copied })` onto an element a `<CopyButton>` can't render to
+* stamp the `noctis-code-copy` slot + `data-copied` state the precompiled `copy-button.css` keys off (pair
+* with `Button.props(...)` for the control chrome). It returns a spreadable `{ "data-slot":
+* "noctis-code-copy", ...dataAttrs }` bag — the data-attribute-native escape hatch.
+*/
+const CopyButton = Object.assign(CopyButtonImpl, { props: rootProps });
+//#endregion
+export { CopyButton };

package/dist/components/copy-button/copy-button.props.d.ts

@@ -0,0 +1,27 @@
+//#region src/components/copy-button/copy-button.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `CopyButton.*.props()` returns. */
+type CopyButtonPartProps = {
+  /** The slot value the matching `copy-button.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 the root `props(...)` — the post-copy state the affordance carries. */
+interface CopyButtonRootPropsArgs extends BasePropsArgs {
+  /** Present for the brief window after a successful copy, while the glyph shows the check. */
+  copied?: boolean;
+}
+/**
+ * Root prop bag: the `noctis-code-copy` slot anchor plus the `data-copied` state. The escape hatch for an
+ * element a `<CopyButton>` can't render — pair with `Button.props(...)` for the control chrome.
+ */
+declare function rootProps({
+  copied,
+  className
+}?: CopyButtonRootPropsArgs): CopyButtonPartProps;
+//#endregion
+export { CopyButtonPartProps, CopyButtonRootPropsArgs, rootProps };

package/dist/components/copy-button/copy-button.props.js

@@ -0,0 +1,51 @@
+import { COPY_BUTTON_SLOTS } from "./copy-button.slots.js";
+//#region src/components/copy-button/copy-button.props.ts
+/**
+* The D12 unified variant contract for CopyButton — a per-part set of `props(...)` builders that each
+* return a **spreadable props object** of the form `{ "data-slot": "noctis-code-copy<part>", ...dataAttrs }`,
+* derived from the part's state inputs.
+*
+* Under the single-`data-slot` anchor model the `data-slot` is the only styling hook needed —
+* `copy-button.css` keys every rule off it (plus the per-glyph `data-glyph`/`data-copied`) — so spreading
+* a part's `props()` onto a *foreign* element styles it as that part:
+*
+*     <span {...CopyButton.Glyph.props({ glyph: "check", copied: true })} />
+*     // → <span data-slot="noctis-code-copy-glyph" data-glyph="check" data-copied="true">
+*
+* The escape hatch carries no className (styling is attribute-driven); an optional `className`
+* passthrough is accepted and forwarded verbatim. The same slot→attribute mapping is emitted as data from
+* the token graph (`generated/declarations.json`) 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 `noctis-code-copy` slot anchor plus the `data-copied` state. The escape hatch for an
+* element a `<CopyButton>` can't render — pair with `Button.props(...)` for the control chrome.
+*/
+function rootProps({ copied, className } = {}) {
+	return withClassName({
+		"data-slot": COPY_BUTTON_SLOTS.root,
+		"data-copied": copied ? "true" : void 0
+	}, className);
+}
+/** Glyph-box prop bag: just the slot anchor (the stacked-glyph box; size flows from the `--_code-copy-glyph-size` internal). */
+function glyphBoxProps({ className } = {}) {
+	return withClassName({ "data-slot": COPY_BUTTON_SLOTS.glyphBox }, className);
+}
+/**
+* Glyph prop bag: the slot anchor plus the per-glyph `data-glyph` and `data-copied`. Both are stamped on
+* the glyph itself so the crossfade rule keys off the glyph's own attributes — never a descendant
+* `[data-copied] …` selector (the over-scoping that bit search-dialog/code-block).
+*/
+function glyphProps({ glyph, copied, className }) {
+	return withClassName({
+		"data-slot": COPY_BUTTON_SLOTS.glyph,
+		"data-glyph": glyph,
+		"data-copied": copied ? "true" : void 0
+	}, className);
+}
+//#endregion
+export { glyphBoxProps, glyphProps, rootProps };

package/dist/components/copy-button/copy-button.slots.d.ts

@@ -0,0 +1,20 @@
+//#region src/components/copy-button/copy-button.slots.d.ts
+/**
+ * The data attributes `CopyButton` (and the `Button` 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 CopyButtonDataAttributes {
+  /** Marks the rendered element as the copy affordance for styling and testing hooks. */
+  slot = "data-slot",
+  /**
+   * Present for the brief window after a successful copy, while the glyph shows the check. Stamped on
+   * the root (a test/host hook) **and** on each glyph (self-contained — the crossfade rules key off the
+   * glyph's own `data-copied`, never a descendant `[data-copied] …` selector).
+   */
+  copied = "data-copied",
+  /** Which glyph a `code-copy-glyph` element paints — `clipboard` (at rest) or `check` (after copy). */
+  glyph = "data-glyph"
+}
+//#endregion
+export { CopyButtonDataAttributes };

package/dist/components/copy-button/copy-button.slots.js

@@ -0,0 +1,36 @@
+//#region src/components/copy-button/copy-button.slots.ts
+/**
+* The slot vocabulary `CopyButton` stamps as its `data-slot`. The authored source the orchestration
+* file reads from, kebab-cased `{component}-{part}`; SLOTS.md still generates from the token-graph
+* declarations (which carry only the `code-copy` root anatomy — the glyph box/glyphs are precompiled
+* descendants of the root, keyed off their own slot + `data-glyph`/`data-copied`, not graph anatomy).
+*
+* Migrated to the single-`data-slot` anchor: every value is `noctis-`-prefixed (matching the
+* `slotPrefix: "noctis"` on the `code-copy` graph declaration), so the precompiled `copy-button.css`
+* targets `[data-slot="noctis-code-copy*"]`.
+*/
+const COPY_BUTTON_SLOTS = {
+	root: "noctis-code-copy",
+	glyphBox: "noctis-code-copy-glyph-box",
+	glyph: "noctis-code-copy-glyph"
+};
+/**
+* The data attributes `CopyButton` (and the `Button` 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 CopyButtonDataAttributes = /* @__PURE__ */ function(CopyButtonDataAttributes) {
+	/** Marks the rendered element as the copy affordance for styling and testing hooks. */
+	CopyButtonDataAttributes["slot"] = "data-slot";
+	/**
+	* Present for the brief window after a successful copy, while the glyph shows the check. Stamped on
+	* the root (a test/host hook) **and** on each glyph (self-contained — the crossfade rules key off the
+	* glyph's own `data-copied`, never a descendant `[data-copied] …` selector).
+	*/
+	CopyButtonDataAttributes["copied"] = "data-copied";
+	/** Which glyph a `code-copy-glyph` element paints — `clipboard` (at rest) or `check` (after copy). */
+	CopyButtonDataAttributes["glyph"] = "data-glyph";
+	return CopyButtonDataAttributes;
+}({});
+//#endregion
+export { COPY_BUTTON_SLOTS, CopyButtonDataAttributes };

package/dist/components/copy-button/index.d.ts

@@ -0,0 +1,2 @@
+import { CopyButton } from "./copy-button.js";
+import { CopyButtonDataAttributes } from "./copy-button.slots.js";

package/dist/components/dialog/dialog.context.js

@@ -0,0 +1,15 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/dialog/dialog.context.ts
+const DialogContext = createContext(null);
+const DialogProvider = DialogContext.Provider;
+/**
+* Read the enclosing `Dialog.Content`'s shared config, or `null` when the parts are composed directly
+* (a granular `Portal` + `Popup` without `Content`). A part outside a `Content` is valid, so this
+* returns `null` rather than throwing — the reader falls back to its own defaults.
+*/
+function useDialogContext() {
+	return use(DialogContext);
+}
+//#endregion
+export { DialogProvider, useDialogContext };