@seekalfred/primitives 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Alfred AI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,84 @@
+# `@seekalfred/primitives`
+
+Accessible, styled primitives built on React Aria Components.
+
+```bash
+pnpm add @seekalfred/primitives @seekalfred/styles
+```
+
+```tsx
+// Ours first, yours after. That order is the whole override story.
+import "@seekalfred/styles/base.css";
+import "@seekalfred/primitives/styles.css";
+
+import { Button } from "@seekalfred/primitives";
+
+<Button variant="primary" size="md" onPress={save}>
+  Save changes
+</Button>;
+```
+
+You do not need Tailwind installed. This package ships compiled CSS.
+
+## Button
+
+| variant             |                                                        |
+| ------------------- | ------------------------------------------------------ |
+| `primary` (default) | solid brand orange, ink label                          |
+| `secondary`         | solid brand periwinkle, ink label                      |
+| `outline`           | background fill, brand border and label                |
+| `ghost`             | transparent until hovered                              |
+| `destructive`       | solid `destructive`                                    |
+| `link`              | text only, underlines on hover                         |
+
+The primary label is **ink, not white**. Brand orange carries white at only
+2.44:1; ink clears it at 8.35:1, which is the brand system's own rule. For the
+same reason `link` and `outline` use `primary-strong` — a darkened tone of the
+brand hue — because `primary` itself cannot legally be text or a border.
+
+Sizes: `sm` (32px) · `md` (36px, default) · `lg` (40px) · `icon` (36px square).
+
+`size="icon"` has no visible text, so it **must** carry an `aria-label`. Without
+one it has no accessible name and fails axe's `button-name` rule — the
+`IconOnly` story exists to keep that true.
+
+`buttonVariants` is exported. Use it when you need button styling on an element
+this component cannot render:
+
+```tsx
+import { buttonVariants } from "@seekalfred/primitives";
+
+<a href="/reports" className={buttonVariants({ variant: "outline" })}>
+  View reports
+</a>;
+```
+
+## Migrating from the legacy shadcn Button
+
+The variant and size vocabulary is unchanged, so most call sites move by
+changing the import alone. Five things differ, because this Button is built on
+React Aria Components rather than a bare `<button>`:
+
+| legacy                           | Alfred                                        |                                                                                                                  |
+| -------------------------------- | --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `onClick`                        | `onPress`                                     | React Aria omits `onClick` outright. `onPress` also covers touch and keyboard, and does not fire on right-click. |
+| `disabled`                       | `isDisabled`                                  |                                                                                                                  |
+| `variant="default"`              | `variant="primary"`                           | `default` named nothing.                                                                                         |
+| `size="default"`                 | `size="md"`                                   | Same 36px height.                                                                                                |
+| `<Button asChild><a /></Button>` | `<a className={buttonVariants({ variant })}>` | React Aria's Button never renders an anchor. A real `Link` primitive lands in Phase 1.                           |
+
+The first four are mechanical. `asChild` is not — each site needs a decision
+about whether it wanted a link or a button.
+
+Two things you gain: a `data-[pressed]` state the original never had, and
+`isPending`, which blocks activation while staying focusable and announces
+itself to screen readers.
+
+Two things that changed on purpose:
+
+- **Focus is an `outline`, not a `ring`.** The original used a 3px box-shadow.
+  Box-shadows are discarded under Windows High Contrast, taking the only focus
+  indication with them, and axe has no rule that catches it.
+- **No `dark:` variants.** Theming happens in the tokens, under
+  `[data-theme="dark"]`. Every `dark:` class in the original is gone, not
+  reimplemented.

package/dist/button/button.d.ts

@@ -0,0 +1,79 @@
+import { VariantProps } from "class-variance-authority";
+import { ButtonProps } from "react-aria-components";
+import { ReactNode } from "react";
+//#region src/button/button.d.ts
+/**
+ * Variant classes, exported so a consumer can reuse the exact classes we ship
+ * rather than guessing at them. This is also the supported answer for the
+ * link-shaped cases React Aria's Button cannot cover: it never renders an
+ * anchor, so `<a className={buttonVariants({ variant: "outline" })}>` is how a
+ * real navigation target gets button styling until the Link primitive lands.
+ *
+ * Ported from the legacy shadcn Button. The variant and size vocabulary is
+ * deliberately identical so existing call sites migrate by rename, with six
+ * corrections that the Alfred contracts require -- each marked below.
+ *
+ * Every string here is a STATIC literal. Tailwind scans source text, so a class
+ * assembled at runtime is invisible to it and would simply never be emitted.
+ *
+ * State comes from React Aria data attributes rather than pseudo-classes:
+ * data-[focus-visible] is keyboard focus only, and data-[pressed] covers mouse,
+ * touch and keyboard uniformly. The original had no pressed state at all.
+ */
+export declare const buttonVariants: (props?: ({
+  variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link" | null | undefined;
+  size?: "sm" | "md" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Props.
+ *
+ * CORRECTION 6 -- the legacy Button was a plain `<button>`, so it took
+ * `onClick`, `disabled` and Radix's `asChild`. React Aria's Button has none of
+ * those: `ButtonProps` explicitly omits `onClick` and `href`. The replacements
+ * are `onPress`, `isDisabled`, and `buttonVariants()` on the consumer's own
+ * element. See the migration table in the package README.
+ *
+ * Deliberately NOT intersected with ComponentPropsWithoutRef<"button">: that
+ * would advertise disabled, tabIndex and role, which React Aria does not
+ * implement and silently ignores. React Aria already forwards the native event
+ * surface, so nothing is lost.
+ */
+interface ButtonProps$1 extends Omit<ButtonProps, "className" | "style">, VariantProps<typeof buttonVariants> {
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+  /**
+   * Icon rendered before the label.
+   *
+   * Mark the glyph `aria-hidden` -- the label is the accessible name, and a
+   * second name source only makes the button announce twice. It is sized by the
+   * base `[&_svg]` rule at `--icon-sm` unless it carries a `size-*` class of
+   * its own, and spaced by `--density-control-gap`.
+   *
+   * Two named slots rather than one `icon` plus a position prop: a button can
+   * legitimately carry a leading glyph AND a trailing affordance, which one
+   * icon and a position cannot express.
+   *
+   * NOT the route for `size="icon"`. An icon-only button passes its glyph as
+   * `children`, which is what gives it its single centred child.
+   */
+  startIcon?: ReactNode;
+  /** Icon rendered after the label. Same rules as {@link ButtonProps.startIcon}. */
+  endIcon?: ReactNode;
+}
+/**
+ * A button.
+ *
+ * `size="icon"` renders a square button with no visible text, so it **must**
+ * carry an `aria-label` -- otherwise it has no accessible name and fails axe's
+ * `button-name` rule. The IconOnly story is the guard on that.
+ *
+ * @example
+ * <Button onPress={save}>Save changes</Button>
+ * <Button startIcon={<SaveIcon aria-hidden />}>Save changes</Button>
+ * <Button endIcon={<ChevronIcon aria-hidden />}>Continue</Button>
+ * <Button variant="outline" size="icon" aria-label="Close"><XIcon /></Button>
+ */
+declare function Button$1({ className, variant, size, startIcon, endIcon, children, ...props }: ButtonProps$1): import("react").JSX.Element;
+//#endregion
+export { Button$1 as Button, ButtonProps$1 as ButtonProps };
+//# sourceMappingURL=button.d.ts.map

package/dist/button/button.js

@@ -0,0 +1,120 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "class-variance-authority";
+import { Button } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/button/button.tsx
+/**
+* Variant classes, exported so a consumer can reuse the exact classes we ship
+* rather than guessing at them. This is also the supported answer for the
+* link-shaped cases React Aria's Button cannot cover: it never renders an
+* anchor, so `<a className={buttonVariants({ variant: "outline" })}>` is how a
+* real navigation target gets button styling until the Link primitive lands.
+*
+* Ported from the legacy shadcn Button. The variant and size vocabulary is
+* deliberately identical so existing call sites migrate by rename, with six
+* corrections that the Alfred contracts require -- each marked below.
+*
+* Every string here is a STATIC literal. Tailwind scans source text, so a class
+* assembled at runtime is invisible to it and would simply never be emitted.
+*
+* State comes from React Aria data attributes rather than pseudo-classes:
+* data-[focus-visible] is keyboard focus only, and data-[pressed] covers mouse,
+* touch and keyboard uniformly. The original had no pressed state at all.
+*/
+const buttonVariants = cva([
+	"inline-flex items-center justify-center gap-(--density-control-gap) shrink-0 whitespace-nowrap",
+	"rounded-md font-sans font-medium",
+	"cursor-pointer select-none",
+	"border-(length:--border-width) border-transparent bg-transparent",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+	"[&_svg:not([class*='size-'])]:size-(--icon-sm)",
+	"outline-none",
+	"data-[focus-visible]:outline-(length:--focus-ring-width)",
+	"data-[focus-visible]:outline-offset-(--focus-ring-offset)",
+	"data-[focus-visible]:outline-(--color-ring)",
+	"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)",
+	"data-[pending]:cursor-progress"
+], {
+	variants: {
+		variant: {
+			primary: [
+				"bg-primary text-primary-foreground shadow-surface",
+				"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
+				"data-[hovered]:bg-primary-hover",
+				"data-[pressed]:bg-primary-pressed"
+			],
+			secondary: [
+				"bg-secondary text-secondary-foreground shadow-surface",
+				"motion-safe:transition-colors",
+				"data-[hovered]:bg-secondary-hover",
+				"data-[pressed]:bg-secondary-pressed"
+			],
+			outline: [
+				"bg-background text-primary-strong border-(length:--border-width) border-primary-strong shadow-surface",
+				"motion-safe:transition-colors",
+				"data-[hovered]:bg-muted",
+				"data-[pressed]:bg-muted data-[pressed]:border-foreground"
+			],
+			ghost: [
+				"bg-transparent text-primary-strong",
+				"motion-safe:transition-colors",
+				"data-[hovered]:bg-muted",
+				"data-[pressed]:bg-muted data-[pressed]:border-primary-strong"
+			],
+			destructive: [
+				"bg-destructive text-destructive-foreground shadow-surface",
+				"motion-safe:transition-colors",
+				"data-[hovered]:bg-destructive-hover",
+				"data-[pressed]:bg-destructive-pressed"
+			],
+			link: [
+				"bg-transparent text-primary-strong underline-offset-(--underline-offset)",
+				"data-[hovered]:underline",
+				"data-[pressed]:underline"
+			]
+		},
+		size: {
+			sm: "h-(--density-control-h-sm) px-(--density-control-pad-sm) text-sm",
+			md: "h-(--density-control-h-md) px-(--density-control-pad-md) text-base",
+			lg: "h-(--density-control-h-lg) px-(--density-control-pad-lg) text-lg",
+			icon: "size-(--density-control-h-md) px-0 text-base"
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "md"
+	}
+});
+/**
+* A button.
+*
+* `size="icon"` renders a square button with no visible text, so it **must**
+* carry an `aria-label` -- otherwise it has no accessible name and fails axe's
+* `button-name` rule. The IconOnly story is the guard on that.
+*
+* @example
+* <Button onPress={save}>Save changes</Button>
+* <Button startIcon={<SaveIcon aria-hidden />}>Save changes</Button>
+* <Button endIcon={<ChevronIcon aria-hidden />}>Continue</Button>
+* <Button variant="outline" size="icon" aria-label="Close"><XIcon /></Button>
+*/
+function Button$1({ className, variant, size, startIcon, endIcon, children, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		"data-slot": "button",
+		className: cn(buttonVariants({
+			variant,
+			size
+		}), className),
+		children: startIcon === void 0 && endIcon === void 0 ? children : (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			startIcon,
+			typeof children === "function" ? children(renderProps) : children,
+			endIcon
+		] })
+	});
+}
+//#endregion
+export { Button$1 as Button, buttonVariants };
+
+//# sourceMappingURL=button.js.map

package/dist/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["Button","AriaButton"],"sources":["../../src/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport { Button as AriaButton, type ButtonProps as AriaButtonProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Variant classes, exported so a consumer can reuse the exact classes we ship\n * rather than guessing at them. This is also the supported answer for the\n * link-shaped cases React Aria's Button cannot cover: it never renders an\n * anchor, so `<a className={buttonVariants({ variant: \"outline\" })}>` is how a\n * real navigation target gets button styling until the Link primitive lands.\n *\n * Ported from the legacy shadcn Button. The variant and size vocabulary is\n * deliberately identical so existing call sites migrate by rename, with six\n * corrections that the Alfred contracts require -- each marked below.\n *\n * Every string here is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would simply never be emitted.\n *\n * State comes from React Aria data attributes rather than pseudo-classes:\n * data-[focus-visible] is keyboard focus only, and data-[pressed] covers mouse,\n * touch and keyboard uniformly. The original had no pressed state at all.\n */\nexport const buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-(--density-control-gap) shrink-0 whitespace-nowrap\",\n    // No leading-* here on purpose. tailwind-merge treats a later text-* class\n    // as owning line-height (a Tailwind v3 assumption, where text-base carried\n    // one), so a leading-* in the base string is silently STRIPPED by cn() once\n    // a size variant adds text-base. It is not needed either: the control has a\n    // fixed height and centres with flex, so line-height cannot overflow it.\n    // A component with auto height must put leading-* AFTER its text-* class.\n    \"rounded-md font-sans font-medium\",\n    \"cursor-pointer select-none\",\n\n    // font-sans above is part of the same problem: a <button> does not inherit\n    // the page font, so without a reset it renders in the user-agent face\n    // (Arial in Chromium) rather than the design system's. The same applies to\n    // bg-transparent: an unstyled <button> paints the user-agent ButtonFace\n    // grey -- which is what surfaces the moment a fill class fails to resolve,\n    // and is why the paint stories compare against tokens rather than checking\n    // for transparency.\n    //\n    // The reset in @seekalfred/styles is OPT-IN, so a consumer may never load\n    // one. A bare <button> then keeps its user-agent border (2px, black, in\n    // Chromium) and inline padding, which is a black box around every variant\n    // that does not set a border of its own. The original inherited a zeroed\n    // border from Tailwind Preflight in the app; a library component cannot\n    // assume the consumer supplied one.\n    \"border-(length:--border-width) border-transparent bg-transparent\",\n\n    // Icon handling, ported verbatim: an svg child is sized unless the caller\n    // already said otherwise, and never swallows the press.\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n\n    // CORRECTION 1 -- the original focused with `ring-[3px]`, which is a\n    // box-shadow. Box-shadows are discarded under forced-colors, taking the\n    // only focus indication with them, and axe has no rule that would catch it\n    // (ARCHITECTURE section 5, rule 6). A real outline survives.\n    \"outline-none\",\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\n    // CORRECTION 2 -- `disabled:pointer-events-none` also kills the cursor, so\n    // the control reads as inert rather than as unavailable. React Aria already\n    // blocks activation; this only has to say so.\n    \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n\n    // React Aria's own pending state. The original had no equivalent.\n    \"data-[pending]:cursor-progress\",\n  ],\n  {\n    variants: {\n      variant: {\n        // CORRECTION 3 -- the legacy button filled this variant with the brand\n        // gradient. It is flat here, because the brand system caps\n        // --gradient-brand at one intentional element per view and keeps that\n        // budget for the logo and progress bars: \"a gradient on every button\n        // spends that budget everywhere. Ours is the flat primary.\"\n        //\n        // CORRECTION 4 -- the label is ink, not white. Brand orange #FF8431\n        // carries white at 2.44:1; ink clears it at 8.35:1, which is the brand\n        // system's own --text-on-orange rule. Its Button ships white only as a\n        // dated, individually signed-off exception, and this library's contrast\n        // contract is build-failing with no exemption mechanism to inherit it.\n        //\n        // CORRECTION 7 -- hover and pressed are their own TOKENS, not opacity\n        // modifiers on the fill. `bg-primary/90` lightened the button toward the\n        // page, which reads as receding rather than interactive and was nearly\n        // invisible; it also made the label pair unmeasurable, because an alpha\n        // composite depends on whatever happens to sit behind it. The brand system\n        // steps DOWN its ramp instead -- 500 rest, 600 hover, 700 pressed -- and\n        // every one of those fills is now in the contrast contract.\n        primary: [\n          \"bg-primary text-primary-foreground shadow-surface\",\n          \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n          \"data-[hovered]:bg-primary-hover\",\n          \"data-[pressed]:bg-primary-pressed\",\n        ],\n        secondary: [\n          \"bg-secondary text-secondary-foreground shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-secondary-hover\",\n          \"data-[pressed]:bg-secondary-pressed\",\n        ],\n        // primary-strong, never primary: the brand orange is 2.44:1 on the page\n        // and cannot legally be a label OR a border. That is the whole reason\n        // the token exists.\n        outline: [\n          \"bg-background text-primary-strong border-(length:--border-width) border-primary-strong shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-muted\",\n          \"data-[pressed]:bg-muted data-[pressed]:border-foreground\",\n        ],\n        ghost: [\n          \"bg-transparent text-primary-strong\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-muted\",\n          // CORRECTION 5 -- pressed must not be background-only. A ghost button\n          // has no border at rest, so the pressed border is the non-colour cue\n          // that survives forced-colors (rule 6 again).\n          \"data-[pressed]:bg-muted data-[pressed]:border-primary-strong\",\n        ],\n        destructive: [\n          \"bg-destructive text-destructive-foreground shadow-surface\",\n          \"motion-safe:transition-colors\",\n          \"data-[hovered]:bg-destructive-hover\",\n          \"data-[pressed]:bg-destructive-pressed\",\n        ],\n        link: [\n          \"bg-transparent text-primary-strong underline-offset-(--underline-offset)\",\n          \"data-[hovered]:underline\",\n          \"data-[pressed]:underline\",\n        ],\n      },\n      size: {\n        // Height, padding and label size all come from the control scale, so\n        // data-density moves them together. The icon-only variant is square at\n        // the md height. The legacy shadcn rule that tightened padding when a\n        // child was an icon is gone: it needed three more magic numbers, the\n        // brand system has no equivalent, and the gap token now owns icon\n        // spacing.\n        sm: \"h-(--density-control-h-sm) px-(--density-control-pad-sm) text-sm\",\n        md: \"h-(--density-control-h-md) px-(--density-control-pad-md) text-base\",\n        lg: \"h-(--density-control-h-lg) px-(--density-control-pad-lg) text-lg\",\n        // text-base even though there is no visible label: without it the\n        // user-agent default (13.33px in Chromium) leaks in and sizes any\n        // em-based child against the wrong root.\n        icon: \"size-(--density-control-h-md) px-0 text-base\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\n/**\n * Props.\n *\n * CORRECTION 6 -- the legacy Button was a plain `<button>`, so it took\n * `onClick`, `disabled` and Radix's `asChild`. React Aria's Button has none of\n * those: `ButtonProps` explicitly omits `onClick` and `href`. The replacements\n * are `onPress`, `isDisabled`, and `buttonVariants()` on the consumer's own\n * element. See the migration table in the package README.\n *\n * Deliberately NOT intersected with ComponentPropsWithoutRef<\"button\">: that\n * would advertise disabled, tabIndex and role, which React Aria does not\n * implement and silently ignores. React Aria already forwards the native event\n * surface, so nothing is lost.\n */\nexport interface ButtonProps\n  extends Omit<AriaButtonProps, \"className\" | \"style\">, VariantProps<typeof buttonVariants> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Icon rendered before the label.\n   *\n   * Mark the glyph `aria-hidden` -- the label is the accessible name, and a\n   * second name source only makes the button announce twice. It is sized by the\n   * base `[&_svg]` rule at `--icon-sm` unless it carries a `size-*` class of\n   * its own, and spaced by `--density-control-gap`.\n   *\n   * Two named slots rather than one `icon` plus a position prop: a button can\n   * legitimately carry a leading glyph AND a trailing affordance, which one\n   * icon and a position cannot express.\n   *\n   * NOT the route for `size=\"icon\"`. An icon-only button passes its glyph as\n   * `children`, which is what gives it its single centred child.\n   */\n  startIcon?: ReactNode;\n  /** Icon rendered after the label. Same rules as {@link ButtonProps.startIcon}. */\n  endIcon?: ReactNode;\n}\n\n/**\n * A button.\n *\n * `size=\"icon\"` renders a square button with no visible text, so it **must**\n * carry an `aria-label` -- otherwise it has no accessible name and fails axe's\n * `button-name` rule. The IconOnly story is the guard on that.\n *\n * @example\n * <Button onPress={save}>Save changes</Button>\n * <Button startIcon={<SaveIcon aria-hidden />}>Save changes</Button>\n * <Button endIcon={<ChevronIcon aria-hidden />}>Continue</Button>\n * <Button variant=\"outline\" size=\"icon\" aria-label=\"Close\"><XIcon /></Button>\n */\nexport function Button({\n  className,\n  variant,\n  size,\n  startIcon,\n  endIcon,\n  children,\n  ...props\n}: ButtonProps) {\n  return (\n    <AriaButton\n      {...props}\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size }), className)}\n    >\n      {/*\n       * children passes through UNTOUCHED when neither slot is used, so a\n       * button with no icon renders byte-identical DOM to before this prop\n       * existed. That is what keeps this an additive change rather than a\n       * structural one -- and the childOrder assertions in the stories are what\n       * hold it true, since they read the button's direct children.\n       *\n       * The slot branch has to be a render function because React Aria's\n       * children are ChildrenOrFunction<ButtonRenderProps>: a consumer may pass\n       * a function to read isPressed or isPending, and wrapping the node\n       * directly would silently render that function as nothing. The fragment\n       * adds no element of its own.\n       */}\n      {startIcon === undefined && endIcon === undefined\n        ? children\n        : (renderProps) => (\n            <>\n              {startIcon}\n              {typeof children === \"function\" ? children(renderProps) : children}\n              {endIcon}\n            </>\n          )}\n    </AriaButton>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,iBAAiB,IAC5B;CACE;CAOA;CACA;CAgBA;CAIA;CACA;CAMA;CACA;CACA;CACA;CAKA;CAGA;AACF,GACA;CACE,UAAU;EACR,SAAS;GAoBP,SAAS;IACP;IACA;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IACA;GACF;GAIA,SAAS;IACP;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IAIA;GACF;GACA,aAAa;IACX;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;GACF;EACF;EACA,MAAM;GAOJ,IAAI;GACJ,IAAI;GACJ,IAAI;GAIJ,MAAM;EACR;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;;;;;;;;;;;;;AAqDA,SAAgBA,SAAO,EACrB,WACA,SACA,MACA,WACA,SACA,UACA,GAAG,SACW;CACd,OACE,oBAACC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAezD,UAAA,cAAc,KAAA,KAAa,YAAY,KAAA,IACpC,YACC,gBACC,qBAAA,UAAA,EAAA,UAAA;GACG;GACA,OAAO,aAAa,aAAa,SAAS,WAAW,IAAI;GACzD;EACD,EAAA,CAAA;CAEE,CAAA;AAEhB"}

package/dist/button/index.d.ts

@@ -0,0 +1,2 @@
+import { Button, ButtonProps, buttonVariants } from "./button.js";
+export { Button, type ButtonProps, buttonVariants };

package/dist/button/index.js

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

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { Button, ButtonProps, buttonVariants } from "./button/button.js";
+import { cn } from "./lib/cn.js";
+export { Button, type ButtonProps, buttonVariants, cn };

package/dist/index.js

@@ -0,0 +1,3 @@
+import { cn } from "./lib/cn.js";
+import { Button, buttonVariants } from "./button/button.js";
+export { Button, buttonVariants, cn };

package/dist/lib/cn.d.ts

@@ -0,0 +1,12 @@
+import { ClassValue } from "clsx";
+//#region src/lib/cn.d.ts
+/**
+ * Merge class names, with the caller's classes winning conflicts.
+ *
+ * Every component runs its own classes through this with the consumer's
+ * className last, so a consumer class replaces ours inside the class
+ * attribute rather than fighting it on specificity.
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//#endregion
+//# sourceMappingURL=cn.d.ts.map

package/dist/lib/cn.js

@@ -0,0 +1,17 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region src/lib/cn.ts
+/**
+* Merge class names, with the caller's classes winning conflicts.
+*
+* Every component runs its own classes through this with the consumer's
+* className last, so a consumer class replaces ours inside the class
+* attribute rather than fighting it on specificity.
+*/
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+export { cn };
+
+//# sourceMappingURL=cn.js.map

package/dist/lib/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","names":[],"sources":["../../src/lib/cn.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names, with the caller's classes winning conflicts.\n *\n * Every component runs its own classes through this with the consumer's\n * className last, so a consumer class replaces ours inside the class\n * attribute rather than fighting it on specificity.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,GAAG,GAAG,QAA8B;CAClD,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B"}

package/dist/styles.css

@@ -0,0 +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}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@seekalfred/primitives",
+  "version": "0.2.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Accessible, styled primitives built on React Aria Components.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/e902-ailabs/alfred-component-library.git",
+    "directory": "packages/primitives"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./button": {
+      "types": "./dist/button/index.d.ts",
+      "default": "./dist/button/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-aria-components": "^1.21.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@seekalfred/tokens": "^0.2.0",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "tailwind-merge": "3.6.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "0.18.5",
+    "@seekalfred/styles": "^0.2.0",
+    "@seekalfred/tsconfig": "0.0.0",
+    "@size-limit/preset-small-lib": "13.0.3",
+    "@storybook/react-vite": "10.6.0",
+    "@tailwindcss/cli": "4.3.3",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.7",
+    "publint": "0.3.24",
+    "react": "19.2.8",
+    "react-aria-components": "1.21.1",
+    "react-dom": "19.2.8",
+    "size-limit": "13.0.3",
+    "storybook": "10.6.0",
+    "tailwindcss": "4.3.3",
+    "tsdown": "0.23.0",
+    "typescript": "6.0.3"
+  },
+  "scripts": {
+    "build": "tsdown && tailwindcss -i src/styles.css -o dist/styles.css --minify",
+    "dev": "tsdown --watch",
+    "dev:css": "tailwindcss -i src/styles.css -o dist/styles.css --watch",
+    "typecheck": "tsc --noEmit",
+    "check:package": "publint --strict && attw --pack . --profile esm-only --exclude-entrypoints ./styles.css && size-limit"
+  }
+}