@tea-ui/core 0.1.0

package/dist/inputs/field.js

@@ -0,0 +1,183 @@
+import { 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, renderElement, stateAttributes } from "../internal/index.js";
+const FieldContext = React.createContext(null);
+const FieldPartsContext = React.createContext(null);
+function useField() {
+  return React.useContext(FieldContext);
+}
+function useFieldControlProps() {
+  const field = React.useContext(FieldContext);
+  const parts = React.useContext(FieldPartsContext);
+  if (!field) {
+    return {
+      id: void 0,
+      "aria-describedby": void 0,
+      "aria-invalid": void 0,
+      "aria-required": void 0,
+      disabled: void 0,
+      readOnly: void 0
+    };
+  }
+  const describedBy = [
+    parts?.hasDescription ? field.descriptionId : null,
+    parts?.hasError ? field.errorId : null
+  ].filter(Boolean).join(" ");
+  return {
+    id: field.id,
+    "aria-describedby": describedBy || void 0,
+    "aria-invalid": field.isInvalid || void 0,
+    "aria-required": field.isRequired || void 0,
+    disabled: field.isDisabled || void 0,
+    readOnly: field.isReadOnly || void 0
+  };
+}
+const Field = React.forwardRef(function Field2({
+  children,
+  className,
+  invalid = false,
+  required = false,
+  disabled = false,
+  readOnly = false,
+  asChild = false,
+  as,
+  idBase,
+  ...props
+}, ref) {
+  const reactId = React.useId();
+  const stem = idBase ?? reactId.replace(/:/g, "");
+  const [parts, setParts] = React.useState({ description: false, error: false });
+  const register = React.useCallback((part, present) => {
+    setParts((prev) => prev[part] === present ? prev : { ...prev, [part]: present });
+  }, []);
+  const value = React.useMemo(
+    () => ({
+      name: stem,
+      id: `${stem}-control`,
+      descriptionId: `${stem}-description`,
+      errorId: `${stem}-error`,
+      isInvalid: invalid,
+      isRequired: required,
+      isDisabled: disabled,
+      isReadOnly: readOnly
+    }),
+    [stem, invalid, required, disabled, readOnly]
+  );
+  const partsValue = React.useMemo(
+    () => ({ hasDescription: parts.description, hasError: parts.error, register }),
+    [parts, register]
+  );
+  return /* @__PURE__ */ jsx(FieldContext.Provider, { value, children: /* @__PURE__ */ jsx(FieldPartsContext.Provider, { value: partsValue, children: renderElement(
+    {
+      asChild,
+      as,
+      className: cn("flex min-w-0 flex-col gap-2", className),
+      children,
+      ref,
+      ...stateAttributes({ disabled, invalid, readOnly }),
+      ...dataSlot("field"),
+      ...props
+    },
+    "div"
+  ) }) });
+});
+const FieldLabel = React.forwardRef(function FieldLabel2({ children, className, required, htmlFor, ...props }, ref) {
+  const field = useField();
+  const isRequired = required ?? field?.isRequired ?? false;
+  return /* @__PURE__ */ jsxs(
+    LabelPrimitive.Root,
+    {
+      ref,
+      htmlFor: htmlFor ?? field?.id,
+      className: cn("inline-flex items-center gap-1 text-ui font-medium text-fg", className),
+      ...dataSlot("field-label"),
+      ...props,
+      children: [
+        children,
+        isRequired ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-critical", title: COPY.states.required, children: "*" }) : null
+      ]
+    }
+  );
+});
+function useFieldPart(part, present) {
+  const parts = React.useContext(FieldPartsContext);
+  const register = parts?.register;
+  React.useEffect(() => {
+    register?.(part, present);
+    return () => register?.(part, false);
+  }, [register, part, present]);
+}
+const FieldDescription = React.forwardRef(
+  function FieldDescription2({ children, className, ...props }, ref) {
+    const field = useField();
+    const present = children !== null && children !== void 0 && children !== false;
+    useFieldPart("description", present);
+    if (!present || !field) return null;
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        id: field.descriptionId,
+        className: cn("text-micro text-fg-muted", className),
+        ...dataSlot("field-description"),
+        ...props,
+        children
+      }
+    );
+  }
+);
+const FieldError = React.forwardRef(function FieldError2({ children, className, ...props }, ref) {
+  const field = useField();
+  const present = children !== null && children !== void 0 && children !== false && children !== "";
+  useFieldPart("error", present);
+  if (!present || !field) return null;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: field.errorId,
+      role: "alert",
+      className: cn("text-micro font-medium text-critical", className),
+      ...dataSlot("field-error"),
+      ...props,
+      children
+    }
+  );
+});
+const FieldGroup = React.forwardRef(function FieldGroup2({ children, className, legend, description, disabled, ...props }, ref) {
+  const descriptionId = React.useId().replace(/:/g, "");
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      ref,
+      disabled,
+      "aria-describedby": description ? descriptionId : void 0,
+      className: cn(
+        "flex min-w-0 flex-col field-gap",
+        "disabled:opacity-50",
+        className
+      ),
+      ...stateAttributes({ disabled }),
+      ...dataSlot("field-group"),
+      ...props,
+      children: [
+        legend ? /* @__PURE__ */ jsx("legend", { className: "mb-1 text-ui font-semibold text-fg", ...dataSlot("field-legend"), children: legend }) : null,
+        description ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: "-mt-1 text-micro text-fg-muted", children: description }) : null,
+        children
+      ]
+    }
+  );
+});
+export {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  useField,
+  useFieldControlProps
+};
+//# sourceMappingURL=field.js.map

