@tea-ui/core 0.1.0

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

@@ -0,0 +1,70 @@
+import * as React from 'react';
+
+/**
+ * TEA UI — ButtonGroup.
+ *
+ * A set of related actions, either spaced apart or welded edge to edge.
+ *
+ * It renders `role="group"`, which is a real structural relationship the audit
+ * got for free in one place and missed in the rest: five copy-pasted button
+ * rows with no grouping, no orientation and no name. A group says "these belong
+ * together" to a screen reader user navigating by structure, which is exactly
+ * the information a visual user gets from the shared border.
+ *
+ * `joined` is done in CSS on the group's own children rather than by asking
+ * each child to cooperate. That matters here: the group's most common member is
+ * the reference `Button`, which must not need to know about groups. A negative
+ * inline margin on every child after the first removes the double border, and
+ * because TEA geometry has a radius of exactly zero, nothing else is needed to
+ * make the seam disappear. (With a radius, every child but the first and last
+ * would need its corners flattened — which is why the radius is zero.)
+ */
+interface ButtonGroupContextValue {
+    orientation: "horizontal" | "vertical";
+    joined: boolean;
+}
+/**
+ * Read by the TEA UI controls that can join a group. `null` when standalone.
+ *
+ * A control that does not read this still renders correctly inside a group —
+ * the group styles its children from the outside — so this is an opt-in for
+ * the parts that want to adapt, never a requirement.
+ */
+declare function useButtonGroupContext(): ButtonGroupContextValue | null;
+interface ButtonGroupProps extends Omit<React.ComponentProps<"div">, "children"> {
+    children?: React.ReactNode;
+    /**
+     * Name for the group. **Required** — a `role="group"` with no name is an
+     * entry in the structure list that says nothing, which costs a screen reader
+     * user a stop for no information.
+     */
+    label: string;
+    /** Direction the children run in. Decides the join axis and the arrow order. */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Weld the children into one control: one border, no gaps, one shared focus
+     * ring per child. Off by default, because a toolbar of unrelated actions
+     * should not look like a segmented control.
+     */
+    joined?: boolean;
+}
+/**
+ * @example
+ * ```tsx
+ * <ButtonGroup label="Ansicht" joined>
+ *   <Button variant="outline">Tag</Button>
+ *   <Button variant="outline">Woche</Button>
+ *   <Button variant="outline">Monat</Button>
+ * </ButtonGroup>
+ * ```
+ */
+declare const ButtonGroup: React.ForwardRefExoticComponent<Omit<ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type ButtonGroupSeparatorProps = React.ComponentProps<"span">;
+/**
+ * A gap inside a `joined` group, for splitting one control into two halves —
+ * "undo" and "redo", "date from" and "date to". A separator is a `<span>` with
+ * `aria-hidden`, because it is a drawing, not content.
+ */
+declare const ButtonGroupSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+export { ButtonGroup, type ButtonGroupProps, ButtonGroupSeparator, type ButtonGroupSeparatorProps, useButtonGroupContext };

package/dist/inputs/button-group.js

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@tea-ui/utils";
+import { dataSlot } from "../internal/index.js";
+const ButtonGroupContext = React.createContext(null);
+function useButtonGroupContext() {
+  return React.useContext(ButtonGroupContext);
+}
+const ButtonGroup = React.forwardRef(function ButtonGroup2({ children, className, label, orientation = "horizontal", joined = false, ...props }, ref) {
+  const value = React.useMemo(
+    () => ({ orientation, joined }),
+    [orientation, joined]
+  );
+  return /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-label": label,
+      "data-orientation": orientation,
+      "data-joined": joined || void 0,
+      "data-tea-touch": true,
+      className: cn(
+        "inline-flex items-stretch",
+        orientation === "vertical" ? "flex-col" : "flex-row",
+        // The seam: pull each child back over the shared border. `-ms-px` and
+        // `-mt-px` are layout, not `!`-prefixed overrides, and they are
+        // scoped to the group's own children.
+        joined && orientation === "horizontal" && "[&>*+*]:-ms-px",
+        joined && orientation === "vertical" && "[&>*+*]:-mt-px",
+        !joined && "gap-2",
+        className
+      ),
+      ...dataSlot("button-group"),
+      ...props,
+      children
+    }
+  ) });
+});
+const ButtonGroupSeparator = React.forwardRef(
+  function ButtonGroupSeparator2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn("shrink-0 self-stretch bg-line w-px", className),
+        ...dataSlot("button-group-separator"),
+        ...props
+      }
+    );
+  }
+);
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  useButtonGroupContext
+};
+//# sourceMappingURL=button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/button-group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@tea-ui/utils\";\n\nimport { dataSlot } from \"../internal\";\n\n/**\n * TEA UI — ButtonGroup.\n *\n * A set of related actions, either spaced apart or welded edge to edge.\n *\n * It renders `role=\"group\"`, which is a real structural relationship the audit\n * got for free in one place and missed in the rest: five copy-pasted button\n * rows with no grouping, no orientation and no name. A group says \"these belong\n * together\" to a screen reader user navigating by structure, which is exactly\n * the information a visual user gets from the shared border.\n *\n * `joined` is done in CSS on the group's own children rather than by asking\n * each child to cooperate. That matters here: the group's most common member is\n * the reference `Button`, which must not need to know about groups. A negative\n * inline margin on every child after the first removes the double border, and\n * because TEA geometry has a radius of exactly zero, nothing else is needed to\n * make the seam disappear. (With a radius, every child but the first and last\n * would need its corners flattened — which is why the radius is zero.)\n */\n\ninterface ButtonGroupContextValue {\n  orientation: \"horizontal\" | \"vertical\";\n  joined: boolean;\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue | null>(null);\n\n/**\n * Read by the TEA UI controls that can join a group. `null` when standalone.\n *\n * A control that does not read this still renders correctly inside a group —\n * the group styles its children from the outside — so this is an opt-in for\n * the parts that want to adapt, never a requirement.\n */\nexport function useButtonGroupContext(): ButtonGroupContextValue | null {\n  return React.useContext(ButtonGroupContext);\n}\n\nexport interface ButtonGroupProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  children?: React.ReactNode;\n  /**\n   * Name for the group. **Required** — a `role=\"group\"` with no name is an\n   * entry in the structure list that says nothing, which costs a screen reader\n   * user a stop for no information.\n   */\n  label: string;\n  /** Direction the children run in. Decides the join axis and the arrow order. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Weld the children into one control: one border, no gaps, one shared focus\n   * ring per child. Off by default, because a toolbar of unrelated actions\n   * should not look like a segmented control.\n   */\n  joined?: boolean;\n}\n\n/**\n * @example\n * ```tsx\n * <ButtonGroup label=\"Ansicht\" joined>\n *   <Button variant=\"outline\">Tag</Button>\n *   <Button variant=\"outline\">Woche</Button>\n *   <Button variant=\"outline\">Monat</Button>\n * </ButtonGroup>\n * ```\n */\nexport const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(function ButtonGroup(\n  { children, className, label, orientation = \"horizontal\", joined = false, ...props },\n  ref,\n) {\n  const value = React.useMemo<ButtonGroupContextValue>(\n    () => ({ orientation, joined }),\n    [orientation, joined],\n  );\n\n  return (\n    <ButtonGroupContext.Provider value={value}>\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-label={label}\n        data-orientation={orientation}\n        data-joined={joined || undefined}\n        data-tea-touch\n        className={cn(\n          \"inline-flex items-stretch\",\n          orientation === \"vertical\" ? \"flex-col\" : \"flex-row\",\n          // The seam: pull each child back over the shared border. `-ms-px` and\n          // `-mt-px` are layout, not `!`-prefixed overrides, and they are\n          // scoped to the group's own children.\n          joined && orientation === \"horizontal\" && \"[&>*+*]:-ms-px\",\n          joined && orientation === \"vertical\" && \"[&>*+*]:-mt-px\",\n          !joined && \"gap-2\",\n          className,\n        )}\n        {...dataSlot(\"button-group\")}\n        {...props}\n      >\n        {children}\n      </div>\n    </ButtonGroupContext.Provider>\n  );\n});\n\nexport type ButtonGroupSeparatorProps = React.ComponentProps<\"span\">;\n\n/**\n * A gap inside a `joined` group, for splitting one control into two halves —\n * \"undo\" and \"redo\", \"date from\" and \"date to\". A separator is a `<span>` with\n * `aria-hidden`, because it is a drawing, not content.\n */\nexport const ButtonGroupSeparator = React.forwardRef<HTMLSpanElement, ButtonGroupSeparatorProps>(\n  function ButtonGroupSeparator({ className, ...props }, ref) {\n    return (\n      <span\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(\"shrink-0 self-stretch bg-line w-px\", className)}\n        {...dataSlot(\"button-group-separator\")}\n        {...props}\n      />\n    );\n  },\n);\n"],"mappings":"AAkFM;AAlFL,YAAY,WAAW;AACxB,SAAS,UAAU;AAEnB,SAAS,gBAAgB;AA2BzB,MAAM,qBAAqB,MAAM,cAA8C,IAAI;AAS5E,SAAS,wBAAwD;AACtE,SAAO,MAAM,WAAW,kBAAkB;AAC5C;AA8BO,MAAM,cAAc,MAAM,WAA6C,SAASA,aACrF,EAAE,UAAU,WAAW,OAAO,cAAc,cAAc,SAAS,OAAO,GAAG,MAAM,GACnF,KACA;AACA,QAAM,QAAQ,MAAM;AAAA,IAClB,OAAO,EAAE,aAAa,OAAO;AAAA,IAC7B,CAAC,aAAa,MAAM;AAAA,EACtB;AAEA,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAC3B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,oBAAkB;AAAA,MAClB,eAAa,UAAU;AAAA,MACvB,kBAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,aAAa,aAAa;AAAA;AAAA;AAAA;AAAA,QAI1C,UAAU,gBAAgB,gBAAgB;AAAA,QAC1C,UAAU,gBAAgB,cAAc;AAAA,QACxC,CAAC,UAAU;AAAA,QACX;AAAA,MACF;AAAA,MACC,GAAG,SAAS,cAAc;AAAA,MAC1B,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AASM,MAAM,uBAAuB,MAAM;AAAA,EACxC,SAASC,sBAAqB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW,GAAG,sCAAsC,SAAS;AAAA,QAC5D,GAAG,SAAS,wBAAwB;AAAA,QACpC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["ButtonGroup","ButtonGroupSeparator"]}

