@alpic-ai/ui 0.0.0-dev.4a35dc7 → 0.0.0-dev.85c8341

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

@@ -0,0 +1,142 @@
+import { Bold, Bug, CircleX, Info, Italic, Strikethrough, TriangleAlert, Underline } from "lucide-react";
+
+import { ToggleGroup, ToggleGroupItem } from "../components/toggle-group";
+
+const SECTION_HEADER = "type-text-xs text-muted-foreground font-semibold uppercase tracking-wide pt-4";
+const ROW = "flex items-center gap-4";
+const LABEL = "type-text-xs text-muted-foreground w-20 shrink-0";
+
+export const AllVariants = () => (
+  <div className="flex flex-col gap-4 p-8">
+    {/* ── Default variant ──────────────────────────────────────────────── */}
+    <span className={SECTION_HEADER}>Default variant</span>
+
+    <div className={ROW}>
+      <span className={LABEL}>Single</span>
+      <ToggleGroup type="single" defaultValue="bold">
+        <ToggleGroupItem value="bold" aria-label="Bold">
+          <Bold />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="italic" aria-label="Italic">
+          <Italic />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="underline" aria-label="Underline">
+          <Underline />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="strikethrough" aria-label="Strikethrough">
+          <Strikethrough />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+
+    <div className={ROW}>
+      <span className={LABEL}>Multiple</span>
+      <ToggleGroup type="multiple" defaultValue={["bold", "italic"]}>
+        <ToggleGroupItem value="bold" aria-label="Bold">
+          <Bold />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="italic" aria-label="Italic">
+          <Italic />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="underline" aria-label="Underline">
+          <Underline />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+
+    {/* ── Outline variant ─────────────────────────────────────────────── */}
+    <span className={SECTION_HEADER}>Outline variant</span>
+
+    <div className={ROW}>
+      <span className={LABEL}>Single</span>
+      <ToggleGroup variant="outline" type="single" defaultValue="bold">
+        <ToggleGroupItem value="bold" aria-label="Bold">
+          <Bold />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="italic" aria-label="Italic">
+          <Italic />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="underline" aria-label="Underline">
+          <Underline />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+
+    <div className={ROW}>
+      <span className={LABEL}>Multiple</span>
+      <ToggleGroup variant="outline" type="multiple" defaultValue={["bold", "italic"]}>
+        <ToggleGroupItem value="bold" aria-label="Bold">
+          <Bold />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="italic" aria-label="Italic">
+          <Italic />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="underline" aria-label="Underline">
+          <Underline />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+
+    {/* ── Sizes ───────────────────────────────────────────────────────── */}
+    <span className={SECTION_HEADER}>Sizes</span>
+
+    <div className={ROW}>
+      <span className={LABEL}>Default</span>
+      <ToggleGroup variant="outline" type="single" defaultValue="bold">
+        <ToggleGroupItem value="bold" aria-label="Bold">
+          <Bold />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="italic" aria-label="Italic">
+          <Italic />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+
+    <div className={ROW}>
+      <span className={LABEL}>Small</span>
+      <ToggleGroup variant="outline" type="single" size="sm" defaultValue="bold">
+        <ToggleGroupItem value="bold" aria-label="Bold">
+          <Bold />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="italic" aria-label="Italic">
+          <Italic />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+
+    {/* ── Disabled ────────────────────────────────────────────────────── */}
+    <span className={SECTION_HEADER}>Disabled</span>
+
+    <div className={ROW}>
+      <span className={LABEL}>Group</span>
+      <ToggleGroup variant="outline" type="single" disabled>
+        <ToggleGroupItem value="bold" aria-label="Bold">
+          <Bold />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="italic" aria-label="Italic">
+          <Italic />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+
+    {/* ── Real-world: Log level filter ────────────────────────────────── */}
+    <span className={SECTION_HEADER}>Log level filter (real-world)</span>
+
+    <div className={ROW}>
+      <ToggleGroup variant="outline" type="multiple" defaultValue={["INFO", "ERROR"]}>
+        <ToggleGroupItem value="INFO" className="data-[state=on]:bg-code-foreground/10" aria-label="Info">
+          <Info className="text-code-foreground" />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="DEBUG" className="data-[state=on]:bg-code-debug/10" aria-label="Debug">
+          <Bug className="text-code-debug" />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="WARNING" className="data-[state=on]:bg-code-warning/10" aria-label="Warning">
+          <TriangleAlert className="text-code-warning" />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="ERROR" className="data-[state=on]:bg-code-error/10" aria-label="Error">
+          <CircleX className="text-code-error" />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  </div>
+);

package/src/stories/tooltip-icon-button.stories.tsx

@@ -0,0 +1,59 @@
+import type { Story } from "@ladle/react";
+import { Heart, Plus, Settings, Trash2, X } from "lucide-react";
+import { TooltipIconButton } from "../components/tooltip-icon-button";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-10 p-10">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Default (tertiary, icon)</p>
+      <div className="flex gap-2">
+        <TooltipIconButton tooltip="Settings">
+          <Settings />
+        </TooltipIconButton>
+        <TooltipIconButton tooltip="Add">
+          <Plus />
+        </TooltipIconButton>
+        <TooltipIconButton tooltip="Favorite">
+          <Heart />
+        </TooltipIconButton>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Rounded</p>
+      <div className="flex gap-2">
+        <TooltipIconButton tooltip="Close" size="icon-rounded">
+          <X />
+        </TooltipIconButton>
+        <TooltipIconButton tooltip="Delete" size="icon-rounded" variant="destructive">
+          <Trash2 />
+        </TooltipIconButton>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Tooltip sides</p>
+      <div className="flex gap-6">
+        <TooltipIconButton tooltip="Top" side="top">
+          <Settings />
+        </TooltipIconButton>
+        <TooltipIconButton tooltip="Right" side="right">
+          <Settings />
+        </TooltipIconButton>
+        <TooltipIconButton tooltip="Bottom" side="bottom">
+          <Settings />
+        </TooltipIconButton>
+        <TooltipIconButton tooltip="Left" side="left">
+          <Settings />
+        </TooltipIconButton>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Disabled</p>
+      <TooltipIconButton tooltip="Disabled action" disabled>
+        <Settings />
+      </TooltipIconButton>
+    </div>
+  </div>
+);

package/src/stories/tooltip.stories.tsx

@@ -0,0 +1,54 @@
+import type { Story } from "@ladle/react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../components/tooltip";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-10 p-10">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Default (with arrow)</p>
+      <Tooltip defaultOpen>
+        <TooltipTrigger asChild>
+          <button type="button" className="w-fit rounded-md border px-3 py-2 type-text-sm">
+            Hover me
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>This is a tooltip</TooltipContent>
+      </Tooltip>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Side: right</p>
+      <Tooltip defaultOpen>
+        <TooltipTrigger asChild>
+          <button type="button" className="w-fit rounded-md border px-3 py-2 type-text-sm">
+            Right tooltip
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="right">Tooltip on the right</TooltipContent>
+      </Tooltip>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Side: bottom</p>
+      <Tooltip defaultOpen>
+        <TooltipTrigger asChild>
+          <button type="button" className="w-fit rounded-md border px-3 py-2 type-text-sm">
+            Bottom tooltip
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">Tooltip on the bottom</TooltipContent>
+      </Tooltip>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Side: left</p>
+      <Tooltip defaultOpen>
+        <TooltipTrigger asChild>
+          <button type="button" className="w-fit rounded-md border px-3 py-2 type-text-sm">
+            Left tooltip
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="left">Tooltip on the left</TooltipContent>
+      </Tooltip>
+    </div>
+  </div>
+);

package/README.md

@@ -1,33 +0,0 @@
-# @alpic-ai/ui
-
-Alpic's shared design system — React 19 components built on Radix UI, Tailwind CSS v4, and CVA.
-
-## Install
-
-```bash
-pnpm add @alpic-ai/ui
-```
-
-Peer dependencies: `react`, `react-dom`, `tailwindcss@^4`, `lucide-react`, `tw-animate-css`, `sonner`.
-
-## Setup
-
-Add to your main CSS:
-
-```css
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "@alpic-ai/ui/theme";
-```
-
-## Usage
-
-```tsx
-import { Button } from "@alpic-ai/ui/components/button";
-import { Card, CardContent } from "@alpic-ai/ui/components/card";
-import { cn } from "@alpic-ai/ui/lib/cn";
-```
-
-## Components
-
-accordion, alert, avatar, badge, breadcrumb, button, card, checkbox, collapsible, combobox, command, copyable, description-list, dialog, dropdown-menu, input, input-group, label, pagination, popover, radio-group, scroll-area, select, separator, sheet, sidebar, skeleton, sonner, spinner, status-dot, switch, table, tabs, tag, textarea, toggle-group, tooltip