package/dist/inputs/field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/field.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, renderElement, stateAttributes } from \"../internal\";\n\n/**\n * TEA UI — the Field system.\n *\n * This file exists because of a defect the audit found in **four of five**\n * field implementations across the two source projects: a `<label>` that was\n * never associated with its control. The consequence is not subtle — a screen\n * reader user reaches a text field and is told nothing about what belongs in\n * it, and a voice-control user simply cannot fill the form, because there is no\n * name to say. It is also invisible in review, because `<label>` next to\n * `<input>` *looks* right.\n *\n * The fix is structural rather than a review rule. `Field` owns the id space;\n * `FieldLabel`, `FieldDescription` and `FieldError` write into it; and every\n * control calls {@link useFieldControlProps}. A control cannot be wired wrong,\n * because it never writes the wiring by hand:\n *\n * ```tsx\n * <Field invalid={!!error} required>\n *   <FieldLabel>E-Mail</FieldLabel>\n *   <Input type=\"email\" />\n *   <FieldDescription>Wir senden keine Bestätigung.</FieldDescription>\n *   <FieldError>{error}</FieldError>\n * </Field>\n * ```\n *\n * The four parts degrade safely. `FieldError` with no message renders nothing\n * at all, and the error id disappears from `aria-describedby` with it, so there\n * is never a description pointing at an element that does not exist.\n */\n\n/** The state a `Field` passes down to its parts. */\nexport interface FieldState {\n  /** The control holds a value that failed validation. */\n  invalid?: boolean | undefined;\n  /** The control may not be left empty. */\n  required?: boolean | undefined;\n  /** The control and everything around it is unavailable. */\n  disabled?: boolean | undefined;\n  /** The value is visible but not editable. */\n  readOnly?: boolean | undefined;\n}\n\nexport interface FieldContextValue {\n  /** Base name of the field, used to build the three ids. */\n  name: string;\n  /** The control's id. This is what `FieldLabel` points `htmlFor` at. */\n  id: string;\n  /** Id of the description element, whether or not one is rendered. */\n  descriptionId: string;\n  /** Id of the error element, whether or not one is rendered. */\n  errorId: string;\n  isInvalid: boolean;\n  isRequired: boolean;\n  isDisabled: boolean;\n  isReadOnly: boolean;\n}\n\n/**\n * Which optional parts are actually on screen.\n *\n * Kept out of {@link FieldContextValue} on purpose: it is a rendering detail,\n * not part of the contract a consumer reads, and a consumer that could write to\n * it could desynchronise the ids from the DOM.\n */\ninterface FieldPartsContextValue {\n  hasDescription: boolean;\n  hasError: boolean;\n  register: (part: \"description\" | \"error\", present: boolean) => void;\n}\n\nconst FieldContext = React.createContext<FieldContextValue | null>(null);\nconst FieldPartsContext = React.createContext<FieldPartsContextValue | null>(null);\n\n/**\n * Read the enclosing `Field`, or `null` when a control is used standalone.\n *\n * A control outside a `Field` is legal — a search field in a toolbar has\n * nowhere sensible to put a `FieldDescription` — so every control must work\n * without one. That is why this returns `null` rather than throwing.\n */\nexport function useField(): FieldContextValue | null {\n  return React.useContext(FieldContext);\n}\n\n/** The subset of a field's context a control needs to wire itself. */\nexport interface FieldControlProps {\n  id: string | undefined;\n  \"aria-describedby\": string | undefined;\n  \"aria-invalid\": true | undefined;\n  \"aria-required\": true | undefined;\n  disabled: true | undefined;\n  readOnly: true | undefined;\n}\n\n/**\n * Wire a control to the enclosing `Field`. Call this in **every** control.\n *\n * The returned object is exactly the six attributes a control needs, so a\n * control spreads it and is done:\n *\n * ```tsx\n * const field = useFieldControlProps();\n * return <input {...field} className={…} />;\n * ```\n *\n * `aria-describedby` lists the description *and* the error, in that order. The\n * ids are added only once the corresponding element is really on screen, so the\n * attribute never points at nothing — an `aria-describedby` reference to a\n * missing id is a validation error in axe and is silently dropped by some\n * screen readers, which leaves the error text unannounced.\n *\n * Outside a `Field` every key is `undefined`, so `{...field}` is a no-op and\n * the consumer's own `id` and handlers survive.\n */\nexport function useFieldControlProps(): FieldControlProps {\n  const field = React.useContext(FieldContext);\n  const parts = React.useContext(FieldPartsContext);\n\n  if (!field) {\n    return {\n      id: undefined,\n      \"aria-describedby\": undefined,\n      \"aria-invalid\": undefined,\n      \"aria-required\": undefined,\n      disabled: undefined,\n      readOnly: undefined,\n    };\n  }\n\n  const describedBy = [\n    parts?.hasDescription ? field.descriptionId : null,\n    parts?.hasError ? field.errorId : null,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return {\n    id: field.id,\n    \"aria-describedby\": describedBy || undefined,\n    \"aria-invalid\": field.isInvalid || undefined,\n    \"aria-required\": field.isRequired || undefined,\n    disabled: field.isDisabled || undefined,\n    readOnly: field.isReadOnly || undefined,\n  };\n}\n\nexport interface FieldProps extends Omit<React.ComponentProps<\"div\">, \"children\">, FieldState {\n  children?: React.ReactNode;\n  /** Render the consumer's single child element instead of a `<div>`. */\n  asChild?: boolean | undefined;\n  /** The element to render instead of `<div>`. */\n  as?: React.ElementType | undefined;\n  /**\n   * Override the generated id stem. Only needed when the ids must be stable\n   * across server and client renders; `React.useId` already is.\n   */\n  idBase?: string | undefined;\n}\n\n/**\n * The container that owns a field's id space and state.\n *\n * Renders a `<div>` by default and nothing else — no role, no landmark. The\n * field is a layout relationship, and inventing a role for it would put a\n * meaningless entry in the screen reader's structure list.\n *\n * @example\n * ```tsx\n * <Field required>\n *   <FieldLabel>Name</FieldLabel>\n *   <Input />\n * </Field>\n * ```\n */\nexport const Field = React.forwardRef<HTMLDivElement, FieldProps>(function Field(\n  {\n    children,\n    className,\n    invalid = false,\n    required = false,\n    disabled = false,\n    readOnly = false,\n    asChild = false,\n    as,\n    idBase,\n    ...props\n  },\n  ref,\n) {\n  // `useId` emits `:r0:`, which is a legal HTML id but an illegal CSS\n  // identifier. A consumer must be able to reach the control with a selector.\n  const reactId = React.useId();\n  const stem = idBase ?? reactId.replace(/:/g, \"\");\n\n  const [parts, setParts] = React.useState({ description: false, error: false });\n\n  const register = React.useCallback((part: \"description\" | \"error\", present: boolean) => {\n    setParts((prev) => (prev[part] === present ? prev : { ...prev, [part]: present }));\n  }, []);\n\n  const value = React.useMemo<FieldContextValue>(\n    () => ({\n      name: stem,\n      id: `${stem}-control`,\n      descriptionId: `${stem}-description`,\n      errorId: `${stem}-error`,\n      isInvalid: invalid,\n      isRequired: required,\n      isDisabled: disabled,\n      isReadOnly: readOnly,\n    }),\n    [stem, invalid, required, disabled, readOnly],\n  );\n\n  const partsValue = React.useMemo<FieldPartsContextValue>(\n    () => ({ hasDescription: parts.description, hasError: parts.error, register }),\n    [parts, register],\n  );\n\n  return (\n    <FieldContext.Provider value={value}>\n      <FieldPartsContext.Provider value={partsValue}>\n        {renderElement(\n          {\n            asChild,\n            as,\n            className: cn(\"flex min-w-0 flex-col gap-2\", className),\n            children,\n            ref,\n            ...stateAttributes({ disabled, invalid, readOnly }),\n            ...dataSlot(\"field\"),\n            ...props,\n          },\n          \"div\",\n        )}\n      </FieldPartsContext.Provider>\n    </FieldContext.Provider>\n  );\n});\n\n\nexport interface FieldLabelProps extends React.ComponentProps<typeof LabelPrimitive.Root> {\n  /**\n   * Render the required marker. Defaults to the enclosing `Field`'s `required`;\n   * set it explicitly to label a field as required outside one.\n   */\n  required?: boolean | undefined;\n}\n\n/**\n * The field's label. A real `<label>` with `htmlFor` pointing at the control.\n *\n * Uses `Label.Root` from `radix-ui` rather than a bare `<label>` so that\n * clicking the label activates the control even when the control is a Radix\n * primitive rendering a `<button>` rather than an `<input>`.\n *\n * The required marker is a visible, `aria-hidden` `*` with a `title`, and the\n * requirement itself is carried by the control's `required` / `aria-required`.\n * It is deliberately **not** a visually hidden \"Pflichtfeld\" word inside the\n * label: that would append to the control's accessible name, so the control\n * would be announced as \"E-Mail Pflichtfeld\" instead of \"E-Mail\", and a\n * consumer matching on the visible label would find nothing. The attribute\n * already says it, and it says it correctly.\n *\n * @example\n * ```tsx\n * <FieldLabel required>E-Mail</FieldLabel>\n * ```\n */\nexport const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(function FieldLabel(\n  { children, className, required, htmlFor, ...props },\n  ref,\n) {\n  const field = useField();\n  const isRequired = required ?? field?.isRequired ?? false;\n\n  return (\n    <LabelPrimitive.Root\n      ref={ref}\n      htmlFor={htmlFor ?? field?.id}\n      className={cn(\"inline-flex items-center gap-1 text-ui font-medium text-fg\", className)}\n      {...dataSlot(\"field-label\")}\n      {...props}\n    >\n      {children}\n      {isRequired ? (\n        <span aria-hidden=\"true\" className=\"text-critical\" title={COPY.states.required}>\n          *\n        </span>\n      ) : null}\n    </LabelPrimitive.Root>\n  );\n});\n\n/**\n * Record which optional parts are mounted, so `aria-describedby` never points\n * at an element that is not there.\n *\n * Registration happens in an effect, not during render, because it changes the\n * field's state and rendering must stay side-effect free.\n */\nfunction useFieldPart(part: \"description\" | \"error\", present: boolean): void {\n  const parts = React.useContext(FieldPartsContext);\n  const register = parts?.register;\n  React.useEffect(() => {\n    register?.(part, present);\n    return () => register?.(part, false);\n  }, [register, part, present]);\n}\n\nexport type FieldDescriptionProps = React.ComponentProps<\"p\">;\n\n/**\n * Help text for the field, associated through `aria-describedby`.\n *\n * @example\n * ```tsx\n * <FieldDescription>Nur Großbuchstaben, Zahlen und Bindestriche.</FieldDescription>\n * ```\n */\nexport const FieldDescription = React.forwardRef<HTMLParagraphElement, FieldDescriptionProps>(\n  function FieldDescription({ children, className, ...props }, ref) {\n    const field = useField();\n    const present = children !== null && children !== undefined && children !== false;\n    useFieldPart(\"description\", present);\n\n    if (!present || !field) return null;\n\n    return (\n      <p\n        ref={ref}\n        id={field.descriptionId}\n        className={cn(\"text-micro text-fg-muted\", className)}\n        {...dataSlot(\"field-description\")}\n        {...props}\n      >\n        {children}\n      </p>\n    );\n  },\n);\n\nexport interface FieldErrorProps extends Omit<React.ComponentProps<\"p\">, \"children\"> {\n  /**\n   * The error text. `null`, `undefined` and `false` render nothing, which is\n   * what lets a caller write `<FieldError>{error}</FieldError>` and leave it in\n   * the tree permanently.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * The field's error message: `role=\"alert\"`, so it is announced when it appears.\n *\n * A colour change is not an announcement. Without `role=\"alert\"` a validation\n * error is invisible to a screen reader user, who is left with a red box and no\n * idea what is wrong with what they just typed.\n *\n * Renders nothing when there is no message — including when it is inside a\n * `Field` and therefore participates in `aria-describedby`.\n *\n * @example\n * ```tsx\n * <FieldError>{errors.email}</FieldError>\n * ```\n */\nexport const FieldError = React.forwardRef<HTMLParagraphElement, FieldErrorProps>(function FieldError(\n  { children, className, ...props },\n  ref,\n) {\n  const field = useField();\n  const present =\n    children !== null && children !== undefined && children !== false && children !== \"\";\n\n  useFieldPart(\"error\", present);\n\n  if (!present || !field) return null;\n\n  return (\n    <p\n      ref={ref}\n      id={field.errorId}\n      role=\"alert\"\n      className={cn(\"text-micro font-medium text-critical\", className)}\n      {...dataSlot(\"field-error\")}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n});\n\nexport interface FieldGroupProps extends Omit<React.ComponentProps<\"fieldset\">, \"children\"> {\n  children?: React.ReactNode;\n  /**\n   * The group's label. Rendered as the `<legend>`, which is what associates the\n   * set of controls with a name — `aria-label` on a `<fieldset>` does not\n   * become the group's accessible name in every browser.\n   */\n  legend?: React.ReactNode;\n  /** Help text for the whole set, associated with the `<fieldset>`. */\n  description?: React.ReactNode;\n}\n\n/**\n * A named set of related controls: `<fieldset>` + `<legend>`.\n *\n * A native `<fieldset disabled>` also disables every form control inside it,\n * which is the cheapest possible \"these five settings are not editable\" — a\n * `<fieldset>` in a `<form>` participates in form semantics that a `div` cannot.\n *\n * One component rather than `FieldSet` + `FieldLegend`: a legend is required\n * for the fieldset to be named, so separating them produces an unnamed group\n * whenever the legend is forgotten. The audit found plenty of those.\n *\n * @example\n * ```tsx\n * <FieldGroup legend=\"Benachrichtigungen\" disabled={saving}>\n *   <Field>\n *     <FieldLabel>Fehler per E-Mail</FieldLabel>\n *     <Switch />\n *   </Field>\n * </FieldGroup>\n * ```\n */\nexport const FieldGroup = React.forwardRef<HTMLFieldSetElement, FieldGroupProps>(function FieldGroup(\n  { children, className, legend, description, disabled, ...props },\n  ref,\n) {\n  const descriptionId = React.useId().replace(/:/g, \"\");\n\n  return (\n    <fieldset\n      ref={ref}\n      disabled={disabled}\n      aria-describedby={description ? descriptionId : undefined}\n      className={cn(\n        \"flex min-w-0 flex-col field-gap\",\n        \"disabled:opacity-50\",\n        className,\n      )}\n      {...stateAttributes({ disabled })}\n      {...dataSlot(\"field-group\")}\n      {...props}\n    >\n      {/* The legend must be the fieldset's first child: HTML names the set from\n          the first legend, and a legend that is not first names nothing. */}\n      {legend ? (\n        <legend className=\"mb-1 text-ui font-semibold text-fg\" {...dataSlot(\"field-legend\")}>\n          {legend}\n        </legend>\n      ) : null}\n      {description ? (\n        <p id={descriptionId} className=\"-mt-1 text-micro text-fg-muted\">\n          {description}\n        </p>\n      ) : null}\n      {children}\n    </fieldset>\n  );\n});\n"],"mappings":"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","names":["Field","FieldLabel","FieldDescription","FieldError","FieldGroup"]}

