@elabs-ai/components-ui 4.1.0 → 5.0.0

package/src/components/input/input.stories.tsx

@@ -129,6 +129,21 @@ export const InAmbientTextContainer: Story = {
       );
     };
 
+    /*
+     * `Input` animates its colour, and reduced motion only shortens that to
+     * 0.01ms: until the browser draws its next frame, a read straight after a
+     * flip still returns the previous theme's ink. Measure the resting colour.
+     * A transition that a newer one replaces rejects instead of finishing, so
+     * wait until none is left rather than for the first batch.
+     */
+    const settle = async () => {
+      for (;;) {
+        const running = [reference, nested, muted].flatMap((input) => input.getAnimations());
+        if (running.length === 0) return;
+        await Promise.allSettled(running.map((animation) => animation.finished));
+      }
+    };
+
     const host = themeHost(nested);
     const original = host.getAttribute("data-theme");
     /*
@@ -148,11 +163,13 @@ export const InAmbientTextContainer: Story = {
     try {
       host.setAttribute("data-theme", "light");
       await assertThemeApplied("light");
+      await settle();
       const lightInk = getComputedStyle(nested).color;
       await assertMatchesReference();
 
       host.setAttribute("data-theme", "dark");
       await assertThemeApplied("dark");
+      await settle();
       await assertMatchesReference();
       // The two themes must actually resolve to different ink, or "checked in
       // both themes" is a claim about an attribute nobody read.

package/src/components/input/input.tsx

@@ -12,12 +12,16 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       ref={ref}
       type={type}
       className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-background text-foreground px-3 py-1 text-sm shadow-sm transition-[color,background-color,border-color,box-shadow] duration-fast ease-standard",
+        "flex h-control w-full rounded-control border border-input bg-input-background text-foreground px-3 py-1 text-body shadow-input transition-[color,background-color,border-color,box-shadow] duration-fast ease-standard",
         "placeholder:text-muted-foreground",
-        "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted disabled:border-border",
+        "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:border-input-focus",
+        // One disabled mechanism (opacity fade), matching every `Button`
+        // variant — `disabled:bg-muted` used to also fire here, stacking a
+        // fill swap on top of the fade (#286); `disabled:border-border` stays,
+        // it is the separate/subtle "not editable" edge, not a fill.
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:border-border",
         "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive",
-        "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+        "file:border-0 file:bg-transparent file:text-body file:font-medium",
         className,
       )}
       {...props}

package/src/components/input-group/input-group.stories.tsx

@@ -150,12 +150,49 @@ export const CompoundFocusIndicator: Story = {
 };
 
 /**
- * `--tw-ring-shadow` is a `0 0 0 calc(<offset> + <width>) <colour>` string; the
- * painted reach is that `calc`. Reading it (rather than `boxShadow`) keeps the
- * measurement independent of whatever elevation rung the element also carries.
+ * The compound ring's outer reach, in pixels.
+ *
+ * Since ADR 0027 Amendment 2 (commit 779c040b), `--tw-ring-shadow` is a
+ * three-segment composite (`@utility focus-ring-static`, themes.css) whose
+ * SPECIFIED value keeps its nested `var(--focus-ring-offset)` /
+ * `var(--focus-ring-width)` references literal when read directly via
+ * `getPropertyValue("--tw-ring-shadow")` — custom-property computed values do
+ * not substitute var()s referencing other custom properties, so the old
+ * `calc(<offset> + <width>)` regex never matches the new shape and always
+ * reported a false `0`. `getComputedStyle().boxShadow`, by contrast, is a
+ * genuine standard property: its computed value fully resolves every
+ * `var()`/`calc()`, elevation rung included. The ring is always the widest
+ * NON-inset layer in that resolved list — the "gap" layer only reaches
+ * `offset`, the elevation rungs (`shadow-input` et al.) carry zero spread,
+ * and only the ring layer reaches `offset + width` (+ any call-site
+ * `ring-offset-*`) — so its spread is the measurement this helper returns.
  */
 function ringSpread(style: CSSStyleDeclaration): number {
-  const shadow = style.getPropertyValue("--tw-ring-shadow");
-  const match = /calc\(\s*([\d.]+)px\s*\+\s*([\d.]+)px\s*\)/.exec(shadow);
-  return match ? parseFloat(match[1]) + parseFloat(match[2]) : 0;
+  const layers = splitShadowLayers(style.boxShadow);
+  const spreads = layers
+    .filter((layer) => !/\binset\b/.test(layer))
+    .map((layer) => {
+      const lengths = [...layer.matchAll(/(-?[\d.]+)px/g)].map((match) => Number(match[1]));
+      return lengths.length ? lengths[lengths.length - 1]! : 0;
+    });
+  return spreads.length ? Math.max(...spreads) : 0;
+}
+
+/** Split a computed `box-shadow` into its comma-separated layers, ignoring commas nested inside a colour function's parens (`color(srgb 0 0 0 / 0.1)`, `oklch(…)`). */
+function splitShadowLayers(shadowValue: string): string[] {
+  const layers: string[] = [];
+  let depth = 0;
+  let current = "";
+  for (const char of shadowValue) {
+    if (char === "(") depth += 1;
+    if (char === ")") depth -= 1;
+    if (char === "," && depth === 0) {
+      layers.push(current.trim());
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  if (current.trim()) layers.push(current.trim());
+  return layers;
 }

package/src/components/input-group/input-group.tsx

@@ -7,11 +7,11 @@ import { Textarea } from "../textarea";
 
 export const inputGroupVariants = cva(
   cn(
-    "group/input-group relative flex w-full flex-wrap items-center rounded-md transition-[color,box-shadow] duration-fast ease-standard",
+    "group/input-group relative flex w-full flex-wrap items-center rounded-control transition-[color,box-shadow] duration-fast ease-standard",
     // Grow to fit a textarea even when it's nested (e.g. wrapped in a
     // `display:contents` body like PromptInputBody). `:has(>textarea)`
     // misses through that wrapper, so match any descendant textarea.
-    "h-9 has-[textarea]:h-auto",
+    "h-control has-[textarea]:h-auto",
     // The compound indicator is the wrapper's, not the control's — the control
     // is borderless and full-bleed, so a ring around IT would draw inside the
     // well. `focus-ring-static` paints BOTH layers; the only geometry knob is
@@ -28,8 +28,11 @@ export const inputGroupVariants = cva(
     variants: {
       variant: {
         // The form-field look: the strong `--input` boundary is the field's
-        // sole structural cue, so it stays on the strong rung.
-        outline: "border border-input shadow-sm",
+        // sole structural cue, so it stays on the strong rung. Focus lands on
+        // the inner control, not this wrapper, so the border swap reads its
+        // `has-[:focus-visible]` state instead of its own `focus-visible`.
+        outline:
+          "border border-input shadow-input has-[[data-slot=input-group-control]:focus-visible]:border-input-focus",
         // The composer look (#194, research 08 §C.1/§D): a soft fill with the
         // focus-within ring carrying focus — NO hard border. Separation comes
         // from the fill (the chat footer already draws its own `border-t`).
@@ -68,7 +71,7 @@ export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function I
 });
 
 export const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text items-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4",
+  "flex h-auto cursor-text items-center gap-2 py-1.5 text-body font-medium text-muted-foreground select-none [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
       align: {
@@ -98,7 +101,7 @@ export const InputGroupAddon = forwardRef<
   );
 });
 
-const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-body shadow-none", {
   variants: {
     size: {
       xs: "h-6 gap-1 rounded-sm px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
@@ -137,7 +140,7 @@ export const InputGroupText = forwardRef<HTMLSpanElement, ComponentProps<"span">
       <span
         ref={ref}
         className={cn(
-          "flex items-center gap-2 text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4",
+          "flex items-center gap-2 text-body text-muted-foreground [&_svg:not([class*='size-'])]:size-4",
           className,
         )}
         {...props}

package/src/components/input-otp/input-otp.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useContext, type ComponentPropsWithoutRef, type ElementRef } from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Minus } from "lucide-react";
@@ -41,12 +43,14 @@ export const InputOTPSlot = forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex size-9 items-center justify-center border-y border-e border-input text-sm shadow-sm transition-[color,border-color,box-shadow] duration-fast ease-standard first:rounded-s-md first:border-s last:rounded-e-md",
+        "relative flex size-9 items-center justify-center border-y border-e border-input text-body shadow-sm transition-[color,border-color,box-shadow] duration-fast ease-standard first:rounded-s-md first:border-s last:rounded-e-md",
         // The OTP slot IS the field's focus indicator: the real focused element is
         // InputOTP's visually-hidden <input>, and `isActive` is the caret's slot. It
         // therefore carries the compound indicator (#67) — the state is JS-driven, so
-        // it is the `-static` flavour rather than a `:focus-visible` one.
-        isActive && "z-10 focus-ring-static",
+        // it is the `-static` flavour rather than a `:focus-visible` one, and the
+        // border-color swap is a plain class (twMerge drops `border-input` for it)
+        // rather than a `focus-visible:` variant.
+        isActive && "z-10 focus-ring-static border-input-focus",
         className,
       )}
       {...props}

package/src/components/install-tabs/index.ts

@@ -0,0 +1,8 @@
+export {
+  InstallTabs,
+  DEFAULT_INSTALL_TABS_LABELS,
+  type InstallTabsSelectOption,
+  type InstallTabsHostTab,
+  type InstallTabsLabels,
+  type InstallTabsProps,
+} from "./install-tabs";

package/src/components/install-tabs/install-tabs.stories.tsx

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import { InstallTabs, type InstallTabsHostTab, type InstallTabsSelectOption } from "./install-tabs";
+
+const PACKAGE_OPTIONS: InstallTabsSelectOption[] = [
+  {
+    id: "ai-assistant",
+    label: "AI assistant",
+    command: "pnpm add @elabs-ai/components-ai @elabs-ai/components-ui",
+  },
+  {
+    id: "dashboard",
+    label: "Dashboard",
+    command:
+      "pnpm add @elabs-ai/components-charts @elabs-ai/components-data @elabs-ai/components-ui",
+  },
+  {
+    id: "data-app",
+    label: "Data app",
+    command: "pnpm add @elabs-ai/components-data @elabs-ai/components-ui",
+  },
+];
+
+const BLOCK_OPTIONS: InstallTabsSelectOption[] = [
+  {
+    id: "kpi-movers-01",
+    label: "KPI movers",
+    command: "npx shadcn@latest add https://elabs-ai.com/r/kpi-movers-01.json",
+  },
+  {
+    id: "app-shell",
+    label: "App shell",
+    command: "npx shadcn@latest add https://elabs-ai.com/r/app-shell.json",
+  },
+];
+
+const HOST_TABS: InstallTabsHostTab[] = [
+  {
+    id: "claude-code",
+    label: "Claude Code",
+    commands: [
+      { label: "Add marketplace", command: "/plugin marketplace add mreimitz/elabs-components" },
+      { label: "Install plugin", command: "/plugin install brand-ui" },
+    ],
+  },
+  {
+    id: "cursor",
+    label: "Cursor",
+    commands: [
+      {
+        label: "Add MCP server",
+        command: '{ "mcpServers": { "brand-ui": { "url": "https://elabs-ai.com/mcp" } } }',
+      },
+    ],
+  },
+];
+
+const PROMPT =
+  "Use brand-ui — MCP at https://elabs-ai.com/mcp, docs at /llms.txt — to build a dashboard for our support queue.";
+
+const meta = {
+  title: "Display/InstallTabs",
+  component: InstallTabs,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Every way to bring brand-ui into a project, one tab strip: `pnpm add` by archetype, copy-own a registry block, per-host MCP setup, and an agent prompt.",
+      },
+    },
+  },
+  args: {
+    packageOptions: PACKAGE_OPTIONS,
+    blockOptions: BLOCK_OPTIONS,
+    hostTabs: HOST_TABS,
+    prompt: PROMPT,
+    onCommandCopy: fn(),
+    onPromptCopy: fn(),
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-2xl">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof InstallTabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/** Picking the "dashboard" archetype swaps the shown command. */
+export const ArchetypeSelected: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("combobox", { name: "Archetype" }));
+    const body = within(canvasElement.ownerDocument.body);
+    await userEvent.click(await body.findByRole("option", { name: "Dashboard" }));
+    await waitFor(() =>
+      expect(
+        canvas.getByText(
+          "pnpm add @elabs-ai/components-charts @elabs-ai/components-data @elabs-ai/components-ui",
+        ),
+      ).toBeInTheDocument(),
+    );
+  },
+};
+
+/** The `Copy-own` tab lists blocks and shows the `shadcn add` command for the selection. */
+export const CopyOwnTab: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("tab", { name: "Copy-own" }));
+    await waitFor(() =>
+      expect(
+        canvas.getByText("npx shadcn@latest add https://elabs-ai.com/r/kpi-movers-01.json"),
+      ).toBeInTheDocument(),
+    );
+  },
+};
+
+/** A host tab shows its own commands, top to bottom. */
+export const HostTab: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("tab", { name: "Cursor" }));
+    await waitFor(() =>
+      expect(
+        canvas.getByText('{ "mcpServers": { "brand-ui": { "url": "https://elabs-ai.com/mcp" } } }'),
+      ).toBeInTheDocument(),
+    );
+  },
+};
+
+/** The prompt tab's text is read-only and contains the MCP URL and `/llms.txt`. */
+export const PromptTab: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("tab", { name: "Prompt" }));
+    const textbox = canvas.getByDisplayValue(PROMPT);
+    await expect(textbox).toHaveAttribute("readonly");
+  },
+};

