@seekalfred/primitives 0.2.0 → 0.4.0

package/dist/sheet/index.d.ts

@@ -0,0 +1,2 @@
+import { Sheet, SheetProps, sheetOverlayVariants, sheetPanelVariants } from "./sheet.js";
+export { Sheet, type SheetProps, sheetOverlayVariants, sheetPanelVariants };

package/dist/sheet/index.js

@@ -0,0 +1,2 @@
+import { Sheet, sheetOverlayVariants, sheetPanelVariants } from "./sheet.js";
+export { Sheet, sheetOverlayVariants, sheetPanelVariants };

package/dist/sheet/sheet.d.ts

@@ -0,0 +1,96 @@
+import { DialogProps } from "../dialog/dialog.js";
+//#region src/sheet/sheet.d.ts
+/**
+ * Sheet: a dialog that arrives from an edge.
+ *
+ * A PRESET over `Dialog`, like `AlertDialog`. The legacy `sheet.tsx` is
+ * `@radix-ui/react-dialog` again -- the same import, the same parts, the
+ * same close button -- with one prop changing where it sits. Keeping a
+ * second copy is how the legacy `dialog.tsx` and `alert-dialog.tsx`
+ * drifted, and this is the same file for the third time.
+ *
+ * Census: 2 files, 3 uses. `side="right"` twice, `side="left"` once, and
+ * `className` four times. `SheetHeader`, `SheetFooter`, `SheetTitle`,
+ * `SheetDescription` and `SheetClose` are exported by the legacy and used
+ * by NOBODY -- so all three sheets in the app render a `role="dialog"`
+ * with no title at all. Radix even warns about it in the console.
+ *
+ * `title` is required here, inherited from Dialog, so that is no longer
+ * expressible.
+ *
+ * `side` is `"left" | "right"` only. The legacy also offers `"top"` and
+ * `"bottom"`; both have zero call sites, and each is two lines to add the
+ * day something needs one.
+ *
+ * A REAL BUG THE PORT FIXES: the legacy panel is `w-3/4 sm:max-w-sm`, and
+ * `sm:max-w-sm` names `--container-sm`, which this repo does not define --
+ * so in Alfred it would compile to NOTHING and the sheet would be 75% of
+ * the viewport at every width, on a phone and on a 4K monitor alike. The
+ * width here is a spacing-scale step that actually resolves.
+ *
+ * NOT PORTED: the slide-in animation. It comes from tailwindcss-animate,
+ * which this repo does not ship. React Aria exposes `data-entering` and
+ * `data-exiting`, and `--animate-*` tokens now exist, so it is a small
+ * follow-up rather than a blocker.
+ */
+export declare const sheetOverlayVariants: (props?: ({
+  side?: "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sheetPanelVariants: (props?: ({
+  side?: "left" | "right" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * A panel that arrives from the side.
+ *
+ * @example
+ * <Sheet isOpen={open} onOpenChange={setOpen} title="Filters">
+ *   ...
+ * </Sheet>
+ */
+export interface SheetProps extends Omit<DialogProps, "overlayClassName"> {
+  /**
+   * Which edge it is attached to.
+   *
+   * `"top"` and `"bottom"` exist in the legacy and have zero call sites.
+   *
+   * @default "right"
+   */
+  side?: "left" | "right";
+  /**
+   * Show a back control, and what it does.
+   *
+   * A side panel that goes a level deeper REPLACES its own contents rather
+   * than stacking a second modal on top, so the browser's back affordance and
+   * the escape key both do the wrong thing -- they close the whole panel
+   * instead of returning one level. The product's own note calls this the
+   * thing that "makes items 119 and 120 one change rather than two".
+   */
+  onBack?: () => void;
+  /** Accessible name and label for the back control. @default "Back" */
+  backLabel?: string;
+  /**
+   * Change this when the panel's contents change, and the body scrolls back
+   * to the top.
+   *
+   * Going a level deeper and landing halfway down the new view is
+   * disorienting, and it is the kind of thing every call site forgets --
+   * which is why it belongs here rather than in each of them.
+   */
+  scrollResetKey?: string | number;
+  /** Extra classes for the scrolling body region. */
+  bodyClassName?: string;
+  /**
+   * Names the scrolling body region. Defaults to `title` when that is a
+   * string, which it is at every call site in the product.
+   *
+   * The body is a `ScrollArea`, so it is focusable -- a scrollable region that
+   * is not reachable by keyboard is WCAG 2.1.1, and axe caught exactly that
+   * when this was a plain div. The product's own `SidePanelBody` still is one.
+   * A focusable element needs a role and a role needs a name, so this is the
+   * only combination that is actually correct.
+   */
+  bodyLabel?: string;
+}
+export declare function Sheet({ side, className, onBack, backLabel, scrollResetKey, bodyClassName, bodyLabel, title, children, ...props }: SheetProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=sheet.d.ts.map

package/dist/sheet/sheet.js

@@ -0,0 +1,98 @@
+"use client";
+import { Dialog } from "../dialog/dialog.js";
+import { Button } from "../button/button.js";
+import { ScrollArea } from "../scroll-area/scroll-area.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+//#region src/sheet/sheet.tsx
+/**
+* Sheet: a dialog that arrives from an edge.
+*
+* A PRESET over `Dialog`, like `AlertDialog`. The legacy `sheet.tsx` is
+* `@radix-ui/react-dialog` again -- the same import, the same parts, the
+* same close button -- with one prop changing where it sits. Keeping a
+* second copy is how the legacy `dialog.tsx` and `alert-dialog.tsx`
+* drifted, and this is the same file for the third time.
+*
+* Census: 2 files, 3 uses. `side="right"` twice, `side="left"` once, and
+* `className` four times. `SheetHeader`, `SheetFooter`, `SheetTitle`,
+* `SheetDescription` and `SheetClose` are exported by the legacy and used
+* by NOBODY -- so all three sheets in the app render a `role="dialog"`
+* with no title at all. Radix even warns about it in the console.
+*
+* `title` is required here, inherited from Dialog, so that is no longer
+* expressible.
+*
+* `side` is `"left" | "right"` only. The legacy also offers `"top"` and
+* `"bottom"`; both have zero call sites, and each is two lines to add the
+* day something needs one.
+*
+* A REAL BUG THE PORT FIXES: the legacy panel is `w-3/4 sm:max-w-sm`, and
+* `sm:max-w-sm` names `--container-sm`, which this repo does not define --
+* so in Alfred it would compile to NOTHING and the sheet would be 75% of
+* the viewport at every width, on a phone and on a 4K monitor alike. The
+* width here is a spacing-scale step that actually resolves.
+*
+* NOT PORTED: the slide-in animation. It comes from tailwindcss-animate,
+* which this repo does not ship. React Aria exposes `data-entering` and
+* `data-exiting`, and `--animate-*` tokens now exist, so it is a small
+* follow-up rather than a blocker.
+*/
+const sheetOverlayVariants = cva("p-0", {
+	variants: { side: {
+		left: "justify-start items-stretch",
+		right: "justify-end items-stretch"
+	} },
+	defaultVariants: { side: "right" }
+});
+const sheetPanelVariants = cva([
+	"h-full w-full max-w-96",
+	"rounded-none",
+	"max-h-full overflow-y-auto"
+], {
+	variants: { side: {
+		left: "border-y-0 border-s-0",
+		right: "border-y-0 border-e-0"
+	} },
+	defaultVariants: { side: "right" }
+});
+function BackArrowGlyph() {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className: "size-(--icon-sm) rtl:-scale-x-100",
+		children: /* @__PURE__ */ jsx("path", { d: "M10 3 5 8l5 5" })
+	});
+}
+function Sheet({ side = "right", className, onBack, backLabel = "Back", scrollResetKey, bodyClassName, bodyLabel, title, children, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		...props,
+		title,
+		beforeTitle: onBack ? /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "sm",
+			"data-slot": "sheet-back",
+			className: "-ms-2 w-fit",
+			startIcon: /* @__PURE__ */ jsx(BackArrowGlyph, {}),
+			onPress: onBack,
+			children: backLabel
+		}) : void 0,
+		overlayClassName: sheetOverlayVariants({ side }),
+		className: [sheetPanelVariants({ side }), className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsx(ScrollArea, {
+			scrollResetKey,
+			label: bodyLabel ?? (typeof title === "string" ? title : ""),
+			className: ["min-h-0 flex-1", bodyClassName].filter(Boolean).join(" "),
+			children
+		})
+	});
+}
+//#endregion
+export { Sheet, sheetOverlayVariants, sheetPanelVariants };
+
+//# sourceMappingURL=sheet.js.map

