@tea-ui/core 0.1.0

package/dist/inputs/input.d.ts

@@ -0,0 +1,58 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from '@tea-ui/utils';
+
+/**
+ * TEA UI — Input.
+ *
+ * A single-line text field, and the reference for every other TEA UI control:
+ * it wires itself to a `Field` through {@link useFieldControlProps} rather than
+ * accepting `id` and `aria-describedby` by hand, and it derives its height from
+ * `--tea-control-h` so one `data-density` attribute retunes every input in a
+ * container.
+ *
+ * Three decisions that are not obvious:
+ *
+ *  1. **The font goes to 16px on a coarse pointer.** A field rendered below
+ *     16px makes iOS Safari zoom the page on focus, and it does not zoom back
+ *     out when the user tabs away — the page is left magnified. The source
+ *     project patched this with `md:text-sm`, which is a viewport-width guess:
+ *     it leaves a phone in landscape at 14px and zooms anyway. `pointer-coarse:`
+ *     asks the only question that matters, which is whether the input is being
+ *     operated by a finger. Tailwind emits the media query after the bare size
+ *     utilities, so it wins without an `!`-prefix.
+ *  2. **`invalid` is an appearance and a state.** It sets `aria-invalid` *and*
+ *     moves the border and ring to the critical tone. A red border with no
+ *     `aria-invalid` is decoration, and a screen reader user is not told.
+ *  3. **The native `size` attribute is gone.** `size` is a styling axis in TEA
+ *     UI, and a character count on a text input is a suggestion nobody follows.
+ *     Use `width` in `className` for a size hint.
+ */
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface InputProps extends Omit<React.ComponentProps<"input">, "size" | "color">, VariantProps<typeof inputVariants> {
+    /**
+     * The value is not acceptable. Sets `aria-invalid` and moves the border and
+     * ring to the critical tone.
+     *
+     * Inside a `Field` the field's `invalid` state wins, because a control that
+     * disagrees with the field that describes it is the bug the Field system
+     * exists to prevent. Set it here only for a standalone input.
+     */
+    invalid?: boolean | undefined;
+}
+/**
+ * @example
+ * ```tsx
+ * <Field required invalid={!!error}>
+ *   <FieldLabel>E-Mail</FieldLabel>
+ *   <Input type="email" autoComplete="email" />
+ *   <FieldDescription>Wir senden keine Bestätigung.</FieldDescription>
+ *   <FieldError>{error}</FieldError>
+ * </Field>
+ * ```
+ */
+declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps, inputVariants };

package/dist/inputs/input.js

@@ -0,0 +1,68 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva, cn } from "@tea-ui/utils";
+import { dataSlot, stateAttributes } from "../internal/index.js";
+import { useFieldControlProps } from "./field.js";
+import { useInputGroupContext } from "./input-group.js";
+const inputVariants = cva(
+  [
+    "w-full min-w-0 rounded-none border border-line bg-surface text-fg",
+    "px-[length:var(--tea-control-px)]",
+    "transition-[background-color,border-color,color,box-shadow] duration-[120ms] ease-standard",
+    "outline-none",
+    "placeholder:text-fg-subtle",
+    // Below 16px, iOS Safari zooms the page on focus and never zooms back out.
+    "pointer-coarse:text-body",
+    // `focus-visible:` and never `focus:` — a ring on every mouse press is
+    // noise, and it is the reason the audit's tables looked like this.
+    "focus-visible:border-ring-strong focus-visible:ring-2 focus-visible:ring-ring",
+    "disabled:cursor-not-allowed disabled:border-line disabled:bg-surface-2 disabled:text-fg-subtle",
+    "read-only:cursor-default read-only:bg-surface-2 read-only:text-fg-muted",
+    "aria-[invalid=true]:border-critical aria-[invalid=true]:ring-critical",
+    "file:me-3 file:rounded-none file:border-0 file:bg-transparent file:font-medium file:text-ui"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "control-h text-micro",
+        md: "control-h text-ui",
+        lg: "h-[calc(var(--tea-control-h)+0.25rem)] text-ui"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const Input = React.forwardRef(function Input2({ className, size, invalid, disabled, readOnly, required, type = "text", ...props }, ref) {
+  const field = useFieldControlProps();
+  const group = useInputGroupContext();
+  const isInvalid = field["aria-invalid"] ?? invalid ?? false;
+  const isDisabled = field.disabled ?? disabled ?? false;
+  const isReadOnly = field.readOnly ?? readOnly ?? false;
+  const isRequired = field["aria-required"] ?? required ?? false;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type,
+      id: field.id,
+      "aria-describedby": field["aria-describedby"],
+      "aria-invalid": isInvalid || void 0,
+      "aria-required": isRequired || void 0,
+      disabled: isDisabled || void 0,
+      readOnly: isReadOnly || void 0,
+      required: isRequired || void 0,
+      "data-tea-touch": true,
+      ...stateAttributes({ disabled: isDisabled, invalid: isInvalid, readOnly: isReadOnly }),
+      ...dataSlot("input"),
+      className: cn(inputVariants({ size }), group?.controlClassName, className),
+      ...props
+    }
+  );
+});
+export {
+  Input,
+  inputVariants
+};
+//# sourceMappingURL=input.js.map

