@tea-ui/core 0.1.0

package/dist/inputs/slider.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+import { cn } from "@tea-ui/utils";
+import { dataSlot, stateAttributes, useControllableState } from "../internal/index.js";
+import { useFieldControlProps } from "./field.js";
+const Slider = React.forwardRef(function Slider2({
+  className,
+  label,
+  value,
+  defaultValue = [0],
+  onValueChange,
+  min = 0,
+  max = 100,
+  step,
+  orientation = "horizontal",
+  formatValue,
+  showValue = false,
+  disabled,
+  ...props
+}, ref) {
+  const field = useFieldControlProps();
+  const isDisabled = field.disabled ?? disabled ?? false;
+  const [values, setValues] = useControllableState({
+    value,
+    defaultValue,
+    onChange: onValueChange,
+    name: "Slider"
+  });
+  const format = React.useCallback(
+    (next) => formatValue ? formatValue(next) : String(next),
+    [formatValue]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col gap-1", className), ...dataSlot("slider"), children: [
+    showValue ? (
+      // `aria-hidden`: the value is already on the thumb as `aria-valuetext`,
+      // and a second copy is a second announcement.
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-micro tabular-nums text-fg-muted", children: format(values[0] ?? min) })
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      SliderPrimitive.Root,
+      {
+        ref,
+        value: values,
+        onValueChange: setValues,
+        min,
+        max,
+        step,
+        orientation,
+        disabled: isDisabled,
+        "aria-label": label,
+        "aria-labelledby": props["aria-labelledby"],
+        "aria-describedby": field["aria-describedby"] ?? props["aria-describedby"],
+        "data-orientation": orientation,
+        "data-tea-touch": true,
+        className: cn(
+          "relative flex touch-none select-none items-center",
+          "data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-full",
+          "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-4",
+          "data-[disabled]:opacity-50"
+        ),
+        ...stateAttributes({ disabled: isDisabled, orientation }),
+        ...dataSlot("slider-root"),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            SliderPrimitive.Track,
+            {
+              className: cn(
+                "relative grow overflow-hidden rounded-none bg-surface-3",
+                "data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full",
+                "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1"
+              ),
+              ...dataSlot("slider-track"),
+              children: /* @__PURE__ */ jsx(
+                SliderPrimitive.Range,
+                {
+                  className: cn("absolute bg-primary", "data-[orientation=horizontal]:h-full"),
+                  ...dataSlot("slider-range")
+                }
+              )
+            }
+          ),
+          values.map((_, index) => /* @__PURE__ */ jsx(
+            SliderPrimitive.Thumb,
+            {
+              "aria-label": values.length > 1 ? `${label} ${index + 1}` : void 0,
+              className: cn(
+                // Pill is a documented exception: a slider thumb is a control
+                // marker, and a square one is invisible against the track.
+                "block rounded-pill border border-primary bg-primary",
+                "outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "disabled:cursor-not-allowed"
+              ),
+              ...dataSlot("slider-thumb")
+            },
+            index
+          ))
+        ]
+      }
+    )
+  ] });
+});
+export {
+  Slider
+};
+//# sourceMappingURL=slider.js.map