package/dist/sheet/sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.js","names":[],"sources":["../../src/sheet/sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\n\nimport { Button } from \"../button/button.js\";\nimport { Dialog, type DialogProps } from \"../dialog/dialog.js\";\nimport { ScrollArea } from \"../scroll-area/scroll-area.js\";\n\n/**\n * Sheet: a dialog that arrives from an edge.\n *\n * A PRESET over `Dialog`, like `AlertDialog`. The legacy `sheet.tsx` is\n * `@radix-ui/react-dialog` again -- the same import, the same parts, the\n * same close button -- with one prop changing where it sits. Keeping a\n * second copy is how the legacy `dialog.tsx` and `alert-dialog.tsx`\n * drifted, and this is the same file for the third time.\n *\n * Census: 2 files, 3 uses. `side=\"right\"` twice, `side=\"left\"` once, and\n * `className` four times. `SheetHeader`, `SheetFooter`, `SheetTitle`,\n * `SheetDescription` and `SheetClose` are exported by the legacy and used\n * by NOBODY -- so all three sheets in the app render a `role=\"dialog\"`\n * with no title at all. Radix even warns about it in the console.\n *\n * `title` is required here, inherited from Dialog, so that is no longer\n * expressible.\n *\n * `side` is `\"left\" | \"right\"` only. The legacy also offers `\"top\"` and\n * `\"bottom\"`; both have zero call sites, and each is two lines to add the\n * day something needs one.\n *\n * A REAL BUG THE PORT FIXES: the legacy panel is `w-3/4 sm:max-w-sm`, and\n * `sm:max-w-sm` names `--container-sm`, which this repo does not define --\n * so in Alfred it would compile to NOTHING and the sheet would be 75% of\n * the viewport at every width, on a phone and on a 4K monitor alike. The\n * width here is a spacing-scale step that actually resolves.\n *\n * NOT PORTED: the slide-in animation. It comes from tailwindcss-animate,\n * which this repo does not ship. React Aria exposes `data-entering` and\n * `data-exiting`, and `--animate-*` tokens now exist, so it is a small\n * follow-up rather than a blocker.\n */\nexport const sheetOverlayVariants = cva(\"p-0\", {\n  variants: {\n    // The overlay is a flex box centring the panel. A sheet replaces that\n    // centring with an edge alignment rather than positioning the panel\n    // absolutely, so the scrim and the panel stay one layout.\n    side: {\n      left: \"justify-start items-stretch\",\n      right: \"justify-end items-stretch\",\n    },\n  },\n  defaultVariants: { side: \"right\" },\n});\n\nexport const sheetPanelVariants = cva(\n  [\n    // max-w-96 is 384px and RESOLVES. See the note above on sm:max-w-sm.\n    \"h-full w-full max-w-96\",\n    // Square against the edge it is attached to: a rounded corner flush\n    // with the viewport edge reads as a rendering fault.\n    \"rounded-none\",\n    \"max-h-full overflow-y-auto\",\n  ],\n  {\n    variants: {\n      side: {\n        left: \"border-y-0 border-s-0\",\n        right: \"border-y-0 border-e-0\",\n      },\n    },\n    defaultVariants: { side: \"right\" },\n  },\n);\n\n/**\n * A panel that arrives from the side.\n *\n * @example\n * <Sheet isOpen={open} onOpenChange={setOpen} title=\"Filters\">\n *   ...\n * </Sheet>\n */\nexport interface SheetProps extends Omit<DialogProps, \"overlayClassName\"> {\n  /**\n   * Which edge it is attached to.\n   *\n   * `\"top\"` and `\"bottom\"` exist in the legacy and have zero call sites.\n   *\n   * @default \"right\"\n   */\n  side?: \"left\" | \"right\";\n  /**\n   * Show a back control, and what it does.\n   *\n   * A side panel that goes a level deeper REPLACES its own contents rather\n   * than stacking a second modal on top, so the browser's back affordance and\n   * the escape key both do the wrong thing -- they close the whole panel\n   * instead of returning one level. The product's own note calls this the\n   * thing that \"makes items 119 and 120 one change rather than two\".\n   */\n  onBack?: () => void;\n  /** Accessible name and label for the back control. @default \"Back\" */\n  backLabel?: string;\n  /**\n   * Change this when the panel's contents change, and the body scrolls back\n   * to the top.\n   *\n   * Going a level deeper and landing halfway down the new view is\n   * disorienting, and it is the kind of thing every call site forgets --\n   * which is why it belongs here rather than in each of them.\n   */\n  scrollResetKey?: string | number;\n  /** Extra classes for the scrolling body region. */\n  bodyClassName?: string;\n  /**\n   * Names the scrolling body region. Defaults to `title` when that is a\n   * string, which it is at every call site in the product.\n   *\n   * The body is a `ScrollArea`, so it is focusable -- a scrollable region that\n   * is not reachable by keyboard is WCAG 2.1.1, and axe caught exactly that\n   * when this was a plain div. The product's own `SidePanelBody` still is one.\n   * A focusable element needs a role and a role needs a name, so this is the\n   * only combination that is actually correct.\n   */\n  bodyLabel?: string;\n}\n\nfunction BackArrowGlyph() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      // Logical, so it points the right way once the panel mirrors in RTL.\n      className=\"size-(--icon-sm) rtl:-scale-x-100\"\n    >\n      <path d=\"M10 3 5 8l5 5\" />\n    </svg>\n  );\n}\n\nexport function Sheet({\n  side = \"right\",\n  className,\n  onBack,\n  backLabel = \"Back\",\n  scrollResetKey,\n  bodyClassName,\n  bodyLabel,\n  title,\n  children,\n  ...props\n}: SheetProps) {\n  return (\n    /*\n      No data-slot here. Dialog spreads its props onto the ModalOverlay and\n      writes data-slot=\"dialog-overlay\" AFTER the spread, so a data-slot\n      passed from here is overwritten before it reaches the DOM -- it read as\n      working while rendering nothing. A sheet is identified by its side\n      variant and its panel classes instead.\n    */\n    <Dialog\n      {...props}\n      title={title}\n      beforeTitle={\n        onBack ? (\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            data-slot=\"sheet-back\"\n            className=\"-ms-2 w-fit\"\n            startIcon={<BackArrowGlyph />}\n            onPress={onBack}\n          >\n            {backLabel}\n          </Button>\n        ) : undefined\n      }\n      overlayClassName={sheetOverlayVariants({ side })}\n      className={[sheetPanelVariants({ side }), className].filter(Boolean).join(\" \")}\n    >\n      {/*\n        The scrolling region is its own element so the title and the back\n        control stay put while the content moves. A panel that scrolled as one\n        block would take its own heading off screen.\n      */}\n      {/*\n        No data-slot=\"sheet-body\" here, for the same reason the overlay has\n        none: ScrollArea spreads its props and writes data-slot=\"scroll-area\"\n        AFTER the spread, so one passed from here is overwritten before it\n        reaches the DOM. It read as wired while selecting nothing.\n      */}\n      <ScrollArea\n        scrollResetKey={scrollResetKey}\n        label={bodyLabel ?? (typeof title === \"string\" ? title : \"\")}\n        className={[\"min-h-0 flex-1\", bodyClassName].filter(Boolean).join(\" \")}\n      >\n        {children}\n      </ScrollArea>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,uBAAuB,IAAI,OAAO;CAC7C,UAAU,EAIR,MAAM;EACJ,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EAAE,MAAM,QAAQ;AACnC,CAAC;AAED,MAAa,qBAAqB,IAChC;CAEE;CAGA;CACA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EAAE,MAAM,QAAQ;AACnC,CACF;AAuDA,SAAS,iBAAiB;CACxB,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EAEf,WAAU;EAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;CACtB,CAAA;AAET;AAEA,SAAgB,MAAM,EACpB,OAAO,SACP,WACA,QACA,YAAY,QACZ,gBACA,eACA,WACA,OACA,UACA,GAAG,SACU;CACb,OAQE,oBAAC,QAAD;EACE,GAAI;EACG;EACP,aACE,SACE,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,aAAU;GACV,WAAU;GACV,WAAW,oBAAC,gBAAD,CAAiB,CAAA;GAC5B,SAAS;GAER,UAAA;EACK,CAAA,IACN,KAAA;EAEN,kBAAkB,qBAAqB,EAAE,KAAK,CAAC;EAC/C,WAAW,CAAC,mBAAmB,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAa7E,UAAA,oBAAC,YAAD;GACkB;GAChB,OAAO,cAAc,OAAO,UAAU,WAAW,QAAQ;GACzD,WAAW,CAAC,kBAAkB,aAAa,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAEpE;EACS,CAAA;CACN,CAAA;AAEZ"}

