@stridge/noctis 1.0.0-beta.0

package/dist/components/field/field.props.js

@@ -0,0 +1,65 @@
+import { FIELD_SLOTS } from "./field.slots.js";
+//#region src/components/field/field.props.ts
+/**
+* The D12 data-attribute contract for the field layer — the wiring parts (`Field`, `Fieldset`, `Form`)
+* and the shared in-field affordances (`Field.Action`, `Field.Count`).
+*
+* Each part exposes a `props(...)` builder returning a spreadable `{ "data-slot": "noctis-field-<part>",
+* ...dataAttrs }`, so `field.css` can style a *foreign* element as that part:
+*
+*     <p {...Field.Description.props()}>We never share your address.</p>
+*     // → <p data-slot="noctis-field-description">
+*
+* The escape hatch carries no className (styling is attribute-driven); an optional `className` is
+* forwarded verbatim. The live validity attributes (`data-invalid`, `data-disabled`, …) are stamped by
+* Base UI on the real wiring parts; these helpers exist for the escape-hatch path.
+*/
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Root prop bag: just the slot anchor. */
+function rootProps({ className } = {}) {
+	return withClassName({ "data-slot": FIELD_SLOTS.root }, className);
+}
+/** Label prop bag: just the slot anchor. */
+function labelProps({ className } = {}) {
+	return withClassName({ "data-slot": FIELD_SLOTS.label }, className);
+}
+/** Control prop bag: just the slot anchor. */
+function controlProps({ className } = {}) {
+	return withClassName({ "data-slot": FIELD_SLOTS.control }, className);
+}
+/** Description prop bag: just the slot anchor. */
+function descriptionProps({ className } = {}) {
+	return withClassName({ "data-slot": FIELD_SLOTS.description }, className);
+}
+/** Error prop bag: just the slot anchor. */
+function errorProps({ className } = {}) {
+	return withClassName({ "data-slot": FIELD_SLOTS.error }, className);
+}
+/** Fieldset prop bag: just the slot anchor. */
+function fieldsetProps({ className } = {}) {
+	return withClassName({ "data-slot": FIELD_SLOTS.fieldset }, className);
+}
+/** Fieldset legend prop bag: just the slot anchor. */
+function legendProps({ className } = {}) {
+	return withClassName({ "data-slot": FIELD_SLOTS.fieldsetLegend }, className);
+}
+/** Form prop bag: just the slot anchor. */
+function formProps({ className } = {}) {
+	return withClassName({ "data-slot": FIELD_SLOTS.form }, className);
+}
+/** Action prop bag: slot anchor plus the `data-side` edge (the in-field ghost button). */
+function actionProps({ side = "end", className } = {}) {
+	return withClassName({
+		"data-slot": FIELD_SLOTS.action,
+		"data-side": side
+	}, className);
+}
+/** Count prop bag: just the slot anchor (the character-count readout; escalation is value-driven). */
+function countProps({ className } = {}) {
+	return withClassName({ "data-slot": FIELD_SLOTS.count }, className);
+}
+//#endregion
+export { actionProps, controlProps, countProps, descriptionProps, errorProps, fieldsetProps, formProps, labelProps, legendProps, rootProps };

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

@@ -0,0 +1,35 @@
+//#region src/components/field/field.slots.d.ts
+/**
+ * The `data-*` hooks the field layer stamps, for host-side styling and tests. Slot values mark each
+ * rendered element; the validity states are emitted by Base UI's Field/Fieldset on the wiring parts; the
+ * affordances carry their own placement/escalation hooks. Pair a slot with a state to target, say, only
+ * a disabled field's label or only the count while near its limit.
+ */
+declare enum FieldDataAttributes {
+  /** Marks each rendered field part. */
+  slot = "data-slot",
+  /** Present on every part of a disabled field (and on a disabled fieldset). */
+  disabled = "data-disabled",
+  /** Present on the parts of a field whose control has been blurred at least once. */
+  touched = "data-touched",
+  /** Present on the parts of a field whose value differs from its initial value. */
+  dirty = "data-dirty",
+  /** Present on the parts of a field that currently fails validation. */
+  invalid = "data-invalid",
+  /** Present on the parts of a field that currently passes validation. */
+  valid = "data-valid",
+  /** Present on the parts of a field whose control is focused. */
+  focused = "data-focused",
+  /** Present on the parts of a field whose control holds a value. */
+  filled = "data-filled",
+  /** Which edge an action sits on — `start` (leading) | `end` (trailing). */
+  side = "data-side",
+  /** Opt-in on an action: `filled` collapses it until the host field's control is filled (CSS `:has()`). */
+  reveal = "data-reveal",
+  /** Present on the count when the value nears its limit — escalates to the warning colour. */
+  near = "data-near",
+  /** Present on the count when the value passes its limit — escalates to the danger colour. */
+  over = "data-over"
+}
+//#endregion
+export { FieldDataAttributes };

package/dist/components/field/field.slots.js

@@ -0,0 +1,54 @@
+//#region src/components/field/field.slots.ts
+/**
+* The slot vocabulary every part of the field layer stamps as its `data-slot`. One `field` declaration
+* owns the whole layer: the wiring parts (`Field`/`Fieldset`/`Form`) and the shared in-field affordances
+* (`Field.Action`/`Field.Count`) reused by Input, Textarea, and the rest of the family. Kebab-cased and
+* `noctis-`-prefixed; SLOTS.md generates from the token-graph declaration.
+*/
+const FIELD_SLOTS = {
+	root: "noctis-field",
+	label: "noctis-field-label",
+	control: "noctis-field-control",
+	description: "noctis-field-description",
+	error: "noctis-field-error",
+	fieldset: "noctis-field-fieldset",
+	fieldsetLegend: "noctis-field-fieldset-legend",
+	form: "noctis-field-form",
+	action: "noctis-field-action",
+	count: "noctis-field-count"
+};
+/**
+* The `data-*` hooks the field layer stamps, for host-side styling and tests. Slot values mark each
+* rendered element; the validity states are emitted by Base UI's Field/Fieldset on the wiring parts; the
+* affordances carry their own placement/escalation hooks. Pair a slot with a state to target, say, only
+* a disabled field's label or only the count while near its limit.
+*/
+let FieldDataAttributes = /* @__PURE__ */ function(FieldDataAttributes) {
+	/** Marks each rendered field part. */
+	FieldDataAttributes["slot"] = "data-slot";
+	/** Present on every part of a disabled field (and on a disabled fieldset). */
+	FieldDataAttributes["disabled"] = "data-disabled";
+	/** Present on the parts of a field whose control has been blurred at least once. */
+	FieldDataAttributes["touched"] = "data-touched";
+	/** Present on the parts of a field whose value differs from its initial value. */
+	FieldDataAttributes["dirty"] = "data-dirty";
+	/** Present on the parts of a field that currently fails validation. */
+	FieldDataAttributes["invalid"] = "data-invalid";
+	/** Present on the parts of a field that currently passes validation. */
+	FieldDataAttributes["valid"] = "data-valid";
+	/** Present on the parts of a field whose control is focused. */
+	FieldDataAttributes["focused"] = "data-focused";
+	/** Present on the parts of a field whose control holds a value. */
+	FieldDataAttributes["filled"] = "data-filled";
+	/** Which edge an action sits on — `start` (leading) | `end` (trailing). */
+	FieldDataAttributes["side"] = "data-side";
+	/** Opt-in on an action: `filled` collapses it until the host field's control is filled (CSS `:has()`). */
+	FieldDataAttributes["reveal"] = "data-reveal";
+	/** Present on the count when the value nears its limit — escalates to the warning colour. */
+	FieldDataAttributes["near"] = "data-near";
+	/** Present on the count when the value passes its limit — escalates to the danger colour. */
+	FieldDataAttributes["over"] = "data-over";
+	return FieldDataAttributes;
+}({});
+//#endregion
+export { FIELD_SLOTS, FieldDataAttributes };

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

@@ -0,0 +1,5 @@
+//#region src/components/field/field.types.d.ts
+/** Which edge an in-field action sits on — leading (`start`) or trailing (`end`). */
+type FieldActionSide = "start" | "end";
+//#endregion
+export { FieldActionSide };

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

@@ -0,0 +1,4 @@
+import { FieldActionSide } from "./field.types.js";
+import { FieldActionPropsArgs, FieldCountPropsArgs, FieldPartProps, actionProps, countProps } from "./field.props.js";
+import { Field, FieldAction, FieldCount, Fieldset, Form } from "./field.js";
+import { FieldDataAttributes } from "./field.slots.js";

