@seekalfred/primitives 0.5.1 → 0.7.1

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/index.d.ts

@@ -1,2 +1,2 @@
-import { Slider, SliderProps, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants } from "./slider.js";
-export { Slider, type SliderProps, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants };
+import { Slider, SliderMark, SliderProps, SliderValue, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants } from "./slider.js";
+export { Slider, type SliderMark, type SliderProps, type SliderValue, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants };

package/dist/slider/slider.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactElement, ReactNode, RefAttributes } from "react";
 import { SliderProps } from "react-aria-components";
 //#region src/slider/slider.d.ts
 /**
@@ -12,18 +12,21 @@ import { SliderProps } from "react-aria-components";
  *
  * `label` IS REQUIRED here, the same answer Progress and Dialog give.
  *
- * THE PALETTE DELIBERATELY DOES NOT MATCH SWITCH, and the reason is worth
- * stating because the two look like the same problem. A Switch has no
- * fill: its track is one colour and the thumb tells you the state, so
- * `border` unchecked and `primary-strong` checked works. A Slider has a
- * filled portion whose LENGTH is the value -- and `primary-strong` on a
- * `border` track is 1.01:1. The two halves would be the same grey and the
- * value would be invisible to anyone not reading the thumb position.
+ * LOOK (UX owner's colours): a thin, rounded track in primary 200 (light
+ * #FEEAE0, dark #441B00, role `slider-track`, no outline) with a fill in
+ * `primary-strong` (the dark orange, so it reads against the pale track) and a
+ * solid light thumb (`slider-thumb`) with a soft shadow. The label sits left
+ * and the value right. The fill's LENGTH is the value.
  *
- * So the track is `muted` with a `border` boundary and the fill is
- * `primary-strong`: fill against track 4.61:1, track against page 5.25:1,
- * thumb against fill 5.20:1, thumb edge against track 4.65:1. All four
- * pairs are in the build-failing contrast contract.
+ * Contrast, from contrast-pairs.json (build-failing): fill against the track
+ * 4.9:1 light / 8.3:1 dark; thumb against what it meets at its edge (the fill in
+ * light, a 2px ring in the page colour in dark -- see `shadow.slider-thumb`)
+ * 5.7:1 / 18.6:1. A near-white thumb on a light fill (dark) would otherwise
+ * melt into it, and the old dark thumb (the card colour) all but vanished on the
+ * page. The pale track is 1.12:1 / 1.3:1 on the page, under the 3:1 non-text
+ * floor, by the same accepted trade-off as `--border`; the state is the EDGE OF
+ * THE FILL (>= 4.9:1) plus the value text beside the label. The thumb is a 24px
+ * target and rests on the track with a shadow.
  *
  * Three legacy defects go with it: the focus ring was `ring-1`, a 1px
  * box-shadow that forced-colors discards entirely; the thumb border was
@@ -37,14 +40,22 @@ export declare const sliderTrackVariants: (props?: import("class-variance-author
 export declare const sliderBarVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const sliderFillVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const sliderThumbVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** One thumb is a number; two thumbs are a `[low, high]` pair. */
+export type SliderValue = number | [number, number];
+/** A tick on the track, with an optional label printed under it. */
+export interface SliderMark {
+  value: number;
+  label?: ReactNode;
+}
 /**
  * A value along a range.
  *
  * @example
  * <Slider label="Input volume" defaultValue={40} />
  * <Slider label="Playback position" value={t} onChange={seek} formatOptions={{ style: "percent" }} />
+ * <Slider label="Budget" defaultValue={[2200, 8000]} minValue={0} maxValue={10000} step={100} />
  */
-interface SliderProps$1 extends Omit<SliderProps<number>, "className" | "style" | "children"> {
+interface SliderProps$1<T extends SliderValue = number> extends Omit<SliderProps<number | number[]>, "className" | "style" | "children" | "value" | "defaultValue" | "onChange" | "onChangeEnd"> {
   /**
    * What the slider controls, and its accessible name.
    *
@@ -61,10 +72,31 @@ interface SliderProps$1 extends Omit<SliderProps<number>, "className" | "style"
    * distinguishable only by the thumb.
    */
   showValue?: boolean;
+  /** A number for one thumb, a `[low, high]` pair for a range with two thumbs. */
+  value?: T;
+  /** The uncontrolled value; its shape (a number or a pair) also picks one or two thumbs. */
+  defaultValue?: T;
+  onChange?: (value: T) => void;
+  /** Runs once a drag is released or a key changes the value, for work too heavy for every step. */
+  onChangeEnd?: (value: T) => void;
+  /** Grey helper text under the control. It also describes the slider to a screen reader. */
+  description?: ReactNode;
+  /**
+   * Tick dots on the track. A number draws a tick; a mark with a `label` also
+   * prints it under the track. Marks are decoration: the slider still reads out
+   * its own value, so pair them with `step` to make the ticks reachable.
+   */
+  marks?: (number | SliderMark)[];
+  /** Accessible names for the two range thumbs. @default ["Minimum", "Maximum"] */
+  thumbLabels?: [string, string];
+  /** Content before the track, such as an icon button that mutes. */
+  start?: ReactNode;
+  /** Content after the track. */
+  end?: ReactNode;
   /** Extra classes. Merged last, so they win conflicts with ours. */
   className?: string;
 }
-declare const Slider$1: import("react").ForwardRefExoticComponent<SliderProps$1 & import("react").RefAttributes<HTMLDivElement>>;
+declare const Slider$1: <T extends SliderValue = number>(props: SliderProps$1<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
 //#endregion
 export { Slider$1 as Slider, SliderProps$1 as SliderProps };
 //# sourceMappingURL=slider.d.ts.map

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 { Label, Slider, SliderOutput, SliderThumb, SliderTrack } from "react-aria-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, forwardRef, useContext, useId, useState } from "react";
+import { Label, Slider, SliderOutput, SliderStateContext, SliderThumb, SliderTrack } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/slider/slider.tsx
 /**
 * Slider, ported from the legacy shadcn/Radix component.
@@ -16,18 +17,21 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 *
 * `label` IS REQUIRED here, the same answer Progress and Dialog give.
 *
-* THE PALETTE DELIBERATELY DOES NOT MATCH SWITCH, and the reason is worth
-* stating because the two look like the same problem. A Switch has no
-* fill: its track is one colour and the thumb tells you the state, so
-* `border` unchecked and `primary-strong` checked works. A Slider has a
-* filled portion whose LENGTH is the value -- and `primary-strong` on a
-* `border` track is 1.01:1. The two halves would be the same grey and the
-* value would be invisible to anyone not reading the thumb position.
+* LOOK (UX owner's colours): a thin, rounded track in primary 200 (light
+* #FEEAE0, dark #441B00, role `slider-track`, no outline) with a fill in
+* `primary-strong` (the dark orange, so it reads against the pale track) and a
+* solid light thumb (`slider-thumb`) with a soft shadow. The label sits left
+* and the value right. The fill's LENGTH is the value.
 *
-* So the track is `muted` with a `border` boundary and the fill is
-* `primary-strong`: fill against track 4.61:1, track against page 5.25:1,
-* thumb against fill 5.20:1, thumb edge against track 4.65:1. All four
-* pairs are in the build-failing contrast contract.
+* Contrast, from contrast-pairs.json (build-failing): fill against the track
+* 4.9:1 light / 8.3:1 dark; thumb against what it meets at its edge (the fill in
+* light, a 2px ring in the page colour in dark -- see `shadow.slider-thumb`)
+* 5.7:1 / 18.6:1. A near-white thumb on a light fill (dark) would otherwise
+* melt into it, and the old dark thumb (the card colour) all but vanished on the
+* page. The pale track is 1.12:1 / 1.3:1 on the page, under the 3:1 non-text
+* floor, by the same accepted trade-off as `--border`; the state is the EDGE OF
+* THE FILL (>= 4.9:1) plus the value text beside the label. The thumb is a 24px
+* target and rests on the track with a shadow.
 *
 * Three legacy defects go with it: the focus ring was `ring-1`, a 1px
 * box-shadow that forced-colors discards entirely; the thumb border was
@@ -36,14 +40,20 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * form elements -- Radix renders a `<span role="slider">`, so a disabled
 * 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 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 sliderVariants = cva(["flex w-full flex-col gap-2 box-border font-sans", "data-[disabled]:opacity-(--opacity-disabled)"]);
+const sliderTrackVariants = cva([
+	"relative mx-3 flex items-center",
+	"h-6",
+	"slider-track"
+]);
+const sliderBarVariants = cva(["absolute h-1.5 w-full rounded-pill bg-slider-track"]);
+const sliderFillVariants = cva(["absolute h-1.5 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",
+	"size-6 rounded-circle box-border",
+	"top-1/2",
+	"bg-slider-thumb",
 	"cursor-grab data-[dragging]:cursor-grabbing",
+	"slider-thumb",
 	"outline-none",
 	"data-[focus-visible]:outline-solid",
 	"data-[focus-visible]:outline-(length:--focus-ring-width)",
@@ -51,41 +61,169 @@ const sliderThumbVariants = cva([
 	"data-[focus-visible]:outline-(--color-ring)",
 	"data-[disabled]:cursor-not-allowed"
 ]);
-const Slider$1 = forwardRef(function Slider$2({ label, labelHidden, showValue = true, className, ...props }, ref) {
+/** A tick dot on the track: dim on the unfilled side, light where the fill passes under it. */
+const sliderTickClasses = "pointer-events-none absolute top-1/2 size-1 -translate-1/2 rounded-pill bg-foreground/30 data-[on]:bg-background/60 motion-safe:transition-colors motion-safe:duration-(--duration-quick)";
+/** A step label under its tick. */
+const sliderMarkLabelClasses = "slider-mark-label absolute top-0 whitespace-nowrap text-xs leading-(--leading-normal) text-text-secondary tabular-nums data-[on]:text-foreground motion-safe:transition-colors motion-safe:duration-(--duration-quick)";
+/**
+* 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 RANGE_DASH = " – ";
+/** Step labels under the track, each centred on its tick (the end ones hold inside the component). */
+function SliderMarkLabels({ marks, percentOf, minValue, maxValue }) {
+	const values = useContext(SliderStateContext)?.values ?? [];
+	const isOn = (v) => values.length > 1 ? v >= values[0] && v <= values[values.length - 1] : v <= (values[0] ?? minValue);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		"data-slot": "slider-marks",
+		className: "relative col-start-2 row-start-2 mx-3 mt-1 h-5",
+		children: marks.map((mark) => mark.label == null ? null : /* @__PURE__ */ jsx("span", {
+			"data-slot": "slider-mark-label",
+			"data-on": isOn(mark.value) || void 0,
+			"data-edge": mark.value <= minValue ? "start" : mark.value >= maxValue ? "end" : void 0,
+			className: sliderMarkLabelClasses,
+			style: { left: `${percentOf(mark.value)}%` },
+			children: mark.label
+		}, mark.value))
+	});
+}
+const Slider$1 = forwardRef(function Slider$2({ label, labelHidden, showValue = true, description, marks, thumbLabels = ["Minimum", "Maximum"], start, end, className, "aria-describedby": describedByProp, ...props }, ref) {
+	const descriptionId = useId();
+	const describedBy = [describedByProp, description == null ? null : descriptionId].filter(Boolean).join(" ");
+	const minValue = props.minValue ?? 0;
+	const maxValue = props.maxValue ?? 100;
+	const markList = (marks ?? []).map((mark) => typeof mark === "number" ? { value: mark } : mark);
+	const percentOf = (v) => maxValue === minValue ? 0 : (v - minValue) / (maxValue - minValue) * 100;
 	return /* @__PURE__ */ jsxs(Slider, {
 		ref,
 		...props,
 		"data-slot": "slider",
 		className: cn(sliderVariants(), className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: cnAll("flex items-center justify-between gap-2", labelHidden && "sr-only"),
-			children: [/* @__PURE__ */ jsx(Label, {
-				"data-slot": "slider-label",
-				className: "text-sm leading-(--leading-normal) text-foreground",
-				children: label
-			}), showValue ? /* @__PURE__ */ jsx(SliderOutput, {
-				"data-slot": "slider-output",
-				className: "text-sm leading-(--leading-normal) text-muted-foreground"
-			}) : null]
-		}), /* @__PURE__ */ jsx(SliderTrack, {
-			"data-slot": "slider-track",
-			className: sliderTrackVariants(),
-			children: ({ state }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsx("div", {
-					"data-slot": "slider-bar",
-					className: sliderBarVariants()
-				}),
-				/* @__PURE__ */ jsx("div", {
-					"data-slot": "slider-fill",
-					className: sliderFillVariants(),
-					style: { width: `${state.getThumbPercent(0) * 100}%` }
-				}),
-				/* @__PURE__ */ jsx(SliderThumb, {
-					"data-slot": "slider-thumb",
-					className: sliderThumbVariants()
-				})
-			] })
-		})]
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cnAll("flex items-baseline justify-between gap-4", labelHidden && "sr-only"),
+				children: [/* @__PURE__ */ jsx(Label, {
+					"data-slot": "slider-label",
+					className: "text-sm leading-(--leading-normal) font-medium text-foreground",
+					children: label
+				}), showValue ? /* @__PURE__ */ jsx(SliderOutput, {
+					"data-slot": "slider-output",
+					className: "text-sm leading-(--leading-normal) whitespace-nowrap text-text-secondary tabular-nums",
+					children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: RANGE_DASH
+					}) : null, /* @__PURE__ */ jsx(RollingText, {
+						value: state.getThumbValue(i),
+						text: state.getThumbValueLabel(i)
+					})] }, i))
+				}) : null]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center",
+				children: [
+					start ? /* @__PURE__ */ jsx("div", {
+						className: "col-start-1 row-start-1 me-3 flex",
+						children: start
+					}) : null,
+					/* @__PURE__ */ jsx(SliderTrack, {
+						"data-slot": "slider-track",
+						className: cnAll(sliderTrackVariants(), "col-start-2 row-start-1"),
+						children: ({ state }) => {
+							const count = state.values.length;
+							const low = count > 1 ? state.getThumbPercent(0) * 100 : 0;
+							const high = state.getThumbPercent(count - 1) * 100;
+							const dragging = state.values.some((_, i) => state.isThumbDragging(i));
+							const isOn = (v) => count > 1 ? v >= state.values[0] && v <= state.values[count - 1] : v <= state.values[0];
+							return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+								/* @__PURE__ */ jsx("div", {
+									"data-slot": "slider-bar",
+									className: sliderBarVariants()
+								}),
+								/* @__PURE__ */ jsx("div", {
+									"data-slot": "slider-fill",
+									className: sliderFillVariants(),
+									"data-dragging": dragging || void 0,
+									style: {
+										left: `${low}%`,
+										width: `${high - low}%`
+									}
+								}),
+								markList.map((mark) => /* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									"data-slot": "slider-tick",
+									"data-on": isOn(mark.value) || void 0,
+									className: sliderTickClasses,
+									style: { left: `${percentOf(mark.value)}%` }
+								}, mark.value)),
+								state.values.map((_, i) => /* @__PURE__ */ jsx(SliderThumb, {
+									index: i,
+									"aria-label": count > 1 ? thumbLabels[i] : void 0,
+									"aria-describedby": describedBy || void 0,
+									"data-slot": "slider-thumb",
+									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(i) * 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(i),
+												text: thumbState.getThumbValueLabel(i)
+											})
+										})
+									})
+								}, i))
+							] });
+						}
+					}),
+					end ? /* @__PURE__ */ jsx("div", {
+						className: "col-start-3 row-start-1 ms-3 flex",
+						children: end
+					}) : null,
+					markList.some((mark) => mark.label != null) ? /* @__PURE__ */ jsx(SliderMarkLabels, {
+						marks: markList,
+						percentOf,
+						minValue,
+						maxValue
+					}) : null
+				]
+			}),
+			description != null ? /* @__PURE__ */ jsx("p", {
+				id: descriptionId,
+				"data-slot": "slider-description",
+				className: "m-0 text-sm leading-(--leading-normal) text-text-secondary",
+				children: description
+			}) : null
+		]
 	});
 });
 //#endregion