@stridge/noctis 1.0.0-beta.0

package/dist/components/avatar/avatar.slots.js

@@ -0,0 +1,49 @@
+//#region src/components/avatar/avatar.slots.ts
+/**
+* The slot vocabulary every `Avatar` 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 AVATAR_SLOTS = {
+	root: "noctis-avatar",
+	image: "noctis-avatar-image",
+	fallback: "noctis-avatar-fallback",
+	indicator: "noctis-avatar-indicator",
+	skeleton: "noctis-avatar-skeleton",
+	group: "noctis-avatar-group"
+};
+/**
+* The `data-*` hooks `Avatar` stamps on its parts, for host-side styling and tests. Slot values mark
+* each rendered element; the `data-size`/`data-shape` axes carry the recipe the precompiled
+* `avatar.css` keys its box metrics off, and `data-avatar-index` selects which static fallback swatch
+* paints. The group lays out an overlapped row (`data-spacing`); its `+N` overflow chip is a
+* non-interactive avatar-shaped count marked with `data-avatar-overflow` (it reuses the `noctis-avatar`
+* slot so it inherits the box/overlap/ring). Base UI's Avatar drives the
+* image-loading status the fallback shows behind, plus the `data-starting-style` enter transition the
+* image cross-fades on.
+*/
+let AvatarDataAttributes = /* @__PURE__ */ function(AvatarDataAttributes) {
+	/** The root avatar element. */
+	AvatarDataAttributes["slot"] = "data-slot";
+	/** The size scale — `2xs` | `xs` | `sm` | `md` | `lg` | `xl`; the generated layer keys the per-size internals off it. */
+	AvatarDataAttributes["size"] = "data-size";
+	/** The shape — `circle` (default, fully round) | `rounded` (rounded corners). */
+	AvatarDataAttributes["shape"] = "data-shape";
+	/** `1`–`10`, the stable hashed swatch index the fallback fill reads its `bg-avatar-N` role from. */
+	AvatarDataAttributes["avatarIndex"] = "data-avatar-index";
+	/** Present when the avatar is dimmed/inactive — gates interactive states and applies the disabled opacity. */
+	AvatarDataAttributes["disabled"] = "data-disabled";
+	/** Present when the avatar carries a hairline ring separating it from its surface. */
+	AvatarDataAttributes["ring"] = "data-ring";
+	/** The indicator preset — a presence or status value; the dot reads its fill role from it. */
+	AvatarDataAttributes["preset"] = "data-preset";
+	/** The indicator's logical corner — `top` | `bottom` (default). */
+	AvatarDataAttributes["placement"] = "data-placement";
+	/** The group's overlap tightness — `tight` | `cozy` (default). */
+	AvatarDataAttributes["spacing"] = "data-spacing";
+	/** Marks the group's `+N` overflow chip (a non-interactive avatar-shaped count). */
+	AvatarDataAttributes["overflow"] = "data-avatar-overflow";
+	return AvatarDataAttributes;
+}({});
+//#endregion
+export { AVATAR_SLOTS, AvatarDataAttributes };

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

@@ -0,0 +1,28 @@
+//#region src/components/avatar/avatar.types.d.ts
+/**
+ * The size/shape/spacing/indicator vocabulary `Avatar` paints. Authored source of truth since styling
+ * is precompiled in `avatar.css`. Types-only: no runtime code, so it never participates in the styling
+ * layer.
+ */
+/** An avatar's footprint scale — `2xs` (inline-with-text) … `xl`. */
+type AvatarSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
+/** An avatar's shape — fully round, or a rounded-corner box. */
+type AvatarShape = "circle" | "rounded";
+/** How tightly avatars overlap inside a group. */
+type AvatarSpacing = "tight" | "cozy";
+/**
+ * A presence (availability) indicator preset — each maps to a `--noctis-color-presence-*` role and a
+ * default localized screen-reader label.
+ */
+type AvatarPresence = "online" | "busy" | "focus" | "away" | "offline";
+/**
+ * A status (contextual) indicator preset — each maps to an existing status role (`success`/`danger`/
+ * `muted`) and a default localized screen-reader label.
+ */
+type AvatarStatus = "approved" | "declined" | "locked";
+/** The flat indicator preset union — presence first, then status. The preset name implies its family. */
+type AvatarIndicatorPreset = AvatarPresence | AvatarStatus;
+/** Which logical corner a corner indicator sits in. */
+type AvatarIndicatorPlacement = "top" | "bottom";
+//#endregion
+export { AvatarIndicatorPlacement, AvatarIndicatorPreset, AvatarShape, AvatarSize, AvatarSpacing };

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

@@ -0,0 +1,2 @@
+import { Avatar } from "./avatar.js";
+import { AvatarDataAttributes } from "./avatar.slots.js";

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

@@ -0,0 +1,91 @@
+import { IconGlyph } from "../../icons/glyphs.js";
+import { ButtonSize, ButtonVariant } from "./button.types.js";
+import { ButtonProps, ButtonPropsArgs, buttonProps } from "./button.props.js";
+import { button_d_exports } from "../../primitives/button.js";
+import { ReactElement } from "react";
+
+//#region src/components/button/button.d.ts
+/**
+ * The primary action trigger, built on Base UI's `Button`. Renders a native `<button>`; pass `render`
+ * (with `nativeButton={false}` for non-button elements) to style a link or another element as a
+ * button. Loading overlays a spinner and hides the label without changing the button's footprint.
+ * Inside a {@link ButtonGroup}, an unset `variant`/`size` is inherited from the group through context,
+ * and the button stamps the group's segment marker so the group draws its seam.
+ *
+ * Styling is precompiled in `button.css`, keyed off the stable `data-button` marker (so an element a
+ * `<Button>` can't render keeps its own `data-slot`) plus the `data-variant`/`data-size`/… recipe; for
+ * such an element, spread {@link Button.props} onto it instead. `Button` also stamps the catalog
+ * `data-slot="noctis-button"` for SLOTS.md / testing. Base UI emits `data-disabled` on the rendered
+ * element, so the disabled affordance and the hover/active gates hold across every render target.
+ *
+ * @see {@link Button.Props}
+ */
+declare function ButtonImpl({
+  variant: variantProp,
+  size: sizeProp,
+  iconOnly,
+  fullWidth,
+  loading,
+  startIcon,
+  endIcon,
+  disabled,
+  className,
+  children,
+  ...props
+}: Button.Props): ReactElement;
+/**
+ * The action trigger. The component value carries the D12 `props()` escape hatch via `Object.assign`:
+ * spread `Button.props({ variant, size, iconOnly, fullWidth, loading, disabled })` onto an element a
+ * `<Button>` can't render to style it as a button. It returns a spreadable `{ "data-button": "",
+ * ...dataAttrs }` bag (the marker, never `data-slot`) the precompiled `button.css` keys off — the
+ * data-attribute-native replacement for the old `buttonVariants` class-string helper.
+ */
+declare const Button: typeof ButtonImpl & {
+  props: typeof buttonProps;
+};
+/**
+ * Per-part prop and variant types. Merges with the `Button` function above, so `Button` is the component
+ * value while `Button.Props` is its prop type and `Button.props` is the escape-hatch helper.
+ */
+declare namespace Button {
+  type Props = Omit<button_d_exports.Button.Props, "className"> & {
+    /**
+     * Visual emphasis. Inherited from an enclosing `ButtonGroup` when unset.
+     * @default "primary"
+     */
+    variant?: ButtonVariant;
+    /**
+     * Size scale — height, padding, and text. Inherited from an enclosing `ButtonGroup` when unset.
+     * @default "md"
+     */
+    size?: ButtonSize;
+    /**
+     * Square the button for a single icon. Provide an `aria-label` — there is no visible text to name it.
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Stretch the button to its container's width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Replace the content with a centered spinner and block interaction, keeping the button's size.
+     * @default false
+     */
+    loading?: boolean; /** Leading glyph, before the label. */
+    startIcon?: IconGlyph; /** Trailing glyph, after the label. */
+    endIcon?: IconGlyph; /** Merged onto the rendered element's class list. */
+    className?: string;
+  };
+  /** Visual emphasis of the button. */
+  type Variant = ButtonVariant;
+  /** Height/padding/text scale. */
+  type Size = ButtonSize;
+  /** Argument to the `Button.props(...)` escape-hatch helper. */
+  type PropsArgs = ButtonPropsArgs;
+  /** The spreadable data-attribute prop bag `Button.props()` returns (D12). */
+  type PartProps = ButtonProps;
+}
+//#endregion
+export { Button };

package/dist/components/button/button.js

