@tea-ui/core 0.1.0

package/dist/inputs/radio.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import { cn } from "@tea-ui/utils";
+import { dataSlot, stateAttributes } from "../internal/index.js";
+import { useFieldControlProps } from "./field.js";
+const RadioGroup = React.forwardRef(function RadioGroup2({
+  children,
+  className,
+  value,
+  defaultValue,
+  onValueChange,
+  orientation = "vertical",
+  label,
+  disabled,
+  required,
+  ...props
+}, ref) {
+  const field = useFieldControlProps();
+  const isDisabled = field.disabled ?? disabled ?? false;
+  const isRequired = field["aria-required"] ?? required ?? false;
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      ref,
+      ...dataSlot("radio-group"),
+      value,
+      defaultValue,
+      onValueChange,
+      orientation,
+      disabled: isDisabled,
+      required: isRequired,
+      "aria-label": label,
+      "aria-describedby": field["aria-describedby"],
+      "aria-invalid": field["aria-invalid"],
+      "aria-required": isRequired || void 0,
+      "data-orientation": orientation,
+      className: cn("flex min-w-0 gap-3", orientation === "vertical" ? "flex-col" : "flex-row", className),
+      ...stateAttributes({ disabled: isDisabled, orientation }),
+      ...props,
+      children
+    }
+  );
+});
+const Radio = React.forwardRef(function Radio2({ className, label, children, value, disabled, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      value,
+      disabled,
+      "data-tea-touch": true,
+      className: cn(
+        "group inline-flex items-center gap-2 text-ui",
+        "rounded-none",
+        "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+        className
+      ),
+      ...dataSlot("radio"),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              // `rounded-pill` is a documented exception: a radio control is a
+              // marker, and a square one reads as a checkbox.
+              "flex size-4 shrink-0 items-center justify-center rounded-pill border border-line-strong bg-surface",
+              "transition-[background-color,border-color,box-shadow] duration-[120ms] ease-standard",
+              "group-data-[state=checked]:border-primary group-data-[state=checked]:bg-primary",
+              "group-focus-visible:ring-2 group-focus-visible:ring-ring"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "size-2 rounded-pill bg-primary-fg",
+                  // The dot *is* the state, in shape as well as colour.
+                  "scale-0 transition-transform duration-[120ms] ease-standard",
+                  "group-data-[state=checked]:scale-100"
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-fg group-data-[state=checked]:font-medium", children: label ?? children })
+      ]
+    }
+  );
+});
+export {
+  Radio,
+  RadioGroup
+};
+//# sourceMappingURL=radio.js.map

