@alpic-ai/ui 0.0.0 → 1.111.0

package/src/components/sidebar.tsx

@@ -316,21 +316,19 @@ function SidebarHeader({ className, icon, title, children, ...props }: SidebarHe
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2 group-data-[collapsible=icon]:items-center", className)}
+      className={cn("flex flex-col gap-2 p-2", className)}
       {...props}
     >
-      <div className="flex h-8 items-center gap-2 px-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:px-0">
+      <div className="flex h-8 items-center gap-2 px-3">
         <div className="relative shrink-0">
           <span className="transition-opacity group-data-[collapsible=icon]:group-hover:opacity-0">{icon}</span>
           <div className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-data-[collapsible=icon]:group-hover:opacity-100">
-            <SidebarTrigger className="!size-4 !p-0" />
+            <SidebarTrigger />
           </div>
         </div>
-        {title && (
-          <span className="text-foreground text-md min-w-0 truncate font-medium group-data-[collapsible=icon]:hidden">
-            {title}
-          </span>
-        )}
+        <span className="text-foreground text-md min-w-0 truncate font-medium group-data-[collapsible=icon]:hidden">
+          {title}
+        </span>
         <SidebarTrigger className="ml-auto shrink-0 group-data-[collapsible=icon]:hidden" />
       </div>
       {children}
@@ -376,7 +374,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="sidebar-group"
       data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      className={cn("relative flex w-full min-w-0 flex-col", className)}
       {...props}
     />
   );
@@ -453,7 +451,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
     <li
       data-slot="sidebar-menu-item"
       data-sidebar="menu-item"
-      className={cn("group/menu-item relative", className)}
+      className={cn("group/menu-item relative px-3", className)}
       {...props}
     />
   );

package/src/components/textarea.tsx

@@ -1,18 +1,21 @@
 "use client";
 
+import { Info } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "../lib/cn";
 import { Label } from "./label";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
 
 interface TextareaProps extends React.ComponentProps<"textarea"> {
   label?: string;
   required?: boolean;
   hint?: string;
   error?: string;
+  tooltip?: string;
 }
 
-function Textarea({ className, id, label, required, hint, error, ...props }: TextareaProps) {
+function Textarea({ className, id, label, required, hint, error, tooltip, ...props }: TextareaProps) {
   const generatedId = React.useId();
   const fieldId = id ?? generatedId;
 
@@ -51,6 +54,14 @@ function Textarea({ className, id, label, required, hint, error, ...props }: Tex
               *
             </span>
           )}
+          {tooltip && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Info className="size-4 text-muted-foreground" />
+              </TooltipTrigger>
+              <TooltipContent>{tooltip}</TooltipContent>
+            </Tooltip>
+          )}
         </div>
       )}
       {textarea}

package/src/stories/accordion-card.stories.tsx

@@ -0,0 +1,53 @@
+import type { Story } from "@ladle/react";
+import {
+  AccordionCard,
+  AccordionCardContent,
+  AccordionCardHeader,
+  AccordionCardTitle,
+} from "../components/accordion-card";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-6 max-w-md">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Default (collapsed)</p>
+      <AccordionCard>
+        <AccordionCardHeader>
+          <AccordionCardTitle>Logs</AccordionCardTitle>
+        </AccordionCardHeader>
+        <AccordionCardContent>Content inside the accordion card.</AccordionCardContent>
+      </AccordionCard>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Default open</p>
+      <AccordionCard defaultOpen>
+        <AccordionCardHeader>
+          <AccordionCardTitle>Build settings</AccordionCardTitle>
+        </AccordionCardHeader>
+        <AccordionCardContent>
+          This card starts open. The chevron rotates to indicate the open state.
+        </AccordionCardContent>
+      </AccordionCard>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Without title component</p>
+      <AccordionCard>
+        <AccordionCardHeader>
+          <span className="type-text-sm font-medium">Environment Variables</span>
+        </AccordionCardHeader>
+        <AccordionCardContent>Header text can be any element, not just AccordionCardTitle.</AccordionCardContent>
+      </AccordionCard>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Disabled</p>
+      <AccordionCard disabled>
+        <AccordionCardHeader>
+          <AccordionCardTitle>Disabled card</AccordionCardTitle>
+        </AccordionCardHeader>
+        <AccordionCardContent>Cannot be opened.</AccordionCardContent>
+      </AccordionCard>
+    </div>
+  </div>
+);