@@ -0,0 +1,82 @@
+"use client";
+import { Icon } from "../../icons/icon.js";
+import { SpinnerIcon } from "../../icons/glyphs.js";
+import { button_exports } from "../../primitives/button.js";
+import { useButtonGroup } from "../button-group/button-group.context.js";
+import { buttonProps } from "./button.props.js";
+import { BUTTON_SLOTS } from "./button.slots.js";
+import clsx$1 from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/button/button.tsx
+/** The icon size that pairs with each button size. */
+const GLYPH_SIZE = {
+	xs: "xs",
+	sm: "sm",
+	md: "md",
+	lg: "md"
+};
+/**
+* The primary action trigger, built on Base UI's `Button`. Renders a native `<button>`; pass `render`
+* (with `nativeButton={false}` for non-button elements) to style a link or another element as a
+* button. Loading overlays a spinner and hides the label without changing the button's footprint.
+* Inside a {@link ButtonGroup}, an unset `variant`/`size` is inherited from the group through context,
+* and the button stamps the group's segment marker so the group draws its seam.
+*
+* Styling is precompiled in `button.css`, keyed off the stable `data-button` marker (so an element a
+* `<Button>` can't render keeps its own `data-slot`) plus the `data-variant`/`data-size`/… recipe; for
+* such an element, spread {@link Button.props} onto it instead. `Button` also stamps the catalog
+* `data-slot="noctis-button"` for SLOTS.md / testing. Base UI emits `data-disabled` on the rendered
+* element, so the disabled affordance and the hover/active gates hold across every render target.
+*
+* @see {@link Button.Props}
+*/
+function ButtonImpl({ variant: variantProp, size: sizeProp, iconOnly = false, fullWidth = false, loading = false, startIcon, endIcon, disabled = false, className, children, ...props }) {
+	const group = useButtonGroup();
+	const variant = variantProp ?? group?.variant;
+	const size = sizeProp ?? group?.size ?? "md";
+	const glyphSize = GLYPH_SIZE[size];
+	const { className: _omit, "data-disabled": _disabled, ...recipe } = buttonProps({
+		variant,
+		size,
+		iconOnly,
+		fullWidth,
+		loading
+	});
+	return /* @__PURE__ */ jsxs(button_exports.Button, {
+		...recipe,
+		"data-slot": BUTTON_SLOTS.root,
+		"data-button-group-item": group ? "" : void 0,
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		className: clsx$1(className),
+		...props,
+		children: [loading ? /* @__PURE__ */ jsx("span", {
+			"data-slot": BUTTON_SLOTS.spinner,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: SpinnerIcon,
+				size: glyphSize
+			})
+		}) : null, /* @__PURE__ */ jsxs("span", { children: [
+			startIcon ? /* @__PURE__ */ jsx(Icon, {
+				icon: startIcon,
+				size: glyphSize
+			}) : null,
+			children,
+			endIcon ? /* @__PURE__ */ jsx(Icon, {
+				icon: endIcon,
+				size: glyphSize
+			}) : null
+		] })]
+	});
+}
+/**
+* The action trigger. The component value carries the D12 `props()` escape hatch via `Object.assign`:
+* spread `Button.props({ variant, size, iconOnly, fullWidth, loading, disabled })` onto an element a
+* `<Button>` can't render to style it as a button. It returns a spreadable `{ "data-button": "",
+* ...dataAttrs }` bag (the marker, never `data-slot`) the precompiled `button.css` keys off — the
+* data-attribute-native replacement for the old `buttonVariants` class-string helper.
+*/
+const Button = Object.assign(ButtonImpl, { props: buttonProps });
+//#endregion
+export { Button };

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