package/dist/inputs/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/slider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slider as SliderPrimitive } from \"radix-ui\";\nimport { cn } from \"@tea-ui/utils\";\n\nimport { dataSlot, stateAttributes, useControllableState } from \"../internal\";\nimport { useFieldControlProps } from \"./field\";\n\n/**\n * TEA UI — Slider.\n *\n * A slider, and the only TEA UI control with no sensible default value: a\n * slider with no name is a `<div>` a screen reader announces as \"slider\", and\n * a voice-control user cannot say which one they mean. `label` is required.\n *\n * Three things it gets right that a hand-rolled range never does:\n *\n *  - **A real value text.** `aria-valuetext` is what a screen reader reads\n *    instead of the raw number, so a percentage slider says \"40 Prozent\" and a\n *    temperature slider says \"18 Grad\". `formatValue` is how you say it.\n *  - **One tab stop, with arrows and Home/End.** Radix owns the roving focus;\n *    the value is only reachable because the thumb is focusable.\n *  - **The filled track is the value.** A range is readable with no colour\n *    perception, and it is readable *by shape* — a line with a filled part and an\n *    empty part, not two colours on one line.\n */\nexport interface SliderProps\n  extends Omit<\n    React.ComponentProps<typeof SliderPrimitive.Root>,\n    \"value\" | \"defaultValue\" | \"onValueChange\" | \"orientation\" | \"dir\"\n  > {\n  /**\n   * The accessible name. **Required** — there is no default, because a slider\n   * whose name is guessed is a slider nobody can identify.\n   */\n  label: string;\n  /** Controlled value. An array, because a range has two thumbs. */\n  value?: number[] | undefined;\n  /** Uncontrolled initial value. */\n  defaultValue?: number[] | undefined;\n  /** Called with the whole value array on every change. */\n  onValueChange?: ((value: number[]) => void) | undefined;\n  /** Lowest selectable value. */\n  min?: number | undefined;\n  /** Highest selectable value. */\n  max?: number | undefined;\n  /** Granularity. Left to Radix (1) when omitted. */\n  step?: number | undefined;\n  /** Which way the track runs. Decides the arrow keys and the fill direction. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Turn a number into the words a screen reader should hear, and into the\n   * visible readout. Defaults to the bare number.\n   */\n  formatValue?: ((value: number) => string) | undefined;\n  /** Show the formatted value next to the label. Off by default. */\n  showValue?: boolean | undefined;\n  className?: string | undefined;\n}\n\n/**\n * @example\n * ```tsx\n * <Field>\n *   <FieldLabel>Speicherplatz</FieldLabel>\n *   <Slider\n *     label=\"Speicherplatz in Prozent\"\n *     defaultValue={[40]}\n *     showValue\n *     formatValue={(v) => `${v} Prozent`}\n *   />\n * </Field>\n * ```\n */\nexport const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(function Slider(\n  {\n    className,\n    label,\n    value,\n    defaultValue = [0],\n    onValueChange,\n    min = 0,\n    max = 100,\n    step,\n    orientation = \"horizontal\",\n    formatValue,\n    showValue = false,\n    disabled,\n    ...props\n  },\n  ref,\n) {\n  const field = useFieldControlProps();\n  const isDisabled = field.disabled ?? disabled ?? false;\n\n  const [values, setValues] = useControllableState({\n    value,\n    defaultValue,\n    onChange: onValueChange,\n    name: \"Slider\",\n  });\n\n  const format = React.useCallback(\n    (next: number) => (formatValue ? formatValue(next) : String(next)),\n    [formatValue],\n  );\n\n  return (\n    <div className={cn(\"flex min-w-0 flex-col gap-1\", className)} {...dataSlot(\"slider\")}>\n      {showValue ? (\n        // `aria-hidden`: the value is already on the thumb as `aria-valuetext`,\n        // and a second copy is a second announcement.\n        <span aria-hidden=\"true\" className=\"text-micro tabular-nums text-fg-muted\">\n          {format(values[0] ?? min)}\n        </span>\n      ) : null}\n      <SliderPrimitive.Root\n        ref={ref}\n        value={values}\n        onValueChange={setValues}\n        min={min}\n        max={max}\n        step={step}\n        orientation={orientation}\n        disabled={isDisabled}\n        aria-label={label}\n        aria-labelledby={props[\"aria-labelledby\"]}\n        aria-describedby={field[\"aria-describedby\"] ?? props[\"aria-describedby\"]}\n        data-orientation={orientation}\n        data-tea-touch\n        className={cn(\n          \"relative flex touch-none select-none items-center\",\n          \"data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-full\",\n          \"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-4\",\n          \"data-[disabled]:opacity-50\",\n        )}\n        {...stateAttributes({ disabled: isDisabled, orientation })}\n        {...dataSlot(\"slider-root\")}\n        {...props}\n      >\n        <SliderPrimitive.Track\n          className={cn(\n            \"relative grow overflow-hidden rounded-none bg-surface-3\",\n            \"data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full\",\n            \"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1\",\n          )}\n          {...dataSlot(\"slider-track\")}\n        >\n          <SliderPrimitive.Range\n            className={cn(\"absolute bg-primary\", \"data-[orientation=horizontal]:h-full\")}\n            {...dataSlot(\"slider-range\")}\n          />\n        </SliderPrimitive.Track>\n        {values.map((_, index) => (\n          <SliderPrimitive.Thumb\n            key={index}\n            aria-label={values.length > 1 ? `${label} ${index + 1}` : undefined}\n            className={cn(\n              // Pill is a documented exception: a slider thumb is a control\n              // marker, and a square one is invisible against the track.\n              \"block rounded-pill border border-primary bg-primary\",\n              \"outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              \"disabled:cursor-not-allowed\",\n            )}\n            {...dataSlot(\"slider-thumb\")}\n          />\n        ))}\n      </SliderPrimitive.Root>\n    </div>\n  );\n});\n"],"mappings":"AA+GQ,cAIF,YAJE;AA/GP,YAAY,WAAW;AACxB,SAAS,UAAU,uBAAuB;AAC1C,SAAS,UAAU;AAEnB,SAAS,UAAU,iBAAiB,4BAA4B;AAChE,SAAS,4BAA4B;AAoE9B,MAAM,SAAS,MAAM,WAAyC,SAASA,QAC5E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe,CAAC,CAAC;AAAA,EACjB;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,QAAQ,qBAAqB;AACnC,QAAM,aAAa,MAAM,YAAY,YAAY;AAEjD,QAAM,CAAC,QAAQ,SAAS,IAAI,qBAAqB;AAAA,IAC/C;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,EACR,CAAC;AAED,QAAM,SAAS,MAAM;AAAA,IACnB,CAAC,SAAkB,cAAc,YAAY,IAAI,IAAI,OAAO,IAAI;AAAA,IAChE,CAAC,WAAW;AAAA,EACd;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,+BAA+B,SAAS,GAAI,GAAG,SAAS,QAAQ,GAChF;AAAA;AAAA;AAAA;AAAA,MAGC,oBAAC,UAAK,eAAY,QAAO,WAAU,yCAChC,iBAAO,OAAO,CAAC,KAAK,GAAG,GAC1B;AAAA,QACE;AAAA,IACJ;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,cAAY;AAAA,QACZ,mBAAiB,MAAM,iBAAiB;AAAA,QACxC,oBAAkB,MAAM,kBAAkB,KAAK,MAAM,kBAAkB;AAAA,QACvE,oBAAkB;AAAA,QAClB,kBAAc;AAAA,QACd,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG,gBAAgB,EAAE,UAAU,YAAY,YAAY,CAAC;AAAA,QACxD,GAAG,SAAS,aAAa;AAAA,QACzB,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACC,GAAG,SAAS,cAAc;AAAA,cAE3B;AAAA,gBAAC,gBAAgB;AAAA,gBAAhB;AAAA,kBACC,WAAW,GAAG,uBAAuB,sCAAsC;AAAA,kBAC1E,GAAG,SAAS,cAAc;AAAA;AAAA,cAC7B;AAAA;AAAA,UACF;AAAA,UACC,OAAO,IAAI,CAAC,GAAG,UACd;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cAEC,cAAY,OAAO,SAAS,IAAI,GAAG,KAAK,IAAI,QAAQ,CAAC,KAAK;AAAA,cAC1D,WAAW;AAAA;AAAA;AAAA,gBAGT;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cACC,GAAG,SAAS,cAAc;AAAA;AAAA,YATtB;AAAA,UAUP,CACD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ,CAAC;","names":["Slider"]}

package/dist/inputs/switch.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Switch as Switch$1 } from 'radix-ui';
+
+/**
+ * TEA UI — Switch.
+ *
+ * An on/off control, for a setting that takes effect immediately. The
+ * distinction from `Checkbox` is not visual, it is semantic: a checkbox is a
+ * value submitted with a form, a switch is a setting that is already in force.
+ * Rendering one as the other teaches users the wrong expectation, so both exist.
+ *
+ * Radix's `Switch.Root` is a `<button role="switch">` with `aria-checked`, and
+ * it is labelable in exactly the same way a `<button>` is — so `FieldLabel`'s
+ * `htmlFor` gives it a name, and a standalone `label` wraps it.
+ *
+ * The state is also carried by the position of the thumb. A switch that only
+ * changed colour would be a switch nobody can read without colour vision.
+ */
+interface SwitchProps extends Omit<React.ComponentProps<typeof Switch$1.Root>, "checked" | "defaultChecked" | "children"> {
+    /** Controlled on/off state. */
+    checked?: boolean | undefined;
+    /** Uncontrolled initial state. */
+    defaultChecked?: boolean | undefined;
+    /** Called when the state changes, in both controlled and uncontrolled mode. */
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
+    /** Text beside the switch, for a control used without a `Field`. */
+    label?: React.ReactNode | undefined;
+    className?: string | undefined;
+}
+/**
+ * @example
+ * ```tsx
+ * <Field>
+ *   <FieldLabel>Wartungsmodus</FieldLabel>
+ *   <Switch defaultChecked />
+ *   <FieldDescription>Neue Aufträge werden zurückgestellt.</FieldDescription>
+ * </Field>
+ * ```
+ */
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Switch, type SwitchProps };

package/dist/inputs/switch.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import { cn } from "@tea-ui/utils";
+import { dataSlot, stateAttributes, useControllableState } from "../internal/index.js";
+import { useFieldControlProps } from "./field.js";
+const Switch = React.forwardRef(function Switch2({ className, label, checked, defaultChecked = false, onCheckedChange, disabled, required, ...props }, ref) {
+  const field = useFieldControlProps();
+  const isDisabled = field.disabled ?? disabled ?? false;
+  const isRequired = field["aria-required"] ?? required ?? false;
+  const [isChecked, setIsChecked] = useControllableState({
+    value: checked,
+    defaultValue: defaultChecked,
+    onChange: (next) => onCheckedChange?.(next),
+    name: "Switch"
+  });
+  const control = /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      ref,
+      id: field.id,
+      checked: isChecked,
+      onCheckedChange: setIsChecked,
+      disabled: isDisabled,
+      required: isRequired,
+      "aria-invalid": field["aria-invalid"],
+      "aria-describedby": field["aria-describedby"],
+      "aria-required": isRequired || void 0,
+      value: isChecked ? "on" : "off",
+      "data-tea-touch": true,
+      className: cn(
+        // `rounded-pill` is a documented exception: a switch is a control
+        // marker, and a square switch reads as a checkbox.
+        "relative inline-flex h-4 w-7 shrink-0 items-center rounded-pill border border-line-strong",
+        "bg-surface-2 p-0.5",
+        "transition-[background-color,border-color] duration-[120ms] ease-standard",
+        "outline-none",
+        "focus-visible:border-ring-strong focus-visible:ring-2 focus-visible:ring-ring",
+        "data-[state=checked]:border-primary data-[state=checked]:bg-primary",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-[invalid=true]:border-critical",
+        className
+      ),
+      ...stateAttributes({ disabled: isDisabled, invalid: field["aria-invalid"] === true, checked: isChecked }),
+      ...dataSlot("switch"),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        SwitchPrimitive.Thumb,
+        {
+          className: cn(
+            "pointer-events-none block size-3 rounded-pill bg-fg transition-transform duration-[120ms] ease-standard",
+            "data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0",
+            "data-[state=checked]:bg-primary-fg"
+          ),
+          ...dataSlot("switch-thumb")
+        }
+      )
+    }
+  );
+  if (label === void 0 || label === null || label === false) return control;
+  return /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-2 text-ui", ...dataSlot("switch-label"), children: [
+    control,
+    /* @__PURE__ */ jsx("span", { children: label })
+  ] });
+});
+export {
+  Switch
+};
+//# sourceMappingURL=switch.js.map

package/dist/inputs/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/switch.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Switch as SwitchPrimitive } from \"radix-ui\";\nimport { cn } from \"@tea-ui/utils\";\n\nimport { dataSlot, stateAttributes, useControllableState } from \"../internal\";\nimport { useFieldControlProps } from \"./field\";\n\n/**\n * TEA UI — Switch.\n *\n * An on/off control, for a setting that takes effect immediately. The\n * distinction from `Checkbox` is not visual, it is semantic: a checkbox is a\n * value submitted with a form, a switch is a setting that is already in force.\n * Rendering one as the other teaches users the wrong expectation, so both exist.\n *\n * Radix's `Switch.Root` is a `<button role=\"switch\">` with `aria-checked`, and\n * it is labelable in exactly the same way a `<button>` is — so `FieldLabel`'s\n * `htmlFor` gives it a name, and a standalone `label` wraps it.\n *\n * The state is also carried by the position of the thumb. A switch that only\n * changed colour would be a switch nobody can read without colour vision.\n */\nexport interface SwitchProps\n  extends Omit<\n    React.ComponentProps<typeof SwitchPrimitive.Root>,\n    \"checked\" | \"defaultChecked\" | \"children\"\n  > {\n  /** Controlled on/off state. */\n  checked?: boolean | undefined;\n  /** Uncontrolled initial state. */\n  defaultChecked?: boolean | undefined;\n  /** Called when the state changes, in both controlled and uncontrolled mode. */\n  onCheckedChange?: ((checked: boolean) => void) | undefined;\n  /** Text beside the switch, for a control used without a `Field`. */\n  label?: React.ReactNode | undefined;\n  className?: string | undefined;\n}\n\n/**\n * @example\n * ```tsx\n * <Field>\n *   <FieldLabel>Wartungsmodus</FieldLabel>\n *   <Switch defaultChecked />\n *   <FieldDescription>Neue Aufträge werden zurückgestellt.</FieldDescription>\n * </Field>\n * ```\n */\nexport const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(function Switch(\n  { className, label, checked, defaultChecked = false, onCheckedChange, disabled, required, ...props },\n  ref,\n) {\n  const field = useFieldControlProps();\n  const isDisabled = field.disabled ?? disabled ?? false;\n  const isRequired = field[\"aria-required\"] ?? required ?? false;\n\n  const [isChecked, setIsChecked] = useControllableState({\n    value: checked,\n    defaultValue: defaultChecked,\n    onChange: (next) => onCheckedChange?.(next),\n    name: \"Switch\",\n  });\n\n  const control = (\n    <SwitchPrimitive.Root\n      ref={ref}\n      id={field.id}\n      checked={isChecked}\n      onCheckedChange={setIsChecked}\n      disabled={isDisabled}\n      required={isRequired}\n      aria-invalid={field[\"aria-invalid\"]}\n      aria-describedby={field[\"aria-describedby\"]}\n      aria-required={isRequired || undefined}\n      value={isChecked ? \"on\" : \"off\"}\n      data-tea-touch\n      className={cn(\n        // `rounded-pill` is a documented exception: a switch is a control\n        // marker, and a square switch reads as a checkbox.\n        \"relative inline-flex h-4 w-7 shrink-0 items-center rounded-pill border border-line-strong\",\n        \"bg-surface-2 p-0.5\",\n        \"transition-[background-color,border-color] duration-[120ms] ease-standard\",\n        \"outline-none\",\n        \"focus-visible:border-ring-strong focus-visible:ring-2 focus-visible:ring-ring\",\n        \"data-[state=checked]:border-primary data-[state=checked]:bg-primary\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"aria-[invalid=true]:border-critical\",\n        className,\n      )}\n      {...stateAttributes({ disabled: isDisabled, invalid: field[\"aria-invalid\"] === true, checked: isChecked })}\n      {...dataSlot(\"switch\")}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        // The thumb's position is the second signal: the switch is readable\n        // with no colour perception at all.\n        className={cn(\n          \"pointer-events-none block size-3 rounded-pill bg-fg transition-transform duration-[120ms] ease-standard\",\n          \"data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0\",\n          \"data-[state=checked]:bg-primary-fg\",\n        )}\n        {...dataSlot(\"switch-thumb\")}\n      />\n    </SwitchPrimitive.Root>\n  );\n\n  if (label === undefined || label === null || label === false) return control;\n\n  return (\n    <label className=\"inline-flex items-center gap-2 text-ui\" {...dataSlot(\"switch-label\")}>\n      {control}\n      <span>{label}</span>\n    </label>\n  );\n});\n"],"mappings":"AA6FM,cAgBF,YAhBE;AA7FL,YAAY,WAAW;AACxB,SAAS,UAAU,uBAAuB;AAC1C,SAAS,UAAU;AAEnB,SAAS,UAAU,iBAAiB,4BAA4B;AAChE,SAAS,4BAA4B;AA2C9B,MAAM,SAAS,MAAM,WAA2C,SAASA,QAC9E,EAAE,WAAW,OAAO,SAAS,iBAAiB,OAAO,iBAAiB,UAAU,UAAU,GAAG,MAAM,GACnG,KACA;AACA,QAAM,QAAQ,qBAAqB;AACnC,QAAM,aAAa,MAAM,YAAY,YAAY;AACjD,QAAM,aAAa,MAAM,eAAe,KAAK,YAAY;AAEzD,QAAM,CAAC,WAAW,YAAY,IAAI,qBAAqB;AAAA,IACrD,OAAO;AAAA,IACP,cAAc;AAAA,IACd,UAAU,CAAC,SAAS,kBAAkB,IAAI;AAAA,IAC1C,MAAM;AAAA,EACR,CAAC;AAED,QAAM,UACJ;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,IAAI,MAAM;AAAA,MACV,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB,UAAU;AAAA,MACV,UAAU;AAAA,MACV,gBAAc,MAAM,cAAc;AAAA,MAClC,oBAAkB,MAAM,kBAAkB;AAAA,MAC1C,iBAAe,cAAc;AAAA,MAC7B,OAAO,YAAY,OAAO;AAAA,MAC1B,kBAAc;AAAA,MACd,WAAW;AAAA;AAAA;AAAA,QAGT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG,gBAAgB,EAAE,UAAU,YAAY,SAAS,MAAM,cAAc,MAAM,MAAM,SAAS,UAAU,CAAC;AAAA,MACxG,GAAG,SAAS,QAAQ;AAAA,MACpB,GAAG;AAAA,MAEJ;AAAA,QAAC,gBAAgB;AAAA,QAAhB;AAAA,UAGC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACC,GAAG,SAAS,cAAc;AAAA;AAAA,MAC7B;AAAA;AAAA,EACF;AAGF,MAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,MAAO,QAAO;AAErE,SACE,qBAAC,WAAM,WAAU,0CAA0C,GAAG,SAAS,cAAc,GAClF;AAAA;AAAA,IACD,oBAAC,UAAM,iBAAM;AAAA,KACf;AAEJ,CAAC;","names":["Switch"]}

package/dist/inputs/textarea.d.ts

@@ -0,0 +1,51 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from '@tea-ui/utils';
+
+/**
+ * TEA UI — Textarea.
+ *
+ * A multi-line text field with the same field wiring, the same density tokens
+ * and the same iOS-zoom floor as `Input`. It differs in exactly two ways:
+ *
+ *  - it has no `size` variant, because its height comes from `rows`, not from
+ *    the control token;
+ *  - it can measure itself.
+ */
+/**
+ * The base surface. Shared with `Input` deliberately: a text field and a text
+ * *area* that do not match pixel-for-pixel read as two different products.
+ */
+declare const textareaVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextareaProps extends Omit<React.ComponentProps<"textarea">, "size" | "color" | "rows">, VariantProps<typeof textareaVariants> {
+    /** Visible rows. The one way a textarea's height is set explicitly. */
+    rows?: number;
+    /**
+     * Grow with the content instead of scrolling inside a fixed box.
+     *
+     * The recalculation sets the height to `scrollHeight`, which means the
+     * element's own scroll position is discarded on every keystroke — that is
+     * what makes naive auto-resize feel broken. The fix here is to only ever set
+     * an explicit height that is at least as large as the content, and to leave
+     * `overflow-y` alone, so a box the user has scrolled inside never jumps.
+     */
+    autoResize?: boolean | undefined;
+    /** The value is not acceptable. See `Input`'s `invalid`. */
+    invalid?: boolean | undefined;
+    className?: string | undefined;
+}
+/**
+ * @example
+ * ```tsx
+ * <Field invalid={!!error}>
+ *   <FieldLabel>Notizen</FieldLabel>
+ *   <Textarea rows={3} autoResize />
+ *   <FieldError>{error}</FieldError>
+ * </Field>
+ * ```
+ */
+declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+
+export { Textarea, type TextareaProps, textareaVariants };

package/dist/inputs/textarea.js

@@ -0,0 +1,82 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva, cn } from "@tea-ui/utils";
+import { dataSlot, stateAttributes, withPrivateRef } from "../internal/index.js";
+import { useFieldControlProps } from "./field.js";
+import { useInputGroupContext } from "./input-group.js";
+const textareaVariants = cva(
+  [
+    "w-full min-w-0 rounded-none border border-line bg-surface text-fg",
+    "px-[length:var(--tea-control-px)] py-2",
+    "transition-[background-color,border-color,color,box-shadow] duration-[120ms] ease-standard",
+    "outline-none",
+    "placeholder:text-fg-subtle",
+    "pointer-coarse:text-body",
+    "focus-visible:border-ring-strong focus-visible:ring-2 focus-visible:ring-ring",
+    "disabled:cursor-not-allowed disabled:border-line disabled:bg-surface-2 disabled:text-fg-subtle",
+    "read-only:cursor-default read-only:bg-surface-2 read-only:text-fg-muted",
+    "aria-[invalid=true]:border-critical aria-[invalid=true]:ring-critical"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-micro",
+        md: "text-ui",
+        lg: "text-ui"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const Textarea = React.forwardRef(function Textarea2({ className, size, rows, autoResize = false, invalid, disabled, readOnly, required, ...props }, ref) {
+  const field = useFieldControlProps();
+  const group = useInputGroupContext();
+  const [node, setNode] = React.useState(null);
+  const isInvalid = field["aria-invalid"] ?? invalid ?? false;
+  const isDisabled = field.disabled ?? disabled ?? false;
+  const isReadOnly = field.readOnly ?? readOnly ?? false;
+  const isRequired = field["aria-required"] ?? required ?? false;
+  React.useLayoutEffect(() => {
+    const element = node;
+    if (!element || !autoResize) return;
+    const scrollTop = element.scrollTop;
+    const wasOverflowing = element.scrollHeight > element.clientHeight;
+    element.style.height = "auto";
+    const next = element.scrollHeight;
+    element.style.height = `${Math.max(next, wasOverflowing ? element.clientHeight : 0)}px`;
+    if (wasOverflowing) element.scrollTop = scrollTop;
+  }, [node, autoResize, props.value]);
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref: withPrivateRef(ref, void 0, setNode),
+      rows,
+      id: field.id,
+      "aria-describedby": field["aria-describedby"],
+      "aria-invalid": isInvalid || void 0,
+      "aria-required": isRequired || void 0,
+      disabled: isDisabled || void 0,
+      readOnly: isReadOnly || void 0,
+      required: isRequired || void 0,
+      "data-tea-touch": true,
+      "data-auto-resize": autoResize || void 0,
+      ...stateAttributes({ disabled: isDisabled, invalid: isInvalid, readOnly: isReadOnly }),
+      ...dataSlot("textarea"),
+      className: cn(
+        textareaVariants({ size }),
+        // A textarea inside an `InputGroup` fills it rather than growing: the
+        // group's border is the box, and a growing control would tear it.
+        group ? "h-full resize-none overflow-auto border-0 bg-transparent px-0" : "resize-y",
+        className
+      ),
+      ...props
+    }
+  );
+});
+export {
+  Textarea,
+  textareaVariants
+};
+//# sourceMappingURL=textarea.js.map

package/dist/inputs/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/textarea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, cn, type VariantProps } from \"@tea-ui/utils\";\n\nimport { dataSlot, stateAttributes, withPrivateRef } from \"../internal\";\nimport { useFieldControlProps } from \"./field\";\nimport { useInputGroupContext } from \"./input-group\";\n\n/**\n * TEA UI — Textarea.\n *\n * A multi-line text field with the same field wiring, the same density tokens\n * and the same iOS-zoom floor as `Input`. It differs in exactly two ways:\n *\n *  - it has no `size` variant, because its height comes from `rows`, not from\n *    the control token;\n *  - it can measure itself.\n */\n\n/**\n * The base surface. Shared with `Input` deliberately: a text field and a text\n * *area* that do not match pixel-for-pixel read as two different products.\n */\nexport const textareaVariants = cva(\n  [\n    \"w-full min-w-0 rounded-none border border-line bg-surface text-fg\",\n    \"px-[length:var(--tea-control-px)] py-2\",\n    \"transition-[background-color,border-color,color,box-shadow] duration-[120ms] ease-standard\",\n    \"outline-none\",\n    \"placeholder:text-fg-subtle\",\n    \"pointer-coarse:text-body\",\n    \"focus-visible:border-ring-strong focus-visible:ring-2 focus-visible:ring-ring\",\n    \"disabled:cursor-not-allowed disabled:border-line disabled:bg-surface-2 disabled:text-fg-subtle\",\n    \"read-only:cursor-default read-only:bg-surface-2 read-only:text-fg-muted\",\n    \"aria-[invalid=true]:border-critical aria-[invalid=true]:ring-critical\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"text-micro\",\n        md: \"text-ui\",\n        lg: \"text-ui\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  },\n);\n\nexport interface TextareaProps\n  extends Omit<React.ComponentProps<\"textarea\">, \"size\" | \"color\" | \"rows\">,\n    VariantProps<typeof textareaVariants> {\n  /** Visible rows. The one way a textarea's height is set explicitly. */\n  rows?: number;\n  /**\n   * Grow with the content instead of scrolling inside a fixed box.\n   *\n   * The recalculation sets the height to `scrollHeight`, which means the\n   * element's own scroll position is discarded on every keystroke — that is\n   * what makes naive auto-resize feel broken. The fix here is to only ever set\n   * an explicit height that is at least as large as the content, and to leave\n   * `overflow-y` alone, so a box the user has scrolled inside never jumps.\n   */\n  autoResize?: boolean | undefined;\n  /** The value is not acceptable. See `Input`'s `invalid`. */\n  invalid?: boolean | undefined;\n  className?: string | undefined;\n}\n\n/**\n * @example\n * ```tsx\n * <Field invalid={!!error}>\n *   <FieldLabel>Notizen</FieldLabel>\n *   <Textarea rows={3} autoResize />\n *   <FieldError>{error}</FieldError>\n * </Field>\n * ```\n */\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  { className, size, rows, autoResize = false, invalid, disabled, readOnly, required, ...props },\n  ref,\n) {\n  const field = useFieldControlProps();\n  const group = useInputGroupContext();\n  const [node, setNode] = React.useState<HTMLTextAreaElement | null>(null);\n\n  const isInvalid = field[\"aria-invalid\"] ?? invalid ?? false;\n  const isDisabled = field.disabled ?? disabled ?? false;\n  const isReadOnly = field.readOnly ?? readOnly ?? false;\n  const isRequired = field[\"aria-required\"] ?? required ?? false;\n\n  // Measure after layout, and only when asked. `scrollHeight` is 0 until the\n  // element is in the document, so this has to be an effect and not a render.\n  React.useLayoutEffect(() => {\n    const element = node;\n    if (!element || !autoResize) return;\n\n    // Remember the user's scroll offset across the measurement: a box the user\n    // has scrolled to the bottom of must not spring back to the top because\n    // the height was recomputed.\n    const scrollTop = element.scrollTop;\n    const wasOverflowing = element.scrollHeight > element.clientHeight;\n\n    element.style.height = \"auto\";\n    const next = element.scrollHeight;\n    // Never shrink below what the user is looking at.\n    element.style.height = `${Math.max(next, wasOverflowing ? element.clientHeight : 0)}px`;\n    if (wasOverflowing) element.scrollTop = scrollTop;\n  }, [node, autoResize, props.value]);\n\n  return (\n    <textarea\n      ref={withPrivateRef(ref, undefined, setNode)}\n      rows={rows}\n      id={field.id}\n      aria-describedby={field[\"aria-describedby\"]}\n      aria-invalid={isInvalid || undefined}\n      aria-required={isRequired || undefined}\n      disabled={isDisabled || undefined}\n      readOnly={isReadOnly || undefined}\n      required={isRequired || undefined}\n      data-tea-touch\n      data-auto-resize={autoResize || undefined}\n      {...stateAttributes({ disabled: isDisabled, invalid: isInvalid, readOnly: isReadOnly })}\n      {...dataSlot(\"textarea\")}\n      className={cn(\n        textareaVariants({ size }),\n        // A textarea inside an `InputGroup` fills it rather than growing: the\n        // group's border is the box, and a growing control would tear it.\n        group ? \"h-full resize-none overflow-auto border-0 bg-transparent px-0\" : \"resize-y\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n"],"mappings":"AAgHI;AAhHH,YAAY,WAAW;AACxB,SAAS,KAAK,UAA6B;AAE3C,SAAS,UAAU,iBAAiB,sBAAsB;AAC1D,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AAiB9B,MAAM,mBAAmB;AAAA,EAC9B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAgCO,MAAM,WAAW,MAAM,WAA+C,SAASA,UACpF,EAAE,WAAW,MAAM,MAAM,aAAa,OAAO,SAAS,UAAU,UAAU,UAAU,GAAG,MAAM,GAC7F,KACA;AACA,QAAM,QAAQ,qBAAqB;AACnC,QAAM,QAAQ,qBAAqB;AACnC,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAqC,IAAI;AAEvE,QAAM,YAAY,MAAM,cAAc,KAAK,WAAW;AACtD,QAAM,aAAa,MAAM,YAAY,YAAY;AACjD,QAAM,aAAa,MAAM,YAAY,YAAY;AACjD,QAAM,aAAa,MAAM,eAAe,KAAK,YAAY;AAIzD,QAAM,gBAAgB,MAAM;AAC1B,UAAM,UAAU;AAChB,QAAI,CAAC,WAAW,CAAC,WAAY;AAK7B,UAAM,YAAY,QAAQ;AAC1B,UAAM,iBAAiB,QAAQ,eAAe,QAAQ;AAEtD,YAAQ,MAAM,SAAS;AACvB,UAAM,OAAO,QAAQ;AAErB,YAAQ,MAAM,SAAS,GAAG,KAAK,IAAI,MAAM,iBAAiB,QAAQ,eAAe,CAAC,CAAC;AACnF,QAAI,eAAgB,SAAQ,YAAY;AAAA,EAC1C,GAAG,CAAC,MAAM,YAAY,MAAM,KAAK,CAAC;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,eAAe,KAAK,QAAW,OAAO;AAAA,MAC3C;AAAA,MACA,IAAI,MAAM;AAAA,MACV,oBAAkB,MAAM,kBAAkB;AAAA,MAC1C,gBAAc,aAAa;AAAA,MAC3B,iBAAe,cAAc;AAAA,MAC7B,UAAU,cAAc;AAAA,MACxB,UAAU,cAAc;AAAA,MACxB,UAAU,cAAc;AAAA,MACxB,kBAAc;AAAA,MACd,oBAAkB,cAAc;AAAA,MAC/B,GAAG,gBAAgB,EAAE,UAAU,YAAY,SAAS,WAAW,UAAU,WAAW,CAAC;AAAA,MACrF,GAAG,SAAS,UAAU;AAAA,MACvB,WAAW;AAAA,QACT,iBAAiB,EAAE,KAAK,CAAC;AAAA;AAAA;AAAA,QAGzB,QAAQ,kEAAkE;AAAA,QAC1E;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["Textarea"]}

package/dist/inputs/toggle.d.ts

@@ -0,0 +1,57 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { Toggle as Toggle$1, ToggleGroup as ToggleGroup$1 } from 'radix-ui';
+import { VariantProps } from '@tea-ui/utils';
+
+/**
+ * TEA UI — Toggle and ToggleGroup.
+ *
+ * A button that stays pressed. Two properties separate it from every other
+ * control here, and both follow from the fact that it *persists*:
+ *
+ *  - **`aria-pressed` is a state, not a decoration.** A toggle whose only signal
+ *    is a highlight is a plain button to a screen reader user: there is no way
+ *    to find out whether the thing they are about to change is already changed.
+ *    Radix sets it; the pressed *fill* is the second signal, so the state
+ *    survives a monochrome screenshot and a colour-vision deficiency.
+ *  - **It belongs in a group.** A lone toggle is usually a checkbox that got the
+ *    wrong component, and the styling here assumes peers.
+ *
+ * `ToggleGroup` is single-select (`type="single"`, `role="radiogroup"`, arrows
+ * move and select) or multi-select (`type="multiple"`, `role="group"`, arrows
+ * move, Space toggles). Both are Radix, because roving focus across a group is
+ * three separate rules and a hand-rolled version gets one of them wrong.
+ */
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ToggleProps extends Omit<React.ComponentProps<typeof Toggle$1.Root>, "className">, VariantProps<typeof toggleVariants> {
+    /** The pressed state, when controlled. */
+    pressed?: boolean | undefined;
+    /** Initial pressed state, when uncontrolled. */
+    defaultPressed?: boolean | undefined;
+    /** Called when the pressed state changes. */
+    onPressedChange?: ((pressed: boolean) => void) | undefined;
+    className?: string | undefined;
+}
+/**
+ * @example
+ * ```tsx
+ * <Toggle pressed={showGrid} onPressedChange={setShowGrid} aria-label="Gitternetz anzeigen">
+ *   <Grid3x3 />
+ * </Toggle>
+ * ```
+ */
+declare const Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+interface ToggleGroupProps extends Omit<React.ComponentProps<typeof ToggleGroup$1.Root>, "type" | "orientation" | "dir" | "children">, VariantProps<typeof toggleVariants> {
+    /** `single` presses one at a time; `multiple` presses any number. */
+    type: "single" | "multiple";
+    children?: React.ReactNode;
+    /** Which way the items run. Decides the arrow keys. */
+    orientation?: "horizontal" | "vertical";
+    className?: string | undefined;
+}
+declare const ToggleGroup: React.ForwardRefExoticComponent<Omit<ToggleGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, toggleVariants };

package/dist/inputs/toggle.js

@@ -0,0 +1,91 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Toggle as TogglePrimitive, ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+import { cva, cn } from "@tea-ui/utils";
+import { dataSlot, stateAttributes } from "../internal/index.js";
+import { useButtonGroupContext } from "./button-group.js";
+const toggleVariants = cva(
+  [
+    "relative inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap",
+    "rounded-none border border-transparent font-medium",
+    "transition-[background-color,border-color,color,box-shadow] duration-[120ms] ease-standard",
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-ring",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "active:translate-y-px"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "border-line bg-surface-3 text-fg hover:bg-line",
+        outline: "border-line bg-transparent text-fg hover:border-line-strong hover:bg-surface-2"
+      },
+      size: {
+        sm: "h-[calc(var(--tea-control-h)-0.25rem)] px-[calc(var(--tea-control-px)-0.25rem)] text-micro",
+        md: "control-h px-[length:var(--tea-control-px)] text-ui",
+        lg: "h-[calc(var(--tea-control-h)+0.25rem)] px-[calc(var(--tea-control-px)+0.25rem)] text-ui"
+      }
+    },
+    defaultVariants: {
+      variant: "outline",
+      size: "md"
+    }
+  }
+);
+const ToggleGroupStyleContext = React.createContext(null);
+const Toggle = React.forwardRef(function Toggle2({ className, variant, size, pressed, defaultPressed, onPressedChange, ...props }, ref) {
+  const buttonGroup = useButtonGroupContext();
+  const group = React.useContext(ToggleGroupStyleContext);
+  return /* @__PURE__ */ jsx(
+    TogglePrimitive.Root,
+    {
+      ref,
+      pressed,
+      defaultPressed,
+      onPressedChange,
+      "data-tea-touch": true,
+      "data-tea-grouped": buttonGroup ? buttonGroup.orientation : void 0,
+      className: cn(
+        toggleVariants({ variant: variant ?? group?.variant, size: size ?? group?.size }),
+        "data-[state=on]:border-primary data-[state=on]:bg-primary-subtle data-[state=on]:text-primary",
+        className
+      ),
+      ...dataSlot("toggle"),
+      ...props
+    }
+  );
+});
+const ToggleGroupRootPrimitive = ToggleGroupPrimitive.Root;
+const ToggleGroup = React.forwardRef(function ToggleGroup2({ children, className, type, orientation = "horizontal", variant, size, ...props }, ref) {
+  const style = React.useMemo(
+    () => ({ variant: variant ?? "outline", size: size ?? "md" }),
+    [variant, size]
+  );
+  return /* @__PURE__ */ jsx(ToggleGroupStyleContext.Provider, { value: style, children: /* @__PURE__ */ jsx(
+    ToggleGroupRootPrimitive,
+    {
+      ...props,
+      ref,
+      type,
+      orientation,
+      "data-orientation": orientation,
+      "data-tea-touch": true,
+      className: cn(
+        "inline-flex items-stretch rounded-none",
+        orientation === "vertical" ? "flex-col" : "flex-row",
+        "[&>*+*]:-ms-px",
+        className
+      ),
+      ...stateAttributes({ orientation }),
+      ...dataSlot("toggle-group"),
+      ...props,
+      children
+    }
+  ) });
+});
+export {
+  Toggle,
+  ToggleGroup,
+  toggleVariants
+};
+//# sourceMappingURL=toggle.js.map

