@alpic-ai/ui 1.160.0 → 1.162.0

package/src/stories/button.stories.tsx

@@ -2,8 +2,7 @@ import { ArrowRight, Plus, Sparkles } from "lucide-react";
 
 import { Button } from "../components/button";
 
-// Simulated states via className — matches Figma page layout:
-// variants stacked top-to-bottom, states left-to-right.
+// Hover states are simulated via className; layout matches the Figma page (variants top-to-bottom, states left-to-right).
 
 const VARIANT_LABEL = "type-text-xs text-muted-foreground w-20 shrink-0";
 const STATE_HEADER = "type-text-xs text-muted-foreground font-medium w-32 text-center";
@@ -16,7 +15,6 @@ const ICON_STATE_HEADER = "type-text-xs text-muted-foreground font-medium w-16 t
 export const AllVariants = () => {
   return (
     <div className="flex flex-col gap-3 p-8">
-      {/* ── Text buttons ────────────────────────────────────────────────── */}
       <span className={SECTION_HEADER}>Text</span>
 
       <div className={ROW}>
@@ -26,7 +24,6 @@ export const AllVariants = () => {
         <div className={STATE_HEADER}>Loading</div>
       </div>
 
-      {/* Primary */}
       <div className={ROW}>
         <span className={VARIANT_LABEL}>Primary</span>
         <div className={CELL}>
@@ -46,7 +43,6 @@ export const AllVariants = () => {
         </div>
       </div>
 
-      {/* Secondary */}
       <div className={ROW}>
         <span className={VARIANT_LABEL}>Secondary</span>
         <div className={CELL}>
@@ -66,7 +62,6 @@ export const AllVariants = () => {
         </div>
       </div>
 
-      {/* Tertiary */}
       <div className={ROW}>
         <span className={VARIANT_LABEL}>Tertiary</span>
         <div className={CELL}>
@@ -86,7 +81,6 @@ export const AllVariants = () => {
         </div>
       </div>
 
-      {/* Link color */}
       <div className={ROW}>
         <span className={VARIANT_LABEL}>Link</span>
         <div className={CELL}>
@@ -104,7 +98,6 @@ export const AllVariants = () => {
         </div>
       </div>
 
-      {/* Link gray */}
       <div className={ROW}>
         <span className={VARIANT_LABEL}>Link muted</span>
         <div className={CELL}>
@@ -122,7 +115,6 @@ export const AllVariants = () => {
         </div>
       </div>
 
-      {/* Destructive */}
       <div className={ROW}>
         <span className={VARIANT_LABEL}>Destructive</span>
         <div className={CELL}>
@@ -142,7 +134,6 @@ export const AllVariants = () => {
         </div>
       </div>
 
-      {/* ── Icon only ───────────────────────────────────────────────────── */}
       <span className={SECTION_HEADER}>Icon only</span>
 
       <div className={ROW}>
@@ -213,7 +204,6 @@ export const AllVariants = () => {
         </div>
       </div>
 
-      {/* ── Icon rounded ────────────────────────────────────────────────── */}
       <span className={SECTION_HEADER}>Icon rounded</span>
 
       <div className={ROW}>
@@ -284,7 +274,6 @@ export const AllVariants = () => {
         </div>
       </div>
 
-      {/* ── Pill ──────────────────────────────────────────────────────────── */}
       <span className={SECTION_HEADER}>Pill</span>
 
       <div className="flex items-center gap-3">
@@ -302,7 +291,6 @@ export const AllVariants = () => {
         </Button>
       </div>
 
-      {/* ── With icon (leading) ──────────────────────────────────────────── */}
       <span className={SECTION_HEADER}>With icon</span>
 
       <div className="flex items-center gap-3">
@@ -323,7 +311,6 @@ export const AllVariants = () => {
         </Button>
       </div>
 
-      {/* ── CTA (animated gradient ring) ────────────────────────────────── */}
       <span className={SECTION_HEADER}>CTA — animated</span>
       <p className="type-text-xs text-muted-foreground -mt-2 max-w-md">
         Hover to rotate the conic gradient around the border and ignite the soft halo.
@@ -345,7 +332,6 @@ export const AllVariants = () => {
         </Button>
       </div>
 
-      {/* ── asChild ─────────────────────────────────────────────────────── */}
       <span className={SECTION_HEADER}>asChild</span>
 
       <div className="flex items-center gap-3">

package/src/stories/combobox.stories.tsx

@@ -15,8 +15,6 @@ import {
 } from "../components/combobox";
 import { CommandItem } from "../components/command";
 
-/* ── With search ──────────────────────────────────────────────────────────── */
-
 const branches = ["main", "develop", "feature/auth", "feature/dashboard", "fix/login-bug", "release/v2.0"];
 
 function SearchCombobox() {
@@ -44,8 +42,6 @@ function SearchCombobox() {
   );
 }
 
-/* ── Custom trigger content (avatars + supporting text) ──────────────────── */
-
 const people = [
   { id: "olivia", name: "Olivia Rhye", handle: "@olivia" },
   { id: "phoenix", name: "Phoenix Baker", handle: "@phoenix" },
@@ -90,8 +86,6 @@ function AvatarCombobox() {
   );
 }
 
-/* ── With CommandItem action ─────────────────────────────────────────────── */
-
 const namespaces = [
   { id: "acme", name: "acme-corp" },
   { id: "personal", name: "johndoe" },
@@ -127,8 +121,6 @@ function CommandActionCombobox() {
   );
 }
 
-/* ── Grouped with headings ───────────────────────────────────────────────── */
-
 function GroupedCombobox() {
   const [value, setValue] = useState<string | null>(null);
   return (
@@ -154,8 +146,6 @@ function GroupedCombobox() {
   );
 }
 
-/* ── Multi-select with tags ───────────────────────────────────────────────── */
-
 function MultiCombobox() {
   const [values, setValues] = useState<string[]>(["phoenix", "olivia"]);
   return (
@@ -182,8 +172,6 @@ function MultiCombobox() {
   );
 }
 
-/* ── Story ────────────────────────────────────────────────────────────────── */
-
 export const AllVariants: Story = () => (
   <div className="grid grid-cols-1 gap-10 p-10 md:grid-cols-2">
     <div className="flex flex-col gap-1.5">

package/src/stories/dropdown-menu.stories.tsx

@@ -34,7 +34,6 @@ import {
 
 export const AllVariants: Story = () => (
   <div className="flex flex-col gap-10 p-10">
-    {/* Basic with icons & shortcuts */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">Default with icons &amp; shortcuts</p>
       <DropdownMenu>
@@ -122,7 +121,6 @@ export const AllVariants: Story = () => (
       </DropdownMenu>
     </div>
 
-    {/* Destructive variant */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">Destructive item</p>
       <DropdownMenu>
@@ -143,7 +141,6 @@ export const AllVariants: Story = () => (
       </DropdownMenu>
     </div>
 
-    {/* Header with avatar */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">With header (avatar group)</p>
       <DropdownMenu>
@@ -173,7 +170,6 @@ export const AllVariants: Story = () => (
       </DropdownMenu>
     </div>
 
-    {/* Disabled items */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">Disabled items</p>
       <DropdownMenu>

package/src/stories/form.stories.tsx

@@ -13,8 +13,6 @@ import {
   TextareaField,
 } from "../components/form";
 
-/* ── Types ───────────────────────────────────────────────────────────────── */
-
 interface CreateProjectForm {
   email: string;
   role: string;
@@ -43,8 +41,6 @@ const capabilities = [
   { value: "admin", label: "Admin" },
 ];
 
-/* ── Composed Form ───────────────────────────────────────────────────────── */
-
 function ComposedForm() {
   const form = useForm<CreateProjectForm>({
     defaultValues: {
@@ -141,8 +137,6 @@ function ComposedForm() {
   );
 }
 
-/* ── Story ────────────────────────────────────────────────────────────────── */
-
 export const AllVariants: Story = () => (
   <div className="flex flex-col gap-3">
     <p className="type-text-xs font-medium text-subtle-foreground uppercase tracking-wide">

package/src/stories/heatmap-chart.stories.tsx

@@ -18,7 +18,6 @@ function mulberry32(seed: number) {
   };
 }
 
-// Long-format activity rows: one record per (day, hour) with a working-hours hump.
 const ACTIVITY = (() => {
   const random = mulberry32(99);
   const rows: Array<{ day: string; hour: string; sessions: number }> = [];

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

@@ -7,7 +7,6 @@ const SECTION_HEADER = "type-text-xs font-medium text-muted-foreground uppercase
 
 export const AllVariants: Story = () => (
   <div className="flex flex-col gap-6 p-8 max-w-lg">
-    {/* Textarea with block-end addon */}
     <span className={SECTION_HEADER}>Textarea + block-end footer</span>
     <InputGroup>
       <InputGroupTextarea placeholder="Type a message…" />
@@ -21,7 +20,6 @@ export const AllVariants: Story = () => (
       </InputGroupAddon>
     </InputGroup>
 
-    {/* Inline-start addon */}
     <span className={SECTION_HEADER}>Inline-start addon (icon)</span>
     <InputGroup>
       <InputGroupAddon align="inline-start">
@@ -34,7 +32,6 @@ export const AllVariants: Story = () => (
       />
     </InputGroup>
 
-    {/* Inline-end addon */}
     <span className={SECTION_HEADER}>Inline-end addon (button)</span>
     <InputGroup>
       <input
@@ -49,7 +46,6 @@ export const AllVariants: Story = () => (
       </InputGroupAddon>
     </InputGroup>
 
-    {/* Disabled state */}
     <span className={SECTION_HEADER}>Disabled</span>
     <InputGroup>
       <InputGroupTextarea placeholder="Cannot type here…" disabled />

package/src/stories/input.stories.tsx

@@ -7,11 +7,9 @@ const SECTION_HEADER = "type-text-xs font-medium text-muted-foreground uppercase
 
 export const AllVariants: Story = () => (
   <div className="flex flex-col gap-6 p-8 max-w-sm">
-    {/* Default */}
     <span className={SECTION_HEADER}>Default</span>
     <Input id="default" placeholder="alice@example.com" />
 
-    {/* With label + hint */}
     <span className={SECTION_HEADER}>With label + hint</span>
     <Input
       id="with-label"
@@ -21,7 +19,6 @@ export const AllVariants: Story = () => (
       hint="This is a hint text to help user."
     />
 
-    {/* With tooltip */}
     <span className={SECTION_HEADER}>With tooltip</span>
     <Input
       id="with-tooltip"
@@ -31,7 +28,6 @@ export const AllVariants: Story = () => (
       placeholder="alice@example.com"
     />
 
-    {/* Error */}
     <span className={SECTION_HEADER}>Error</span>
     <Input
       id="error"
@@ -41,7 +37,6 @@ export const AllVariants: Story = () => (
       error="Please enter a valid email address."
     />
 
-    {/* Disabled */}
     <span className={SECTION_HEADER}>Disabled</span>
     <Input
       id="disabled"
@@ -51,15 +46,12 @@ export const AllVariants: Story = () => (
       disabled
     />
 
-    {/* Leading icon */}
     <span className={SECTION_HEADER}>Leading icon (email)</span>
     <Input id="leading-icon" label="Email" required placeholder="alice@example.com" leadingIcon={<Mail />} />
 
-    {/* Leading text (website) */}
     <span className={SECTION_HEADER}>Leading text</span>
     <Input id="leading-text" label="Website" required placeholder="www.example.com" leadingText="http://" />
 
-    {/* Small size */}
     <span className={SECTION_HEADER}>Small size</span>
     <Input id="sm-default" size="sm" placeholder="alice@example.com" label="Email" />
 

package/src/stories/line-chart.stories.tsx

@@ -1,4 +1,5 @@
 import type { Story } from "@ladle/react";
+import { useState } from "react";
 
 import { ChartCard } from "../components/chart-card";
 import { LineChart } from "../components/line-chart";
@@ -37,7 +38,8 @@ const genLatency = (seed: number) => {
   return Array.from({ length }, (_, index) => {
     p50 = Math.max(120, p50 + (rnd() - 0.48) * 40);
     p95 = Math.max(p50 + 200, p95 + (rnd() - 0.46) * 120);
-    return { t: hourLabel(index, length), p50: Math.round(p50), p95: Math.round(p95 * (index === 19 ? 1.7 : 1)) };
+    const spiked = Math.round(p95 * (index === 19 ? 1.7 : 1));
+    return { t: hourLabel(index, length), p50: Math.round(p50), p95: spiked, p99: Math.round(spiked * 1.6) };
   });
 };
 
@@ -64,83 +66,121 @@ const ms = (value: number) => `${value}ms`;
 const tokensSpark = tokens.map((row) => row.v);
 const latencyPeak = latency.reduce((best, row) => (row.p95 > best.p95 ? row : best));
 
-export const AllVariants: Story = () => (
-  <div className="mx-auto max-w-[1600px] p-8">
-    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
-      <ChartCard
-        palette="cyan"
-        accent="left"
-        kicker="Last 24h"
-        title="Sessions"
-        description="Full-width · left accent"
-        className="md:col-span-2 xl:col-span-3"
-      >
-        <LineChart
-          data={compare}
-          index="t"
-          series={[
-            { key: "claude", name: "Claude" },
-            { key: "chatgpt", name: "ChatGPT" },
-          ]}
-          lastValueLabel
-          legend
-          valueFormatter={nf}
-        />
-      </ChartCard>
-
-      <ChartCard palette="magenta" kicker="Last 24h" title="Output tokens" description="Single series · value flags">
-        <Stat value="1.4M" unit="tokens" delta={{ value: 8.1, direction: "up" }} sparkline={tokensSpark} />
-        <LineChart data={tokens} index="t" series={[{ key: "v", name: "tokens" }]} valueFlags valueFormatter={fmtK} />
-      </ChartCard>
-
-      <ChartCard palette="magenta" kicker="Last 24h" title="Request latency" description="p50 vs p95 · SLA band + peak">
-        <Stat value="240ms" unit="p50 · current" delta={{ value: 4.2, direction: "down", invert: true }} />
-        <LineChart
-          data={latency}
-          index="t"
-          series={[
-            { key: "p50", name: "p50" },
-            { key: "p95", name: "p95", dashed: true, color: "#9b5de5" },
-          ]}
-          referenceLine={{ y: 1000, label: "SLA 1s", band: true }}
-          markers={[{ x: latencyPeak.t, y: latencyPeak.p95, label: "peak", color: "#9b5de5" }]}
-          legend
-          valueFormatter={ms}
-        />
-      </ChartCard>
-
-      <ChartCard palette="cyan" kicker="Last 24h" title="Sessions" description="Claude vs ChatGPT · last values">
-        <LineChart
-          data={compare}
-          index="t"
-          series={[
-            { key: "claude", name: "Claude" },
-            { key: "chatgpt", name: "ChatGPT" },
-          ]}
-          lastValueLabel
-          legend
-          valueFormatter={nf}
-        />
-      </ChartCard>
-
-      <ChartCard palette="cyan" kicker="Last 24h" title="Throughput" description="Dots · stepped curve">
-        <LineChart
-          data={tokens}
-          index="t"
-          series={[{ key: "v", name: "tokens" }]}
-          curve="step"
-          dots
-          valueFormatter={fmtK}
-        />
-      </ChartCard>
-
-      <ChartCard palette="magenta" kicker="State" title="Loading" description="Mono spinner placeholder">
-        <LineChart data={[]} index="t" series={[{ key: "v", name: "tokens" }]} loading />
-      </ChartCard>
-
-      <ChartCard palette="magenta" kicker="State" title="Empty" description="No data in range">
-        <LineChart data={[]} index="t" series={[{ key: "v", name: "tokens" }]} />
-      </ChartCard>
+const percentileSeries = [
+  { key: "p95", name: "p95" },
+  { key: "p50", name: "p50" },
+  { key: "p99", name: "p99", dashed: true },
+];
+
+export const AllVariants: Story = () => {
+  const [isolated, setIsolated] = useState<string | null>(null);
+  const hiddenPercentiles = new Set(
+    isolated == null ? [] : percentileSeries.map((entry) => entry.key).filter((key) => key !== isolated),
+  );
+
+  return (
+    <div className="mx-auto max-w-[1600px] p-8">
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+        <ChartCard
+          palette="cyan"
+          accent="left"
+          kicker="Last 24h"
+          title="Sessions"
+          description="Full-width · left accent"
+          className="md:col-span-2 xl:col-span-3"
+        >
+          <LineChart
+            data={compare}
+            index="t"
+            series={[
+              { key: "claude", name: "Claude" },
+              { key: "chatgpt", name: "ChatGPT" },
+            ]}
+            lastValueLabel
+            legend
+            valueFormatter={nf}
+          />
+        </ChartCard>
+
+        <ChartCard palette="magenta" kicker="Last 24h" title="Output tokens" description="Single series · value flags">
+          <Stat value="1.4M" unit="tokens" delta={{ value: 8.1, direction: "up" }} sparkline={tokensSpark} />
+          <LineChart data={tokens} index="t" series={[{ key: "v", name: "tokens" }]} valueFlags valueFormatter={fmtK} />
+        </ChartCard>
+
+        <ChartCard
+          palette="magenta"
+          kicker="Last 24h"
+          title="Request latency"
+          description="p50 vs p95 · SLA band + peak"
+        >
+          <Stat value="240ms" unit="p50 · current" delta={{ value: 4.2, direction: "down", invert: true }} />
+          <LineChart
+            data={latency}
+            index="t"
+            series={[
+              { key: "p50", name: "p50" },
+              { key: "p95", name: "p95", dashed: true, color: "#9b5de5" },
+            ]}
+            referenceLine={{ y: 1000, label: "SLA 1s", band: true }}
+            markers={[{ x: latencyPeak.t, y: latencyPeak.p95, label: "peak", color: "#9b5de5" }]}
+            legend
+            valueFormatter={ms}
+          />
+        </ChartCard>
+
+        <ChartCard
+          palette="magenta"
+          kicker="Last 24h"
+          title="Percentiles"
+          description="Interactive legend · click to isolate"
+        >
+          <LineChart
+            data={latency}
+            index="t"
+            series={percentileSeries}
+            dots
+            legend
+            legendAlign="center"
+            lastValueLabel
+            hiddenSeries={hiddenPercentiles}
+            onLegendItemClick={(key) => setIsolated((current) => (current === key ? null : key))}
+            valueFormatter={ms}
+          />
+        </ChartCard>
+
+        <ChartCard palette="cyan" kicker="Last 24h" title="Sessions" description="Claude vs ChatGPT · last values">
+          <LineChart
+            data={compare}
+            index="t"
+            series={[
+              { key: "claude", name: "Claude" },
+              { key: "chatgpt", name: "ChatGPT" },
+            ]}
+            lastValueLabel
+            legend
+            valueFormatter={nf}
+          />
+        </ChartCard>
+
+        <ChartCard palette="cyan" kicker="Last 24h" title="Throughput" description="Dots · stepped curve">
+          <LineChart
+            data={tokens}
+            index="t"
+            series={[{ key: "v", name: "tokens" }]}
+            curve="step"
+            dots
+            valueFormatter={fmtK}
+          />
+        </ChartCard>
+
+        <ChartCard palette="magenta" kicker="State" title="Loading" description="Mono spinner placeholder">
+          <LineChart data={[]} index="t" series={[{ key: "v", name: "tokens" }]} loading />
+        </ChartCard>
+
+        <ChartCard palette="magenta" kicker="State" title="Empty" description="No data in range">
+          <LineChart data={[]} index="t" series={[{ key: "v", name: "tokens" }]} />
+        </ChartCard>
+      </div>
     </div>
-  </div>
-);
+  );
+};

package/src/stories/sidebar.stories.tsx

@@ -23,10 +23,7 @@ import {
   SidebarTrigger,
 } from "../components/sidebar";
 
-/**
- * Wraps stories so `fixed` inside SidebarProvider becomes `absolute`
- * relative to this container (via `transform: scale(1)` trick).
- */
+/** `transform: scale(1)` makes the SidebarProvider's `fixed` elements position relative to this frame. */
 function StoryFrame({ children, height = 600 }: { children: ReactNode; height?: number }) {
   return (
     <div

package/src/stories/skeleton.stories.tsx

@@ -4,7 +4,6 @@ import { Skeleton } from "../components/skeleton";
 
 export const AllVariants: Story = () => (
   <div className="flex flex-col gap-8">
-    {/* Shape variants */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">Rectangle (default)</p>
       <div className="flex flex-col gap-2">
@@ -23,7 +22,6 @@ export const AllVariants: Story = () => (
       </div>
     </div>
 
-    {/* Common compositions */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">Card placeholder</p>
       <div className="flex flex-col gap-3 rounded-lg border border-border p-4">

package/src/stories/table.stories.tsx

@@ -88,7 +88,6 @@ const PAGE_SIZE = 3;
 
 export const AllVariants: Story = () => (
   <div className="flex flex-col gap-8 p-6 bg-background max-w-4xl">
-    {/* Text-only table */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">Text cells</p>
       <Table>
@@ -115,7 +114,6 @@ export const AllVariants: Story = () => (
       </Table>
     </div>
 
-    {/* Avatar cells + checkbox */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">Avatar cells + checkbox</p>
       <Table>
@@ -148,7 +146,6 @@ export const AllVariants: Story = () => (
       </Table>
     </div>
 
-    {/* With footer */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">With caption + footer</p>
       <Table>
@@ -178,7 +175,6 @@ export const AllVariants: Story = () => (
       </Table>
     </div>
 
-    {/* Selected row state */}
     <div className="flex flex-col gap-1.5">
       <p className="type-text-xs font-medium text-subtle-foreground">Selected row state</p>
       <Table>
@@ -201,7 +197,6 @@ export const AllVariants: Story = () => (
       </Table>
     </div>
 
-    {/* Paginated table */}
     <PaginatedTableExample />
   </div>
 );

package/src/stories/tabs.stories.tsx

@@ -42,9 +42,6 @@ export const AllVariants: Story = () => {
 
   return (
     <div className="flex flex-col gap-10 p-8">
-      {/* ─── Navigation tabs ─────────────────────────────────────── */}
-
-      {/* Horizontal + line (default) */}
       <div>
         <p className={SECTION_HEADER}>Nav — horizontal, variant="line" (default)</p>
         <div className="mt-4">
@@ -61,7 +58,6 @@ export const AllVariants: Story = () => {
         </div>
       </div>
 
-      {/* Horizontal + pill */}
       <div>
         <p className={SECTION_HEADER}>Nav — horizontal, variant="pill"</p>
         <div className="mt-4">
@@ -78,7 +74,6 @@ export const AllVariants: Story = () => {
         </div>
       </div>
 
-      {/* Vertical + pill (default) */}
       <div>
         <p className={SECTION_HEADER}>Nav — vertical, variant="pill" (default)</p>
         <div className="mt-4 flex gap-6">
@@ -99,9 +94,6 @@ export const AllVariants: Story = () => {
         </div>
       </div>
 
-      {/* ─── Tabs (state-based) ────────────────────────────── */}
-
-      {/* Tabs — line */}
       <div>
         <p className={SECTION_HEADER}>Tabs — line variant</p>
         <Tabs defaultValue="all" className="mt-4">
@@ -118,7 +110,6 @@ export const AllVariants: Story = () => {
         </Tabs>
       </div>
 
-      {/* Tabs — default (horizontal) */}
       <div>
         <p className={SECTION_HEADER}>Tabs — default variant (horizontal)</p>
         <Tabs defaultValue="all" className="mt-4">
@@ -135,7 +126,6 @@ export const AllVariants: Story = () => {
         </Tabs>
       </div>
 
-      {/* Tabs — default (vertical) */}
       <div>
         <p className={SECTION_HEADER}>Tabs — default variant (vertical)</p>
         <Tabs defaultValue="overview" orientation="vertical" className="mt-4">
@@ -150,7 +140,6 @@ export const AllVariants: Story = () => {
         </Tabs>
       </div>
 
-      {/* Tabs — disabled */}
       <div>
         <p className={SECTION_HEADER}>Tabs — disabled trigger</p>
         <Tabs defaultValue="one" className="mt-4">