@seekalfred/primitives 0.2.0 → 0.4.0

package/dist/spinner/spinner.js

@@ -0,0 +1,68 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+//#region src/spinner/spinner.tsx
+/**
+* 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.
+*/
+const spinnerVariants = cva([
+	"inline-block shrink-0",
+	"relative",
+	"box-border",
+	"rounded-circle",
+	"border-(length:--border-width)",
+	"border-s-border border-e-border border-b-border border-t-primary-strong",
+	"motion-safe:animate-spin"
+], {
+	variants: { size: {
+		sm: "size-(--icon-sm)",
+		md: "size-(--icon-md)",
+		lg: "size-(--icon-lg)"
+	} },
+	defaultVariants: { size: "md" }
+});
+function Spinner({ className, size, label, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		role: "status",
+		"aria-label": label,
+		"data-slot": "spinner",
+		className: cn(spinnerVariants({ size }), className),
+		children: /* @__PURE__ */ jsx("span", {
+			style: {
+				position: "absolute",
+				width: "1px",
+				height: "1px",
+				margin: "-1px",
+				padding: 0,
+				overflow: "hidden",
+				clipPath: "inset(50%)",
+				whiteSpace: "nowrap",
+				borderWidth: 0
+			},
+			children: label
+		})
+	});
+}
+//#endregion
+export { Spinner, spinnerVariants };
+
+//# sourceMappingURL=spinner.js.map