package/dist/inputs/icon-button.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { ButtonProps } from './button.js';
+import 'class-variance-authority/types';
+import '@tea-ui/utils';
+
+/**
+ * TEA UI — IconButton.
+ *
+ * A button whose entire content is an icon, which is the one control shape
+ * where the accessible name cannot come from the content. The audit found five
+ * such buttons on every table row, every one of them unnamed: a screen reader
+ * announced "button" five times, and a voice-control user could not operate the
+ * table at all, because there was no word to say.
+ *
+ * The fix is not a lint rule — it is a required prop. `label` has no default
+ * and no `undefined` escape, so the compiler refuses the unnamed button. That
+ * is worth more than a whole paragraph in a style guide.
+ *
+ * The icon itself is wrapped in an `aria-hidden` span. `aria-label` on the
+ * button is already the name, and leaving the icon in the tree risks a second,
+ * conflicting name from an icon that happens to carry a `<title>`.
+ */
+interface IconButtonProps extends Omit<ButtonProps, "size" | "children" | "asChild" | "as"> {
+    /**
+     * The accessible name. **Required** — an icon-only button without one is the
+     * defect this component exists to make impossible. Write the action, not the
+     * icon: "Server neu starten", not "Pfeil".
+     */
+    label: string;
+    /** Button size, mapped onto Button's `icon-*` sizes. */
+    size?: "sm" | "md" | "lg";
+    children?: React.ReactNode;
+}
+/**
+ * @example
+ * ```tsx
+ * <IconButton label="Server neu starten" variant="ghost" onClick={restart}>
+ *   <RefreshCw />
+ * </IconButton>
+ * ```
+ */
+declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { IconButton, type IconButtonProps };

