@stridge/noctis 1.0.0-beta.0

package/dist/components/color-swatch/color-swatch-picker.d.ts

@@ -0,0 +1,87 @@
+import { pickerItemProps, pickerProps } from "./color-swatch.props.js";
+import { ColorSwatch } from "./color-swatch.js";
+import { ReactElement, ReactNode } from "react";
+
+//#region src/components/color-swatch/color-swatch-picker.d.ts
+/**
+ * A grid of color swatches the user picks one of — a single-selection radio group with roving focus
+ * and arrow-key navigation (Base UI's `RadioGroup`). The selected swatch carries an accent ring set
+ * off the canvas by a gap, so it reads on any hue, including the accent itself. Swatch corners follow
+ * the design-system radius knob by default; override with `rounding`.
+ */
+declare function ColorSwatchPickerRoot({
+  value,
+  defaultValue,
+  disabled,
+  size,
+  rounding,
+  onValueChange,
+  className,
+  children,
+  "aria-label": ariaLabel
+}: ColorSwatchPicker.Root.Props): ReactElement;
+/**
+ * One selectable swatch. Built on Base UI's `Radio`, so it is keyboard-reachable, single-select, and
+ * announces its name. Hover lifts it, focus draws the accent outline, and the checked state pins the
+ * accent selection ring — all following the swatch's own rounding. Base UI stamps the live
+ * `data-checked`/`data-disabled` the CSS keys off; the render contributes the slot anchor and the
+ * `data-rounding` axis.
+ */
+declare function ColorSwatchPickerItem({
+  color,
+  value,
+  colorName,
+  className
+}: ColorSwatchPicker.Item.Props): ReactElement;
+/**
+ * A single-select grid of color swatches. Compose `ColorSwatchPicker.Root` (owns the value) with
+ * `ColorSwatchPicker.Item`s. Built on Base UI's `RadioGroup`/`Radio` for selection and a11y.
+ *
+ * Per-part `props(...)` builders expose the same slot/data-attribute mapping as spreadable statics for
+ * the escape-hatch path (D12) — `ColorSwatchPicker.Root.props()` / `ColorSwatchPicker.Item.props(...)`.
+ */
+declare const ColorSwatchPicker: {
+  /** The picker grid. `ColorSwatchPicker.Root.props()` → its spreadable prop bag. */Root: typeof ColorSwatchPickerRoot & {
+    props: typeof pickerProps;
+  }; /** One selectable swatch. `ColorSwatchPicker.Item.props({ rounding, checked, disabled })` → its spreadable prop bag. */
+  Item: typeof ColorSwatchPickerItem & {
+    props: typeof pickerItemProps;
+  };
+};
+declare namespace ColorSwatchPicker {
+  namespace Root {
+    /** Props for {@link ColorSwatchPicker.Root}. */
+    interface Props {
+      /** Controlled selected value. Pair with `onValueChange`. */
+      value?: string;
+      /** Initial selected value for the uncontrolled case. */
+      defaultValue?: string;
+      /** Disable the whole group. */
+      disabled?: boolean;
+      /** Edge length of every swatch. Defaults to `sm` (24px). */
+      size?: ColorSwatch.Size;
+      /** Corner rounding of every swatch. Defaults to `control` — follows the radius knob. */
+      rounding?: ColorSwatch.Rounding;
+      /** The group's accessible name. */
+      "aria-label"?: string;
+      /** Fires with the selected value. */
+      onValueChange?: (value: string) => void;
+      className?: string;
+      children?: ReactNode;
+    }
+  }
+  namespace Item {
+    /** Props for {@link ColorSwatchPicker.Item}. */
+    interface Props {
+      /** The CSS color this swatch shows. */
+      color: string;
+      /** The value selected when this swatch is chosen. Defaults to `color`. */
+      value?: string;
+      /** Accessible name for the swatch (e.g. the color's name). Falls back to the value/colour. */
+      colorName?: string;
+      className?: string;
+    }
+  }
+}
+//#endregion
+export { ColorSwatchPicker };

package/dist/components/color-swatch/color-swatch-picker.js

@@ -0,0 +1,73 @@
+"use client";
+import { COLOR_SWATCH_SLOTS } from "./color-swatch.slots.js";
+import { pickerItemProps, pickerProps } from "./color-swatch.props.js";
+import { ColorSwatch } from "./color-swatch.js";
+import { radio_exports } from "../../primitives/radio.js";
+import { radio_group_exports } from "../../primitives/radio-group.js";
+import { SwatchShapeContext } from "./color-swatch.context.js";
+import { use } from "react";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/color-swatch/color-swatch-picker.tsx
+/**
+* A grid of color swatches the user picks one of — a single-selection radio group with roving focus
+* and arrow-key navigation (Base UI's `RadioGroup`). The selected swatch carries an accent ring set
+* off the canvas by a gap, so it reads on any hue, including the accent itself. Swatch corners follow
+* the design-system radius knob by default; override with `rounding`.
+*/
+function ColorSwatchPickerRoot({ value, defaultValue, disabled, size = "sm", rounding = "control", onValueChange, className, children, "aria-label": ariaLabel }) {
+	return /* @__PURE__ */ jsx(radio_group_exports.RadioGroup, {
+		"data-slot": COLOR_SWATCH_SLOTS.picker,
+		"aria-label": ariaLabel,
+		value,
+		defaultValue,
+		disabled,
+		onValueChange: (next) => onValueChange?.(next),
+		className: clsx(className),
+		children: /* @__PURE__ */ jsx(SwatchShapeContext, {
+			value: {
+				size,
+				rounding
+			},
+			children
+		})
+	});
+}
+/**
+* One selectable swatch. Built on Base UI's `Radio`, so it is keyboard-reachable, single-select, and
+* announces its name. Hover lifts it, focus draws the accent outline, and the checked state pins the
+* accent selection ring — all following the swatch's own rounding. Base UI stamps the live
+* `data-checked`/`data-disabled` the CSS keys off; the render contributes the slot anchor and the
+* `data-rounding` axis.
+*/
+function ColorSwatchPickerItem({ color, value, colorName, className }) {
+	const { size, rounding } = use(SwatchShapeContext);
+	return /* @__PURE__ */ jsx(radio_exports.Radio.Root, {
+		"data-slot": COLOR_SWATCH_SLOTS.pickerItem,
+		"data-rounding": rounding,
+		value: value ?? color,
+		"aria-label": colorName ?? value ?? color,
+		className: clsx(className),
+		children: /* @__PURE__ */ jsx(ColorSwatch, {
+			decorative: true,
+			color,
+			size,
+			rounding
+		})
+	});
+}
+/**
+* A single-select grid of color swatches. Compose `ColorSwatchPicker.Root` (owns the value) with
+* `ColorSwatchPicker.Item`s. Built on Base UI's `RadioGroup`/`Radio` for selection and a11y.
+*
+* Per-part `props(...)` builders expose the same slot/data-attribute mapping as spreadable statics for
+* the escape-hatch path (D12) — `ColorSwatchPicker.Root.props()` / `ColorSwatchPicker.Item.props(...)`.
+*/
+const ColorSwatchPicker = {
+	/** The picker grid. `ColorSwatchPicker.Root.props()` → its spreadable prop bag. */
+	Root: Object.assign(ColorSwatchPickerRoot, { props: pickerProps }),
+	/** One selectable swatch. `ColorSwatchPicker.Item.props({ rounding, checked, disabled })` → its spreadable prop bag. */
+	Item: Object.assign(ColorSwatchPickerItem, { props: pickerItemProps })
+};
+//#endregion
+export { ColorSwatchPicker };

package/dist/components/color-swatch/color-swatch.context.js

@@ -0,0 +1,8 @@
+"use client";
+import { createContext } from "react";
+const SwatchShapeContext = createContext({
+	size: "sm",
+	rounding: "control"
+});
+//#endregion
+export { SwatchShapeContext };

package/dist/components/color-swatch/color-swatch.d.ts