package/dist/inputs/input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, cn, type VariantProps } from \"@tea-ui/utils\";\n\nimport { dataSlot, stateAttributes } from \"../internal\";\nimport { useFieldControlProps } from \"./field\";\nimport { useInputGroupContext } from \"./input-group\";\n\n/**\n * TEA UI — Input.\n *\n * A single-line text field, and the reference for every other TEA UI control:\n * it wires itself to a `Field` through {@link useFieldControlProps} rather than\n * accepting `id` and `aria-describedby` by hand, and it derives its height from\n * `--tea-control-h` so one `data-density` attribute retunes every input in a\n * container.\n *\n * Three decisions that are not obvious:\n *\n *  1. **The font goes to 16px on a coarse pointer.** A field rendered below\n *     16px makes iOS Safari zoom the page on focus, and it does not zoom back\n *     out when the user tabs away — the page is left magnified. The source\n *     project patched this with `md:text-sm`, which is a viewport-width guess:\n *     it leaves a phone in landscape at 14px and zooms anyway. `pointer-coarse:`\n *     asks the only question that matters, which is whether the input is being\n *     operated by a finger. Tailwind emits the media query after the bare size\n *     utilities, so it wins without an `!`-prefix.\n *  2. **`invalid` is an appearance and a state.** It sets `aria-invalid` *and*\n *     moves the border and ring to the critical tone. A red border with no\n *     `aria-invalid` is decoration, and a screen reader user is not told.\n *  3. **The native `size` attribute is gone.** `size` is a styling axis in TEA\n *     UI, and a character count on a text input is a suggestion nobody follows.\n *     Use `width` in `className` for a size hint.\n */\nexport const inputVariants = cva(\n  [\n    \"w-full min-w-0 rounded-none border border-line bg-surface text-fg\",\n    \"px-[length:var(--tea-control-px)]\",\n    \"transition-[background-color,border-color,color,box-shadow] duration-[120ms] ease-standard\",\n    \"outline-none\",\n    \"placeholder:text-fg-subtle\",\n    // Below 16px, iOS Safari zooms the page on focus and never zooms back out.\n    \"pointer-coarse:text-body\",\n    // `focus-visible:` and never `focus:` — a ring on every mouse press is\n    // noise, and it is the reason the audit's tables looked like this.\n    \"focus-visible:border-ring-strong focus-visible:ring-2 focus-visible:ring-ring\",\n    \"disabled:cursor-not-allowed disabled:border-line disabled:bg-surface-2 disabled:text-fg-subtle\",\n    \"read-only:cursor-default read-only:bg-surface-2 read-only:text-fg-muted\",\n    \"aria-[invalid=true]:border-critical aria-[invalid=true]:ring-critical\",\n    \"file:me-3 file:rounded-none file:border-0 file:bg-transparent file:font-medium file:text-ui\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"control-h text-micro\",\n        md: \"control-h text-ui\",\n        lg: \"h-[calc(var(--tea-control-h)+0.25rem)] text-ui\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  },\n);\n\nexport interface InputProps\n  extends Omit<React.ComponentProps<\"input\">, \"size\" | \"color\">,\n    VariantProps<typeof inputVariants> {\n  /**\n   * The value is not acceptable. Sets `aria-invalid` and moves the border and\n   * ring to the critical tone.\n   *\n   * Inside a `Field` the field's `invalid` state wins, because a control that\n   * disagrees with the field that describes it is the bug the Field system\n   * exists to prevent. Set it here only for a standalone input.\n   */\n  invalid?: boolean | undefined;\n}\n\n/**\n * @example\n * ```tsx\n * <Field required invalid={!!error}>\n *   <FieldLabel>E-Mail</FieldLabel>\n *   <Input type=\"email\" autoComplete=\"email\" />\n *   <FieldDescription>Wir senden keine Bestätigung.</FieldDescription>\n *   <FieldError>{error}</FieldError>\n * </Field>\n * ```\n */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(\n  { className, size, invalid, disabled, readOnly, required, type = \"text\", ...props },\n  ref,\n) {\n  const field = useFieldControlProps();\n  const group = useInputGroupContext();\n\n  const isInvalid = field[\"aria-invalid\"] ?? invalid ?? false;\n  const isDisabled = field.disabled ?? disabled ?? false;\n  const isReadOnly = field.readOnly ?? readOnly ?? false;\n  const isRequired = field[\"aria-required\"] ?? required ?? false;\n\n  return (\n    <input\n      ref={ref}\n      type={type}\n      id={field.id}\n      aria-describedby={field[\"aria-describedby\"]}\n      aria-invalid={isInvalid || undefined}\n      aria-required={isRequired || undefined}\n      disabled={isDisabled || undefined}\n      readOnly={isReadOnly || undefined}\n      required={isRequired || undefined}\n      data-tea-touch\n      {...stateAttributes({ disabled: isDisabled, invalid: isInvalid, readOnly: isReadOnly })}\n      {...dataSlot(\"input\")}\n      className={cn(inputVariants({ size }), group?.controlClassName, className)}\n      {...props}\n    />\n  );\n});\n"],"mappings":"AAsGI;AAtGH,YAAY,WAAW;AACxB,SAAS,KAAK,UAA6B;AAE3C,SAAS,UAAU,uBAAuB;AAC1C,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AA4B9B,MAAM,gBAAgB;AAAA,EAC3B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AA2BO,MAAM,QAAQ,MAAM,WAAyC,SAASA,OAC3E,EAAE,WAAW,MAAM,SAAS,UAAU,UAAU,UAAU,OAAO,QAAQ,GAAG,MAAM,GAClF,KACA;AACA,QAAM,QAAQ,qBAAqB;AACnC,QAAM,QAAQ,qBAAqB;AAEnC,QAAM,YAAY,MAAM,cAAc,KAAK,WAAW;AACtD,QAAM,aAAa,MAAM,YAAY,YAAY;AACjD,QAAM,aAAa,MAAM,YAAY,YAAY;AACjD,QAAM,aAAa,MAAM,eAAe,KAAK,YAAY;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,IAAI,MAAM;AAAA,MACV,oBAAkB,MAAM,kBAAkB;AAAA,MAC1C,gBAAc,aAAa;AAAA,MAC3B,iBAAe,cAAc;AAAA,MAC7B,UAAU,cAAc;AAAA,MACxB,UAAU,cAAc;AAAA,MACxB,UAAU,cAAc;AAAA,MACxB,kBAAc;AAAA,MACb,GAAG,gBAAgB,EAAE,UAAU,YAAY,SAAS,WAAW,UAAU,WAAW,CAAC;AAAA,MACrF,GAAG,SAAS,OAAO;AAAA,MACpB,WAAW,GAAG,cAAc,EAAE,KAAK,CAAC,GAAG,OAAO,kBAAkB,SAAS;AAAA,MACxE,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["Input"]}