package/dist/inputs/icon-button.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { dataSlot } from "../internal/index.js";
+import { Button } from "./button.js";
+import { useButtonGroupContext } from "./button-group.js";
+const ICON_SIZE = {
+  sm: "icon-sm",
+  md: "icon-md",
+  lg: "icon-lg"
+};
+const IconButton = React.forwardRef(function IconButton2({ label, size = "md", children, variant = "ghost", ...props }, ref) {
+  const group = useButtonGroupContext();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      size: ICON_SIZE[size],
+      variant,
+      "aria-label": label,
+      "data-tea-grouped": group ? group.orientation : void 0,
+      ...dataSlot("icon-button"),
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex items-center justify-center", children })
+    }
+  );
+});
+export {
+  IconButton
+};
+//# sourceMappingURL=icon-button.js.map

package/dist/inputs/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/icon-button.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { dataSlot } from \"../internal\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { useButtonGroupContext } from \"./button-group\";\n\n/**\n * TEA UI — IconButton.\n *\n * A button whose entire content is an icon, which is the one control shape\n * where the accessible name cannot come from the content. The audit found five\n * such buttons on every table row, every one of them unnamed: a screen reader\n * announced \"button\" five times, and a voice-control user could not operate the\n * table at all, because there was no word to say.\n *\n * The fix is not a lint rule — it is a required prop. `label` has no default\n * and no `undefined` escape, so the compiler refuses the unnamed button. That\n * is worth more than a whole paragraph in a style guide.\n *\n * The icon itself is wrapped in an `aria-hidden` span. `aria-label` on the\n * button is already the name, and leaving the icon in the tree risks a second,\n * conflicting name from an icon that happens to carry a `<title>`.\n */\nexport interface IconButtonProps\n  extends Omit<ButtonProps, \"size\" | \"children\" | \"asChild\" | \"as\"> {\n  /**\n   * The accessible name. **Required** — an icon-only button without one is the\n   * defect this component exists to make impossible. Write the action, not the\n   * icon: \"Server neu starten\", not \"Pfeil\".\n   */\n  label: string;\n  /** Button size, mapped onto Button's `icon-*` sizes. */\n  size?: \"sm\" | \"md\" | \"lg\";\n  children?: React.ReactNode;\n}\n\n/** TEA UI's `icon-sm|md|lg` axes are Button's; the mapping is the whole file. */\nconst ICON_SIZE = {\n  sm: \"icon-sm\",\n  md: \"icon-md\",\n  lg: \"icon-lg\",\n} as const;\n\n/**\n * @example\n * ```tsx\n * <IconButton label=\"Server neu starten\" variant=\"ghost\" onClick={restart}>\n *   <RefreshCw />\n * </IconButton>\n * ```\n */\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { label, size = \"md\", children, variant = \"ghost\", ...props },\n  ref,\n) {\n  const group = useButtonGroupContext();\n\n  return (\n    <Button\n      ref={ref}\n      size={ICON_SIZE[size]}\n      variant={variant}\n      aria-label={label}\n      data-tea-grouped={group ? group.orientation : undefined}\n      {...dataSlot(\"icon-button\")}\n      {...props}\n    >\n      <span aria-hidden=\"true\" className=\"inline-flex items-center justify-center\">\n        {children}\n      </span>\n    </Button>\n  );\n});\n"],"mappings":"AAmEM;AAnEL,YAAY,WAAW;AAExB,SAAS,gBAAgB;AACzB,SAAS,cAAgC;AACzC,SAAS,6BAA6B;AAiCtC,MAAM,YAAY;AAAA,EAChB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAUO,MAAM,aAAa,MAAM,WAA+C,SAASA,YACtF,EAAE,OAAO,OAAO,MAAM,UAAU,UAAU,SAAS,GAAG,MAAM,GAC5D,KACA;AACA,QAAM,QAAQ,sBAAsB;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,UAAU,IAAI;AAAA,MACpB;AAAA,MACA,cAAY;AAAA,MACZ,oBAAkB,QAAQ,MAAM,cAAc;AAAA,MAC7C,GAAG,SAAS,aAAa;AAAA,MACzB,GAAG;AAAA,MAEJ,8BAAC,UAAK,eAAY,QAAO,WAAU,2CAChC,UACH;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["IconButton"]}