@@ -0,0 +1,55 @@
+import { swatchProps } from "./color-swatch.props.js";
+import { ReactElement } from "react";
+
+//#region src/components/color-swatch/color-swatch.d.ts
+/** The corner-rounding options a swatch (and a swatch picker item) accepts. */
+declare const ROUNDINGS: readonly ["control", "sharp", "soft", "full"];
+/**
+ * A presentational chip previewing a single color: a solid fill when opaque, the color over a
+ * checkerboard when translucent, and a diagonal slash when fully transparent. A hairline keeps light
+ * swatches legible on the dark canvas. It carries no interaction — `ColorSwatchPicker` adds selection,
+ * and a `Popover` wrapped around a `ColorPicker` adds the floating-picker affordance.
+ *
+ * Single-part: the props and the `Rounding`/`Size` unions live on the matching `ColorSwatch` namespace.
+ * The render stamps the slot + `data-size`/`data-rounding`/`data-empty` axes the CSS keys off;
+ * `className` is a consumer passthrough. `ColorSwatch.props(...)` is the same mapping as a spreadable
+ * static for the escape-hatch path (D12) — see `color-swatch.props.ts`.
+ */
+declare function ColorSwatchRoot({
+  color,
+  size,
+  rounding,
+  colorName,
+  decorative,
+  className
+}: ColorSwatch.Props): ReactElement;
+/**
+ * A presentational chip previewing a single color. `ColorSwatch.props({ size, rounding, empty })` →
+ * its spreadable prop bag for the escape-hatch path (D12).
+ */
+declare const ColorSwatch: typeof ColorSwatchRoot & {
+  props: typeof swatchProps;
+};
+/** Per-part prop and shape types for the single-part `ColorSwatch`; merges with the value above. */
+declare namespace ColorSwatch {
+  /** The corner-rounding options a swatch (and a swatch picker item) accepts. */
+  type Rounding = (typeof ROUNDINGS)[number];
+  /** Edge length — the shared control-height ladder (20 / 26 / 36 / 40px), stamped as `data-size`. */
+  type Size = "xs" | "sm" | "md" | "lg";
+  /** Props for {@link ColorSwatch}. */
+  interface Props {
+    /** Any CSS color string. A fully-transparent value renders the "no color" slash. */
+    color: string;
+    /** Edge length. Defaults to `md` (36px). */
+    size?: Size;
+    /** Corner rounding. Defaults to `control` — follows the radius knob, like a button. */
+    rounding?: Rounding;
+    /** Accessible name. Falls back to the raw color value. Ignored when `decorative`. */
+    colorName?: string;
+    /** Mark the swatch decorative — drops it from the a11y tree when an ancestor already names it. */
+    decorative?: boolean;
+    className?: string;
+  }
+}
+//#endregion
+export { ColorSwatch };

package/dist/components/color-swatch/color-swatch.js

@@ -0,0 +1,48 @@
+"use client";
+import { parseColor, slashCss, swatchFillCss } from "../color-picker/color.js";
+import { COLOR_SWATCH_SLOTS } from "./color-swatch.slots.js";
+import { swatchProps } from "./color-swatch.props.js";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/color-swatch/color-swatch.tsx
+/** The fallback when a color can't be parsed — an opaque-black RGB so the chip still paints. */
+const FALLBACK = {
+	r: 0,
+	g: 0,
+	b: 0,
+	a: 1
+};
+/**
+* A presentational chip previewing a single color: a solid fill when opaque, the color over a
+* checkerboard when translucent, and a diagonal slash when fully transparent. A hairline keeps light
+* swatches legible on the dark canvas. It carries no interaction — `ColorSwatchPicker` adds selection,
+* and a `Popover` wrapped around a `ColorPicker` adds the floating-picker affordance.
+*
+* Single-part: the props and the `Rounding`/`Size` unions live on the matching `ColorSwatch` namespace.
+* The render stamps the slot + `data-size`/`data-rounding`/`data-empty` axes the CSS keys off;
+* `className` is a consumer passthrough. `ColorSwatch.props(...)` is the same mapping as a spreadable
+* static for the escape-hatch path (D12) — see `color-swatch.props.ts`.
+*/
+function ColorSwatchRoot({ color, size = "md", rounding = "control", colorName, decorative = false, className }) {
+	const rgb = parseColor(color) ?? FALLBACK;
+	const empty = rgb.a <= 0;
+	const style = empty ? { background: slashCss() } : { background: swatchFillCss(rgb, true) };
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": COLOR_SWATCH_SLOTS.swatch,
+		"data-size": size,
+		"data-rounding": rounding,
+		"data-empty": empty ? "" : void 0,
+		role: decorative ? void 0 : "img",
+		"aria-hidden": decorative || void 0,
+		"aria-label": decorative ? void 0 : colorName ?? color,
+		style,
+		className: clsx(className)
+	});
+}
+/**
+* A presentational chip previewing a single color. `ColorSwatch.props({ size, rounding, empty })` →
+* its spreadable prop bag for the escape-hatch path (D12).
+*/
+const ColorSwatch = Object.assign(ColorSwatchRoot, { props: swatchProps });
+//#endregion
+export { ColorSwatch };

package/dist/components/color-swatch/color-swatch.props.d.ts