package/dist/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":[],"sources":["../../src/spinner/spinner.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Spinner.\n *\n * There is no React Aria base: RAC ships no busy indicator, and a rotating\n * ring has no interaction model to inherit. Because it is not RAC-backed its\n * props follow ARCHITECTURE section 7 rule 1 -- VariantProps &\n * ComponentPropsWithoutRef -- rather than the Button's Omit-from-React-Aria\n * departure, which exists only to stop RAC-ignored props being advertised.\n *\n * Every string below is a STATIC literal. Tailwind scans source text, so a\n * class assembled at runtime is invisible to it and would never be emitted.\n *\n * THE LEGACY WOULD HAVE SHIPPED INVISIBLE. Its ring is\n * `border-gray-300 border-t-blue-600` and its rotation is `animate-spin`.\n * All three of those classes emit NO RULE in this repo: `--color-*: initial`\n * deleted Tailwind's default palette, and this package imports only\n * tailwindcss/utilities.css, never the default theme, so `--animate-spin` and\n * `@keyframes spin` did not exist either. A literal port would have compiled,\n * linted and type-checked into a static, colourless box.\n */\nexport const spinnerVariants = cva(\n  [\n    // inline-block so it sits in a line of text or inside a button without a\n    // wrapper; shrink-0 so a flex parent cannot squash the circle into an oval.\n    \"inline-block shrink-0\",\n    // relative is load-bearing: the visually-hidden label below is positioned\n    // against this box, and without a positioned ancestor it would anchor to\n    // the page and drag the layout around.\n    \"relative\",\n    // The reset in @seekalfred/styles is OPT-IN, so a consumer may load none,\n    // and content-box would add the border on top of the size asked for --\n    // turning a 16px `sm` into 20px.\n    \"box-border\",\n    // --radius-circle is 50%, already on the scale. The legacy's rounded-full\n    // is 9999px, which is the same thing said less precisely.\n    \"rounded-circle\",\n    // A ring with one coloured quarter: no SVG, and the same silhouette the\n    // legacy had, so migrating is a visual no-op.\n    //\n    // --border-width rather than border-2: this system has ONE border\n    // thickness and the token exists precisely so 121 components do not each\n    // pick their own. The arc reads thinner than the legacy's 2px; that is the\n    // cost of the contract.\n    //\n    // border-border is held to the 3:1 non-text floor and primary-strong to\n    // 4.5:1 on both the page and a card -- both are in the build-failing\n    // contrast contract, so neither can drift into invisibility.\n    //\n    // FOUR LONGHANDS, NOT `border-border` PLUS `border-t-primary-strong`.\n    // That shorter pairing is a shorthand followed by a longhand, and it only\n    // works while our stylesheet is the last one to define `.border-border`.\n    // It is not: Storybook runs its own Tailwind over the story files, emits\n    // `.border-border{border-color:...}` into the SAME cascade layer after\n    // ours, and the shorthand resets all four sides -- the arc silently became\n    // the track colour. Caught in a real browser; `pnpm test` did not see it,\n    // because the Vitest harness does not load that second stylesheet. A\n    // consumer running their own Tailwind is in exactly Storybook's position,\n    // so this is a real defect and not a dev-server quirk. Per-side longhands\n    // cannot be clobbered by a shorthand that lands later.\n    \"border-(length:--border-width)\",\n    \"border-s-border border-e-border border-b-border border-t-primary-strong\",\n    // motion-safe:, because motion.css's header says every component using a\n    // keyframe must gate it. The trade-off is real and named: a reduced-motion\n    // user gets a static ring, which is exactly why role=\"status\" and the\n    // required label do the actual work of saying \"busy\" -- the animation is\n    // never the only signal.\n    \"motion-safe:animate-spin\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-(--icon-sm)\",\n        md: \"size-(--icon-md)\",\n        lg: \"size-(--icon-lg)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/**\n * A busy indicator.\n *\n * Announces itself. Use it for an operation the user is waiting on; for\n * content-shaped placeholders during a page load, reach for `Skeleton`\n * instead, which is deliberately silent because thirty-three empty boxes\n * announcing themselves is noise.\n *\n * @example\n * <Spinner label=\"Loading campaigns\" />\n * <Spinner label=\"Saving\" size=\"sm\" />\n */\nexport interface SpinnerProps\n  extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\" | \"role\" | \"aria-label\">,\n    VariantProps<typeof spinnerVariants> {\n  /**\n   * What is loading. Becomes the spinner's accessible name.\n   *\n   * REQUIRED, so a nameless spinner is a type error rather than an omission.\n   * The legacy component has no role, no name and no announced text, and it is\n   * only about 1% of the spinning in that app -- there are also 63 lucide\n   * `Loader2` spins and 8 hand-rolled divs, none of which announce either.\n   * A required name is what makes that unrepeatable here.\n   *\n   * A `string` and not a `ReactNode` because it becomes an `aria-label`, which\n   * is a DOM string attribute. `Progress.label` is a ReactNode only because\n   * React Aria renders it; the difference is forced by the mechanism rather\n   * than chosen.\n   *\n   * There is no `labelHidden` counterpart: not one legacy call site renders\n   * text through the spinner, and the one component that shows a message\n   * composes its own heading beside one. That is a layout, not a prop.\n   */\n  label: string;\n  /**\n   * Diameter, from the icon scale.\n   *\n   * All three steps are used by the legacy. The values come from\n   * `--icon-sm/md/lg` rather than being restated, because that app already has\n   * two spinners sharing this exact union and disagreeing on every pixel --\n   * `h-4/6/8` against `h-8/12/16`.\n   *\n   * @default \"md\"\n   */\n  size?: VariantProps<typeof spinnerVariants>[\"size\"];\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport function Spinner({ className, size, label, ...props }: SpinnerProps) {\n  return (\n    <span\n      {...props}\n      // Both the attribute and the text, deliberately. role=\"status\" maps to\n      // ARIA `status`, whose name-from is AUTHOR ONLY -- its content does not\n      // name it -- so aria-label is what turns the required prop into an\n      // actual accessible name. The text is separately necessary: a live\n      // region inserted empty has nothing to announce.\n      role=\"status\"\n      aria-label={label}\n      data-slot=\"spinner\"\n      className={cn(spinnerVariants({ size }), className)}\n    >\n      {/*\n        Clipped rather than `sr-only` from a stylesheet: this package's CSS is\n        scanned from source, but relying on a utility that only ever appears\n        here is how a class silently fails to compile. Inline styles cannot.\n        absolute + 1px + clip is the standard visually-hidden recipe, and it\n        keeps the ring square -- the story asserts that.\n      */}\n      <span\n        style={{\n          position: \"absolute\",\n          width: \"1px\",\n          height: \"1px\",\n          margin: \"-1px\",\n          padding: 0,\n          overflow: \"hidden\",\n          clipPath: \"inset(50%)\",\n          whiteSpace: \"nowrap\",\n          borderWidth: 0,\n        }}\n      >\n        {label}\n      </span>\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,kBAAkB,IAC7B;CAGE;CAIA;CAIA;CAGA;CAwBA;CACA;CAMA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;AAmDA,SAAgB,QAAQ,EAAE,WAAW,MAAM,OAAO,GAAG,SAAuB;CAC1E,OACE,oBAAC,QAAD;EACE,GAAI;EAMJ,MAAK;EACL,cAAY;EACZ,aAAU;EACV,WAAW,GAAG,gBAAgB,EAAE,KAAK,CAAC,GAAG,SAAS;EASlD,UAAA,oBAAC,QAAD;GACE,OAAO;IACL,UAAU;IACV,OAAO;IACP,QAAQ;IACR,QAAQ;IACR,SAAS;IACT,UAAU;IACV,UAAU;IACV,YAAY;IACZ,aAAa;GACf;GAEC,UAAA;EACG,CAAA;CACF,CAAA;AAEV"}

package/dist/styles.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial;--tw-ease:initial}}}@layer alfred.reset,alfred.tokens,alfred.components.primitives,alfred.components.patterns,alfred.components.charts,alfred.components.ai;@layer alfred.utilities.primitives{.invisible{visibility:hidden}.visible{visibility:visible}.fixed{position:fixed}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.size-\(--density-control-h-md\){width:var(--density-control-h-md);height:var(--density-control-h-md)}.h-\(--density-control-h-lg\){height:var(--density-control-h-lg)}.h-\(--density-control-h-md\){height:var(--density-control-h-md)}.h-\(--density-control-h-sm\){height:var(--density-control-h-sm)}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.gap-\(--density-control-gap\){gap:var(--density-control-gap)}.rounded-md{border-radius:var(--radius-md,.75rem)}.border{border-style:var(--tw-border-style);border-width:1px}.border-\(length\:--border-width\){border-style:var(--tw-border-style);border-width:var(--border-width)}.border-primary-strong{border-color:var(--color-primary-strong,var(--alfred-orange-750))}.border-transparent{border-color:#0000}.bg-background{background-color:var(--color-background,var(--alfred-white))}.bg-destructive{background-color:var(--color-destructive,var(--alfred-danger-600))}.bg-primary,.bg-primary\/90{background-color:var(--color-primary,var(--alfred-orange-500))}@supports (color:color-mix(in lab, red, red)){.bg-primary\/90{background-color:color-mix(in oklab, var(--color-primary,var(--alfred-orange-500)) 90%, transparent)}}.bg-secondary{background-color:var(--color-secondary,var(--alfred-periwinkle-400))}.bg-transparent{background-color:#0000}.px-\(--density-control-pad-lg\){padding-inline:var(--density-control-pad-lg)}.px-\(--density-control-pad-md\){padding-inline:var(--density-control-pad-md)}.px-\(--density-control-pad-sm\){padding-inline:var(--density-control-pad-sm)}.px-0{padding-inline:0}.font-sans{font-family:var(--font-sans,"Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif)}.text-base{font-size:var(--text-base,1rem)}.text-lg{font-size:var(--text-lg,1.125rem)}.text-sm{font-size:var(--text-sm,.875rem)}.font-medium{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.whitespace-nowrap{white-space:nowrap}.text-destructive-foreground{color:var(--color-destructive-foreground,var(--alfred-white))}.text-primary-foreground{color:var(--color-primary-foreground,var(--alfred-ink-900))}.text-primary-strong{color:var(--color-primary-strong,var(--alfred-orange-750))}.text-secondary-foreground{color:var(--color-secondary-foreground,var(--alfred-ink-900))}.underline-offset-\(--underline-offset\){text-underline-offset:var(--underline-offset)}.shadow-surface{--tw-shadow:0 1px 2px var(--tw-shadow-color,#02021e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-\[3px\]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.data-\[disabled\]\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.data-\[disabled\]\:opacity-\(--opacity-disabled\)[data-disabled]{opacity:var(--opacity-disabled)}.data-\[focus-visible\]\:outline-\(length\:--focus-ring-width\)[data-focus-visible]{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.data-\[focus-visible\]\:outline-offset-\(--focus-ring-offset\)[data-focus-visible]{outline-offset:var(--focus-ring-offset)}.data-\[focus-visible\]\:outline-\(--color-ring\)[data-focus-visible]{outline-color:var(--color-ring)}.data-\[hovered\]\:bg-destructive-hover[data-hovered]{background-color:var(--color-destructive-hover,var(--alfred-danger-700))}.data-\[hovered\]\:bg-muted[data-hovered]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[hovered\]\:bg-primary-hover[data-hovered]{background-color:var(--color-primary-hover,var(--alfred-orange-600))}.data-\[hovered\]\:bg-secondary-hover[data-hovered]{background-color:var(--color-secondary-hover,var(--alfred-periwinkle-500))}.data-\[hovered\]\:underline[data-hovered]{text-decoration-line:underline}.data-\[pending\]\:cursor-progress[data-pending]{cursor:progress}.data-\[pressed\]\:border-foreground[data-pressed]{border-color:var(--color-foreground,var(--alfred-ink-900))}.data-\[pressed\]\:border-primary-strong[data-pressed]{border-color:var(--color-primary-strong,var(--alfred-orange-750))}.data-\[pressed\]\:bg-destructive-pressed[data-pressed]{background-color:var(--color-destructive-pressed,var(--alfred-danger-800))}.data-\[pressed\]\:bg-muted[data-pressed]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[pressed\]\:bg-primary-pressed[data-pressed]{background-color:var(--color-primary-pressed,var(--alfred-orange-700))}.data-\[pressed\]\:bg-secondary-pressed[data-pressed]{background-color:var(--color-secondary-pressed,var(--alfred-periwinkle-600))}.data-\[pressed\]\:underline[data-pressed]{text-decoration-line:underline}@media (prefers-reduced-motion:no-preference){.motion-safe\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:duration-\(--duration-fast\){--tw-duration:var(--duration-fast);transition-duration:var(--duration-fast)}.motion-safe\:ease-standard{--tw-ease:var(--ease-standard,cubic-bezier(.22, .61, .36, 1));transition-timing-function:var(--ease-standard,cubic-bezier(.22, .61, .36, 1))}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--icon-sm\) svg:not([class*=size-]){width:var(--icon-sm);height:var(--icon-sm)}}@layer alfred.utilities.patterns,alfred.utilities.charts,alfred.utilities.ai;@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-scrollbar-thumb:#0000;--tw-scrollbar-track:#0000;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer alfred.reset,alfred.tokens,alfred.components.primitives,alfred.components.patterns,alfred.components.charts,alfred.components.ai;@layer alfred.utilities.primitives{.\@container\/card-header{container:card-header/inline-size}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:0}.inset-y-0{inset-block:0}.start-\(--density-control-pad-lg\){inset-inline-start:var(--density-control-pad-lg)}.start-\(--density-control-pad-md\){inset-inline-start:var(--density-control-pad-md)}.start-\(--density-control-pad-sm\){inset-inline-start:var(--density-control-pad-sm)}.start-2{inset-inline-start:calc(var(--spacing,.25rem) * 2)}.end-\(--density-bar-pad-x\){inset-inline-end:var(--density-bar-pad-x)}.end-\(--density-control-pad-lg\){inset-inline-end:var(--density-control-pad-lg)}.end-\(--density-control-pad-md\){inset-inline-end:var(--density-control-pad-md)}.end-\(--density-control-pad-sm\){inset-inline-end:var(--density-control-pad-sm)}.end-4{inset-inline-end:calc(var(--spacing,.25rem) * 4)}.top-1\/2{top:50%}.top-4{top:calc(var(--spacing,.25rem) * 4)}.bottom-\(--density-bar-pad-y\){bottom:var(--density-bar-pad-y)}.left-1\/2{left:50%}.z-50{z-index:50}.container{width:100%}@media (min-width:30rem){.container{max-width:30rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}.m-0{margin:0}.-mx-1{margin-inline:calc(var(--spacing,.25rem) * -1)}.my-1{margin-block:var(--spacing,.25rem)}.-ms-2{margin-inline-start:calc(var(--spacing,.25rem) * -2)}.ms-1{margin-inline-start:var(--spacing,.25rem)}.ms-auto{margin-inline-start:auto}.mb-1{margin-bottom:var(--spacing,.25rem)}.ml-2{margin-left:calc(var(--spacing,.25rem) * 2)}.box-border{box-sizing:border-box}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.table-cell{display:table-cell}.table-column{display:table-column}.table-row{display:table-row}.size-\(--density-control-h-md\){width:var(--density-control-h-md);height:var(--density-control-h-md)}.size-\(--density-control-h-sm\){width:var(--density-control-h-sm);height:var(--density-control-h-sm)}.size-\(--icon-lg\){width:var(--icon-lg);height:var(--icon-lg)}.size-\(--icon-md\){width:var(--icon-md);height:var(--icon-md)}.size-\(--icon-sm\){width:var(--icon-sm);height:var(--icon-sm)}.size-1\.5{width:calc(var(--spacing,.25rem) * 1.5);height:calc(var(--spacing,.25rem) * 1.5)}.size-3{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}.size-3\.5{width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5)}.size-4{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.size-5{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5)}.size-6{width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6)}.size-7{width:calc(var(--spacing,.25rem) * 7);height:calc(var(--spacing,.25rem) * 7)}.size-8{width:calc(var(--spacing,.25rem) * 8);height:calc(var(--spacing,.25rem) * 8)}.size-10{width:calc(var(--spacing,.25rem) * 10);height:calc(var(--spacing,.25rem) * 10)}.size-16{width:calc(var(--spacing,.25rem) * 16);height:calc(var(--spacing,.25rem) * 16)}.size-full{width:100%;height:100%}.h-\(--density-control-h-lg\){height:var(--density-control-h-lg)}.h-\(--density-control-h-md\){height:var(--density-control-h-md)}.h-\(--density-control-h-sm\){height:var(--density-control-h-sm)}.h-2{height:calc(var(--spacing,.25rem) * 2)}.h-4{height:calc(var(--spacing,.25rem) * 4)}.h-5{height:calc(var(--spacing,.25rem) * 5)}.h-6{height:calc(var(--spacing,.25rem) * 6)}.h-8{height:calc(var(--spacing,.25rem) * 8)}.h-9{height:calc(var(--spacing,.25rem) * 9)}.h-10{height:calc(var(--spacing,.25rem) * 10)}.h-12{height:calc(var(--spacing,.25rem) * 12)}.h-16{height:calc(var(--spacing,.25rem) * 16)}.h-64{height:calc(var(--spacing,.25rem) * 64)}.h-\[1\.15rem\]{height:1.15rem}.h-\[1px\]{height:1px}.h-\[calc\(100\%-1px\)\]{height:calc(100% - 1px)}.h-full{height:100%}.h-px{height:1px}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-6{min-height:calc(var(--spacing,.25rem) * 6)}.min-h-20{min-height:calc(var(--spacing,.25rem) * 20)}.min-h-\[80px\]{min-height:80px}.w-\(--density-control-h-sm\){width:var(--density-control-h-sm)}.w-\(--trigger-width\){width:var(--trigger-width)}.w-3\/4{width:75%}.w-8{width:calc(var(--spacing,.25rem) * 8)}.w-9{width:calc(var(--spacing,.25rem) * 9)}.w-10{width:calc(var(--spacing,.25rem) * 10)}.w-32{width:calc(var(--spacing,.25rem) * 32)}.w-72{width:calc(var(--spacing,.25rem) * 72)}.w-\[350px\]{width:350px}.w-\[min\(24rem\,calc\(100vw-2rem\)\)\]{width:min(24rem,100vw - 2rem)}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-96{max-width:calc(var(--spacing,.25rem) * 96)}.max-w-128{max-width:calc(var(--spacing,.25rem) * 128)}.max-w-\[calc\(100\%-2rem\)\]{max-width:calc(100% - 2rem)}.min-w-\(--density-control-h-sm\){min-width:var(--density-control-h-sm)}.min-w-0{min-width:0}.min-w-6{min-width:calc(var(--spacing,.25rem) * 6)}.min-w-32{min-width:calc(var(--spacing,.25rem) * 32)}.min-w-\[8rem\]{min-width:8rem}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.-translate-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-\[calc\(100\%-2px\)\]{--tw-translate-x:calc(100% - 2px);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[-3px\]{--tw-translate-y:-3px;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[calc\(-50\%_-_2px\)\]{--tw-translate-y:calc(-50% - 2px);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse,pulse 2s cubic-bezier(.4, 0, .6, 1) infinite)}.animate-spin{animation:var(--animate-spin,spin .8s linear infinite)}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-y{resize:vertical}.scrollbar-thin{scrollbar-width:thin}.scrollbar-thumb-border{--tw-scrollbar-thumb:var(--color-border,var(--alfred-ink-500));scrollbar-color:var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)}.scrollbar-track-transparent{--tw-scrollbar-track:transparent;scrollbar-color:var(--tw-scrollbar-thumb) var(--tw-scrollbar-track)}.list-none{list-style-type:none}.appearance-none{appearance:none}.grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-\(--density-control-gap\){gap:var(--density-control-gap)}.gap-\(--density-gap\){gap:var(--density-gap)}.gap-1{gap:var(--spacing,.25rem)}.gap-1\.5{gap:calc(var(--spacing,.25rem) * 1.5)}.gap-2{gap:calc(var(--spacing,.25rem) * 2)}.gap-3{gap:calc(var(--spacing,.25rem) * 3)}.gap-4{gap:calc(var(--spacing,.25rem) * 4)}.gap-6{gap:calc(var(--spacing,.25rem) * 6)}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded-2xs{border-radius:var(--radius-2xs,.25rem)}.rounded-\[2px\]{border-radius:2px}.rounded-circle{border-radius:var(--radius-circle,50%)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg,1rem)}.rounded-md{border-radius:var(--radius-md,.75rem)}.rounded-none{border-radius:0}.rounded-pill{border-radius:var(--radius-pill,999px)}.rounded-sm{border-radius:var(--radius-sm,.5rem)}.rounded-xl{border-radius:var(--radius-xl,1.25rem)}.border{border-style:var(--tw-border-style);border-width:1px}.border-\(length\:--border-width\){border-style:var(--tw-border-style);border-width:var(--border-width)}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-y-0{border-block-style:var(--tw-border-style);border-block-width:0}.border-s-0{border-inline-start-style:var(--tw-border-style);border-inline-start-width:0}.border-e-0{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-\(length\:--border-width\){border-top-style:var(--tw-border-style);border-top-width:var(--border-width)}.border-b-\(length\:--border-width\){border-bottom-style:var(--tw-border-style);border-bottom-width:var(--border-width)}.border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.border-none{--tw-border-style:none;border-style:none}.border-border{border-color:var(--color-border,var(--alfred-ink-500))}.border-destructive-strong{border-color:var(--color-destructive-strong,var(--alfred-danger-600))}.border-destructive\/50{border-color:var(--color-destructive,var(--alfred-danger-600))}@supports (color:color-mix(in lab, red, red)){.border-destructive\/50{border-color:color-mix(in oklab, var(--color-destructive,var(--alfred-danger-600)) 50%, transparent)}}.border-info-strong{border-color:var(--color-info-strong,var(--alfred-info-700))}.border-primary{border-color:var(--color-primary,var(--alfred-orange-500))}.border-primary-strong{border-color:var(--color-primary-strong,var(--alfred-orange-750))}.border-primary\/50{border-color:var(--color-primary,var(--alfred-orange-500))}@supports (color:color-mix(in lab, red, red)){.border-primary\/50{border-color:color-mix(in oklab, var(--color-primary,var(--alfred-orange-500)) 50%, transparent)}}.border-separator{border-color:var(--color-separator,var(--alfred-gray-150))}.border-success-strong{border-color:var(--color-success-strong,var(--alfred-success-700))}.border-transparent{border-color:#0000}.border-warning-strong{border-color:var(--color-warning-strong,var(--alfred-warning-700))}.border-s-border{border-inline-start-color:var(--color-border,var(--alfred-ink-500))}.border-e-border{border-inline-end-color:var(--color-border,var(--alfred-ink-500))}.border-t-border{border-top-color:var(--color-border,var(--alfred-ink-500))}.border-t-primary-strong{border-top-color:var(--color-primary-strong,var(--alfred-orange-750))}.border-t-separator{border-top-color:var(--color-separator,var(--alfred-gray-150))}.border-b-border{border-bottom-color:var(--color-border,var(--alfred-ink-500))}.bg-background{background-color:var(--color-background,var(--alfred-white))}.bg-border{background-color:var(--color-border,var(--alfred-ink-500))}.bg-card{background-color:var(--color-card,var(--alfred-white))}.bg-current{background-color:currentColor}.bg-destructive{background-color:var(--color-destructive,var(--alfred-danger-600))}.bg-destructive-strong{background-color:var(--color-destructive-strong,var(--alfred-danger-600))}.bg-destructive-subtle{background-color:var(--color-destructive-subtle,var(--alfred-danger-100))}.bg-header-fill{background-color:var(--color-header-fill,var(--alfred-white-warm))}.bg-info-strong{background-color:var(--color-info-strong,var(--alfred-info-700))}.bg-info-subtle{background-color:var(--color-info-subtle,var(--alfred-info-100))}.bg-muted{background-color:var(--color-muted,var(--alfred-gray-100))}.bg-muted-foreground{background-color:var(--color-muted-foreground,var(--alfred-ink-500))}.bg-muted\/50{background-color:var(--color-muted,var(--alfred-gray-100))}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, var(--color-muted,var(--alfred-gray-100)) 50%, transparent)}}.bg-primary{background-color:var(--color-primary,var(--alfred-orange-500))}.bg-primary-strong{background-color:var(--color-primary-strong,var(--alfred-orange-750))}.bg-primary-subtle{background-color:var(--color-primary-subtle,var(--alfred-orange-50))}.bg-primary\/20{background-color:var(--color-primary,var(--alfred-orange-500))}@supports (color:color-mix(in lab, red, red)){.bg-primary\/20{background-color:color-mix(in oklab, var(--color-primary,var(--alfred-orange-500)) 20%, transparent)}}.bg-primary\/90{background-color:var(--color-primary,var(--alfred-orange-500))}@supports (color:color-mix(in lab, red, red)){.bg-primary\/90{background-color:color-mix(in oklab, var(--color-primary,var(--alfred-orange-500)) 90%, transparent)}}.bg-scrim{background-color:var(--color-scrim,#02021e80)}.bg-secondary{background-color:var(--color-secondary,var(--alfred-periwinkle-400))}.bg-success-strong{background-color:var(--color-success-strong,var(--alfred-success-700))}.bg-success-subtle{background-color:var(--color-success-subtle,var(--alfred-success-100))}.bg-transparent{background-color:#0000}.bg-warning-strong{background-color:var(--color-warning-strong,var(--alfred-warning-700))}.bg-warning-subtle{background-color:var(--color-warning-subtle,var(--alfred-warning-100))}.fill-primary{fill:var(--color-primary,var(--alfred-orange-500))}.object-cover{object-fit:cover}.p-\(--density-bar-pad-x\){padding:var(--density-bar-pad-x)}.p-\(--density-control-pad-md\){padding:var(--density-control-pad-md)}.p-0{padding:0}.p-0\.5{padding:calc(var(--spacing,.25rem) * .5)}.p-1{padding:var(--spacing,.25rem)}.p-4{padding:calc(var(--spacing,.25rem) * 4)}.p-6{padding:calc(var(--spacing,.25rem) * 6)}.p-\[3px\]{padding:3px}.px-\(--density-control-pad-lg\){padding-inline:var(--density-control-pad-lg)}.px-\(--density-control-pad-md\){padding-inline:var(--density-control-pad-md)}.px-\(--density-control-pad-sm\){padding-inline:var(--density-control-pad-sm)}.px-\(--density-row-pad-x\){padding-inline:var(--density-row-pad-x)}.px-0{padding-inline:0}.px-2{padding-inline:calc(var(--spacing,.25rem) * 2)}.px-2\.5{padding-inline:calc(var(--spacing,.25rem) * 2.5)}.px-3{padding-inline:calc(var(--spacing,.25rem) * 3)}.px-4{padding-inline:calc(var(--spacing,.25rem) * 4)}.px-6{padding-inline:calc(var(--spacing,.25rem) * 6)}.py-\(--density-control-pad-md\){padding-block:var(--density-control-pad-md)}.py-\(--density-control-pad-sm\){padding-block:var(--density-control-pad-sm)}.py-\(--density-row-pad-y\){padding-block:var(--density-row-pad-y)}.py-0\.5{padding-block:calc(var(--spacing,.25rem) * .5)}.py-1{padding-block:var(--spacing,.25rem)}.py-1\.5{padding-block:calc(var(--spacing,.25rem) * 1.5)}.py-4{padding-block:calc(var(--spacing,.25rem) * 4)}.py-6{padding-block:calc(var(--spacing,.25rem) * 6)}.ps-8{padding-inline-start:calc(var(--spacing,.25rem) * 8)}.ps-\[calc\(var\(--density-control-pad-lg\)_\+_var\(--icon-sm\)_\+_var\(--density-control-gap\)\)\]{padding-inline-start:calc(var(--density-control-pad-lg) + var(--icon-sm) + var(--density-control-gap))}.ps-\[calc\(var\(--density-control-pad-md\)_\+_var\(--icon-sm\)_\+_var\(--density-control-gap\)\)\]{padding-inline-start:calc(var(--density-control-pad-md) + var(--icon-sm) + var(--density-control-gap))}.ps-\[calc\(var\(--density-control-pad-sm\)_\+_var\(--icon-sm\)_\+_var\(--density-control-gap\)\)\]{padding-inline-start:calc(var(--density-control-pad-sm) + var(--icon-sm) + var(--density-control-gap))}.pe-2{padding-inline-end:calc(var(--spacing,.25rem) * 2)}.pe-\[calc\(var\(--density-control-pad-lg\)_\+_var\(--icon-sm\)_\+_var\(--density-control-gap\)\)\]{padding-inline-end:calc(var(--density-control-pad-lg) + var(--icon-sm) + var(--density-control-gap))}.pe-\[calc\(var\(--density-control-pad-md\)_\+_var\(--icon-sm\)_\+_var\(--density-control-gap\)\)\]{padding-inline-end:calc(var(--density-control-pad-md) + var(--icon-sm) + var(--density-control-gap))}.pe-\[calc\(var\(--density-control-pad-sm\)_\+_var\(--icon-sm\)_\+_var\(--density-control-gap\)\)\]{padding-inline-end:calc(var(--density-control-pad-sm) + var(--icon-sm) + var(--density-control-gap))}.pb-\(--density-control-pad-md\){padding-bottom:var(--density-control-pad-md)}.pb-1{padding-bottom:var(--spacing,.25rem)}.pl-9{padding-left:calc(var(--spacing,.25rem) * 9)}.text-center{text-align:center}.text-end{text-align:end}.text-left{text-align:left}.text-start{text-align:start}.align-middle{vertical-align:middle}.font-sans{font-family:var(--font-sans,"Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif)}.text-2xs{font-size:var(--text-2xs,.6875rem)}.text-base{font-size:var(--text-base,1rem)}.text-lg{font-size:var(--text-lg,1.125rem)}.text-sm{font-size:var(--text-sm,.875rem)}.text-xs{font-size:var(--text-xs,.75rem)}.leading-\(--leading-none\){--tw-leading:var(--leading-none);line-height:var(--leading-none)}.leading-\(--leading-normal\){--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.leading-\(--leading-snug\){--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-\(--leading-tight\){--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.leading-none{--tw-leading:var(--leading-none,1);line-height:var(--leading-none,1)}.font-medium{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.font-semibold{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.tracking-wide{--tw-tracking:var(--tracking-wide,.02em);letter-spacing:var(--tracking-wide,.02em)}.text-balance{text-wrap:balance}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.text-background{color:var(--color-background,var(--alfred-white))}.text-card-foreground{color:var(--color-card-foreground,var(--alfred-ink-900))}.text-current{color:currentColor}.text-destructive-foreground{color:var(--color-destructive-foreground,var(--alfred-white))}.text-destructive-strong{color:var(--color-destructive-strong,var(--alfred-danger-600))}.text-destructive-subtle-foreground{color:var(--color-destructive-subtle-foreground,var(--alfred-danger-700))}.text-foreground{color:var(--color-foreground,var(--alfred-ink-900))}.text-info-foreground{color:var(--color-info-foreground,var(--alfred-info-700))}.text-info-strong{color:var(--color-info-strong,var(--alfred-info-700))}.text-info-strong-foreground{color:var(--color-info-strong-foreground,var(--alfred-white))}.text-muted-foreground{color:var(--color-muted-foreground,var(--alfred-ink-500))}.text-primary-foreground{color:var(--color-primary-foreground,var(--alfred-ink-900))}.text-primary-strong{color:var(--color-primary-strong,var(--alfred-orange-750))}.text-secondary-foreground{color:var(--color-secondary-foreground,var(--alfred-ink-900))}.text-success-foreground{color:var(--color-success-foreground,var(--alfred-success-800))}.text-success-strong{color:var(--color-success-strong,var(--alfred-success-700))}.text-success-strong-foreground{color:var(--color-success-strong-foreground,var(--alfred-white))}.text-warning-foreground{color:var(--color-warning-foreground,var(--alfred-warning-800))}.text-warning-strong{color:var(--color-warning-strong,var(--alfred-warning-700))}.text-warning-strong-foreground{color:var(--color-warning-strong-foreground,var(--alfred-white))}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.underline-offset-\(--underline-offset\){text-underline-offset:var(--underline-offset)}.opacity-70{opacity:.7}.opacity-90{opacity:.9}.shadow-floating,.shadow-md{--tw-shadow:0 8px 24px var(--tw-shadow-color,#02021e14);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-modal{--tw-shadow:0 32px 80px var(--tw-shadow-color,#02021e1f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 2px 8px var(--tw-shadow-color,#02021e0f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-surface,.shadow-xs{--tw-shadow:0 1px 2px var(--tw-shadow-color,#02021e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring,.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-\[3px\]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.outline-none{--tw-outline-style:none;outline-style:none}.outline-solid{--tw-outline-style:solid;outline-style:solid}.select-none{-webkit-user-select:none;user-select:none}.group-data-\[current\]\:hidden:is(:where(.group)[data-current] *){display:none}.group-data-\[focus-visible\]\:outline-\(length\:--focus-ring-width\):is(:where(.group)[data-focus-visible] *){outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.group-data-\[focus-visible\]\:outline-offset-\(--focus-ring-offset\):is(:where(.group)[data-focus-visible] *){outline-offset:var(--focus-ring-offset)}.group-data-\[focus-visible\]\:outline-\(--color-ring\):is(:where(.group)[data-focus-visible] *){outline-color:var(--color-ring)}.group-data-\[focus-visible\]\:outline-solid:is(:where(.group)[data-focus-visible] *){--tw-outline-style:solid;outline-style:solid}.group-data-\[indeterminate\]\:border-primary-strong:is(:where(.group)[data-indeterminate] *){border-color:var(--color-primary-strong,var(--alfred-orange-750))}.group-data-\[indeterminate\]\:bg-primary:is(:where(.group)[data-indeterminate] *){background-color:var(--color-primary,var(--alfred-orange-500))}.group-data-\[indeterminate\]\:text-primary-foreground:is(:where(.group)[data-indeterminate] *){color:var(--color-primary-foreground,var(--alfred-ink-900))}.group-data-\[invalid\]\:border-destructive-strong:is(:where(.group)[data-invalid] *){border-color:var(--color-destructive-strong,var(--alfred-danger-600))}.group-data-\[selected\]\:translate-x-4:is(:where(.group)[data-selected] *){--tw-translate-x:calc(var(--spacing,.25rem) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-data-\[selected\]\:border-primary-strong:is(:where(.group)[data-selected] *){border-color:var(--color-primary-strong,var(--alfred-orange-750))}.group-data-\[selected\]\:bg-primary:is(:where(.group)[data-selected] *){background-color:var(--color-primary,var(--alfred-orange-500))}.group-data-\[selected\]\:bg-primary-strong:is(:where(.group)[data-selected] *){background-color:var(--color-primary-strong,var(--alfred-orange-750))}.group-data-\[selected\]\:text-primary-foreground:is(:where(.group)[data-selected] *){color:var(--color-primary-foreground,var(--alfred-ink-900))}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-50:is(:where(.peer):disabled~*){opacity:.5}.selection\:bg-primary ::selection{background-color:var(--color-primary,var(--alfred-orange-500))}.selection\:bg-primary::selection{background-color:var(--color-primary,var(--alfred-orange-500))}.selection\:text-primary-foreground ::selection{color:var(--color-primary-foreground,var(--alfred-ink-900))}.selection\:text-primary-foreground::selection{color:var(--color-primary-foreground,var(--alfred-ink-900))}.file\:inline-flex::file-selector-button{display:inline-flex}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm,.875rem)}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.file\:text-foreground::file-selector-button{color:var(--color-foreground,var(--alfred-ink-900))}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground,var(--alfred-ink-500))}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.checked\:bg-primary:checked{background-color:var(--color-primary,var(--alfred-orange-500))}@media (hover:hover){.hover\:bg-muted:hover{background-color:var(--color-muted,var(--alfred-gray-100))}}.focus-visible\:border-ring:focus-visible{border-color:var(--color-ring,var(--alfred-orange-700))}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:outline-\(length\:--focus-ring-width\):focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.focus-visible\:outline-offset-\(--focus-ring-offset\):focus-visible{outline-offset:var(--focus-ring-offset)}.focus-visible\:outline-\(--color-ring\):focus-visible{outline-color:var(--color-ring)}.focus-visible\:outline-solid:focus-visible{--tw-outline-style:solid;outline-style:solid}.disabled\:pointer-events-none:disabled{pointer-events:none}.has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.data-\[allows-sorting\]\:cursor-pointer[data-allows-sorting]{cursor:pointer}.data-\[animation\=exiting\]\:opacity-0[data-animation=exiting]{opacity:0}.data-\[current\]\:cursor-default[data-current]{cursor:default}.data-\[current\]\:font-normal[data-current]{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400)}.data-\[current\]\:text-foreground[data-current]{color:var(--color-foreground,var(--alfred-ink-900))}.data-\[disabled\]\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.data-\[disabled\]\:opacity-\(--opacity-disabled\)[data-disabled]{opacity:var(--opacity-disabled)}.data-\[dragging\]\:cursor-grabbing[data-dragging]{cursor:grabbing}.data-\[focus-visible\]\:outline-\(length\:--focus-ring-width\)[data-focus-visible]{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.data-\[focus-visible\]\:outline-offset-\(--focus-ring-offset\)[data-focus-visible]{outline-offset:var(--focus-ring-offset)}.data-\[focus-visible\]\:outline-\(--color-ring\)[data-focus-visible]{outline-color:var(--color-ring)}.data-\[focus-visible\]\:outline-solid[data-focus-visible]{--tw-outline-style:solid;outline-style:solid}.data-\[focused\]\:bg-muted[data-focused]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[highlighted\]\:bg-primary-subtle[data-highlighted]{background-color:var(--color-primary-subtle,var(--alfred-orange-50))}.data-\[hovered\]\:bg-destructive-hover[data-hovered]{background-color:var(--color-destructive-hover,var(--alfred-danger-700))}.data-\[hovered\]\:bg-muted[data-hovered]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[hovered\]\:bg-primary-hover[data-hovered]{background-color:var(--color-primary-hover,var(--alfred-orange-600))}.data-\[hovered\]\:bg-secondary-hover[data-hovered]{background-color:var(--color-secondary-hover,var(--alfred-periwinkle-500))}.data-\[hovered\]\:text-foreground[data-hovered]{color:var(--color-foreground,var(--alfred-ink-900))}.data-\[hovered\]\:underline[data-hovered]{text-decoration-line:underline}.data-\[hovered\]\:opacity-100[data-hovered]{opacity:1}.data-\[invalid\]\:border-destructive-strong[data-invalid]{border-color:var(--color-destructive-strong,var(--alfred-danger-600))}.data-\[outside-month\]\:text-muted-foreground[data-outside-month]{color:var(--color-muted-foreground,var(--alfred-ink-500))}.data-\[outside-month\]\:opacity-\(--opacity-disabled\)[data-outside-month]{opacity:var(--opacity-disabled)}.data-\[pending\]\:cursor-progress[data-pending]{cursor:progress}.data-\[pressed\]\:border-foreground[data-pressed]{border-color:var(--color-foreground,var(--alfred-ink-900))}.data-\[pressed\]\:border-primary-strong[data-pressed]{border-color:var(--color-primary-strong,var(--alfred-orange-750))}.data-\[pressed\]\:bg-destructive-pressed[data-pressed]{background-color:var(--color-destructive-pressed,var(--alfred-danger-800))}.data-\[pressed\]\:bg-muted[data-pressed]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[pressed\]\:bg-primary-pressed[data-pressed]{background-color:var(--color-primary-pressed,var(--alfred-orange-700))}.data-\[pressed\]\:bg-secondary-pressed[data-pressed]{background-color:var(--color-secondary-pressed,var(--alfred-periwinkle-600))}.data-\[pressed\]\:underline[data-pressed]{text-decoration-line:underline}.data-\[selected\]\:rounded-none[data-selected]{border-radius:0}.data-\[selected\]\:border-border[data-selected]{border-color:var(--color-border,var(--alfred-ink-500))}.data-\[selected\]\:bg-background[data-selected]{background-color:var(--color-background,var(--alfred-white))}.data-\[selected\]\:bg-muted[data-selected]{background-color:var(--color-muted,var(--alfred-gray-100))}.data-\[selected\]\:bg-primary[data-selected]{background-color:var(--color-primary,var(--alfred-orange-500))}.data-\[selected\]\:font-semibold[data-selected]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[selected\]\:text-foreground[data-selected]{color:var(--color-foreground,var(--alfred-ink-900))}.data-\[selected\]\:text-primary-foreground[data-selected]{color:var(--color-primary-foreground,var(--alfred-ink-900))}.data-\[selected\]\:shadow-surface[data-selected]{--tw-shadow:0 1px 2px var(--tw-shadow-color,#02021e0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.data-\[selection-end\]\:rounded-e-md[data-selection-end]{border-start-end-radius:var(--radius-md,.75rem);border-end-end-radius:var(--radius-md,.75rem)}.data-\[selection-end\]\:bg-primary[data-selection-end]{background-color:var(--color-primary,var(--alfred-orange-500))}.data-\[selection-end\]\:font-semibold[data-selection-end]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[selection-end\]\:text-primary-foreground[data-selection-end]{color:var(--color-primary-foreground,var(--alfred-ink-900))}.data-\[selection-start\]\:rounded-s-md[data-selection-start]{border-start-start-radius:var(--radius-md,.75rem);border-end-start-radius:var(--radius-md,.75rem)}.data-\[selection-start\]\:bg-primary[data-selection-start]{background-color:var(--color-primary,var(--alfred-orange-500))}.data-\[selection-start\]\:font-semibold[data-selection-start]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[selection-start\]\:text-primary-foreground[data-selection-start]{color:var(--color-primary-foreground,var(--alfred-ink-900))}.data-\[today\]\:font-semibold[data-today]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}.data-\[today\]\:underline[data-today]{text-decoration-line:underline}.data-\[today\]\:underline-offset-4[data-today]{text-underline-offset:4px}.data-\[unavailable\]\:cursor-not-allowed[data-unavailable]{cursor:not-allowed}.data-\[unavailable\]\:text-muted-foreground[data-unavailable]{color:var(--color-muted-foreground,var(--alfred-ink-500))}.data-\[unavailable\]\:line-through[data-unavailable]{text-decoration-line:line-through}@media (prefers-reduced-motion:no-preference){.motion-safe\:animate-pulse{animation:var(--animate-pulse,pulse 2s cubic-bezier(.4, 0, .6, 1) infinite)}.motion-safe\:animate-spin{animation:var(--animate-spin,spin .8s linear infinite)}.motion-safe\:transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.motion-safe\:duration-\(--duration-base\){--tw-duration:var(--duration-base);transition-duration:var(--duration-base)}.motion-safe\:duration-\(--duration-fast\){--tw-duration:var(--duration-fast);transition-duration:var(--duration-fast)}.motion-safe\:ease-standard{--tw-ease:var(--ease-standard,cubic-bezier(.22, .61, .36, 1));transition-timing-function:var(--ease-standard,cubic-bezier(.22, .61, .36, 1))}}@media (min-width:30rem){.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}}@media (min-width:48rem){.md\:text-sm{font-size:var(--text-sm,.875rem)}}.rtl\:-scale-x-100:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-scale-x:calc(100% * -1);scale:var(--tw-scale-x) var(--tw-scale-y)}.rtl\:group-data-\[selected\]\:-translate-x-4:where(:dir(rtl),[dir=rtl],[dir=rtl] *):is(:where(.group)[data-selected] *){--tw-translate-x:calc(var(--spacing,.25rem) * -4);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[expanded\]\:\[\&_\[data-slot\=accordion-trigger\]_svg\]\:rotate-180[data-expanded] [data-slot=accordion-trigger] svg{rotate:180deg}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\]\:text-muted-foreground svg{color:var(--color-muted-foreground,var(--alfred-ink-500))}@media (prefers-reduced-motion:no-preference){.\[\&_svg\]\:motion-safe\:transition-transform svg{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.\[\&_svg\]\:motion-safe\:duration-\(--duration-fast\) svg{--tw-duration:var(--duration-fast);transition-duration:var(--duration-fast)}}.\[\&_svg\]\:rtl\:-scale-x-100 svg:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-scale-x:calc(100% * -1);scale:var(--tw-scale-x) var(--tw-scale-y)}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--icon-sm\) svg:not([class*=size-]){width:var(--icon-sm);height:var(--icon-sm)}.\[\&_tr\]\:border-b tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\.border-b\]\:pb-6.border-b{padding-bottom:calc(var(--spacing,.25rem) * 6)}.\[\.border-t\]\:pt-6.border-t{padding-top:calc(var(--spacing,.25rem) * 6)}.\[\&\:nth-child\(even\)\]\:bg-row-stripe:nth-child(2n){background-color:var(--color-row-stripe,var(--alfred-gray-50))}.\[\&\>svg\]\:pointer-events-none>svg{pointer-events:none}.\[\&\>svg\]\:absolute>svg{position:absolute}.\[\&\>svg\]\:top-4>svg{top:calc(var(--spacing,.25rem) * 4)}.\[\&\>svg\]\:left-4>svg{left:calc(var(--spacing,.25rem) * 4)}.\[\&\>svg\]\:size-3>svg{width:calc(var(--spacing,.25rem) * 3);height:calc(var(--spacing,.25rem) * 3)}.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div{--tw-translate-y:-3px;translate:var(--tw-translate-x) var(--tw-translate-y)}.\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--icon-sm\)>svg:not([class*=size-]){width:var(--icon-sm);height:var(--icon-sm)}.\[\&\>svg\~\*\]\:pl-7>svg~*{padding-left:calc(var(--spacing,.25rem) * 7)}}@layer alfred.utilities.patterns,alfred.utilities.charts,alfred.utilities.ai;@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-scrollbar-thumb{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-scrollbar-track{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}

package/dist/switch/index.d.ts

@@ -0,0 +1,2 @@
+import { Switch, SwitchProps, switchThumbVariants, switchTrackVariants } from "./switch.js";
+export { Switch, type SwitchProps, switchThumbVariants, switchTrackVariants };

package/dist/switch/index.js

@@ -0,0 +1,2 @@
+import { Switch, switchThumbVariants, switchTrackVariants } from "./switch.js";
+export { Switch, switchThumbVariants, switchTrackVariants };

package/dist/switch/switch.d.ts

@@ -0,0 +1,50 @@
+import { SwitchProps } from "react-aria-components";
+import { ReactNode } from "react";
+//#region src/switch/switch.d.ts
+/**
+ * Switch, ported from the legacy shadcn/Radix component onto React Aria.
+ *
+ * Census: 7 files, 16 uses. `checked` 16, `onCheckedChange` 16, `id` 9,
+ * `disabled` 7, `className` 4, `aria-label` 3.
+ *
+ * WORTH RAISING: only 3 of the 16 pass `aria-label` and 9 pass `id`. A
+ * Radix Switch renders a bare `<button role="switch">` with no text, so any
+ * use with neither has no accessible name at all. Here the label is
+ * `children`, so the common case names itself.
+ *
+ * THE COLOURS ARE NOT THE LEGACY'S, AND COULD NOT BE. The naive design --
+ * a white thumb on a `--color-primary` track -- is 2.44:1, and a white
+ * thumb on `--color-muted` is 1.13:1. Both fail WCAG 1.4.11, which is the
+ * criterion that applies to the parts of a graphic you need to see to read
+ * its state. So the track is `border` unchecked and `primary-strong`
+ * checked, which puts every pair over 3:1 in both themes (5.25 / 5.20
+ * light, 3.73 / 9.65 dark) and needs no border on the thumb.
+ *
+ * Position still carries the state as well as colour: the thumb moves.
+ * That is the non-colour cue WCAG 1.4.1 asks for.
+ */
+export declare const switchTrackVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const switchThumbVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * A switch.
+ *
+ * @example
+ * <Switch isSelected={on} onChange={setOn}>Email notifications</Switch>
+ * <Switch aria-label="Mute" isSelected={muted} onChange={setMuted} />
+ */
+interface SwitchProps$1 extends Omit<SwitchProps, "className" | "style" | "children"> {
+  /**
+   * The label, and the control's accessible name.
+   *
+   * Omit it only for a genuinely label-less switch, and pass `aria-label`
+   * instead. A Radix Switch with neither -- which the census suggests
+   * exists -- has no accessible name at all.
+   */
+  children?: ReactNode;
+  /** Extra classes for the label. Merged last, so they win conflicts. */
+  className?: string;
+}
+declare function Switch$1({ className, children, ...props }: SwitchProps$1): import("react").JSX.Element;
+//#endregion
+export { Switch$1 as Switch, SwitchProps$1 as SwitchProps };
+//# sourceMappingURL=switch.d.ts.map

package/dist/switch/switch.js

@@ -0,0 +1,66 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { selectionLabelVariants, selectionRingVariants } from "../lib/selection-control.js";
+import { cva } from "class-variance-authority";
+import { Switch } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/switch/switch.tsx
+/**
+* Switch, ported from the legacy shadcn/Radix component onto React Aria.
+*
+* Census: 7 files, 16 uses. `checked` 16, `onCheckedChange` 16, `id` 9,
+* `disabled` 7, `className` 4, `aria-label` 3.
+*
+* WORTH RAISING: only 3 of the 16 pass `aria-label` and 9 pass `id`. A
+* Radix Switch renders a bare `<button role="switch">` with no text, so any
+* use with neither has no accessible name at all. Here the label is
+* `children`, so the common case names itself.
+*
+* THE COLOURS ARE NOT THE LEGACY'S, AND COULD NOT BE. The naive design --
+* a white thumb on a `--color-primary` track -- is 2.44:1, and a white
+* thumb on `--color-muted` is 1.13:1. Both fail WCAG 1.4.11, which is the
+* criterion that applies to the parts of a graphic you need to see to read
+* its state. So the track is `border` unchecked and `primary-strong`
+* checked, which puts every pair over 3:1 in both themes (5.25 / 5.20
+* light, 3.73 / 9.65 dark) and needs no border on the thumb.
+*
+* Position still carries the state as well as colour: the thumb moves.
+* That is the non-colour cue WCAG 1.4.1 asks for.
+*/
+const switchTrackVariants = cva([
+	"relative inline-flex h-5 w-9 shrink-0 items-center",
+	"rounded-full box-border p-0.5",
+	"bg-border",
+	"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
+	"group-data-[selected]:bg-primary-strong",
+	selectionRingVariants()
+]);
+const switchThumbVariants = cva([
+	"block size-4 rounded-full bg-background shadow-surface",
+	"motion-safe:transition-transform motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
+	"group-data-[selected]:translate-x-4",
+	"rtl:group-data-[selected]:-translate-x-4"
+]);
+function Switch$1({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Switch, {
+		...props,
+		"data-slot": "switch",
+		className: cn(selectionLabelVariants(), className),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "switch-track",
+			className: switchTrackVariants(),
+			children: /* @__PURE__ */ jsx("span", {
+				"data-slot": "switch-thumb",
+				className: switchThumbVariants()
+			})
+		}), children == null ? null : /* @__PURE__ */ jsx("span", {
+			"data-slot": "switch-label",
+			children
+		})]
+	});
+}
+//#endregion
+export { Switch$1 as Switch, switchThumbVariants, switchTrackVariants };
+
+//# sourceMappingURL=switch.js.map