package/dist/inputs/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/radio.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport { cn } from \"@tea-ui/utils\";\n\nimport { dataSlot, stateAttributes } from \"../internal\";\nimport { useFieldControlProps } from \"./field\";\n\n/**\n * TEA UI — RadioGroup and Radio.\n *\n * One choice out of a small set. The pair is a family for a reason: the\n * grouping *is* the semantics. `role=\"radiogroup\"` is what tells a screen reader\n * that the arrow keys move between the options, and that leaving the group\n * leaves the choice. A column of loose radios has neither.\n *\n * Two details that are easy to lose:\n *\n *  - **Arrow-key navigation is not optional and is not ours.** Radix implements\n *    it, and it is the only correct implementation: arrows move *and select*,\n *    Tab enters and leaves the group as a single stop, and the roving tabindex\n *    means the whole group is one tab stop rather than four. A hand-rolled\n *    version gets one of those three wrong every time.\n *  - **A radio with no group is a radio group of one.** The `Radio` reads the\n *    group context and wires itself, so it cannot end up outside one.\n */\n\nexport interface RadioGroupProps\n  extends Omit<\n    React.ComponentProps<typeof RadioGroupPrimitive.Root>,\n    \"value\" | \"defaultValue\" | \"onValueChange\" | \"orientation\" | \"dir\"\n  > {\n  /** Controlled value — the `value` of the selected `Radio`. */\n  value?: string | undefined;\n  /** Uncontrolled initial value. */\n  defaultValue?: string | undefined;\n  /** Called when the selection changes, in both controlled and uncontrolled mode. */\n  onValueChange?: ((value: string) => void) | undefined;\n  /** Layout direction. Decides the arrow keys and the row/column flow. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Name for the group. Give it one whenever the group is not already named by\n   * a `FieldGroup` legend: a `role=\"radiogroup\"` with no name is an entry in the\n   * structure list that says nothing. A `Field` + `FieldLabel` pair is *not* a\n   * substitute here — a label cannot be associated with a `role=\"radiogroup\"`\n   * container, only with each option.\n   */\n  label?: string | undefined;\n  className?: string | undefined;\n}\n\n/**\n * @example\n * ```tsx\n * <FieldGroup legend=\"Zeitraum\">\n *   <RadioGroup defaultValue=\"week\">\n *     <Radio value=\"day\">Tag</Radio>\n *     <Radio value=\"week\">Woche</Radio>\n *   </RadioGroup>\n * </FieldGroup>\n * ```\n */\nexport const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(function RadioGroup(\n  {\n    children,\n    className,\n    value,\n    defaultValue,\n    onValueChange,\n    orientation = \"vertical\",\n    label,\n    disabled,\n    required,\n    ...props\n  },\n  ref,\n) {\n  const field = useFieldControlProps();\n  const isDisabled = field.disabled ?? disabled ?? false;\n  const isRequired = field[\"aria-required\"] ?? required ?? false;\n\n  return (\n    <RadioGroupPrimitive.Root\n      ref={ref}\n      {...dataSlot(\"radio-group\")}\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={onValueChange}\n      orientation={orientation}\n      disabled={isDisabled}\n      required={isRequired}\n      aria-label={label}\n      aria-describedby={field[\"aria-describedby\"]}\n      aria-invalid={field[\"aria-invalid\"]}\n      aria-required={isRequired || undefined}\n      data-orientation={orientation}\n      className={cn(\"flex min-w-0 gap-3\", orientation === \"vertical\" ? \"flex-col\" : \"flex-row\", className)}\n      {...stateAttributes({ disabled: isDisabled, orientation })}\n      {...props}\n    >\n      {children}\n    </RadioGroupPrimitive.Root>\n  );\n});\n\nexport interface RadioProps\n  extends Omit<React.ComponentProps<typeof RadioGroupPrimitive.Item>, \"children\"> {\n  /** Text beside the control. Makes the option self-naming. */\n  label?: React.ReactNode | undefined;\n  children?: React.ReactNode;\n  className?: string | undefined;\n}\n\n/**\n * One option. Takes `label` (or children) and wires itself to the surrounding\n * `RadioGroup` through Radix's own context, so `name` and selection cannot\n * disagree.\n */\nexport const Radio = React.forwardRef<HTMLButtonElement, RadioProps>(function Radio(\n  { className, label, children, value, disabled, ...props },\n  ref,\n) {\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      value={value}\n      disabled={disabled}\n      data-tea-touch\n      className={cn(\n        \"group inline-flex items-center gap-2 text-ui\",\n        \"rounded-none\",\n        \"data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50\",\n        className,\n      )}\n      {...dataSlot(\"radio\")}\n      {...props}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          // `rounded-pill` is a documented exception: a radio control is a\n          // marker, and a square one reads as a checkbox.\n          \"flex size-4 shrink-0 items-center justify-center rounded-pill border border-line-strong bg-surface\",\n          \"transition-[background-color,border-color,box-shadow] duration-[120ms] ease-standard\",\n          \"group-data-[state=checked]:border-primary group-data-[state=checked]:bg-primary\",\n          \"group-focus-visible:ring-2 group-focus-visible:ring-ring\",\n        )}\n      >\n        <span\n          className={cn(\n            \"size-2 rounded-pill bg-primary-fg\",\n            // The dot *is* the state, in shape as well as colour.\n            \"scale-0 transition-transform duration-[120ms] ease-standard\",\n            \"group-data-[state=checked]:scale-100\",\n          )}\n        />\n      </span>\n      <span className=\"text-fg group-data-[state=checked]:font-medium\">{label ?? children}</span>\n    </RadioGroupPrimitive.Item>\n  );\n});\n"],"mappings":"AAiFI,cAyCA,YAzCA;AAjFH,YAAY,WAAW;AACxB,SAAS,cAAc,2BAA2B;AAClD,SAAS,UAAU;AAEnB,SAAS,UAAU,uBAAuB;AAC1C,SAAS,4BAA4B;AAwD9B,MAAM,aAAa,MAAM,WAA4C,SAASA,YACnF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,QAAQ,qBAAqB;AACnC,QAAM,aAAa,MAAM,YAAY,YAAY;AACjD,QAAM,aAAa,MAAM,eAAe,KAAK,YAAY;AAEzD,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC;AAAA,MACC,GAAG,SAAS,aAAa;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,cAAY;AAAA,MACZ,oBAAkB,MAAM,kBAAkB;AAAA,MAC1C,gBAAc,MAAM,cAAc;AAAA,MAClC,iBAAe,cAAc;AAAA,MAC7B,oBAAkB;AAAA,MAClB,WAAW,GAAG,sBAAsB,gBAAgB,aAAa,aAAa,YAAY,SAAS;AAAA,MAClG,GAAG,gBAAgB,EAAE,UAAU,YAAY,YAAY,CAAC;AAAA,MACxD,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAeM,MAAM,QAAQ,MAAM,WAA0C,SAASC,OAC5E,EAAE,WAAW,OAAO,UAAU,OAAO,UAAU,GAAG,MAAM,GACxD,KACA;AACA,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG,SAAS,OAAO;AAAA,MACnB,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW;AAAA;AAAA;AAAA,cAGT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA;AAAA,kBAEA;AAAA,kBACA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,UAAK,WAAU,kDAAkD,mBAAS,UAAS;AAAA;AAAA;AAAA,EACtF;AAEJ,CAAC;","names":["RadioGroup","Radio"]}