package/dist/inputs/label.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Label as Label$1 } from 'radix-ui';
+
+/**
+ * TEA UI — Label.
+ *
+ * A label for a control, for the cases where `FieldLabel` is not the right
+ * thing: a filter chip row, a settings list, a dialog's field grid that already
+ * has its own layout.
+ *
+ * It is a real `<label>` with a real `htmlFor`, which is the whole point. The
+ * audit found that most of the problems it was supposed to solve came from
+ * treating a label as a styling element that happens to sit near a control.
+ * `htmlFor` is not decoration: it is what gives the control its accessible
+ * name, and without it a text field is an unnamed box to a screen reader and
+ * an unspeakable one to a voice-control user.
+ *
+ * `Label.Root` from `radix-ui` rather than a bare `<label>`, because it also
+ * makes clicking the label activate the control when the control is a Radix
+ * primitive rendering a `<button>`.
+ */
+interface LabelProps extends React.ComponentProps<typeof Label$1.Root> {
+    /**
+     * Mark the label's control as required. Renders a visible asterisk plus a
+     * visually hidden "Pflichtfeld", because an asterisk is a shape a screen
+     * reader cannot report.
+     *
+     * The control still needs `aria-required` — inside a `Field` that comes from
+     * the field, and `FieldLabel` reads it from the same place.
+     */
+    required?: boolean | undefined;
+    /** The control this label names is disabled. Styles the label to match. */
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+}
+/**
+ * @example
+ * ```tsx
+ * <Label htmlFor="display-name" required>
+ *   Anzeigename
+ * </Label>
+ * <Input id="display-name" aria-required />
+ * ```
+ */
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+
+export { Label, type LabelProps };

package/dist/inputs/label.js

@@ -0,0 +1,29 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+import { cn } from "@tea-ui/utils";
+import { COPY } from "@tea-ui/ux-standards";
+import { dataSlot, stateAttributes } from "../internal/index.js";
+const Label = React.forwardRef(function Label2({ children, className, required = false, disabled, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    LabelPrimitive.Root,
+    {
+      ref,
+      className: cn("inline-flex items-center gap-1 text-ui font-medium text-fg", className),
+      ...stateAttributes({ disabled }),
+      ...dataSlot("label"),
+      ...props,
+      children: [
+        children,
+        required ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-critical", children: "*" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: ` ${COPY.states.required}` })
+        ] }) : null
+      ]
+    }
+  );
+});
+export {
+  Label
+};
+//# sourceMappingURL=label.js.map

package/dist/inputs/label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/label.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Label as LabelPrimitive } from \"radix-ui\";\nimport { cn } from \"@tea-ui/utils\";\nimport { COPY } from \"@tea-ui/ux-standards\";\n\nimport { dataSlot, stateAttributes } from \"../internal\";\n\n/**\n * TEA UI — Label.\n *\n * A label for a control, for the cases where `FieldLabel` is not the right\n * thing: a filter chip row, a settings list, a dialog's field grid that already\n * has its own layout.\n *\n * It is a real `<label>` with a real `htmlFor`, which is the whole point. The\n * audit found that most of the problems it was supposed to solve came from\n * treating a label as a styling element that happens to sit near a control.\n * `htmlFor` is not decoration: it is what gives the control its accessible\n * name, and without it a text field is an unnamed box to a screen reader and\n * an unspeakable one to a voice-control user.\n *\n * `Label.Root` from `radix-ui` rather than a bare `<label>`, because it also\n * makes clicking the label activate the control when the control is a Radix\n * primitive rendering a `<button>`.\n */\n\nexport interface LabelProps extends React.ComponentProps<typeof LabelPrimitive.Root> {\n  /**\n   * Mark the label's control as required. Renders a visible asterisk plus a\n   * visually hidden \"Pflichtfeld\", because an asterisk is a shape a screen\n   * reader cannot report.\n   *\n   * The control still needs `aria-required` — inside a `Field` that comes from\n   * the field, and `FieldLabel` reads it from the same place.\n   */\n  required?: boolean | undefined;\n  /** The control this label names is disabled. Styles the label to match. */\n  disabled?: boolean | undefined;\n  className?: string | undefined;\n}\n\n/**\n * @example\n * ```tsx\n * <Label htmlFor=\"display-name\" required>\n *   Anzeigename\n * </Label>\n * <Input id=\"display-name\" aria-required />\n * ```\n */\nexport const Label = React.forwardRef<HTMLLabelElement, LabelProps>(function Label(\n  { children, className, required = false, disabled, ...props },\n  ref,\n) {\n  return (\n    <LabelPrimitive.Root\n      ref={ref}\n      className={cn(\"inline-flex items-center gap-1 text-ui font-medium text-fg\", className)}\n      {...stateAttributes({ disabled })}\n      {...dataSlot(\"label\")}\n      {...props}\n    >\n      {children}\n      {required ? (\n        <>\n          <span aria-hidden=\"true\" className=\"text-critical\">\n            *\n          </span>\n          <span className=\"sr-only\">{` ${COPY.states.required}`}</span>\n        </>\n      ) : null}\n    </LabelPrimitive.Root>\n  );\n});\n"],"mappings":"AAgEQ,mBACE,KADF;AAhEP,YAAY,WAAW;AACxB,SAAS,SAAS,sBAAsB;AACxC,SAAS,UAAU;AACnB,SAAS,YAAY;AAErB,SAAS,UAAU,uBAAuB;AA6CnC,MAAM,QAAQ,MAAM,WAAyC,SAASA,OAC3E,EAAE,UAAU,WAAW,WAAW,OAAO,UAAU,GAAG,MAAM,GAC5D,KACA;AACA,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC;AAAA,MACA,WAAW,GAAG,8DAA8D,SAAS;AAAA,MACpF,GAAG,gBAAgB,EAAE,SAAS,CAAC;AAAA,MAC/B,GAAG,SAAS,OAAO;AAAA,MACnB,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,WACC,iCACE;AAAA,8BAAC,UAAK,eAAY,QAAO,WAAU,iBAAgB,eAEnD;AAAA,UACA,oBAAC,UAAK,WAAU,WAAW,cAAI,KAAK,OAAO,QAAQ,IAAG;AAAA,WACxD,IACE;AAAA;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["Label"]}

package/dist/inputs/number-input.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { InputProps } from './input.js';
+import 'class-variance-authority/types';
+import '@tea-ui/utils';
+
+/**
+ * TEA UI — NumberInput.
+ *
+ * A numeric field that clamps **on blur**, not on every keystroke.
+ *
+ * This is the whole design. The obvious implementation — clamp in `onChange` —
+ * is unusable: the moment a user selects `150` in order to type `90`, the clamp
+ * fires on the first keystroke, rewrites the box to `100`, and puts the cursor
+ * somewhere the user did not choose. A user cannot type a value *below* the
+ * current one. The same implementation makes a field that starts empty
+ * permanently unwritable, because the intermediate `-` or `,` is not a number.
+ *
+ * So the field holds whatever the user typed, and on blur the value is parsed,
+ * clamped into `[min, max]` and reported once. The user can type anything; the
+ * model can only receive a number inside the declared range. And no value is
+ * ever reported twice for the same number.
+ *
+ * `step` is passed to the DOM but deliberately **not** enforced on blur. A field
+ * that silently rewrites `0.333` to `0.33` is lying about what was typed, and no
+ * native numeric control snaps on blur either. The stepper and the arrow keys
+ * honour `step`; free typing does not.
+ */
+interface NumberInputProps extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "type" | "inputMode" | "size"> {
+    /** Controlled numeric value. */
+    value?: number | undefined;
+    /** Uncontrolled initial numeric value. */
+    defaultValue?: number | undefined;
+    /** Called with the parsed number on change, and with the clamped value on blur. */
+    onValueChange?: ((value: number) => void) | undefined;
+    /** Lower bound. Enforced on blur. */
+    min?: number | undefined;
+    /** Upper bound. Enforced on blur. */
+    max?: number | undefined;
+    /** Increment for the native stepper and the arrow keys. Not enforced on blur. */
+    step?: number | undefined;
+    /**
+     * `decimal` by default rather than `numeric`, because `numeric` asks a phone
+     * for a keypad with no comma key — and a German user then cannot type `0,5`
+     * at all, on a form that is otherwise entirely in German.
+     */
+    inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
+    /** The control height. */
+    size?: InputProps["size"];
+    className?: string | undefined;
+}
+/**
+ * @example
+ * ```tsx
+ * <Field>
+ *   <FieldLabel>Anzahl</FieldLabel>
+ *   <NumberInput min={1} max={64} defaultValue={4} />
+ * </Field>
+ * ```
+ */
+declare const NumberInput: React.ForwardRefExoticComponent<Omit<NumberInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+export { NumberInput, type NumberInputProps };

package/dist/inputs/number-input.js

@@ -0,0 +1,86 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@tea-ui/utils";
+import { Input } from "./input.js";
+const NumberInput = React.forwardRef(
+  function NumberInput2({
+    value,
+    defaultValue,
+    onValueChange,
+    min,
+    max,
+    step,
+    inputMode = "decimal",
+    size,
+    className,
+    onBlur,
+    ...props
+  }, ref) {
+    const isControlled = value !== void 0;
+    const [text, setText] = React.useState(() => stringify(value ?? defaultValue));
+    const lastEmitted = React.useRef(void 0);
+    const lastExternal = React.useRef(value);
+    React.useEffect(() => {
+      if (isControlled && !Object.is(value, lastExternal.current)) {
+        lastExternal.current = value;
+        setText(stringify(value));
+      }
+    }, [isControlled, value]);
+    const emit = React.useCallback(
+      (next) => {
+        if (Object.is(lastEmitted.current, next)) return;
+        lastEmitted.current = next;
+        onValueChange?.(next);
+      },
+      [onValueChange]
+    );
+    const parse = (raw) => {
+      const parsed = Number.parseFloat(raw.trim().replace(",", "."));
+      return Number.isFinite(parsed) ? parsed : null;
+    };
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: "number",
+        size,
+        inputMode,
+        min,
+        max,
+        step,
+        className: cn(className),
+        value: text,
+        onChange: (event) => {
+          setText(event.target.value);
+          const parsed = parse(event.target.value);
+          if (parsed !== null) emit(clamp(parsed, min, max));
+        },
+        onBlur: (event) => {
+          const parsed = parse(text);
+          if (parsed === null) {
+            if (text.trim() === "") setText(stringify(value ?? defaultValue));
+          } else {
+            const next = clamp(parsed, min, max);
+            setText(stringify(next));
+            emit(next);
+          }
+          onBlur?.(event);
+        },
+        ...props
+      }
+    );
+  }
+);
+function stringify(value) {
+  return typeof value === "number" && Number.isFinite(value) ? String(value) : "";
+}
+function clamp(value, min, max) {
+  let next = value;
+  if (typeof min === "number" && next < min) next = min;
+  if (typeof max === "number" && next > max) next = max;
+  return next;
+}
+export {
+  NumberInput
+};
+//# sourceMappingURL=number-input.js.map