package/dist/inputs/button.d.ts

@@ -0,0 +1,52 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from '@tea-ui/utils';
+
+/**
+ * TEA UI — Button. The reference implementation for every component in TEA UI.
+ *
+ * Read this file before writing another component. It encodes the house style:
+ *
+ *  1. `cva` for the variant surface, always with `className` passed *into* the
+ *     call so a consumer's class merges correctly. (HomeServerManager's Button
+ *     did this and its Badge did not — which is how the two drifted.)
+ *  2. `variant` and `size` are the only styling axes. There is no `color` prop
+ *     and no `className` escape hatch that replaces a variant.
+ *  3. State is exposed as data attributes, not only as styling.
+ *  4. `asChild` is available on every component that renders an element, so a
+ *     consumer can keep native semantics (a real `<a>`) and still get the
+ *     styles.
+ *  5. `loading` is a first-class state, not a `disabled` alias: it keeps the
+ *     control's width, announces itself, and blocks repeat activation.
+ *  6. `type` defaults to `"button"`. A TEA UI button inside a form is not a
+ *     submit button by accident.
+ *  7. The ref is forwarded.
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "primary" | "destructive" | "subtle" | "secondary" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends Omit<React.ComponentProps<"button">, "color">, VariantProps<typeof buttonVariants> {
+    /**
+     * Render the consumer's single child element instead of a `<button>`, keeping
+     * the styling. Use this whenever the control is really a link or a router
+     * link — never to work around a nested-interactive problem.
+     */
+    asChild?: boolean | undefined;
+    /**
+     * The element to render instead of `<button>`. Prefer `asChild`; this exists
+     * for cases where the consumer must supply an element TEA UI cannot wrap.
+     */
+    as?: React.ElementType | undefined;
+    /**
+     * The control is performing an action. Shows a spinner, keeps the width, sets
+     * `aria-busy`, and blocks repeat activation — it does *not* collapse to a
+     * disabled control, so the label does not shift and the user can still read it.
+     */
+    loading?: boolean | undefined;
+    /** Accessible name for the spinner announced while `loading`. */
+    loadingLabel?: string | undefined;
+}
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps, buttonVariants };

package/dist/inputs/button.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { cva, cn } from "@tea-ui/utils";
+import { stateAttributes } from "../internal/index.js";
+import { Spinner } from "../feedback/spinner.js";
+const buttonVariants = cva(
+  [
+    "relative inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap",
+    "border border-transparent font-medium",
+    "transition-[background-color,border-color,color,box-shadow,transform] duration-fast ease-standard",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+    // A pressed control moves 1px. It is the cheapest possible tactile feedback
+    // and the only one available on a touch device.
+    "active:translate-y-px"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-fg border-primary hover:bg-primary-hover hover:border-primary-hover",
+        secondary: "bg-surface-3 text-fg border-line hover:bg-line hover:border-line-strong",
+        outline: "bg-transparent text-fg border-line hover:bg-surface-2 hover:border-line-strong",
+        ghost: "bg-transparent text-fg-muted border-transparent hover:bg-surface-3 hover:text-fg",
+        subtle: "bg-primary-subtle text-primary border-primary-border hover:bg-primary-subtle/80",
+        destructive: "bg-destructive text-destructive-fg border-destructive hover:brightness-110",
+        link: "bg-transparent text-primary border-transparent underline-offset-4 hover:underline p-0 h-auto"
+      },
+      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",
+        "icon-sm": "size-[calc(var(--tea-control-h)-0.25rem)] p-0 [--tea-control-icon:0.875rem] has-[svg]:size-[length:var(--tea-control-icon)]",
+        "icon-md": "size-[length:var(--tea-control-h)] p-0 [--tea-control-icon:1rem] has-[svg]:size-[length:var(--tea-control-icon)]",
+        "icon-lg": "size-[calc(var(--tea-control-h)+0.5rem)] p-0 [--tea-control-icon:1.25rem] has-[svg]:size-[length:var(--tea-control-icon)]"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+const Button = React.forwardRef(function Button2({
+  className,
+  variant,
+  size,
+  asChild = false,
+  as,
+  loading = false,
+  loadingLabel,
+  disabled,
+  type,
+  children,
+  ...props
+}, ref) {
+  const Component = asChild ? Slot.Root : as ?? "button";
+  const isDisabled = disabled === true || loading;
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ref,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...asChild ? {} : { type: type ?? "button", disabled: isDisabled, "aria-busy": loading || void 0 },
+      "aria-disabled": loading || void 0,
+      onClick: loading ? (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      } : props.onClick,
+      ...stateAttributes({ disabled: isDisabled, loading }),
+      "data-tea-touch": true,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", label: loadingLabel ?? "", className: "-ms-1" }) : null,
+        children
+      ]
+    }
+  );
+});
+export {
+  Button,
+  buttonVariants
+};
+//# sourceMappingURL=button.js.map

package/dist/inputs/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cva, cn, type VariantProps } from \"@tea-ui/utils\";\n\nimport { stateAttributes } from \"../internal\";\nimport { Spinner } from \"../feedback/spinner\";\n\n/**\n * TEA UI — Button. The reference implementation for every component in TEA UI.\n *\n * Read this file before writing another component. It encodes the house style:\n *\n *  1. `cva` for the variant surface, always with `className` passed *into* the\n *     call so a consumer's class merges correctly. (HomeServerManager's Button\n *     did this and its Badge did not — which is how the two drifted.)\n *  2. `variant` and `size` are the only styling axes. There is no `color` prop\n *     and no `className` escape hatch that replaces a variant.\n *  3. State is exposed as data attributes, not only as styling.\n *  4. `asChild` is available on every component that renders an element, so a\n *     consumer can keep native semantics (a real `<a>`) and still get the\n *     styles.\n *  5. `loading` is a first-class state, not a `disabled` alias: it keeps the\n *     control's width, announces itself, and blocks repeat activation.\n *  6. `type` defaults to `\"button\"`. A TEA UI button inside a form is not a\n *     submit button by accident.\n *  7. The ref is forwarded.\n */\nexport const buttonVariants = cva(\n  [\n    \"relative inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap\",\n    \"border border-transparent font-medium\",\n    \"transition-[background-color,border-color,color,box-shadow,transform] duration-fast ease-standard\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n    // A pressed control moves 1px. It is the cheapest possible tactile feedback\n    // and the only one available on a touch device.\n    \"active:translate-y-px\",\n  ],\n  {\n    variants: {\n      variant: {\n        primary:\n          \"bg-primary text-primary-fg border-primary hover:bg-primary-hover hover:border-primary-hover\",\n        secondary: \"bg-surface-3 text-fg border-line hover:bg-line hover:border-line-strong\",\n        outline: \"bg-transparent text-fg border-line hover:bg-surface-2 hover:border-line-strong\",\n        ghost: \"bg-transparent text-fg-muted border-transparent hover:bg-surface-3 hover:text-fg\",\n        subtle: \"bg-primary-subtle text-primary border-primary-border hover:bg-primary-subtle/80\",\n        destructive: \"bg-destructive text-destructive-fg border-destructive hover:brightness-110\",\n        link: \"bg-transparent text-primary border-transparent underline-offset-4 hover:underline p-0 h-auto\",\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        \"icon-sm\":\n          \"size-[calc(var(--tea-control-h)-0.25rem)] p-0 [--tea-control-icon:0.875rem] has-[svg]:size-[length:var(--tea-control-icon)]\",\n        \"icon-md\":\n          \"size-[length:var(--tea-control-h)] p-0 [--tea-control-icon:1rem] has-[svg]:size-[length:var(--tea-control-icon)]\",\n        \"icon-lg\":\n          \"size-[calc(var(--tea-control-h)+0.5rem)] p-0 [--tea-control-icon:1.25rem] has-[svg]:size-[length:var(--tea-control-icon)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends Omit<React.ComponentProps<\"button\">, \"color\">,\n    VariantProps<typeof buttonVariants> {\n  /**\n   * Render the consumer's single child element instead of a `<button>`, keeping\n   * the styling. Use this whenever the control is really a link or a router\n   * link — never to work around a nested-interactive problem.\n   */\n  asChild?: boolean | undefined;\n  /**\n   * The element to render instead of `<button>`. Prefer `asChild`; this exists\n   * for cases where the consumer must supply an element TEA UI cannot wrap.\n   */\n  as?: React.ElementType | undefined;\n  /**\n   * The control is performing an action. Shows a spinner, keeps the width, sets\n   * `aria-busy`, and blocks repeat activation — it does *not* collapse to a\n   * disabled control, so the label does not shift and the user can still read it.\n   */\n  loading?: boolean | undefined;\n  /** Accessible name for the spinner announced while `loading`. */\n  loadingLabel?: string | undefined;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    className,\n    variant,\n    size,\n    asChild = false,\n    as,\n    loading = false,\n    loadingLabel,\n    disabled,\n    type,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const Component = asChild ? Slot.Root : (as ?? \"button\");\n  const isDisabled = disabled === true || loading;\n\n  return (\n    <Component\n      ref={ref as React.Ref<HTMLButtonElement>}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...(asChild\n        ? {}\n        : ({ type: type ?? \"button\", disabled: isDisabled, \"aria-busy\": loading || undefined } as const))}\n      aria-disabled={loading || undefined}\n      // A loading button is a real `disabled` element, not a polite one: repeat\n      // activation must be impossible, or an impatient second click submits a\n      // save twice. The label stays readable and the width does not change.\n      onClick={\n        loading\n          ? (event: React.MouseEvent) => {\n              event.preventDefault();\n              event.stopPropagation();\n            }\n          : props.onClick\n      }\n      {...stateAttributes({ disabled: isDisabled, loading })}\n      data-tea-touch\n      {...props}\n    >\n      {loading ? <Spinner size=\"sm\" label={loadingLabel ?? \"\"} className=\"-ms-1\" /> : null}\n      {children}\n    </Component>\n  );\n});\n\n"],"mappings":"AAiHI,SAsBa,KAtBb;AAjHH,YAAY,WAAW;AACxB,SAAS,YAAY;AACrB,SAAS,KAAK,UAA6B;AAE3C,SAAS,uBAAuB;AAChC,SAAS,eAAe;AAsBjB,MAAM,iBAAiB;AAAA,EAC5B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WAAW;AAAA,QACX,SAAS;AAAA,QACT,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,WACE;AAAA,QACF,WACE;AAAA,QACF,WACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AA0BO,MAAM,SAAS,MAAM,WAA2C,SAASA,QAC9E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,YAAY,UAAU,KAAK,OAAQ,MAAM;AAC/C,QAAM,aAAa,aAAa,QAAQ;AAExC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MACzD,GAAI,UACD,CAAC,IACA,EAAE,MAAM,QAAQ,UAAU,UAAU,YAAY,aAAa,WAAW,OAAU;AAAA,MACvF,iBAAe,WAAW;AAAA,MAI1B,SACE,UACI,CAAC,UAA4B;AAC3B,cAAM,eAAe;AACrB,cAAM,gBAAgB;AAAA,MACxB,IACA,MAAM;AAAA,MAEX,GAAG,gBAAgB,EAAE,UAAU,YAAY,QAAQ,CAAC;AAAA,MACrD,kBAAc;AAAA,MACb,GAAG;AAAA,MAEH;AAAA,kBAAU,oBAAC,WAAQ,MAAK,MAAK,OAAO,gBAAgB,IAAI,WAAU,SAAQ,IAAK;AAAA,QAC/E;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;","names":["Button"]}

package/dist/inputs/checkbox.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Checkbox as Checkbox$1 } from 'radix-ui';
+
+/**
+ * TEA UI — Checkbox.
+ *
+ * A native `role="checkbox"` wrapped in Radix's primitive, which renders a
+ * `<button>` plus a hidden native `<input>` so the control still participates in
+ * form submission, in form reset, and in the browser's own validation UI.
+ *
+ * The naming question, which is where this component could have gone wrong:
+ *
+ *  - **Inside a `Field`**: `FieldLabel` renders `<label htmlFor>` pointing at the
+ *    control's id. A `<button>` is a *labelable element* in HTML, so the
+ *    association is real rather than a convention that happens to work.
+ *  - **Standalone**: `label` wraps the control and its text in a `<label>`, which
+ *    gives the same implicit association.
+ *
+ * `indeterminate` exists because "some but not all" is a real state of a parent
+ * checkbox that no amount of colour can express. It is reported as
+ * `aria-checked="mixed"` and drawn as a dash. Clearing it is the *parent's* job:
+ * pass `indeterminate={someSelected}` and update it in `onCheckedChange`.
+ */
+interface CheckboxProps extends Omit<React.ComponentProps<typeof Checkbox$1.Root>, "checked" | "defaultChecked" | "indeterminate" | "children"> {
+    /** Controlled checked state. */
+    checked?: boolean | undefined;
+    /** Uncontrolled initial checked state. */
+    defaultChecked?: boolean | undefined;
+    /** Called when the checked state changes, in both controlled and uncontrolled mode. */
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
+    /** Some but not all children are checked. Draws a dash, reports `aria-checked="mixed"`. */
+    indeterminate?: boolean | undefined;
+    /** Text next to the box, for a control used without a `Field`. */
+    label?: React.ReactNode | undefined;
+    className?: string | undefined;
+}
+/**
+ * @example
+ * ```tsx
+ * <Field>
+ *   <FieldLabel>Benachrichtigungen per E-Mail</FieldLabel>
+ *   <Checkbox defaultChecked />
+ * </Field>
+ * ```
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Checkbox, type CheckboxProps };

package/dist/inputs/checkbox.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { Check, Minus } from "@tea-ui/icons";
+import { cn } from "@tea-ui/utils";
+import { dataSlot, stateAttributes, useControllableState } from "../internal/index.js";
+import { useFieldControlProps } from "./field.js";
+const Checkbox = React.forwardRef(function Checkbox2({
+  className,
+  label,
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  indeterminate = false,
+  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: "Checkbox"
+  });
+  const control = /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      ref,
+      id: field.id,
+      checked: indeterminate ? "indeterminate" : isChecked,
+      onCheckedChange: (next) => setIsChecked(next === true),
+      disabled: isDisabled,
+      required: isRequired,
+      "aria-invalid": field["aria-invalid"],
+      "aria-describedby": field["aria-describedby"],
+      "aria-required": isRequired || void 0,
+      "data-tea-touch": true,
+      className: cn(
+        // `rounded-pill` is one of the seven documented exceptions to TEA
+        // geometry: a checkbox is a control marker, not a surface.
+        "size-4 shrink-0 rounded-pill border border-line-strong bg-surface",
+        "inline-flex items-center justify-center p-0 text-primary-fg",
+        "transition-[background-color,border-color,box-shadow] 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",
+        "data-[state=indeterminate]:border-primary data-[state=indeterminate]: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("checkbox"),
+      ...props,
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "size-full", children: indeterminate ? /* @__PURE__ */ jsx(Minus, { className: "size-full" }) : /* @__PURE__ */ jsx(Check, { className: "size-full" }) })
+    }
+  );
+  if (label === void 0 || label === null || label === false) return control;
+  return /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-2 text-ui", ...dataSlot("checkbox-label"), children: [
+    control,
+    /* @__PURE__ */ jsx("span", { children: label })
+  ] });
+});
+export {
+  Checkbox
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/inputs/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/inputs/checkbox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport { Check, Minus } from \"@tea-ui/icons\";\nimport { cn } from \"@tea-ui/utils\";\n\nimport { dataSlot, stateAttributes, useControllableState } from \"../internal\";\nimport { useFieldControlProps } from \"./field\";\n\n/**\n * TEA UI — Checkbox.\n *\n * A native `role=\"checkbox\"` wrapped in Radix's primitive, which renders a\n * `<button>` plus a hidden native `<input>` so the control still participates in\n * form submission, in form reset, and in the browser's own validation UI.\n *\n * The naming question, which is where this component could have gone wrong:\n *\n *  - **Inside a `Field`**: `FieldLabel` renders `<label htmlFor>` pointing at the\n *    control's id. A `<button>` is a *labelable element* in HTML, so the\n *    association is real rather than a convention that happens to work.\n *  - **Standalone**: `label` wraps the control and its text in a `<label>`, which\n *    gives the same implicit association.\n *\n * `indeterminate` exists because \"some but not all\" is a real state of a parent\n * checkbox that no amount of colour can express. It is reported as\n * `aria-checked=\"mixed\"` and drawn as a dash. Clearing it is the *parent's* job:\n * pass `indeterminate={someSelected}` and update it in `onCheckedChange`.\n */\nexport interface CheckboxProps\n  extends Omit<\n    React.ComponentProps<typeof CheckboxPrimitive.Root>,\n    \"checked\" | \"defaultChecked\" | \"indeterminate\" | \"children\"\n  > {\n  /** Controlled checked state. */\n  checked?: boolean | undefined;\n  /** Uncontrolled initial checked state. */\n  defaultChecked?: boolean | undefined;\n  /** Called when the checked state changes, in both controlled and uncontrolled mode. */\n  onCheckedChange?: ((checked: boolean) => void) | undefined;\n  /** Some but not all children are checked. Draws a dash, reports `aria-checked=\"mixed\"`. */\n  indeterminate?: boolean | undefined;\n  /** Text next to the box, 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>Benachrichtigungen per E-Mail</FieldLabel>\n *   <Checkbox defaultChecked />\n * </Field>\n * ```\n */\nexport const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(function Checkbox(\n  {\n    className,\n    label,\n    checked,\n    defaultChecked = false,\n    onCheckedChange,\n    indeterminate = false,\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  // The state is held here rather than inside Radix so that `data-checked` is\n  // exact in *uncontrolled* use too. Passing a controlled value to Radix and\n  // asking the DOM afterwards would be a second source of truth for the one\n  // thing the test suite asserts on.\n  const [isChecked, setIsChecked] = useControllableState({\n    value: checked,\n    defaultValue: defaultChecked,\n    onChange: (next) => onCheckedChange?.(next),\n    name: \"Checkbox\",\n  });\n\n  const control = (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      id={field.id}\n      checked={indeterminate ? \"indeterminate\" : isChecked}\n      onCheckedChange={(next) => setIsChecked(next === true)}\n      disabled={isDisabled}\n      required={isRequired}\n      aria-invalid={field[\"aria-invalid\"]}\n      aria-describedby={field[\"aria-describedby\"]}\n      aria-required={isRequired || undefined}\n      data-tea-touch\n      className={cn(\n        // `rounded-pill` is one of the seven documented exceptions to TEA\n        // geometry: a checkbox is a control marker, not a surface.\n        \"size-4 shrink-0 rounded-pill border border-line-strong bg-surface\",\n        \"inline-flex items-center justify-center p-0 text-primary-fg\",\n        \"transition-[background-color,border-color,box-shadow] 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        \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"aria-[invalid=true]:border-critical\",\n        className,\n      )}\n      {...stateAttributes({\n        disabled: isDisabled,\n        invalid: field[\"aria-invalid\"] === true,\n        checked: isChecked,\n      })}\n      {...dataSlot(\"checkbox\")}\n      {...props}\n    >\n      {/* Radix mounts the indicator for the `checked` *and* the `indeterminate`\n          state, so nothing here is forced into the DOM. */}\n      <CheckboxPrimitive.Indicator className=\"size-full\">\n        {indeterminate ? <Minus className=\"size-full\" /> : <Check className=\"size-full\" />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.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(\"checkbox-label\")}>\n      {control}\n      <span>{label}</span>\n    </label>\n  );\n});\n"],"mappings":"AAyHyB,cAQrB,YARqB;AAzHxB,YAAY,WAAW;AACxB,SAAS,YAAY,yBAAyB;AAC9C,SAAS,OAAO,aAAa;AAC7B,SAAS,UAAU;AAEnB,SAAS,UAAU,iBAAiB,4BAA4B;AAChE,SAAS,4BAA4B;AAiD9B,MAAM,WAAW,MAAM,WAA6C,SAASA,UAClF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,gBAAgB;AAAA,EAChB;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;AAMzD,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,kBAAkB;AAAA,IAAlB;AAAA,MACC;AAAA,MACA,IAAI,MAAM;AAAA,MACV,SAAS,gBAAgB,kBAAkB;AAAA,MAC3C,iBAAiB,CAAC,SAAS,aAAa,SAAS,IAAI;AAAA,MACrD,UAAU;AAAA,MACV,UAAU;AAAA,MACV,gBAAc,MAAM,cAAc;AAAA,MAClC,oBAAkB,MAAM,kBAAkB;AAAA,MAC1C,iBAAe,cAAc;AAAA,MAC7B,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,QACA;AAAA,MACF;AAAA,MACC,GAAG,gBAAgB;AAAA,QAClB,UAAU;AAAA,QACV,SAAS,MAAM,cAAc,MAAM;AAAA,QACnC,SAAS;AAAA,MACX,CAAC;AAAA,MACA,GAAG,SAAS,UAAU;AAAA,MACtB,GAAG;AAAA,MAIJ,8BAAC,kBAAkB,WAAlB,EAA4B,WAAU,aACpC,0BAAgB,oBAAC,SAAM,WAAU,aAAY,IAAK,oBAAC,SAAM,WAAU,aAAY,GAClF;AAAA;AAAA,EACF;AAGF,MAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,MAAO,QAAO;AAErE,SACE,qBAAC,WAAM,WAAU,0CAA0C,GAAG,SAAS,gBAAgB,GACpF;AAAA;AAAA,IACD,oBAAC,UAAM,iBAAM;AAAA,KACf;AAEJ,CAAC;","names":["Checkbox"]}

package/dist/inputs/combobox.d.ts

@@ -0,0 +1,77 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from '@tea-ui/utils';
+
+/**
+ * TEA UI — Combobox.
+ *
+ * The ARIA 1.2 combobox/listbox pattern, implemented properly. This component
+ * exists because the audit's global search had *no* combobox semantics at all:
+ * no `role="combobox"`, no `aria-expanded`, no `aria-activedescendant`, no arrow
+ * keys, and results that were plain buttons. A screen-reader user and a
+ * keyboard-only user both had no way to know a result list existed, let alone
+ * move through it.
+ *
+ * The pattern, in full:
+ *  - the input is the combobox: `role="combobox"`, `aria-expanded`,
+ *    `aria-controls` pointing at the list, `aria-activedescendant` pointing at
+ *    the active option;
+ *  - the list is `role="listbox"`, the options are `role="option"` with
+ *    `aria-selected`;
+ *  - ArrowDown/ArrowUp move the active option and scroll it into view,
+ *    Home/End jump, Enter selects, Escape reverts the query first and closes
+ *    second;
+ *  - the active option is tracked with `aria-activedescendant`, never by moving
+ *    DOM focus, so the query text is not destroyed on every keystroke.
+ *
+ * Options are supplied, not fetched. The component takes `options` and an
+ * optional `filter`; async resolution belongs to the product, which is why
+ * `loading` and `emptyMessage` are props rather than a data source.
+ */
+interface ComboboxOption {
+    /** The value emitted on selection. */
+    readonly value: string;
+    /** The visible label. */
+    readonly label: string;
+    /** Optional secondary text. Never the only carrier of meaning. */
+    readonly description?: string | undefined;
+    /** Group heading. Rendered as a `role="presentation"` separator row. */
+    readonly group?: string | undefined;
+    /** Disabled options stay visible and stay focusable, but cannot be chosen. */
+    readonly disabled?: boolean | undefined;
+}
+interface ComboboxProps extends Omit<React.ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "onSelect" | "size">, Omit<VariantProps<typeof comboboxTriggerVariants>, "size"> {
+    /** The accessible name. Required — the search icon is not a label. */
+    label: string;
+    options: readonly ComboboxOption[];
+    /** The controlled value. */
+    value?: string | undefined;
+    /** The uncontrolled initial value. */
+    defaultValue?: string | undefined;
+    /** Called with the emitted `value` of the chosen option. */
+    onValueChange?: ((value: string) => undefined | void) | undefined;
+    /** Called on every keystroke, with the raw query. */
+    onQueryChange?: ((query: string) => void) | undefined;
+    /**
+     * Filtering. Defaults to a case- and diacritic-insensitive substring match
+     * over the label, so a product that needs fuzzy search opts in rather than
+     * getting it by accident.
+     */
+    filter?: ((option: ComboboxOption, query: string) => boolean) | undefined;
+    /** Shown when the query matches nothing. */
+    emptyMessage?: string | undefined;
+    /** A search is running. Shows a spinner and sets `aria-busy`. */
+    loading?: boolean | undefined;
+    /** Disable the whole control. */
+    disabled?: boolean | undefined;
+    /** Allow choosing more than one option. */
+    multiple?: boolean | undefined;
+    className?: string | undefined;
+}
+declare const comboboxTriggerVariants: (props?: ({
+    variant?: "outline" | "ghost" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/** Stable, id-safe DOM ids for one listbox. */
+declare const Combobox: React.ForwardRefExoticComponent<Omit<ComboboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+export { Combobox, type ComboboxOption, type ComboboxProps, comboboxTriggerVariants };