package/dist/inputs/index.d.ts

@@ -0,0 +1,22 @@
+export { Button, ButtonProps, buttonVariants } from './button.js';
+export { ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupSeparatorProps } from './button-group.js';
+export { IconButton, IconButtonProps } from './icon-button.js';
+export { Input, InputProps, inputVariants } from './input.js';
+export { Textarea, TextareaProps, textareaVariants } from './textarea.js';
+export { InputGroup, InputGroupEnd, InputGroupEndProps, InputGroupProps, InputGroupStart, InputGroupStartProps, useInputGroupContext } from './input-group.js';
+export { SearchInput, SearchInputProps } from './search-input.js';
+export { PasswordInput, PasswordInputProps } from './password-input.js';
+export { NumberInput, NumberInputProps } from './number-input.js';
+export { Checkbox, CheckboxProps } from './checkbox.js';
+export { Radio, RadioGroup, RadioGroupProps, RadioProps } from './radio.js';
+export { Switch, SwitchProps } from './switch.js';
+export { Slider, SliderProps } from './slider.js';
+export { Toggle, ToggleGroup, ToggleGroupProps, ToggleProps, toggleVariants } from './toggle.js';
+export { Label, LabelProps } from './label.js';
+export { Combobox, ComboboxOption, ComboboxProps, comboboxTriggerVariants } from './combobox.js';
+export { Select, SelectContent, SelectContentProps, SelectGroup, SelectItem, SelectItemProps, SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectTriggerProps, SelectValue, selectTriggerVariants } from './select.js';
+export { Field, FieldContextValue, FieldControlProps, FieldDescription, FieldDescriptionProps, FieldError, FieldErrorProps, FieldGroup, FieldGroupProps, FieldLabel, FieldLabelProps, FieldProps, FieldState, useField, useFieldControlProps } from './field.js';
+import 'class-variance-authority/types';
+import 'react';
+import '@tea-ui/utils';
+import 'radix-ui';

package/dist/inputs/index.js

@@ -0,0 +1,92 @@
+import { Button, buttonVariants } from "./button.js";
+import { ButtonGroup, ButtonGroupSeparator } from "./button-group.js";
+import { IconButton } from "./icon-button.js";
+import { Input, inputVariants } from "./input.js";
+import { Textarea, textareaVariants } from "./textarea.js";
+import {
+  InputGroup,
+  InputGroupEnd,
+  InputGroupStart,
+  useInputGroupContext
+} from "./input-group.js";
+import { SearchInput } from "./search-input.js";
+import { PasswordInput } from "./password-input.js";
+import { NumberInput } from "./number-input.js";
+import { Checkbox } from "./checkbox.js";
+import { Radio, RadioGroup } from "./radio.js";
+import { Switch } from "./switch.js";
+import { Slider } from "./slider.js";
+import { Toggle, ToggleGroup, toggleVariants } from "./toggle.js";
+import { Label } from "./label.js";
+import {
+  Combobox,
+  comboboxTriggerVariants
+} from "./combobox.js";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  selectTriggerVariants
+} from "./select.js";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  useField,
+  useFieldControlProps
+} from "./field.js";
+export {
+  Button,
+  ButtonGroup,
+  ButtonGroupSeparator,
+  Checkbox,
+  Combobox,
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  IconButton,
+  Input,
+  InputGroup,
+  InputGroupEnd,
+  InputGroupStart,
+  Label,
+  NumberInput,
+  PasswordInput,
+  Radio,
+  RadioGroup,
+  SearchInput,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Slider,
+  Switch,
+  Textarea,
+  Toggle,
+  ToggleGroup,
+  buttonVariants,
+  comboboxTriggerVariants,
+  inputVariants,
+  selectTriggerVariants,
+  textareaVariants,
+  toggleVariants,
+  useField,
+  useFieldControlProps,
+  useInputGroupContext
+};
+//# sourceMappingURL=index.js.map