@@ -0,0 +1,48 @@
+import { ButtonSize, ButtonVariant } from "./button.types.js";
+
+//#region src/components/button/button.props.d.ts
+/** A spreadable data-attribute prop bag — the shape `Button.props()` returns. Carries the marker, never `data-slot`. */
+type ButtonProps = {
+  /** The stable styling marker `button.css` keys every rule off — present regardless of a foreign host's `data-slot`. */"data-button": ""; /** 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;
+};
+/** Argument to `Button.props(...)` — the recipe the `button.css` rules key their look off. */
+interface ButtonPropsArgs {
+  /**
+   * Visual emphasis.
+   * @default "primary"
+   */
+  variant?: ButtonVariant;
+  /**
+   * Size scale — height, padding, and text.
+   * @default "md"
+   */
+  size?: ButtonSize;
+  /** Square the button for a single icon. */
+  iconOnly?: boolean;
+  /** Stretch the button to its container's width. */
+  fullWidth?: boolean;
+  /** Replace the content with the spinner overlay and hide the label in place. */
+  loading?: boolean;
+  /** Mark the button disabled — drives the not-allowed affordance and gates hover/active. */
+  disabled?: boolean;
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/**
+ * Button prop bag: the `data-button` marker plus the `data-variant`/`data-size`/`data-icon-only`/
+ * `data-full-width`/`data-loading`/`data-disabled` the `button.css` rules read. The escape hatch for an
+ * element a `<Button>` can't render — it styles the element as a button without touching its `data-slot`.
+ */
+declare function buttonProps({
+  variant,
+  size,
+  iconOnly,
+  fullWidth,
+  loading,
+  disabled,
+  className
+}?: ButtonPropsArgs): ButtonProps;
+//#endregion
+export { ButtonProps, ButtonPropsArgs, buttonProps };

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

@@ -0,0 +1,25 @@
+//#region src/components/button/button.props.ts
+/** Stamp a boolean axis as `"true"` when on, absent (`undefined`) when off (mirrors the `tv()` boolean variant). */
+const boolAttr = (on) => on ? "true" : void 0;
+/**
+* Button prop bag: the `data-button` marker plus the `data-variant`/`data-size`/`data-icon-only`/
+* `data-full-width`/`data-loading`/`data-disabled` the `button.css` rules read. The escape hatch for an
+* element a `<Button>` can't render — it styles the element as a button without touching its `data-slot`.
+*/
+function buttonProps({ variant = "primary", size = "md", iconOnly, fullWidth, loading, disabled, className } = {}) {
+	const bag = {
+		"data-button": "",
+		"data-variant": variant,
+		"data-size": size,
+		"data-icon-only": boolAttr(iconOnly),
+		"data-full-width": boolAttr(fullWidth),
+		"data-loading": boolAttr(loading),
+		"data-disabled": disabled ? "" : void 0
+	};
+	return className === void 0 ? bag : {
+		...bag,
+		className
+	};
+}
+//#endregion
+export { buttonProps };

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

@@ -0,0 +1,30 @@
+//#region src/components/button/button.slots.d.ts
+/**
+ * The data attributes the {@link Button} (and the Base UI 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.
+ *
+ * Styling keys off the stable `data-button` **marker**, not `data-slot`: `Button.props()` styles a
+ * foreign element (a link, the rail's close trigger) without clobbering that element's own `data-slot`,
+ * so the marker — plus the variant/state axes below — is the precompiled `button.css` styling hook.
+ */
+declare enum ButtonDataAttributes {
+  /** The catalog slot that marks the rendered element as a Button for SLOTS.md and testing hooks. */
+  slot = "data-slot",
+  /** The stable styling marker every `button.css` rule keys off — always present, independent of `data-slot`. */
+  button = "data-button",
+  /** The visual emphasis — `primary` | `accent` | `secondary` | `outline` | `ghost` | `danger` | `link`. */
+  variant = "data-variant",
+  /** The size scale — `xs` | `sm` | `md` | `lg`; the generated layer keys the per-size internals off it. */
+  size = "data-size",
+  /** Present (`true`) when the button is squared for a single icon. */
+  iconOnly = "data-icon-only",
+  /** Present (`true`) when the button stretches to its container's width. */
+  fullWidth = "data-full-width",
+  /** Present (`true`) while loading — hides the content row in place behind the spinner overlay. */
+  loading = "data-loading",
+  /** Present when the button is disabled (including while `loading`). */
+  disabled = "data-disabled"
+}
+//#endregion
+export { ButtonDataAttributes };

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

@@ -0,0 +1,40 @@
+//#region src/components/button/button.slots.ts
+/**
+* The slot vocabulary every `Button` 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 BUTTON_SLOTS = {
+	root: "noctis-button",
+	spinner: "noctis-button-spinner"
+};
+/**
+* The data attributes the {@link Button} (and the Base UI 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.
+*
+* Styling keys off the stable `data-button` **marker**, not `data-slot`: `Button.props()` styles a
+* foreign element (a link, the rail's close trigger) without clobbering that element's own `data-slot`,
+* so the marker — plus the variant/state axes below — is the precompiled `button.css` styling hook.
+*/
+let ButtonDataAttributes = /* @__PURE__ */ function(ButtonDataAttributes) {
+	/** The catalog slot that marks the rendered element as a Button for SLOTS.md and testing hooks. */
+	ButtonDataAttributes["slot"] = "data-slot";
+	/** The stable styling marker every `button.css` rule keys off — always present, independent of `data-slot`. */
+	ButtonDataAttributes["button"] = "data-button";
+	/** The visual emphasis — `primary` | `accent` | `secondary` | `outline` | `ghost` | `danger` | `link`. */
+	ButtonDataAttributes["variant"] = "data-variant";
+	/** The size scale — `xs` | `sm` | `md` | `lg`; the generated layer keys the per-size internals off it. */
+	ButtonDataAttributes["size"] = "data-size";
+	/** Present (`true`) when the button is squared for a single icon. */
+	ButtonDataAttributes["iconOnly"] = "data-icon-only";
+	/** Present (`true`) when the button stretches to its container's width. */
+	ButtonDataAttributes["fullWidth"] = "data-full-width";
+	/** Present (`true`) while loading — hides the content row in place behind the spinner overlay. */
+	ButtonDataAttributes["loading"] = "data-loading";
+	/** Present when the button is disabled (including while `loading`). */
+	ButtonDataAttributes["disabled"] = "data-disabled";
+	return ButtonDataAttributes;
+}({});
+//#endregion
+export { BUTTON_SLOTS, ButtonDataAttributes };

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

@@ -0,0 +1,12 @@
+//#region src/components/button/button.types.d.ts
+/**
+ * The variant/size vocabulary `Button` paints — formerly derived from the `buttonVariants` `tv()`
+ * recipe, now the authored source of truth since styling moved to precompiled `button.css`. Types-only:
+ * no runtime code, so it never participates in the styling layer.
+ */
+/** The visual emphasis of a button. */
+type ButtonVariant = "primary" | "accent" | "secondary" | "outline" | "ghost" | "danger" | "link";
+/** A button's height/padding/text scale. */
+type ButtonSize = "xs" | "sm" | "md" | "lg";
+//#endregion
+export { ButtonSize, ButtonVariant };

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

@@ -0,0 +1,2 @@
+import { Button } from "./button.js";
+import { ButtonDataAttributes } from "./button.slots.js";

package/dist/components/button-group/button-group.context.js

@@ -0,0 +1,15 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/button-group/button-group.context.ts
+const ButtonGroupContext = createContext(null);
+const ButtonGroupProvider = ButtonGroupContext.Provider;
+/**
+* Read the enclosing `ButtonGroup`'s shared `variant`/`size`, or `null` when the button stands alone.
+* A bare `<Button>` is valid, so this returns `null` rather than throwing — the button falls back to
+* its own props and defaults.
+*/
+function useButtonGroup() {
+	return use(ButtonGroupContext);
+}
+//#endregion
+export { ButtonGroupProvider, useButtonGroup };

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

@@ -0,0 +1,60 @@
+import { ButtonSize, ButtonVariant } from "../button/button.types.js";
+import { ButtonGroupPartProps, ButtonGroupRootPropsArgs, rootProps } from "./button-group.props.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+
+//#region src/components/button-group/button-group.d.ts
+/**
+ * A row of buttons welded into one control — a toolbar of icon buttons, a segmented set of actions, or
+ * a primary action paired with a `Menu.Trigger` (the split-button pattern). Wrap any number of
+ * `Button`s (icon, label, or icon-only); the group squares their touching corners and draws a clearly
+ * visible divider between each.
+ *
+ * The group owns the shared look: set `variant`/`size` on the group and every descendant `Button`
+ * inherits them through context (an explicit prop on a child still wins). Inheritance reaches a
+ * `Button` rendered through a `render` prop too, so a `Menu.Trigger` rendered as a `Button` matches the
+ * group; that grouped button stamps a `data-button-group-item` marker the group keys its seam off, so
+ * the divider lands on the real segments regardless of focus-guard siblings.
+ *
+ * Styling is precompiled in `button-group.css`, keyed off the group's `data-slot="noctis-button-group"`
+ * anchor plus the `data-button-group-item` marker its segments stamp; for an element a `<ButtonGroup>`
+ * can't render, spread {@link ButtonGroup.props} onto it instead.
+ *
+ * @see {@link ButtonGroup.Props}
+ */
+declare function ButtonGroupImpl({
+  variant,
+  size,
+  role,
+  className,
+  children,
+  ...props
+}: ButtonGroup.Props): ReactElement;
+/**
+ * The welded button row. The function value carries the D12 `props()` escape hatch via `Object.assign`:
+ * spread `ButtonGroup.props()` onto an element a `<ButtonGroup>` can't render to anchor the weld/seam
+ * CSS on it. It returns a spreadable `{ "data-slot": "noctis-button-group", ...dataAttrs }` bag the
+ * precompiled `button-group.css` keys off — the data-attribute-native replacement for the old
+ * `buttonGroupRoot` class-string helper.
+ */
+declare const ButtonGroup: typeof ButtonGroupImpl & {
+  props: typeof rootProps;
+};
+/**
+ * Prop types for `ButtonGroup`. Types-only — it merges with the `ButtonGroup` function above, so
+ * `ButtonGroup` is the component value, `ButtonGroup.Props` is its prop type, and `ButtonGroup.props`
+ * is the escape-hatch helper.
+ */
+declare namespace ButtonGroup {
+  type Props = ComponentProps<"div"> & {
+    /** Emphasis shared with every descendant `Button` that doesn't set its own `variant`. */variant?: ButtonVariant; /** Size shared with every descendant `Button` that doesn't set its own `size`. */
+    size?: ButtonSize; /** The buttons to attach — any number; each may carry an icon, a label, or be icon-only. */
+    children?: ReactNode; /** Merged onto the group's class list. */
+    className?: string;
+  };
+  /** Argument to the `ButtonGroup.props(...)` escape-hatch helper. */
+  type PropsArgs = ButtonGroupRootPropsArgs;
+  /** The spreadable data-attribute prop bag `ButtonGroup.props()` returns (D12). */
+  type PartProps = ButtonGroupPartProps;
+}
+//#endregion
+export { ButtonGroup };

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

@@ -0,0 +1,50 @@
+"use client";
+import { ButtonGroupProvider } from "./button-group.context.js";
+import { rootProps } from "./button-group.props.js";
+import clsx$1 from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/button-group/button-group.tsx
+/**
+* A row of buttons welded into one control — a toolbar of icon buttons, a segmented set of actions, or
+* a primary action paired with a `Menu.Trigger` (the split-button pattern). Wrap any number of
+* `Button`s (icon, label, or icon-only); the group squares their touching corners and draws a clearly
+* visible divider between each.
+*
+* The group owns the shared look: set `variant`/`size` on the group and every descendant `Button`
+* inherits them through context (an explicit prop on a child still wins). Inheritance reaches a
+* `Button` rendered through a `render` prop too, so a `Menu.Trigger` rendered as a `Button` matches the
+* group; that grouped button stamps a `data-button-group-item` marker the group keys its seam off, so
+* the divider lands on the real segments regardless of focus-guard siblings.
+*
+* Styling is precompiled in `button-group.css`, keyed off the group's `data-slot="noctis-button-group"`
+* anchor plus the `data-button-group-item` marker its segments stamp; for an element a `<ButtonGroup>`
+* can't render, spread {@link ButtonGroup.props} onto it instead.
+*
+* @see {@link ButtonGroup.Props}
+*/
+function ButtonGroupImpl({ variant, size, role = "group", className, children, ...props }) {
+	const { className: _omit, ...recipe } = rootProps();
+	return /* @__PURE__ */ jsx("div", {
+		role,
+		...recipe,
+		className: clsx$1(className),
+		...props,
+		children: /* @__PURE__ */ jsx(ButtonGroupProvider, {
+			value: {
+				variant,
+				size
+			},
+			children
+		})
+	});
+}
+/**
+* The welded button row. The function value carries the D12 `props()` escape hatch via `Object.assign`:
+* spread `ButtonGroup.props()` onto an element a `<ButtonGroup>` can't render to anchor the weld/seam
+* CSS on it. It returns a spreadable `{ "data-slot": "noctis-button-group", ...dataAttrs }` bag the
+* precompiled `button-group.css` keys off — the data-attribute-native replacement for the old
+* `buttonGroupRoot` class-string helper.
+*/
+const ButtonGroup = Object.assign(ButtonGroupImpl, { props: rootProps });
+//#endregion
+export { ButtonGroup };

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

@@ -0,0 +1,22 @@
+//#region src/components/button-group/button-group.props.d.ts
+/** A spreadable data-attribute prop bag — the shape `ButtonGroup.props()` returns. */
+type ButtonGroupPartProps = {
+  /** The slot value the matching `button-group.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;
+};
+/** Argument to `ButtonGroup.props(...)` — the recipe the `button-group.css` rules key their look off. */
+interface ButtonGroupRootPropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/**
+ * Root prop bag: just `data-slot` — `button-group.css` keys its weld/seam rules off it plus the
+ * `data-button-group-item` marker its segments stamp. The escape hatch for an element a `<ButtonGroup>`
+ * can't render.
+ */
+declare function rootProps({
+  className
+}?: ButtonGroupRootPropsArgs): ButtonGroupPartProps;
+//#endregion
+export { ButtonGroupPartProps, ButtonGroupRootPropsArgs, rootProps };

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

@@ -0,0 +1,33 @@
+import { BUTTON_GROUP_SLOTS } from "./button-group.slots.js";
+//#region src/components/button-group/button-group.props.ts
+/**
+* The D12 unified part contract for ButtonGroup — the data-attribute-native replacement for the old
+* `buttonGroupRoot` class-string helper, for an element a `<ButtonGroup>` can't render.
+*
+* `rootProps(...)` returns a **spreadable props object** of the form
+* `{ "data-slot": "noctis-button-group", ...dataAttrs }`. Under the single-`data-slot` anchor model the
+* `data-slot` is the only styling hook needed — `button-group.css` keys every rule off it (and the
+* `data-button-group-item` marker each descendant `Button` stamps) — so spreading this onto a foreign
+* element styles it as a button group:
+*
+*     <div role="group" {...ButtonGroup.props()} />
+*     // → <div role="group" data-slot="noctis-button-group">
+*
+* The group carries no variant/size of its own on the slot: those flow to descendant `Button`s through
+* context, not onto this element. The escape hatch carries no className (styling is attribute-driven);
+* an optional `className` passthrough is accepted and forwarded verbatim.
+*/
+/**
+* Root prop bag: just `data-slot` — `button-group.css` keys its weld/seam rules off it plus the
+* `data-button-group-item` marker its segments stamp. The escape hatch for an element a `<ButtonGroup>`
+* can't render.
+*/
+function rootProps({ className } = {}) {
+	const bag = { "data-slot": BUTTON_GROUP_SLOTS.root };
+	return className === void 0 ? bag : {
+		...bag,
+		className
+	};
+}
+//#endregion
+export { rootProps };

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

@@ -0,0 +1,12 @@
+//#region src/components/button-group/button-group.slots.d.ts
+/**
+ * The `data-*` hooks `ButtonGroup` stamps, for host-side styling and tests. The dividers between
+ * segments are drawn in CSS (a pseudo-element), not separate elements, so the group exposes a single
+ * slot; target the child buttons by their own `data-slot="noctis-button"` (or the `data-button` marker).
+ */
+declare enum ButtonGroupDataAttributes {
+  /** Marks the group wrapper. */
+  slot = "data-slot"
+}
+//#endregion
+export { ButtonGroupDataAttributes };

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

@@ -0,0 +1,18 @@
+//#region src/components/button-group/button-group.slots.ts
+/**
+* The slot vocabulary `ButtonGroup` stamps as its `data-slot`. The authored source the orchestration
+* file reads from; SLOTS.md still generates from the token-graph declarations.
+*/
+const BUTTON_GROUP_SLOTS = { root: "noctis-button-group" };
+/**
+* The `data-*` hooks `ButtonGroup` stamps, for host-side styling and tests. The dividers between
+* segments are drawn in CSS (a pseudo-element), not separate elements, so the group exposes a single
+* slot; target the child buttons by their own `data-slot="noctis-button"` (or the `data-button` marker).
+*/
+let ButtonGroupDataAttributes = /* @__PURE__ */ function(ButtonGroupDataAttributes) {
+	/** Marks the group wrapper. */
+	ButtonGroupDataAttributes["slot"] = "data-slot";
+	return ButtonGroupDataAttributes;
+}({});
+//#endregion
+export { BUTTON_GROUP_SLOTS, ButtonGroupDataAttributes };

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

@@ -0,0 +1,2 @@
+import { ButtonGroup } from "./button-group.js";
+import { ButtonGroupDataAttributes } from "./button-group.slots.js";