package/dist/components/inline-code/index.d.ts

@@ -0,0 +1 @@
+import { InlineCode } from "./inline-code.js";

package/dist/components/inline-code/inline-code.d.ts

@@ -0,0 +1,46 @@
+import { InlineCodePartProps, InlineCodePropsArgs, rootProps } from "./inline-code.props.js";
+import { ComponentProps, ReactElement } from "react";
+
+//#region src/components/inline-code/inline-code.d.ts
+/**
+ * Inline code — a short code span set apart from prose as a bordered chip on the neutral `control`
+ * fill, mono and em-sized so it sits proportionally inside any text. It shares the bordered-chip
+ * language with `Kbd` but stays flat (no key-cap shadow) and sets its text on the dedicated
+ * `code-foreground` tier — a step off prose — so a snippet reads as code rather than running text or a
+ * keystroke. Corners are a tight, em-relative radius so the chip reads as a code token, not a pill.
+ * Inside a link the chip joins the link, taking its colour with the underline lifted off the box. For
+ * multi-line fenced code, reach for `CodeBlock`.
+ *
+ * The chip metrics are em-relative on purpose, so the chip tracks its surrounding text and the global
+ * font scale. Each metric is a component token (`--noctis-inline-code-*`) the slot resolves through its
+ * internal var, so a consumer can retune the chip on any ancestor without forking the component. The
+ * look is precompiled CSS keyed off the `data-slot` anchor (`inline-code.css`); the render stamps that
+ * anchor and forwards a plain `className` passthrough.
+ *
+ * @see {@link InlineCode.Props}
+ */
+declare function InlineCodeRoot({
+  className,
+  ...props
+}: InlineCode.Props): ReactElement;
+/**
+ * Inline code chip. The runtime value is the component function with a namespaced `props` static (D12)
+ * — `InlineCode.props()` returns the spreadable `data-slot` prop bag for the escape-hatch path.
+ */
+declare const InlineCode: typeof InlineCodeRoot & {
+  props: typeof rootProps;
+};
+/**
+ * Prop types for `InlineCode`, plus the D12 `props` helper's argument/return types. Types-only — it
+ * emits no runtime code and merges with the `InlineCode` value above, so `InlineCode` is the component
+ * value while `InlineCode.Props` is its prop type.
+ */
+declare namespace InlineCode {
+  type Props = ComponentProps<"code">;
+  /** The spreadable data-attribute prop bag `InlineCode.props()` returns (D12). */
+  type PartProps = InlineCodePartProps;
+  /** Argument to the `InlineCode.props(...)` escape-hatch helper. */
+  type PropsArgs = InlineCodePropsArgs;
+}
+//#endregion
+export { InlineCode };

package/dist/components/inline-code/inline-code.js

@@ -0,0 +1,36 @@
+import { INLINE_CODE_SLOTS } from "./inline-code.slots.js";
+import { rootProps } from "./inline-code.props.js";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/inline-code/inline-code.tsx
+/**
+* Inline code — a short code span set apart from prose as a bordered chip on the neutral `control`
+* fill, mono and em-sized so it sits proportionally inside any text. It shares the bordered-chip
+* language with `Kbd` but stays flat (no key-cap shadow) and sets its text on the dedicated
+* `code-foreground` tier — a step off prose — so a snippet reads as code rather than running text or a
+* keystroke. Corners are a tight, em-relative radius so the chip reads as a code token, not a pill.
+* Inside a link the chip joins the link, taking its colour with the underline lifted off the box. For
+* multi-line fenced code, reach for `CodeBlock`.
+*
+* The chip metrics are em-relative on purpose, so the chip tracks its surrounding text and the global
+* font scale. Each metric is a component token (`--noctis-inline-code-*`) the slot resolves through its
+* internal var, so a consumer can retune the chip on any ancestor without forking the component. The
+* look is precompiled CSS keyed off the `data-slot` anchor (`inline-code.css`); the render stamps that
+* anchor and forwards a plain `className` passthrough.
+*
+* @see {@link InlineCode.Props}
+*/
+function InlineCodeRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("code", {
+		"data-slot": INLINE_CODE_SLOTS.root,
+		className: clsx(className),
+		...props
+	});
+}
+/**
+* Inline code chip. The runtime value is the component function with a namespaced `props` static (D12)
+* — `InlineCode.props()` returns the spreadable `data-slot` prop bag for the escape-hatch path.
+*/
+const InlineCode = Object.assign(InlineCodeRoot, { props: rootProps });
+//#endregion
+export { InlineCode };

