@seekalfred/primitives 0.7.3 → 0.8.0

package/dist/tag-input/tag-input.js

@@ -2,9 +2,9 @@
 import { cn, cnAll } from "../lib/cn.js";
 import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from "../lib/motion.js";
 import { useHeightFollow } from "../lib/height-follow.js";
+import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
 import { fieldSurfaceVariants } from "../lib/field-surface.js";
 import { useLeavingList } from "../lib/leaving-list.js";
-import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from "react";
 import { Button, Group, Input, Tag, TagGroup, TagList } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/text-shimmer/text-shimmer.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 //#region src/text-shimmer/text-shimmer.d.ts
 /**
  * TextShimmer: a calm light sweep across a short status line, such as
@@ -10,10 +11,25 @@
  * over a short transition. A changed label rises in place. Under reduced motion
  * nothing moves and the text stays in its muted base colour. The component sets
  * `aria-busy`; announce completion from your own live region.
+ *
+ * The label can carry inline markup, such as a `<strong>` name or a count: the
+ * sweep is clipped to all the text inside it. Keep that markup to plain inline
+ * text (no icons, backgrounds, transforms or positioning, which the text clip
+ * does not reach). Give non-string children a `swapKey` so a changed label still
+ * rises in place.
  */
 export interface TextShimmerProps {
-  /** The status text. Keep it to one short line. */
-  children: string;
+  /**
+   * The status text. Keep it to one short line. A string, or inline text with
+   * markup such as `<strong>` or a count; the sweep paints over all of it.
+   */
+  children: ReactNode;
+  /**
+   * Identifies the label, so a changed label rises in place. A string or number
+   * child is its own key. Other children have no key unless you pass one, and
+   * then update in place without the rise. An empty string counts as unset.
+   */
+  swapKey?: string;
   /** Sweep while work is ongoing. @default true */
   active?: boolean;
   /** Seconds for one pass of the band across the text (the pause between passes comes on top). @default 1.8 */

package/dist/text-shimmer/text-shimmer.js

@@ -4,9 +4,12 @@ import { SwapText } from "../lib/swap-text.js";
 import { createElement, forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/text-shimmer/text-shimmer.tsx
+/** The key for children that bring none of their own: it never changes, so they never swap. */
+const STILL_KEY = "text-shimmer";
 /** The sweep takes this share of one cycle; the rest is the rest between passes. */
 const SWEEP_SHARE = .76;
-const TextShimmer = forwardRef(function TextShimmer({ children, active = true, duration = 1.8, as = "span", className, id }, ref) {
+const TextShimmer = forwardRef(function TextShimmer({ children, swapKey, active = true, duration = 1.8, as = "span", className, id }, ref) {
+	const key = swapKey || (typeof children === "string" || typeof children === "number" ? String(children) : STILL_KEY);
 	return createElement(as, {
 		ref,
 		id,
@@ -16,7 +19,7 @@ const TextShimmer = forwardRef(function TextShimmer({ children, active = true, d
 		style: { "--text-shimmer-cycle": `${duration / SWEEP_SHARE}s` },
 		className: cn("shimmer-text", className)
 	}, /* @__PURE__ */ jsx(SwapText, {
-		swapKey: children,
+		swapKey: key,
 		children: /* @__PURE__ */ jsx("span", {
 			className: "shimmer-text-label",
 			children

package/dist/text-shimmer/text-shimmer.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-shimmer.js","names":[],"sources":["../../src/text-shimmer/text-shimmer.tsx"],"sourcesContent":["\"use client\";\n\nimport { createElement, forwardRef, type CSSProperties } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * TextShimmer: a calm light sweep across a short status line, such as\n * \"Thinking\" or \"Generating summary\", to show that work is ongoing.\n *\n * The band is the current text colour over a muted base, painted by CSS alone\n * (a gradient clipped to the text, its position driven by a registered custom\n * property), so nothing re-renders per frame. A pause of about a quarter of the\n * cycle follows each pass. When `active` turns false the text settles to solid\n * over a short transition. A changed label rises in place. Under reduced motion\n * nothing moves and the text stays in its muted base colour. The component sets\n * `aria-busy`; announce completion from your own live region.\n */\nexport interface TextShimmerProps {\n  /** The status text. Keep it to one short line. */\n  children: string;\n  /** Sweep while work is ongoing. @default true */\n  active?: boolean;\n  /** Seconds for one pass of the band across the text (the pause between passes comes on top). @default 1.8 */\n  duration?: number;\n  /** The element to render. @default \"span\" */\n  as?: \"span\" | \"p\" | \"div\" | \"h2\" | \"h3\" | \"h4\";\n  /** Extra classes for the element. Merged last. */\n  className?: string;\n  id?: string;\n}\n\n/** The sweep takes this share of one cycle; the rest is the rest between passes. */\nconst SWEEP_SHARE = 0.76;\n\nexport const TextShimmer = forwardRef<HTMLElement, TextShimmerProps>(function TextShimmer(\n  { children, active = true, duration = 1.8, as = \"span\", className, id },\n  ref,\n) {\n  return createElement(\n    as,\n    {\n      ref,\n      id,\n      \"data-slot\": \"text-shimmer\",\n      \"data-state\": active ? \"active\" : \"idle\",\n      \"aria-busy\": active || undefined,\n      style: { \"--text-shimmer-cycle\": `${duration / SWEEP_SHARE}s` } as CSSProperties,\n      className: cn(\"shimmer-text\", className),\n    },\n    <SwapText swapKey={children}>\n      <span className=\"shimmer-text-label\">{children}</span>\n    </SwapText>,\n  );\n});\n"],"mappings":";;;;;;;AAkCA,MAAM,cAAc;AAEpB,MAAa,cAAc,WAA0C,SAAS,YAC5E,EAAE,UAAU,SAAS,MAAM,WAAW,KAAK,KAAK,QAAQ,WAAW,MACnE,KACA;CACA,OAAO,cACL,IACA;EACE;EACA;EACA,aAAa;EACb,cAAc,SAAS,WAAW;EAClC,aAAa,UAAU,KAAA;EACvB,OAAO,EAAE,wBAAwB,GAAG,WAAW,YAAY,GAAG;EAC9D,WAAW,GAAG,gBAAgB,SAAS;CACzC,GACA,oBAAC,UAAD;EAAU,SAAS;EACjB,UAAA,oBAAC,QAAD;GAAM,WAAU;GAAsB;EAAe,CAAA;CAC7C,CAAA,CACZ;AACF,CAAC"}
+{"version":3,"file":"text-shimmer.js","names":[],"sources":["../../src/text-shimmer/text-shimmer.tsx"],"sourcesContent":["\"use client\";\n\nimport { createElement, forwardRef, type CSSProperties, type ReactNode } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * TextShimmer: a calm light sweep across a short status line, such as\n * \"Thinking\" or \"Generating summary\", to show that work is ongoing.\n *\n * The band is the current text colour over a muted base, painted by CSS alone\n * (a gradient clipped to the text, its position driven by a registered custom\n * property), so nothing re-renders per frame. A pause of about a quarter of the\n * cycle follows each pass. When `active` turns false the text settles to solid\n * over a short transition. A changed label rises in place. Under reduced motion\n * nothing moves and the text stays in its muted base colour. The component sets\n * `aria-busy`; announce completion from your own live region.\n *\n * The label can carry inline markup, such as a `<strong>` name or a count: the\n * sweep is clipped to all the text inside it. Keep that markup to plain inline\n * text (no icons, backgrounds, transforms or positioning, which the text clip\n * does not reach). Give non-string children a `swapKey` so a changed label still\n * rises in place.\n */\nexport interface TextShimmerProps {\n  /**\n   * The status text. Keep it to one short line. A string, or inline text with\n   * markup such as `<strong>` or a count; the sweep paints over all of it.\n   */\n  children: ReactNode;\n  /**\n   * Identifies the label, so a changed label rises in place. A string or number\n   * child is its own key. Other children have no key unless you pass one, and\n   * then update in place without the rise. An empty string counts as unset.\n   */\n  swapKey?: string;\n  /** Sweep while work is ongoing. @default true */\n  active?: boolean;\n  /** Seconds for one pass of the band across the text (the pause between passes comes on top). @default 1.8 */\n  duration?: number;\n  /** The element to render. @default \"span\" */\n  as?: \"span\" | \"p\" | \"div\" | \"h2\" | \"h3\" | \"h4\";\n  /** Extra classes for the element. Merged last. */\n  className?: string;\n  id?: string;\n}\n\n/** The key for children that bring none of their own: it never changes, so they never swap. */\nconst STILL_KEY = \"text-shimmer\";\n\n/** The sweep takes this share of one cycle; the rest is the rest between passes. */\nconst SWEEP_SHARE = 0.76;\n\nexport const TextShimmer = forwardRef<HTMLElement, TextShimmerProps>(function TextShimmer(\n  { children, swapKey, active = true, duration = 1.8, as = \"span\", className, id },\n  ref,\n) {\n  const key =\n    swapKey ||\n    (typeof children === \"string\" || typeof children === \"number\" ? String(children) : STILL_KEY);\n  return createElement(\n    as,\n    {\n      ref,\n      id,\n      \"data-slot\": \"text-shimmer\",\n      \"data-state\": active ? \"active\" : \"idle\",\n      \"aria-busy\": active || undefined,\n      style: { \"--text-shimmer-cycle\": `${duration / SWEEP_SHARE}s` } as CSSProperties,\n      className: cn(\"shimmer-text\", className),\n    },\n    <SwapText swapKey={key}>\n      <span className=\"shimmer-text-label\">{children}</span>\n    </SwapText>,\n  );\n});\n"],"mappings":";;;;;;;AAiDA,MAAM,YAAY;;AAGlB,MAAM,cAAc;AAEpB,MAAa,cAAc,WAA0C,SAAS,YAC5E,EAAE,UAAU,SAAS,SAAS,MAAM,WAAW,KAAK,KAAK,QAAQ,WAAW,MAC5E,KACA;CACA,MAAM,MACJ,YACC,OAAO,aAAa,YAAY,OAAO,aAAa,WAAW,OAAO,QAAQ,IAAI;CACrF,OAAO,cACL,IACA;EACE;EACA;EACA,aAAa;EACb,cAAc,SAAS,WAAW;EAClC,aAAa,UAAU,KAAA;EACvB,OAAO,EAAE,wBAAwB,GAAG,WAAW,YAAY,GAAG;EAC9D,WAAW,GAAG,gBAAgB,SAAS;CACzC,GACA,oBAAC,UAAD;EAAU,SAAS;EACjB,UAAA,oBAAC,QAAD;GAAM,WAAU;GAAsB;EAAe,CAAA;CAC7C,CAAA,CACZ;AACF,CAAC"}

package/dist/textarea/textarea.d.ts

@@ -44,6 +44,13 @@ export interface TextareaProps extends Omit<TextAreaProps, "className" | "style"
    * `undefined` value closes the row.
    */
   error?: string;
+  /**
+   * The field must be filled: the textarea is `required` (announced by screen
+   * readers, and checked by native form validation) and the label shows the
+   * required marker. The same prop as PasswordField's.
+   * @default false
+   */
+  isRequired?: boolean;
 }
 export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 //#endregion

package/dist/textarea/textarea.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { fieldSurfaceVariants } from "../lib/field-surface.js";
 import { FieldShell, hasFieldProps, useFieldWiring } from "../lib/field-shell.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { TextArea } from "react-aria-components";
@@ -27,7 +27,7 @@ const textareaVariants = cva([
 	"leading-(--leading-normal)"
 ]);
 const Textarea = forwardRef(function Textarea(allProps, ref) {
-	const { className, label, description, error, ...props } = allProps;
+	const { className, label, description, error, isRequired, ...props } = allProps;
 	const field = useFieldWiring({
 		enabled: hasFieldProps(allProps),
 		id: props.id,
@@ -39,6 +39,7 @@ const Textarea = forwardRef(function Textarea(allProps, ref) {
 	const textarea = /* @__PURE__ */ jsx(TextArea, {
 		ref,
 		...props,
+		...isRequired ? { required: true } : {},
 		...field.controlProps,
 		"data-slot": "textarea",
 		className: cn(textareaVariants(), className)
@@ -51,6 +52,7 @@ const Textarea = forwardRef(function Textarea(allProps, ref) {
 		hintId: field.hintId,
 		error,
 		errorId: field.errorId,
+		required: isRequired,
 		wordExit: "quick",
 		children: textarea
 	});

package/dist/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":["AriaTextArea"],"sources":["../../src/textarea/textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  TextArea as AriaTextArea,\n  type TextAreaProps as AriaTextAreaProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { FieldShell, hasFieldProps, useFieldWiring } from \"../lib/field-shell.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/**\n * Textarea, ported from the legacy component onto React Aria's TextArea.\n *\n * Census: 3 files, 3 uses -- `value`, `onChange`, `placeholder`, `id`,\n * `ref`. All native props, all still native here.\n *\n * The surface comes from `fieldSurfaceVariants`, shared with Input. The two\n * legacy files styled it separately and had already drifted -- different\n * background, different focus ring, invalid styling on one and not the\n * other -- and none of those differences was a decision anyone made.\n */\nexport const textareaVariants = cva([\n  fieldSurfaceVariants(),\n\n  // min-h-20 is 80px, the legacy min-h-[80px] -- but as a spacing-scale step\n  // rather than a bracket value, which check:hardcoding rejects.\n  \"min-h-20\",\n  \"px-(--density-control-pad-md) py-(--density-control-pad-sm)\",\n  \"text-base\",\n\n  // A textarea is resizable by the user agent, and horizontal resize breaks\n  // any layout it sits in. Vertical only.\n  \"resize-y\",\n  // Height is content, not a control slot, so the line-height has to be set\n  // explicitly -- unset it computes to `normal`, which varies with the\n  // font's own metrics.\n  \"leading-(--leading-normal)\",\n]);\n\n/**\n * A multi-line text field.\n *\n * @example\n * <Textarea placeholder=\"Tell us more\" value={v} onChange={e => set(e.target.value)} />\n */\nexport interface TextareaProps extends Omit<AriaTextAreaProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * A visible label above the field, tied to it with `htmlFor`. Passing any of\n   * `label`, `description` or `error` (even as `undefined`) wraps the field;\n   * with none of them the DOM is exactly the bare textarea. Do not also pass\n   * `aria-label`: it wins over the label (WCAG 2.5.3). Ignored inside a React\n   * Aria `TextField`, which supplies its own label and messages.\n   */\n  label?: ReactNode;\n  /**\n   * Helper text under the field, named by `aria-describedby`. A count in it,\n   * such as \"12/200 characters\", rolls digit by digit as it changes. Opens on a\n   * spring when it appears after mount; nothing animates on first render, and\n   * reduced motion swaps it instantly. A string, because the copy is animated\n   * word by word.\n   */\n  description?: string;\n  /**\n   * Error text under the field. Sets `aria-invalid`, so the field takes its\n   * invalid border, and is announced as an alert when it appears. An empty or\n   * `undefined` value closes the row.\n   */\n  error?: string;\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function Textarea(allProps, ref) {\n    const { className, label, description, error, ...props } = allProps;\n    const field = useFieldWiring({\n      enabled: hasFieldProps(allProps),\n      id: props.id,\n      describedBy: props[\"aria-describedby\"],\n      invalid: props[\"aria-invalid\"],\n      description,\n      error,\n    });\n    const textarea = (\n      <AriaTextArea\n        ref={ref}\n        {...props}\n        {...field.controlProps}\n        data-slot=\"textarea\"\n        className={cn(textareaVariants(), className)}\n      />\n    );\n    if (!field.active) return textarea;\n    return (\n      <FieldShell\n        label={label}\n        controlId={field.controlId}\n        description={description}\n        hintId={field.hintId}\n        error={error}\n        errorId={field.errorId}\n        wordExit=\"quick\"\n      >\n        {textarea}\n      </FieldShell>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,mBAAmB,IAAI;CAClC,qBAAqB;CAIrB;CACA;CACA;CAIA;CAIA;AACF,CAAC;AAmCD,MAAa,WAAW,WACtB,SAAS,SAAS,UAAU,KAAK;CAC/B,MAAM,EAAE,WAAW,OAAO,aAAa,OAAO,GAAG,UAAU;CAC3D,MAAM,QAAQ,eAAe;EAC3B,SAAS,cAAc,QAAQ;EAC/B,IAAI,MAAM;EACV,aAAa,MAAM;EACnB,SAAS,MAAM;EACf;EACA;CACF,CAAC;CACD,MAAM,WACJ,oBAACA,UAAD;EACO;EACL,GAAI;EACJ,GAAI,MAAM;EACV,aAAU;EACV,WAAW,GAAG,iBAAiB,GAAG,SAAS;CAC5C,CAAA;CAEH,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,OACE,oBAAC,YAAD;EACS;EACP,WAAW,MAAM;EACJ;EACb,QAAQ,MAAM;EACP;EACP,SAAS,MAAM;EACf,UAAS;EAER,UAAA;CACS,CAAA;AAEhB,CACF"}
+{"version":3,"file":"textarea.js","names":["AriaTextArea"],"sources":["../../src/textarea/textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  TextArea as AriaTextArea,\n  type TextAreaProps as AriaTextAreaProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { FieldShell, hasFieldProps, useFieldWiring } from \"../lib/field-shell.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/**\n * Textarea, ported from the legacy component onto React Aria's TextArea.\n *\n * Census: 3 files, 3 uses -- `value`, `onChange`, `placeholder`, `id`,\n * `ref`. All native props, all still native here.\n *\n * The surface comes from `fieldSurfaceVariants`, shared with Input. The two\n * legacy files styled it separately and had already drifted -- different\n * background, different focus ring, invalid styling on one and not the\n * other -- and none of those differences was a decision anyone made.\n */\nexport const textareaVariants = cva([\n  fieldSurfaceVariants(),\n\n  // min-h-20 is 80px, the legacy min-h-[80px] -- but as a spacing-scale step\n  // rather than a bracket value, which check:hardcoding rejects.\n  \"min-h-20\",\n  \"px-(--density-control-pad-md) py-(--density-control-pad-sm)\",\n  \"text-base\",\n\n  // A textarea is resizable by the user agent, and horizontal resize breaks\n  // any layout it sits in. Vertical only.\n  \"resize-y\",\n  // Height is content, not a control slot, so the line-height has to be set\n  // explicitly -- unset it computes to `normal`, which varies with the\n  // font's own metrics.\n  \"leading-(--leading-normal)\",\n]);\n\n/**\n * A multi-line text field.\n *\n * @example\n * <Textarea placeholder=\"Tell us more\" value={v} onChange={e => set(e.target.value)} />\n */\nexport interface TextareaProps extends Omit<AriaTextAreaProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * A visible label above the field, tied to it with `htmlFor`. Passing any of\n   * `label`, `description` or `error` (even as `undefined`) wraps the field;\n   * with none of them the DOM is exactly the bare textarea. Do not also pass\n   * `aria-label`: it wins over the label (WCAG 2.5.3). Ignored inside a React\n   * Aria `TextField`, which supplies its own label and messages.\n   */\n  label?: ReactNode;\n  /**\n   * Helper text under the field, named by `aria-describedby`. A count in it,\n   * such as \"12/200 characters\", rolls digit by digit as it changes. Opens on a\n   * spring when it appears after mount; nothing animates on first render, and\n   * reduced motion swaps it instantly. A string, because the copy is animated\n   * word by word.\n   */\n  description?: string;\n  /**\n   * Error text under the field. Sets `aria-invalid`, so the field takes its\n   * invalid border, and is announced as an alert when it appears. An empty or\n   * `undefined` value closes the row.\n   */\n  error?: string;\n  /**\n   * The field must be filled: the textarea is `required` (announced by screen\n   * readers, and checked by native form validation) and the label shows the\n   * required marker. The same prop as PasswordField's.\n   * @default false\n   */\n  isRequired?: boolean;\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function Textarea(allProps, ref) {\n    const { className, label, description, error, isRequired, ...props } = allProps;\n    const field = useFieldWiring({\n      enabled: hasFieldProps(allProps),\n      id: props.id,\n      describedBy: props[\"aria-describedby\"],\n      invalid: props[\"aria-invalid\"],\n      description,\n      error,\n    });\n    const textarea = (\n      <AriaTextArea\n        ref={ref}\n        {...props}\n        {...(isRequired ? { required: true } : {})}\n        {...field.controlProps}\n        data-slot=\"textarea\"\n        className={cn(textareaVariants(), className)}\n      />\n    );\n    if (!field.active) return textarea;\n    return (\n      <FieldShell\n        label={label}\n        controlId={field.controlId}\n        description={description}\n        hintId={field.hintId}\n        error={error}\n        errorId={field.errorId}\n        required={isRequired}\n        wordExit=\"quick\"\n      >\n        {textarea}\n      </FieldShell>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,mBAAmB,IAAI;CAClC,qBAAqB;CAIrB;CACA;CACA;CAIA;CAIA;AACF,CAAC;AA0CD,MAAa,WAAW,WACtB,SAAS,SAAS,UAAU,KAAK;CAC/B,MAAM,EAAE,WAAW,OAAO,aAAa,OAAO,YAAY,GAAG,UAAU;CACvE,MAAM,QAAQ,eAAe;EAC3B,SAAS,cAAc,QAAQ;EAC/B,IAAI,MAAM;EACV,aAAa,MAAM;EACnB,SAAS,MAAM;EACf;EACA;CACF,CAAC;CACD,MAAM,WACJ,oBAACA,UAAD;EACO;EACL,GAAI;EACJ,GAAK,aAAa,EAAE,UAAU,KAAK,IAAI,CAAC;EACxC,GAAI,MAAM;EACV,aAAU;EACV,WAAW,GAAG,iBAAiB,GAAG,SAAS;CAC5C,CAAA;CAEH,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,OACE,oBAAC,YAAD;EACS;EACP,WAAW,MAAM;EACJ;EACb,QAAQ,MAAM;EACP;EACP,SAAS,MAAM;EACf,UAAU;EACV,UAAS;EAER,UAAA;CACS,CAAA;AAEhB,CACF"}

package/dist/toast/toast.d.ts

@@ -34,11 +34,11 @@ import { UNSTABLE_ToastQueue } from "react-aria-components";
 /** Where the region sits. Fixed, above everything, out of the way of content. */
 export declare const toastRegionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const toastVariants: (props?: ({
-  tone?: "success" | "warning" | "danger" | "neutral" | "info" | null | undefined;
+  tone?: "neutral" | "success" | "warning" | "danger" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** The status icon's circle: the tone's light fill with its AA text colour. */
 export declare const toastIconVariants: (props?: ({
-  tone?: "success" | "warning" | "danger" | "neutral" | "info" | null | undefined;
+  tone?: "neutral" | "success" | "warning" | "danger" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const toastCloseVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 /** What a toast carries. `title` is required: an unnamed toast announces nothing. */

package/dist/toggle-button/index.d.ts

@@ -0,0 +1,2 @@
+import { ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, toggleButtonGroupVariants, toggleButtonVariants } from "./toggle-button.js";
+export { ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, toggleButtonGroupVariants, toggleButtonVariants };

package/dist/toggle-button/index.js

@@ -0,0 +1,2 @@
+import { ToggleButton, ToggleButtonGroup, toggleButtonGroupVariants, toggleButtonVariants } from "./toggle-button.js";
+export { ToggleButton, ToggleButtonGroup, toggleButtonGroupVariants, toggleButtonVariants };

package/dist/toggle-button/toggle-button.d.ts

@@ -0,0 +1,93 @@
+import { VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
+import { ToggleButtonGroupProps, ToggleButtonProps } from "react-aria-components";
+//#region src/toggle-button/toggle-button.d.ts
+/**
+ * ToggleButton: a button that stays pressed. One question, two answers
+ * ("Has new reply", "Primary key"), where a Switch would sit in a form row and
+ * a Checkbox would need a label beside a box.
+ *
+ * Built on React Aria's `ToggleButton`, so it is a real `<button>` with
+ * `aria-pressed`; in a {@link ToggleButtonGroup} that allows one choice the
+ * same buttons are a toolbar of `aria-pressed` buttons. It is NOT Button with `aria-pressed` and a
+ * swapped variant, which is what the apps hand-build today: the selected look
+ * here does not rest on colour.
+ *
+ * SELECTED IS SHOWN THREE WAYS. A tint, a `primary-strong` edge and a check
+ * mark drawn in `currentColor`, so the state survives forced colours and
+ * colour-blindness (WCAG 1.4.1). The mark sits INSIDE the control's own box,
+ * in the corner, so it never shifts the layout when it appears and is never
+ * clipped by a table row or scroll area outside the border. An icon-only
+ * toggle carries it too.
+ *
+ * FOCUS follows the field surface: on `:focus-visible` the control's own 1px
+ * border turns dark and nothing else is drawn, no ring. Forced colours
+ * override a border colour, so only there does an outline come back.
+ *
+ * Every string is a STATIC literal. Tailwind scans source text, so a class
+ * assembled at runtime is invisible to it and would never be emitted.
+ */
+export declare const toggleButtonVariants: (props?: ({
+  size?: "sm" | "md" | null | undefined;
+  iconOnly?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The group's row. Buttons wrap rather than overflow a narrow container. */
+export declare const toggleButtonGroupVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+interface ToggleButtonProps$1 extends Omit<ToggleButtonProps, "className" | "style" | "children">, Omit<VariantProps<typeof toggleButtonVariants>, "iconOnly"> {
+  /** The label, or the glyph of an `iconOnly` toggle. */
+  children?: ReactNode;
+  /**
+   * Only a glyph, in a square button. Pass the glyph as `children` and name the
+   * button with `aria-label`; without one it has no accessible name.
+   *
+   * @default false
+   */
+  iconOnly?: boolean;
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/**
+ * A button that is on or off. Controlled with `isSelected` and
+ * `onChange(isSelected)`, or uncontrolled with `defaultSelected`.
+ *
+ * Give an icon-only toggle an `aria-label`, and wrap it in a `TooltipTrigger`
+ * when the glyph alone is not enough. The label should name the control, not
+ * its state: assistive technology says "pressed" itself.
+ *
+ * @example
+ * <ToggleButton isSelected={unread} onChange={setUnread}>Has new reply</ToggleButton>
+ * <ToggleButton iconOnly aria-label="Primary key"><KeyIcon /></ToggleButton>
+ */
+declare const ToggleButton$1: import("react").ForwardRefExoticComponent<ToggleButtonProps$1 & import("react").RefAttributes<HTMLButtonElement>>;
+interface ToggleButtonGroupProps$1 extends Omit<ToggleButtonGroupProps, "className" | "style"> {
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/**
+ * A row of ToggleButtons that share a selection. Always a toolbar of
+ * `aria-pressed` buttons: ONE tab stop, arrow keys move focus, Space or Enter
+ * toggles the focused button (selection never follows focus).
+ *
+ * `selectionMode="single"` (the default) lets one button be pressed at a time:
+ * pressing another moves the selection to it, and pressing the pressed one
+ * clears it unless `disallowEmptySelection`. Tab enters the group on the pressed
+ * button (on the first when none is). `"multiple"` lets any number be pressed.
+ * Each child needs an `id`, which is its key in `selectedKeys`.
+ *
+ * Why not `role="radiogroup"`: React Aria's single mode is a radio group in
+ * name only. Its arrows move focus and do not check, and every button is a tab
+ * stop, which is not the APG radio pattern. A true radio group needs the
+ * selection to follow focus, which a button that you press does not do. The
+ * toolbar of pressed buttons is the APG pattern that matches how these behave.
+ * If you need a radio group, use `RadioGroup` (`variant="card"` for the framed look).
+ *
+ * @example
+ * <ToggleButtonGroup aria-label="Range" selectionMode="single" disallowEmptySelection>
+ *   <ToggleButton id="7d">7 days</ToggleButton>
+ *   <ToggleButton id="30d">30 days</ToggleButton>
+ * </ToggleButtonGroup>
+ */
+declare const ToggleButtonGroup$1: import("react").ForwardRefExoticComponent<ToggleButtonGroupProps$1 & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ToggleButton$1 as ToggleButton, ToggleButtonGroup$1 as ToggleButtonGroup, ToggleButtonGroupProps$1 as ToggleButtonGroupProps, ToggleButtonProps$1 as ToggleButtonProps };
+//# sourceMappingURL=toggle-button.d.ts.map

package/dist/toggle-button/toggle-button.js

@@ -0,0 +1,199 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { cva } from "class-variance-authority";
+import { createContext, forwardRef, useContext, useMemo, useRef, useState } from "react";
+import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/toggle-button/toggle-button.tsx
+/**
+* ToggleButton: a button that stays pressed. One question, two answers
+* ("Has new reply", "Primary key"), where a Switch would sit in a form row and
+* a Checkbox would need a label beside a box.
+*
+* Built on React Aria's `ToggleButton`, so it is a real `<button>` with
+* `aria-pressed`; in a {@link ToggleButtonGroup} that allows one choice the
+* same buttons are a toolbar of `aria-pressed` buttons. It is NOT Button with `aria-pressed` and a
+* swapped variant, which is what the apps hand-build today: the selected look
+* here does not rest on colour.
+*
+* SELECTED IS SHOWN THREE WAYS. A tint, a `primary-strong` edge and a check
+* mark drawn in `currentColor`, so the state survives forced colours and
+* colour-blindness (WCAG 1.4.1). The mark sits INSIDE the control's own box,
+* in the corner, so it never shifts the layout when it appears and is never
+* clipped by a table row or scroll area outside the border. An icon-only
+* toggle carries it too.
+*
+* FOCUS follows the field surface: on `:focus-visible` the control's own 1px
+* border turns dark and nothing else is drawn, no ring. Forced colours
+* override a border colour, so only there does an outline come back.
+*
+* Every string is a STATIC literal. Tailwind scans source text, so a class
+* assembled at runtime is invisible to it and would never be emitted.
+*/
+const toggleButtonVariants = cva([
+	"relative inline-flex items-center justify-center gap-(--density-control-gap) shrink-0 whitespace-nowrap",
+	"rounded-control font-sans font-medium text-foreground",
+	"cursor-pointer select-none box-border",
+	"border-(length:--border-width) border-border bg-surface shadow-surface",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+	"[&_svg:not([class*='size-'])]:size-(--icon-sm)",
+	"[-webkit-tap-highlight-color:transparent]",
+	"motion-safe:transition-[border-color,background-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle",
+	"data-[hovered]:bg-muted data-[hovered]:border-border-strong",
+	"data-[selected]:bg-primary-subtle data-[selected]:border-primary-strong",
+	"data-[selected]:data-[hovered]:bg-primary-subtle",
+	"outline-none",
+	"data-[focus-visible]:border-foreground",
+	"data-[focus-visible]:data-[selected]:border-foreground",
+	"forced-colors:data-[focus-visible]:outline-solid",
+	"forced-colors:data-[focus-visible]:outline-(length:--focus-ring-width)",
+	"forced-colors:data-[focus-visible]:outline-offset-(--focus-ring-offset)",
+	"data-[disabled]:cursor-not-allowed data-[disabled]:bg-muted data-[disabled]:text-text-disabled data-[disabled]:border-border",
+	"data-[disabled]:data-[selected]:bg-muted data-[disabled]:data-[selected]:border-border"
+], {
+	variants: {
+		size: {
+			sm: "h-(--density-control-h-sm) text-sm",
+			md: "h-(--density-control-h-md) text-sm"
+		},
+		/** A square button that holds only a glyph. It must carry an `aria-label`. */
+		iconOnly: {
+			true: "px-0 text-base",
+			false: "ps-4 pe-5"
+		}
+	},
+	compoundVariants: [{
+		size: "sm",
+		iconOnly: true,
+		class: "w-(--density-control-h-sm)"
+	}, {
+		size: "md",
+		iconOnly: true,
+		class: "w-(--density-control-h-md)"
+	}],
+	defaultVariants: {
+		size: "sm",
+		iconOnly: false
+	}
+});
+/** The group's row. Buttons wrap rather than overflow a narrow container. */
+const toggleButtonGroupVariants = cva(["box-border inline-flex flex-wrap gap-2 font-sans", "data-[orientation=vertical]:flex-col"]);
+const TabStopContext = createContext(null);
+const CHECK_PLACEMENT = {
+	label: "size-3 end-1.5 top-1/2 -translate-y-1/2",
+	icon: "size-2.5 end-1.5 top-1.5"
+};
+/**
+* A button that is on or off. Controlled with `isSelected` and
+* `onChange(isSelected)`, or uncontrolled with `defaultSelected`.
+*
+* Give an icon-only toggle an `aria-label`, and wrap it in a `TooltipTrigger`
+* when the glyph alone is not enough. The label should name the control, not
+* its state: assistive technology says "pressed" itself.
+*
+* @example
+* <ToggleButton isSelected={unread} onChange={setUnread}>Has new reply</ToggleButton>
+* <ToggleButton iconOnly aria-label="Primary key"><KeyIcon /></ToggleButton>
+*/
+const ToggleButton$1 = forwardRef(function ToggleButton$2({ className, size, iconOnly = false, children, excludeFromTabOrder, ...props }, ref) {
+	const stop = useContext(TabStopContext);
+	const skipTab = stop !== null && String(props.id) !== stop;
+	return /* @__PURE__ */ jsx(ToggleButton, {
+		ref,
+		...props,
+		excludeFromTabOrder: excludeFromTabOrder ?? skipTab,
+		"data-slot": "toggle-button",
+		"data-key": props.id,
+		className: cn(toggleButtonVariants({
+			size,
+			iconOnly
+		}), className),
+		children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [children, isSelected ? /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			"data-slot": "toggle-button-check",
+			viewBox: "0 0 12 12",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.75",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: cn("pointer-events-none absolute", iconOnly ? CHECK_PLACEMENT.icon : CHECK_PLACEMENT.label),
+			children: /* @__PURE__ */ jsx("path", { d: "M2.5 6.25 5 8.75 9.5 3.5" })
+		}) : null] })
+	});
+});
+/**
+* A row of ToggleButtons that share a selection. Always a toolbar of
+* `aria-pressed` buttons: ONE tab stop, arrow keys move focus, Space or Enter
+* toggles the focused button (selection never follows focus).
+*
+* `selectionMode="single"` (the default) lets one button be pressed at a time:
+* pressing another moves the selection to it, and pressing the pressed one
+* clears it unless `disallowEmptySelection`. Tab enters the group on the pressed
+* button (on the first when none is). `"multiple"` lets any number be pressed.
+* Each child needs an `id`, which is its key in `selectedKeys`.
+*
+* Why not `role="radiogroup"`: React Aria's single mode is a radio group in
+* name only. Its arrows move focus and do not check, and every button is a tab
+* stop, which is not the APG radio pattern. A true radio group needs the
+* selection to follow focus, which a button that you press does not do. The
+* toolbar of pressed buttons is the APG pattern that matches how these behave.
+* If you need a radio group, use `RadioGroup` (`variant="card"` for the framed look).
+*
+* @example
+* <ToggleButtonGroup aria-label="Range" selectionMode="single" disallowEmptySelection>
+*   <ToggleButton id="7d">7 days</ToggleButton>
+*   <ToggleButton id="30d">30 days</ToggleButton>
+* </ToggleButtonGroup>
+*/
+const ToggleButtonGroup$1 = forwardRef(function ToggleButtonGroup$2({ className, selectionMode = "single", selectedKeys, defaultSelectedKeys, onSelectionChange, ...props }, ref) {
+	const single = selectionMode === "single";
+	const [inner, setInner] = useState(() => new Set(defaultSelectedKeys ?? []));
+	const chosen = selectedKeys === void 0 ? inner : new Set(selectedKeys);
+	const own = useRef(null);
+	const [stop, setStop] = useState(null);
+	useIsomorphicLayoutEffect(() => {
+		if (!single || chosen.size === 0) return setStop(null);
+		const enabled = [...own.current?.querySelectorAll("[data-slot=\"toggle-button\"]") ?? []].filter((el) => !el.disabled);
+		const pressed = enabled.find((el) => el.getAttribute("aria-pressed") === "true");
+		setStop((pressed ?? enabled[0])?.getAttribute("data-key") ?? null);
+	});
+	const shared = {
+		ref: useMemo(() => mergeRefs(own, ref), [ref]),
+		...props,
+		"data-slot": "toggle-button-group",
+		className: cn(toggleButtonGroupVariants(), className)
+	};
+	if (!single) return /* @__PURE__ */ jsx(ToggleButtonGroup, {
+		...shared,
+		selectionMode: "multiple",
+		selectedKeys,
+		defaultSelectedKeys,
+		onSelectionChange
+	});
+	const change = (next) => {
+		if (next === "all") return;
+		let keys = next;
+		if (next.size > 1) {
+			const added = [...next].find((key) => !chosen.has(key));
+			keys = /* @__PURE__ */ new Set([added ?? [...next][0]]);
+		}
+		if (selectedKeys === void 0) setInner(keys);
+		onSelectionChange?.(keys);
+	};
+	return /* @__PURE__ */ jsx(TabStopContext.Provider, {
+		value: stop,
+		children: /* @__PURE__ */ jsx(ToggleButtonGroup, {
+			...shared,
+			selectionMode: "multiple",
+			selectedKeys: chosen,
+			onSelectionChange: change
+		})
+	});
+});
+//#endregion
+export { ToggleButton$1 as ToggleButton, ToggleButtonGroup$1 as ToggleButtonGroup, toggleButtonGroupVariants, toggleButtonVariants };
+
+//# sourceMappingURL=toggle-button.js.map

package/dist/toggle-button/toggle-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.js","names":["ToggleButton","AriaToggleButton","ToggleButtonGroup","AriaToggleButtonGroup"],"sources":["../../src/toggle-button/toggle-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport {\n  ToggleButton as AriaToggleButton,\n  ToggleButtonGroup as AriaToggleButtonGroup,\n  type ToggleButtonGroupProps as AriaToggleButtonGroupProps,\n  type Key,\n  type Selection,\n  type ToggleButtonProps as AriaToggleButtonProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { useIsomorphicLayoutEffect } from \"../lib/motion.js\";\n\n/**\n * ToggleButton: a button that stays pressed. One question, two answers\n * (\"Has new reply\", \"Primary key\"), where a Switch would sit in a form row and\n * a Checkbox would need a label beside a box.\n *\n * Built on React Aria's `ToggleButton`, so it is a real `<button>` with\n * `aria-pressed`; in a {@link ToggleButtonGroup} that allows one choice the\n * same buttons are a toolbar of `aria-pressed` buttons. It is NOT Button with `aria-pressed` and a\n * swapped variant, which is what the apps hand-build today: the selected look\n * here does not rest on colour.\n *\n * SELECTED IS SHOWN THREE WAYS. A tint, a `primary-strong` edge and a check\n * mark drawn in `currentColor`, so the state survives forced colours and\n * colour-blindness (WCAG 1.4.1). The mark sits INSIDE the control's own box,\n * in the corner, so it never shifts the layout when it appears and is never\n * clipped by a table row or scroll area outside the border. An icon-only\n * toggle carries it too.\n *\n * FOCUS follows the field surface: on `:focus-visible` the control's own 1px\n * border turns dark and nothing else is drawn, no ring. Forced colours\n * override a border colour, so only there does an outline come back.\n *\n * Every string is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would never be emitted.\n */\nexport const toggleButtonVariants = cva(\n  [\n    \"relative inline-flex items-center justify-center gap-(--density-control-gap) shrink-0 whitespace-nowrap\",\n    \"rounded-control font-sans font-medium text-foreground\",\n    \"cursor-pointer select-none box-border\",\n    \"border-(length:--border-width) border-border bg-surface shadow-surface\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n    \"[-webkit-tap-highlight-color:transparent]\",\n    \"motion-safe:transition-[border-color,background-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n\n    // Hover darkens the edge a step, as on a text field.\n    \"data-[hovered]:bg-muted data-[hovered]:border-border-strong\",\n\n    // Selected: tint and edge. The check mark below is the cue that is not colour.\n    \"data-[selected]:bg-primary-subtle data-[selected]:border-primary-strong\",\n    \"data-[selected]:data-[hovered]:bg-primary-subtle\",\n\n    // Focus is the control's own border going dark. Declared last and doubled\n    // with the selected state so a pressed, focused toggle shows it too.\n    // outline-none, then the outline only under forced colours, where a border\n    // colour is overridden and would leave no indicator (same recipe as\n    // fieldSurfaceVariants).\n    \"outline-none\",\n    \"data-[focus-visible]:border-foreground\",\n    \"data-[focus-visible]:data-[selected]:border-foreground\",\n    \"forced-colors:data-[focus-visible]:outline-solid\",\n    \"forced-colors:data-[focus-visible]:outline-(length:--focus-ring-width)\",\n    \"forced-colors:data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n\n    // Disabled comes after, and doubled with the selected state for the same reason, so a\n    // disabled, selected toggle drops the tint and the edge and keeps only the check mark.\n    \"data-[disabled]:cursor-not-allowed data-[disabled]:bg-muted data-[disabled]:text-text-disabled data-[disabled]:border-border\",\n    \"data-[disabled]:data-[selected]:bg-muted data-[disabled]:data-[selected]:border-border\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-(--density-control-h-sm) text-sm\",\n        md: \"h-(--density-control-h-md) text-sm\",\n      },\n      /** A square button that holds only a glyph. It must carry an `aria-label`. */\n      iconOnly: {\n        true: \"px-0 text-base\",\n        // 4px more at the end than the start: room for the selected mark, always, so nothing moves.\n        false: \"ps-4 pe-5\",\n      },\n    },\n    compoundVariants: [\n      { size: \"sm\", iconOnly: true, class: \"w-(--density-control-h-sm)\" },\n      { size: \"md\", iconOnly: true, class: \"w-(--density-control-h-md)\" },\n    ],\n    defaultVariants: { size: \"sm\", iconOnly: false },\n  },\n);\n\n/** The group's row. Buttons wrap rather than overflow a narrow container. */\nexport const toggleButtonGroupVariants = cva([\n  \"box-border inline-flex flex-wrap gap-2 font-sans\",\n  \"data-[orientation=vertical]:flex-col\",\n]);\n\n// The key (as a string) of a single-choice group's one tab stop, or null when the group has\n// no opinion (outside a group, in multiple mode, nothing pressed, or nothing enabled).\nconst TabStopContext = createContext<string | null>(null);\n\nexport interface ToggleButtonProps\n  extends\n    Omit<AriaToggleButtonProps, \"className\" | \"style\" | \"children\">,\n    Omit<VariantProps<typeof toggleButtonVariants>, \"iconOnly\"> {\n  /** The label, or the glyph of an `iconOnly` toggle. */\n  children?: ReactNode;\n  /**\n   * Only a glyph, in a square button. Pass the glyph as `children` and name the\n   * button with `aria-label`; without one it has no accessible name.\n   *\n   * @default false\n   */\n  iconOnly?: boolean;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n// Where the mark sits inside the box. A label toggle keeps 4px more padding at the end\n// (always, so nothing moves when the mark appears) and the mark is centred in it; an\n// icon-only toggle has no spare room, so the mark takes the top corner, drawn smaller.\nconst CHECK_PLACEMENT = {\n  label: \"size-3 end-1.5 top-1/2 -translate-y-1/2\",\n  icon: \"size-2.5 end-1.5 top-1.5\",\n} as const;\n\n/**\n * A button that is on or off. Controlled with `isSelected` and\n * `onChange(isSelected)`, or uncontrolled with `defaultSelected`.\n *\n * Give an icon-only toggle an `aria-label`, and wrap it in a `TooltipTrigger`\n * when the glyph alone is not enough. The label should name the control, not\n * its state: assistive technology says \"pressed\" itself.\n *\n * @example\n * <ToggleButton isSelected={unread} onChange={setUnread}>Has new reply</ToggleButton>\n * <ToggleButton iconOnly aria-label=\"Primary key\"><KeyIcon /></ToggleButton>\n */\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(function ToggleButton(\n  { className, size, iconOnly = false, children, excludeFromTabOrder, ...props },\n  ref,\n) {\n  // Single choice: Tab enters the group on the chosen button, the rest are reached by arrows.\n  const stop = useContext(TabStopContext);\n  const skipTab = stop !== null && String(props.id) !== stop;\n  return (\n    <AriaToggleButton\n      ref={ref}\n      {...props}\n      excludeFromTabOrder={excludeFromTabOrder ?? skipTab}\n      data-slot=\"toggle-button\"\n      data-key={props.id}\n      className={cn(toggleButtonVariants({ size, iconOnly }), className)}\n    >\n      {({ isSelected }) => (\n        <>\n          {children}\n          {isSelected ? (\n            // Decorative: the button's own pressed state carries it for assistive technology.\n            <svg\n              aria-hidden=\"true\"\n              data-slot=\"toggle-button-check\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.75\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className={cn(\n                \"pointer-events-none absolute\",\n                iconOnly ? CHECK_PLACEMENT.icon : CHECK_PLACEMENT.label,\n              )}\n            >\n              <path d=\"M2.5 6.25 5 8.75 9.5 3.5\" />\n            </svg>\n          ) : null}\n        </>\n      )}\n    </AriaToggleButton>\n  );\n});\n\nexport interface ToggleButtonGroupProps extends Omit<\n  AriaToggleButtonGroupProps,\n  \"className\" | \"style\"\n> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/**\n * A row of ToggleButtons that share a selection. Always a toolbar of\n * `aria-pressed` buttons: ONE tab stop, arrow keys move focus, Space or Enter\n * toggles the focused button (selection never follows focus).\n *\n * `selectionMode=\"single\"` (the default) lets one button be pressed at a time:\n * pressing another moves the selection to it, and pressing the pressed one\n * clears it unless `disallowEmptySelection`. Tab enters the group on the pressed\n * button (on the first when none is). `\"multiple\"` lets any number be pressed.\n * Each child needs an `id`, which is its key in `selectedKeys`.\n *\n * Why not `role=\"radiogroup\"`: React Aria's single mode is a radio group in\n * name only. Its arrows move focus and do not check, and every button is a tab\n * stop, which is not the APG radio pattern. A true radio group needs the\n * selection to follow focus, which a button that you press does not do. The\n * toolbar of pressed buttons is the APG pattern that matches how these behave.\n * If you need a radio group, use `RadioGroup` (`variant=\"card\"` for the framed look).\n *\n * @example\n * <ToggleButtonGroup aria-label=\"Range\" selectionMode=\"single\" disallowEmptySelection>\n *   <ToggleButton id=\"7d\">7 days</ToggleButton>\n *   <ToggleButton id=\"30d\">30 days</ToggleButton>\n * </ToggleButtonGroup>\n */\nexport const ToggleButtonGroup = forwardRef<HTMLDivElement, ToggleButtonGroupProps>(\n  function ToggleButtonGroup(\n    {\n      className,\n      selectionMode = \"single\",\n      selectedKeys,\n      defaultSelectedKeys,\n      onSelectionChange,\n      ...props\n    },\n    ref,\n  ) {\n    const single = selectionMode === \"single\";\n    const [inner, setInner] = useState<Set<Key>>(() => new Set(defaultSelectedKeys ?? []));\n    const chosen = selectedKeys === undefined ? inner : new Set(selectedKeys);\n\n    // The one tab stop: the pressed button, or the first enabled one when the pressed button is\n    // disabled. Read from the DOM after each render because disabled may come from any wrapper.\n    const own = useRef<HTMLDivElement | null>(null);\n    const [stop, setStop] = useState<string | null>(null);\n    useIsomorphicLayoutEffect(() => {\n      if (!single || chosen.size === 0) return setStop(null);\n      const enabled = [\n        ...(own.current?.querySelectorAll<HTMLElement>('[data-slot=\"toggle-button\"]') ?? []),\n      ].filter((el) => !(el as HTMLButtonElement).disabled);\n      const pressed = enabled.find((el) => el.getAttribute(\"aria-pressed\") === \"true\");\n      setStop((pressed ?? enabled[0])?.getAttribute(\"data-key\") ?? null);\n    });\n\n    // Memoized on the caller's ref so the merged callback is stable across renders: a new function\n    // each render would have React call the caller's callback ref with null and then the node again.\n    const mergedRef = useMemo(() => mergeRefs(own, ref), [ref]);\n\n    const shared = {\n      ref: mergedRef,\n      ...props,\n      \"data-slot\": \"toggle-button-group\",\n      className: cn(toggleButtonGroupVariants(), className),\n    };\n\n    if (!single) {\n      return (\n        <AriaToggleButtonGroup\n          {...shared}\n          selectionMode=\"multiple\"\n          selectedKeys={selectedKeys}\n          defaultSelectedKeys={defaultSelectedKeys}\n          onSelectionChange={onSelectionChange}\n        />\n      );\n    }\n\n    // React Aria's own single mode is a radio group; we want the toolbar, so run it as\n    // \"multiple\" and keep it to one key: the newly pressed key replaces the old one.\n    const change = (next: Selection) => {\n      if (next === \"all\") return;\n      let keys: Set<Key> = next;\n      if (next.size > 1) {\n        const added = [...next].find((key) => !chosen.has(key));\n        keys = new Set([added ?? [...next][0]!]);\n      }\n      if (selectedKeys === undefined) setInner(keys);\n      onSelectionChange?.(keys);\n    };\n\n    return (\n      <TabStopContext.Provider value={stop}>\n        <AriaToggleButtonGroup\n          {...shared}\n          selectionMode=\"multiple\"\n          selectedKeys={chosen}\n          onSelectionChange={change}\n        />\n      </TabStopContext.Provider>\n    );\n  },\n);\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seekalfred/primitives",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "type": "module",
   "license": "MIT",
   "description": "Accessible, styled primitives built on React Aria Components.",
@@ -104,6 +104,14 @@
       "types": "./dist/chip-group/index.d.ts",
       "default": "./dist/chip-group/index.js"
     },
+    "./code-block": {
+      "types": "./dist/code-block/index.d.ts",
+      "default": "./dist/code-block/index.js"
+    },
+    "./command-palette": {
+      "types": "./dist/command-palette/index.d.ts",
+      "default": "./dist/command-palette/index.js"
+    },
     "./confirm-morph": {
       "types": "./dist/confirm-morph/index.d.ts",
       "default": "./dist/confirm-morph/index.js"
@@ -160,6 +168,10 @@
       "types": "./dist/gauge/index.d.ts",
       "default": "./dist/gauge/index.js"
     },
+    "./info-tooltip": {
+      "types": "./dist/info-tooltip/index.d.ts",
+      "default": "./dist/info-tooltip/index.js"
+    },
     "./input": {
       "types": "./dist/input/index.d.ts",
       "default": "./dist/input/index.js"
@@ -360,6 +372,10 @@
       "types": "./dist/toast/index.d.ts",
       "default": "./dist/toast/index.js"
     },
+    "./toggle-button": {
+      "types": "./dist/toggle-button/index.d.ts",
+      "default": "./dist/toggle-button/index.js"
+    },
     "./tooltip": {
       "types": "./dist/tooltip/index.d.ts",
       "default": "./dist/tooltip/index.js"
@@ -395,7 +411,7 @@
     "@lexical/rich-text": "0.52.0",
     "@lexical/selection": "0.52.0",
     "@lexical/utils": "0.52.0",
-    "@seekalfred/tokens": "^0.7.3",
+    "@seekalfred/tokens": "^0.8.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "lexical": "0.52.0",
@@ -404,7 +420,7 @@
   "devDependencies": {
     "@arethetypeswrong/cli": "0.18.5",
     "@internationalized/date": "3.12.4",
-    "@seekalfred/styles": "^0.7.3",
+    "@seekalfred/styles": "^0.8.0",
     "@seekalfred/tsconfig": "0.0.0",
     "@size-limit/preset-small-lib": "13.0.3",
     "@storybook/react-vite": "10.6.0",