@seekalfred/primitives 0.5.1 → 0.6.0

package/dist/side-nav/side-nav.js

@@ -0,0 +1,142 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Select as Select$1, SelectItem } from "../select/select.js";
+import { cva } from "class-variance-authority";
+import { forwardRef, useId } from "react";
+import { Header, ListBox, ListBoxItem, ListBoxSection } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/side-nav/side-nav.tsx
+/**
+* SideNav: the sections of one screen, listed down its side.
+*
+* A row of tabs holds a handful of choices. Past about eight it no longer
+* fits a laptop, hides its ends off the edge and stops being a switch: it is
+* a list of sections. SideNav lists them vertically, grouped under plain
+* headings, and shows the chosen one beside the list.
+*
+* WIDE (its own box at least 48rem: a container query, so it follows the
+* space the page gives it, not the window): the grouped list on the inline
+* start, sticky while the section scrolls. It is React Aria's ListBox with one
+* section per group, so each group is announced by its heading; the up and
+* down arrows move through every section ACROSS the groups and choose as
+* they go (the same automatic activation as Tabs); Home and End jump to the
+* ends; typing a section's first letters jumps to it.
+*
+* NARROW (under 48rem): a column of sections does not fit beside anything on
+* a phone, so the list gives way to one Select above the body.
+*
+* The chosen section's title is the body's `<h2>`, one size for every
+* section, with the screen's description of that section under it -- so no
+* section draws its own title at its own size.
+*
+* WHY NOT `Tabs orientation="vertical"`: React Aria's TabList is a flat
+* collection with no sections, so it cannot carry group headings, and a
+* heading placed among the tabs would be announced as part of a tab's name.
+* A group with no sections is not drawn.
+*/
+const sideNavVariants = cva(["@container/side-nav box-border font-sans text-foreground"]);
+const sideNavMenuVariants = cva(["hidden w-56 shrink-0 box-border", "side-nav-wide:sticky side-nav-wide:top-4 side-nav-wide:block side-nav-wide:max-h-screen side-nav-wide:overflow-y-auto"]);
+const sideNavHeaderVariants = cva(["mb-1 px-2 text-2xs leading-(--leading-normal) font-semibold uppercase tracking-wider text-muted-foreground"]);
+const sideNavItemVariants = cva([
+	"flex cursor-pointer items-center rounded-md px-2 py-1 box-border",
+	"text-sm leading-(--leading-normal) text-foreground",
+	"border-s-2 border-transparent",
+	"data-[hovered]:bg-muted",
+	"data-[selected]:bg-muted data-[selected]:font-medium data-[selected]:border-foreground",
+	"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
+	"outline-none",
+	"data-[focus-visible]:outline-solid",
+	"data-[focus-visible]:outline-(length:--focus-ring-width)",
+	"data-[focus-visible]:-outline-offset-(--focus-ring-width)",
+	"data-[focus-visible]:outline-(--color-ring)"
+]);
+const SideNav = forwardRef(function SideNav({ "aria-label": label, groups, selectedKey, onSelectionChange, selectLabel = "Section", description, children, className }, ref) {
+	const shown = groups.filter((g) => g.sections.length > 0);
+	const all = shown.flatMap((g) => g.sections);
+	const current = all.find((s) => s.id === selectedKey);
+	const headingId = useId();
+	const choose = (key) => {
+		if (key != null && String(key) !== selectedKey) onSelectionChange(String(key));
+	};
+	const chooseFromList = (keys) => {
+		if (keys === "all") return;
+		choose(Array.from(keys)[0] ?? null);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "side-nav",
+		className: cn(sideNavVariants(), className),
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "side-nav-layout",
+			className: "side-nav-wide:flex side-nav-wide:items-start side-nav-wide:gap-8",
+			children: [
+				/* @__PURE__ */ jsx("nav", {
+					"aria-label": label,
+					"data-slot": "side-nav-menu",
+					className: sideNavMenuVariants(),
+					children: /* @__PURE__ */ jsx(ListBox, {
+						"aria-label": label,
+						selectionMode: "single",
+						selectionBehavior: "replace",
+						disallowEmptySelection: true,
+						selectedKeys: current ? [current.id] : [],
+						onSelectionChange: chooseFromList,
+						className: "flex flex-col gap-3 outline-none",
+						children: shown.map((group) => /* @__PURE__ */ jsxs(ListBoxSection, {
+							id: group.label,
+							className: "flex flex-col gap-0.5",
+							children: [/* @__PURE__ */ jsx(Header, {
+								"data-slot": "side-nav-header",
+								className: sideNavHeaderVariants(),
+								children: group.label
+							}), group.sections.map((section) => /* @__PURE__ */ jsx(ListBoxItem, {
+								id: section.id,
+								textValue: section.label,
+								"data-slot": "side-nav-item",
+								className: sideNavItemVariants(),
+								children: section.label
+							}, section.id))]
+						}, group.label))
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-slot": "side-nav-select",
+					className: "mb-4 side-nav-wide:hidden",
+					children: /* @__PURE__ */ jsx(Select$1, {
+						label: selectLabel,
+						selectedKey: current?.id ?? null,
+						onSelectionChange: choose,
+						children: all.map((section) => /* @__PURE__ */ jsx(SelectItem, {
+							id: section.id,
+							children: section.label
+						}, section.id))
+					})
+				}),
+				/* @__PURE__ */ jsxs("section", {
+					"aria-labelledby": headingId,
+					"data-slot": "side-nav-body",
+					className: "min-w-0 flex-1",
+					children: [
+						/* @__PURE__ */ jsx("h2", {
+							id: headingId,
+							className: "font-display text-h4 leading-(--leading-snug) font-semibold text-foreground",
+							children: current?.label
+						}),
+						description == null ? null : /* @__PURE__ */ jsx("p", {
+							className: "mt-1 max-w-3xl text-sm leading-(--leading-normal) text-muted-foreground",
+							children: description
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "mt-4",
+							children
+						})
+					]
+				})
+			]
+		})
+	});
+});
+//#endregion
+export { SideNav, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants };
+
+//# sourceMappingURL=side-nav.js.map

package/dist/side-nav/side-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.js","names":["AriaListBox","AriaListBoxSection","AriaHeader","AriaListBoxItem","Select"],"sources":["../../src/side-nav/side-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useId, type ReactNode } from \"react\";\nimport {\n  Header as AriaHeader,\n  ListBox as AriaListBox,\n  ListBoxItem as AriaListBoxItem,\n  ListBoxSection as AriaListBoxSection,\n  type Key,\n  type Selection,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { Select, SelectItem } from \"../select/select.js\";\n\n/**\n * SideNav: the sections of one screen, listed down its side.\n *\n * A row of tabs holds a handful of choices. Past about eight it no longer\n * fits a laptop, hides its ends off the edge and stops being a switch: it is\n * a list of sections. SideNav lists them vertically, grouped under plain\n * headings, and shows the chosen one beside the list.\n *\n * WIDE (its own box at least 48rem: a container query, so it follows the\n * space the page gives it, not the window): the grouped list on the inline\n * start, sticky while the section scrolls. It is React Aria's ListBox with one\n * section per group, so each group is announced by its heading; the up and\n * down arrows move through every section ACROSS the groups and choose as\n * they go (the same automatic activation as Tabs); Home and End jump to the\n * ends; typing a section's first letters jumps to it.\n *\n * NARROW (under 48rem): a column of sections does not fit beside anything on\n * a phone, so the list gives way to one Select above the body.\n *\n * The chosen section's title is the body's `<h2>`, one size for every\n * section, with the screen's description of that section under it -- so no\n * section draws its own title at its own size.\n *\n * WHY NOT `Tabs orientation=\"vertical\"`: React Aria's TabList is a flat\n * collection with no sections, so it cannot carry group headings, and a\n * heading placed among the tabs would be announced as part of a tab's name.\n * A group with no sections is not drawn.\n */\n\nexport const sideNavVariants = cva([\"@container/side-nav box-border font-sans text-foreground\"]);\n\nexport const sideNavMenuVariants = cva([\n  \"hidden w-56 shrink-0 box-border\",\n  \"side-nav-wide:sticky side-nav-wide:top-4 side-nav-wide:block side-nav-wide:max-h-screen side-nav-wide:overflow-y-auto\",\n]);\n\nexport const sideNavHeaderVariants = cva([\n  \"mb-1 px-2 text-2xs leading-(--leading-normal) font-semibold uppercase tracking-wider text-muted-foreground\",\n]);\n\nexport const sideNavItemVariants = cva([\n  \"flex cursor-pointer items-center rounded-md px-2 py-1 box-border\",\n  \"text-sm leading-(--leading-normal) text-foreground\",\n  // A bar on the inline start marks the chosen section. The fill alone\n  // (muted on background) is 1.13:1, no boundary anyone can see; the bar\n  // in the foreground colour is what clears WCAG 1.4.11. Transparent at\n  // rest so choosing a section does not move its text.\n  \"border-s-2 border-transparent\",\n  \"data-[hovered]:bg-muted\",\n  \"data-[selected]:bg-muted data-[selected]:font-medium data-[selected]:border-foreground\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  // Inset: the menu scrolls on a short window, which would clip a ring\n  // drawn outside the item.\n  \"data-[focus-visible]:-outline-offset-(--focus-ring-width)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n]);\n\n/** One section of the screen. */\nexport interface SideNavSection {\n  /** The section's key, reported by `onSelectionChange`. */\n  id: string;\n  /** Its name in the menu, and the body's heading while it is chosen. */\n  label: string;\n}\n\n/** A heading and the sections under it. */\nexport interface SideNavGroup {\n  /** The plain heading the sections sit under. */\n  label: string;\n  /** The group's sections, in order. A group with none is not drawn. */\n  sections: readonly SideNavSection[];\n}\n\nexport interface SideNavProps {\n  /** What the menu is for. Names the navigation landmark and the list. */\n  \"aria-label\": string;\n  /** The sections, grouped. */\n  groups: readonly SideNavGroup[];\n  /** The chosen section's `id`. Controlled: the screen owns it (often in the URL). */\n  selectedKey: string;\n  /** Called with a section's `id` when a different one is chosen. */\n  onSelectionChange: (key: string) => void;\n  /**\n   * The visible label of the Select that replaces the menu under 48rem wide.\n   * @default \"Section\"\n   */\n  selectLabel?: string;\n  /** One or two sentences under the chosen section's title. */\n  description?: ReactNode;\n  /** The chosen section's body. */\n  children?: ReactNode;\n  /** Extra classes for the root. Merged last. */\n  className?: string;\n}\n\nexport const SideNav = forwardRef<HTMLDivElement, SideNavProps>(function SideNav(\n  {\n    \"aria-label\": label,\n    groups,\n    selectedKey,\n    onSelectionChange,\n    selectLabel = \"Section\",\n    description,\n    children,\n    className,\n  },\n  ref,\n) {\n  const shown = groups.filter((g) => g.sections.length > 0);\n  const all = shown.flatMap((g) => g.sections);\n  const current = all.find((s) => s.id === selectedKey);\n  const headingId = useId();\n\n  const choose = (key: Key | null) => {\n    if (key != null && String(key) !== selectedKey) onSelectionChange(String(key));\n  };\n  const chooseFromList = (keys: Selection) => {\n    if (keys === \"all\") return;\n    choose(Array.from(keys)[0] ?? null);\n  };\n\n  return (\n    <div ref={ref} data-slot=\"side-nav\" className={cn(sideNavVariants(), className)}>\n      <div\n        data-slot=\"side-nav-layout\"\n        className=\"side-nav-wide:flex side-nav-wide:items-start side-nav-wide:gap-8\"\n      >\n        <nav aria-label={label} data-slot=\"side-nav-menu\" className={sideNavMenuVariants()}>\n          <AriaListBox\n            aria-label={label}\n            selectionMode=\"single\"\n            selectionBehavior=\"replace\"\n            disallowEmptySelection\n            selectedKeys={current ? [current.id] : []}\n            onSelectionChange={chooseFromList}\n            className=\"flex flex-col gap-3 outline-none\"\n          >\n            {shown.map((group) => (\n              <AriaListBoxSection\n                key={group.label}\n                id={group.label}\n                className=\"flex flex-col gap-0.5\"\n              >\n                <AriaHeader data-slot=\"side-nav-header\" className={sideNavHeaderVariants()}>\n                  {group.label}\n                </AriaHeader>\n                {group.sections.map((section) => (\n                  <AriaListBoxItem\n                    key={section.id}\n                    id={section.id}\n                    textValue={section.label}\n                    data-slot=\"side-nav-item\"\n                    className={sideNavItemVariants()}\n                  >\n                    {section.label}\n                  </AriaListBoxItem>\n                ))}\n              </AriaListBoxSection>\n            ))}\n          </AriaListBox>\n        </nav>\n\n        <div data-slot=\"side-nav-select\" className=\"mb-4 side-nav-wide:hidden\">\n          <Select label={selectLabel} selectedKey={current?.id ?? null} onSelectionChange={choose}>\n            {all.map((section) => (\n              <SelectItem key={section.id} id={section.id}>\n                {section.label}\n              </SelectItem>\n            ))}\n          </Select>\n        </div>\n\n        <section aria-labelledby={headingId} data-slot=\"side-nav-body\" className=\"min-w-0 flex-1\">\n          <h2\n            id={headingId}\n            className=\"font-display text-h4 leading-(--leading-snug) font-semibold text-foreground\"\n          >\n            {current?.label}\n          </h2>\n          {description == null ? null : (\n            <p className=\"mt-1 max-w-3xl text-sm leading-(--leading-normal) text-muted-foreground\">\n              {description}\n            </p>\n          )}\n          <div className=\"mt-4\">{children}</div>\n        </section>\n      </div>\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAa,kBAAkB,IAAI,CAAC,0DAA0D,CAAC;AAE/F,MAAa,sBAAsB,IAAI,CACrC,mCACA,uHACF,CAAC;AAED,MAAa,wBAAwB,IAAI,CACvC,4GACF,CAAC;AAED,MAAa,sBAAsB,IAAI;CACrC;CACA;CAKA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;AACF,CAAC;AAwCD,MAAa,UAAU,WAAyC,SAAS,QACvE,EACE,cAAc,OACd,QACA,aACA,mBACA,cAAc,WACd,aACA,UACA,aAEF,KACA;CACA,MAAM,QAAQ,OAAO,QAAQ,MAAM,EAAE,SAAS,SAAS,CAAC;CACxD,MAAM,MAAM,MAAM,SAAS,MAAM,EAAE,QAAQ;CAC3C,MAAM,UAAU,IAAI,MAAM,MAAM,EAAE,OAAO,WAAW;CACpD,MAAM,YAAY,MAAM;CAExB,MAAM,UAAU,QAAoB;EAClC,IAAI,OAAO,QAAQ,OAAO,GAAG,MAAM,aAAa,kBAAkB,OAAO,GAAG,CAAC;CAC/E;CACA,MAAM,kBAAkB,SAAoB;EAC1C,IAAI,SAAS,OAAO;EACpB,OAAO,MAAM,KAAK,IAAI,CAAC,CAAC,MAAM,IAAI;CACpC;CAEA,OACE,oBAAC,OAAD;EAAU;EAAK,aAAU;EAAW,WAAW,GAAG,gBAAgB,GAAG,SAAS;EAC5E,UAAA,qBAAC,OAAD;GACE,aAAU;GACV,WAAU;GAFZ,UAAA;IAIE,oBAAC,OAAD;KAAK,cAAY;KAAO,aAAU;KAAgB,WAAW,oBAAoB;KAC/E,UAAA,oBAACA,SAAD;MACE,cAAY;MACZ,eAAc;MACd,mBAAkB;MAClB,wBAAA;MACA,cAAc,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC;MACxC,mBAAmB;MACnB,WAAU;MAET,UAAA,MAAM,KAAK,UACV,qBAACC,gBAAD;OAEE,IAAI,MAAM;OACV,WAAU;OAHZ,UAAA,CAKE,oBAACC,QAAD;QAAY,aAAU;QAAkB,WAAW,sBAAsB;QACtE,UAAA,MAAM;OACG,CAAA,GACX,MAAM,SAAS,KAAK,YACnB,oBAACC,aAAD;QAEE,IAAI,QAAQ;QACZ,WAAW,QAAQ;QACnB,aAAU;QACV,WAAW,oBAAoB;QAE9B,UAAA,QAAQ;OACM,GAPV,QAAQ,EAOE,CAClB,CACiB;MAlBb,GAAA,MAAM,KAkBO,CACrB;KACU,CAAA;IACV,CAAA;IAEL,oBAAC,OAAD;KAAK,aAAU;KAAkB,WAAU;KACzC,UAAA,oBAACC,UAAD;MAAQ,OAAO;MAAa,aAAa,SAAS,MAAM;MAAM,mBAAmB;MAC9E,UAAA,IAAI,KAAK,YACR,oBAAC,YAAD;OAA6B,IAAI,QAAQ;OACtC,UAAA,QAAQ;MACC,GAFK,QAAQ,EAEb,CACb;KACK,CAAA;IACL,CAAA;IAEL,qBAAC,WAAD;KAAS,mBAAiB;KAAW,aAAU;KAAgB,WAAU;KAAzE,UAAA;MACE,oBAAC,MAAD;OACE,IAAI;OACJ,WAAU;OAET,UAAA,SAAS;MACR,CAAA;MACH,eAAe,OAAO,OACrB,oBAAC,KAAD;OAAG,WAAU;OACV,UAAA;MACA,CAAA;MAEL,oBAAC,OAAD;OAAK,WAAU;OAAQ;MAAc,CAAA;KAC9B;;GACN;;CACF,CAAA;AAET,CAAC"}

package/dist/skeleton/skeleton.d.ts

@@ -27,7 +27,13 @@ export declare const skeletonVariants: (props?: import("class-variance-authority
  * @example
  * <Skeleton className="h-4 w-32" />
  */
-export type SkeletonProps = ComponentPropsWithoutRef<"div">;
-export declare const Skeleton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface SkeletonProps extends ComponentPropsWithoutRef<"div"> {
+  /**
+   * Position among stacked skeletons. Each block starts its pulse 90ms after
+   * the one above it, so a list dims in a wave instead of all at once.
+   */
+  index?: number;
+}
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/skeleton/skeleton.js

@@ -26,13 +26,17 @@ import { jsx } from "react/jsx-runtime";
 */
 const skeletonVariants = cva([
 	"block bg-muted rounded-md",
-	"motion-safe:animate-pulse",
+	"motion-safe:animate-skeleton-pulse",
 	"box-border"
 ]);
-const Skeleton = forwardRef(function Skeleton({ className, ...props }, ref) {
+const Skeleton = forwardRef(function Skeleton({ className, index, style, ...props }, ref) {
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		...props,
+		style: index ? {
+			animationDelay: `${index * 90}ms`,
+			...style
+		} : style,
 		"aria-hidden": "true",
 		"data-slot": "skeleton",
 		className: cn(skeletonVariants(), className)

package/dist/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ComponentPropsWithoutRef } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Skeleton, ported from the legacy shadcn component.\n *\n * Census: 2 files, 33 uses, and every single one passes `className` and\n * nothing else -- the size always comes from the call site. So there is no\n * variant axis to invent here; the component is a surface and a pulse.\n *\n * THE PULSE DID NOT EXIST. `animate-pulse` names `--animate-pulse`, which\n * this repo does not define: it imports only `tailwindcss/utilities.css`,\n * never Tailwind's default theme, so both the custom property and the\n * `@keyframes pulse` are absent and the utility emits NO RULE AT ALL. The\n * class was present, tsc and ESLint were happy, and nothing moved. Same\n * failure mode as the Dialog's `max-w-lg`. This port adds the token\n * (`scale.json` -> `--animate-pulse`) and the keyframes\n * (`@seekalfred/styles/motion.css`).\n *\n * `bg-accent` becomes `bg-muted`: in the legacy theme `--accent` is\n * character-for-character `--muted` in both themes, so this is a rename to\n * the role Alfred actually has, not a colour change.\n */\nexport const skeletonVariants = cva([\n  \"block bg-muted rounded-md\",\n  // motion-safe: a full-screen page of these pulsing is exactly what\n  // prefers-reduced-motion exists for. Without the animation it is still a\n  // visible placeholder, which is the whole job.\n  \"motion-safe:animate-pulse\",\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load none,\n  // and every call site sizes this through className -- content-box would\n  // add any padding they set on top of the height they asked for.\n  \"box-border\",\n]);\n\n/**\n * A loading placeholder.\n *\n * @example\n * <Skeleton className=\"h-4 w-32\" />\n */\nexport type SkeletonProps = ComponentPropsWithoutRef<\"div\">;\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      // aria-hidden: a placeholder is not content. Thirty-three empty boxes\n      // announced while a page loads is noise, and the loading STATE belongs\n      // on the region being replaced (aria-busy), which only the consumer\n      // can place.\n      aria-hidden=\"true\"\n      data-slot=\"skeleton\"\n      className={cn(skeletonVariants(), className)}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,mBAAmB,IAAI;CAClC;CAIA;CAIA;AACF,CAAC;AAUD,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EAKJ,eAAY;EACZ,aAAU;EACV,WAAW,GAAG,iBAAiB,GAAG,SAAS;CAC5C,CAAA;AAEL,CAAC"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ComponentPropsWithoutRef } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Skeleton, ported from the legacy shadcn component.\n *\n * Census: 2 files, 33 uses, and every single one passes `className` and\n * nothing else -- the size always comes from the call site. So there is no\n * variant axis to invent here; the component is a surface and a pulse.\n *\n * THE PULSE DID NOT EXIST. `animate-pulse` names `--animate-pulse`, which\n * this repo does not define: it imports only `tailwindcss/utilities.css`,\n * never Tailwind's default theme, so both the custom property and the\n * `@keyframes pulse` are absent and the utility emits NO RULE AT ALL. The\n * class was present, tsc and ESLint were happy, and nothing moved. Same\n * failure mode as the Dialog's `max-w-lg`. This port adds the token\n * (`scale.json` -> `--animate-pulse`) and the keyframes\n * (`@seekalfred/styles/motion.css`).\n *\n * `bg-accent` becomes `bg-muted`: in the legacy theme `--accent` is\n * character-for-character `--muted` in both themes, so this is a rename to\n * the role Alfred actually has, not a colour change.\n */\nexport const skeletonVariants = cva([\n  \"block bg-muted rounded-md\",\n  // A finite pulse (11 beats, then rest). motion-safe: a full-screen page of\n  // these pulsing is exactly what prefers-reduced-motion exists for. Without the animation it is still a\n  // visible placeholder, which is the whole job.\n  \"motion-safe:animate-skeleton-pulse\",\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load none,\n  // and every call site sizes this through className -- content-box would\n  // add any padding they set on top of the height they asked for.\n  \"box-border\",\n]);\n\n/**\n * A loading placeholder.\n *\n * @example\n * <Skeleton className=\"h-4 w-32\" />\n */\nexport interface SkeletonProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Position among stacked skeletons. Each block starts its pulse 90ms after\n   * the one above it, so a list dims in a wave instead of all at once.\n   */\n  index?: number;\n}\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(\n  { className, index, style, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      style={index ? { animationDelay: `${index * 90}ms`, ...style } : style}\n      // aria-hidden: a placeholder is not content. Thirty-three empty boxes\n      // announced while a page loads is noise, and the loading STATE belongs\n      // on the region being replaced (aria-busy), which only the consumer\n      // can place.\n      aria-hidden=\"true\"\n      data-slot=\"skeleton\"\n      className={cn(skeletonVariants(), className)}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,mBAAmB,IAAI;CAClC;CAIA;CAIA;AACF,CAAC;AAgBD,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,WAAW,OAAO,OAAO,GAAG,SAC9B,KACA;CACA,OACE,oBAAC,OAAD;EACO;EACL,GAAI;EACJ,OAAO,QAAQ;GAAE,gBAAgB,GAAG,QAAQ,GAAG;GAAK,GAAG;EAAM,IAAI;EAKjE,eAAY;EACZ,aAAU;EACV,WAAW,GAAG,iBAAiB,GAAG,SAAS;CAC5C,CAAA;AAEL,CAAC"}

package/dist/slider/slider.js

@@ -1,9 +1,10 @@
 "use client";
 import { cn, cnAll } from "../lib/cn.js";
+import { SwapText } from "../lib/swap-text.js";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 import { Label, Slider, SliderOutput, SliderThumb, SliderTrack } from "react-aria-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/slider/slider.tsx
 /**
 * Slider, ported from the legacy shadcn/Radix component.
@@ -37,13 +38,18 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * slider looked exactly like an enabled one.
 */
 const sliderVariants = cva(["flex w-full flex-col gap-2 box-border font-sans"]);
-const sliderTrackVariants = cva(["relative flex w-full items-center", "h-6"]);
+const sliderTrackVariants = cva([
+	"relative flex w-full items-center",
+	"h-6",
+	"slider-track"
+]);
 const sliderBarVariants = cva(["absolute h-2 w-full rounded-pill box-border", "bg-muted border-(length:--border-width) border-border"]);
-const sliderFillVariants = cva(["absolute h-2 rounded-pill bg-primary-strong"]);
+const sliderFillVariants = cva(["absolute h-2 rounded-pill bg-primary-strong", "slider-fill"]);
 const sliderThumbVariants = cva([
 	"size-6 rounded-full box-border",
 	"bg-background border-(length:--border-width) border-border shadow-surface",
 	"cursor-grab data-[dragging]:cursor-grabbing",
+	"slider-thumb",
 	"outline-none",
 	"data-[focus-visible]:outline-solid",
 	"data-[focus-visible]:outline-(length:--focus-ring-width)",
@@ -51,6 +57,35 @@ const sliderThumbVariants = cva([
 	"data-[focus-visible]:outline-(--color-ring)",
 	"data-[disabled]:cursor-not-allowed"
 ]);
+/**
+* Text that rolls when its value changes: a larger value rises in from below, a
+* smaller one drops in from above. The caller's own text stays for a screen
+* reader; the copy the eye sees is aria-hidden.
+*/
+function RollingText({ value, text }) {
+	const [trail, setTrail] = useState({
+		value,
+		dir: 1
+	});
+	if (trail.value !== value) setTrail({
+		value,
+		dir: value > trail.value ? 1 : -1
+	});
+	const dir = trail.value === value ? trail.dir : value > trail.value ? 1 : -1;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: text
+	}), /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx(SwapText, {
+			swapKey: text,
+			dir,
+			motion: "roll",
+			className: "inline-block",
+			children: text
+		})
+	})] });
+}
 const Slider$1 = forwardRef(function Slider$2({ label, labelHidden, showValue = true, className, ...props }, ref) {
 	return /* @__PURE__ */ jsxs(Slider, {
 		ref,
@@ -65,12 +100,16 @@ const Slider$1 = forwardRef(function Slider$2({ label, labelHidden, showValue =
 				children: label
 			}), showValue ? /* @__PURE__ */ jsx(SliderOutput, {
 				"data-slot": "slider-output",
-				className: "text-sm leading-(--leading-normal) text-muted-foreground"
+				className: "text-sm leading-(--leading-normal) text-muted-foreground",
+				children: ({ state }) => /* @__PURE__ */ jsx(RollingText, {
+					value: state.getThumbValue(0),
+					text: state.getThumbValueLabel(0)
+				})
 			}) : null]
 		}), /* @__PURE__ */ jsx(SliderTrack, {
 			"data-slot": "slider-track",
 			className: sliderTrackVariants(),
-			children: ({ state }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			children: ({ state }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx("div", {
 					"data-slot": "slider-bar",
 					className: sliderBarVariants()
@@ -78,11 +117,26 @@ const Slider$1 = forwardRef(function Slider$2({ label, labelHidden, showValue =
 				/* @__PURE__ */ jsx("div", {
 					"data-slot": "slider-fill",
 					className: sliderFillVariants(),
+					"data-dragging": state.isThumbDragging(0) || void 0,
 					style: { width: `${state.getThumbPercent(0) * 100}%` }
 				}),
 				/* @__PURE__ */ jsx(SliderThumb, {
 					"data-slot": "slider-thumb",
-					className: sliderThumbVariants()
+					className: sliderThumbVariants(),
+					children: ({ isDragging, isFocusVisible, state: thumbState }) => /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "slider-bubble-anchor pointer-events-none absolute bottom-full left-1/2 mb-2",
+						style: { "--at": thumbState.getThumbPercent(0) * 100 },
+						children: /* @__PURE__ */ jsx("span", {
+							"data-slot": "slider-bubble",
+							"data-shown": isDragging || isFocusVisible || void 0,
+							className: "slider-bubble block whitespace-nowrap rounded-pill bg-foreground px-3 py-1 text-sm leading-none font-medium text-background shadow-surface",
+							children: /* @__PURE__ */ jsx(RollingText, {
+								value: thumbState.getThumbValue(0),
+								text: thumbState.getThumbValueLabel(0)
+							})
+						})
+					})
 				})
 			] })
 		})]

package/dist/slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":["Slider","AriaSlider","AriaLabel","AriaSliderOutput","AriaSliderTrack","AriaSliderThumb"],"sources":["../../src/slider/slider.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Label as AriaLabel,\n  Slider as AriaSlider,\n  SliderOutput as AriaSliderOutput,\n  SliderThumb as AriaSliderThumb,\n  SliderTrack as AriaSliderTrack,\n  type SliderProps as AriaSliderProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\n\n/**\n * Slider, ported from the legacy shadcn/Radix component.\n *\n * Census: 4 call sites, all single-thumb, none of them named. Radix only\n * generates thumb labels at two or more thumbs, so all four are announced\n * as an unnamed slider -- `AudioSettings.tsx` even renders a\n * `<Label>Input Volume</Label>` directly above one, with no `htmlFor` and\n * no `id`, so it is associated with nothing at all.\n *\n * `label` IS REQUIRED here, the same answer Progress and Dialog give.\n *\n * THE PALETTE DELIBERATELY DOES NOT MATCH SWITCH, and the reason is worth\n * stating because the two look like the same problem. A Switch has no\n * fill: its track is one colour and the thumb tells you the state, so\n * `border` unchecked and `primary-strong` checked works. A Slider has a\n * filled portion whose LENGTH is the value -- and `primary-strong` on a\n * `border` track is 1.01:1. The two halves would be the same grey and the\n * value would be invisible to anyone not reading the thumb position.\n *\n * So the track is `muted` with a `border` boundary and the fill is\n * `primary-strong`: fill against track 4.61:1, track against page 5.25:1,\n * thumb against fill 5.20:1, thumb edge against track 4.65:1. All four\n * pairs are in the build-failing contrast contract.\n *\n * Three legacy defects go with it: the focus ring was `ring-1`, a 1px\n * box-shadow that forced-colors discards entirely; the thumb border was\n * `border-primary/50`, an alpha edge with no measurable contrast; and the\n * disabled styling used `disabled:`, a pseudo-class that only applies to\n * form elements -- Radix renders a `<span role=\"slider\">`, so a disabled\n * slider looked exactly like an enabled one.\n */\nexport const sliderVariants = cva([\"flex w-full flex-col gap-2 box-border font-sans\"]);\n\nexport const sliderTrackVariants = cva([\n  \"relative flex w-full items-center\",\n  // h-6 is the TRACK ROW, not the visible bar -- it gives the 24px\n  // pointer target WCAG 2.5.8 wants. The bar itself is drawn inside.\n  \"h-6\",\n]);\n\nexport const sliderBarVariants = cva([\n  \"absolute h-2 w-full rounded-pill box-border\",\n  \"bg-muted border-(length:--border-width) border-border\",\n]);\n\nexport const sliderFillVariants = cva([\"absolute h-2 rounded-pill bg-primary-strong\"]);\n\nexport const sliderThumbVariants = cva([\n  // size-6 is 24px: WCAG 2.5.8 target size. The legacy thumb was 16px at\n  // all four call sites, and one of them crams the whole control into 80px.\n  \"size-6 rounded-full box-border\",\n  \"bg-background border-(length:--border-width) border-border shadow-surface\",\n  \"cursor-grab data-[dragging]:cursor-grabbing\",\n  // A real outline, not the legacy ring-1 box-shadow.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n  // data-[disabled], NOT disabled:. The legacy used the CSS :disabled\n  // pseudo-class, which applies only to form elements -- React Aria and\n  // Radix both render a span, so that styling never fired.\n  \"data-[disabled]:cursor-not-allowed\",\n]);\n\n/**\n * A value along a range.\n *\n * @example\n * <Slider label=\"Input volume\" defaultValue={40} />\n * <Slider label=\"Playback position\" value={t} onChange={seek} formatOptions={{ style: \"percent\" }} />\n */\nexport interface SliderProps\n  extends Omit<AriaSliderProps<number>, \"className\" | \"style\" | \"children\"> {\n  /**\n   * What the slider controls, and its accessible name.\n   *\n   * **Required.** All four legacy call sites are unnamed sliders.\n   */\n  label: ReactNode;\n  /** Render the label for screen readers only. */\n  labelHidden?: boolean;\n  /**\n   * Show the current value as text beside the label.\n   *\n   * On by default. It is the text equivalent of the fill length, which\n   * matters because in greyscale the filled and unfilled halves are\n   * distinguishable only by the thumb.\n   */\n  showValue?: boolean;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  { label, labelHidden, showValue = true, className, ...props },\n  ref,\n) {\n  return (\n    <AriaSlider\n      ref={ref}\n      {...props}\n      data-slot=\"slider\"\n      className={cn(sliderVariants(), className)}\n    >\n      <div className={cnAll(\"flex items-center justify-between gap-2\", labelHidden && \"sr-only\")}>\n        <AriaLabel\n          data-slot=\"slider-label\"\n          className=\"text-sm leading-(--leading-normal) text-foreground\"\n        >\n          {label}\n        </AriaLabel>\n        {showValue ? (\n          <AriaSliderOutput\n            data-slot=\"slider-output\"\n            className=\"text-sm leading-(--leading-normal) text-muted-foreground\"\n          />\n        ) : null}\n      </div>\n\n      <AriaSliderTrack data-slot=\"slider-track\" className={sliderTrackVariants()}>\n        {({ state }) => (\n          <>\n            <div data-slot=\"slider-bar\" className={sliderBarVariants()} />\n            <div\n              data-slot=\"slider-fill\"\n              className={sliderFillVariants()}\n              style={{ width: `${state.getThumbPercent(0) * 100}%` }}\n            />\n            <AriaSliderThumb data-slot=\"slider-thumb\" className={sliderThumbVariants()} />\n          </>\n        )}\n      </AriaSliderTrack>\n    </AriaSlider>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,iBAAiB,IAAI,CAAC,iDAAiD,CAAC;AAErF,MAAa,sBAAsB,IAAI,CACrC,qCAGA,KACF,CAAC;AAED,MAAa,oBAAoB,IAAI,CACnC,+CACA,uDACF,CAAC;AAED,MAAa,qBAAqB,IAAI,CAAC,6CAA6C,CAAC;AAErF,MAAa,sBAAsB,IAAI;CAGrC;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAIA;AACF,CAAC;AA+BD,MAAaA,WAAS,WAAwC,SAASA,SACrE,EAAE,OAAO,aAAa,YAAY,MAAM,WAAW,GAAG,SACtD,KACA;CACA,OACE,qBAACC,QAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,eAAe,GAAG,SAAS;EAJ3C,UAAA,CAME,qBAAC,OAAD;GAAK,WAAW,MAAM,2CAA2C,eAAe,SAAS;GAAzF,UAAA,CACE,oBAACC,OAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACQ,CAAA,GACV,YACC,oBAACC,cAAD;IACE,aAAU;IACV,WAAU;GACX,CAAA,IACC,IACD;EAEL,CAAA,GAAA,oBAACC,aAAD;GAAiB,aAAU;GAAe,WAAW,oBAAoB;GACrE,WAAA,EAAE,YACF,qBAAA,UAAA,EAAA,UAAA;IACE,oBAAC,OAAD;KAAK,aAAU;KAAa,WAAW,kBAAkB;IAAI,CAAA;IAC7D,oBAAC,OAAD;KACE,aAAU;KACV,WAAW,mBAAmB;KAC9B,OAAO,EAAE,OAAO,GAAG,MAAM,gBAAgB,CAAC,IAAI,IAAI,GAAG;IACtD,CAAA;IACD,oBAACC,aAAD;KAAiB,aAAU;KAAe,WAAW,oBAAoB;IAAI,CAAA;GAC7E,EAAA,CAAA;EAEW,CAAA,CACP;;AAEhB,CAAC"}
+{"version":3,"file":"slider.js","names":["Slider","AriaSlider","AriaLabel","AriaSliderOutput","AriaSliderTrack","AriaSliderThumb"],"sources":["../../src/slider/slider.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useState, type ReactNode } from \"react\";\nimport {\n  Label as AriaLabel,\n  Slider as AriaSlider,\n  SliderOutput as AriaSliderOutput,\n  SliderThumb as AriaSliderThumb,\n  SliderTrack as AriaSliderTrack,\n  type SliderProps as AriaSliderProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Slider, ported from the legacy shadcn/Radix component.\n *\n * Census: 4 call sites, all single-thumb, none of them named. Radix only\n * generates thumb labels at two or more thumbs, so all four are announced\n * as an unnamed slider -- `AudioSettings.tsx` even renders a\n * `<Label>Input Volume</Label>` directly above one, with no `htmlFor` and\n * no `id`, so it is associated with nothing at all.\n *\n * `label` IS REQUIRED here, the same answer Progress and Dialog give.\n *\n * THE PALETTE DELIBERATELY DOES NOT MATCH SWITCH, and the reason is worth\n * stating because the two look like the same problem. A Switch has no\n * fill: its track is one colour and the thumb tells you the state, so\n * `border` unchecked and `primary-strong` checked works. A Slider has a\n * filled portion whose LENGTH is the value -- and `primary-strong` on a\n * `border` track is 1.01:1. The two halves would be the same grey and the\n * value would be invisible to anyone not reading the thumb position.\n *\n * So the track is `muted` with a `border` boundary and the fill is\n * `primary-strong`: fill against track 4.61:1, track against page 5.25:1,\n * thumb against fill 5.20:1, thumb edge against track 4.65:1. All four\n * pairs are in the build-failing contrast contract.\n *\n * Three legacy defects go with it: the focus ring was `ring-1`, a 1px\n * box-shadow that forced-colors discards entirely; the thumb border was\n * `border-primary/50`, an alpha edge with no measurable contrast; and the\n * disabled styling used `disabled:`, a pseudo-class that only applies to\n * form elements -- Radix renders a `<span role=\"slider\">`, so a disabled\n * slider looked exactly like an enabled one.\n */\nexport const sliderVariants = cva([\"flex w-full flex-col gap-2 box-border font-sans\"]);\n\nexport const sliderTrackVariants = cva([\n  \"relative flex w-full items-center\",\n  // h-6 is the TRACK ROW, not the visible bar -- it gives the 24px\n  // pointer target WCAG 2.5.8 wants. The bar itself is drawn inside.\n  \"h-6\",\n  // A size container, so the value bubble can hold inside it (styles.css).\n  \"slider-track\",\n]);\n\nexport const sliderBarVariants = cva([\n  \"absolute h-2 w-full rounded-pill box-border\",\n  \"bg-muted border-(length:--border-width) border-border\",\n]);\n\nexport const sliderFillVariants = cva([\"absolute h-2 rounded-pill bg-primary-strong\", \"slider-fill\"]);\n\nexport const sliderThumbVariants = cva([\n  // size-6 is 24px: WCAG 2.5.8 target size. The legacy thumb was 16px at\n  // all four call sites, and one of them crams the whole control into 80px.\n  \"size-6 rounded-full box-border\",\n  \"bg-background border-(length:--border-width) border-border shadow-surface\",\n  \"cursor-grab data-[dragging]:cursor-grabbing\",\n  // Follows an outside value on a spring, swells while held (styles.css).\n  \"slider-thumb\",\n  // A real outline, not the legacy ring-1 box-shadow.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n  // data-[disabled], NOT disabled:. The legacy used the CSS :disabled\n  // pseudo-class, which applies only to form elements -- React Aria and\n  // Radix both render a span, so that styling never fired.\n  \"data-[disabled]:cursor-not-allowed\",\n]);\n\n/**\n * Text that rolls when its value changes: a larger value rises in from below, a\n * smaller one drops in from above. The caller's own text stays for a screen\n * reader; the copy the eye sees is aria-hidden.\n */\nfunction RollingText({ value, text }: { value: number; text: string }) {\n  const [trail, setTrail] = useState({ value, dir: 1 });\n  if (trail.value !== value) setTrail({ value, dir: value > trail.value ? 1 : -1 });\n  const dir = trail.value === value ? trail.dir : value > trail.value ? 1 : -1;\n  return (\n    <>\n      <span className=\"sr-only\">{text}</span>\n      <span aria-hidden=\"true\">\n        <SwapText swapKey={text} dir={dir} motion=\"roll\" className=\"inline-block\">\n          {text}\n        </SwapText>\n      </span>\n    </>\n  );\n}\n\n/**\n * A value along a range.\n *\n * @example\n * <Slider label=\"Input volume\" defaultValue={40} />\n * <Slider label=\"Playback position\" value={t} onChange={seek} formatOptions={{ style: \"percent\" }} />\n */\nexport interface SliderProps\n  extends Omit<AriaSliderProps<number>, \"className\" | \"style\" | \"children\"> {\n  /**\n   * What the slider controls, and its accessible name.\n   *\n   * **Required.** All four legacy call sites are unnamed sliders.\n   */\n  label: ReactNode;\n  /** Render the label for screen readers only. */\n  labelHidden?: boolean;\n  /**\n   * Show the current value as text beside the label.\n   *\n   * On by default. It is the text equivalent of the fill length, which\n   * matters because in greyscale the filled and unfilled halves are\n   * distinguishable only by the thumb.\n   */\n  showValue?: boolean;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  { label, labelHidden, showValue = true, className, ...props },\n  ref,\n) {\n  return (\n    <AriaSlider\n      ref={ref}\n      {...props}\n      data-slot=\"slider\"\n      className={cn(sliderVariants(), className)}\n    >\n      <div className={cnAll(\"flex items-center justify-between gap-2\", labelHidden && \"sr-only\")}>\n        <AriaLabel\n          data-slot=\"slider-label\"\n          className=\"text-sm leading-(--leading-normal) text-foreground\"\n        >\n          {label}\n        </AriaLabel>\n        {showValue ? (\n          <AriaSliderOutput\n            data-slot=\"slider-output\"\n            className=\"text-sm leading-(--leading-normal) text-muted-foreground\"\n          >\n            {({ state }) => (\n              <RollingText value={state.getThumbValue(0)} text={state.getThumbValueLabel(0)} />\n            )}\n          </AriaSliderOutput>\n        ) : null}\n      </div>\n\n      <AriaSliderTrack data-slot=\"slider-track\" className={sliderTrackVariants()}>\n        {({ state }) => (\n          <>\n            <div data-slot=\"slider-bar\" className={sliderBarVariants()} />\n            <div\n              data-slot=\"slider-fill\"\n              className={sliderFillVariants()}\n              data-dragging={state.isThumbDragging(0) || undefined}\n              style={{ width: `${state.getThumbPercent(0) * 100}%` }}\n            />\n            <AriaSliderThumb data-slot=\"slider-thumb\" className={sliderThumbVariants()}>\n              {({ isDragging, isFocusVisible, state: thumbState }) => (\n                // Decorative: the output beside the label already carries the value.\n                <span\n                  aria-hidden=\"true\"\n                  className=\"slider-bubble-anchor pointer-events-none absolute bottom-full left-1/2 mb-2\"\n                  style={{ \"--at\": thumbState.getThumbPercent(0) * 100 } as React.CSSProperties}\n                >\n                  <span\n                    data-slot=\"slider-bubble\"\n                    data-shown={isDragging || isFocusVisible || undefined}\n                    className=\"slider-bubble block whitespace-nowrap rounded-pill bg-foreground px-3 py-1 text-sm leading-none font-medium text-background shadow-surface\"\n                  >\n                    <RollingText\n                      value={thumbState.getThumbValue(0)}\n                      text={thumbState.getThumbValueLabel(0)}\n                    />\n                  </span>\n                </span>\n              )}\n            </AriaSliderThumb>\n          </>\n        )}\n      </AriaSliderTrack>\n    </AriaSlider>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,iBAAiB,IAAI,CAAC,iDAAiD,CAAC;AAErF,MAAa,sBAAsB,IAAI;CACrC;CAGA;CAEA;AACF,CAAC;AAED,MAAa,oBAAoB,IAAI,CACnC,+CACA,uDACF,CAAC;AAED,MAAa,qBAAqB,IAAI,CAAC,+CAA+C,aAAa,CAAC;AAEpG,MAAa,sBAAsB,IAAI;CAGrC;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CAIA;AACF,CAAC;;;;;;AAOD,SAAS,YAAY,EAAE,OAAO,QAAyC;CACrE,MAAM,CAAC,OAAO,YAAY,SAAS;EAAE;EAAO,KAAK;CAAE,CAAC;CACpD,IAAI,MAAM,UAAU,OAAO,SAAS;EAAE;EAAO,KAAK,QAAQ,MAAM,QAAQ,IAAI;CAAG,CAAC;CAChF,MAAM,MAAM,MAAM,UAAU,QAAQ,MAAM,MAAM,QAAQ,MAAM,QAAQ,IAAI;CAC1E,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,WAAU;EAAW,UAAA;CAAW,CAAA,GACtC,oBAAC,QAAD;EAAM,eAAY;EAChB,UAAA,oBAAC,UAAD;GAAU,SAAS;GAAW;GAAK,QAAO;GAAO,WAAU;GACxD,UAAA;EACO,CAAA;CACN,CAAA,CACN,EAAA,CAAA;AAEN;AA+BA,MAAaA,WAAS,WAAwC,SAASA,SACrE,EAAE,OAAO,aAAa,YAAY,MAAM,WAAW,GAAG,SACtD,KACA;CACA,OACE,qBAACC,QAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,eAAe,GAAG,SAAS;EAJ3C,UAAA,CAME,qBAAC,OAAD;GAAK,WAAW,MAAM,2CAA2C,eAAe,SAAS;GAAzF,UAAA,CACE,oBAACC,OAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACQ,CAAA,GACV,YACC,oBAACC,cAAD;IACE,aAAU;IACV,WAAU;IAER,WAAA,EAAE,YACF,oBAAC,aAAD;KAAa,OAAO,MAAM,cAAc,CAAC;KAAG,MAAM,MAAM,mBAAmB,CAAC;IAAI,CAAA;GAElE,CAAA,IAChB,IACD;EAEL,CAAA,GAAA,oBAACC,aAAD;GAAiB,aAAU;GAAe,WAAW,oBAAoB;GACrE,WAAA,EAAE,YACF,qBAAA,YAAA,EAAA,UAAA;IACE,oBAAC,OAAD;KAAK,aAAU;KAAa,WAAW,kBAAkB;IAAI,CAAA;IAC7D,oBAAC,OAAD;KACE,aAAU;KACV,WAAW,mBAAmB;KAC9B,iBAAe,MAAM,gBAAgB,CAAC,KAAK,KAAA;KAC3C,OAAO,EAAE,OAAO,GAAG,MAAM,gBAAgB,CAAC,IAAI,IAAI,GAAG;IACtD,CAAA;IACD,oBAACC,aAAD;KAAiB,aAAU;KAAe,WAAW,oBAAoB;KACrE,WAAA,EAAE,YAAY,gBAAgB,OAAO,iBAErC,oBAAC,QAAD;MACE,eAAY;MACZ,WAAU;MACV,OAAO,EAAE,QAAQ,WAAW,gBAAgB,CAAC,IAAI,IAAI;MAErD,UAAA,oBAAC,QAAD;OACE,aAAU;OACV,cAAY,cAAc,kBAAkB,KAAA;OAC5C,WAAU;OAEV,UAAA,oBAAC,aAAD;QACE,OAAO,WAAW,cAAc,CAAC;QACjC,MAAM,WAAW,mBAAmB,CAAC;OACtC,CAAA;MACG,CAAA;KACF,CAAA;IAEO,CAAA;GACjB,EAAA,CAAA;EAEW,CAAA,CACP;;AAEhB,CAAC"}

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

@@ -0,0 +1,2 @@
+import { SplitButton, SplitButtonAction, SplitButtonProps } from "./split-button.js";
+export { SplitButton, type SplitButtonAction, type SplitButtonProps };

package/dist/split-button/index.js

@@ -0,0 +1,2 @@
+import { SplitButton } from "./split-button.js";
+export { SplitButton };

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

@@ -0,0 +1,46 @@
+import { ReactNode } from "react";
+//#region src/split-button/split-button.d.ts
+/** One entry in the menu half. */
+export interface SplitButtonAction {
+  /** The item's text, and its identity. */
+  label: string;
+  /** Runs when the item is chosen. */
+  onSelect?: () => void;
+  isDisabled?: boolean;
+  /** Tints the item as destructive. */
+  destructive?: boolean;
+  /** An icon before the label. Mark it `aria-hidden`. */
+  icon?: ReactNode;
+}
+export interface SplitButtonProps {
+  /** The main action's label. A plain string: it is split into letters to morph when it changes. */
+  children: string;
+  /** The menu half's items: the nearby alternatives to the main action. */
+  actions: SplitButtonAction[];
+  /** Runs when the main half is pressed. */
+  onPress?: () => void;
+  isDisabled?: boolean;
+  /** An icon before the label. Swapping it for another icon morphs; re-rendering the same icon does not. Mark it `aria-hidden`. */
+  icon?: ReactNode;
+  /** `secondary` is the quiet, outlined pill. @default "primary" */
+  variant?: "primary" | "secondary";
+  /** Extra classes for the pill. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/**
+ * One pill, two actions: a main action and a menu of nearby alternatives.
+ *
+ * The main half morphs in place: change `children` (or `icon`) and the letters
+ * that differ rise in while the old ones lift away, the icon swaps by scaling,
+ * and the width springs to fit. The whole pill presses in for the main action;
+ * the menu half answers in colour only, so the menu opens from a still anchor,
+ * growing from its trigger, its items arriving one after another.
+ *
+ * @example
+ * <SplitButton onPress={save} actions={[{ label: "Save as draft" }, { label: "Delete", destructive: true }]}>
+ *   Save
+ * </SplitButton>
+ */
+export declare function SplitButton({ children: label, actions, onPress, isDisabled, icon, variant, className }: SplitButtonProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=split-button.d.ts.map

package/dist/split-button/split-button.js

@@ -0,0 +1,122 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useMorphWidth } from "../lib/motion.js";
+import { MorphText } from "../lib/morph-text.js";
+import { Menu as Menu$1, MenuItem as MenuItem$1, MenuTrigger } from "../menu/menu.js";
+import { IconSwap } from "../lib/icon-swap.js";
+import { isValidElement, useRef } from "react";
+import { Button } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/split-button/split-button.tsx
+/** Names the icon element, so swapping Copy for Check morphs while a re-render of the same icon stays still. */
+function iconKey(node) {
+	if (!isValidElement(node)) return typeof node === "string" || typeof node === "number" ? String(node) : "";
+	const type = node.type;
+	return typeof type === "string" ? type : type?.displayName ?? type?.name ?? "icon";
+}
+const half = [
+	"relative inline-flex items-center justify-center cursor-pointer select-none font-sans font-medium",
+	"[-webkit-tap-highlight-color:transparent]",
+	"outline-none",
+	"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)",
+	"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)",
+	"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-button-disabled)",
+	"motion-safe:transition-[background-color,color,opacity] motion-safe:duration-(--duration-quick) motion-safe:ease-settle"
+].join(" ");
+const looks = {
+	primary: {
+		pill: "bg-primary text-primary-foreground shadow-surface rounded-md",
+		main: "h-(--density-control-h-md) px-(--density-control-pad-md) text-base rounded-s-md data-[hovered]:opacity-91 data-[pressed]:opacity-84",
+		trigger: "h-(--density-control-h-md) w-9 rounded-e-md border-s-(length:--border-width) border-primary-foreground/20 data-[hovered]:opacity-91 data-[pressed]:opacity-84"
+	},
+	secondary: {
+		pill: "bg-background text-foreground border-(length:--border-width) border-border shadow-surface rounded-md",
+		main: "h-(--density-control-h-sm) px-(--density-control-pad-sm) text-sm rounded-s-md data-[hovered]:bg-muted data-[pressed]:bg-muted",
+		trigger: "h-(--density-control-h-sm) w-8 rounded-e-md border-s-(length:--border-width) border-border data-[hovered]:bg-muted data-[pressed]:bg-muted"
+	}
+};
+/**
+* One pill, two actions: a main action and a menu of nearby alternatives.
+*
+* The main half morphs in place: change `children` (or `icon`) and the letters
+* that differ rise in while the old ones lift away, the icon swaps by scaling,
+* and the width springs to fit. The whole pill presses in for the main action;
+* the menu half answers in colour only, so the menu opens from a still anchor,
+* growing from its trigger, its items arriving one after another.
+*
+* @example
+* <SplitButton onPress={save} actions={[{ label: "Save as draft" }, { label: "Delete", destructive: true }]}>
+*   Save
+* </SplitButton>
+*/
+function SplitButton({ children: label, actions, onPress, isDisabled, icon, variant = "primary", className }) {
+	const contentRef = useRef(null);
+	const glyph = iconKey(icon);
+	const look = looks[variant];
+	useMorphWidth(contentRef, glyph + "|" + label);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		className: cn("split-pill inline-flex items-stretch " + look.pill, className),
+		children: [/* @__PURE__ */ jsxs(Button, {
+			"data-slot": "split-main",
+			className: cn(half + " " + look.main),
+			isDisabled,
+			onPress,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "button-slot [--morph-clip:inset(-50%_calc(var(--spacing)*-2))]",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsxs("span", {
+					ref: contentRef,
+					className: "inline-flex flex-none items-center gap-2 whitespace-nowrap",
+					children: [icon ? /* @__PURE__ */ jsx(IconSwap, {
+						iconKey: glyph,
+						children: icon
+					}) : null, /* @__PURE__ */ jsx(MorphText, {
+						text: label,
+						morphWidth: false
+					})]
+				})
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				"aria-live": "polite",
+				children: label
+			})]
+		}), /* @__PURE__ */ jsxs(MenuTrigger, { children: [/* @__PURE__ */ jsx(Button, {
+			"data-slot": "split-trigger",
+			"aria-label": label + " more actions",
+			isDisabled,
+			className: cn("group/trigger " + half + " " + look.trigger),
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 1.75,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				"aria-hidden": "true",
+				className: "size-4 motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180",
+				children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+			})
+		}), /* @__PURE__ */ jsx(Menu$1, {
+			placement: "bottom end",
+			shouldFocusWrap: true,
+			className: "menu-motion [--menu-ox:right]",
+			children: actions.map((action, index) => /* @__PURE__ */ jsxs(MenuItem$1, {
+				id: action.label,
+				textValue: action.label,
+				isDisabled: action.isDisabled,
+				onAction: action.onSelect,
+				"data-i": Math.min(index, 4),
+				className: cn("menu-item-motion gap-2.5" + (action.destructive ? " text-destructive-strong data-[focused]:bg-[color-mix(in_oklab,var(--color-destructive-strong)_8%,var(--color-card))]" : "")),
+				children: [action.icon ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: action.icon
+				}) : null, action.label]
+			}, action.label))
+		})] })]
+	});
+}
+//#endregion
+export { SplitButton };
+
+//# sourceMappingURL=split-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.js","names":["AriaButton","Menu","MenuItem"],"sources":["../../src/split-button/split-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { isValidElement, useRef, type ReactNode } from \"react\";\nimport { Button as AriaButton } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { IconSwap } from \"../lib/icon-swap.js\";\nimport { MorphText } from \"../lib/morph-text.js\";\nimport { useMorphWidth } from \"../lib/motion.js\";\nimport { Menu, MenuItem, MenuTrigger } from \"../menu/menu.js\";\n\n/** One entry in the menu half. */\nexport interface SplitButtonAction {\n  /** The item's text, and its identity. */\n  label: string;\n  /** Runs when the item is chosen. */\n  onSelect?: () => void;\n  isDisabled?: boolean;\n  /** Tints the item as destructive. */\n  destructive?: boolean;\n  /** An icon before the label. Mark it `aria-hidden`. */\n  icon?: ReactNode;\n}\n\nexport interface SplitButtonProps {\n  /** The main action's label. A plain string: it is split into letters to morph when it changes. */\n  children: string;\n  /** The menu half's items: the nearby alternatives to the main action. */\n  actions: SplitButtonAction[];\n  /** Runs when the main half is pressed. */\n  onPress?: () => void;\n  isDisabled?: boolean;\n  /** An icon before the label. Swapping it for another icon morphs; re-rendering the same icon does not. Mark it `aria-hidden`. */\n  icon?: ReactNode;\n  /** `secondary` is the quiet, outlined pill. @default \"primary\" */\n  variant?: \"primary\" | \"secondary\";\n  /** Extra classes for the pill. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/** Names the icon element, so swapping Copy for Check morphs while a re-render of the same icon stays still. */\nfunction iconKey(node: ReactNode): string {\n  if (!isValidElement(node))\n    return typeof node === \"string\" || typeof node === \"number\" ? String(node) : \"\";\n  const type = node.type as string | { displayName?: string; name?: string };\n  return typeof type === \"string\" ? type : (type?.displayName ?? type?.name ?? \"icon\");\n}\n\n/*\n * Class strings are static literals: Tailwind scans source text.\n *\n * Both halves share the focus outline, the tap-highlight reset and the\n * disabled look. The pill, not either half, scales on press (split-pill), and\n * the menu half never scales, so the menu opens from a still anchor.\n */\nconst half = [\n  \"relative inline-flex items-center justify-center cursor-pointer select-none font-sans font-medium\",\n  \"[-webkit-tap-highlight-color:transparent]\",\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-button-disabled)\",\n  \"motion-safe:transition-[background-color,color,opacity] motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n].join(\" \");\n\nconst looks = {\n  primary: {\n    pill: \"bg-primary text-primary-foreground shadow-surface rounded-md\",\n    main: \"h-(--density-control-h-md) px-(--density-control-pad-md) text-base rounded-s-md data-[hovered]:opacity-91 data-[pressed]:opacity-84\",\n    trigger:\n      \"h-(--density-control-h-md) w-9 rounded-e-md border-s-(length:--border-width) border-primary-foreground/20 data-[hovered]:opacity-91 data-[pressed]:opacity-84\",\n  },\n  secondary: {\n    pill: \"bg-background text-foreground border-(length:--border-width) border-border shadow-surface rounded-md\",\n    main: \"h-(--density-control-h-sm) px-(--density-control-pad-sm) text-sm rounded-s-md data-[hovered]:bg-muted data-[pressed]:bg-muted\",\n    trigger:\n      \"h-(--density-control-h-sm) w-8 rounded-e-md border-s-(length:--border-width) border-border data-[hovered]:bg-muted data-[pressed]:bg-muted\",\n  },\n} as const;\n\nconst itemBase = \"gap-2.5\";\nconst itemDestructive =\n  \"text-destructive-strong data-[focused]:bg-[color-mix(in_oklab,var(--color-destructive-strong)_8%,var(--color-card))]\";\n\n/**\n * One pill, two actions: a main action and a menu of nearby alternatives.\n *\n * The main half morphs in place: change `children` (or `icon`) and the letters\n * that differ rise in while the old ones lift away, the icon swaps by scaling,\n * and the width springs to fit. The whole pill presses in for the main action;\n * the menu half answers in colour only, so the menu opens from a still anchor,\n * growing from its trigger, its items arriving one after another.\n *\n * @example\n * <SplitButton onPress={save} actions={[{ label: \"Save as draft\" }, { label: \"Delete\", destructive: true }]}>\n *   Save\n * </SplitButton>\n */\nexport function SplitButton({\n  children: label,\n  actions,\n  onPress,\n  isDisabled,\n  icon,\n  variant = \"primary\",\n  className,\n}: SplitButtonProps) {\n  const contentRef = useRef<HTMLSpanElement>(null);\n  const glyph = iconKey(icon);\n  const look = looks[variant];\n  useMorphWidth(contentRef, glyph + \"|\" + label);\n\n  return (\n    <div\n      role=\"group\"\n      className={cn(\"split-pill inline-flex items-stretch \" + look.pill, className)}\n    >\n      <AriaButton\n        data-slot=\"split-main\"\n        className={cn(half + \" \" + look.main)}\n        isDisabled={isDisabled}\n        onPress={onPress}\n      >\n        <span\n          className=\"button-slot [--morph-clip:inset(-50%_calc(var(--spacing)*-2))]\"\n          aria-hidden=\"true\"\n        >\n          <span\n            ref={contentRef}\n            className=\"inline-flex flex-none items-center gap-2 whitespace-nowrap\"\n          >\n            {icon ? <IconSwap iconKey={glyph}>{icon}</IconSwap> : null}\n            <MorphText text={label} morphWidth={false} />\n          </span>\n        </span>\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {label}\n        </span>\n      </AriaButton>\n      <MenuTrigger>\n        <AriaButton\n          data-slot=\"split-trigger\"\n          aria-label={label + \" more actions\"}\n          isDisabled={isDisabled}\n          className={cn(\"group/trigger \" + half + \" \" + look.trigger)}\n        >\n          <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth={1.75}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            aria-hidden=\"true\"\n            className=\"size-4 motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </AriaButton>\n        <Menu placement=\"bottom end\" shouldFocusWrap className=\"menu-motion [--menu-ox:right]\">\n          {actions.map((action, index) => (\n            <MenuItem\n              key={action.label}\n              id={action.label}\n              textValue={action.label}\n              isDisabled={action.isDisabled}\n              onAction={action.onSelect}\n              data-i={Math.min(index, 4)}\n              className={cn(\n                \"menu-item-motion \" + itemBase + (action.destructive ? \" \" + itemDestructive : \"\"),\n              )}\n            >\n              {action.icon ? <span aria-hidden=\"true\">{action.icon}</span> : null}\n              {action.label}\n            </MenuItem>\n          ))}\n        </Menu>\n      </MenuTrigger>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAyCA,SAAS,QAAQ,MAAyB;CACxC,IAAI,CAAC,eAAe,IAAI,GACtB,OAAO,OAAO,SAAS,YAAY,OAAO,SAAS,WAAW,OAAO,IAAI,IAAI;CAC/E,MAAM,OAAO,KAAK;CAClB,OAAO,OAAO,SAAS,WAAW,OAAQ,MAAM,eAAe,MAAM,QAAQ;AAC/E;AASA,MAAM,OAAO;CACX;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,QAAQ;CACZ,SAAS;EACP,MAAM;EACN,MAAM;EACN,SACE;CACJ;CACA,WAAW;EACT,MAAM;EACN,MAAM;EACN,SACE;CACJ;AACF;;;;;;;;;;;;;;;AAoBA,SAAgB,YAAY,EAC1B,UAAU,OACV,SACA,SACA,YACA,MACA,UAAU,WACV,aACmB;CACnB,MAAM,aAAa,OAAwB,IAAI;CAC/C,MAAM,QAAQ,QAAQ,IAAI;CAC1B,MAAM,OAAO,MAAM;CACnB,cAAc,YAAY,QAAQ,MAAM,KAAK;CAE7C,OACE,qBAAC,OAAD;EACE,MAAK;EACL,WAAW,GAAG,0CAA0C,KAAK,MAAM,SAAS;EAF9E,UAAA,CAIE,qBAACA,QAAD;GACE,aAAU;GACV,WAAW,GAAG,OAAO,MAAM,KAAK,IAAI;GACxB;GACH;GAJX,UAAA,CAME,oBAAC,QAAD;IACE,WAAU;IACV,eAAY;IAEZ,UAAA,qBAAC,QAAD;KACE,KAAK;KACL,WAAU;KAFZ,UAAA,CAIG,OAAO,oBAAC,UAAD;MAAU,SAAS;MAAQ,UAAA;KAAe,CAAA,IAAI,MACtD,oBAAC,WAAD;MAAW,MAAM;MAAO,YAAY;KAAQ,CAAA,CACxC;;GACF,CAAA,GACN,oBAAC,QAAD;IAAM,WAAU;IAAU,aAAU;IACjC,UAAA;GACG,CAAA,CACI;EACZ,CAAA,GAAA,qBAAC,aAAD,EAAA,UAAA,CACE,oBAACA,QAAD;GACE,aAAU;GACV,cAAY,QAAQ;GACR;GACZ,WAAW,GAAG,mBAAmB,OAAO,MAAM,KAAK,OAAO;GAE1D,UAAA,oBAAC,OAAD;IACE,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,gBAAe;IACf,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;GACrB,CAAA;EACK,CAAA,GACZ,oBAACC,QAAD;GAAM,WAAU;GAAa,iBAAA;GAAgB,WAAU;GACpD,UAAA,QAAQ,KAAK,QAAQ,UACpB,qBAACC,YAAD;IAEE,IAAI,OAAO;IACX,WAAW,OAAO;IAClB,YAAY,OAAO;IACnB,UAAU,OAAO;IACjB,UAAQ,KAAK,IAAI,OAAO,CAAC;IACzB,WAAW,GACT,8BAAkC,OAAO,cAAc,0HAAwB,GACjF;IATF,UAAA,CAWG,OAAO,OAAO,oBAAC,QAAD;KAAM,eAAY;KAAQ,UAAA,OAAO;IAAW,CAAA,IAAI,MAC9D,OAAO,KACA;GAZH,GAAA,OAAO,KAYJ,CACX;EACG,CAAA,CACK,EAAA,CAAA,CACV;;AAET"}

package/dist/stat-card/index.d.ts

@@ -0,0 +1,2 @@
+import { StatCard, StatCardProps, StatCardTone, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card.js";
+export { StatCard, type StatCardProps, type StatCardTone, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants };

package/dist/stat-card/index.js

@@ -0,0 +1,2 @@
+import { StatCard, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card.js";
+export { StatCard, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants };