@stridge/noctis 1.0.0-beta.0

package/dist/components/slider/slider.props.js

@@ -0,0 +1,59 @@
+import { SLIDER_SLOTS } from "./slider.slots.js";
+//#region src/components/slider/slider.props.ts
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Root prop bag: `data-slot` plus the `data-size` the descendant rules read. */
+function rootProps({ size = "md", className } = {}) {
+	return withClassName({
+		"data-slot": SLIDER_SLOTS.root,
+		"data-size": size
+	}, className);
+}
+/** Header prop bag: the baseline row that holds the label and value above the control. */
+function headerProps({ className } = {}) {
+	return withClassName({ "data-slot": SLIDER_SLOTS.header }, className);
+}
+/** Label prop bag: just the slot anchor. */
+function labelProps({ className } = {}) {
+	return withClassName({ "data-slot": SLIDER_SLOTS.label }, className);
+}
+/** Value prop bag: just the slot anchor. */
+function valueProps({ className } = {}) {
+	return withClassName({ "data-slot": SLIDER_SLOTS.value }, className);
+}
+/** Control prop bag: just the slot anchor (metrics flow from the root size). */
+function controlProps({ className } = {}) {
+	return withClassName({ "data-slot": SLIDER_SLOTS.control }, className);
+}
+/** Track prop bag: just the slot anchor. */
+function trackProps({ className } = {}) {
+	return withClassName({ "data-slot": SLIDER_SLOTS.track }, className);
+}
+/** Indicator prop bag: just the slot anchor. */
+function indicatorProps({ className } = {}) {
+	return withClassName({ "data-slot": SLIDER_SLOTS.indicator }, className);
+}
+/** Thumb prop bag: just the slot anchor (Base UI stamps the live drag/disabled/focus state). */
+function thumbProps({ className } = {}) {
+	return withClassName({ "data-slot": SLIDER_SLOTS.thumb }, className);
+}
+/** Thumb-value prop bag: the drag readout bubble (decorative — `aria-hidden`, shown on drag/focus). */
+function thumbValueProps({ className } = {}) {
+	return withClassName({ "data-slot": SLIDER_SLOTS.thumbValue }, className);
+}
+/** Marks prop bag: the container layered over the control that positions the step ticks. */
+function marksProps({ className } = {}) {
+	return withClassName({ "data-slot": SLIDER_SLOTS.marks }, className);
+}
+/** Mark prop bag: a single step tick (its position + passed state are set inline by the part). */
+function markProps({ className } = {}) {
+	return withClassName({ "data-slot": SLIDER_SLOTS.mark }, className);
+}
+/** Mark-label prop bag: a tick's decorative caption (`aria-hidden`). */
+function markLabelProps({ className } = {}) {
+	return withClassName({ "data-slot": SLIDER_SLOTS.markLabel }, className);
+}
+//#endregion
+export { controlProps, headerProps, indicatorProps, labelProps, markLabelProps, markProps, marksProps, rootProps, thumbProps, thumbValueProps, trackProps, valueProps };

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

@@ -0,0 +1,30 @@
+//#region src/components/slider/slider.slots.d.ts
+/**
+ * The `data-*` hooks `Slider` stamps on its parts, for host-side styling and tests. The `data-slot`
+ * value marks each rendered element; the state attributes are emitted by Base UI's Slider — pair a
+ * slot with a state to target, say, only a thumb while it is being dragged.
+ */
+declare enum SliderDataAttributes {
+  /** The slot value marking each rendered part. */
+  slot = "data-slot",
+  /** The control size the root stamps — `sm` or `md`; the metrics re-point off it. */
+  size = "data-size",
+  /** `horizontal` | `vertical` — the control's orientation, stamped by Base UI on every part. */
+  orientation = "data-orientation",
+  /** Present on every part while a thumb is being dragged. */
+  dragging = "data-dragging",
+  /** Present on every part when the slider is disabled. */
+  disabled = "data-disabled",
+  /** Present on the thumb whose input has keyboard focus. */
+  focused = "data-focused",
+  /**
+   * Present on every part when the slider is in an invalid `Field.Root` — the field error cue paints
+   * the track border and thumb ring in `danger`. Base UI also stamps the companion `data-valid`,
+   * `data-dirty`, and `data-touched` field-state attributes for host-side styling.
+   */
+  invalid = "data-invalid",
+  /** Stamped on a step mark the value has reached, switching the tick to the accent (signal). */
+  markState = "data-state"
+}
+//#endregion
+export { SliderDataAttributes };