package/dist/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","names":["Switch","AriaSwitch"],"sources":["../../src/switch/switch.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport { Switch as AriaSwitch, type SwitchProps as AriaSwitchProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { selectionLabelVariants, selectionRingVariants } from \"../lib/selection-control.js\";\n\n/**\n * Switch, ported from the legacy shadcn/Radix component onto React Aria.\n *\n * Census: 7 files, 16 uses. `checked` 16, `onCheckedChange` 16, `id` 9,\n * `disabled` 7, `className` 4, `aria-label` 3.\n *\n * WORTH RAISING: only 3 of the 16 pass `aria-label` and 9 pass `id`. A\n * Radix Switch renders a bare `<button role=\"switch\">` with no text, so any\n * use with neither has no accessible name at all. Here the label is\n * `children`, so the common case names itself.\n *\n * THE COLOURS ARE NOT THE LEGACY'S, AND COULD NOT BE. The naive design --\n * a white thumb on a `--color-primary` track -- is 2.44:1, and a white\n * thumb on `--color-muted` is 1.13:1. Both fail WCAG 1.4.11, which is the\n * criterion that applies to the parts of a graphic you need to see to read\n * its state. So the track is `border` unchecked and `primary-strong`\n * checked, which puts every pair over 3:1 in both themes (5.25 / 5.20\n * light, 3.73 / 9.65 dark) and needs no border on the thumb.\n *\n * Position still carries the state as well as colour: the thumb moves.\n * That is the non-colour cue WCAG 1.4.1 asks for.\n */\nexport const switchTrackVariants = cva([\n  \"relative inline-flex h-5 w-9 shrink-0 items-center\",\n  \"rounded-full box-border p-0.5\",\n  \"bg-border\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n  \"group-data-[selected]:bg-primary-strong\",\n  selectionRingVariants(),\n]);\n\nexport const switchThumbVariants = cva([\n  \"block size-4 rounded-full bg-background shadow-surface\",\n  // translate-x-4, not the legacy translate-x-[calc(100%-2px)]: a bracket\n  // value that check:hardcoding rejects. The track is w-9 (36px) with p-0.5\n  // (2px) each side and a size-4 (16px) thumb, so the travel is exactly\n  // 36 - 4 - 16 = 16px.\n  \"motion-safe:transition-transform motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n  \"group-data-[selected]:translate-x-4\",\n  // RTL: the thumb must travel the other way, or the switch reads\n  // backwards. `rtl:` is a first-class Tailwind variant.\n  \"rtl:group-data-[selected]:-translate-x-4\",\n]);\n\n/**\n * A switch.\n *\n * @example\n * <Switch isSelected={on} onChange={setOn}>Email notifications</Switch>\n * <Switch aria-label=\"Mute\" isSelected={muted} onChange={setMuted} />\n */\nexport interface SwitchProps extends Omit<AriaSwitchProps, \"className\" | \"style\" | \"children\"> {\n  /**\n   * The label, and the control's accessible name.\n   *\n   * Omit it only for a genuinely label-less switch, and pass `aria-label`\n   * instead. A Radix Switch with neither -- which the census suggests\n   * exists -- has no accessible name at all.\n   */\n  children?: ReactNode;\n  /** Extra classes for the label. Merged last, so they win conflicts. */\n  className?: string;\n}\n\nexport function Switch({ className, children, ...props }: SwitchProps) {\n  return (\n    <AriaSwitch\n      {...props}\n      data-slot=\"switch\"\n      className={cn(selectionLabelVariants(), className)}\n    >\n      {/*\n        aria-hidden: the real input already carries the state. A decorative\n        track announced as well would say everything twice.\n      */}\n      <span aria-hidden=\"true\" data-slot=\"switch-track\" className={switchTrackVariants()}>\n        <span data-slot=\"switch-thumb\" className={switchThumbVariants()} />\n      </span>\n      {children == null ? null : <span data-slot=\"switch-label\">{children}</span>}\n    </AriaSwitch>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,sBAAsB,IAAI;CACrC;CACA;CACA;CACA;CACA;CACA,sBAAsB;AACxB,CAAC;AAED,MAAa,sBAAsB,IAAI;CACrC;CAKA;CACA;CAGA;AACF,CAAC;AAsBD,SAAgBA,SAAO,EAAE,WAAW,UAAU,GAAG,SAAsB;CACrE,OACE,qBAACC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,uBAAuB,GAAG,SAAS;EAHnD,UAAA,CASE,oBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAe,WAAW,oBAAoB;GAC/E,UAAA,oBAAC,QAAD;IAAM,aAAU;IAAe,WAAW,oBAAoB;GAAI,CAAA;EAC9D,CAAA,GACL,YAAY,OAAO,OAAO,oBAAC,QAAD;GAAM,aAAU;GAAgB;EAAe,CAAA,CAChE;;AAEhB"}

package/dist/table/index.d.ts

@@ -0,0 +1,2 @@
+import { Column, RowKey, Table, TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants } from "./table.js";
+export { type Column, type RowKey, Table, type TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants };

package/dist/table/index.js

@@ -0,0 +1,2 @@
+import { Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants } from "./table.js";
+export { Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants };

package/dist/table/table.d.ts

@@ -0,0 +1,288 @@
+import { VariantProps } from "class-variance-authority";
+import { SortDescriptor } from "react-aria-components";
+import { ReactNode } from "react";
+//#region src/table/table.d.ts
+/**
+ * Table, ported from the legacy shadcn table onto React Aria's Table.
+ *
+ * The legacy component in the product app rendered NOTHING -- its body was
+ * `return <>{children(renderProps)}</>` -- so all six of its consumers
+ * hand-built `<table>`, `tableLayout: fixed`, a `<colgroup>` and a min-width,
+ * and its config object was opt-OUT, so they wrote paragraphs of
+ * `enabled: false`. Six consumers produced six different tables. This one
+ * renders from `data` + `columns` + `getRowId`; everything else is opt-in.
+ *
+ * WIDTHS ARE CSS, and that is not a stylistic choice. React Aria's own `width`
+ * on a `<Column>` is ignored outside a `ResizableTableContainer`, and its
+ * dev-warning is dead code in 1.21.1 -- `for (let prop in ['width', ...])`
+ * iterates the INDICES, so the guard tests `'0' in props` and never fires. A
+ * width handed to React Aria disappears with no error and no console output:
+ * `width={120}` measured 42.675px in a browser. So `Column.width` is emitted
+ * as a style on the header cell, and any width puts the table into
+ * `table-layout: fixed` -- without which a declared width is only a hint.
+ *
+ * THE ROW HIGHLIGHT IS PAINTED FROM `:hover` AS WELL AS `data-[hovered]`, and
+ * that is a departure from the rule that state comes from React Aria data
+ * attributes rather than bare pseudo-classes. React Aria stamps `data-hovered`
+ * on a row ONLY when the row is interactive -- `onRowAction` or a selection
+ * mode -- exactly as it gates `Column` hover on `allowsSorting`. Four of the
+ * six legacy consumers are read-only tables that painted a hover fill, so
+ * `data-[hovered]` alone would drop their pointer affordance in silence. The
+ * rule exists because `:focus` fires on click where `data-[focus-visible]`
+ * does not; `:hover` has no such twin, and on an interactive row the two
+ * selectors match the same element with the same colour. The keyboard needs no
+ * workaround: `data-focused` IS emitted on read-only rows.
+ *
+ * `leading-*` sits on the table rather than on the cell. tailwind-merge treats
+ * a later `text-*` as owning line-height and silently strips a `leading-*`
+ * that precedes it, and the cells carry `text-start`/`text-center`/`text-end`.
+ * Line-height inherits, so putting it one level up removes the hazard instead
+ * of policing it.
+ */
+/**
+ * The card. Every table in the product sits in one.
+ *
+ * The edge uses `separator`, NOT `border`, and that reverses what an earlier
+ * revision of this file claimed. Measured against the running product, its card
+ * is `border border-border` resolving to #e6e6e6 -- the same hairline as the row
+ * dividers. The earlier argument was that the card edge is where WCAG 1.4.11
+ * lands; on reflection it does not. 1.4.11 covers what is needed to identify
+ * user interface COMPONENTS and their states, and a static table is not one:
+ * the interactive parts inside it -- sortable headers, pagination buttons --
+ * carry their own focus indicators and borders, which are still held to 3:1.
+ *
+ * overflow-hidden is load-bearing: the header fill runs to the table's edge and
+ * would square off the rounded corners without it.
+ */
+export declare const tableCardVariants: (props?: ({
+  frame?: "card" | "none" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The horizontal scroll container. The table owns it; 5 of 6 consumers built one by hand. */
+export declare const tableScrollVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tableVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * The header is near-white, not a grey band.
+ *
+ * The product fills it with its `--neutral-200`, #fffcfc: white carrying three
+ * counts of warmth in green and blue. An earlier revision of this file called
+ * that "not worth a token of its own" and used `background`, which made the
+ * header exactly the colour of the rows -- so the band vanished and the only
+ * thing separating the header was the divider under it. The difference is
+ * small on purpose; absent is not the same as small. It is `--color-header-fill`
+ * now, and it inverts properly in dark rather than being pinned to white.
+ */
+export declare const tableHeaderVariants: (props?: ({
+  headerFill?: "none" | "subtle" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The pagination bar. A sibling of the table, never a row inside it. */
+export declare const tablePaginationVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** The footer band. Heavier than a row rule, because it closes the table. */
+export declare const tableFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tableColumnVariants: (props?: ({
+  align?: "start" | "center" | "end" | null | undefined;
+  headerType?: "sentence" | "caps" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tableRowVariants: (props?: ({
+  variant?: "lined" | "plain" | null | undefined;
+  striped?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tableCellVariants: (props?: ({
+  align?: "start" | "center" | "end" | null | undefined;
+  numeric?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Identity for a row.
+ *
+ * Declared here rather than imported: React's own `Key` includes `bigint`,
+ * which React Aria's collections do not accept, and importing React Aria's
+ * would leak its types through the public API for no gain. This IS the set
+ * React Aria takes.
+ */
+export type RowKey = string | number;
+/** One column of a `Table`. */
+type Column$1<T, V = unknown> = {
+  /** Stable key. Becomes the column's id and the sort descriptor's `column`. */
+  id: string;
+  /** Header content. */
+  header: ReactNode;
+  /** Pulls this column's value out of a row. */
+  accessor: (row: T) => V;
+  /**
+   * Renders the cell. Defaults to `format?.(value, row) ?? String(value)`.
+   *
+   * Method syntax, not an arrow property, and that is load-bearing. A table
+   * holds columns of DIFFERENT value types in one array, so the array element
+   * has to be `Column<T, unknown>` -- and under `strictFunctionTypes` an arrow
+   * property is contravariant in its parameters, which would make
+   * `Column<T, string>` unassignable to it. Method members are checked
+   * bivariantly, which is precisely the semantics a heterogeneous collection
+   * needs. The alternative is `Column<T, any>`, and this package has no
+   * eslint-disable in it anywhere.
+   */
+  cell?(ctx: {
+    value: V;
+    row: T;
+    index: number;
+  }): ReactNode;
+  /**
+   * Value to string. Deliberately separate from `cell`: this is what CSV
+   * export and sort comparators consume, and a ReactNode is no use to either.
+   */
+  format?(value: V, row: T): string;
+  /**
+   * Logical alignment, applied to BOTH the column header and its cells --
+   * React Aria keeps no link between the two, so the component owns it.
+   */
+  align?: "start" | "center" | "end";
+  /**
+   * Column width. Any width on any column puts the table into
+   * `table-layout: fixed`.
+   *
+   * Emitted as CSS, NEVER forwarded to React Aria's own `width` prop. React
+   * Aria ignores that one outside a `ResizableTableContainer`, and its
+   * dev-warning is dead code in 1.21.1 (`for...in` over an array literal, so
+   * the guard tests `'0' in props`). A width handed to it disappears with no
+   * error and no console output.
+   */
+  width?: number | `${number}%`;
+  /**
+   * A column of figures: tabular numerals, end-aligned unless `align` says
+   * otherwise. Ten of the product's tables set tabular figures -- the most
+   * consistently applied convention in the app. Without it, proportional
+   * digits leave a column of numbers ragged.
+   */
+  numeric?: boolean;
+  /** Opts this column into sorting. Off by default. */
+  sortable?: boolean;
+};
+export interface TableProps<T> extends VariantProps<typeof tableRowVariants> {
+  /** The rows to render. */
+  data: readonly T[];
+  /** The columns, in display order. */
+  columns: readonly Column$1<T, unknown>[];
+  /** Stable identity for a row. Used as its key and to resolve `onRowAction`. */
+  getRowId: (row: T) => RowKey;
+  /**
+   * Required. React Aria's Table renders no `<caption>`, so this is the
+   * accessible name and there is no other source for it.
+   */
+  "aria-label": string;
+  /**
+   * The sorted column and direction, CONTROLLED.
+   *
+   * Pass this and the table stops sorting: you own the row order, which is
+   * what server-side sorting needs. Leave it off and the table sorts `data`
+   * itself from `defaultSortDescriptor` and header clicks.
+   */
+  sortDescriptor?: SortDescriptor;
+  /** The initial sort when uncontrolled. */
+  defaultSortDescriptor?: SortDescriptor;
+  /** Fires when a sortable column header is activated, controlled or not. */
+  onSortChange?: (descriptor: SortDescriptor) => void;
+  /**
+   * Fires on click or Enter. Receives the ROW, where React Aria's own handler
+   * receives a key -- every legacy consumer looked the row up again anyway.
+   *
+   * Setting it also makes rows interactive, which is what switches React
+   * Aria's `data-hovered` on.
+   */
+  onRowAction?: (row: T) => void;
+  /**
+   * Marks a row as the viewer's own -- the product tints "Alfred AI (You)".
+   *
+   * The tint is not the message. A fill alone is WCAG 1.4.1 use-of-colour, so
+   * the highlighted row is expected to say so in its own content, the way the
+   * product's does. This tints and sets `data-highlighted`; it does not invent
+   * meaning the row does not already carry.
+   */
+  isRowHighlighted?: (row: T) => boolean;
+  /** Extra classes per row, for styling that depends on row DATA. */
+  rowClassName?: (row: T) => string;
+  /**
+   * Rendered in place of the rows when `data` is empty.
+   *
+   * There is no default string on purpose: user-visible copy belongs in
+   * `useMessages()`, a mechanism this package does not have yet, and it is the
+   * one rule ARCHITECTURE says cannot be retrofitted.
+   */
+  empty?: ReactNode;
+  /** Minimum table width in px. Below it the wrapper scrolls horizontally. */
+  minWidth?: number;
+  /**
+   * Rows per page. Omit it and every row renders with no pagination UI.
+   *
+   * The table holds the page itself and slices AFTER sorting, so a sort
+   * reorders the whole set rather than shuffling the current page, and lands
+   * you back on page 1.
+   *
+   * With `pageSizeOptions` this is the STARTING size and the table owns it
+   * from then on; a later change to the prop does not move a reader who has
+   * chosen their own. Without them it is simply the size.
+   */
+  pageSize?: number;
+  /**
+   * Rows-per-page choices. Given them, the bar grows a select on its trailing
+   * side, which is the arrangement every paged table in the product uses:
+   * page numbers leading, rows-per-page trailing.
+   */
+  pageSizeOptions?: readonly number[];
+  /** Notified after the reader picks a new size. The table has already applied it. */
+  onPageSizeChange?: (pageSize: number) => void;
+  /**
+   * Copy for the pagination controls.
+   *
+   * These carry English defaults, which is a known debt: ARCHITECTURE section
+   * 7 rule 9 routes user-visible copy through a `useMessages()` hook that does
+   * not exist in this package yet. They are props so a consumer is not stuck
+   * waiting for it, and so the eventual mechanism has somewhere to land. The
+   * navigation landmark takes its name from `aria-label` instead, which avoids
+   * inventing a fourth string.
+   */
+  pageLabels?: {
+    previous?: string;
+    next?: string;
+    /**
+     * Accessible name for a page button.
+     *
+     * `isCurrent` exists because `aria-current` cannot reach the button.
+     * React Aria's Button runs its props through `filterDOMProps`, whose
+     * allowlist covers `id` and the labelling attributes and nothing else, so
+     * an `aria-current` handed to it is dropped with no error -- the same
+     * class of silent loss as `Column.width`. The current page therefore says
+     * so in its name, which every screen reader announces.
+     */
+    page?: (page: number, isCurrent: boolean) => string;
+    /** Option text in the rows-per-page select. */
+    perPage?: (pageSize: number) => string;
+    /** Accessible name for the rows-per-page select itself. */
+    rowsPerPage?: string;
+  };
+  /**
+   * Whether the table draws its own card. `none` for one that already sits
+   * inside a card, or is meant to be bare on the page.
+   */
+  frame?: "card" | "none";
+  /** Column label treatment: sentence case, or uppercase with tracking. */
+  headerType?: "sentence" | "caps";
+  /** Header background. `none` for report tables that carry no band. */
+  headerFill?: "subtle" | "none";
+  /** Zebra-stripe alternate rows. */
+  striped?: boolean;
+  /**
+   * A footer row, in a real `<tfoot>`.
+   *
+   * Called once per column; return the cell content, or null for a blank. A
+   * real footer rather than one more row of data, so it is announced as one.
+   */
+  totalRow?: (column: Column$1<T, unknown>) => ReactNode;
+  /** Extra classes for the table. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/** Builds columns that keep each column's own value type. */
+export declare function createColumns<T>(): {
+  column: <V>(definition: Column$1<T, V>) => Column$1<T, V>;
+};
+declare function Table$1<T>({ data, columns, getRowId, variant, sortDescriptor, defaultSortDescriptor, onSortChange, onRowAction, isRowHighlighted, rowClassName, frame, headerType, headerFill, striped, totalRow, empty, minWidth, pageSize, pageSizeOptions, onPageSizeChange, pageLabels, className, ...props }: TableProps<T>): import("react").JSX.Element;
+//#endregion
+export { Column$1 as Column, Table$1 as Table };
+//# sourceMappingURL=table.d.ts.map