@@ -0,0 +1,54 @@
+import { ColorSwatch } from "./color-swatch.js";
+
+//#region src/components/color-swatch/color-swatch.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `ColorSwatch.*.props()` returns. */
+type ColorSwatchPartProps = {
+  /** The slot value the matching `color-swatch.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 BasePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to `ColorSwatch.props(...)` — the chip's size/rounding option axes plus the empty state. */
+interface ColorSwatchPropsArgs extends BasePropsArgs {
+  /** Edge length — stamped as `data-size`, re-points the size internal. @default "md" */
+  size?: ColorSwatch.Size;
+  /** Corner rounding — stamped as `data-rounding`. @default "control" */
+  rounding?: ColorSwatch.Rounding;
+  /** Whether the swatch paints the transparent-color slash (tints it the danger colour via `data-empty`). */
+  empty?: boolean;
+}
+/** Argument to `ColorSwatch.Picker.props(...)` — the grid has no axes of its own; gap flows from the slot. */
+type ColorSwatchPickerPropsArgs = BasePropsArgs;
+/** Argument to `ColorSwatch.PickerItem.props(...)` — the per-item rounding plus the checked/disabled state. */
+interface ColorSwatchPickerItemPropsArgs extends BasePropsArgs {
+  /** Corner rounding — stamped as `data-rounding`. @default "control" */
+  rounding?: ColorSwatch.Rounding;
+  /** Whether this item is the selected one (draws the accent ring via `data-checked`). */
+  checked?: boolean;
+  /** Whether this item is disabled (drives the not-allowed affordance via `data-disabled`). */
+  disabled?: boolean;
+}
+/** Swatch prop bag: slot anchor plus the `data-size`/`data-rounding`/`data-empty` the CSS keys off. */
+declare function swatchProps({
+  size,
+  rounding,
+  empty,
+  className
+}?: ColorSwatchPropsArgs): ColorSwatchPartProps;
+/** Picker grid prop bag: just the slot anchor (gap flows from the slot). */
+declare function pickerProps({
+  className
+}?: ColorSwatchPickerPropsArgs): ColorSwatchPartProps;
+/** Picker item prop bag: slot anchor plus the `data-rounding` and `data-checked`/`data-disabled` state. */
+declare function pickerItemProps({
+  rounding,
+  checked,
+  disabled,
+  className
+}?: ColorSwatchPickerItemPropsArgs): ColorSwatchPartProps;
+//#endregion
+export { pickerItemProps, pickerProps, swatchProps };

package/dist/components/color-swatch/color-swatch.props.js

@@ -0,0 +1,32 @@
+import { COLOR_SWATCH_SLOTS } from "./color-swatch.slots.js";
+//#region src/components/color-swatch/color-swatch.props.ts
+/** Stamp a boolean state as a bare data-attribute: present (`""`) when on, absent (`undefined`) when off. */
+const flag = (on) => on ? "" : void 0;
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Swatch prop bag: slot anchor plus the `data-size`/`data-rounding`/`data-empty` the CSS keys off. */
+function swatchProps({ size = "md", rounding = "control", empty, className } = {}) {
+	return withClassName({
+		"data-slot": COLOR_SWATCH_SLOTS.swatch,
+		"data-size": size,
+		"data-rounding": rounding,
+		"data-empty": flag(empty)
+	}, className);
+}
+/** Picker grid prop bag: just the slot anchor (gap flows from the slot). */
+function pickerProps({ className } = {}) {
+	return withClassName({ "data-slot": COLOR_SWATCH_SLOTS.picker }, className);
+}
+/** Picker item prop bag: slot anchor plus the `data-rounding` and `data-checked`/`data-disabled` state. */
+function pickerItemProps({ rounding = "control", checked, disabled, className } = {}) {
+	return withClassName({
+		"data-slot": COLOR_SWATCH_SLOTS.pickerItem,
+		"data-rounding": rounding,
+		"data-checked": flag(checked),
+		"data-disabled": flag(disabled)
+	}, className);
+}
+//#endregion
+export { pickerItemProps, pickerProps, swatchProps };

package/dist/components/color-swatch/color-swatch.slots.js

@@ -0,0 +1,13 @@
+//#region src/components/color-swatch/color-swatch.slots.ts
+/**
+* The slot vocabulary every `ColorSwatch` part stamps as its `data-slot`. The authored source the
+* orchestration files read from, kebab-cased `{component}-{part}`; SLOTS.md still generates from the
+* token-graph declarations.
+*/
+const COLOR_SWATCH_SLOTS = {
+	swatch: "noctis-color-swatch",
+	picker: "noctis-color-swatch-picker",
+	pickerItem: "noctis-color-swatch-picker-item"
+};
+//#endregion
+export { COLOR_SWATCH_SLOTS };

package/dist/components/color-swatch/index.d.ts

@@ -0,0 +1,2 @@
+import { ColorSwatch } from "./color-swatch.js";
+import { ColorSwatchPicker } from "./color-swatch-picker.js";

package/dist/components/combobox/combobox.context.js

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/combobox/combobox.context.ts
+const ComboboxContext = createContext(null);
+const ComboboxProvider = ComboboxContext.Provider;
+/** Read the combobox context, throwing a named error when a part renders outside `Combobox.Root`. */
+function useComboboxContext(part) {
+	const context = use(ComboboxContext);
+	if (context === null) throw new Error(`Combobox.${part} must be rendered inside <Combobox.Root>.`);
+	return context;
+}
+//#endregion
+export { ComboboxProvider, useComboboxContext };