package/dist/components/slider/slider.slots.js

@@ -0,0 +1,50 @@
+//#region src/components/slider/slider.slots.ts
+/**
+* The slot vocabulary every `Slider` part 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.
+*/
+const SLIDER_SLOTS = {
+	root: "noctis-slider",
+	header: "noctis-slider-header",
+	label: "noctis-slider-label",
+	value: "noctis-slider-value",
+	control: "noctis-slider-control",
+	track: "noctis-slider-track",
+	indicator: "noctis-slider-indicator",
+	thumb: "noctis-slider-thumb",
+	thumbValue: "noctis-slider-thumb-value",
+	marks: "noctis-slider-marks",
+	mark: "noctis-slider-mark",
+	markLabel: "noctis-slider-mark-label"
+};
+/**
+* The `data-*` hooks `Slider` stamps on its parts, for host-side styling and tests. The `data-slot`
+* value marks each rendered element; the state attributes are emitted by Base UI's Slider — pair a
+* slot with a state to target, say, only a thumb while it is being dragged.
+*/
+let SliderDataAttributes = /* @__PURE__ */ function(SliderDataAttributes) {
+	/** The slot value marking each rendered part. */
+	SliderDataAttributes["slot"] = "data-slot";
+	/** The control size the root stamps — `sm` or `md`; the metrics re-point off it. */
+	SliderDataAttributes["size"] = "data-size";
+	/** `horizontal` | `vertical` — the control's orientation, stamped by Base UI on every part. */
+	SliderDataAttributes["orientation"] = "data-orientation";
+	/** Present on every part while a thumb is being dragged. */
+	SliderDataAttributes["dragging"] = "data-dragging";
+	/** Present on every part when the slider is disabled. */
+	SliderDataAttributes["disabled"] = "data-disabled";
+	/** Present on the thumb whose input has keyboard focus. */
+	SliderDataAttributes["focused"] = "data-focused";
+	/**
+	* Present on every part when the slider is in an invalid `Field.Root` — the field error cue paints
+	* the track border and thumb ring in `danger`. Base UI also stamps the companion `data-valid`,
+	* `data-dirty`, and `data-touched` field-state attributes for host-side styling.
+	*/
+	SliderDataAttributes["invalid"] = "data-invalid";
+	/** Stamped on a step mark the value has reached, switching the tick to the accent (signal). */
+	SliderDataAttributes["markState"] = "data-state";
+	return SliderDataAttributes;
+}({});
+//#endregion
+export { SLIDER_SLOTS, SliderDataAttributes };

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

@@ -0,0 +1 @@
+import { Surface } from "./surface.js";

package/dist/components/surface/surface.d.ts