package/dist/inputs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/index.ts"],"sourcesContent":["/**\n * TEA UI — inputs.\n *\n * Every control here is keyboard operable, forward-ref, and supports both\n * controlled and uncontrolled use through the shared `useControllableState`.\n * Handlers follow React convention: `onValueChange` for a controlled value,\n * `onChange` for a native one.\n */\nexport { Button, buttonVariants, type ButtonProps } from \"./button\";\nexport { ButtonGroup, ButtonGroupSeparator, type ButtonGroupProps, type ButtonGroupSeparatorProps } from \"./button-group\";\nexport { IconButton, type IconButtonProps } from \"./icon-button\";\nexport { Input, inputVariants, type InputProps } from \"./input\";\nexport { Textarea, textareaVariants, type TextareaProps } from \"./textarea\";\nexport {\n  InputGroup,\n  InputGroupEnd,\n  InputGroupStart,\n  useInputGroupContext,\n  type InputGroupEndProps,\n  type InputGroupProps,\n  type InputGroupStartProps,\n} from \"./input-group\";\nexport { SearchInput, type SearchInputProps } from \"./search-input\";\nexport { PasswordInput, type PasswordInputProps } from \"./password-input\";\nexport { NumberInput, type NumberInputProps } from \"./number-input\";\nexport { Checkbox, type CheckboxProps } from \"./checkbox\";\nexport { Radio, RadioGroup, type RadioProps, type RadioGroupProps } from \"./radio\";\nexport { Switch, type SwitchProps } from \"./switch\";\nexport { Slider, type SliderProps } from \"./slider\";\nexport { Toggle, ToggleGroup, toggleVariants, type ToggleProps, type ToggleGroupProps } from \"./toggle\";\nexport { Label, type LabelProps } from \"./label\";\nexport {\n  Combobox,\n  comboboxTriggerVariants,\n  type ComboboxOption,\n  type ComboboxProps,\n} from \"./combobox\";\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  selectTriggerVariants,\n  type SelectContentProps,\n  type SelectItemProps,\n  type SelectProps,\n  type SelectTriggerProps,\n} from \"./select\";\nexport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  useField,\n  useFieldControlProps,\n  type FieldContextValue,\n  type FieldControlProps,\n  type FieldDescriptionProps,\n  type FieldErrorProps,\n  type FieldGroupProps,\n  type FieldLabelProps,\n  type FieldProps,\n  type FieldState,\n} from \"./field\";\n"],"mappings":"AAQA,SAAS,QAAQ,sBAAwC;AACzD,SAAS,aAAa,4BAAmF;AACzG,SAAS,kBAAwC;AACjD,SAAS,OAAO,qBAAsC;AACtD,SAAS,UAAU,wBAA4C;AAC/D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,mBAA0C;AACnD,SAAS,qBAA8C;AACvD,SAAS,mBAA0C;AACnD,SAAS,gBAAoC;AAC7C,SAAS,OAAO,kBAAyD;AACzE,SAAS,cAAgC;AACzC,SAAS,cAAgC;AACzC,SAAS,QAAQ,aAAa,sBAA+D;AAC7F,SAAS,aAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OASK;","names":[]}

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

@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+/**
+ * TEA UI — InputGroup.
+ *
+ * A control with addons welded to it: a search icon, a unit, a clear button, a
+ * currency prefix. The audit found three hand-typed search inputs, each with its
+ * own idea of how the icon sat in the box and at what height — and the second
+ * one had already drifted from the first.
+ *
+ * The mechanism is a context, not a `Slot`. `Slot` would let the *group* style a
+ * child it knows nothing about, which is the wrong direction: what has to change
+ * is the control's own chrome, and only the control knows what it is. So the
+ * group publishes the classes an inner control must drop — border, background,
+ * horizontal padding and its own focus ring — and `Input` applies them. The
+ * group can then wrap `Input`, `Textarea` or a `Select.Trigger`, and the border
+ * appears exactly once, on the outside, with the ring on the outside too.
+ *
+ * Focus is the reason the ring moves out. One ring around the whole group is
+ * both prettier and more legible than a ring around a borderless input inside a
+ * bordered box: the user can see at a glance that the *group*, not some internal
+ * element, has focus.
+ */
+interface InputGroupContextValue {
+    /** What a control inside the group must drop to become the group's surface. */
+    controlClassName: string | null;
+}
+/** Read by `Input` and `Textarea`. `null` when the control is standalone. */
+declare function useInputGroupContext(): InputGroupContextValue | null;
+interface InputGroupProps extends Omit<React.ComponentProps<"div">, "children"> {
+    children?: React.ReactNode;
+    /**
+     * Name for the group. Give it one whenever the group is more than decoration
+     * — a `role="group"` with no name appears in the structure list and says
+     * nothing, which is worse than not being a group at all.
+     */
+    label?: string | undefined;
+    /** Dim the group. Individual controls keep their own `disabled` state. */
+    disabled?: boolean | undefined;
+}
+/**
+ * @example
+ * ```tsx
+ * <InputGroup label="Server durchsuchen">
+ *   <InputGroupStart>
+ *     <Search aria-hidden className="size-4" />
+ *   </InputGroupStart>
+ *   <Input type="search" />
+ *   <InputGroupEnd>
+ *     <IconButton label="Suche zurücksetzen" size="sm">
+ *       <X aria-hidden />
+ *     </IconButton>
+ *   </InputGroupEnd>
+ * </InputGroup>
+ * ```
+ */
+declare const InputGroup: React.ForwardRefExoticComponent<Omit<InputGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type InputGroupStartProps = React.ComponentProps<"span">;
+/**
+ * An addon at the start edge — a decorative icon, a static prefix, a unit.
+ *
+ * A `title` attribute is not a label and an `svg` is not one either. If the icon
+ * is the only content, either give the *control* a name or mark the icon
+ * `aria-hidden` and label the group; never rely on the icon being read.
+ */
+declare const InputGroupStart: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+type InputGroupEndProps = React.ComponentProps<"span">;
+/**
+ * An addon at the end edge — a clear button, a suffix, a unit.
+ *
+ * An interactive child needs an accessible name of its own. The audit's five
+ * unnamed icon buttons per table row were all of this shape; `IconButton` makes
+ * the name a required prop so that cannot recur.
+ */
+declare const InputGroupEnd: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+export { InputGroup, InputGroupEnd, type InputGroupEndProps, type InputGroupProps, InputGroupStart, type InputGroupStartProps, useInputGroupContext };