package/dist/inputs/search-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 — SearchInput.
+ *
+ * An input, a decorative search icon and a clear button, already wired
+ * together. The audit found three of these hand-typed, each with its own
+ * opinion about the icon's size and position, and not one clear button with a
+ * name.
+ *
+ * What this component decides once, for everybody:
+ *
+ *  - **The icon is decorative.** A magnifier is not a name. It is
+ *    `aria-hidden`, and the accessible name comes from `label` — required, for
+ *    the same reason it is on `IconButton`.
+ *  - **The clear button has a name, and it only exists when there is something
+ *    to clear.** A permanently present, permanently disabled clear button is a
+ *    target a user aims at twice.
+ *  - **Enter submits; Escape is left alone.** Escape is the browser's "revert
+ *    this field" gesture, and taking it over to close a search box strands the
+ *    user mid-query with a field that looks empty and is not.
+ */
+interface SearchInputProps extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "type" | "size" | "onSubmit"> {
+    /** The accessible name. **Required** — the icon is not a label. */
+    label: string;
+    /** Controlled query. */
+    value?: string | undefined;
+    /** Uncontrolled initial query. */
+    defaultValue?: string | undefined;
+    /** Called on every keystroke, in both controlled and uncontrolled mode. */
+    onValueChange?: ((value: string) => void) | undefined;
+    /** Called when the user presses Enter with a non-empty query. */
+    onSubmit?: ((value: string) => void) | undefined;
+    /**
+     * A search is running. Swaps the icon for a spinner and sets `aria-busy`; it
+     * deliberately does **not** disable the field, because a user who is still
+     * typing the query must be able to finish typing it.
+     */
+    loading?: boolean | undefined;
+    /** Offer a clear button. On by default. */
+    clearable?: boolean | undefined;
+    /** Name for the clear button. Defaults to `COPY.actions.reset`. */
+    clearLabel?: string | undefined;
+    /** The control height. */
+    size?: InputProps["size"];
+    className?: string | undefined;
+}
+/**
+ * @example
+ * ```tsx
+ * <SearchInput
+ *   label="Server durchsuchen"
+ *   placeholder="Name, IP oder Hostname"
+ *   value={query}
+ *   onValueChange={setQuery}
+ *   onSubmit={run}
+ *   loading={isSearching}
+ * />
+ * ```
+ */
+declare const SearchInput: React.ForwardRefExoticComponent<Omit<SearchInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+export { SearchInput, type SearchInputProps };

package/dist/inputs/search-input.js

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Search, X } from "@tea-ui/icons";
+import { cn } from "@tea-ui/utils";
+import { COPY } from "@tea-ui/ux-standards";
+import { dataSlot, useControllableState, withPrivateRef } from "../internal/index.js";
+import { Spinner } from "../feedback/spinner.js";
+import { IconButton } from "./icon-button.js";
+import { Input } from "./input.js";
+import { InputGroup, InputGroupEnd, InputGroupStart } from "./input-group.js";
+const SearchInput = React.forwardRef(
+  function SearchInput2({
+    label,
+    value,
+    defaultValue = "",
+    onValueChange,
+    onSubmit,
+    loading = false,
+    clearable = true,
+    clearLabel,
+    size,
+    disabled,
+    readOnly,
+    className,
+    ...props
+  }, ref) {
+    const [query, setQuery] = useControllableState({
+      value,
+      defaultValue,
+      onChange: onValueChange,
+      name: "SearchInput"
+    });
+    const inputRef = React.useRef(null);
+    const canClear = clearable && query.length > 0 && !loading && !disabled && !readOnly;
+    return /* @__PURE__ */ jsxs(InputGroup, { label, className: cn(className), ...dataSlot("search-input"), children: [
+      /* @__PURE__ */ jsx(InputGroupStart, { children: loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", label: COPY.states.loading, className: "-ms-1" }) : /* @__PURE__ */ jsx(Search, { "aria-hidden": "true", className: "size-4" }) }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: withPrivateRef(ref, void 0, inputRef),
+          type: "search",
+          size,
+          "aria-label": label,
+          "aria-busy": loading || void 0,
+          value: query,
+          onChange: (event) => setQuery(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter" && query.length > 0) {
+              event.preventDefault();
+              onSubmit?.(query);
+            }
+          },
+          disabled,
+          readOnly,
+          ...props
+        }
+      ),
+      canClear ? /* @__PURE__ */ jsx(InputGroupEnd, { children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: clearLabel ?? COPY.actions.reset,
+          size: "sm",
+          onClick: () => {
+            setQuery("");
+            inputRef.current?.focus();
+          },
+          children: /* @__PURE__ */ jsx(X, {})
+        }
+      ) }) : null
+    ] });
+  }
+);
+export {
+  SearchInput
+};
+//# sourceMappingURL=search-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/search-input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Search, X } from \"@tea-ui/icons\";\nimport { cn } from \"@tea-ui/utils\";\nimport { COPY } from \"@tea-ui/ux-standards\";\n\nimport { dataSlot, useControllableState, withPrivateRef } from \"../internal\";\nimport { Spinner } from \"../feedback/spinner\";\nimport { IconButton } from \"./icon-button\";\nimport { Input, type InputProps } from \"./input\";\nimport { InputGroup, InputGroupEnd, InputGroupStart } from \"./input-group\";\n\n/**\n * TEA UI — SearchInput.\n *\n * An input, a decorative search icon and a clear button, already wired\n * together. The audit found three of these hand-typed, each with its own\n * opinion about the icon's size and position, and not one clear button with a\n * name.\n *\n * What this component decides once, for everybody:\n *\n *  - **The icon is decorative.** A magnifier is not a name. It is\n *    `aria-hidden`, and the accessible name comes from `label` — required, for\n *    the same reason it is on `IconButton`.\n *  - **The clear button has a name, and it only exists when there is something\n *    to clear.** A permanently present, permanently disabled clear button is a\n *    target a user aims at twice.\n *  - **Enter submits; Escape is left alone.** Escape is the browser's \"revert\n *    this field\" gesture, and taking it over to close a search box strands the\n *    user mid-query with a field that looks empty and is not.\n */\nexport interface SearchInputProps\n  extends Omit<InputProps, \"value\" | \"defaultValue\" | \"onChange\" | \"type\" | \"size\" | \"onSubmit\"> {\n  /** The accessible name. **Required** — the icon is not a label. */\n  label: string;\n  /** Controlled query. */\n  value?: string | undefined;\n  /** Uncontrolled initial query. */\n  defaultValue?: string | undefined;\n  /** Called on every keystroke, in both controlled and uncontrolled mode. */\n  onValueChange?: ((value: string) => void) | undefined;\n  /** Called when the user presses Enter with a non-empty query. */\n  onSubmit?: ((value: string) => void) | undefined;\n  /**\n   * A search is running. Swaps the icon for a spinner and sets `aria-busy`; it\n   * deliberately does **not** disable the field, because a user who is still\n   * typing the query must be able to finish typing it.\n   */\n  loading?: boolean | undefined;\n  /** Offer a clear button. On by default. */\n  clearable?: boolean | undefined;\n  /** Name for the clear button. Defaults to `COPY.actions.reset`. */\n  clearLabel?: string | undefined;\n  /** The control height. */\n  size?: InputProps[\"size\"];\n  className?: string | undefined;\n}\n\n/**\n * @example\n * ```tsx\n * <SearchInput\n *   label=\"Server durchsuchen\"\n *   placeholder=\"Name, IP oder Hostname\"\n *   value={query}\n *   onValueChange={setQuery}\n *   onSubmit={run}\n *   loading={isSearching}\n * />\n * ```\n */\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      label,\n      value,\n      defaultValue = \"\",\n      onValueChange,\n      onSubmit,\n      loading = false,\n      clearable = true,\n      clearLabel,\n      size,\n      disabled,\n      readOnly,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const [query, setQuery] = useControllableState({\n      value,\n      defaultValue,\n      onChange: onValueChange,\n      name: \"SearchInput\",\n    });\n\n    const inputRef = React.useRef<HTMLInputElement | null>(null);\n    const canClear = clearable && query.length > 0 && !loading && !disabled && !readOnly;\n\n    return (\n      <InputGroup label={label} className={cn(className)} {...dataSlot(\"search-input\")}>\n        <InputGroupStart>\n          {loading ? (\n            <Spinner size=\"sm\" label={COPY.states.loading} className=\"-ms-1\" />\n          ) : (\n            <Search aria-hidden=\"true\" className=\"size-4\" />\n          )}\n        </InputGroupStart>\n        {/* `type=\"search\"` already carries the implicit `searchbox` role and the\n            native clear affordance; the role is not restated. */}\n        <Input\n          ref={withPrivateRef(ref, undefined, inputRef)}\n          type=\"search\"\n          size={size}\n          aria-label={label}\n          aria-busy={loading || undefined}\n          value={query}\n          onChange={(event) => setQuery(event.target.value)}\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\" && query.length > 0) {\n              // The query belongs to the consumer, not to a form, so Enter must\n              // not also submit an enclosing `<form>` by accident.\n              event.preventDefault();\n              onSubmit?.(query);\n            }\n          }}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...props}\n        />\n        {canClear ? (\n          <InputGroupEnd>\n            <IconButton\n              label={clearLabel ?? COPY.actions.reset}\n              size=\"sm\"\n              onClick={() => {\n                setQuery(\"\");\n                // Focus goes back to the field, because the button that held it\n                // is about to disappear. Focus falling to `<body>` sends a\n                // keyboard user back to the top of the document.\n                inputRef.current?.focus();\n              }}\n            >\n              <X />\n            </IconButton>\n          </InputGroupEnd>\n        ) : null}\n      </InputGroup>\n    );\n  },\n);\n"],"mappings":"AAqGM,SAGM,KAHN;AArGL,YAAY,WAAW;AACxB,SAAS,QAAQ,SAAS;AAC1B,SAAS,UAAU;AACnB,SAAS,YAAY;AAErB,SAAS,UAAU,sBAAsB,sBAAsB;AAC/D,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,aAA8B;AACvC,SAAS,YAAY,eAAe,uBAAuB;AA8DpD,MAAM,cAAc,MAAM;AAAA,EAC/B,SAASA,aACP;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,UAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,MAAM;AAAA,IACR,CAAC;AAED,UAAM,WAAW,MAAM,OAAgC,IAAI;AAC3D,UAAM,WAAW,aAAa,MAAM,SAAS,KAAK,CAAC,WAAW,CAAC,YAAY,CAAC;AAE5E,WACE,qBAAC,cAAW,OAAc,WAAW,GAAG,SAAS,GAAI,GAAG,SAAS,cAAc,GAC7E;AAAA,0BAAC,mBACE,oBACC,oBAAC,WAAQ,MAAK,MAAK,OAAO,KAAK,OAAO,SAAS,WAAU,SAAQ,IAEjE,oBAAC,UAAO,eAAY,QAAO,WAAU,UAAS,GAElD;AAAA,MAGA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,eAAe,KAAK,QAAW,QAAQ;AAAA,UAC5C,MAAK;AAAA,UACL;AAAA,UACA,cAAY;AAAA,UACZ,aAAW,WAAW;AAAA,UACtB,OAAO;AAAA,UACP,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,UAChD,WAAW,CAAC,UAAU;AACpB,gBAAI,MAAM,QAAQ,WAAW,MAAM,SAAS,GAAG;AAG7C,oBAAM,eAAe;AACrB,yBAAW,KAAK;AAAA,YAClB;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,MACC,WACC,oBAAC,iBACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,cAAc,KAAK,QAAQ;AAAA,UAClC,MAAK;AAAA,UACL,SAAS,MAAM;AACb,qBAAS,EAAE;AAIX,qBAAS,SAAS,MAAM;AAAA,UAC1B;AAAA,UAEA,8BAAC,KAAE;AAAA;AAAA,MACL,GACF,IACE;AAAA,OACN;AAAA,EAEJ;AACF;","names":["SearchInput"]}

package/dist/inputs/select.d.ts

@@ -0,0 +1,65 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { Select as Select$1 } from 'radix-ui';
+import { VariantProps } from '@tea-ui/utils';
+
+/**
+ * TEA UI — Select.
+ *
+ * A native `<select>` is correct whenever the option list is short and known,
+ * and this component is the answer when it is not: searchable, grouped,
+ * scrollable, or too long to trust to a native listbox on mobile. The audit
+ * found three hand-typed native `<select>`s in one product — none of which had
+ * an accessible name — sitting next to a fully built Radix Select that nobody
+ * used.
+ *
+ * Two audit defects are fixed here rather than carried forward:
+ *  - The available-height constraint. The source project's version was
+ *    `max-h-[--radix-select-content-available-height]`, which is not a valid
+ *    arbitrary value and silently resolved to nothing, so a long list escaped
+ *    the viewport. It is `max-h-[var(--radix-select-content-available-height)]`
+ *    here.
+ *  - The trigger height. Both source projects hardcoded a fixed height, so a
+ *    compact table could not contain a compact select. It reads
+ *    `--tea-control-h` here.
+ */
+declare const selectTriggerVariants: (props?: ({
+    variant?: "outline" | "ghost" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SelectProps extends Omit<React.ComponentProps<typeof Select$1.Root>, "children"> {
+    children: React.ReactNode;
+    /** The controlled value. */
+    value?: string | undefined;
+    /** The uncontrolled initial value. */
+    defaultValue?: string | undefined;
+    /** Called with the new value. */
+    onValueChange?: ((value: string) => void) | undefined;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectGroup: React.ForwardRefExoticComponent<Select$1.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<Select$1.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Select$1.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectTriggerProps extends Omit<React.ComponentProps<typeof Select$1.Trigger>, "className">, VariantProps<typeof selectTriggerVariants> {
+    className?: string | undefined;
+}
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+interface SelectContentProps extends React.ComponentProps<typeof Select$1.Content> {
+    className?: string | undefined;
+    /** Where the list is placed relative to the trigger. */
+    position?: React.ComponentProps<typeof Select$1.Content>["position"];
+}
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface SelectItemProps extends React.ComponentProps<typeof Select$1.Item> {
+    className?: string | undefined;
+    /**
+     * A short explanation shown under the label in the list. It is not truncated
+     * away and it is not a tooltip — this is the place a confusing option
+     * explains itself.
+     */
+    description?: string | undefined;
+}
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<Select$1.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<Select$1.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, selectTriggerVariants };

package/dist/inputs/select.js

@@ -0,0 +1,139 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+import { Check, ChevronDown, ChevronUp } from "@tea-ui/icons";
+import { cn, cva } from "@tea-ui/utils";
+import { dataSlot, stateAttributes } from "../internal/index.js";
+import { useFieldControlProps } from "./field.js";
+const selectTriggerVariants = cva(
+  [
+    "control-h inline-flex w-full items-center justify-between gap-2 border px-[length:var(--tea-control-px)]",
+    "bg-surface text-ui text-fg transition-colors duration-fast ease-standard",
+    "data-[placeholder]:text-fg-muted",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "aria-invalid:border-critical aria-invalid:bg-critical-subtle"
+  ],
+  {
+    variants: {
+      variant: {
+        outline: "border-line data-[hover]:border-line-strong",
+        ghost: "border-transparent bg-transparent data-[hover]:bg-surface-3"
+      }
+    },
+    defaultVariants: { variant: "outline" }
+  }
+);
+const SelectRootPrimitive = SelectPrimitive.Root;
+const Select = React.forwardRef(function Select2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(SelectRootPrimitive, { ref, ...props, ...dataSlot("select", "root"), children });
+});
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectSeparator = SelectPrimitive.Separator;
+const SelectTrigger = React.forwardRef(
+  function SelectTrigger2({ className, variant, children, disabled, ...props }, ref) {
+    const field = useFieldControlProps();
+    return /* @__PURE__ */ jsxs(
+      SelectPrimitive.Trigger,
+      {
+        ref,
+        disabled: field.disabled ?? disabled,
+        "aria-invalid": field["aria-invalid"] || void 0,
+        "aria-required": field["aria-required"] || void 0,
+        className: cn(selectTriggerVariants({ variant }), className),
+        "data-tea-touch": true,
+        ...dataSlot("select", "trigger"),
+        ...stateAttributes({ disabled: field.disabled ?? disabled }),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { size: 16, "aria-hidden": "true", className: "shrink-0 text-fg-muted" }) })
+        ]
+      }
+    );
+  }
+);
+const SelectContent = React.forwardRef(
+  function SelectContent2({ className, children, position = "popper", ...props }, ref) {
+    return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+      SelectPrimitive.Content,
+      {
+        ref,
+        position,
+        className: cn(
+          "z-popover max-h-[var(--radix-select-content-available-height)] min-w-[var(--radix-select-trigger-width)]",
+          "border border-line bg-surface-2 shadow-overlay",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className
+        ),
+        ...dataSlot("select", "content"),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+          /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "p-1", children }),
+          /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+        ]
+      }
+    ) });
+  }
+);
+const SelectItem = React.forwardRef(
+  function SelectItem2({ className, children, description, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      SelectPrimitive.Item,
+      {
+        ref,
+        className: cn(
+          "relative flex cursor-default select-none flex-col gap-0.5 py-2 pe-8 ps-3 text-ui text-fg outline-none",
+          "data-[highlighted]:bg-accent-subtle data-[highlighted]:text-fg",
+          "data-[state=checked]:text-primary",
+          "data-disabled:pointer-events-none data-disabled:opacity-50",
+          className
+        ),
+        ...dataSlot("select", "item"),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
+          description ? /* @__PURE__ */ jsx("span", { className: "text-micro text-fg-muted", children: description }) : null,
+          /* @__PURE__ */ jsx("span", { className: "absolute end-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 14, "aria-hidden": "true" }) }) })
+        ]
+      }
+    );
+  }
+);
+const SelectScrollUpButton = React.forwardRef(function SelectScrollUpButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollUpButton,
+    {
+      ref,
+      className: cn("flex cursor-default items-center justify-center py-1 text-fg-muted", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUp, { size: 14, "aria-hidden": "true" })
+    }
+  );
+});
+const SelectScrollDownButton = React.forwardRef(function SelectScrollDownButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollDownButton,
+    {
+      ref,
+      className: cn("flex cursor-default items-center justify-center py-1 text-fg-muted", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDown, { size: 14, "aria-hidden": "true" })
+    }
+  );
+});
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  selectTriggerVariants
+};
+//# sourceMappingURL=select.js.map

package/dist/inputs/select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/select.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Select as SelectPrimitive } from \"radix-ui\";\nimport { Check, ChevronDown, ChevronUp } from \"@tea-ui/icons\";\nimport { cn, cva, type VariantProps } from \"@tea-ui/utils\";\n\nimport { dataSlot, stateAttributes } from \"../internal\";\nimport { useFieldControlProps } from \"./field\";\n\n/**\n * TEA UI — Select.\n *\n * A native `<select>` is correct whenever the option list is short and known,\n * and this component is the answer when it is not: searchable, grouped,\n * scrollable, or too long to trust to a native listbox on mobile. The audit\n * found three hand-typed native `<select>`s in one product — none of which had\n * an accessible name — sitting next to a fully built Radix Select that nobody\n * used.\n *\n * Two audit defects are fixed here rather than carried forward:\n *  - The available-height constraint. The source project's version was\n *    `max-h-[--radix-select-content-available-height]`, which is not a valid\n *    arbitrary value and silently resolved to nothing, so a long list escaped\n *    the viewport. It is `max-h-[var(--radix-select-content-available-height)]`\n *    here.\n *  - The trigger height. Both source projects hardcoded a fixed height, so a\n *    compact table could not contain a compact select. It reads\n *    `--tea-control-h` here.\n */\nexport const selectTriggerVariants = cva(\n  [\n    \"control-h inline-flex w-full items-center justify-between gap-2 border px-[length:var(--tea-control-px)]\",\n    \"bg-surface text-ui text-fg transition-colors duration-fast ease-standard\",\n    \"data-[placeholder]:text-fg-muted\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n    \"aria-invalid:border-critical aria-invalid:bg-critical-subtle\",\n  ],\n  {\n    variants: {\n      variant: {\n        outline: \"border-line data-[hover]:border-line-strong\",\n        ghost: \"border-transparent bg-transparent data-[hover]:bg-surface-3\",\n      },\n    },\n    defaultVariants: { variant: \"outline\" },\n  },\n);\n\nexport interface SelectProps\n  extends Omit<React.ComponentProps<typeof SelectPrimitive.Root>, \"children\"> {\n  children: React.ReactNode;\n  /** The controlled value. */\n  value?: string | undefined;\n  /** The uncontrolled initial value. */\n  defaultValue?: string | undefined;\n  /** Called with the new value. */\n  onValueChange?: ((value: string) => void) | undefined;\n}\n\n/**\n * Radix discriminates the Select root's props on `multiple`, which makes a\n * forwardable optional-value signature unrepresentable in its own types. The\n * cast is done once, here, rather than at every call site.\n */\nconst SelectRootPrimitive = SelectPrimitive.Root as unknown as React.ComponentType<\n  React.ComponentProps<\"span\"> & Record<string, unknown>\n>;\n\nexport const Select = React.forwardRef<HTMLSpanElement, SelectProps>(function Select(\n  { children, ...props },\n  ref,\n) {\n  return (\n    <SelectRootPrimitive ref={ref} {...props} {...dataSlot(\"select\", \"root\")}>\n      {children}\n    </SelectRootPrimitive>\n  );\n});\n\nexport const SelectGroup = SelectPrimitive.Group;\nexport const SelectValue = SelectPrimitive.Value;\nexport const SelectSeparator = SelectPrimitive.Separator;\n\nexport interface SelectTriggerProps\n  extends Omit<React.ComponentProps<typeof SelectPrimitive.Trigger>, \"className\">,\n    VariantProps<typeof selectTriggerVariants> {\n  className?: string | undefined;\n}\n\nexport const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  function SelectTrigger({ className, variant, children, disabled, ...props }, ref) {\n    const field = useFieldControlProps();\n    return (\n      <SelectPrimitive.Trigger\n        ref={ref}\n        disabled={field.disabled ?? disabled}\n        aria-invalid={field[\"aria-invalid\"] || undefined}\n        aria-required={field[\"aria-required\"] || undefined}\n        className={cn(selectTriggerVariants({ variant }), className)}\n        data-tea-touch\n        {...dataSlot(\"select\", \"trigger\")}\n        {...stateAttributes({ disabled: field.disabled ?? disabled })}\n        {...props}\n      >\n        {children}\n        <SelectPrimitive.Icon asChild>\n          <ChevronDown size={16} aria-hidden=\"true\" className=\"shrink-0 text-fg-muted\" />\n        </SelectPrimitive.Icon>\n      </SelectPrimitive.Trigger>\n    );\n  },\n);\n\nexport interface SelectContentProps extends React.ComponentProps<typeof SelectPrimitive.Content> {\n  className?: string | undefined;\n  /** Where the list is placed relative to the trigger. */\n  position?: React.ComponentProps<typeof SelectPrimitive.Content>[\"position\"];\n}\n\nexport const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(\n  function SelectContent({ className, children, position = \"popper\", ...props }, ref) {\n    return (\n      <SelectPrimitive.Portal>\n        <SelectPrimitive.Content\n          ref={ref}\n          position={position}\n          className={cn(\n            \"z-popover max-h-[var(--radix-select-content-available-height)] min-w-[var(--radix-select-trigger-width)]\",\n            \"border border-line bg-surface-2 shadow-overlay\",\n            \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n            \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n            className,\n          )}\n          {...dataSlot(\"select\", \"content\")}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.Viewport className=\"p-1\">{children}</SelectPrimitive.Viewport>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Content>\n      </SelectPrimitive.Portal>\n    );\n  },\n);\n\nexport interface SelectItemProps extends React.ComponentProps<typeof SelectPrimitive.Item> {\n  className?: string | undefined;\n  /**\n   * A short explanation shown under the label in the list. It is not truncated\n   * away and it is not a tooltip — this is the place a confusing option\n   * explains itself.\n   */\n  description?: string | undefined;\n}\n\nexport const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(\n  function SelectItem({ className, children, description, ...props }, ref) {\n    return (\n      <SelectPrimitive.Item\n        ref={ref}\n        className={cn(\n          \"relative flex cursor-default select-none flex-col gap-0.5 py-2 pe-8 ps-3 text-ui text-fg outline-none\",\n          \"data-[highlighted]:bg-accent-subtle data-[highlighted]:text-fg\",\n          \"data-[state=checked]:text-primary\",\n          \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n          className,\n        )}\n        {...dataSlot(\"select\", \"item\")}\n        {...props}\n      >\n        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n        {description ? (\n          <span className=\"text-micro text-fg-muted\">{description}</span>\n        ) : null}\n        <span className=\"absolute end-2 flex size-4 items-center justify-center\">\n          <SelectPrimitive.ItemIndicator>\n            <Check size={14} aria-hidden=\"true\" />\n          </SelectPrimitive.ItemIndicator>\n        </span>\n      </SelectPrimitive.Item>\n    );\n  },\n);\n\nexport const SelectScrollUpButton = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>\n>(function SelectScrollUpButton({ className, ...props }, ref) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      ref={ref}\n      className={cn(\"flex cursor-default items-center justify-center py-1 text-fg-muted\", className)}\n      {...props}\n    >\n      <ChevronUp size={14} aria-hidden=\"true\" />\n    </SelectPrimitive.ScrollUpButton>\n  );\n});\n\nexport const SelectScrollDownButton = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>\n>(function SelectScrollDownButton({ className, ...props }, ref) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      ref={ref}\n      className={cn(\"flex cursor-default items-center justify-center py-1 text-fg-muted\", className)}\n      {...props}\n    >\n      <ChevronDown size={14} aria-hidden=\"true\" />\n    </SelectPrimitive.ScrollDownButton>\n  );\n});\n"],"mappings":"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","names":["Select","SelectTrigger","SelectContent","SelectItem","SelectScrollUpButton","SelectScrollDownButton"]}