package/src/components/install-tabs/install-tabs.test.tsx

@@ -0,0 +1,120 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { InstallTabs, type InstallTabsHostTab, type InstallTabsSelectOption } from "./install-tabs";
+
+const PACKAGE_OPTIONS: InstallTabsSelectOption[] = [
+  { id: "ai-assistant", label: "AI assistant", command: "pnpm add @elabs-ai/components-ai" },
+  { id: "dashboard", label: "Dashboard", command: "pnpm add @elabs-ai/components-charts" },
+];
+
+const BLOCK_OPTIONS: InstallTabsSelectOption[] = [
+  { id: "kpi-movers-01", label: "KPI movers", command: "npx shadcn@latest add kpi-movers-01.json" },
+];
+
+const HOST_TABS: InstallTabsHostTab[] = [
+  {
+    id: "claude-code",
+    label: "Claude Code",
+    commands: [{ label: "Install plugin", command: "/plugin install brand-ui" }],
+  },
+];
+
+const PROMPT = "Use brand-ui — MCP at https://elabs-ai.com/mcp, docs at /llms.txt.";
+
+describe("InstallTabs", () => {
+  it("renders its data-slot and defaults to the packages tab", () => {
+    const { container } = render(
+      <InstallTabs
+        packageOptions={PACKAGE_OPTIONS}
+        blockOptions={BLOCK_OPTIONS}
+        hostTabs={HOST_TABS}
+        prompt={PROMPT}
+      />,
+    );
+    expect(container.querySelector('[data-slot="install-tabs"]')).not.toBeNull();
+    expect(screen.getByText("pnpm add @elabs-ai/components-ai")).toBeInTheDocument();
+  });
+
+  it("honours a controlled package value", () => {
+    render(
+      <InstallTabs
+        packageOptions={PACKAGE_OPTIONS}
+        blockOptions={BLOCK_OPTIONS}
+        hostTabs={HOST_TABS}
+        prompt={PROMPT}
+        packageValue="dashboard"
+        onPackageValueChange={() => {}}
+      />,
+    );
+    expect(screen.getByText("pnpm add @elabs-ai/components-charts")).toBeInTheDocument();
+  });
+
+  it("switches to the copy-own tab and shows the block command", async () => {
+    const user = userEvent.setup();
+    render(
+      <InstallTabs
+        packageOptions={PACKAGE_OPTIONS}
+        blockOptions={BLOCK_OPTIONS}
+        hostTabs={HOST_TABS}
+        prompt={PROMPT}
+      />,
+    );
+    await user.click(screen.getByRole("tab", { name: "Copy-own" }));
+    expect(await screen.findByText("npx shadcn@latest add kpi-movers-01.json")).toBeInTheDocument();
+  });
+
+  it("switches to a host tab and shows its commands", async () => {
+    const user = userEvent.setup();
+    render(
+      <InstallTabs
+        packageOptions={PACKAGE_OPTIONS}
+        blockOptions={BLOCK_OPTIONS}
+        hostTabs={HOST_TABS}
+        prompt={PROMPT}
+      />,
+    );
+    await user.click(screen.getByRole("tab", { name: "Claude Code" }));
+    expect(await screen.findByText("/plugin install brand-ui")).toBeInTheDocument();
+  });
+
+  it("shows the read-only prompt on the prompt tab", async () => {
+    const user = userEvent.setup();
+    render(
+      <InstallTabs
+        packageOptions={PACKAGE_OPTIONS}
+        blockOptions={BLOCK_OPTIONS}
+        hostTabs={HOST_TABS}
+        prompt={PROMPT}
+      />,
+    );
+    await user.click(screen.getByRole("tab", { name: "Prompt" }));
+    expect(await screen.findByDisplayValue(PROMPT)).toHaveAttribute("readonly");
+  });
+
+  it("copies the prompt to the clipboard", async () => {
+    // `userEvent.setup()` attaches its OWN clipboard stub to `navigator` — define ours
+    // AFTER setup, or `userEvent`'s overwrites it and the assertion below sees 0 calls.
+    const user = userEvent.setup();
+    const writeText = vi.fn(() => Promise.resolve());
+    Object.defineProperty(navigator, "clipboard", {
+      value: { writeText },
+      configurable: true,
+      writable: true,
+    });
+    const onPromptCopy = vi.fn();
+    render(
+      <InstallTabs
+        packageOptions={PACKAGE_OPTIONS}
+        blockOptions={BLOCK_OPTIONS}
+        hostTabs={HOST_TABS}
+        prompt={PROMPT}
+        onPromptCopy={onPromptCopy}
+      />,
+    );
+    await user.click(screen.getByRole("tab", { name: "Prompt" }));
+    fireEvent.click(await screen.findByRole("button", { name: "Copy prompt" }));
+    await waitFor(() => expect(writeText).toHaveBeenCalledWith(PROMPT));
+    expect(onPromptCopy).toHaveBeenCalledWith(true);
+  });
+});