package/dist/inputs/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/toggle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Toggle as TogglePrimitive, ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\";\nimport { cva, cn, type VariantProps } from \"@tea-ui/utils\";\n\nimport { dataSlot, stateAttributes } from \"../internal\";\nimport { useButtonGroupContext } from \"./button-group\";\n\n/**\n * TEA UI — Toggle and ToggleGroup.\n *\n * A button that stays pressed. Two properties separate it from every other\n * control here, and both follow from the fact that it *persists*:\n *\n *  - **`aria-pressed` is a state, not a decoration.** A toggle whose only signal\n *    is a highlight is a plain button to a screen reader user: there is no way\n *    to find out whether the thing they are about to change is already changed.\n *    Radix sets it; the pressed *fill* is the second signal, so the state\n *    survives a monochrome screenshot and a colour-vision deficiency.\n *  - **It belongs in a group.** A lone toggle is usually a checkbox that got the\n *    wrong component, and the styling here assumes peers.\n *\n * `ToggleGroup` is single-select (`type=\"single\"`, `role=\"radiogroup\"`, arrows\n * move and select) or multi-select (`type=\"multiple\"`, `role=\"group\"`, arrows\n * move, Space toggles). Both are Radix, because roving focus across a group is\n * three separate rules and a hand-rolled version gets one of them wrong.\n */\n\nexport const toggleVariants = cva(\n  [\n    \"relative inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap\",\n    \"rounded-none border border-transparent font-medium\",\n    \"transition-[background-color,border-color,color,box-shadow] duration-[120ms] ease-standard\",\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-ring\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"active:translate-y-px\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"border-line bg-surface-3 text-fg hover:bg-line\",\n        outline: \"border-line bg-transparent text-fg hover:border-line-strong hover:bg-surface-2\",\n      },\n      size: {\n        sm: \"h-[calc(var(--tea-control-h)-0.25rem)] px-[calc(var(--tea-control-px)-0.25rem)] text-micro\",\n        md: \"control-h px-[length:var(--tea-control-px)] text-ui\",\n        lg: \"h-[calc(var(--tea-control-h)+0.25rem)] px-[calc(var(--tea-control-px)+0.25rem)] text-ui\",\n      },\n    },\n    defaultVariants: {\n      variant: \"outline\",\n      size: \"md\",\n    },\n  },\n);\n\n/**\n * Group-wide styling, read by each `Toggle` in the group.\n *\n * A context rather than cloning the group's children: cloning means a `Toggle`\n * wrapped in a consumer's own component silently loses the group's size, which\n * is the kind of bug nobody reports and everybody sees.\n */\ninterface ToggleGroupStyleContextValue {\n  variant: ToggleProps[\"variant\"];\n  size: ToggleProps[\"size\"];\n}\n\nconst ToggleGroupStyleContext = React.createContext<ToggleGroupStyleContextValue | null>(null);\n\nexport interface ToggleProps\n  extends Omit<React.ComponentProps<typeof TogglePrimitive.Root>, \"className\">,\n    VariantProps<typeof toggleVariants> {\n  /** The pressed state, when controlled. */\n  pressed?: boolean | undefined;\n  /** Initial pressed state, when uncontrolled. */\n  defaultPressed?: boolean | undefined;\n  /** Called when the pressed state changes. */\n  onPressedChange?: ((pressed: boolean) => void) | undefined;\n  className?: string | undefined;\n}\n\n/**\n * @example\n * ```tsx\n * <Toggle pressed={showGrid} onPressedChange={setShowGrid} aria-label=\"Gitternetz anzeigen\">\n *   <Grid3x3 />\n * </Toggle>\n * ```\n */\nexport const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(function Toggle(\n  { className, variant, size, pressed, defaultPressed, onPressedChange, ...props },\n  ref,\n) {\n  const buttonGroup = useButtonGroupContext();\n  const group = React.useContext(ToggleGroupStyleContext);\n\n  return (\n    <TogglePrimitive.Root\n      ref={ref}\n      pressed={pressed}\n      defaultPressed={defaultPressed}\n      onPressedChange={onPressedChange}\n      data-tea-touch\n      data-tea-grouped={buttonGroup ? buttonGroup.orientation : undefined}\n      className={cn(\n        toggleVariants({ variant: variant ?? group?.variant, size: size ?? group?.size }),\n        \"data-[state=on]:border-primary data-[state=on]:bg-primary-subtle data-[state=on]:text-primary\",\n        className,\n      )}\n      {...dataSlot(\"toggle\")}\n      {...props}\n    />\n  );\n});\n\nexport interface ToggleGroupProps\n  extends Omit<\n      React.ComponentProps<typeof ToggleGroupPrimitive.Root>,\n      \"type\" | \"orientation\" | \"dir\" | \"children\"\n    >,\n    VariantProps<typeof toggleVariants> {\n  /** `single` presses one at a time; `multiple` presses any number. */\n  type: \"single\" | \"multiple\";\n  children?: React.ReactNode;\n  /** Which way the items run. Decides the arrow keys. */\n  orientation?: \"horizontal\" | \"vertical\";\n  className?: string | undefined;\n}\n\n/**\n * @example\n * ```tsx\n * <ToggleGroup type=\"multiple\" aria-label=\"Spalten\" size=\"sm\">\n *   <Toggle value=\"cpu\">CPU</Toggle>\n *   <Toggle value=\"ram\">RAM</Toggle>\n * </ToggleGroup>\n * ```\n */\n/**\n * Radix narrows `type` to a literal per variant, which makes a forwardable\n * `ToggleGroupProps[\"type\"]` union unrepresentable in its own prop type. The\n * component is cast once, here, rather than at every call site.\n */\nconst ToggleGroupRootPrimitive = ToggleGroupPrimitive.Root as unknown as React.ComponentType<\n  React.ComponentProps<\"div\"> & Record<string, unknown>\n>;\nexport const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>(function ToggleGroup(\n  { children, className, type, orientation = \"horizontal\", variant, size, ...props },\n  ref,\n) {\n  // Radix supplies the role: `radiogroup` for single, `group` for multiple.\n  const style = React.useMemo<ToggleGroupStyleContextValue>(\n    () => ({ variant: variant ?? \"outline\", size: size ?? \"md\" }),\n    [variant, size],\n  );\n\n  return (\n    <ToggleGroupStyleContext.Provider value={style}>\n      {/* Radix types `type` as a per-variant literal, so a caller forwarding a\n          `ToggleGroupProps[\"type\"]` union is genuinely correct — only the\n          narrowing is unrepresentable in the type. Runtime behaviour is Radix's. */}\n      <ToggleGroupRootPrimitive\n        {...(props as React.ComponentProps<\"div\">)}\n        ref={ref}\n        type={type}\n        orientation={orientation}\n        data-orientation={orientation}\n        data-tea-touch\n        className={cn(\n          \"inline-flex items-stretch rounded-none\",\n          orientation === \"vertical\" ? \"flex-col\" : \"flex-row\",\n          \"[&>*+*]:-ms-px\",\n          className,\n        )}\n        {...stateAttributes({ orientation })}\n        {...dataSlot(\"toggle-group\")}\n        {...props}\n      >\n        {children}\n      </ToggleGroupRootPrimitive>\n    </ToggleGroupStyleContext.Provider>\n  );\n});\n"],"mappings":"AAkGI;AAlGH,YAAY,WAAW;AACxB,SAAS,UAAU,iBAAiB,eAAe,4BAA4B;AAC/E,SAAS,KAAK,UAA6B;AAE3C,SAAS,UAAU,uBAAuB;AAC1C,SAAS,6BAA6B;AAsB/B,MAAM,iBAAiB;AAAA,EAC5B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAcA,MAAM,0BAA0B,MAAM,cAAmD,IAAI;AAsBtF,MAAM,SAAS,MAAM,WAA2C,SAASA,QAC9E,EAAE,WAAW,SAAS,MAAM,SAAS,gBAAgB,iBAAiB,GAAG,MAAM,GAC/E,KACA;AACA,QAAM,cAAc,sBAAsB;AAC1C,QAAM,QAAQ,MAAM,WAAW,uBAAuB;AAEtD,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAc;AAAA,MACd,oBAAkB,cAAc,YAAY,cAAc;AAAA,MAC1D,WAAW;AAAA,QACT,eAAe,EAAE,SAAS,WAAW,OAAO,SAAS,MAAM,QAAQ,OAAO,KAAK,CAAC;AAAA,QAChF;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG,SAAS,QAAQ;AAAA,MACpB,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AA8BD,MAAM,2BAA2B,qBAAqB;AAG/C,MAAM,cAAc,MAAM,WAA6C,SAASC,aACrF,EAAE,UAAU,WAAW,MAAM,cAAc,cAAc,SAAS,MAAM,GAAG,MAAM,GACjF,KACA;AAEA,QAAM,QAAQ,MAAM;AAAA,IAClB,OAAO,EAAE,SAAS,WAAW,WAAW,MAAM,QAAQ,KAAK;AAAA,IAC3D,CAAC,SAAS,IAAI;AAAA,EAChB;AAEA,SACE,oBAAC,wBAAwB,UAAxB,EAAiC,OAAO,OAIvC;AAAA,IAAC;AAAA;AAAA,MACE,GAAI;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAkB;AAAA,MAClB,kBAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,aAAa,aAAa;AAAA,QAC1C;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG,gBAAgB,EAAE,YAAY,CAAC;AAAA,MAClC,GAAG,SAAS,cAAc;AAAA,MAC1B,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;","names":["Toggle","ToggleGroup"]}

package/dist/internal/index.d.ts

@@ -0,0 +1,5 @@
+export { UseControllableStateParams, useControllableState } from './use-controllable-state.js';
+export { PossibleRef, composeRefs, setRefs, splitProps } from './refs.js';
+export { RenderProps, SlotProps, StateAttributes, dataSlot, renderElement, stateAttributes, withPrivateRef } from './slot.js';
+import 'react';
+import '@tea-ui/utils';

package/dist/internal/index.js

@@ -0,0 +1,19 @@
+import { useControllableState } from "./use-controllable-state.js";
+import { composeRefs, setRefs, splitProps } from "./refs.js";
+import {
+  dataSlot,
+  renderElement,
+  stateAttributes,
+  withPrivateRef
+} from "./slot.js";
+export {
+  composeRefs,
+  dataSlot,
+  renderElement,
+  setRefs,
+  splitProps,
+  stateAttributes,
+  useControllableState,
+  withPrivateRef
+};
+//# sourceMappingURL=index.js.map

package/dist/internal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/index.ts"],"sourcesContent":["/**\n * TEA UI — internal helpers.\n *\n * NOT part of the public API. Nothing in here is exported from\n * `@tea-ui/core`, and nothing in here is covered by semver. It exists so the\n * public surface can stay small and intentional while the implementation stays\n * consistent.\n */\nexport { useControllableState, type UseControllableStateParams } from \"./use-controllable-state\";\nexport { composeRefs, setRefs, splitProps, type PossibleRef } from \"./refs\";\nexport {\n  dataSlot,\n  renderElement,\n  stateAttributes,\n  withPrivateRef,\n  type RenderProps,\n  type SlotProps,\n  type StateAttributes,\n} from \"./slot\";\n"],"mappings":"AAQA,SAAS,4BAA6D;AACtE,SAAS,aAAa,SAAS,kBAAoC;AACnE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;","names":[]}

package/dist/internal/refs.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+/**
+ * Ref plumbing for DOM-backed components.
+ *
+ * Every interactive TEA UI component forwards its ref, and every TEA UI
+ * component accepts an external ref. That means every component needs the same
+ * three-way merge between its own ref, the forwarded ref, and any prop ref a
+ * Radix primitive hands to it. Doing it once here is the only way it is done
+ * consistently.
+ */
+type PossibleRef<T> = React.Ref<T> | undefined;
+/** A ref that can hold several refs at once. */
+declare function setRefs<T>(...refs: PossibleRef<T>[]): (value: T) => void;
+/**
+ * Merge a component's internal ref with a forwarded one into a single
+ * callback ref. Internal first, so a component always knows its own node.
+ */
+declare function composeRefs<T>(...refs: PossibleRef<T>[]): (value: T) => void;
+/**
+ * Split an incoming props object into "ours to handle" and "the consumer's",
+ * merging anything that is not ours forward. This is how a TEA UI wrapper stays
+ * transparent: unknown props are never swallowed, and every known prop is
+ * consumed exactly once.
+ */
+declare function splitProps<T extends Record<string, unknown>, K extends keyof T>(props: T, ownKeys: readonly K[]): {
+    own: Pick<T, K>;
+    rest: Omit<T, K>;
+};
+
+export { type PossibleRef, composeRefs, setRefs, splitProps };