package/dist/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import { Skeleton, SkeletonProps, skeletonVariants } from "./skeleton.js";
+export { Skeleton, type SkeletonProps, skeletonVariants };

package/dist/skeleton/index.js

@@ -0,0 +1,2 @@
+import { Skeleton, skeletonVariants } from "./skeleton.js";
+export { Skeleton, skeletonVariants };

package/dist/skeleton/skeleton.d.ts

@@ -0,0 +1,33 @@
+import { ComponentPropsWithoutRef } from "react";
+//#region src/skeleton/skeleton.d.ts
+/**
+ * Skeleton, ported from the legacy shadcn component.
+ *
+ * Census: 2 files, 33 uses, and every single one passes `className` and
+ * nothing else -- the size always comes from the call site. So there is no
+ * variant axis to invent here; the component is a surface and a pulse.
+ *
+ * THE PULSE DID NOT EXIST. `animate-pulse` names `--animate-pulse`, which
+ * this repo does not define: it imports only `tailwindcss/utilities.css`,
+ * never Tailwind's default theme, so both the custom property and the
+ * `@keyframes pulse` are absent and the utility emits NO RULE AT ALL. The
+ * class was present, tsc and ESLint were happy, and nothing moved. Same
+ * failure mode as the Dialog's `max-w-lg`. This port adds the token
+ * (`scale.json` -> `--animate-pulse`) and the keyframes
+ * (`@seekalfred/styles/motion.css`).
+ *
+ * `bg-accent` becomes `bg-muted`: in the legacy theme `--accent` is
+ * character-for-character `--muted` in both themes, so this is a rename to
+ * the role Alfred actually has, not a colour change.
+ */
+export declare const skeletonVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * A loading placeholder.
+ *
+ * @example
+ * <Skeleton className="h-4 w-32" />
+ */
+export type SkeletonProps = ComponentPropsWithoutRef<"div">;
+export declare function Skeleton({ className, ...props }: SkeletonProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/skeleton/skeleton.js

@@ -0,0 +1,42 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+//#region src/skeleton/skeleton.tsx
+/**
+* Skeleton, ported from the legacy shadcn component.
+*
+* Census: 2 files, 33 uses, and every single one passes `className` and
+* nothing else -- the size always comes from the call site. So there is no
+* variant axis to invent here; the component is a surface and a pulse.
+*
+* THE PULSE DID NOT EXIST. `animate-pulse` names `--animate-pulse`, which
+* this repo does not define: it imports only `tailwindcss/utilities.css`,
+* never Tailwind's default theme, so both the custom property and the
+* `@keyframes pulse` are absent and the utility emits NO RULE AT ALL. The
+* class was present, tsc and ESLint were happy, and nothing moved. Same
+* failure mode as the Dialog's `max-w-lg`. This port adds the token
+* (`scale.json` -> `--animate-pulse`) and the keyframes
+* (`@seekalfred/styles/motion.css`).
+*
+* `bg-accent` becomes `bg-muted`: in the legacy theme `--accent` is
+* character-for-character `--muted` in both themes, so this is a rename to
+* the role Alfred actually has, not a colour change.
+*/
+const skeletonVariants = cva([
+	"block bg-muted rounded-md",
+	"motion-safe:animate-pulse",
+	"box-border"
+]);
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"aria-hidden": "true",
+		"data-slot": "skeleton",
+		className: cn(skeletonVariants(), className)
+	});
+}
+//#endregion
+export { Skeleton, skeletonVariants };
+
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport 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 function Skeleton({ className, ...props }: SkeletonProps) {\n  return (\n    <div\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,SAAgB,SAAS,EAAE,WAAW,GAAG,SAAwB;CAC/D,OACE,oBAAC,OAAD;EACE,GAAI;EAKJ,eAAY;EACZ,aAAU;EACV,WAAW,GAAG,iBAAiB,GAAG,SAAS;CAC5C,CAAA;AAEL"}

package/dist/slider/index.d.ts

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

package/dist/slider/index.js

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

package/dist/slider/slider.d.ts

@@ -0,0 +1,70 @@
+import { SliderProps } from "react-aria-components";
+import { ReactNode } from "react";
+//#region src/slider/slider.d.ts
+/**
+ * Slider, ported from the legacy shadcn/Radix component.
+ *
+ * Census: 4 call sites, all single-thumb, none of them named. Radix only
+ * generates thumb labels at two or more thumbs, so all four are announced
+ * as an unnamed slider -- `AudioSettings.tsx` even renders a
+ * `<Label>Input Volume</Label>` directly above one, with no `htmlFor` and
+ * no `id`, so it is associated with nothing at all.
+ *
+ * `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.
+ *
+ * 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.
+ *
+ * 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
+ * `border-primary/50`, an alpha edge with no measurable contrast; and the
+ * disabled styling used `disabled:`, a pseudo-class that only applies to
+ * form elements -- Radix renders a `<span role="slider">`, so a disabled
+ * slider looked exactly like an enabled one.
+ */
+export declare const sliderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const sliderTrackVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+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;
+/**
+ * A value along a range.
+ *
+ * @example
+ * <Slider label="Input volume" defaultValue={40} />
+ * <Slider label="Playback position" value={t} onChange={seek} formatOptions={{ style: "percent" }} />
+ */
+interface SliderProps$1 extends Omit<SliderProps<number>, "className" | "style" | "children"> {
+  /**
+   * What the slider controls, and its accessible name.
+   *
+   * **Required.** All four legacy call sites are unnamed sliders.
+   */
+  label: ReactNode;
+  /** Render the label for screen readers only. */
+  labelHidden?: boolean;
+  /**
+   * Show the current value as text beside the label.
+   *
+   * On by default. It is the text equivalent of the fill length, which
+   * matters because in greyscale the filled and unfilled halves are
+   * distinguishable only by the thumb.
+   */
+  showValue?: boolean;
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+declare function Slider$1({ label, labelHidden, showValue, className, ...props }: SliderProps$1): import("react").JSX.Element;
+//#endregion
+export { Slider$1 as Slider, SliderProps$1 as SliderProps };
+//# sourceMappingURL=slider.d.ts.map

package/dist/slider/slider.js

@@ -0,0 +1,92 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "class-variance-authority";
+import { Label, Slider, SliderOutput, SliderThumb, SliderTrack } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/slider/slider.tsx
+/**
+* Slider, ported from the legacy shadcn/Radix component.
+*
+* Census: 4 call sites, all single-thumb, none of them named. Radix only
+* generates thumb labels at two or more thumbs, so all four are announced
+* as an unnamed slider -- `AudioSettings.tsx` even renders a
+* `<Label>Input Volume</Label>` directly above one, with no `htmlFor` and
+* no `id`, so it is associated with nothing at all.
+*
+* `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.
+*
+* 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.
+*
+* 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
+* `border-primary/50`, an alpha edge with no measurable contrast; and the
+* disabled styling used `disabled:`, a pseudo-class that only applies to
+* 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 sliderThumbVariants = cva([
+	"size-6 rounded-full box-border",
+	"bg-background border-(length:--border-width) border-border shadow-surface",
+	"cursor-grab data-[dragging]:cursor-grabbing",
+	"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"
+]);
+function Slider$1({ label, labelHidden, showValue = true, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Slider, {
+		...props,
+		"data-slot": "slider",
+		className: cn(sliderVariants(), className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("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()
+				})
+			] })
+		})]
+	});
+}
+//#endregion
+export { Slider$1 as Slider, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants };
+
+//# sourceMappingURL=slider.js.map

package/dist/slider/slider.js.map

@@ -0,0 +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 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 } 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 function Slider({\n  label,\n  labelHidden,\n  showValue = true,\n  className,\n  ...props\n}: SliderProps) {\n  return (\n    <AriaSlider {...props} data-slot=\"slider\" className={cn(sliderVariants(), className)}>\n      <div className={cn(\"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,SAAgBA,SAAO,EACrB,OACA,aACA,YAAY,MACZ,WACA,GAAG,SACW;CACd,OACE,qBAACC,QAAD;EAAY,GAAI;EAAO,aAAU;EAAS,WAAW,GAAG,eAAe,GAAG,SAAS;EAAnF,UAAA,CACE,qBAAC,OAAD;GAAK,WAAW,GAAG,2CAA2C,eAAe,SAAS;GAAtF,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"}

package/dist/spinner/index.d.ts

@@ -0,0 +1,2 @@
+import { Spinner, SpinnerProps, spinnerVariants } from "./spinner.js";
+export { Spinner, type SpinnerProps, spinnerVariants };

package/dist/spinner/index.js

@@ -0,0 +1,2 @@
+import { Spinner, spinnerVariants } from "./spinner.js";
+export { Spinner, spinnerVariants };

package/dist/spinner/spinner.d.ts

@@ -0,0 +1,75 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithoutRef } from "react";
+//#region src/spinner/spinner.d.ts
+/**
+ * Spinner.
+ *
+ * There is no React Aria base: RAC ships no busy indicator, and a rotating
+ * ring has no interaction model to inherit. Because it is not RAC-backed its
+ * props follow ARCHITECTURE section 7 rule 1 -- VariantProps &
+ * ComponentPropsWithoutRef -- rather than the Button's Omit-from-React-Aria
+ * departure, which exists only to stop RAC-ignored props being advertised.
+ *
+ * Every string below is a STATIC literal. Tailwind scans source text, so a
+ * class assembled at runtime is invisible to it and would never be emitted.
+ *
+ * THE LEGACY WOULD HAVE SHIPPED INVISIBLE. Its ring is
+ * `border-gray-300 border-t-blue-600` and its rotation is `animate-spin`.
+ * All three of those classes emit NO RULE in this repo: `--color-*: initial`
+ * deleted Tailwind's default palette, and this package imports only
+ * tailwindcss/utilities.css, never the default theme, so `--animate-spin` and
+ * `@keyframes spin` did not exist either. A literal port would have compiled,
+ * linted and type-checked into a static, colourless box.
+ */
+export declare const spinnerVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * A busy indicator.
+ *
+ * Announces itself. Use it for an operation the user is waiting on; for
+ * content-shaped placeholders during a page load, reach for `Skeleton`
+ * instead, which is deliberately silent because thirty-three empty boxes
+ * announcing themselves is noise.
+ *
+ * @example
+ * <Spinner label="Loading campaigns" />
+ * <Spinner label="Saving" size="sm" />
+ */
+export interface SpinnerProps extends Omit<ComponentPropsWithoutRef<"span">, "children" | "role" | "aria-label">, VariantProps<typeof spinnerVariants> {
+  /**
+   * What is loading. Becomes the spinner's accessible name.
+   *
+   * REQUIRED, so a nameless spinner is a type error rather than an omission.
+   * The legacy component has no role, no name and no announced text, and it is
+   * only about 1% of the spinning in that app -- there are also 63 lucide
+   * `Loader2` spins and 8 hand-rolled divs, none of which announce either.
+   * A required name is what makes that unrepeatable here.
+   *
+   * A `string` and not a `ReactNode` because it becomes an `aria-label`, which
+   * is a DOM string attribute. `Progress.label` is a ReactNode only because
+   * React Aria renders it; the difference is forced by the mechanism rather
+   * than chosen.
+   *
+   * There is no `labelHidden` counterpart: not one legacy call site renders
+   * text through the spinner, and the one component that shows a message
+   * composes its own heading beside one. That is a layout, not a prop.
+   */
+  label: string;
+  /**
+   * Diameter, from the icon scale.
+   *
+   * All three steps are used by the legacy. The values come from
+   * `--icon-sm/md/lg` rather than being restated, because that app already has
+   * two spinners sharing this exact union and disagreeing on every pixel --
+   * `h-4/6/8` against `h-8/12/16`.
+   *
+   * @default "md"
+   */
+  size?: VariantProps<typeof spinnerVariants>["size"];
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+export declare function Spinner({ className, size, label, ...props }: SpinnerProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=spinner.d.ts.map