@actioneer/ads 1.0.5 → 1.0.7

package/DESIGN.md

@@ -179,7 +179,7 @@ components:
 
 TASTE.md puts it in one line: On a quiet, neutral ground, colour and motion are spent like money — rarely, deliberately, and only where the eye should go.
 
-ADS 1.0.5 is a library first and a look second. 323 components across 10 families (Primitives / utilities, Foundations, Form controls, Overlays, Data display, Feedback, Navigation, Layout, AI Elements, Chat) ship from one barrel, and every product that consumes them inherits the judgment encoded in 56 semantic tokens and 11 principles rather than re-deciding it per screen.
+ADS 1.0.7 is a library first and a look second. 323 components across 10 families (Primitives / utilities, Foundations, Form controls, Overlays, Data display, Feedback, Navigation, Layout, AI Elements, Chat) ship from one barrel, and every product that consumes them inherits the judgment encoded in 56 semantic tokens and 11 principles rather than re-deciding it per screen.
 
 The ground is warm grey and the ink is warm near-black. One hue is spent by default, the Studio teal CTA family, and four more carry semantic status. Everything else stays neutral. A consumer product may narrow that further, and one already does: Baby Sentinel drops the teal and runs every action on ink.
 

package/README.md

@@ -0,0 +1,205 @@
+# @actioneer/ads
+
+The **Actioneer Design System**: React 19 components, Tailwind CSS v4 tokens,
+bundled Aribau Grotesk fonts, and accessible interactions with built-in motion.
+
+[Browse components in Storybook](https://actioneer-ads-storybook.himanshu-563.workers.dev).
+
+> **The one rule:** build UI **only** from the exact named exports of
+> `@actioneer/ads`, and reference tokens — never raw color/dimension literals.
+> Never fork, alias, deep-import, or hand-roll a copy of a component.
+> `@actioneer/ads-lint` enforces this.
+
+---
+
+## 1. Install
+
+```bash
+npm install @actioneer/ads motion
+```
+
+Use an existing **React 19 + Tailwind CSS v4** application with an ESM-capable
+bundler. `react` and `react-dom` are peer dependencies; the application owns the
+React instance. The setup below uses Next.js App Router paths.
+
+The bootstrap configures styles and providers and creates the lint config:
+
+```bash
+npx @actioneer/ads init
+```
+
+`init` adds the CSS import, creates `ads-providers.tsx` (or `.jsx`), and writes a
+consumer `ads-lint.config.mjs`. It wraps detected Next.js layouts and reports any
+manual setup still needed. Run it from your application directory after setting
+up Tailwind v4. The manual setup follows.
+
+## 2. Tailwind v4 + `styles.css` (import order matters)
+
+In your global stylesheet, import ADS's stylesheet **immediately after**
+Tailwind:
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+@import "@actioneer/ads/styles.css";
+```
+
+`styles.css` carries three things that must live in the **same CSS graph** as
+`tailwindcss`:
+
+- the `@theme` **design tokens** (colors, typography, spacing, and radii),
+- the **Aribau Grotesk** `@font-face` rules (served package-relative — no
+  `/public` copy needed), and
+- a baked `@source "./**/*.{js,mjs}"` so Tailwind scans ADS's own class usage and
+  generates its utilities in your build.
+
+> ⚠️ Import order is load-bearing. If you `@import "@actioneer/ads/styles.css"`
+> **before** `@import "tailwindcss"` — or import it into a stylesheet that isn't
+> part of the Tailwind graph — its `@theme` is an unknown at-rule and **no tokens
+> emit** (you'll get an unstyled, "blank" render).
+
+Granular entries are also exported if you need them: `@actioneer/ads/theme.css`
+(tokens only) and `@actioneer/ads/fonts.css` (`@font-face` only).
+
+## 3. Required providers
+
+Wrap your app root **once** with all three providers. `npx @actioneer/ads init`
+generates this as `app/ads-providers.tsx` (beside the layout when using `src/app`):
+
+```tsx
+// app/ads-providers.tsx
+"use client";
+
+import type { ReactNode } from "react";
+import { TooltipProvider, ToastProvider } from "@actioneer/ads";
+import { MotionConfig } from "motion/react";
+
+export function Providers({ children }: { children: ReactNode }) {
+  return (
+    <MotionConfig reducedMotion="user">
+      <ToastProvider>
+        <TooltipProvider>{children}</TooltipProvider>
+      </ToastProvider>
+    </MotionConfig>
+  );
+}
+```
+
+```tsx
+// app/layout.tsx
+import type { ReactNode } from "react";
+import { Providers } from "./ads-providers";
+import "./globals.css";
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body><Providers>{children}</Providers></body>
+    </html>
+  );
+}
+```
+
+- **`TooltipProvider`** — required. The vendored tooltip/attachment chips crash
+  the tree without an ancestor provider.
+- **`ToastProvider`** — required to render toasts.
+- **`<MotionConfig reducedMotion="user">`** — honors the OS reduced-motion
+  setting across every ADS animation.
+
+For other React frameworks, import the global stylesheet and wrap the application
+root with `Providers` in the framework's entry point.
+
+## 4. Usage
+
+Import the **exact named export** from the package barrel:
+
+```tsx
+// app/page.tsx
+"use client";
+
+import { Button, InputField } from "@actioneer/ads";
+
+export default function Example() {
+  return (
+    <main className="mx-auto flex max-w-sm flex-col gap-4 p-6">
+      <InputField label="Workspace name" defaultValue="Actioneer" />
+      <div className="flex gap-2">
+        <Button variant="solid" size="md">Save</Button>
+        <Button variant="secondary">Cancel</Button>
+      </div>
+    </main>
+  );
+}
+```
+
+Do **not**:
+
+| ❌ Anti-pattern | ✅ Instead |
+|----------------|-----------|
+| `import { Button } from "@actioneer/ads/button"` (deep import) | `import { Button } from "@actioneer/ads"` |
+| `import { Card as Panel } from "@actioneer/ads"` (alias) | use the export's real name, `Card` |
+| `import Button from "@actioneer/ads"` (default) / `import * as ADS` (namespace) | named imports only |
+| copy a component's source into your repo and edit it (fork) | import it; request an ADS change upstream |
+| `class="bg-[#0a0a0b]"` / `"#0a0a0b"` (literal) | a semantic token, e.g. `bg-brand` |
+| `import { Dialog } from "@radix-ui/react-dialog"` (external UI) | the ADS primitive (`Modal`, `Popover`, …) |
+
+**Why:** ADS is a single source of truth. A token or motion fix ships to the
+whole fleet with one version bump — but only if every consumer imports the
+canonical export instead of a divergent fork.
+
+**Discover exact names:** the machine-readable catalog ships in the package —
+`@actioneer/ads/manifest.json` (every export → name, family, kind, variants,
+props, showcase URL) and `@actioneer/ads/llms.txt` (the LLM-facing index). Point
+your coding agent at those, or use the ADS MCP server.
+
+Reference the semantic tokens (e.g. `bg-brand`, `text-muted-foreground`,
+`border-input`, `ring-ring`) rather than raw values; the full token list is in
+`manifest.json` under `tokens`.
+
+Shared motion presets are named exports from `@actioneer/ads`. Components already
+include their own interaction motion; use the exported presets for additional
+application state changes.
+
+## 5. Wire up `ads-lint`
+
+`@actioneer/ads-lint` enforces the contract above on your changed files.
+
+```bash
+npm install -D @actioneer/ads-lint typescript
+```
+
+Drop a **consumer-mode** config at your repo root (`init` writes this for you):
+
+```js
+// ads-lint.config.mjs
+export default {
+  imports: {
+    libraryPackage: "@actioneer/ads",
+    libraryRoot: null, // consumer mode: every file is a consumer
+  },
+};
+```
+
+Run it:
+
+```bash
+# lint everything
+npx ads-lint --all
+# or just what changed (pre-commit / CI)
+npx ads-lint --staged
+npx ads-lint --diff origin/main
+```
+
+It flags deep imports, aliased/default/namespace barrel imports, external-UI
+imports, hardcoded color/dimension literals, and banned/weak motion — the same
+rules ADS holds itself to. A CI job that runs `npx ads-lint --diff <base>` keeps
+every consuming repo honest.
+
+## Documentation and license
+
+- [Storybook: components and recipes](https://actioneer-ads-storybook.himanshu-563.workers.dev)
+- [ADS MCP: component discovery for coding agents](https://www.npmjs.com/package/@actioneer/ads-mcp)
+- Bundled references: `@actioneer/ads/manifest.json`, `@actioneer/ads/llms.txt`,
+  and `@actioneer/ads/DESIGN.md`.
+
+MIT licensed.

package/components/alert.d.ts

@@ -1,10 +1,10 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 /**
- * Alert — inline status messaging on a raised white surface. Status color is
- * confined to the indicator, title, and optional timeout progress bar; the
- * description stays muted. Timed alerts enter from the right and leave to the
- * left once their progress completes.
+ * Alert — inline status messaging in an outlined white container. A softly tinted
+ * indicator carries status while the title and description stay neutral.
+ * Buttons are 24px tall and actions sit 16px below the message. Timed alerts
+ * retain their countdown and dismiss after it completes.
  */
 declare const alertVariants: (props?: ({
     variant?: "success" | "warning" | "danger" | "info" | "default" | null | undefined;

package/components/alert.js

@@ -1,90 +1,105 @@
 "use client";
-import { jsx as e, jsxs as k } from "react/jsx-runtime";
-import * as t from "react";
-import { cva as A } from "class-variance-authority";
-import { MotionConfig as E, motion as g } from "motion/react";
-import { Info as p, WarningCircle as C, Warning as I, CheckCircle as R, Close as j } from "../lib/icons.js";
-import { cn as d } from "../lib/cn.js";
-import { springOverlay as z } from "../lib/motion.js";
-const D = A(
-  "relative flex w-full items-start gap-4 overflow-hidden rounded-2xl border border-border bg-card p-4 shadow-[var(--shadow-200)]",
+import { jsx as t, jsxs as I } from "react/jsx-runtime";
+import * as e from "react";
+import { cva as R } from "class-variance-authority";
+import { MotionConfig as j, motion as y } from "motion/react";
+import { Info as h, WarningCircle as V, Warning as M, CheckCircle as S, Close as W } from "../lib/icons.js";
+import { cn as m } from "../lib/cn.js";
+import { fadeTransition as X, springOverlay as H } from "../lib/motion.js";
+const O = R(
+  "relative grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-4 overflow-hidden rounded-lg border border-border bg-card p-4 text-on-white-primary [&_button]:h-6",
   {
     variants: {
       variant: {
-        default: "[--alert-accent:var(--foreground)]",
-        success: "[--alert-accent:var(--color-success-700)]",
-        warning: "[--alert-accent:var(--color-warning-700)]",
-        danger: "[--alert-accent:var(--color-danger-700)]",
-        info: "[--alert-accent:var(--color-info-700)]"
+        default: "[--alert-accent:var(--foreground)] [--alert-soft:var(--fill)]",
+        success: "[--alert-accent:var(--color-success-700)] [--alert-soft:var(--color-success-50)]",
+        warning: "[--alert-accent:var(--color-warning-700)] [--alert-soft:var(--color-warning-50)]",
+        danger: "[--alert-accent:var(--color-danger-700)] [--alert-soft:var(--color-danger-50)]",
+        info: "[--alert-accent:var(--color-info-700)] [--alert-soft:var(--color-info-50)]"
       }
     },
     defaultVariants: { variant: "default" }
   }
-), T = {
-  default: p,
-  success: R,
-  warning: I,
-  danger: C,
-  info: p
-}, M = t.forwardRef(
-  ({ className: n, variant: r = "default", icon: s, duration: a = 0, onClose: l, children: x, ...v }, h) => {
-    const b = T[r ?? "default"], [i, w] = t.useState(!1), [o, N] = t.useState(!1), c = t.useRef(l), m = t.useRef(!1);
-    t.useEffect(() => {
-      c.current = l;
+), q = {
+  default: h,
+  success: S,
+  warning: M,
+  danger: V,
+  info: h
+}, B = e.forwardRef(
+  ({ className: o, variant: a = "default", icon: s, duration: i = 0, onClose: l, children: g, ...A }, E) => {
+    const T = q[a ?? "default"], [n, k] = e.useState(!1), [c, C] = e.useState(!1), d = e.useRef(l), w = e.useRef(!1), u = e.Children.toArray(g);
+    let f = -1;
+    u.forEach((r, D) => {
+      if (!e.isValidElement(r)) return;
+      const v = typeof r.type == "string" ? void 0 : r.type.displayName;
+      (r.type === b || r.type === N || v === "AlertTitle" || v === "AlertDescription") && (f = D);
+    });
+    const _ = f < 0 ? g : u.slice(0, f + 1), x = f < 0 ? [] : u.slice(f + 1);
+    e.useEffect(() => {
+      d.current = l;
     }, [l]);
-    const u = t.useCallback(() => {
-      o || w(!0);
-    }, [o]);
-    t.useEffect(() => {
-      if (a <= 0 || i || o) return;
-      const f = window.setTimeout(u, a);
-      return () => window.clearTimeout(f);
-    }, [u, a, o, i]);
-    const y = t.useCallback(() => {
-      var f;
-      !i || m.current || (m.current = !0, N(!0), (f = c.current) == null || f.call(c));
-    }, [i]);
-    return o ? null : /* @__PURE__ */ e(E, { reducedMotion: "user", children: /* @__PURE__ */ e(
-      g.div,
+    const p = e.useCallback(() => {
+      c || k(!0);
+    }, [c]);
+    e.useEffect(() => {
+      if (i <= 0 || n || c) return;
+      const r = window.setTimeout(p, i);
+      return () => window.clearTimeout(r);
+    }, [p, i, c, n]);
+    const z = e.useCallback(() => {
+      var r;
+      !n || w.current || (w.current = !0, C(!0), (r = d.current) == null || r.call(d));
+    }, [n]);
+    return c ? null : /* @__PURE__ */ t(j, { reducedMotion: "user", children: /* @__PURE__ */ t(
+      y.div,
       {
+        className: "w-full min-w-0",
         initial: { opacity: 1, x: 32 },
-        animate: i ? { opacity: 0, x: -32 } : { opacity: 1, x: 0 },
-        transition: i ? { duration: 0.18, ease: "easeIn" } : z,
-        onAnimationComplete: y,
-        children: /* @__PURE__ */ k(
+        animate: n ? { opacity: 0, x: -32 } : { opacity: 1, x: 0 },
+        transition: n ? X : H,
+        onAnimationComplete: z,
+        children: /* @__PURE__ */ I(
           "div",
           {
-            ref: h,
+            ref: E,
+            "data-slot": "alert",
             role: "alert",
-            className: d(D({ variant: r }), n),
-            ...v,
+            className: m(
+              O({ variant: a }),
+              l && "grid-cols-[auto_minmax(0,1fr)_auto]",
+              o
+            ),
+            ...A,
             children: [
-              /* @__PURE__ */ e("span", { className: "flex shrink-0 select-none items-center justify-center py-1 text-(--alert-accent) [&_svg]:size-4", children: s ?? /* @__PURE__ */ e(b, { "aria-hidden": !0 }) }),
-              /* @__PURE__ */ e("div", { className: "flex min-w-0 grow flex-col items-start", children: x }),
-              l && /* @__PURE__ */ e(
+              /* @__PURE__ */ t("span", { "data-slot": "alert-icon", className: "col-start-1 row-start-1 flex size-8 self-center select-none items-center justify-center rounded-md bg-(--alert-soft) text-(--alert-accent) [&_svg]:size-4", children: s ?? /* @__PURE__ */ t(T, { "aria-hidden": !0 }) }),
+              /* @__PURE__ */ t("div", { "data-slot": "alert-content", className: "col-start-2 row-start-1 flex min-w-0 flex-col items-start gap-0.5 self-center [overflow-wrap:anywhere]", children: _ }),
+              l && /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
                   "aria-label": "Dismiss",
-                  onClick: u,
-                  className: d(
-                    "inline-flex size-6 shrink-0 items-center justify-center rounded-sm text-muted-foreground",
-                    "transition-colors hover:bg-fill hover:text-foreground",
+                  onClick: p,
+                  className: m(
+                    "col-start-3 row-start-1 inline-flex size-6 cursor-pointer items-center justify-center self-start rounded-sm text-on-white-tertiary",
+                    "transition-[background-color,color,transform] duration-150 ease-out hover:bg-fill hover:text-on-white-primary",
+                    "active:scale-[0.97] motion-reduce:active:scale-100 motion-reduce:transition-none",
                     "outline-none focus-visible:ring-3 focus-visible:ring-ring",
                     "[&_svg]:size-4"
                   ),
-                  children: /* @__PURE__ */ e(j, { "aria-hidden": !0 })
+                  children: /* @__PURE__ */ t(W, { "aria-hidden": !0 })
                 }
               ),
-              a > 0 && /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "absolute inset-x-0 bottom-0 h-0.5 bg-wg3", children: /* @__PURE__ */ e(
-                g.span,
+              x.length > 0 && /* @__PURE__ */ t("div", { "data-slot": "alert-actions", className: "col-start-2 row-start-2 flex min-w-0 flex-wrap items-center gap-2 [&>*]:max-w-full", children: x }),
+              i > 0 && /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "absolute inset-x-0 bottom-0 h-0.5 bg-wg3", children: /* @__PURE__ */ t(
+                y.span,
                 {
                   className: "block size-full origin-left bg-(--alert-accent)",
                   initial: { scaleX: 1 },
                   animate: { scaleX: 0 },
-                  transition: { duration: a / 1e3, ease: "linear" }
+                  transition: { duration: i / 1e3, ease: "linear" }
                 },
-                a
+                i
               ) })
             ]
           }
@@ -93,32 +108,29 @@ const D = A(
     ) });
   }
 );
-M.displayName = "Alert";
-const S = t.forwardRef(({ className: n, ...r }, s) => /* @__PURE__ */ e(
+B.displayName = "Alert";
+const b = e.forwardRef(({ className: o, ...a }, s) => /* @__PURE__ */ t(
   "p",
   {
     ref: s,
-    className: d("text-s font-normal leading-6 text-(--alert-accent)", n),
-    ...r
+    "data-slot": "alert-title",
+    className: m("text-m font-medium leading-6 text-on-white-primary", o),
+    ...a
   }
 ));
-S.displayName = "AlertTitle";
-const V = t.forwardRef(({ className: n, ...r }, s) => (
-  // leading-normal (150%) — the description is the only part of an alert that
-  // regularly wraps, and the text-xs default (138%) sets multi-line copy too
-  // tight to scan.
-  /* @__PURE__ */ e(
-    "p",
-    {
-      ref: s,
-      className: d("text-xs leading-normal text-muted-foreground", n),
-      ...r
-    }
-  )
+b.displayName = "AlertTitle";
+const N = e.forwardRef(({ className: o, ...a }, s) => /* @__PURE__ */ t(
+  "p",
+  {
+    ref: s,
+    "data-slot": "alert-description",
+    className: m("text-m leading-relaxed text-on-white-secondary [overflow-wrap:anywhere]", o),
+    ...a
+  }
 ));
-V.displayName = "AlertDescription";
+N.displayName = "AlertDescription";
 export {
-  M as Alert,
-  V as AlertDescription,
-  S as AlertTitle
+  B as Alert,
+  N as AlertDescription,
+  b as AlertTitle
 };

package/components/radio.d.ts

@@ -10,7 +10,7 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     disabled?: boolean;
 }
 export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
-export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange"> {
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
     value: string;
 }
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/components/radio.js

@@ -1,111 +1,111 @@
 "use client";
-import { jsx as r, jsxs as R } from "react/jsx-runtime";
+import { jsx as r, jsxs as y } from "react/jsx-runtime";
 import * as i from "react";
-import { MotionConfig as v, motion as y } from "motion/react";
-import { cn as b } from "../lib/cn.js";
-import { Field as N } from "./field.js";
-import { springRadio as w } from "../lib/motion.js";
-const x = i.createContext(null), k = i.forwardRef(
+import { MotionConfig as N, motion as w } from "motion/react";
+import { cn as g } from "../lib/cn.js";
+import { Field as k } from "./field.js";
+import { springRadio as C } from "../lib/motion.js";
+const R = i.createContext(null), j = i.forwardRef(
   ({
-    className: d,
-    name: n,
+    className: u,
+    name: t,
     value: o,
-    onChange: t,
-    label: a,
-    description: c,
-    error: u,
-    orientation: p = "vertical",
-    disabled: e,
-    children: s,
-    ...l
-  }, f) => {
+    onChange: a,
+    label: s,
+    description: p,
+    error: n,
+    orientation: f = "vertical",
+    disabled: l,
+    children: e,
+    ...d
+  }, c) => {
     const m = i.useMemo(
-      () => ({ name: n, value: o, onValueChange: t, disabled: e }),
-      [n, o, t, e]
+      () => ({ name: t, value: o, onValueChange: a, disabled: l }),
+      [t, o, a, l]
     );
     return /* @__PURE__ */ r(
-      N,
+      k,
       {
-        ref: f,
-        label: a,
-        description: c,
-        error: u,
+        ref: c,
+        label: s,
+        description: p,
+        error: n,
         role: "radiogroup",
-        className: d,
-        ...l,
-        children: /* @__PURE__ */ r(x.Provider, { value: m, children: /* @__PURE__ */ r(
+        className: u,
+        ...d,
+        children: /* @__PURE__ */ r(R.Provider, { value: m, children: /* @__PURE__ */ r(
           "div",
           {
-            className: b(
+            className: g(
               "flex gap-3",
-              p === "vertical" ? "flex-col" : "flex-row flex-wrap"
+              f === "vertical" ? "flex-col" : "flex-row flex-wrap"
             ),
-            children: s
+            children: e
           }
         ) })
       }
     );
   }
 );
-k.displayName = "RadioGroup";
-const j = i.forwardRef(
-  ({ className: d, children: n, value: o, disabled: t, checked: a, defaultChecked: c, ...u }, p) => {
-    const e = i.useContext(x), s = t || (e == null ? void 0 : e.disabled), l = a !== void 0, [f, m] = i.useState(!!c), g = e ? e.value === o : l ? a : f;
-    return /* @__PURE__ */ R(
+j.displayName = "RadioGroup";
+const G = i.forwardRef(
+  ({ className: u, children: t, value: o, disabled: a, checked: s, defaultChecked: p, onChange: n, ...f }, l) => {
+    const e = i.useContext(R), d = a || (e == null ? void 0 : e.disabled), c = s !== void 0, [m, v] = i.useState(!!p), b = e ? e.value === o : c ? s : m;
+    return /* @__PURE__ */ y(
       "label",
       {
-        className: b(
+        className: g(
           "group inline-flex items-center gap-2 text-m text-foreground select-none",
-          s ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-          d
+          d ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          u
         ),
         children: [
           /* @__PURE__ */ r(
             "input",
             {
-              ref: p,
+              ref: l,
               type: "radio",
               name: e == null ? void 0 : e.name,
               value: o,
-              checked: g,
-              disabled: s,
-              onChange: (C) => {
+              checked: b,
+              disabled: d,
+              onChange: (x) => {
                 var h;
-                C.target.checked && (e ? (h = e.onValueChange) == null || h.call(e, o) : l || m(!0));
+                x.target.checked && (e ? (h = e.onValueChange) == null || h.call(e, o) : c || v(!0), n == null || n(x));
               },
               className: "peer sr-only",
-              ...u
+              ...f
             }
           ),
           /* @__PURE__ */ r(
             "span",
             {
               "aria-hidden": !0,
-              className: b(
+              className: g(
                 "flex size-4.5 shrink-0 items-center justify-center rounded-full border border-input bg-elevated",
                 "transition-[border-color,box-shadow] duration-150 ease-out",
                 "peer-checked:border-brand",
                 "peer-focus-visible:ring-3 peer-focus-visible:ring-ring"
               ),
-              children: /* @__PURE__ */ r(v, { reducedMotion: "user", children: /* @__PURE__ */ r(
-                y.span,
+              children: /* @__PURE__ */ r(N, { reducedMotion: "user", children: /* @__PURE__ */ r(
+                w.span,
                 {
                   className: "size-2 rounded-full bg-brand",
                   initial: !1,
-                  animate: { opacity: g ? 1 : 0, scale: g ? 1 : 0.9 },
-                  transition: w
+                  animate: { opacity: b ? 1 : 0, scale: b ? 1 : 0.9 },
+                  transition: C
                 }
               ) })
             }
           ),
-          n && /* @__PURE__ */ r("span", { children: n })
+          t && /* @__PURE__ */ r("span", { children: t })
         ]
       }
     );
   }
 );
-j.displayName = "Radio";
+G.displayName = "Radio";
 export {
-  j as Radio,
-  k as RadioGroup
+  G as Radio,
+  j as RadioGroup
 };