package/dist/components/inline-code/inline-code.props.d.ts

@@ -0,0 +1,17 @@
+//#region src/components/inline-code/inline-code.props.d.ts
+/** A spreadable data-attribute prop bag — the shape `InlineCode.props()` returns. */
+type InlineCodePartProps = {
+  /** The slot value the matching `inline-code.css` rule anchors on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string;
+};
+/** Argument to `InlineCode.props(...)` — no variants/state of its own. */
+interface InlineCodePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Root prop bag: just the slot anchor (the chip has no variant/state axes). */
+declare function rootProps({
+  className
+}?: InlineCodePropsArgs): InlineCodePartProps;
+//#endregion
+export { InlineCodePartProps, InlineCodePropsArgs, rootProps };

package/dist/components/inline-code/inline-code.props.js

@@ -0,0 +1,27 @@
+import { INLINE_CODE_SLOTS } from "./inline-code.slots.js";
+//#region src/components/inline-code/inline-code.props.ts
+/**
+* The D12 unified variant contract for InlineCode — the data-attribute-native escape hatch.
+*
+* `InlineCode` is a single-element chip with no variants or state of its own, so it exposes one
+* `props(...)` builder returning a **spreadable props object** of the form
+* `{ "data-slot": "noctis-inline-code", ...dataAttrs }`. Under the single-`data-slot` anchor model
+* (D4 final) the `data-slot` is the only styling hook needed — `inline-code.css` keys its rule off it
+* — so spreading `InlineCode.props()` onto a *foreign* element styles it as the chip:
+*
+*     <code {...InlineCode.props()}>bg-surface</code>
+*     // → <code data-slot="noctis-inline-code">
+*
+* The escape hatch carries no className (styling is attribute-driven); an optional `className`
+* passthrough is accepted and forwarded verbatim.
+*/
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Root prop bag: just the slot anchor (the chip has no variant/state axes). */
+function rootProps({ className } = {}) {
+	return withClassName({ "data-slot": INLINE_CODE_SLOTS.root }, className);
+}
+//#endregion
+export { rootProps };

package/dist/components/inline-code/inline-code.slots.js

@@ -0,0 +1,8 @@
+//#region src/components/inline-code/inline-code.slots.ts
+/**
+* The slot vocabulary `InlineCode` 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.
+*/
+const INLINE_CODE_SLOTS = { root: "noctis-inline-code" };
+//#endregion
+export { INLINE_CODE_SLOTS };

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

@@ -0,0 +1,3 @@
+import { InputAdornmentSide, InputAdornmentVariant, InputSize } from "./input.types.js";
+import { Input } from "./input.js";
+import { InputDataAttributes } from "./input.slots.js";

package/dist/components/input/input.context.js

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

package/dist/components/input/input.d.ts

@@ -0,0 +1,161 @@
+import { FieldActionPropsArgs, FieldCountPropsArgs, actionProps, countProps } from "../field/field.props.js";
+import { FieldAction, FieldCount } from "../field/field.js";
+import { InputAdornmentSide, InputAdornmentVariant, InputSize } from "./input.types.js";
+import { InputAdornmentPropsArgs, InputPartProps, InputRootPropsArgs, adornmentProps, controlProps, rootProps } from "./input.props.js";
+import { input_d_exports } from "../../primitives/input.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+
+//#region src/components/input/input.d.ts
+/**
+ * The field shell — a `<div>` that paints the field surface, border, and a subtle rest shadow, and
+ * holds the editable control plus any adornments or in-field actions in one inline row. It owns the
+ * shared `size` (descendant parts read it from context) and stamps the `data-size` axis `input.css`
+ * keys its metrics off. State flows from the control: the shell reads the control's
+ * `data-invalid`/`data-disabled`/`data-readonly`/`data-filled`/`data-dirty` through `:has()`, so there
+ * is one source of truth. The `invalid`/`disabled` props stay as additive shell-only override escape
+ * hatches.
+ *
+ * Clicking the shell padding focuses the control (the shell wears `cursor: text`), while a click on an
+ * `Input.Action` or other interactive child is left to that element. Focus is calm and ring-less: it
+ * shifts the border to the focus role on `:has(:focus)`, no surrounding ring.
+ */
+declare function InputRoot({
+  size,
+  invalid,
+  disabled,
+  className,
+  children,
+  onMouseDown,
+  ...props
+}: Input.Root.Props): ReactElement;
+/**
+ * The editable control, built on Base UI's `Input`. Renders a native `<input>` and works on its own or
+ * wrapped in a Base UI `Field.Root`, which feeds it the validity/disabled/filled state. Place it inside
+ * an {@link Input.Root}; the shell paints the chrome while this part stays a clean, unstyled input so
+ * the value, caret, and selection inherit the field's type. `disabled`/`readOnly`/`aria-invalid` set
+ * here drive the shell's look through `:has()` — no need to mirror them on the root.
+ */
+declare function InputControl({
+  className,
+  ...props
+}: Input.Control.Props): ReactElement;
+/**
+ * A leading or trailing adornment — an icon, unit, or short affordance flanking the control. Set `side`
+ * to `start` (the default, leading) or `end` (trailing); the shell's flex row orders it logically, so it
+ * mirrors under RTL by construction. The default `quiet` variant is transparent and non-interactive;
+ * `variant="segment"` renders a bordered cell flush to the field edge for prefix/suffix addon groups.
+ * Descendant icons take the field-size-matched glyph size automatically. For an *interactive* affordance
+ * (clear, reveal, a shortcut chip) use {@link Input.Action} instead of marking an adornment up by hand.
+ */
+declare function InputAdornment({
+  side,
+  variant,
+  className,
+  children,
+  ...props
+}: Input.Adornment.Props): ReactElement;
+/**
+ * A text field: the editable control wearing the field surface, border, and an accent focus ring that
+ * follows the corner radius. Compose from parts — `Input.Root` is the shell that owns the `size`,
+ * `Input.Control` is the Base UI input (its disabled/read-only/invalid state drives the shell),
+ * `Input.Adornment` flanks it with a quiet or segmented icon/unit/affordance, `Input.Action` is an
+ * interactive in-field button (clear, reveal, shortcut) with ghost-control discipline, and `Input.Count`
+ * is a live character-count readout. Built on Base UI's Input, so it slots straight into a `Field.Root`
+ * for labels, descriptions, and validation, reads validity from the control rather than a hand-set flag,
+ * and stays fully keyboard-operable.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+ * exposed through the matching `Input` namespace — e.g. `Input.Control.Props`.
+ */
+declare const Input: {
+  /** The field shell. `Input.Root.props({ size, invalid, disabled })` → its spreadable prop bag. */Root: typeof InputRoot & {
+    props: typeof rootProps;
+  }; /** The editable control. `Input.Control.props()` → its spreadable prop bag for a foreign element. */
+  Control: typeof InputControl & {
+    props: typeof controlProps;
+  }; /** A leading/trailing adornment. `Input.Adornment.props({ side, variant })` → its spreadable prop bag. */
+  Adornment: typeof InputAdornment & {
+    props: typeof adornmentProps;
+  }; /** The shared in-field action button (clear/reveal/shortcut). `Input.Action.props({ side })` → its prop bag. */
+  Action: typeof FieldAction & {
+    props: typeof actionProps;
+  }; /** The shared character-count readout. `Input.Count.props()` → its spreadable prop bag. */
+  Count: typeof FieldCount & {
+    props: typeof countProps;
+  };
+};
+/**
+ * Per-part prop and state types, mirroring Base UI's `Component.Part.Props` convention. Types-only —
+ * it emits no runtime code and merges with the `Input` object above, so `Input.Control` is the component
+ * value while `Input.Control.Props` is its prop type.
+ */
+declare namespace Input {
+  /** Field height/padding/text scale — `sm`, `md`, or `lg`. */
+  type Size = InputSize;
+  /** Which edge an adornment or action sits on — `start` (leading) or `end` (trailing). */
+  type AdornmentSide = InputAdornmentSide;
+  /** How an adornment paints — `quiet` (default) or a bordered `segment` cell. */
+  type AdornmentVariant = InputAdornmentVariant;
+  /** The spreadable data-attribute prop bag every `Input.*.props()` returns (D12). */
+  type PartProps = InputPartProps;
+  namespace Root {
+    type Props = Omit<ComponentPropsWithRef<"div">, "children"> & {
+      /**
+       * Field height/padding/text scale.
+       * @default "md"
+       */
+      size?: InputSize;
+      /**
+       * Shell-only override that forces the invalid border. The default path reads the control's
+       * `aria-invalid`/Field validity through `:has()`, so this is only an escape hatch.
+       * @default false
+       */
+      invalid?: boolean;
+      /**
+       * Shell-only override that forces the disabled affordance. The default path reads the
+       * control's `disabled`/Field state through `:has()`, so this is only an escape hatch.
+       * @default false
+       */
+      disabled?: boolean; /** `Input.Control`, any `Input.Adornment`s, `Input.Action`s, and an optional `Input.Count`. */
+      children?: ReactNode; /** Classes merged onto the shell. */
+      className?: string;
+    };
+    /** Argument to the `Input.Root.props(...)` escape-hatch helper. */
+    type PropsArgs = InputRootPropsArgs;
+  }
+  namespace Control {
+    type Props = input_d_exports.Input.Props;
+    type State = input_d_exports.Input.State;
+  }
+  namespace Adornment {
+    type Props = ComponentPropsWithRef<"span"> & {
+      /**
+       * Which edge the adornment sits on — leading (`start`) or trailing (`end`).
+       * @default "start"
+       */
+      side?: InputAdornmentSide;
+      /**
+       * How the adornment paints — a quiet transparent flank (`quiet`) or a bordered cell flush to
+       * the field edge (`segment`) for prefix/suffix addon groups.
+       * @default "quiet"
+       */
+      variant?: InputAdornmentVariant;
+    };
+    /** Argument to the `Input.Adornment.props(...)` escape-hatch helper. */
+    type PropsArgs = InputAdornmentPropsArgs;
+  }
+  /** The shared in-field action button — see {@link FieldAction}. */
+  namespace Action {
+    type Props = FieldAction.Props;
+    /** Argument to the `Input.Action.props(...)` escape-hatch helper. */
+    type PropsArgs = FieldActionPropsArgs;
+  }
+  /** The shared character-count readout — see {@link FieldCount}. */
+  namespace Count {
+    type Props = FieldCount.Props;
+    /** Argument to the `Input.Count.props(...)` escape-hatch helper. */
+    type PropsArgs = FieldCountPropsArgs;
+  }
+}
+//#endregion
+export { Input };

package/dist/components/input/input.js

@@ -0,0 +1,117 @@
+"use client";
+import { actionProps, countProps } from "../field/field.props.js";
+import { FieldAction, FieldCount } from "../field/field.js";
+import { input_exports } from "../../primitives/input.js";
+import { InputProvider, useInputContext } from "./input.context.js";
+import { INPUT_SLOTS } from "./input.slots.js";
+import { adornmentProps, controlProps, rootProps } from "./input.props.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/input/input.tsx
+/** Interactive descendants that own their own click: a click landing on (or inside) one is left alone. */
+const INTERACTIVE_SELECTOR = "button, a, input, textarea, select, label, [contenteditable], [tabindex]";
+/**
+* The field shell — a `<div>` that paints the field surface, border, and a subtle rest shadow, and
+* holds the editable control plus any adornments or in-field actions in one inline row. It owns the
+* shared `size` (descendant parts read it from context) and stamps the `data-size` axis `input.css`
+* keys its metrics off. State flows from the control: the shell reads the control's
+* `data-invalid`/`data-disabled`/`data-readonly`/`data-filled`/`data-dirty` through `:has()`, so there
+* is one source of truth. The `invalid`/`disabled` props stay as additive shell-only override escape
+* hatches.
+*
+* Clicking the shell padding focuses the control (the shell wears `cursor: text`), while a click on an
+* `Input.Action` or other interactive child is left to that element. Focus is calm and ring-less: it
+* shifts the border to the focus role on `:has(:focus)`, no surrounding ring.
+*/
+function InputRoot({ size = "md", invalid = false, disabled = false, className, children, onMouseDown, ...props }) {
+	const { className: _omit, ...recipe } = rootProps({
+		size,
+		invalid,
+		disabled
+	});
+	const value = { size };
+	function handleMouseDown(event) {
+		onMouseDown?.(event);
+		if (event.defaultPrevented || event.button !== 0) return;
+		if (event.target.closest(INTERACTIVE_SELECTOR)) return;
+		const control = event.currentTarget.querySelector(`[data-slot="${INPUT_SLOTS.control}"]`);
+		if (control) {
+			event.preventDefault();
+			control.focus();
+		}
+	}
+	return /* @__PURE__ */ jsx("div", {
+		...recipe,
+		"data-slot": INPUT_SLOTS.root,
+		className,
+		onMouseDown: handleMouseDown,
+		...props,
+		children: /* @__PURE__ */ jsx(InputProvider, {
+			value,
+			children
+		})
+	});
+}
+/**
+* The editable control, built on Base UI's `Input`. Renders a native `<input>` and works on its own or
+* wrapped in a Base UI `Field.Root`, which feeds it the validity/disabled/filled state. Place it inside
+* an {@link Input.Root}; the shell paints the chrome while this part stays a clean, unstyled input so
+* the value, caret, and selection inherit the field's type. `disabled`/`readOnly`/`aria-invalid` set
+* here drive the shell's look through `:has()` — no need to mirror them on the root.
+*/
+function InputControl({ className, ...props }) {
+	useInputContext("Control");
+	return /* @__PURE__ */ jsx(input_exports.Input, {
+		"data-slot": INPUT_SLOTS.control,
+		className,
+		...props
+	});
+}
+/**
+* A leading or trailing adornment — an icon, unit, or short affordance flanking the control. Set `side`
+* to `start` (the default, leading) or `end` (trailing); the shell's flex row orders it logically, so it
+* mirrors under RTL by construction. The default `quiet` variant is transparent and non-interactive;
+* `variant="segment"` renders a bordered cell flush to the field edge for prefix/suffix addon groups.
+* Descendant icons take the field-size-matched glyph size automatically. For an *interactive* affordance
+* (clear, reveal, a shortcut chip) use {@link Input.Action} instead of marking an adornment up by hand.
+*/
+function InputAdornment({ side = "start", variant = "quiet", className, children, ...props }) {
+	const { className: _omit, ...recipe } = adornmentProps({
+		side,
+		variant
+	});
+	useInputContext("Adornment");
+	return /* @__PURE__ */ jsx("span", {
+		...recipe,
+		"data-slot": INPUT_SLOTS.adornment,
+		className,
+		...props,
+		children
+	});
+}
+/**
+* A text field: the editable control wearing the field surface, border, and an accent focus ring that
+* follows the corner radius. Compose from parts — `Input.Root` is the shell that owns the `size`,
+* `Input.Control` is the Base UI input (its disabled/read-only/invalid state drives the shell),
+* `Input.Adornment` flanks it with a quiet or segmented icon/unit/affordance, `Input.Action` is an
+* interactive in-field button (clear, reveal, shortcut) with ghost-control discipline, and `Input.Count`
+* is a live character-count readout. Built on Base UI's Input, so it slots straight into a `Field.Root`
+* for labels, descriptions, and validation, reads validity from the control rather than a hand-set flag,
+* and stays fully keyboard-operable.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+* exposed through the matching `Input` namespace — e.g. `Input.Control.Props`.
+*/
+const Input = {
+	/** The field shell. `Input.Root.props({ size, invalid, disabled })` → its spreadable prop bag. */
+	Root: Object.assign(InputRoot, { props: rootProps }),
+	/** The editable control. `Input.Control.props()` → its spreadable prop bag for a foreign element. */
+	Control: Object.assign(InputControl, { props: controlProps }),
+	/** A leading/trailing adornment. `Input.Adornment.props({ side, variant })` → its spreadable prop bag. */
+	Adornment: Object.assign(InputAdornment, { props: adornmentProps }),
+	/** The shared in-field action button (clear/reveal/shortcut). `Input.Action.props({ side })` → its prop bag. */
+	Action: Object.assign(FieldAction, { props: actionProps }),
+	/** The shared character-count readout. `Input.Count.props()` → its spreadable prop bag. */
+	Count: Object.assign(FieldCount, { props: countProps })
+};
+//#endregion
+export { Input };