package/src/stories/accordion.stories.tsx

@@ -0,0 +1,65 @@
+import type { Story } from "@ladle/react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/accordion";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-10 max-w-md">
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Single (collapsible)</p>
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>What is Alpic?</AccordionTrigger>
+          <AccordionContent>
+            Alpic is a multi-tenant SaaS platform for deploying MCP servers. It handles infrastructure, scaling, and
+            distribution so you can focus on building.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>How do I deploy?</AccordionTrigger>
+          <AccordionContent>
+            Use the Alpic CLI to deploy your MCP server with a single command. The platform handles containerization,
+            routing, and scaling automatically.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionTrigger>What languages are supported?</AccordionTrigger>
+          <AccordionContent>
+            Any language that can run in a container. TypeScript, Python, Go, Rust, and more are all supported out of
+            the box with pre-built runtime images.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Multiple</p>
+      <Accordion type="multiple" defaultValue={["item-1", "item-3"]}>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>First item (open by default)</AccordionTrigger>
+          <AccordionContent>Content for the first item. Multiple items can be open at the same time.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Second item</AccordionTrigger>
+          <AccordionContent>Content for the second item.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionTrigger>Third item (open by default)</AccordionTrigger>
+          <AccordionContent>Content for the third item.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Disabled</p>
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Enabled item</AccordionTrigger>
+          <AccordionContent>This item can be toggled.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2" disabled>
+          <AccordionTrigger>Disabled item</AccordionTrigger>
+          <AccordionContent>This content cannot be reached.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  </div>
+);

package/src/stories/alert.stories.tsx

@@ -0,0 +1,58 @@
+import type { Story } from "@ladle/react";
+import { AlertCircle, AlertTriangle, CheckCircle2, Info } from "lucide-react";
+
+import { Alert, AlertDescription, AlertTitle, ErrorAlert, WarningAlert } from "../components/alert";
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-4 max-w-xl p-6">
+    <p className="type-text-xs font-medium text-subtle-foreground">Default</p>
+    <Alert>
+      <Info />
+      <AlertTitle>Best on desktop</AlertTitle>
+      <AlertDescription>
+        This site isn't optimised for small screens. For the best experience we recommend using a desktop or tablet.
+      </AlertDescription>
+    </Alert>
+
+    <p className="type-text-xs font-medium text-subtle-foreground">Destructive</p>
+    <Alert variant="destructive">
+      <AlertCircle />
+      <AlertTitle>Clone failed</AlertTitle>
+      <AlertDescription>Unable to clone the repository. Check your credentials and try again.</AlertDescription>
+    </Alert>
+
+    <p className="type-text-xs font-medium text-subtle-foreground">Warning</p>
+    <Alert variant="warning">
+      <AlertTriangle />
+      <AlertTitle>API key expiring soon</AlertTitle>
+      <AlertDescription>Your API key expires in 3 days. Rotate it to avoid service interruption.</AlertDescription>
+    </Alert>
+
+    <p className="type-text-xs font-medium text-subtle-foreground">Success</p>
+    <Alert variant="success">
+      <CheckCircle2 />
+      <AlertTitle>Deployment complete</AlertTitle>
+      <AlertDescription>Your project was deployed successfully and is now live.</AlertDescription>
+    </Alert>
+
+    <p className="type-text-xs font-medium text-subtle-foreground">Description only (no title)</p>
+    <Alert variant="destructive">
+      <AlertCircle />
+      <AlertDescription>
+        This is the only time you'll be able to see this API key. Make sure to copy it and store it securely.
+      </AlertDescription>
+    </Alert>
+
+    <p className="type-text-xs font-medium text-subtle-foreground">ErrorAlert (pre-composed)</p>
+    <ErrorAlert />
+
+    <p className="type-text-xs font-medium text-subtle-foreground">ErrorAlert (custom)</p>
+    <ErrorAlert title="Error loading projects" description="Failed to fetch your projects. Please refresh the page." />
+
+    <p className="type-text-xs font-medium text-subtle-foreground">WarningAlert</p>
+    <WarningAlert
+      title="Save your API key"
+      description="This is the only time you'll be able to see this API key. Make sure to copy it and store it securely."
+    />
+  </div>
+);

