@rtkelly-labs/design-system 0.0.0-bootstrap.0 → 0.16.0-dev.0.37dedac

package/dist/components/Toast.js

@@ -0,0 +1,200 @@
+"use client";
+
+// src/components/Toast.tsx
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import { AlertCircle, AlertTriangle, CheckCircle2, Info } from "lucide-react";
+import { recipe } from "../lib/recipe.js";
+import { usePortalThemeAttribute } from "./portalTheme.js";
+import { Button } from "./Button.js";
+import { DEFAULT_TIMEOUT, resolveLifetime } from "./toastLifetime.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var toast = recipe({
+  slots: {
+    /*
+     * Bottom-right from `sm` up, full-width with a 16px gutter below it.
+     * `z-top` from the `--ds-layer-*` scale — the layer the dialogs use, and
+     * the top of the scale — never a literal `z-` value.
+     *
+     * The stack is a plain column, newest first, and it grows *upward* from
+     * the bottom edge: a new toast appears above the ones already there, so
+     * nothing a reader is part-way through moves when another arrives. DOM
+     * order is visual order, so Tab walks them in the order they are seen.
+     */
+    viewport: "fixed right-4 bottom-4 left-4 z-top flex flex-col gap-3 sm:left-auto sm:w-full sm:max-w-sm",
+    /*
+     * Enter and exit are `data-starting-style` / `data-ending-style`, as the
+     * dialogs' are: a short rise in, a short slide out, over `--duration-quick`
+     * and `--ease-brutalist`. The `motion-reduce` clause drops both — the
+     * toast appears and disappears in place, and is announced exactly the same,
+     * because the announcement belongs to the live region and not to the
+     * motion.
+     *
+     * `data-[limited]:hidden`: past the provider's `limit` Base UI marks the
+     * oldest toasts limited and inert rather than removing them. Hidden is the
+     * other half of that — they are queued, not visible, and come back as the
+     * ones ahead of them close.
+     */
+    root: "flex items-start gap-3 border-2 bg-surface-base p-4 font-mono transition duration-quick ease-brutalist data-[starting-style]:translate-y-2 data-[starting-style]:opacity-0 data-[ending-style]:translate-x-4 data-[ending-style]:opacity-0 data-[limited]:hidden motion-reduce:transition-none",
+    icon: "mt-0.5 h-4 w-4 shrink-0",
+    content: "flex min-w-0 flex-1 flex-col gap-1",
+    title: "font-display text-sm font-extrabold uppercase tracking-wider",
+    description: "font-mono text-sm leading-relaxed text-content-primary",
+    actions: "mt-2 flex",
+    // The dialogs' close control, at the toast's scale.
+    close: "shrink-0 border-2 border-edge-strong bg-surface-raised px-2 font-mono text-base font-bold text-content-primary transition-colors hover:bg-surface-base hover:text-accent-tertiary focus-visible:ring-2 focus-visible:ring-accent-primary"
+  },
+  variants: {
+    intent: {
+      info: { root: "border-intent-info shadow-hard-intent-info", icon: "text-intent-info", title: "text-intent-info" },
+      success: { root: "border-intent-success shadow-hard-intent-success", icon: "text-intent-success", title: "text-intent-success" },
+      warning: { root: "border-intent-warning shadow-hard-intent-warning", icon: "text-intent-warning", title: "text-intent-warning" },
+      danger: { root: "border-intent-danger shadow-hard-intent-danger", icon: "text-intent-danger", title: "text-intent-danger" }
+    }
+  },
+  defaultVariants: { intent: "info" }
+});
+var ICON = {
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertCircle,
+  danger: AlertTriangle
+};
+var ToastContext = createContext(null);
+var counter = 0;
+function nextId() {
+  counter += 1;
+  return `ds-toast-${counter}`;
+}
+function ToastItem({ item }) {
+  const intent = item.data?.intent ?? "info";
+  const action = item.data?.action;
+  const styles = toast({ intent });
+  const Icon = ICON[intent];
+  const textHidden = intent === "danger" ? true : void 0;
+  return /* @__PURE__ */ jsxs(
+    BaseToast.Root,
+    {
+      toast: item,
+      "aria-hidden": intent === "danger" ? false : void 0,
+      "data-slot": "toast",
+      "data-intent": intent,
+      className: styles.root(),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", "data-slot": "toast-icon", className: styles.icon() }),
+        /* @__PURE__ */ jsxs("div", { "data-slot": "toast-content", className: styles.content(), children: [
+          /* @__PURE__ */ jsxs(
+            BaseToast.Title,
+            {
+              "data-slot": "toast-title",
+              "aria-hidden": textHidden,
+              className: styles.title(),
+              render: /* @__PURE__ */ jsx("p", {}),
+              children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "[ " }),
+                item.title,
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " ]" })
+              ]
+            }
+          ),
+          item.description ? /* @__PURE__ */ jsx(
+            BaseToast.Description,
+            {
+              "data-slot": "toast-description",
+              "aria-hidden": textHidden,
+              className: styles.description()
+            }
+          ) : null,
+          action ? /* @__PURE__ */ jsx("div", { "data-slot": "toast-actions", className: styles.actions(), children: /* @__PURE__ */ jsx(
+            BaseToast.Action,
+            {
+              "data-slot": "toast-action",
+              render: /* @__PURE__ */ jsx(Button, { size: "sm", bracketed: true, children: action.label })
+            }
+          ) }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          BaseToast.Close,
+          {
+            "data-slot": "toast-close",
+            "aria-hidden": false,
+            "aria-label": "Dismiss notification",
+            className: styles.close(),
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+}
+function ToastList() {
+  const { toasts } = BaseToast.useToastManager();
+  return toasts.map((item) => /* @__PURE__ */ jsx(ToastItem, { item }, item.id));
+}
+var ToastProvider = forwardRef(function ToastProvider2({ children, timeout = DEFAULT_TIMEOUT, limit = 3, label = "Notifications", className, ...props }, ref) {
+  const styles = toast();
+  const portalTheme = usePortalThemeAttribute();
+  return /* @__PURE__ */ jsxs(BaseToast.Provider, { timeout, limit, children: [
+    /* @__PURE__ */ jsx(ToastBridge, { timeout, children }),
+    /* @__PURE__ */ jsx(BaseToast.Portal, { ...portalTheme, children: /* @__PURE__ */ jsx(
+      BaseToast.Viewport,
+      {
+        ref,
+        "aria-label": label,
+        "data-slot": "toast-viewport",
+        className: styles.viewport({ class: className }),
+        ...props,
+        children: /* @__PURE__ */ jsx(ToastList, {})
+      }
+    ) })
+  ] });
+});
+function ToastBridge({ timeout, children }) {
+  const { add, close } = BaseToast.useToastManager();
+  const api = useMemo(
+    () => ({
+      show(options) {
+        const id = options.id ?? nextId();
+        const intent = options.intent ?? "info";
+        const { action } = options;
+        add({
+          id,
+          title: options.title,
+          description: options.description,
+          type: intent,
+          // Base UI's two priorities are the two politeness levels.
+          priority: intent === "danger" ? "high" : "low",
+          timeout: resolveLifetime(options, timeout),
+          onClose: options.onClose,
+          data: { intent, action },
+          actionProps: action ? {
+            onClick: () => {
+              action.onClick();
+              close(id);
+            }
+          } : void 0
+        });
+        return id;
+      },
+      dismiss(id) {
+        close(id);
+      }
+    }),
+    [add, close, timeout]
+  );
+  return /* @__PURE__ */ jsx(ToastContext.Provider, { value: api, children });
+}
+function useToast() {
+  const api = useContext(ToastContext);
+  if (!api) throw new Error("useToast must be called inside a <ToastProvider>.");
+  return api;
+}
+function useOptionalToast() {
+  return useContext(ToastContext);
+}
+export {
+  ToastProvider,
+  useOptionalToast,
+  useToast
+};
+//# sourceMappingURL=Toast.js.map

package/dist/components/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Toast.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, forwardRef, useContext, useMemo } from 'react';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { Toast as BaseToast } from '@base-ui/react/toast';\nimport { AlertCircle, AlertTriangle, CheckCircle2, Info } from 'lucide-react';\nimport { recipe } from '../lib/recipe';\nimport { usePortalThemeAttribute } from './portalTheme';\nimport { Button } from './Button';\nimport { DEFAULT_TIMEOUT, resolveLifetime } from './toastLifetime';\n\n/**\n * What a toast is about — the four intents, and nothing else.\n *\n * The same four `semanticTokens.intent` names every other component uses, so a\n * toast is never coloured by hue: `danger` is whatever `--ds-intent-danger`\n * resolves to on the current Level. There is no emphasis accent here on\n * purpose — a notification that is \"the pink one\" has told nobody anything.\n *\n * A plain string union rather than anything Base UI names, so the primitive\n * stays out of the published `.d.ts`.\n */\nexport type ToastIntent = 'info' | 'success' | 'warning' | 'danger';\n\n/** The one follow-up a toast may offer — `UNDO`, `RETRY`, `VIEW`. */\nexport interface ToastActionOptions {\n  /** The button's label, written in caps at the call site as `Button`'s is. */\n  label: string;\n  /**\n   * What the action does. The toast closes itself after this runs: an action\n   * that has been taken leaves nothing to decide, and a toast still offering\n   * `UNDO` after the undo is a second chance to press it.\n   */\n  onClick: () => void;\n}\n\n/** One notification, as a caller describes it to {@link ToastApi.show}. */\nexport interface ToastOptions {\n  /**\n   * The headline, and the toast's accessible name — what a screen reader says\n   * first. Required as text, because a toast with no title announces a\n   * description with nothing to say what it is about.\n   */\n  title: string;\n  /** The detail under the title. Optional; a short toast is a better toast. */\n  description?: ReactNode;\n  /**\n   * Colour, icon and — for `danger` — how urgently it is announced. Defaults\n   * to `info`. `info`, `success` and `warning` are polite; `danger` is\n   * assertive and interrupts, which is why it is reserved for failures.\n   */\n  intent?: ToastIntent;\n  /**\n   * An optional follow-up. A toast with an action does not expire on its own\n   * unless `timeout` says so: a control that can vanish before a keyboard or\n   * screen-reader user reaches it is a control only a mouse user has.\n   */\n  action?: ToastActionOptions;\n  /**\n   * Milliseconds before the toast dismisses itself; `0` keeps it until it is\n   * dismissed. Left unset, it is the provider's `timeout` — lengthened for\n   * long text, so a toast is on screen for at least as long as it takes to\n   * read — or `0` when there is an action.\n   */\n  timeout?: number;\n  /**\n   * A stable id. Showing a toast with an id that is already on screen updates\n   * it in place and restarts its lifetime instead of stacking a duplicate —\n   * the right behaviour for \"Saving…\" becoming \"Saved\".\n   */\n  id?: string;\n  /** Called once when the toast closes, whatever closed it. */\n  onClose?: () => void;\n}\n\n/** What {@link useToast} returns. */\nexport interface ToastApi {\n  /** Show a toast. Returns its id, for `dismiss`. */\n  show: (options: ToastOptions) => string;\n  /** Dismiss one toast by id, or every toast when called with no id. */\n  dismiss: (id?: string) => void;\n}\n\nexport interface ToastProviderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {\n  /** The application. Anything below may call {@link useToast}. */\n  children?: ReactNode;\n  /**\n   * The default lifetime in milliseconds. Six seconds, rather than Base UI's\n   * five, and a floor rather than a fixed value: longer text gets longer. `0`\n   * makes every toast persist until it is dismissed.\n   */\n  timeout?: number;\n  /**\n   * How many toasts are visible at once. Past it the oldest are queued rather\n   * than dropped — hidden and inert until one ahead of them closes. Three by\n   * default: a fourth simultaneous notification is usually a sign that they\n   * should have been one.\n   */\n  limit?: number;\n  /**\n   * The region's accessible name — what a screen reader calls the landmark,\n   * and what a user pressing F6 lands on. Defaults to `Notifications`.\n   */\n  label?: string;\n  /** Merged into the region's classes, so a caller can move the stack. */\n  className?: string;\n}\n\n/**\n * The toast's own data, carried on Base UI's `data` field. Only the parts the\n * item needs to render that Base UI does not already model.\n */\ninterface ToastData {\n  intent: ToastIntent;\n  action?: ToastActionOptions;\n}\n\n/**\n * The surface. A recipe in this file rather than a shared module because\n * nothing else wears it — and nothing exports it, so `tailwind-variants`' types\n * stay out of the `.d.ts`.\n *\n * The intent classes are the same `--ds-intent-*` custom properties\n * `semanticTokens.intent` names and `NoteBlock` paints inline: a toast and the\n * note block beside it cannot disagree about what `danger` looks like.\n */\nconst toast = recipe({\n  slots: {\n    /*\n     * Bottom-right from `sm` up, full-width with a 16px gutter below it.\n     * `z-top` from the `--ds-layer-*` scale — the layer the dialogs use, and\n     * the top of the scale — never a literal `z-` value.\n     *\n     * The stack is a plain column, newest first, and it grows *upward* from\n     * the bottom edge: a new toast appears above the ones already there, so\n     * nothing a reader is part-way through moves when another arrives. DOM\n     * order is visual order, so Tab walks them in the order they are seen.\n     */\n    viewport:\n      'fixed right-4 bottom-4 left-4 z-top flex flex-col gap-3 sm:left-auto sm:w-full sm:max-w-sm',\n    /*\n     * Enter and exit are `data-starting-style` / `data-ending-style`, as the\n     * dialogs' are: a short rise in, a short slide out, over `--duration-quick`\n     * and `--ease-brutalist`. The `motion-reduce` clause drops both — the\n     * toast appears and disappears in place, and is announced exactly the same,\n     * because the announcement belongs to the live region and not to the\n     * motion.\n     *\n     * `data-[limited]:hidden`: past the provider's `limit` Base UI marks the\n     * oldest toasts limited and inert rather than removing them. Hidden is the\n     * other half of that — they are queued, not visible, and come back as the\n     * ones ahead of them close.\n     */\n    root:\n      'flex items-start gap-3 border-2 bg-surface-base p-4 font-mono '\n      + 'transition duration-quick ease-brutalist '\n      + 'data-[starting-style]:translate-y-2 data-[starting-style]:opacity-0 '\n      + 'data-[ending-style]:translate-x-4 data-[ending-style]:opacity-0 '\n      + 'data-[limited]:hidden motion-reduce:transition-none',\n    icon: 'mt-0.5 h-4 w-4 shrink-0',\n    content: 'flex min-w-0 flex-1 flex-col gap-1',\n    title: 'font-display text-sm font-extrabold uppercase tracking-wider',\n    description: 'font-mono text-sm leading-relaxed text-content-primary',\n    actions: 'mt-2 flex',\n    // The dialogs' close control, at the toast's scale.\n    close:\n      'shrink-0 border-2 border-edge-strong bg-surface-raised px-2 font-mono text-base font-bold '\n      + 'text-content-primary transition-colors hover:bg-surface-base hover:text-accent-tertiary '\n      + 'focus-visible:ring-2 focus-visible:ring-accent-primary',\n  },\n  variants: {\n    intent: {\n      info: { root: 'border-intent-info shadow-hard-intent-info', icon: 'text-intent-info', title: 'text-intent-info' },\n      success: { root: 'border-intent-success shadow-hard-intent-success', icon: 'text-intent-success', title: 'text-intent-success' },\n      warning: { root: 'border-intent-warning shadow-hard-intent-warning', icon: 'text-intent-warning', title: 'text-intent-warning' },\n      danger: { root: 'border-intent-danger shadow-hard-intent-danger', icon: 'text-intent-danger', title: 'text-intent-danger' },\n    },\n  },\n  defaultVariants: { intent: 'info' },\n});\n\n/**\n * The icon per intent, paired with colour exactly as `NoteBlock` pairs them —\n * so the same colour never wears two different icons across the two\n * components. The icon is what carries the intent for a reader who cannot\n * tell the colours apart.\n */\nconst ICON = {\n  info: Info,\n  success: CheckCircle2,\n  warning: AlertCircle,\n  danger: AlertTriangle,\n} as const;\n\nconst ToastContext = createContext<ToastApi | null>(null);\n\nlet counter = 0;\nfunction nextId(): string {\n  counter += 1;\n  return `ds-toast-${counter}`;\n}\n\n/** One toast. Unexported: toasts are created with `useToast().show`, not rendered. */\nfunction ToastItem({ item }: { item: BaseToast.Root.ToastObject<ToastData> }) {\n  const intent = item.data?.intent ?? 'info';\n  const action = item.data?.action;\n  const styles = toast({ intent });\n  const Icon = ICON[intent];\n  // A `danger` toast is announced by the `role=\"alert\"` copy Base UI renders\n  // beside the region, so its visible text must not *also* be read by the\n  // polite region it sits in. Base UI solves that by hiding the whole root\n  // until it is focused — which hides the action and the dismiss control\n  // with it, and no `aria-hidden={false}` on a descendant can undo an\n  // ancestor's. The result is tabbable buttons the tree says are not there.\n  //\n  // So the root stays exposed, and only the danger toast's text is hidden.\n  // The buttons are reachable; the words are announced once, assertively;\n  // and focusing the toast still reads its title and description, because\n  // `aria-labelledby` and `aria-describedby` name from hidden content.\n  const textHidden = intent === 'danger' ? true : undefined;\n\n  return (\n    <BaseToast.Root\n      toast={item}\n      aria-hidden={intent === 'danger' ? false : undefined}\n      data-slot=\"toast\"\n      // What the toast *is*, on the element, for a test or a consumer's\n      // selector — the classes are a rendering detail.\n      data-intent={intent}\n      className={styles.root()}\n    >\n      <Icon aria-hidden=\"true\" data-slot=\"toast-icon\" className={styles.icon()} />\n      <div data-slot=\"toast-content\" className={styles.content()}>\n        {/*\n          * `<p>`, not Base UI's default `<h2>`: a notification is not a section\n          * of the page, and a heading here would drop into the document outline\n          * wherever the toast happened to be read. The brackets are the\n          * system's typographic cue and nothing a screen reader should spell.\n          */}\n        <BaseToast.Title\n          data-slot=\"toast-title\"\n          aria-hidden={textHidden}\n          className={styles.title()}\n          render={<p />}\n        >\n          <span aria-hidden=\"true\">[ </span>\n          {item.title}\n          <span aria-hidden=\"true\"> ]</span>\n        </BaseToast.Title>\n        {item.description ? (\n          <BaseToast.Description\n            data-slot=\"toast-description\"\n            aria-hidden={textHidden}\n            className={styles.description()}\n          />\n        ) : null}\n        {/*\n          * The action sits under the text rather than beside it: beside it, a\n          * `Button` takes a third of a 384px toast and wraps the description\n          * into a column of three words a line. Below it, it is also where Tab\n          * lands next after the toast itself, before the dismiss control.\n          */}\n        {action ? (\n          <div data-slot=\"toast-actions\" className={styles.actions()}>\n            <BaseToast.Action\n              data-slot=\"toast-action\"\n              render={\n                <Button size=\"sm\" bracketed>\n                  {action.label}\n                </Button>\n              }\n            />\n          </div>\n        ) : null}\n      </div>\n      {/*\n        * `aria-hidden={false}` overrides Base UI, which hides the close\n        * control from assistive technology until the stack is hovered or\n        * focused, to keep \"Dismiss\" out of the announcement. That leaves a\n        * tabbable button hidden from the tree — axe's `aria-hidden-focus` —\n        * and unreachable to a screen reader's virtual cursor, which is how\n        * most screen-reader users would look for it. Four extra words in a\n        * polite announcement is the cheaper of the two costs.\n        */}\n      <BaseToast.Close\n        data-slot=\"toast-close\"\n        aria-hidden={false}\n        aria-label=\"Dismiss notification\"\n        className={styles.close()}\n      >\n        &times;\n      </BaseToast.Close>\n    </BaseToast.Root>\n  );\n}\n\nfunction ToastList() {\n  const { toasts } = BaseToast.useToastManager<ToastData>();\n  return toasts.map((item) => <ToastItem key={item.id} item={item} />);\n}\n\n/**\n * Transient notifications — a queue, a live region and a lifetime.\n *\n * Mount one near the root of the application. Anything below it calls\n * {@link useToast} and `show()`s a toast; nothing renders a toast directly,\n * because a toast is not a place in the layout. It is not a `Card` with\n * `position: absolute` either, and the difference is the whole component:\n *\n * ## The live region exists before anything is in it\n *\n * The provider renders its region on mount, empty. A live region inserted at\n * the same moment as its content announces nothing, so a toast system that\n * creates its container when the first toast fires has a first toast nobody\n * hears. `info`, `success` and `warning` are announced politely from that\n * region. `danger` is assertive: it is copied into a `role=\"alert\"` — the one\n * role defined to announce on insertion — so it interrupts, and it is marked\n * hidden in the polite region so it is not read twice.\n *\n * ## The lifetime yields to the reader\n *\n * Every timer pauses while the pointer is over the stack or focus is inside\n * it, and resumes when both leave — so a toast cannot expire while it is\n * being read, or out from under the pointer on its way to the action. The\n * default lifetime is a floor that long text raises, and a toast with an action\n * does not expire at all unless the caller says it should. F6 moves focus\n * into the stack from anywhere on the page, and Tab moves through the toasts\n * and their controls; Escape dismisses the focused one.\n *\n * ## The queue\n *\n * Several toasts at once stack newest first. Past `limit` the oldest are held\n * back — hidden and inert, not discarded — and return as the ones ahead of\n * them close.\n *\n * All of the above is `@base-ui/react/toast`, and this file is its only\n * wrapper: the surface, the intents and the lifetime policy are this\n * package's, the queue, timers and announcements are the primitive's.\n *\n * @example\n * ```tsx\n * <ToastProvider>\n *   <App />\n * </ToastProvider>\n *\n * const toast = useToast();\n * toast.show({ intent: 'success', title: 'Saved', description: 'Draft saved 12:04.' });\n * ```\n */\nexport const ToastProvider = forwardRef<HTMLDivElement, ToastProviderProps>(function ToastProvider(\n  { children, timeout = DEFAULT_TIMEOUT, limit = 3, label = 'Notifications', className, ...props },\n  ref,\n) {\n  const styles = toast();\n\n  const portalTheme = usePortalThemeAttribute();\n  return (\n    <BaseToast.Provider timeout={timeout} limit={limit}>\n      <ToastBridge timeout={timeout}>{children}</ToastBridge>\n      <BaseToast.Portal {...portalTheme}>\n        <BaseToast.Viewport\n          ref={ref}\n          aria-label={label}\n          data-slot=\"toast-viewport\"\n          className={styles.viewport({ class: className })}\n          {...props}\n        >\n          <ToastList />\n        </BaseToast.Viewport>\n      </BaseToast.Portal>\n    </BaseToast.Provider>\n  );\n});\n\n/**\n * Publishes {@link ToastApi} to everything below the provider.\n *\n * The API talks to the provider's store directly, through Base UI's\n * `useToastManager`, rather than through a `createToastManager()` handed to\n * the provider. That manager is an event emitter the provider subscribes to in\n * an effect — and a child's effects run before its parent's, so a component\n * that shows a toast on mount (\"Signed in\", \"Draft restored\") would emit into\n * a manager nobody was listening to yet, and the toast would silently never\n * appear. The store exists from the provider's first render, so this path has\n * no such window.\n *\n * `add` and `close` are stable store methods, so the API object only changes\n * when the provider's `timeout` does.\n */\nfunction ToastBridge({ timeout, children }: { timeout: number; children?: ReactNode }) {\n  const { add, close } = BaseToast.useToastManager<ToastData>();\n\n  const api = useMemo<ToastApi>(\n    () => ({\n      show(options) {\n        const id = options.id ?? nextId();\n        const intent = options.intent ?? 'info';\n        const { action } = options;\n        add({\n          id,\n          title: options.title,\n          description: options.description,\n          type: intent,\n          // Base UI's two priorities are the two politeness levels.\n          priority: intent === 'danger' ? 'high' : 'low',\n          timeout: resolveLifetime(options, timeout),\n          onClose: options.onClose,\n          data: { intent, action },\n          actionProps: action\n            ? {\n                onClick: () => {\n                  action.onClick();\n                  close(id);\n                },\n              }\n            : undefined,\n        });\n        return id;\n      },\n      dismiss(id) {\n        close(id);\n      },\n    }),\n    [add, close, timeout],\n  );\n\n  return <ToastContext.Provider value={api}>{children}</ToastContext.Provider>;\n}\n\n/**\n * Show and dismiss toasts. Throws outside a {@link ToastProvider}: a\n * notification with nowhere to be announced is a bug to find at the call site,\n * not a silent no-op to find in production.\n */\nexport function useToast(): ToastApi {\n  const api = useContext(ToastContext);\n  if (!api) throw new Error('useToast must be called inside a <ToastProvider>.');\n  return api;\n}\n\n/**\n * The same API, or `null` when there is no provider — for a component that\n * notifies when it can and renders regardless, like the finance console's\n * sync button in `SaaS/AdminDashboard`. Matches `useOptionalTheme`.\n */\nexport function useOptionalToast(): ToastApi | null {\n  return useContext(ToastContext);\n}\n"],"mappings":"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","names":["ToastProvider"]}

package/dist/components/Tooltip.js

@@ -0,0 +1,69 @@
+"use client";
+
+// src/components/Tooltip.tsx
+import { forwardRef } from "react";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { recipe } from "../lib/recipe.js";
+import { usePortalThemeAttribute } from "./portalTheme.js";
+import { floatingSurface } from "./floatingSurface.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var tooltip = recipe({
+  extend: floatingSurface,
+  slots: {
+    popup: "max-w-[min(20rem,var(--available-width))] px-2 py-1 text-xs font-bold uppercase tracking-wider shadow-hard-sm data-[instant]:transition-none"
+  }
+});
+var Tooltip = forwardRef(function Tooltip2({
+  content,
+  children,
+  side = "top",
+  align = "center",
+  delay = 400,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  className,
+  ...props
+}, ref) {
+  const styles = tooltip();
+  const portalTheme = usePortalThemeAttribute();
+  return /* @__PURE__ */ jsxs(
+    BaseTooltip.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: onOpenChange ? (next) => onOpenChange(next) : void 0,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx(BaseTooltip.Trigger, { delay, render: children }),
+        /* @__PURE__ */ jsx(BaseTooltip.Portal, { children: /* @__PURE__ */ jsx(
+          BaseTooltip.Positioner,
+          {
+            ...portalTheme,
+            side,
+            align,
+            sideOffset: 8,
+            collisionPadding: 8,
+            "data-slot": "tooltip-positioner",
+            className: styles.positioner(),
+            children: /* @__PURE__ */ jsx(
+              BaseTooltip.Popup,
+              {
+                ref,
+                "data-slot": "tooltip",
+                className: styles.popup({ class: className }),
+                ...props,
+                children: content
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+});
+export {
+  Tooltip
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport type { HTMLAttributes, ReactElement, ReactNode } from 'react';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { recipe } from '../lib/recipe';\nimport { usePortalThemeAttribute } from './portalTheme';\nimport { floatingSurface } from './floatingSurface';\n\n/**\n * Which side of its trigger a floating element prefers. A preference, not a\n * promise: when that side has no room the element flips to the opposite one.\n *\n * Shared by `Tooltip`, `Popover` and `Menu`. A plain string union rather than\n * Base UI's own `Side`, so the primitive stays out of the published `.d.ts`.\n */\nexport type OverlaySide = 'top' | 'bottom' | 'left' | 'right';\n\n/** How a floating element lines up along its trigger's edge. */\nexport type OverlayAlign = 'start' | 'center' | 'end';\n\nexport interface TooltipProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'content' | 'children' | 'className'> {\n  /**\n   * What the tooltip says. Short, and never the only place the information\n   * lives: a tooltip is not exposed to assistive technology and never opens\n   * on touch, so it restates the trigger's accessible name (and may add a\n   * shortcut) rather than replacing it.\n   */\n  content: ReactNode;\n  /**\n   * The trigger — one element that forwards its ref, such as `Button`. It\n   * keeps its own tag and its own accessible name; give an icon-only control\n   * an `aria-label`, which the tooltip then mirrors for sighted users.\n   */\n  children: ReactElement;\n  /** The preferred side. `top` by default; flips when there is no room. */\n  side?: OverlaySide;\n  /** Alignment along the trigger's edge. `center` by default. */\n  align?: OverlayAlign;\n  /**\n   * Milliseconds of hover before it opens. Keyboard focus opens it at once,\n   * whatever this says.\n   */\n  delay?: number;\n  /** Controlled open state. Leave unset and the tooltip manages its own. */\n  open?: boolean;\n  /** Open on first render, uncontrolled — for a story or a walkthrough. */\n  defaultOpen?: boolean;\n  /** Called with the next open state, whatever caused the change. */\n  onOpenChange?: (open: boolean) => void;\n  /** Suppress the tooltip without changing the trigger. */\n  disabled?: boolean;\n  /** Merged into the popup's classes. */\n  className?: string;\n}\n\n// A label, not a panel: the smallest shadow and the tightest box, capped at\n// 20rem or the room the positioner measured, whichever is less. `data-instant`\n// is Base UI's mark for a tooltip that replaced an adjacent one without the\n// delay — fading that one in would flash.\nconst tooltip = recipe({\n  extend: floatingSurface,\n  slots: {\n    popup:\n      'max-w-[min(20rem,var(--available-width))] px-2 py-1 text-xs font-bold uppercase tracking-wider '\n      + 'shadow-hard-sm data-[instant]:transition-none',\n  },\n});\n\n/**\n * A short visual label for a control, on hover and on keyboard focus.\n *\n * The replacement for `title=\"\"`, which a keyboard cannot reach and a theme\n * cannot style. Built on `@base-ui/react/tooltip`: the delay, the hover\n * bridge, collision flipping and the dismissal stack are the primitive's.\n *\n * A tooltip is **supplementary**. It is not announced — the trigger's own\n * accessible name is — and Base UI does not open it on touch, so an icon-only\n * control still needs an `aria-label`, and nothing a user must know may live\n * only here. Anything with content worth reading, or that a touch user\n * needs, is a {@link Popover}.\n *\n * Escape closes it, and only it: an open tooltip is the topmost surface, so a\n * `Popover` or `Modal` underneath stays open — the stack #162 established.\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Speaker notes (N)\">\n *   <Button aria-label=\"Show speaker notes\"><FileText /></Button>\n * </Tooltip>\n * ```\n */\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  {\n    content,\n    children,\n    side = 'top',\n    align = 'center',\n    delay = 400,\n    open,\n    defaultOpen,\n    onOpenChange,\n    disabled,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const styles = tooltip();\n\n  const portalTheme = usePortalThemeAttribute();\n  return (\n    <BaseTooltip.Root\n      open={open}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange ? (next) => onOpenChange(next) : undefined}\n      disabled={disabled}\n    >\n      <BaseTooltip.Trigger delay={delay} render={children} />\n      <BaseTooltip.Portal>\n        <BaseTooltip.Positioner\n          {...portalTheme}\n          side={side}\n          align={align}\n          sideOffset={8}\n          collisionPadding={8}\n          data-slot=\"tooltip-positioner\"\n          className={styles.positioner()}\n        >\n          <BaseTooltip.Popup\n            ref={ref}\n            data-slot=\"tooltip\"\n            className={styles.popup({ class: className })}\n            {...props}\n          >\n            {content}\n          </BaseTooltip.Popup>\n        </BaseTooltip.Positioner>\n      </BaseTooltip.Portal>\n    </BaseTooltip.Root>\n  );\n});\n"],"mappings":";;;AAEA,SAAS,kBAAkB;AAE3B,SAAS,WAAW,mBAAmB;AACvC,SAAS,cAAc;AACvB,SAAS,+BAA+B;AACxC,SAAS,uBAAuB;AA0G5B,SAME,KANF;AApDJ,IAAM,UAAU,OAAO;AAAA,EACrB,QAAQ;AAAA,EACR,OAAO;AAAA,IACL,OACE;AAAA,EAEJ;AACF,CAAC;AAyBM,IAAM,UAAU,WAAyC,SAASA,SACvE;AAAA,EACE;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,SAAS,QAAQ;AAEvB,QAAM,cAAc,wBAAwB;AAC5C,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAc,eAAe,CAAC,SAAS,aAAa,IAAI,IAAI;AAAA,MAC5D;AAAA,MAEA;AAAA,4BAAC,YAAY,SAAZ,EAAoB,OAAc,QAAQ,UAAU;AAAA,QACrD,oBAAC,YAAY,QAAZ,EACC;AAAA,UAAC,YAAY;AAAA,UAAZ;AAAA,YACE,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YACA,YAAY;AAAA,YACZ,kBAAkB;AAAA,YAClB,aAAU;AAAA,YACV,WAAW,OAAO,WAAW;AAAA,YAE7B;AAAA,cAAC,YAAY;AAAA,cAAZ;AAAA,gBACC;AAAA,gBACA,aAAU;AAAA,gBACV,WAAW,OAAO,MAAM,EAAE,OAAO,UAAU,CAAC;AAAA,gBAC3C,GAAG;AAAA,gBAEH;AAAA;AAAA,YACH;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Tooltip"]}

package/dist/components/TrackCard.js

@@ -0,0 +1,206 @@
+// src/components/TrackCard.tsx
+import { ArrowRight, Check, Lock } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../lib/recipe.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TrackCard = forwardRef(
+  function TrackCard2({
+    trackNumber,
+    title,
+    description,
+    items,
+    className,
+    ...props
+  }, ref) {
+    const completedCount = items.filter((i) => i.status === "completed").length;
+    const totalCount = items.length;
+    const progressPct = totalCount > 0 ? Math.round(completedCount / totalCount * 100) : 0;
+    const progressStyle = { width: `${progressPct}%` };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "track-card",
+        className: cn(
+          "border-2 border-edge-strong bg-surface-base font-mono text-content-primary shadow-hard-lg",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "track-card-header",
+              className: "flex flex-wrap items-center justify-between gap-3 border-b-2 border-edge-strong bg-surface-raised px-4 py-3",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      "data-slot": "track-card-badge",
+                      className: "px-2 py-0.5 text-xs font-black bg-accent-primary text-content-inverse",
+                      children: [
+                        "TRACK ",
+                        trackNumber
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      "data-slot": "track-card-title",
+                      className: "text-xs font-bold text-content-secondary tracking-wider",
+                      children: [
+                        "// ",
+                        title
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-slot": "track-card-stats",
+                    className: "text-xs font-bold text-content-muted",
+                    children: [
+                      completedCount,
+                      "/",
+                      totalCount,
+                      " COMPLETED (",
+                      progressPct,
+                      "%)"
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "track-card-summary",
+              className: "border-b-2 border-edge-strong bg-surface-raised/40 p-4 space-y-3",
+              children: [
+                description && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    "data-slot": "track-card-description",
+                    className: "font-sans text-sm text-content-secondary leading-relaxed",
+                    children: description
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-slot": "track-card-progress-bar",
+                      className: "h-3 w-full border border-edge-strong bg-surface-base p-0.5",
+                      children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          "data-slot": "track-card-progress-fill",
+                          className: "h-full bg-intent-success transition-all duration-500 ease-out",
+                          style: progressStyle
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[10px] text-content-muted font-bold uppercase", children: [
+                    /* @__PURE__ */ jsx("span", { children: "0% START" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      "TARGET: COMPLETE ",
+                      totalCount,
+                      " UNITS"
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { children: "100% READY" })
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "track-card-items",
+              className: "divide-y divide-edge-subtle p-2 space-y-2",
+              children: items.map((item) => {
+                const isCompleted = item.status === "completed";
+                const isCurrent = item.status === "current";
+                const isUpcoming = item.status === "upcoming";
+                const content = /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-slot": "track-card-item-row",
+                    className: cn(
+                      "group flex items-center justify-between gap-4 p-3 border border-edge-subtle transition-all duration-150",
+                      isCurrent ? "bg-surface-raised border-accent-primary shadow-hard-sm" : isCompleted ? "bg-surface-raised/80 hover:bg-surface-raised" : "bg-surface-base border-dashed hover:bg-surface-raised/40",
+                      "hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-hard-sm"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            "data-slot": "track-card-item-icon",
+                            className: cn(
+                              "w-6 h-6 shrink-0 flex items-center justify-center font-bold text-xs border",
+                              isCompleted ? "bg-intent-success border-intent-success text-content-inverse" : isCurrent ? "bg-accent-primary border-accent-primary text-content-inverse" : "border-edge-default text-content-muted"
+                            ),
+                            children: isCompleted ? /* @__PURE__ */ jsx(Check, { size: 14, strokeWidth: 3 }) : isUpcoming ? /* @__PURE__ */ jsx(Lock, { size: 12, strokeWidth: 2 }) : item.number
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: cn(
+                                  "text-xs font-bold truncate",
+                                  isCurrent ? "text-content-primary" : isCompleted ? "text-content-secondary" : "text-content-muted"
+                                ),
+                                children: item.title
+                              }
+                            ),
+                            isCurrent && /* @__PURE__ */ jsx("span", { className: "px-1.5 py-0.5 text-[9px] font-black bg-accent-secondary text-content-inverse uppercase tracking-wider", children: "ACTIVE" })
+                          ] }),
+                          item.summary && /* @__PURE__ */ jsx("p", { className: "font-sans text-xs text-content-muted line-clamp-1 mt-0.5", children: item.summary })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 shrink-0", children: [
+                        item.duration && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-content-muted font-bold", children: item.duration }),
+                        item.href ? /* @__PURE__ */ jsx(
+                          ArrowRight,
+                          {
+                            size: 14,
+                            className: "text-content-muted group-hover:text-accent-primary group-hover:translate-x-0.5 transition-all"
+                          }
+                        ) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-content-muted font-bold", children: "COMING SOON" })
+                      ] })
+                    ]
+                  }
+                );
+                if (item.href) {
+                  return /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: item.href,
+                      className: "block no-underline",
+                      children: content
+                    },
+                    item.id
+                  );
+                }
+                return /* @__PURE__ */ jsx("div", { children: content }, item.id);
+              })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TrackCard.displayName = "TrackCard";
+export {
+  TrackCard
+};
+//# sourceMappingURL=TrackCard.js.map

package/dist/components/TrackCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/TrackCard.tsx"],"sourcesContent":["import { ArrowRight, Check, Lock } from 'lucide-react';\nimport { type CSSProperties, forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '../lib/recipe';\n\nexport type TrackItemStatus = 'completed' | 'current' | 'upcoming';\n\nexport interface TrackItem {\n  /** Unique milestone identifier. */\n  id: string;\n  /** Formatted numerical index (e.g. \"01\", \"02\"). */\n  number: string;\n  /** Milestone title. */\n  title: string;\n  /** Estimated duration or word count (e.g. \"15 min\"). */\n  duration?: string;\n  /** Current completion status. */\n  status: TrackItemStatus;\n  /** Destination link for available milestone articles. */\n  href?: string;\n  /** Optional summary or key topic description. */\n  summary?: string;\n}\n\nexport interface TrackCardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Track sequence identifier (e.g. \"01\" or \"02\"). */\n  trackNumber: string | number;\n  /** Curriculum or series title (e.g. \"DISTRIBUTED LOG ARCHITECTURES\"). */\n  title: string;\n  /** Short curriculum or learning path summary. */\n  description?: string;\n  /** Ordered list of milestones in the series. */\n  items: TrackItem[];\n}\n\n/**\n * Multi-part curriculum and learning track card.\n *\n * Implements structured learning navigation with brutalist segmented progress bars,\n * numbered milestones, and hover-elevated task item rows with hard offset shadows.\n *\n * @example\n * ```tsx\n * <TrackCard\n *   trackNumber=\"01\"\n *   title=\"MINI-KAFKA ENGINE\"\n *   description=\"A comprehensive deep-dive into append-only commit logs.\"\n *   items={[\n *     { id: '1', number: '01', title: 'Segment Storage', status: 'completed' },\n *     { id: '2', number: '02', title: 'Index Memory Maps', status: 'current' },\n *   ]}\n * />\n * ```\n */\nexport const TrackCard = forwardRef<HTMLDivElement, TrackCardProps>(\n  function TrackCard(\n    {\n      trackNumber,\n      title,\n      description,\n      items,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const completedCount = items.filter((i) => i.status === 'completed').length;\n    const totalCount = items.length;\n    const progressPct =\n      totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;\n\n    const progressStyle: CSSProperties = { width: `${progressPct}%` };\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"track-card\"\n        className={cn(\n          'border-2 border-edge-strong bg-surface-base font-mono text-content-primary shadow-hard-lg',\n          className,\n        )}\n        {...props}\n      >\n        {/* Top Track Header Bar */}\n        <div\n          data-slot=\"track-card-header\"\n          className=\"flex flex-wrap items-center justify-between gap-3 border-b-2 border-edge-strong bg-surface-raised px-4 py-3\"\n        >\n          <div className=\"flex items-center gap-2.5\">\n            <span\n              data-slot=\"track-card-badge\"\n              className=\"px-2 py-0.5 text-xs font-black bg-accent-primary text-content-inverse\"\n            >\n              TRACK {trackNumber}\n            </span>\n            <span\n              data-slot=\"track-card-title\"\n              className=\"text-xs font-bold text-content-secondary tracking-wider\"\n            >\n              {'// '}\n              {title}\n            </span>\n          </div>\n          <div\n            data-slot=\"track-card-stats\"\n            className=\"text-xs font-bold text-content-muted\"\n          >\n            {completedCount}/{totalCount} COMPLETED ({progressPct}%)\n          </div>\n        </div>\n\n        {/* Description & Progress Section */}\n        <div\n          data-slot=\"track-card-summary\"\n          className=\"border-b-2 border-edge-strong bg-surface-raised/40 p-4 space-y-3\"\n        >\n          {description && (\n            <p\n              data-slot=\"track-card-description\"\n              className=\"font-sans text-sm text-content-secondary leading-relaxed\"\n            >\n              {description}\n            </p>\n          )}\n\n          {/* Brutalist Progress Bar */}\n          <div className=\"space-y-1\">\n            <div\n              data-slot=\"track-card-progress-bar\"\n              className=\"h-3 w-full border border-edge-strong bg-surface-base p-0.5\"\n            >\n              <div\n                data-slot=\"track-card-progress-fill\"\n                className=\"h-full bg-intent-success transition-all duration-500 ease-out\"\n                style={progressStyle}\n              />\n            </div>\n            <div className=\"flex justify-between text-[10px] text-content-muted font-bold uppercase\">\n              <span>0% START</span>\n              <span>TARGET: COMPLETE {totalCount} UNITS</span>\n              <span>100% READY</span>\n            </div>\n          </div>\n        </div>\n\n        {/* Track Milestones / Item Rows */}\n        <div\n          data-slot=\"track-card-items\"\n          className=\"divide-y divide-edge-subtle p-2 space-y-2\"\n        >\n          {items.map((item) => {\n            const isCompleted = item.status === 'completed';\n            const isCurrent = item.status === 'current';\n            const isUpcoming = item.status === 'upcoming';\n\n            const content = (\n              <div\n                data-slot=\"track-card-item-row\"\n                className={cn(\n                  'group flex items-center justify-between gap-4 p-3 border border-edge-subtle transition-all duration-150',\n                  isCurrent\n                    ? 'bg-surface-raised border-accent-primary shadow-hard-sm'\n                    : isCompleted\n                      ? 'bg-surface-raised/80 hover:bg-surface-raised'\n                      : 'bg-surface-base border-dashed hover:bg-surface-raised/40',\n                  'hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-hard-sm',\n                )}\n              >\n                <div className=\"flex items-center gap-3 min-w-0\">\n                  {/* Index / Status Icon */}\n                  <div\n                    data-slot=\"track-card-item-icon\"\n                    className={cn(\n                      'w-6 h-6 shrink-0 flex items-center justify-center font-bold text-xs border',\n                      isCompleted\n                        ? 'bg-intent-success border-intent-success text-content-inverse'\n                        : isCurrent\n                          ? 'bg-accent-primary border-accent-primary text-content-inverse'\n                          : 'border-edge-default text-content-muted',\n                    )}\n                  >\n                    {isCompleted ? (\n                      <Check size={14} strokeWidth={3} />\n                    ) : isUpcoming ? (\n                      <Lock size={12} strokeWidth={2} />\n                    ) : (\n                      item.number\n                    )}\n                  </div>\n\n                  <div className=\"min-w-0\">\n                    <div className=\"flex items-center gap-2\">\n                      <span\n                        className={cn(\n                          'text-xs font-bold truncate',\n                          isCurrent\n                            ? 'text-content-primary'\n                            : isCompleted\n                              ? 'text-content-secondary'\n                              : 'text-content-muted',\n                        )}\n                      >\n                        {item.title}\n                      </span>\n                      {isCurrent && (\n                        <span className=\"px-1.5 py-0.5 text-[9px] font-black bg-accent-secondary text-content-inverse uppercase tracking-wider\">\n                          ACTIVE\n                        </span>\n                      )}\n                    </div>\n                    {item.summary && (\n                      <p className=\"font-sans text-xs text-content-muted line-clamp-1 mt-0.5\">\n                        {item.summary}\n                      </p>\n                    )}\n                  </div>\n                </div>\n\n                <div className=\"flex items-center gap-3 shrink-0\">\n                  {item.duration && (\n                    <span className=\"text-[11px] text-content-muted font-bold\">\n                      {item.duration}\n                    </span>\n                  )}\n                  {item.href ? (\n                    <ArrowRight\n                      size={14}\n                      className=\"text-content-muted group-hover:text-accent-primary group-hover:translate-x-0.5 transition-all\"\n                    />\n                  ) : (\n                    <span className=\"text-[10px] text-content-muted font-bold\">\n                      COMING SOON\n                    </span>\n                  )}\n                </div>\n              </div>\n            );\n\n            if (item.href) {\n              return (\n                <a\n                  key={item.id}\n                  href={item.href}\n                  className=\"block no-underline\"\n                >\n                  {content}\n                </a>\n              );\n            }\n\n            return <div key={item.id}>{content}</div>;\n          })}\n        </div>\n      </div>\n    );\n  },\n);\n\nTrackCard.displayName = 'TrackCard';\n"],"mappings":"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","names":["TrackCard"]}