package/dist/inputs/slider.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Slider as Slider$1 } from 'radix-ui';
+
+/**
+ * TEA UI — Slider.
+ *
+ * A slider, and the only TEA UI control with no sensible default value: a
+ * slider with no name is a `<div>` a screen reader announces as "slider", and
+ * a voice-control user cannot say which one they mean. `label` is required.
+ *
+ * Three things it gets right that a hand-rolled range never does:
+ *
+ *  - **A real value text.** `aria-valuetext` is what a screen reader reads
+ *    instead of the raw number, so a percentage slider says "40 Prozent" and a
+ *    temperature slider says "18 Grad". `formatValue` is how you say it.
+ *  - **One tab stop, with arrows and Home/End.** Radix owns the roving focus;
+ *    the value is only reachable because the thumb is focusable.
+ *  - **The filled track is the value.** A range is readable with no colour
+ *    perception, and it is readable *by shape* — a line with a filled part and an
+ *    empty part, not two colours on one line.
+ */
+interface SliderProps extends Omit<React.ComponentProps<typeof Slider$1.Root>, "value" | "defaultValue" | "onValueChange" | "orientation" | "dir"> {
+    /**
+     * The accessible name. **Required** — there is no default, because a slider
+     * whose name is guessed is a slider nobody can identify.
+     */
+    label: string;
+    /** Controlled value. An array, because a range has two thumbs. */
+    value?: number[] | undefined;
+    /** Uncontrolled initial value. */
+    defaultValue?: number[] | undefined;
+    /** Called with the whole value array on every change. */
+    onValueChange?: ((value: number[]) => void) | undefined;
+    /** Lowest selectable value. */
+    min?: number | undefined;
+    /** Highest selectable value. */
+    max?: number | undefined;
+    /** Granularity. Left to Radix (1) when omitted. */
+    step?: number | undefined;
+    /** Which way the track runs. Decides the arrow keys and the fill direction. */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Turn a number into the words a screen reader should hear, and into the
+     * visible readout. Defaults to the bare number.
+     */
+    formatValue?: ((value: number) => string) | undefined;
+    /** Show the formatted value next to the label. Off by default. */
+    showValue?: boolean | undefined;
+    className?: string | undefined;
+}
+/**
+ * @example
+ * ```tsx
+ * <Field>
+ *   <FieldLabel>Speicherplatz</FieldLabel>
+ *   <Slider
+ *     label="Speicherplatz in Prozent"
+ *     defaultValue={[40]}
+ *     showValue
+ *     formatValue={(v) => `${v} Prozent`}
+ *   />
+ * </Field>
+ * ```
+ */
+declare const Slider: React.ForwardRefExoticComponent<Omit<SliderProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+export { Slider, type SliderProps };