package/src/stories/attachment-tile.stories.tsx

@@ -0,0 +1,37 @@
+import type { Story } from "@ladle/react";
+import { AttachmentTile } from "../components/attachment-tile";
+
+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">Image attachment (with remove)</p>
+      <div className="flex gap-3">
+        <AttachmentTile
+          src="https://picsum.photos/seed/a/200/200"
+          isImage
+          onRemove={() => alert("Remove clicked")}
+          onClick={() => alert("Preview clicked")}
+        />
+        <AttachmentTile
+          src="https://picsum.photos/seed/b/200/200"
+          isImage
+          onRemove={() => alert("Remove clicked")}
+          onClick={() => alert("Preview clicked")}
+        />
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">File attachment (fallback icon)</p>
+      <AttachmentTile onRemove={() => alert("Remove clicked")} onClick={() => alert("Preview clicked")} />
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Read-only (no remove button)</p>
+      <div className="flex gap-3">
+        <AttachmentTile src="https://picsum.photos/seed/c/200/200" isImage />
+        <AttachmentTile />
+      </div>
+    </div>
+  </div>
+);

package/src/stories/avatar.stories.tsx

@@ -0,0 +1,54 @@
+import type { Story } from "@ladle/react";
+import { Avatar, AvatarFallback, AvatarImage, AvatarLabelGroup } from "../components/avatar";
+
+const DEMO_SRC = "https://i.pravatar.cc/150";
+const SIZES = ["xs", "sm", "md", "lg", "xl"] as const;
+
+export const AllVariants: Story = () => (
+  <div className="flex flex-col gap-8 p-6 bg-background">
+    <div className="flex flex-col gap-3">
+      <p className="type-text-xs font-medium text-subtle-foreground">Sizes — with image</p>
+      <div className="flex items-center gap-4">
+        {SIZES.map((size) => (
+          <Avatar key={size} size={size}>
+            <AvatarImage src={DEMO_SRC} alt="User" />
+            <AvatarFallback>JD</AvatarFallback>
+          </Avatar>
+        ))}
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-3">
+      <p className="type-text-xs font-medium text-subtle-foreground">Sizes — fallback (no image)</p>
+      <div className="flex items-center gap-4">
+        {SIZES.map((size) => (
+          <Avatar key={size} size={size}>
+            <AvatarFallback>OR</AvatarFallback>
+          </Avatar>
+        ))}
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-3">
+      <p className="type-text-xs font-medium text-subtle-foreground">Online status indicator</p>
+      <div className="flex items-center gap-4">
+        {SIZES.map((size) => (
+          <Avatar key={size} size={size} status="online">
+            <AvatarImage src={DEMO_SRC} alt="User" />
+            <AvatarFallback>JD</AvatarFallback>
+          </Avatar>
+        ))}
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-3">
+      <p className="type-text-xs font-medium text-subtle-foreground">Label group</p>
+      <div className="flex flex-col gap-4">
+        <AvatarLabelGroup size="sm" src={DEMO_SRC} name="Alice Martin" label="alice@example.com" />
+        <AvatarLabelGroup size="md" src={DEMO_SRC} name="Bob Dupont" label="bob@example.com" />
+        <AvatarLabelGroup size="md" src={DEMO_SRC} name="Charly Bernard" label="charly@example.com" status="online" />
+        <AvatarLabelGroup size="md" name="Daniel Wilson" label="daniel@example.com" />
+      </div>
+    </div>
+  </div>
+);