@@ -0,0 +1,84 @@
+import { SurfaceElevation, SurfaceShade, SurfaceShadow } from "./surface.types.js";
+import { SurfacePartProps, SurfaceRootPropsArgs, rootProps } from "./surface.props.js";
+import { useRender } from "../../core/render.js";
+import { JSX, ReactElement, Ref } from "react";
+
+//#region src/components/surface/surface.d.ts
+interface SurfaceOwnProps<TTag extends keyof JSX.IntrinsicElements = "div"> {
+  /** The HTML tag to render. Defaults to `div`. Use `render` to compose with a component instead. */
+  as?: TTag;
+  /** A Base UI render prop — an element or function — to replace the rendered element entirely. */
+  render?: useRender.RenderProp;
+  ref?: Ref<HTMLElement>;
+  /**
+   * The elevation scope this surface establishes. Sets `data-elevation`, so every role inside —
+   * surfaces, borders, and controls — re-derives to that level. Omit for the root canvas.
+   */
+  elevation?: SurfaceElevation;
+  /** Which ramp tier to paint. Defaults to `base` — the control-safe choice for any scope. */
+  shade?: SurfaceShade;
+  /** Add the standard 1px border. */
+  bordered?: boolean;
+  /** Carry a drop-shadow tier. Defaults to none. */
+  shadow?: SurfaceShadow;
+  /** The styling/testing hook attribute. Defaults to `noctis-surface`. */
+  "data-slot"?: string;
+}
+/**
+ * The layer primitive: one place that owns a surface's level so no caller hand-picks a token. Set
+ * `elevation` and it establishes the scope **and** paints that scope's base, so controls inside
+ * separate cleanly; pick a `shade` for content cards or wells. Polymorphic — render any tag via `as`
+ * or compose any component via `render` (e.g. a `Dialog.Popup`). `Sheet`, `Rail`, and the overlay
+ * primitives build on it, so the elevation rule is expressed once and inherited everywhere.
+ *
+ * Styling is precompiled in `surface.css`, keyed off the stable `data-surface` marker (so the paint
+ * survives a consumer's `data-slot` override) plus the `data-shade`/`data-bordered`/`data-shadow`
+ * recipe; for an element a `<Surface>` can't wrap, spread {@link Surface.props} onto it instead.
+ *
+ * @see {@link Surface.Props}
+ */
+declare function SurfaceImpl<TTag extends keyof JSX.IntrinsicElements = "div">({
+  as,
+  render,
+  ref,
+  elevation,
+  shade,
+  bordered,
+  shadow,
+  className,
+  "data-slot": dataSlot,
+  ...props
+}: Surface.Props<TTag>): ReactElement;
+/**
+ * The layer primitive — a single, polymorphic part. The function value carries the D12 `props()` escape
+ * hatch via `Object.assign`: spread `Surface.props({ shade, bordered, shadow, elevation })` onto any
+ * element a `<Surface>` can't wrap to style it as a surface. It returns a spreadable
+ * `{ "data-slot": "noctis-surface", ...dataAttrs }` bag the precompiled `surface.css` keys off — the
+ * data-attribute-native replacement for the old `surfaceVariants` class-string helper.
+ */
+declare const Surface: typeof SurfaceImpl & {
+  props: typeof rootProps;
+};
+/**
+ * Prop, shade, shadow, and elevation types. Types-only — it emits no runtime code and merges with the
+ * `Surface` function above, so `Surface` is the component value while `Surface.Props` is its prop type.
+ */
+declare namespace Surface {
+  /**
+   * Props for `Surface`, polymorphic over the rendered tag like `Primitive`: native attributes
+   * track `as` (`Surface.Props<"nav">` carries nav attributes, and so on). Defaults to `div`.
+   */
+  type Props<TTag extends keyof JSX.IntrinsicElements = "div"> = SurfaceOwnProps<TTag> & Omit<JSX.IntrinsicElements[TTag], keyof SurfaceOwnProps<TTag>>;
+  /** Which tier of the surface ramp to paint. */
+  type Shade = SurfaceShade;
+  /** The drop-shadow tier the surface carries. */
+  type Shadow = SurfaceShadow;
+  /** The elevation scope the surface establishes. */
+  type Elevation = SurfaceElevation;
+  /** Argument to the `Surface.props(...)` escape-hatch helper. */
+  type PropsArgs = SurfaceRootPropsArgs;
+  /** The spreadable data-attribute prop bag `Surface.props()` returns (D12). */
+  type PartProps = SurfacePartProps;
+}
+//#endregion
+export { Surface };

package/dist/components/surface/surface.js

@@ -0,0 +1,48 @@
+"use client";
+import { useRender } from "../../core/render.js";
+import { SURFACE_SLOTS } from "./surface.slots.js";
+import { rootProps } from "./surface.props.js";
+import clsx$1 from "clsx";
+//#region src/components/surface/surface.tsx
+/**
+* The layer primitive: one place that owns a surface's level so no caller hand-picks a token. Set
+* `elevation` and it establishes the scope **and** paints that scope's base, so controls inside
+* separate cleanly; pick a `shade` for content cards or wells. Polymorphic — render any tag via `as`
+* or compose any component via `render` (e.g. a `Dialog.Popup`). `Sheet`, `Rail`, and the overlay
+* primitives build on it, so the elevation rule is expressed once and inherited everywhere.
+*
+* Styling is precompiled in `surface.css`, keyed off the stable `data-surface` marker (so the paint
+* survives a consumer's `data-slot` override) plus the `data-shade`/`data-bordered`/`data-shadow`
+* recipe; for an element a `<Surface>` can't wrap, spread {@link Surface.props} onto it instead.
+*
+* @see {@link Surface.Props}
+*/
+function SurfaceImpl({ as, render, ref, elevation, shade, bordered, shadow, className, "data-slot": dataSlot = SURFACE_SLOTS.root, ...props }) {
+	const { className: _omit, ...recipe } = rootProps({
+		elevation,
+		shade,
+		bordered,
+		shadow
+	});
+	return useRender({
+		defaultTagName: as ?? "div",
+		render,
+		ref,
+		props: {
+			...recipe,
+			"data-slot": dataSlot,
+			className: clsx$1(className),
+			...props
+		}
+	});
+}
+/**
+* The layer primitive — a single, polymorphic part. The function value carries the D12 `props()` escape
+* hatch via `Object.assign`: spread `Surface.props({ shade, bordered, shadow, elevation })` onto any
+* element a `<Surface>` can't wrap to style it as a surface. It returns a spreadable
+* `{ "data-slot": "noctis-surface", ...dataAttrs }` bag the precompiled `surface.css` keys off — the
+* data-attribute-native replacement for the old `surfaceVariants` class-string helper.
+*/
+const Surface = Object.assign(SurfaceImpl, { props: rootProps });
+//#endregion
+export { Surface };

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

