@stridge/noctis 1.0.0-beta.0

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

@@ -0,0 +1,66 @@
+import { ToastPlacement, ToastType } from "./toast.types.js";
+
+//#region src/components/toast/toast.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Toast.*.props()` returns. */
+type ToastPartProps = {
+  /** The slot value the matching `toast.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 (a value or 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 `Toast.Root.props(...)` — the status type the root's accent and parts key their look off. */
+interface ToastRootPropsArgs extends BasePropsArgs {
+  /** The status type driving the leading status icon's colour. Omit for a neutral toast. */
+  type?: ToastType;
+}
+/** Argument to `Toast.Viewport.props(...)` — the docked placement the viewport's insets key off. */
+interface ToastViewportPropsArgs extends BasePropsArgs {
+  /** Where the viewport docks on screen. Omit for `bottom-end`. */
+  placement?: ToastPlacement;
+}
+/** Argument to a stateless part's `.props(...)` — no inputs of its own; look flows from the root. */
+type ToastStatelessPropsArgs = BasePropsArgs;
+/** Viewport prop bag: slot anchor plus the optional `data-placement` the docked insets read. */
+declare function viewportProps({
+  placement,
+  className
+}?: ToastViewportPropsArgs): ToastPartProps;
+/** Root prop bag: slot anchor plus the optional `data-type` the accent re-point reads. */
+declare function rootProps({
+  type,
+  className
+}?: ToastRootPropsArgs): ToastPartProps;
+/** Content prop bag: just the slot anchor. */
+declare function contentProps({
+  className
+}?: ToastStatelessPropsArgs): ToastPartProps;
+/** Title prop bag: just the slot anchor. */
+declare function titleProps({
+  className
+}?: ToastStatelessPropsArgs): ToastPartProps;
+/** Description prop bag: just the slot anchor. */
+declare function descriptionProps({
+  className
+}?: ToastStatelessPropsArgs): ToastPartProps;
+/** Icon prop bag: just the slot anchor (it inherits the toast's status colour). */
+declare function iconProps({
+  className
+}?: ToastStatelessPropsArgs): ToastPartProps;
+/** Spinner prop bag: just the slot anchor (the loading-phase spinner; neutral, CSS-driven). */
+declare function spinnerProps({
+  className
+}?: ToastStatelessPropsArgs): ToastPartProps;
+/** Action prop bag: just the slot anchor (it composes with a Button through `render`). */
+declare function actionProps({
+  className
+}?: ToastStatelessPropsArgs): ToastPartProps;
+/** Close prop bag: just the slot anchor (it composes with a Button through `render`). */
+declare function closeProps({
+  className
+}?: ToastStatelessPropsArgs): ToastPartProps;
+//#endregion
+export { ToastPartProps, ToastRootPropsArgs, ToastViewportPropsArgs, actionProps, closeProps, contentProps, descriptionProps, iconProps, rootProps, spinnerProps, titleProps, viewportProps };

package/dist/components/toast/toast.props.js

@@ -0,0 +1,74 @@
+import { TOAST_SLOTS } from "./toast.slots.js";
+//#region src/components/toast/toast.props.ts
+/**
+* The D12 unified variant contract for Toast — each compound part exposes a `props(...)` builder
+* returning a **spreadable props object** of the form `{ "data-slot": "noctis-toast-<part>", ...attrs }`,
+* derived from the part's inputs. Under the single-`data-slot` anchor model the `data-slot` (plus
+* `data-type` on the root) is the only styling hook needed — `toast.css` keys every rule off it — so
+* spreading a part's `props()` onto a *foreign* element styles it as that part:
+*
+*     <li {...Toast.Root.props({ type: "success" })} />
+*     // → <li data-slot="noctis-toast" data-type="success">
+*
+* The escape hatch carries no className (styling is attribute-driven); an optional `className`
+* passthrough is accepted and forwarded verbatim. The same input→data-attribute→value 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.
+*/
+/**
+* Resolve the logical default swipe pair — "toward the docked bottom-end corner" — to the physical pair
+* Base UI understands: `down` plus the inline-end edge, which is `right` in LTR and `left` in RTL. This
+* is the RTL-correctness seam: a `show()` toast docked bottom-end swipes toward its corner in either
+* direction without the consumer hard-coding `right`.
+*/
+function resolveSwipeDirection(direction) {
+	return ["down", direction === "rtl" ? "left" : "right"];
+}
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Viewport prop bag: slot anchor plus the optional `data-placement` the docked insets read. */
+function viewportProps({ placement, className } = {}) {
+	return withClassName({
+		"data-slot": TOAST_SLOTS.viewport,
+		"data-placement": placement
+	}, className);
+}
+/** Root prop bag: slot anchor plus the optional `data-type` the accent re-point reads. */
+function rootProps({ type, className } = {}) {
+	return withClassName({
+		"data-slot": TOAST_SLOTS.root,
+		"data-type": type
+	}, className);
+}
+/** Content prop bag: just the slot anchor. */
+function contentProps({ className } = {}) {
+	return withClassName({ "data-slot": TOAST_SLOTS.content }, className);
+}
+/** Title prop bag: just the slot anchor. */
+function titleProps({ className } = {}) {
+	return withClassName({ "data-slot": TOAST_SLOTS.title }, className);
+}
+/** Description prop bag: just the slot anchor. */
+function descriptionProps({ className } = {}) {
+	return withClassName({ "data-slot": TOAST_SLOTS.description }, className);
+}
+/** Icon prop bag: just the slot anchor (it inherits the toast's status colour). */
+function iconProps({ className } = {}) {
+	return withClassName({ "data-slot": TOAST_SLOTS.icon }, className);
+}
+/** Spinner prop bag: just the slot anchor (the loading-phase spinner; neutral, CSS-driven). */
+function spinnerProps({ className } = {}) {
+	return withClassName({ "data-slot": TOAST_SLOTS.spinner }, className);
+}
+/** Action prop bag: just the slot anchor (it composes with a Button through `render`). */
+function actionProps({ className } = {}) {
+	return withClassName({ "data-slot": TOAST_SLOTS.action }, className);
+}
+/** Close prop bag: just the slot anchor (it composes with a Button through `render`). */
+function closeProps({ className } = {}) {
+	return withClassName({ "data-slot": TOAST_SLOTS.close }, className);
+}
+//#endregion
+export { actionProps, closeProps, contentProps, descriptionProps, iconProps, resolveSwipeDirection, rootProps, spinnerProps, titleProps, viewportProps };

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

@@ -0,0 +1,30 @@
+//#region src/components/toast/toast.slots.d.ts
+/**
+ * The `data-*` attributes a `Toast` carries, paired with its slots for conditional styling. Base UI
+ * stamps the live state on each toast root; each member's value is the attribute name and its JSDoc is
+ * the description the docs attributes table renders.
+ */
+declare enum ToastDataAttributes {
+  /** The styling/testing hook every rendered part carries. */
+  slot = "data-slot",
+  /** On the root: the status type (`info` · `success` · `warning` · `danger` · `loading` · `error`) driving the accent. */
+  type = "data-type",
+  /** On the viewport: the docked placement (`bottom-end` · `bottom-center` · `bottom-start` · `top-*`). */
+  placement = "data-placement",
+  /** On the viewport (and each root/content while it is): present while the stack is fanned out (hover/focus). */
+  expanded = "data-expanded",
+  /** On the content: present while the toast sits behind the frontmost one in the collapsed stack. */
+  behind = "data-behind",
+  /** On the root: present when the toast was pushed past the provider's `limit` (kept mounted but inert). */
+  limited = "data-limited",
+  /** On the root: present while the toast is being swiped to dismiss. */
+  swiping = "data-swiping",
+  /** On the root: the physical axis the toast was swiped along (`up` · `down` · `left` · `right`); the default pair is RTL-resolved from the docked corner. */
+  swipeDirection = "data-swipe-direction",
+  /** On the root: present for the first animation frame after the toast mounts (the enter transition). */
+  startingStyle = "data-starting-style",
+  /** On the root: present while the toast animates out before it unmounts (the exit transition). */
+  endingStyle = "data-ending-style"
+}
+//#endregion
+export { ToastDataAttributes };

package/dist/components/toast/toast.slots.js

@@ -0,0 +1,49 @@
+//#region src/components/toast/toast.slots.ts
+/**
+* The slot vocabulary every `Toast` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, kebab-cased `{component}-{part}` and `noctis-`-prefixed; SLOTS.md and
+* the token graph generate the same anatomy. `Toast.Provider` wraps Base UI's `Toast.Provider` without
+* rendering an element of its own, so it stamps no slot and does not appear here, keeping the const
+* parity-true to the rendered DOM.
+*/
+const TOAST_SLOTS = {
+	viewport: "noctis-toast-viewport",
+	root: "noctis-toast",
+	content: "noctis-toast-content",
+	title: "noctis-toast-title",
+	description: "noctis-toast-description",
+	icon: "noctis-toast-icon",
+	spinner: "noctis-toast-spinner",
+	action: "noctis-toast-action",
+	close: "noctis-toast-close"
+};
+/**
+* The `data-*` attributes a `Toast` carries, paired with its slots for conditional styling. Base UI
+* stamps the live state on each toast root; each member's value is the attribute name and its JSDoc is
+* the description the docs attributes table renders.
+*/
+let ToastDataAttributes = /* @__PURE__ */ function(ToastDataAttributes) {
+	/** The styling/testing hook every rendered part carries. */
+	ToastDataAttributes["slot"] = "data-slot";
+	/** On the root: the status type (`info` · `success` · `warning` · `danger` · `loading` · `error`) driving the accent. */
+	ToastDataAttributes["type"] = "data-type";
+	/** On the viewport: the docked placement (`bottom-end` · `bottom-center` · `bottom-start` · `top-*`). */
+	ToastDataAttributes["placement"] = "data-placement";
+	/** On the viewport (and each root/content while it is): present while the stack is fanned out (hover/focus). */
+	ToastDataAttributes["expanded"] = "data-expanded";
+	/** On the content: present while the toast sits behind the frontmost one in the collapsed stack. */
+	ToastDataAttributes["behind"] = "data-behind";
+	/** On the root: present when the toast was pushed past the provider's `limit` (kept mounted but inert). */
+	ToastDataAttributes["limited"] = "data-limited";
+	/** On the root: present while the toast is being swiped to dismiss. */
+	ToastDataAttributes["swiping"] = "data-swiping";
+	/** On the root: the physical axis the toast was swiped along (`up` · `down` · `left` · `right`); the default pair is RTL-resolved from the docked corner. */
+	ToastDataAttributes["swipeDirection"] = "data-swipe-direction";
+	/** On the root: present for the first animation frame after the toast mounts (the enter transition). */
+	ToastDataAttributes["startingStyle"] = "data-starting-style";
+	/** On the root: present while the toast animates out before it unmounts (the exit transition). */
+	ToastDataAttributes["endingStyle"] = "data-ending-style";
+	return ToastDataAttributes;
+}({});
+//#endregion
+export { TOAST_SLOTS, ToastDataAttributes };

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

@@ -0,0 +1,19 @@
+//#region src/components/toast/toast.types.d.ts
+/**
+ * The Toast status type — the `type` axis Base UI stamps as `data-type` on each toast root, re-pointing
+ * the leading status icon (and the status-typed parts) to the matching status role. Mirrors the
+ * status families in `@stridge/noctis-design-tokens` (`info` · `success` · `warning` · `danger`), plus
+ * `loading` for the async-pending phase (neutral, no chroma — it carries the spinner). Omit it for a
+ * neutral toast (a plain toast is not a signal). Base UI's `promise()` also stamps `success` and a
+ * private `error` value as a promise settles; `error` is re-pointed to the `danger` role in the token
+ * layer but is not part of the helper-facing union.
+ */
+type ToastType = "info" | "success" | "warning" | "danger" | "loading";
+/**
+ * Where the toast viewport docks on screen — a logical placement (`*-start`/`*-end` flip under RTL).
+ * `Toast.Viewport` stamps the chosen value as `data-placement`, which drives the viewport's logical
+ * insets and the toasts' enter direction (top placements enter from above). Defaults to `bottom-end`.
+ */
+type ToastPlacement = "bottom-end" | "bottom-center" | "bottom-start" | "top-end" | "top-center" | "top-start";
+//#endregion
+export { ToastPlacement, ToastType };

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

@@ -0,0 +1,2 @@
+import { Toggle, ToggleGroup } from "./toggle.js";
+import { ToggleDataAttributes } from "./toggle.slots.js";

package/dist/components/toggle/toggle.context.d.ts

@@ -0,0 +1,11 @@
+//#region src/components/toggle/toggle.context.d.ts
+/**
+ * Visual emphasis, mirroring Button — all quiet when off, each lighting a different fill when pressed:
+ * `ghost` (transparent, fills neutral), `accent` (fills the accent), `primary` (fills the bold primary),
+ * or `outline` (a resting border that fills primary when pressed).
+ */
+type ToggleVariant = "ghost" | "accent" | "primary" | "outline";
+/** Control height and type — `xs`, `sm`, `md`, or `lg`; the scale mirrors Button. */
+type ToggleSize = "xs" | "sm" | "md" | "lg";
+//#endregion
+export { ToggleSize, ToggleVariant };

package/dist/components/toggle/toggle.context.js

@@ -0,0 +1,14 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/toggle/toggle.context.ts
+const ToggleGroupContext = createContext(null);
+const ToggleGroupProvider = ToggleGroupContext.Provider;
+/**
+* Read the enclosing `ToggleGroup`'s shared look, or `null` for a standalone `Toggle`. A standalone
+* toggle is valid, so this never throws — the part falls back to its own `variant`/`size` props.
+*/
+function useToggleGroup() {
+	return use(ToggleGroupContext);
+}
+//#endregion
+export { ToggleGroupProvider, useToggleGroup };

package/dist/components/toggle/toggle.d.ts

@@ -0,0 +1,136 @@
+import { IconGlyph } from "../../icons/glyphs.js";
+import { toggle_d_exports } from "../../primitives/toggle.js";
+import { toggle_group_d_exports } from "../../primitives/toggle-group.js";
+import { ToggleSize, ToggleVariant } from "./toggle.context.js";
+import { ToggleGroupPropsArgs, TogglePartProps, TogglePropsArgs, groupProps, rootProps } from "./toggle.props.js";
+import { ReactElement, ReactNode } from "react";
+
+//#region src/components/toggle/toggle.d.ts
+/**
+ * A two-state button that is either off or pressed (on), built on Base UI's `Toggle`. Renders a native
+ * `<button[aria-pressed]>`, so it is fully keyboard-operable and announces its pressed state to
+ * assistive tech. Use it standalone for a single on/off control, or inside a {@link ToggleGroup} to
+ * share a look and coordinate selection; an unset `variant`/`size` is inherited from the group.
+ *
+ * Every variant is quiet when off and fills only when pressed: `ghost` (default) fills the neutral
+ * selected role, `accent` the indigo accent, `primary` the bold primary, and `outline` carries a resting
+ * border that fills primary when pressed. The variants and the `xs|sm|md|lg` sizes mirror Button, so the
+ * two action controls feel identical under the finger — pass a leading/trailing glyph with `startIcon`/
+ * `endIcon`, or square it for a single icon with `iconOnly` (give it an `aria-label`). Styling is
+ * precompiled in `toggle.css`, keyed off the `data-slot="noctis-toggle"` anchor plus the
+ * `data-variant`/`data-size`/`data-pressed` recipe.
+ *
+ * @see {@link Toggle.Props}
+ */
+declare function ToggleImpl({
+  variant: variantProp,
+  size: sizeProp,
+  iconOnly: iconOnlyProp,
+  startIcon,
+  endIcon,
+  className,
+  children,
+  ...props
+}: Toggle.Props): ReactElement;
+/**
+ * Groups a series of toggles, sharing their `variant`/`size`/`iconOnly` and coordinating selection — a
+ * simple gap-separated row. Single-select by default (pressing one releases the others); set `multiple`
+ * to let several be pressed at once (a formatting toolbar). Becomes a `role="toolbar"` at 3+ toggles (an
+ * `aria-label` is then required), and stays `role="group"` below that, per the APG. Works controlled
+ * (`value` + `onValueChange`) or uncontrolled (`defaultValue`), and is arrow-key navigable, RTL-aware,
+ * and roving-focus managed by Base UI.
+ */
+declare function ToggleGroupImpl({
+  variant,
+  size,
+  iconOnly,
+  multiple,
+  className,
+  children,
+  ...props
+}: ToggleGroup.Props): ReactElement;
+/**
+ * A two-state pressable button. The component value carries the D12 `props()` escape hatch via
+ * `Object.assign`: spread `Toggle.props({ variant, size, pressed, disabled })` onto a foreign element to
+ * style it as a toggle. It returns a spreadable `{ "data-slot": "noctis-toggle", ...dataAttrs }` bag the
+ * precompiled `toggle.css` keys off.
+ */
+declare const Toggle: typeof ToggleImpl & {
+  props: typeof rootProps;
+};
+/**
+ * A group of toggles sharing a look and coordinating selection. `ToggleGroup.props({ variant, size })`
+ * returns its spreadable prop bag.
+ */
+declare const ToggleGroup: typeof ToggleGroupImpl & {
+  props: typeof groupProps;
+};
+/**
+ * Per-part prop and variant types. Merges with the `Toggle` function above, so `Toggle` is the component
+ * value while `Toggle.Props` is its prop type and `Toggle.props` is the escape-hatch helper.
+ */
+declare namespace Toggle {
+  type Props = Omit<toggle_d_exports.Toggle.Props, "className" | "children"> & {
+    /**
+     * Visual emphasis — `ghost` (fills neutral), `accent` (fills the accent), `primary` (fills the
+     * bold primary), or `outline` (resting border, fills primary when pressed). Inherited from an
+     * enclosing `ToggleGroup` when unset.
+     * @default "ghost"
+     */
+    variant?: ToggleVariant;
+    /**
+     * Size scale — height, padding, and text. Inherited from an enclosing `ToggleGroup` when unset.
+     * @default "md"
+     */
+    size?: ToggleSize;
+    /**
+     * Square the toggle for a single icon. Provide an `aria-label` — there is no visible text to name it.
+     * Inherited from an enclosing `ToggleGroup` when unset.
+     * @default false
+     */
+    iconOnly?: boolean; /** Leading glyph, before the label. */
+    startIcon?: IconGlyph; /** Trailing glyph, after the label. */
+    endIcon?: IconGlyph; /** The toggle's content. */
+    children?: ReactNode; /** Merged onto the rendered button's class list. */
+    className?: string;
+  };
+  /** Visual emphasis — `ghost`, `accent`, `primary`, or `outline`. */
+  type Variant = ToggleVariant;
+  /** Height/padding/text scale. */
+  type Size = ToggleSize;
+  /** Argument to the `Toggle.props(...)` escape-hatch helper. */
+  type PropsArgs = TogglePropsArgs;
+  /** The spreadable data-attribute prop bag every `Toggle(.Group)?.props()` returns (D12). */
+  type PartProps = TogglePartProps;
+  type State = toggle_d_exports.Toggle.State;
+}
+/**
+ * Per-part prop types for the group. Merges with the `ToggleGroup` function above.
+ */
+declare namespace ToggleGroup {
+  type Props = Omit<toggle_group_d_exports.ToggleGroup.Props, "className" | "children"> & {
+    /**
+     * Visual emphasis shared with the toggles inside — `ghost`, `accent`, `primary`, or `outline`.
+     * @default "ghost"
+     */
+    variant?: ToggleVariant;
+    /**
+     * Size scale shared with the toggles inside.
+     * @default "md"
+     */
+    size?: ToggleSize;
+    /**
+     * Square every toggle in the group for a single icon — a toolbar of icon toggles in one prop. A
+     * toggle can still set `iconOnly` itself to opt out. Each needs an `aria-label`.
+     * @default false
+     */
+    iconOnly?: boolean; /** The `Toggle`s in the group. */
+    children?: ReactNode; /** Merged onto the rendered group's class list. */
+    className?: string;
+  };
+  /** Argument to the `ToggleGroup.props(...)` escape-hatch helper. */
+  type PropsArgs = ToggleGroupPropsArgs;
+  type State = toggle_group_d_exports.ToggleGroup.State;
+}
+//#endregion
+export { Toggle, ToggleGroup };

package/dist/components/toggle/toggle.js

@@ -0,0 +1,101 @@
+"use client";
+import { Icon } from "../../icons/icon.js";
+import { toggle_exports } from "../../primitives/toggle.js";
+import { toggle_group_exports } from "../../primitives/toggle-group.js";
+import { ToggleGroupProvider, useToggleGroup } from "./toggle.context.js";
+import { TOGGLE_SLOTS } from "./toggle.slots.js";
+import { groupProps, rootProps } from "./toggle.props.js";
+import { Children } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/toggle/toggle.tsx
+/** The icon size that pairs with each toggle size. */
+const GLYPH_SIZE = {
+	xs: "sm",
+	sm: "sm",
+	md: "md",
+	lg: "md"
+};
+/**
+* A two-state button that is either off or pressed (on), built on Base UI's `Toggle`. Renders a native
+* `<button[aria-pressed]>`, so it is fully keyboard-operable and announces its pressed state to
+* assistive tech. Use it standalone for a single on/off control, or inside a {@link ToggleGroup} to
+* share a look and coordinate selection; an unset `variant`/`size` is inherited from the group.
+*
+* Every variant is quiet when off and fills only when pressed: `ghost` (default) fills the neutral
+* selected role, `accent` the indigo accent, `primary` the bold primary, and `outline` carries a resting
+* border that fills primary when pressed. The variants and the `xs|sm|md|lg` sizes mirror Button, so the
+* two action controls feel identical under the finger — pass a leading/trailing glyph with `startIcon`/
+* `endIcon`, or square it for a single icon with `iconOnly` (give it an `aria-label`). Styling is
+* precompiled in `toggle.css`, keyed off the `data-slot="noctis-toggle"` anchor plus the
+* `data-variant`/`data-size`/`data-pressed` recipe.
+*
+* @see {@link Toggle.Props}
+*/
+function ToggleImpl({ variant: variantProp, size: sizeProp, iconOnly: iconOnlyProp, startIcon, endIcon, className, children, ...props }) {
+	const group = useToggleGroup();
+	const variant = variantProp ?? group?.variant ?? "ghost";
+	const size = sizeProp ?? group?.size ?? "md";
+	const iconOnly = iconOnlyProp ?? group?.iconOnly ?? false;
+	const glyphSize = GLYPH_SIZE[size];
+	return /* @__PURE__ */ jsxs(toggle_exports.Toggle, {
+		...props,
+		"data-slot": TOGGLE_SLOTS.root,
+		"data-variant": variant,
+		"data-size": size,
+		"data-icon-only": iconOnly ? "true" : void 0,
+		className,
+		children: [
+			startIcon ? /* @__PURE__ */ jsx(Icon, {
+				icon: startIcon,
+				size: glyphSize
+			}) : null,
+			children,
+			endIcon ? /* @__PURE__ */ jsx(Icon, {
+				icon: endIcon,
+				size: glyphSize
+			}) : null
+		]
+	});
+}
+/**
+* Groups a series of toggles, sharing their `variant`/`size`/`iconOnly` and coordinating selection — a
+* simple gap-separated row. Single-select by default (pressing one releases the others); set `multiple`
+* to let several be pressed at once (a formatting toolbar). Becomes a `role="toolbar"` at 3+ toggles (an
+* `aria-label` is then required), and stays `role="group"` below that, per the APG. Works controlled
+* (`value` + `onValueChange`) or uncontrolled (`defaultValue`), and is arrow-key navigable, RTL-aware,
+* and roving-focus managed by Base UI.
+*/
+function ToggleGroupImpl({ variant = "ghost", size = "md", iconOnly = false, multiple, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(toggle_group_exports.ToggleGroup, {
+		...Children.count(children) >= 3 ? { role: "toolbar" } : {},
+		multiple,
+		...props,
+		"data-slot": TOGGLE_SLOTS.group,
+		"data-variant": variant,
+		"data-size": size,
+		"data-multiple": multiple ? "true" : void 0,
+		className,
+		children: /* @__PURE__ */ jsx(ToggleGroupProvider, {
+			value: {
+				variant,
+				size,
+				iconOnly
+			},
+			children
+		})
+	});
+}
+/**
+* A two-state pressable button. The component value carries the D12 `props()` escape hatch via
+* `Object.assign`: spread `Toggle.props({ variant, size, pressed, disabled })` onto a foreign element to
+* style it as a toggle. It returns a spreadable `{ "data-slot": "noctis-toggle", ...dataAttrs }` bag the
+* precompiled `toggle.css` keys off.
+*/
+const Toggle = Object.assign(ToggleImpl, { props: rootProps });
+/**
+* A group of toggles sharing a look and coordinating selection. `ToggleGroup.props({ variant, size })`
+* returns its spreadable prop bag.
+*/
+const ToggleGroup = Object.assign(ToggleGroupImpl, { props: groupProps });
+//#endregion
+export { Toggle, ToggleGroup };

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

@@ -0,0 +1,51 @@
+import { ToggleSize, ToggleVariant } from "./toggle.context.js";
+
+//#region src/components/toggle/toggle.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Toggle.*.props()` returns. */
+type TogglePartProps = {
+  /** The slot value the matching `toggle.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 `Toggle.props(...)` — the toggle's look, size, and pressed/disabled state. */
+interface TogglePropsArgs extends BasePropsArgs {
+  /** Visual emphasis — `ghost`, `accent`, `primary`, or `outline` (each fills when pressed). @default "ghost" */
+  variant?: ToggleVariant;
+  /** Control height and type. @default "md" */
+  size?: ToggleSize;
+  /** Square the toggle for a single icon (drives the square sizing via `data-icon-only`). */
+  iconOnly?: boolean;
+  /** Whether this toggle is pressed (drives the selected fill via `data-pressed`). */
+  pressed?: boolean;
+  /** Whether this toggle is disabled (drives the not-allowed affordance via `data-disabled`). */
+  disabled?: boolean;
+}
+/** Argument to `ToggleGroup.props(...)` — the group container, carrying the shared look it stamps. */
+interface ToggleGroupPropsArgs extends BasePropsArgs {
+  /** Visual emphasis the group shares with its toggles. @default "ghost" */
+  variant?: ToggleVariant;
+  /** Control height the group shares with its toggles. @default "md" */
+  size?: ToggleSize;
+}
+/** Toggle prop bag: the slot anchor plus the `data-variant`/`data-size`/`data-icon-only`/`data-pressed`/`data-disabled` state. */
+declare function rootProps({
+  variant,
+  size,
+  iconOnly,
+  pressed,
+  disabled,
+  className
+}?: TogglePropsArgs): TogglePartProps;
+/** Group prop bag: the slot anchor plus the `data-variant`/`data-size` its descendant toggles read. */
+declare function groupProps({
+  variant,
+  size,
+  className
+}?: ToggleGroupPropsArgs): TogglePartProps;
+//#endregion
+export { ToggleGroupPropsArgs, TogglePartProps, TogglePropsArgs, groupProps, rootProps };

package/dist/components/toggle/toggle.props.js

@@ -0,0 +1,29 @@
+import { TOGGLE_SLOTS } from "./toggle.slots.js";
+//#region src/components/toggle/toggle.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
+};
+/** Toggle prop bag: the slot anchor plus the `data-variant`/`data-size`/`data-icon-only`/`data-pressed`/`data-disabled` state. */
+function rootProps({ variant = "ghost", size = "md", iconOnly, pressed, disabled, className } = {}) {
+	return withClassName({
+		"data-slot": TOGGLE_SLOTS.root,
+		"data-variant": variant,
+		"data-size": size,
+		"data-icon-only": iconOnly ? "true" : void 0,
+		"data-pressed": flag(pressed),
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Group prop bag: the slot anchor plus the `data-variant`/`data-size` its descendant toggles read. */
+function groupProps({ variant = "ghost", size = "md", className } = {}) {
+	return withClassName({
+		"data-slot": TOGGLE_SLOTS.group,
+		"data-variant": variant,
+		"data-size": size
+	}, className);
+}
+//#endregion
+export { groupProps, rootProps };

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

@@ -0,0 +1,26 @@
+//#region src/components/toggle/toggle.slots.d.ts
+/**
+ * The data attributes `Toggle` (and the Base UI toggle/toggle-group it renders) expose for host-side
+ * styling and tests. Slot values mark each rendered element; the state attributes are emitted by Base
+ * UI — pair a slot with a state to target, say, only the pressed toggle.
+ */
+declare enum ToggleDataAttributes {
+  /** The rendered toggle (or group) element. */
+  slot = "data-slot",
+  /** The visual emphasis — `ghost` (transparent) | `primary` (primary-filled pressed) | `outline` (bordered). */
+  variant = "data-variant",
+  /** The size scale — `xs` | `sm` | `md` | `lg`; the generated layer keys the per-size internals off it. */
+  size = "data-size",
+  /** Present on a pressed (on) toggle. */
+  pressed = "data-pressed",
+  /** Present on a disabled toggle or group. */
+  disabled = "data-disabled",
+  /** Present on a group drawing the recessed segmented/connected track. */
+  attached = "data-attached",
+  /** Present on a group that allows several toggles pressed at once. */
+  multiple = "data-multiple",
+  /** `horizontal` | `vertical` — the group's orientation. */
+  orientation = "data-orientation"
+}
+//#endregion
+export { ToggleDataAttributes };

package/dist/components/toggle/toggle.slots.js

@@ -0,0 +1,36 @@
+//#region src/components/toggle/toggle.slots.ts
+/**
+* The slot vocabulary every `Toggle` 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 generates from the token-graph declarations.
+*/
+const TOGGLE_SLOTS = {
+	root: "noctis-toggle",
+	group: "noctis-toggle-group"
+};
+/**
+* The data attributes `Toggle` (and the Base UI toggle/toggle-group it renders) expose for host-side
+* styling and tests. Slot values mark each rendered element; the state attributes are emitted by Base
+* UI — pair a slot with a state to target, say, only the pressed toggle.
+*/
+let ToggleDataAttributes = /* @__PURE__ */ function(ToggleDataAttributes) {
+	/** The rendered toggle (or group) element. */
+	ToggleDataAttributes["slot"] = "data-slot";
+	/** The visual emphasis — `ghost` (transparent) | `primary` (primary-filled pressed) | `outline` (bordered). */
+	ToggleDataAttributes["variant"] = "data-variant";
+	/** The size scale — `xs` | `sm` | `md` | `lg`; the generated layer keys the per-size internals off it. */
+	ToggleDataAttributes["size"] = "data-size";
+	/** Present on a pressed (on) toggle. */
+	ToggleDataAttributes["pressed"] = "data-pressed";
+	/** Present on a disabled toggle or group. */
+	ToggleDataAttributes["disabled"] = "data-disabled";
+	/** Present on a group drawing the recessed segmented/connected track. */
+	ToggleDataAttributes["attached"] = "data-attached";
+	/** Present on a group that allows several toggles pressed at once. */
+	ToggleDataAttributes["multiple"] = "data-multiple";
+	/** `horizontal` | `vertical` — the group's orientation. */
+	ToggleDataAttributes["orientation"] = "data-orientation";
+	return ToggleDataAttributes;
+}({});
+//#endregion
+export { TOGGLE_SLOTS, ToggleDataAttributes };