package/src/stories/badge.stories.tsx

@@ -0,0 +1,50 @@
+import type { Story } from "@ladle/react";
+import { AlertTriangle, CheckCircle2, XCircle } from "lucide-react";
+
+import { Badge } from "../components/badge";
+
+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">Medium (default)</p>
+      <div className="flex items-center gap-2">
+        <Badge variant="primary">Primary</Badge>
+        <Badge>Secondary</Badge>
+        <Badge variant="success">
+          <CheckCircle2 />
+          Success
+        </Badge>
+        <Badge variant="warning">
+          <AlertTriangle />
+          Warning
+        </Badge>
+        <Badge variant="error">
+          <XCircle />
+          Error
+        </Badge>
+      </div>
+    </div>
+
+    <div className="flex flex-col gap-1.5">
+      <p className="type-text-xs font-medium text-subtle-foreground">Small</p>
+      <div className="flex items-center gap-2">
+        <Badge size="sm" variant="primary">
+          Primary
+        </Badge>
+        <Badge size="sm">Secondary</Badge>
+        <Badge size="sm" variant="success">
+          <CheckCircle2 />
+          Success
+        </Badge>
+        <Badge size="sm" variant="warning">
+          <AlertTriangle />
+          Warning
+        </Badge>
+        <Badge size="sm" variant="error">
+          <XCircle />
+          Error
+        </Badge>
+      </div>
+    </div>
+  </div>
+);

package/src/stories/breadcrumb.stories.tsx

@@ -0,0 +1,107 @@
+import type { Story } from "@ladle/react";
+import { Home } from "lucide-react";
+import { useState } from "react";
+import {
+  Breadcrumb,
+  BreadcrumbChevron,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "../components/breadcrumb";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/dropdown-menu";
+
+const TREE: Record<string, string[]> = {
+  Home: ["Projects", "Settings", "Billing"],
+  Projects: ["my-mcp-server", "weather-api", "slack-bot"],
+  "my-mcp-server": ["Deployments", "Logs", "Environment"],
+};
+
+export const AllVariants: Story = () => {
+  const [trail, setTrail] = useState(["Home", "Projects", "my-mcp-server"]);
+
+  function handleSelect(index: number, option: string) {
+    setTrail([...trail.slice(0, index + 1), option]);
+  }
+
+  return (
+    <div className="flex flex-col gap-10">
+      <div className="flex flex-col gap-1.5">
+        <p className="type-text-xs font-medium text-subtle-foreground">
+          Interactive — click items to navigate, click chevrons for dropdown
+        </p>
+        <Breadcrumb>
+          <BreadcrumbList>
+            {trail.map((page, index) => {
+              const isLast = index === trail.length - 1;
+              const children = TREE[page];
+              return (
+                <li key={page} className="contents">
+                  {index > 0 && <BreadcrumbSeparator />}
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <BreadcrumbItem className="cursor-pointer focus-visible:ring-2 focus-visible:ring-ring outline-none">
+                        {isLast ? (
+                          <BreadcrumbPage>{page}</BreadcrumbPage>
+                        ) : (
+                          <span className="type-text-sm font-medium text-subtle-foreground">{page}</span>
+                        )}
+                        {children && <BreadcrumbChevron />}
+                      </BreadcrumbItem>
+                    </DropdownMenuTrigger>
+                    {children && (
+                      <DropdownMenuContent align="start">
+                        {children.map((child) => (
+                          <DropdownMenuItem key={child} onSelect={() => handleSelect(index, child)}>
+                            {child}
+                          </DropdownMenuItem>
+                        ))}
+                      </DropdownMenuContent>
+                    )}
+                  </DropdownMenu>
+                </li>
+              );
+            })}
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <p className="type-text-xs font-medium text-subtle-foreground">With home icon (static)</p>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">
+                <Home className="size-5" />
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">Projects</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>my-mcp-server</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <p className="type-text-xs font-medium text-subtle-foreground">Simple — two levels</p>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">Projects</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>my-mcp-server</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+    </div>
+  );
+};