@@ -0,0 +1,35 @@
+import { SurfaceElevation, SurfaceShade, SurfaceShadow } from "./surface.types.js";
+
+//#region src/components/surface/surface.props.d.ts
+/** A spreadable data-attribute prop bag — the shape `Surface.Root.props()` returns. */
+type SurfacePartProps = {
+  /** The slot value the matching `surface.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;
+};
+/** Argument to `Surface.Root.props(...)` — the recipe the `surface.css` rules key their look off. */
+interface SurfaceRootPropsArgs {
+  /** The elevation scope to establish — re-themes the subtree via `data-elevation`. Omit for root. */
+  elevation?: SurfaceElevation;
+  /** Which ramp tier to paint. @default "base" */
+  shade?: SurfaceShade;
+  /** Draw the standard 1px border. */
+  bordered?: boolean;
+  /** The drop-shadow tier to carry. */
+  shadow?: SurfaceShadow;
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/**
+ * Root prop bag: `data-slot` plus the `data-elevation`/`data-shade`/`data-bordered`/`data-shadow` the
+ * `surface.css` rules read. The escape hatch for elements a `<Surface>` can't wrap.
+ */
+declare function rootProps({
+  elevation,
+  shade,
+  bordered,
+  shadow,
+  className
+}?: SurfaceRootPropsArgs): SurfacePartProps;
+//#endregion
+export { SurfacePartProps, SurfaceRootPropsArgs, rootProps };

package/dist/components/surface/surface.props.js

@@ -0,0 +1,26 @@
+import { SURFACE_SLOTS } from "./surface.slots.js";
+//#region src/components/surface/surface.props.ts
+/** Stamp a boolean state as a bare data-attribute: present (`""`) when on, absent (`undefined`) when off. */
+const flag = (on) => on ? "" : void 0;
+/** Drop a value when it is the default `base` shade (the unprefixed CSS rule already paints it). */
+const shadeAttr = (shade) => shade === void 0 || shade === "base" ? void 0 : shade;
+/**
+* Root prop bag: `data-slot` plus the `data-elevation`/`data-shade`/`data-bordered`/`data-shadow` the
+* `surface.css` rules read. The escape hatch for elements a `<Surface>` can't wrap.
+*/
+function rootProps({ elevation, shade, bordered, shadow, className } = {}) {
+	const bag = {
+		"data-slot": SURFACE_SLOTS.root,
+		"data-surface": "",
+		"data-elevation": elevation,
+		"data-shade": shadeAttr(shade),
+		"data-bordered": flag(bordered),
+		"data-shadow": shadow
+	};
+	return className === void 0 ? bag : {
+		...bag,
+		className
+	};
+}
+//#endregion
+export { rootProps };

package/dist/components/surface/surface.slots.js

@@ -0,0 +1,9 @@
+//#region src/components/surface/surface.slots.ts
+/**
+* The slot vocabulary `Surface` stamps as its `data-slot`. The authored source the orchestration file
+* reads from, kebab-cased `{component}`; SLOTS.md still generates from the token-graph declarations.
+* Surface is a single-part primitive, so it carries one slot.
+*/
+const SURFACE_SLOTS = { root: "noctis-surface" };
+//#endregion
+export { SURFACE_SLOTS };

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

@@ -0,0 +1,14 @@
+//#region src/components/surface/surface.types.d.ts
+/**
+ * The shade/shadow/elevation vocabulary `Surface` paints — formerly derived from the `surfaceVariants`
+ * `tv()` recipe, now the authored source of truth since styling moved to precompiled `surface.css`.
+ * Types-only: no runtime code, so it never participates in the styling layer.
+ */
+/** Which tier of the surface ramp a `Surface` paints. */
+type SurfaceShade = "base" | "surface" | "raised" | "sunken";
+/** The drop-shadow tier a `Surface` carries. */
+type SurfaceShadow = "none" | "card" | "popover" | "modal";
+/** The elevation scope a `Surface` establishes. */
+type SurfaceElevation = "elevated" | "menu" | "sunken";
+//#endregion
+export { SurfaceElevation, SurfaceShade, SurfaceShadow };

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

@@ -0,0 +1,2 @@
+import { Switch } from "./switch.js";
+import { SwitchDataAttributes } from "./switch.slots.js";

package/dist/components/switch/switch.context.js

@@ -0,0 +1,14 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/switch/switch.context.ts
+const SwitchFieldContext = createContext(null);
+const SwitchFieldProvider = SwitchFieldContext.Provider;
+/**
+* Read the enclosing `Switch.Field` size, or `null` when a switch renders standalone. A `Switch.Root`
+* inside a field inherits this size unless it sets its own, so one `size` on the field sizes the row.
+*/
+function useSwitchFieldContext() {
+	return use(SwitchFieldContext);
+}
+//#endregion
+export { SwitchFieldProvider, useSwitchFieldContext };

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,110 @@
+import { fieldProps, labelProps, switchProps, thumbProps } from "./switch.props.js";
+import { ReactElement } from "react";
+import { Field } from "@base-ui/react/field";
+import { Switch } from "@base-ui/react/switch";
+
+//#region src/components/switch/switch.d.ts
+/** Track sizes a switch accepts, stamped as `data-size` on the root track. */
+declare const SIZES: readonly ["sm", "md", "lg"];
+/**
+ * The switch track — a pill that toggles between off and on. Renders Base UI's `Switch.Root` (a
+ * `<span>` with a sibling hidden `<input>`), which owns the checked state, the keyboard contract
+ * (Space toggles), focus management, and form participation. The render stamps the slot + `data-size`
+ * axis the CSS keys off; Base UI stamps the live `data-checked`/`data-unchecked`/`data-disabled`.
+ * `className` is a consumer passthrough.
+ *
+ * Compose a `Switch.Thumb` inside it for the sliding knob:
+ *
+ *     <Switch.Root>
+ *         <Switch.Thumb />
+ *     </Switch.Root>
+ */
+declare function SwitchRoot({
+  size,
+  className,
+  children,
+  ...props
+}: Switch$1.Root.Props): ReactElement;
+/**
+ * The movable knob that slides across the track to signal on/off. Renders Base UI's `Switch.Thumb` (a
+ * `<span>`), which carries the live `data-checked`/`data-unchecked` the CSS keys its travel off. The
+ * thumb's diameter re-points off the root track's `data-size` through the cascade — no prop needed.
+ * `className` is a consumer passthrough.
+ */
+declare function SwitchThumb({
+  className,
+  ...props
+}: Switch$1.Thumb.Props): ReactElement;
+/**
+ * The labelled row — pairs a `Switch.Label` with a `Switch.Root` so the whole pairing reads as one
+ * control. Renders Base UI's `Field.Root`, which links the label to the switch (clicking the label
+ * toggles it, the label becomes the accessible name) and feeds the switch its validity state. Lay the
+ * label and switch in either DOM order; the row mirrors under RTL by construction.
+ *
+ *     <Switch.Field>
+ *         <Switch.Label>Airplane mode</Switch.Label>
+ *         <Switch.Root>
+ *             <Switch.Thumb />
+ *         </Switch.Root>
+ *     </Switch.Field>
+ */
+declare function SwitchField({
+  size,
+  className,
+  children,
+  ...props
+}: Switch$1.Field.Props): ReactElement;
+/**
+ * The visible label that names a switch inside a `Switch.Field`. Renders Base UI's `Field.Label`, so
+ * clicking it toggles the switch and its text supplies the accessible name (no `aria-label` needed).
+ * It mirrors the field's disabled and invalid state through `data-disabled`/`data-invalid`.
+ */
+declare function SwitchLabel({
+  className,
+  children,
+  ...props
+}: Switch$1.Label.Props): ReactElement;
+/** A toggle between two opposing states, with a thumb that slides across an accent track when on. */
+declare const Switch$1: {
+  Root: typeof SwitchRoot & {
+    props: typeof switchProps;
+  };
+  Thumb: typeof SwitchThumb & {
+    props: typeof thumbProps;
+  };
+  Field: typeof SwitchField & {
+    props: typeof fieldProps;
+  };
+  Label: typeof SwitchLabel & {
+    props: typeof labelProps;
+  };
+};
+/** Per-part prop and shape types for the compound `Switch`; merges with the value above. */
+declare namespace Switch$1 {
+  /** Track size — `md` by default, `sm` for compact rows, `lg` for prominent ones. */
+  type Size = (typeof SIZES)[number];
+  namespace Root {
+    /** Props for {@link Switch.Root} — Base UI's `Switch.Root` plus the Noctis `size` axis. */
+    interface Props extends Switch.Root.Props {
+      /** Track size. Defaults to `md`. */
+      size?: Size;
+    }
+  }
+  namespace Thumb {
+    /** Props for {@link Switch.Thumb} — Base UI's `Switch.Thumb`. */
+    type Props = Switch.Thumb.Props;
+  }
+  namespace Field {
+    /** Props for {@link Switch.Field} — Base UI's `Field.Root` plus the Noctis `size` axis. */
+    interface Props extends Field.Root.Props {
+      /** Row size — scales the label text and cascades to the switch inside. Defaults to `md`. */
+      size?: Size;
+    }
+  }
+  namespace Label {
+    /** Props for {@link Switch.Label} — Base UI's `Field.Label`, the switch's visible accessible name. */
+    type Props = Field.Label.Props;
+  }
+}
+//#endregion
+export { Switch$1 as Switch };

package/dist/components/switch/switch.js

@@ -0,0 +1,92 @@
+"use client";
+import { SwitchFieldProvider, useSwitchFieldContext } from "./switch.context.js";
+import { SWITCH_SLOTS } from "./switch.slots.js";
+import { fieldProps, labelProps, switchProps, thumbProps } from "./switch.props.js";
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { Switch } from "@base-ui/react/switch";
+//#region src/components/switch/switch.tsx
+/**
+* The switch track — a pill that toggles between off and on. Renders Base UI's `Switch.Root` (a
+* `<span>` with a sibling hidden `<input>`), which owns the checked state, the keyboard contract
+* (Space toggles), focus management, and form participation. The render stamps the slot + `data-size`
+* axis the CSS keys off; Base UI stamps the live `data-checked`/`data-unchecked`/`data-disabled`.
+* `className` is a consumer passthrough.
+*
+* Compose a `Switch.Thumb` inside it for the sliding knob:
+*
+*     <Switch.Root>
+*         <Switch.Thumb />
+*     </Switch.Root>
+*/
+function SwitchRoot({ size, className, children, ...props }) {
+	const field = useSwitchFieldContext();
+	const resolvedSize = size ?? field?.size ?? "md";
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		"data-slot": SWITCH_SLOTS.root,
+		"data-size": resolvedSize,
+		className,
+		...props,
+		children
+	});
+}
+/**
+* The movable knob that slides across the track to signal on/off. Renders Base UI's `Switch.Thumb` (a
+* `<span>`), which carries the live `data-checked`/`data-unchecked` the CSS keys its travel off. The
+* thumb's diameter re-points off the root track's `data-size` through the cascade — no prop needed.
+* `className` is a consumer passthrough.
+*/
+function SwitchThumb({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Switch.Thumb, {
+		"data-slot": SWITCH_SLOTS.thumb,
+		className,
+		...props
+	});
+}
+/**
+* The labelled row — pairs a `Switch.Label` with a `Switch.Root` so the whole pairing reads as one
+* control. Renders Base UI's `Field.Root`, which links the label to the switch (clicking the label
+* toggles it, the label becomes the accessible name) and feeds the switch its validity state. Lay the
+* label and switch in either DOM order; the row mirrors under RTL by construction.
+*
+*     <Switch.Field>
+*         <Switch.Label>Airplane mode</Switch.Label>
+*         <Switch.Root>
+*             <Switch.Thumb />
+*         </Switch.Root>
+*     </Switch.Field>
+*/
+function SwitchField({ size = "md", className, children, ...props }) {
+	return /* @__PURE__ */ jsx(SwitchFieldProvider, {
+		value: { size },
+		children: /* @__PURE__ */ jsx(Field.Root, {
+			"data-slot": SWITCH_SLOTS.field,
+			"data-size": size,
+			className,
+			...props,
+			children
+		})
+	});
+}
+/**
+* The visible label that names a switch inside a `Switch.Field`. Renders Base UI's `Field.Label`, so
+* clicking it toggles the switch and its text supplies the accessible name (no `aria-label` needed).
+* It mirrors the field's disabled and invalid state through `data-disabled`/`data-invalid`.
+*/
+function SwitchLabel({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Field.Label, {
+		"data-slot": SWITCH_SLOTS.label,
+		className,
+		...props,
+		children
+	});
+}
+/** A toggle between two opposing states, with a thumb that slides across an accent track when on. */
+const Switch$1 = {
+	Root: Object.assign(SwitchRoot, { props: switchProps }),
+	Thumb: Object.assign(SwitchThumb, { props: thumbProps }),
+	Field: Object.assign(SwitchField, { props: fieldProps }),
+	Label: Object.assign(SwitchLabel, { props: labelProps })
+};
+//#endregion
+export { Switch$1 as Switch };

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

