@alpic-ai/ui 0.0.0-dev.4a35dc7 → 0.0.0-dev.6953a69

package/src/stories/tag.stories.tsx

@@ -0,0 +1,82 @@
+import type { Story } from "@ladle/react";
+import { Tag, TagCount, TagDismissible } from "../components/tag";
+
+const PlaceholderIcon = () => (
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="12" cy="12" r="10" />
+  </svg>
+);
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Text only</p>
+      <div className="flex gap-1.5">
+        <Tag>Design</Tag>
+        <Tag>Engineering</Tag>
+        <Tag>Product</Tag>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Text only + icon</p>
+      <div className="flex gap-1.5">
+        <Tag icon={<PlaceholderIcon />}>Design</Tag>
+        <Tag icon={<PlaceholderIcon />}>Engineering</Tag>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Dismissible</p>
+      <div className="flex gap-1.5">
+        <TagDismissible onDismiss={() => {}}>Olivia</TagDismissible>
+        <TagDismissible onDismiss={() => {}}>Phoenix</TagDismissible>
+        <TagDismissible onDismiss={() => {}}>Lana</TagDismissible>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Dismissible + icon</p>
+      <div className="flex gap-1.5">
+        <TagDismissible icon={<PlaceholderIcon />} onDismiss={() => {}}>
+          Label
+        </TagDismissible>
+        <TagDismissible icon={<PlaceholderIcon />} onDismiss={() => {}}>
+          Design
+        </TagDismissible>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Count</p>
+      <div className="flex gap-1.5">
+        <TagCount count={5}>Label</TagCount>
+        <TagCount count={3}>Product</TagCount>
+        <TagCount count={12}>Engineering</TagCount>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Count + icon</p>
+      <div className="flex gap-1.5">
+        <TagCount icon={<PlaceholderIcon />} count={5}>
+          Label
+        </TagCount>
+        <TagCount icon={<PlaceholderIcon />} count={3}>
+          Product
+        </TagCount>
+      </div>
+    </div>
+  </div>
+);

package/src/stories/textarea.stories.tsx

@@ -0,0 +1,60 @@
+import { Textarea } from "../components/textarea";
+
+const SECTION_HEADER = "type-text-xs text-muted-foreground font-semibold uppercase tracking-wide pt-4";
+
+export const AllVariants = () => {
+  return (
+    <div className="flex flex-col gap-6 p-8 max-w-sm">
+      <span className={SECTION_HEADER}>Default</span>
+      <Textarea id="default" placeholder="Enter a description..." />
+
+      <span className={SECTION_HEADER}>With label</span>
+      <Textarea id="with-label" label="Description" placeholder="Enter a description..." />
+
+      <span className={SECTION_HEADER}>Required + hint</span>
+      <Textarea
+        id="required-hint"
+        label="Description"
+        required
+        placeholder="Enter a description..."
+        hint="This is a hint text to help user."
+      />
+
+      <span className={SECTION_HEADER}>With tooltip</span>
+      <Textarea
+        id="with-tooltip"
+        label="Description"
+        required
+        tooltip="Briefly describe what this project is about."
+        placeholder="Enter a description..."
+      />
+
+      <span className={SECTION_HEADER}>Filled</span>
+      <Textarea
+        id="filled"
+        label="Description"
+        required
+        defaultValue="A little about the company and the team that you'll be working with."
+        hint="This is a hint text to help user."
+      />
+
+      <span className={SECTION_HEADER}>Error</span>
+      <Textarea
+        id="error"
+        label="Description"
+        required
+        placeholder="Enter a description..."
+        error="Description is required."
+      />
+
+      <span className={SECTION_HEADER}>Disabled</span>
+      <Textarea
+        id="disabled"
+        label="Description"
+        placeholder="Enter a description..."
+        hint="This is a hint text to help user."
+        disabled
+      />
+    </div>
+  );
+};

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