package/dist/inputs/number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/number-input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@tea-ui/utils\";\n\nimport { Input, type InputProps } from \"./input\";\n\n/**\n * TEA UI — NumberInput.\n *\n * A numeric field that clamps **on blur**, not on every keystroke.\n *\n * This is the whole design. The obvious implementation — clamp in `onChange` —\n * is unusable: the moment a user selects `150` in order to type `90`, the clamp\n * fires on the first keystroke, rewrites the box to `100`, and puts the cursor\n * somewhere the user did not choose. A user cannot type a value *below* the\n * current one. The same implementation makes a field that starts empty\n * permanently unwritable, because the intermediate `-` or `,` is not a number.\n *\n * So the field holds whatever the user typed, and on blur the value is parsed,\n * clamped into `[min, max]` and reported once. The user can type anything; the\n * model can only receive a number inside the declared range. And no value is\n * ever reported twice for the same number.\n *\n * `step` is passed to the DOM but deliberately **not** enforced on blur. A field\n * that silently rewrites `0.333` to `0.33` is lying about what was typed, and no\n * native numeric control snaps on blur either. The stepper and the arrow keys\n * honour `step`; free typing does not.\n */\nexport interface NumberInputProps\n  extends Omit<InputProps, \"value\" | \"defaultValue\" | \"onChange\" | \"type\" | \"inputMode\" | \"size\"> {\n  /** Controlled numeric value. */\n  value?: number | undefined;\n  /** Uncontrolled initial numeric value. */\n  defaultValue?: number | undefined;\n  /** Called with the parsed number on change, and with the clamped value on blur. */\n  onValueChange?: ((value: number) => void) | undefined;\n  /** Lower bound. Enforced on blur. */\n  min?: number | undefined;\n  /** Upper bound. Enforced on blur. */\n  max?: number | undefined;\n  /** Increment for the native stepper and the arrow keys. Not enforced on blur. */\n  step?: number | undefined;\n  /**\n   * `decimal` by default rather than `numeric`, because `numeric` asks a phone\n   * for a keypad with no comma key — and a German user then cannot type `0,5`\n   * at all, on a form that is otherwise entirely in German.\n   */\n  inputMode?: React.HTMLAttributes<HTMLInputElement>[\"inputMode\"];\n  /** The control height. */\n  size?: InputProps[\"size\"];\n  className?: string | undefined;\n}\n\n/**\n * @example\n * ```tsx\n * <Field>\n *   <FieldLabel>Anzahl</FieldLabel>\n *   <NumberInput min={1} max={64} defaultValue={4} />\n * </Field>\n * ```\n */\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  function NumberInput(\n    {\n      value,\n      defaultValue,\n      onValueChange,\n      min,\n      max,\n      step,\n      inputMode = \"decimal\",\n      size,\n      className,\n      onBlur,\n      ...props\n    },\n    ref,\n  ) {\n    const isControlled = value !== undefined;\n    // The text in the box belongs to the user and is allowed to be temporarily\n    // unparseable. That is the entire reason this component exists.\n    const [text, setText] = React.useState(() => stringify(value ?? defaultValue));\n    const lastEmitted = React.useRef<number | undefined>(undefined);\n\n    // A controlled value that changes from outside must reach the box — but the\n    // box is only overwritten when the *outside* value actually changed, never\n    // because a render happened.\n    const lastExternal = React.useRef(value);\n    React.useEffect(() => {\n      if (isControlled && !Object.is(value, lastExternal.current)) {\n        lastExternal.current = value;\n        setText(stringify(value));\n      }\n    }, [isControlled, value]);\n\n    // The contract is explicit: never emit a change for a value that did not\n    // change. Without this, a blur re-reports the number that the last\n    // keystroke already reported, and a consumer writing that straight into\n    // state renders a second time for nothing.\n    const emit = React.useCallback(\n      (next: number) => {\n        if (Object.is(lastEmitted.current, next)) return;\n        lastEmitted.current = next;\n        onValueChange?.(next);\n      },\n      [onValueChange],\n    );\n\n    const parse = (raw: string): number | null => {\n      const parsed = Number.parseFloat(raw.trim().replace(\",\", \".\"));\n      return Number.isFinite(parsed) ? parsed : null;\n    };\n\n    return (\n      <Input\n        ref={ref}\n        type=\"number\"\n        size={size}\n        inputMode={inputMode}\n        min={min}\n        max={max}\n        step={step}\n        className={cn(className)}\n        value={text}\n        onChange={(event) => {\n          setText(event.target.value);\n          const parsed = parse(event.target.value);\n          if (parsed !== null) emit(clamp(parsed, min, max));\n        }}\n        onBlur={(event) => {\n          const parsed = parse(text);\n          if (parsed === null) {\n            // An empty or half-typed box reverts to the last known good value\n            // instead of reporting `NaN` into the model.\n            if (text.trim() === \"\") setText(stringify(value ?? defaultValue));\n          } else {\n            const next = clamp(parsed, min, max);\n            setText(stringify(next));\n            emit(next);\n          }\n          onBlur?.(event);\n        }}\n        {...props}\n      />\n    );\n  },\n);\n\nfunction stringify(value: number | undefined): string {\n  return typeof value === \"number\" && Number.isFinite(value) ? String(value) : \"\";\n}\n\nfunction clamp(value: number, min: number | undefined, max: number | undefined): number {\n  let next = value;\n  if (typeof min === \"number\" && next < min) next = min;\n  if (typeof max === \"number\" && next > max) next = max;\n  return next;\n}\n"],"mappings":"AAkHM;AAlHN,YAAY,WAAW;AACvB,SAAS,UAAU;AAEnB,SAAS,aAA8B;AA0DhC,MAAM,cAAc,MAAM;AAAA,EAC/B,SAASA,aACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,UAAM,eAAe,UAAU;AAG/B,UAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,MAAM,UAAU,SAAS,YAAY,CAAC;AAC7E,UAAM,cAAc,MAAM,OAA2B,MAAS;AAK9D,UAAM,eAAe,MAAM,OAAO,KAAK;AACvC,UAAM,UAAU,MAAM;AACpB,UAAI,gBAAgB,CAAC,OAAO,GAAG,OAAO,aAAa,OAAO,GAAG;AAC3D,qBAAa,UAAU;AACvB,gBAAQ,UAAU,KAAK,CAAC;AAAA,MAC1B;AAAA,IACF,GAAG,CAAC,cAAc,KAAK,CAAC;AAMxB,UAAM,OAAO,MAAM;AAAA,MACjB,CAAC,SAAiB;AAChB,YAAI,OAAO,GAAG,YAAY,SAAS,IAAI,EAAG;AAC1C,oBAAY,UAAU;AACtB,wBAAgB,IAAI;AAAA,MACtB;AAAA,MACA,CAAC,aAAa;AAAA,IAChB;AAEA,UAAM,QAAQ,CAAC,QAA+B;AAC5C,YAAM,SAAS,OAAO,WAAW,IAAI,KAAK,EAAE,QAAQ,KAAK,GAAG,CAAC;AAC7D,aAAO,OAAO,SAAS,MAAM,IAAI,SAAS;AAAA,IAC5C;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,SAAS;AAAA,QACvB,OAAO;AAAA,QACP,UAAU,CAAC,UAAU;AACnB,kBAAQ,MAAM,OAAO,KAAK;AAC1B,gBAAM,SAAS,MAAM,MAAM,OAAO,KAAK;AACvC,cAAI,WAAW,KAAM,MAAK,MAAM,QAAQ,KAAK,GAAG,CAAC;AAAA,QACnD;AAAA,QACA,QAAQ,CAAC,UAAU;AACjB,gBAAM,SAAS,MAAM,IAAI;AACzB,cAAI,WAAW,MAAM;AAGnB,gBAAI,KAAK,KAAK,MAAM,GAAI,SAAQ,UAAU,SAAS,YAAY,CAAC;AAAA,UAClE,OAAO;AACL,kBAAM,OAAO,MAAM,QAAQ,KAAK,GAAG;AACnC,oBAAQ,UAAU,IAAI,CAAC;AACvB,iBAAK,IAAI;AAAA,UACX;AACA,mBAAS,KAAK;AAAA,QAChB;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,SAAS,UAAU,OAAmC;AACpD,SAAO,OAAO,UAAU,YAAY,OAAO,SAAS,KAAK,IAAI,OAAO,KAAK,IAAI;AAC/E;AAEA,SAAS,MAAM,OAAe,KAAyB,KAAiC;AACtF,MAAI,OAAO;AACX,MAAI,OAAO,QAAQ,YAAY,OAAO,IAAK,QAAO;AAClD,MAAI,OAAO,QAAQ,YAAY,OAAO,IAAK,QAAO;AAClD,SAAO;AACT;","names":["NumberInput"]}