@@ -0,0 +1,68 @@
+import { Switch } from "./switch.js";
+
+//#region src/components/switch/switch.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Switch.*.props()` returns. */
+type SwitchPartProps = {
+  /** The slot value the matching `switch.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 `Switch.props(...)` — the track's size axis plus the checked/disabled/readonly/invalid state. */
+interface SwitchPropsArgs extends BasePropsArgs {
+  /** Track size — stamped as `data-size`, re-points the track and thumb metrics. @default "md" */
+  size?: Switch.Size;
+  /** Whether the switch is on (paints the accent track via `data-checked`). */
+  checked?: boolean;
+  /** Whether the switch is disabled (drives the dimmed, not-allowed affordance via `data-disabled`). */
+  disabled?: boolean;
+  /** Whether the switch is read-only (drops the pointer and hover affordance via `data-readonly`). */
+  readonly?: boolean;
+  /** Whether the switch is invalid (paints the danger border via `data-invalid`). */
+  invalid?: boolean;
+}
+/** Argument to `Switch.Thumb.props(...)` — the thumb carries the checked/disabled state for its travel. */
+interface SwitchThumbPropsArgs extends BasePropsArgs {
+  /** Whether the switch is on (slides the thumb to the end via `data-checked`). */
+  checked?: boolean;
+  /** Whether the switch is disabled (drives the dimmed affordance via `data-disabled`). */
+  disabled?: boolean;
+}
+/** Track prop bag: slot anchor plus the `data-size`/`data-checked`/`data-disabled`/`data-readonly`/`data-invalid` the CSS keys off. */
+declare function switchProps({
+  size,
+  checked,
+  disabled,
+  readonly,
+  invalid,
+  className
+}?: SwitchPropsArgs): SwitchPartProps;
+/** Thumb prop bag: slot anchor plus the `data-checked`/`data-disabled` that drives its travel. */
+declare function thumbProps({
+  checked,
+  disabled,
+  className
+}?: SwitchThumbPropsArgs): SwitchPartProps;
+/** Field prop bag: the slot anchor for the row that pairs a switch with its label. */
+declare function fieldProps({
+  className
+}?: BasePropsArgs): SwitchPartProps;
+/** Argument to `Switch.Label.props(...)` — the label mirrors the field's disabled/invalid state. */
+interface SwitchLabelPropsArgs extends BasePropsArgs {
+  /** Whether the field is disabled (dims the label and drops its pointer via `data-disabled`). */
+  disabled?: boolean;
+  /** Whether the field is invalid (recolours the label to danger via `data-invalid`). */
+  invalid?: boolean;
+}
+/** Label prop bag: slot anchor plus the `data-disabled`/`data-invalid` that mirror the field state. */
+declare function labelProps({
+  disabled,
+  invalid,
+  className
+}?: SwitchLabelPropsArgs): SwitchPartProps;
+//#endregion
+export { fieldProps, labelProps, switchProps, thumbProps };