package/dist/inputs/input-group.js

@@ -0,0 +1,76 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@tea-ui/utils";
+import { dataSlot, stateAttributes } from "../internal/index.js";
+const InputGroupContext = React.createContext(null);
+function useInputGroupContext() {
+  return React.useContext(InputGroupContext);
+}
+const CONTROL_CLASS_NAME = cn(
+  // The group owns the border and the background.
+  "h-full flex-1 rounded-none border-0 bg-transparent",
+  // The addons own the horizontal space, so the control needs none. Without
+  // this the text collides with the icon at every density.
+  "px-0",
+  // The group's `focus-within:` ring replaces the control's own ring, so the
+  // control gives it up.
+  "focus-visible:border-transparent focus-visible:ring-0",
+  // Same for the invalid ring: one critical ring, on the group.
+  "aria-[invalid=true]:ring-0"
+);
+const InputGroup = React.forwardRef(function InputGroup2({ children, className, label, disabled = false, ...props }, ref) {
+  const value = React.useMemo(
+    () => ({ controlClassName: CONTROL_CLASS_NAME }),
+    []
+  );
+  return /* @__PURE__ */ jsx(InputGroupContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: label ? "group" : void 0,
+      "aria-label": label,
+      "data-tea-touch": true,
+      className: cn(
+        "flex min-w-0 items-stretch rounded-none border border-line bg-surface",
+        "focus-within:border-ring-strong focus-within:ring-2 focus-within:ring-ring",
+        "disabled:opacity-50",
+        className
+      ),
+      ...stateAttributes({ disabled }),
+      ...dataSlot("input-group"),
+      ...props,
+      children
+    }
+  ) });
+});
+const InputGroupAddon = React.forwardRef(function InputGroupAddon2({ children, className, edge, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cn(
+        "flex shrink-0 items-center gap-1 text-fg-muted",
+        edge === "start" ? "ps-3 pe-2" : "ps-2 pe-1",
+        className
+      ),
+      ...dataSlot("input-group-addon"),
+      ...props,
+      children
+    }
+  );
+});
+const InputGroupStart = React.forwardRef(
+  function InputGroupStart2(props, ref) {
+    return /* @__PURE__ */ jsx(InputGroupAddon, { ref, edge: "start", ...dataSlot("input-group-start"), ...props });
+  }
+);
+const InputGroupEnd = React.forwardRef(function InputGroupEnd2(props, ref) {
+  return /* @__PURE__ */ jsx(InputGroupAddon, { ref, edge: "end", ...dataSlot("input-group-end"), ...props });
+});
+export {
+  InputGroup,
+  InputGroupEnd,
+  InputGroupStart,
+  useInputGroupContext
+};
+//# sourceMappingURL=input-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/input-group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@tea-ui/utils\";\n\nimport { dataSlot, stateAttributes } from \"../internal\";\n\n/**\n * TEA UI — InputGroup.\n *\n * A control with addons welded to it: a search icon, a unit, a clear button, a\n * currency prefix. The audit found three hand-typed search inputs, each with its\n * own idea of how the icon sat in the box and at what height — and the second\n * one had already drifted from the first.\n *\n * The mechanism is a context, not a `Slot`. `Slot` would let the *group* style a\n * child it knows nothing about, which is the wrong direction: what has to change\n * is the control's own chrome, and only the control knows what it is. So the\n * group publishes the classes an inner control must drop — border, background,\n * horizontal padding and its own focus ring — and `Input` applies them. The\n * group can then wrap `Input`, `Textarea` or a `Select.Trigger`, and the border\n * appears exactly once, on the outside, with the ring on the outside too.\n *\n * Focus is the reason the ring moves out. One ring around the whole group is\n * both prettier and more legible than a ring around a borderless input inside a\n * bordered box: the user can see at a glance that the *group*, not some internal\n * element, has focus.\n */\n\ninterface InputGroupContextValue {\n  /** What a control inside the group must drop to become the group's surface. */\n  controlClassName: string | null;\n}\n\nconst InputGroupContext = React.createContext<InputGroupContextValue | null>(null);\n\n/** Read by `Input` and `Textarea`. `null` when the control is standalone. */\nexport function useInputGroupContext(): InputGroupContextValue | null {\n  return React.useContext(InputGroupContext);\n}\n\nconst CONTROL_CLASS_NAME = cn(\n  // The group owns the border and the background.\n  \"h-full flex-1 rounded-none border-0 bg-transparent\",\n  // The addons own the horizontal space, so the control needs none. Without\n  // this the text collides with the icon at every density.\n  \"px-0\",\n  // The group's `focus-within:` ring replaces the control's own ring, so the\n  // control gives it up.\n  \"focus-visible:border-transparent focus-visible:ring-0\",\n  // Same for the invalid ring: one critical ring, on the group.\n  \"aria-[invalid=true]:ring-0\",\n);\n\nexport interface InputGroupProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  children?: React.ReactNode;\n  /**\n   * Name for the group. Give it one whenever the group is more than decoration\n   * — a `role=\"group\"` with no name appears in the structure list and says\n   * nothing, which is worse than not being a group at all.\n   */\n  label?: string | undefined;\n  /** Dim the group. Individual controls keep their own `disabled` state. */\n  disabled?: boolean | undefined;\n}\n\n/**\n * @example\n * ```tsx\n * <InputGroup label=\"Server durchsuchen\">\n *   <InputGroupStart>\n *     <Search aria-hidden className=\"size-4\" />\n *   </InputGroupStart>\n *   <Input type=\"search\" />\n *   <InputGroupEnd>\n *     <IconButton label=\"Suche zurücksetzen\" size=\"sm\">\n *       <X aria-hidden />\n *     </IconButton>\n *   </InputGroupEnd>\n * </InputGroup>\n * ```\n */\nexport const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n  { children, className, label, disabled = false, ...props },\n  ref,\n) {\n  const value = React.useMemo<InputGroupContextValue>(\n    () => ({ controlClassName: CONTROL_CLASS_NAME }),\n    [],\n  );\n\n  return (\n    <InputGroupContext.Provider value={value}>\n      <div\n        ref={ref}\n        role={label ? \"group\" : undefined}\n        aria-label={label}\n        data-tea-touch\n        className={cn(\n          \"flex min-w-0 items-stretch rounded-none border border-line bg-surface\",\n          \"focus-within:border-ring-strong focus-within:ring-2 focus-within:ring-ring\",\n          \"disabled:opacity-50\",\n          className,\n        )}\n        {...stateAttributes({ disabled })}\n        {...dataSlot(\"input-group\")}\n        {...props}\n      >\n        {children}\n      </div>\n    </InputGroupContext.Provider>\n  );\n});\n\ninterface InputGroupAddonProps extends React.ComponentProps<\"span\"> {\n  /** Which edge of the group the addon sits on. Sets the horizontal padding. */\n  edge: \"start\" | \"end\";\n}\n\n/**\n * The shared body of both addons.\n *\n * The addon is a `<span>`, never a wrapper element of its own: it must not\n * introduce a block box between the group's flex line and the control, or the\n * control stops filling the height.\n */\nconst InputGroupAddon = React.forwardRef<HTMLSpanElement, InputGroupAddonProps>(function InputGroupAddon(\n  { children, className, edge, ...props },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        \"flex shrink-0 items-center gap-1 text-fg-muted\",\n        edge === \"start\" ? \"ps-3 pe-2\" : \"ps-2 pe-1\",\n        className,\n      )}\n      {...dataSlot(\"input-group-addon\")}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n});\n\nexport type InputGroupStartProps = React.ComponentProps<\"span\">;\n\n/**\n * An addon at the start edge — a decorative icon, a static prefix, a unit.\n *\n * A `title` attribute is not a label and an `svg` is not one either. If the icon\n * is the only content, either give the *control* a name or mark the icon\n * `aria-hidden` and label the group; never rely on the icon being read.\n */\nexport const InputGroupStart = React.forwardRef<HTMLSpanElement, InputGroupStartProps>(\n  function InputGroupStart(props, ref) {\n    return <InputGroupAddon ref={ref} edge=\"start\" {...dataSlot(\"input-group-start\")} {...props} />;\n  },\n);\n\nexport type InputGroupEndProps = React.ComponentProps<\"span\">;\n\n/**\n * An addon at the end edge — a clear button, a suffix, a unit.\n *\n * An interactive child needs an accessible name of its own. The audit's five\n * unnamed icon buttons per table row were all of this shape; `IconButton` makes\n * the name a required prop so that cannot recur.\n */\nexport const InputGroupEnd = React.forwardRef<HTMLSpanElement, InputGroupEndProps>(function InputGroupEnd(\n  props,\n  ref,\n) {\n  return <InputGroupAddon ref={ref} edge=\"end\" {...dataSlot(\"input-group-end\")} {...props} />;\n});\n"],"mappings":"AA2FM;AA3FL,YAAY,WAAW;AACxB,SAAS,UAAU;AAEnB,SAAS,UAAU,uBAAuB;AA6B1C,MAAM,oBAAoB,MAAM,cAA6C,IAAI;AAG1E,SAAS,uBAAsD;AACpE,SAAO,MAAM,WAAW,iBAAiB;AAC3C;AAEA,MAAM,qBAAqB;AAAA;AAAA,EAEzB;AAAA;AAAA;AAAA,EAGA;AAAA;AAAA;AAAA,EAGA;AAAA;AAAA,EAEA;AACF;AA8BO,MAAM,aAAa,MAAM,WAA4C,SAASA,YACnF,EAAE,UAAU,WAAW,OAAO,WAAW,OAAO,GAAG,MAAM,GACzD,KACA;AACA,QAAM,QAAQ,MAAM;AAAA,IAClB,OAAO,EAAE,kBAAkB,mBAAmB;AAAA,IAC9C,CAAC;AAAA,EACH;AAEA,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAC1B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,QAAQ,UAAU;AAAA,MACxB,cAAY;AAAA,MACZ,kBAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG,gBAAgB,EAAE,SAAS,CAAC;AAAA,MAC/B,GAAG,SAAS,aAAa;AAAA,MACzB,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAcD,MAAM,kBAAkB,MAAM,WAAkD,SAASC,iBACvF,EAAE,UAAU,WAAW,MAAM,GAAG,MAAM,GACtC,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,SAAS,UAAU,cAAc;AAAA,QACjC;AAAA,MACF;AAAA,MACC,GAAG,SAAS,mBAAmB;AAAA,MAC/B,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAWM,MAAM,kBAAkB,MAAM;AAAA,EACnC,SAASC,iBAAgB,OAAO,KAAK;AACnC,WAAO,oBAAC,mBAAgB,KAAU,MAAK,SAAS,GAAG,SAAS,mBAAmB,GAAI,GAAG,OAAO;AAAA,EAC/F;AACF;AAWO,MAAM,gBAAgB,MAAM,WAAgD,SAASC,eAC1F,OACA,KACA;AACA,SAAO,oBAAC,mBAAgB,KAAU,MAAK,OAAO,GAAG,SAAS,iBAAiB,GAAI,GAAG,OAAO;AAC3F,CAAC;","names":["InputGroup","InputGroupAddon","InputGroupStart","InputGroupEnd"]}