package/dist/inputs/password-input.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { InputProps } from './input.js';
+import 'class-variance-authority/types';
+import '@tea-ui/utils';
+
+/**
+ * TEA UI — PasswordInput.
+ *
+ * A password field with a show/hide toggle. Three decisions:
+ *
+ *  - **`aria-pressed`, not just an icon swap.** A toggle that only changes which
+ *    glyph is on screen tells a screen reader user nothing about the state. The
+ *    button reports whether the password is *currently* visible, and its name
+ *    says what pressing it will do.
+ *  - **The name says the effect, not the state.** "Passwort anzeigen" while
+ *    hidden, "Passwort verbergen" while shown. A button labelled "Anzeigen"
+ *    that sometimes hides is a button nobody trusts.
+ *  - **Paste is never blocked.** A password manager fills this field by
+ *    pasting. A `onPaste` handler that refuses a paste — a pattern the source
+ *    project shipped — breaks every password manager on the planet, and is a
+ *    security control that does not measure security: a password in the
+ *    clipboard is a password the user chose to copy.
+ */
+interface PasswordInputProps extends Omit<InputProps, "type" | "value" | "defaultValue" | "onChange" | "size"> {
+    /** Controlled value. */
+    value?: string | undefined;
+    /** Uncontrolled initial value. */
+    defaultValue?: string | undefined;
+    /** Called on every keystroke, in both controlled and uncontrolled mode. */
+    onValueChange?: ((value: string) => void) | undefined;
+    /**
+     * Start with the password visible. Almost always `false`; it exists for the
+     * one-time-secret case, and for tests.
+     */
+    visible?: boolean | undefined;
+    /** Uncontrolled initial visibility. */
+    defaultVisible?: boolean | undefined;
+    /** Called whenever the visibility flips. */
+    onVisibleChange?: ((visible: boolean) => void) | undefined;
+    /**
+     * Defaults to `current-password`, the only value a browser password manager
+     * will offer to fill. Override with `new-password` on a registration form —
+     * leaving it as `current-password` there is why managers offer the *old*
+     * password for a *new* one.
+     */
+    autoComplete?: string | undefined;
+    /** Name for the toggle while the password is hidden. */
+    showLabel?: string | undefined;
+    /** Name for the toggle while the password is visible. */
+    hideLabel?: string | undefined;
+    /** The control height. */
+    size?: InputProps["size"];
+    className?: string | undefined;
+}
+/**
+ * @example
+ * ```tsx
+ * <Field>
+ *   <FieldLabel>Passwort</FieldLabel>
+ *   <PasswordInput autoComplete="new-password" />
+ * </Field>
+ * ```
+ */
+declare const PasswordInput: React.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+export { PasswordInput, type PasswordInputProps };

package/dist/inputs/password-input.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Eye, EyeOff } from "@tea-ui/icons";
+import { cn } from "@tea-ui/utils";
+import { dataSlot, useControllableState, withPrivateRef } from "../internal/index.js";
+import { IconButton } from "./icon-button.js";
+import { Input } from "./input.js";
+import { InputGroup, InputGroupEnd } from "./input-group.js";
+const DEFAULT_SHOW_LABEL = "Passwort anzeigen";
+const DEFAULT_HIDE_LABEL = "Passwort verbergen";
+const PasswordInput = React.forwardRef(
+  function PasswordInput2({
+    value,
+    defaultValue = "",
+    onValueChange,
+    visible,
+    defaultVisible = false,
+    onVisibleChange,
+    autoComplete = "current-password",
+    showLabel = DEFAULT_SHOW_LABEL,
+    hideLabel = DEFAULT_HIDE_LABEL,
+    size,
+    className,
+    disabled,
+    readOnly,
+    ...props
+  }, ref) {
+    const [password, setPassword] = useControllableState({
+      value,
+      defaultValue,
+      onChange: onValueChange,
+      name: "PasswordInput"
+    });
+    const [isVisible, setIsVisible] = useControllableState({
+      value: visible,
+      defaultValue: defaultVisible,
+      onChange: onVisibleChange,
+      name: "PasswordInput.visible"
+    });
+    const inputRef = React.useRef(null);
+    return /* @__PURE__ */ jsxs(InputGroup, { className: cn(className), ...dataSlot("password-input"), children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: withPrivateRef(ref, void 0, inputRef),
+          type: isVisible ? "text" : "password",
+          size,
+          autoComplete,
+          value: password,
+          onChange: (event) => setPassword(event.target.value),
+          disabled,
+          readOnly,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(InputGroupEnd, { children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: isVisible ? hideLabel : showLabel,
+          "aria-pressed": isVisible,
+          size: "sm",
+          disabled,
+          onClick: () => setIsVisible(!isVisible),
+          children: isVisible ? /* @__PURE__ */ jsx(EyeOff, {}) : /* @__PURE__ */ jsx(Eye, {})
+        }
+      ) })
+    ] });
+  }
+);
+export {
+  PasswordInput
+};
+//# sourceMappingURL=password-input.js.map

package/dist/inputs/password-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/password-input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Eye, EyeOff } from \"@tea-ui/icons\";\nimport { cn } from \"@tea-ui/utils\";\n\nimport { dataSlot, useControllableState, withPrivateRef } from \"../internal\";\nimport { IconButton } from \"./icon-button\";\nimport { Input, type InputProps } from \"./input\";\nimport { InputGroup, InputGroupEnd } from \"./input-group\";\n\n/**\n * TEA UI — PasswordInput.\n *\n * A password field with a show/hide toggle. Three decisions:\n *\n *  - **`aria-pressed`, not just an icon swap.** A toggle that only changes which\n *    glyph is on screen tells a screen reader user nothing about the state. The\n *    button reports whether the password is *currently* visible, and its name\n *    says what pressing it will do.\n *  - **The name says the effect, not the state.** \"Passwort anzeigen\" while\n *    hidden, \"Passwort verbergen\" while shown. A button labelled \"Anzeigen\"\n *    that sometimes hides is a button nobody trusts.\n *  - **Paste is never blocked.** A password manager fills this field by\n *    pasting. A `onPaste` handler that refuses a paste — a pattern the source\n *    project shipped — breaks every password manager on the planet, and is a\n *    security control that does not measure security: a password in the\n *    clipboard is a password the user chose to copy.\n */\nexport interface PasswordInputProps\n  extends Omit<InputProps, \"type\" | \"value\" | \"defaultValue\" | \"onChange\" | \"size\"> {\n  /** Controlled value. */\n  value?: string | undefined;\n  /** Uncontrolled initial value. */\n  defaultValue?: string | undefined;\n  /** Called on every keystroke, in both controlled and uncontrolled mode. */\n  onValueChange?: ((value: string) => void) | undefined;\n  /**\n   * Start with the password visible. Almost always `false`; it exists for the\n   * one-time-secret case, and for tests.\n   */\n  visible?: boolean | undefined;\n  /** Uncontrolled initial visibility. */\n  defaultVisible?: boolean | undefined;\n  /** Called whenever the visibility flips. */\n  onVisibleChange?: ((visible: boolean) => void) | undefined;\n  /**\n   * Defaults to `current-password`, the only value a browser password manager\n   * will offer to fill. Override with `new-password` on a registration form —\n   * leaving it as `current-password` there is why managers offer the *old*\n   * password for a *new* one.\n   */\n  autoComplete?: string | undefined;\n  /** Name for the toggle while the password is hidden. */\n  showLabel?: string | undefined;\n  /** Name for the toggle while the password is visible. */\n  hideLabel?: string | undefined;\n  /** The control height. */\n  size?: InputProps[\"size\"];\n  className?: string | undefined;\n}\n\n/** No German string for these exists in `COPY`, so they are typed here. */\nconst DEFAULT_SHOW_LABEL = \"Passwort anzeigen\";\nconst DEFAULT_HIDE_LABEL = \"Passwort verbergen\";\n\n/**\n * @example\n * ```tsx\n * <Field>\n *   <FieldLabel>Passwort</FieldLabel>\n *   <PasswordInput autoComplete=\"new-password\" />\n * </Field>\n * ```\n */\nexport const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(\n  function PasswordInput(\n    {\n      value,\n      defaultValue = \"\",\n      onValueChange,\n      visible,\n      defaultVisible = false,\n      onVisibleChange,\n      autoComplete = \"current-password\",\n      showLabel = DEFAULT_SHOW_LABEL,\n      hideLabel = DEFAULT_HIDE_LABEL,\n      size,\n      className,\n      disabled,\n      readOnly,\n      ...props\n    },\n    ref,\n  ) {\n    const [password, setPassword] = useControllableState({\n      value,\n      defaultValue,\n      onChange: onValueChange,\n      name: \"PasswordInput\",\n    });\n    const [isVisible, setIsVisible] = useControllableState({\n      value: visible,\n      defaultValue: defaultVisible,\n      onChange: onVisibleChange,\n      name: \"PasswordInput.visible\",\n    });\n\n    const inputRef = React.useRef<HTMLInputElement | null>(null);\n\n    return (\n      <InputGroup className={cn(className)} {...dataSlot(\"password-input\")}>\n        <Input\n          ref={withPrivateRef(ref, undefined, inputRef)}\n          type={isVisible ? \"text\" : \"password\"}\n          size={size}\n          autoComplete={autoComplete}\n          value={password}\n          onChange={(event) => setPassword(event.target.value)}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...props}\n        />\n        <InputGroupEnd>\n          <IconButton\n            label={isVisible ? hideLabel : showLabel}\n            aria-pressed={isVisible}\n            size=\"sm\"\n            disabled={disabled}\n            onClick={() => setIsVisible(!isVisible)}\n          >\n            {isVisible ? <EyeOff /> : <Eye />}\n          </IconButton>\n        </InputGroupEnd>\n      </InputGroup>\n    );\n  },\n);\n"],"mappings":"AA6GM,SACE,KADF;AA7GL,YAAY,WAAW;AACxB,SAAS,KAAK,cAAc;AAC5B,SAAS,UAAU;AAEnB,SAAS,UAAU,sBAAsB,sBAAsB;AAC/D,SAAS,kBAAkB;AAC3B,SAAS,aAA8B;AACvC,SAAS,YAAY,qBAAqB;AAsD1C,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;AAWpB,MAAM,gBAAgB,MAAM;AAAA,EACjC,SAASA,eACP;AAAA,IACE;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,IACA,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,UAAM,CAAC,UAAU,WAAW,IAAI,qBAAqB;AAAA,MACnD;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,MAAM;AAAA,IACR,CAAC;AACD,UAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB;AAAA,MACrD,OAAO;AAAA,MACP,cAAc;AAAA,MACd,UAAU;AAAA,MACV,MAAM;AAAA,IACR,CAAC;AAED,UAAM,WAAW,MAAM,OAAgC,IAAI;AAE3D,WACE,qBAAC,cAAW,WAAW,GAAG,SAAS,GAAI,GAAG,SAAS,gBAAgB,GACjE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,eAAe,KAAK,QAAW,QAAQ;AAAA,UAC5C,MAAM,YAAY,SAAS;AAAA,UAC3B;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP,UAAU,CAAC,UAAU,YAAY,MAAM,OAAO,KAAK;AAAA,UACnD;AAAA,UACA;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,MACA,oBAAC,iBACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,YAAY,YAAY;AAAA,UAC/B,gBAAc;AAAA,UACd,MAAK;AAAA,UACL;AAAA,UACA,SAAS,MAAM,aAAa,CAAC,SAAS;AAAA,UAErC,sBAAY,oBAAC,UAAO,IAAK,oBAAC,OAAI;AAAA;AAAA,MACjC,GACF;AAAA,OACF;AAAA,EAEJ;AACF;","names":["PasswordInput"]}

package/dist/inputs/radio.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { RadioGroup as RadioGroup$1 } from 'radix-ui';
+
+/**
+ * TEA UI — RadioGroup and Radio.
+ *
+ * One choice out of a small set. The pair is a family for a reason: the
+ * grouping *is* the semantics. `role="radiogroup"` is what tells a screen reader
+ * that the arrow keys move between the options, and that leaving the group
+ * leaves the choice. A column of loose radios has neither.
+ *
+ * Two details that are easy to lose:
+ *
+ *  - **Arrow-key navigation is not optional and is not ours.** Radix implements
+ *    it, and it is the only correct implementation: arrows move *and select*,
+ *    Tab enters and leaves the group as a single stop, and the roving tabindex
+ *    means the whole group is one tab stop rather than four. A hand-rolled
+ *    version gets one of those three wrong every time.
+ *  - **A radio with no group is a radio group of one.** The `Radio` reads the
+ *    group context and wires itself, so it cannot end up outside one.
+ */
+interface RadioGroupProps extends Omit<React.ComponentProps<typeof RadioGroup$1.Root>, "value" | "defaultValue" | "onValueChange" | "orientation" | "dir"> {
+    /** Controlled value — the `value` of the selected `Radio`. */
+    value?: string | undefined;
+    /** Uncontrolled initial value. */
+    defaultValue?: string | undefined;
+    /** Called when the selection changes, in both controlled and uncontrolled mode. */
+    onValueChange?: ((value: string) => void) | undefined;
+    /** Layout direction. Decides the arrow keys and the row/column flow. */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Name for the group. Give it one whenever the group is not already named by
+     * a `FieldGroup` legend: a `role="radiogroup"` with no name is an entry in the
+     * structure list that says nothing. A `Field` + `FieldLabel` pair is *not* a
+     * substitute here — a label cannot be associated with a `role="radiogroup"`
+     * container, only with each option.
+     */
+    label?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * @example
+ * ```tsx
+ * <FieldGroup legend="Zeitraum">
+ *   <RadioGroup defaultValue="week">
+ *     <Radio value="day">Tag</Radio>
+ *     <Radio value="week">Woche</Radio>
+ *   </RadioGroup>
+ * </FieldGroup>
+ * ```
+ */
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface RadioProps extends Omit<React.ComponentProps<typeof RadioGroup$1.Item>, "children"> {
+    /** Text beside the control. Makes the option self-naming. */
+    label?: React.ReactNode | undefined;
+    children?: React.ReactNode;
+    className?: string | undefined;
+}
+/**
+ * One option. Takes `label` (or children) and wires itself to the surrounding
+ * `RadioGroup` through Radix's own context, so `name` and selection cannot
+ * disagree.
+ */
+declare const Radio: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };