@alpic-ai/ui 0.0.0

package/src/components/sonner.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { CheckCircle2, Info, Loader2, TriangleAlert, X } from "lucide-react";
+import type * as React from "react";
+import { Toaster as Sonner, toast } from "sonner";
+import { Button } from "./button";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+function Toaster(props: ToasterProps) {
+  return (
+    <Sonner
+      className="toaster group"
+      icons={{
+        success: <CheckCircle2 className="size-5 text-badge-success" />,
+        error: <TriangleAlert className="size-5 text-destructive" />,
+        warning: <TriangleAlert className="size-5 text-badge-warning" />,
+        info: <Info className="size-5 text-foreground" />,
+        loading: <Loader2 className="size-5 text-muted-foreground motion-safe:animate-spin" />,
+        close: <X className="size-3.5" />,
+      }}
+      toastOptions={{
+        unstyled: true,
+        classNames: {
+          toast: [
+            "group toast w-full",
+            "flex items-start gap-3 rounded-lg border border-border bg-background p-4 shadow-md",
+            "type-text-sm text-foreground",
+          ].join(" "),
+          title: "font-semibold",
+          description: "text-muted-foreground type-text-sm mt-0.5",
+          closeButton: [
+            "!static !transform-none shrink-0 ml-auto -mr-1 -mt-1",
+            "flex items-center justify-center size-6 rounded-sm",
+            "text-muted-foreground",
+            "[@media(hover:hover)]:hover:text-foreground",
+            "transition-colors",
+          ].join(" "),
+        },
+      }}
+      {...props}
+    />
+  );
+}
+
+interface ActionToastProps {
+  toastId: string | number;
+  title: string;
+  description: string;
+  onDismiss?: () => void;
+  confirm: {
+    label: string;
+    icon?: React.ReactNode;
+    onClick: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+  };
+}
+
+function ActionToast({ toastId, title, description, onDismiss, confirm }: ActionToastProps) {
+  const handleDismiss = () => {
+    onDismiss?.();
+    toast.dismiss(toastId);
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1">
+        <p className="type-text-lg font-semibold leading-none">{title}</p>
+        <p className="type-text-sm text-muted-foreground">{description}</p>
+      </div>
+      <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+        <Button variant="secondary" disabled={confirm.loading} onClick={handleDismiss} icon={<X />}>
+          Dismiss
+        </Button>
+        <Button
+          variant="primary"
+          loading={confirm.loading}
+          disabled={confirm.disabled}
+          onClick={confirm.onClick}
+          icon={confirm.icon}
+        >
+          {confirm.label}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export type { ActionToastProps, ToasterProps };
+export { ActionToast, Toaster, toast };

package/src/components/spinner.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { Loader } from "lucide-react";
+import { cn } from "../lib/cn";
+
+const spinnerVariants = cva("motion-safe:animate-spin", {
+  variants: {
+    variant: {
+      primary: "text-primary",
+      secondary: "text-muted-foreground",
+    },
+    size: {
+      sm: "size-3.5",
+      md: "size-4",
+      lg: "size-5",
+      xl: "size-8",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+  },
+});
+
+interface SpinnerProps extends Omit<React.ComponentProps<"svg">, "children">, VariantProps<typeof spinnerVariants> {}
+
+function Spinner({ className, variant, size, ...props }: SpinnerProps) {
+  return (
+    <Loader
+      role="status"
+      aria-label="Loading"
+      className={cn(spinnerVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+}
+
+interface SpinnerBlockProps extends VariantProps<typeof spinnerVariants> {
+  className?: string;
+  fullscreen?: boolean;
+  withLabel?: boolean;
+}
+
+function SpinnerBlock({ className, variant, size, fullscreen, withLabel }: SpinnerBlockProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center",
+        fullscreen ? "min-h-screen" : "py-6",
+        withLabel && "gap-2 text-muted-foreground",
+        className,
+      )}
+    >
+      <Spinner variant={variant} size={size} />
+      {withLabel && <span>Loading...</span>}
+    </div>
+  );
+}
+
+export type { SpinnerBlockProps, SpinnerProps };
+export { Spinner, SpinnerBlock, spinnerVariants };

package/src/components/status-dot.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { cn } from "@alpic-ai/ui/lib/cn";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const statusDotVariants = cva("size-2.5 rounded-full", {
+  variants: {
+    variant: {
+      success: "bg-success",
+      destructive: "bg-destructive",
+      warning: "bg-warning",
+      muted: "bg-muted-foreground",
+    },
+    pulse: {
+      true: "animate-pulse",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    variant: "muted",
+    pulse: false,
+  },
+});
+
+interface StatusDotProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof statusDotVariants> {}
+
+function StatusDot({ className, variant, pulse, ...props }: StatusDotProps) {
+  return <div className={cn(statusDotVariants({ variant, pulse }), className)} {...props} />;
+}
+
+type StatusDotVariantProps = Required<Pick<VariantProps<typeof statusDotVariants>, "variant" | "pulse">>;
+
+export { StatusDot, type StatusDotVariantProps, statusDotVariants };

package/src/components/switch.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import type * as React from "react";
+
+import { cn } from "../lib/cn";
+
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer inline-flex h-5 w-9 shrink-0 items-center rounded-full p-0.5",
+        "bg-subtle data-[state=checked]:not-disabled:bg-primary",
+        "transition-colors",
+        "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "pointer-events-none block size-4 rounded-full bg-primary-foreground shadow-xs",
+          "transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-4",
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

package/src/components/table.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import type * as React from "react";
+
+import { cn } from "../lib/cn";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div className="relative w-full overflow-auto rounded-xl border border-border-secondary bg-background">
+      <table data-slot="table" className={cn("w-full caption-bottom type-text-sm", className)} {...props} />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b [&_tr]:border-border-secondary", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return <tbody data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn("border-t border-border-secondary type-text-sm font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b border-border-secondary transition-colors",
+        "data-[state=selected]:bg-muted",
+        "[@media(hover:hover)]:hover:bg-background-hover dark:[@media(hover:hover)]:hover:bg-muted",
+        "[@media(hover:hover)]:[&:hover_button:hover]:bg-subtle",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-11 px-6 py-3 bg-muted text-left align-middle type-text-xs font-semibold text-placeholder dark:text-subtle-foreground whitespace-nowrap",
+        "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn("px-6 py-2 align-middle", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-3", className)}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 type-text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/src/components/tabs.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+/*
+ * Two tab families, one visual system:
+ *
+ * - Tabs / TabsList / TabsTrigger / TabsContent — state-managed.
+ *   Use when tab content lives in the same page (e.g. "Code" vs "Preview").
+ *
+ * - TabsNav / TabsNavList / TabsNavTrigger — semantic <nav>/<ul>/<a>, URL-based.
+ *   Use when each tab is a route (e.g. settings pages). Pair with <Link> via asChild.
+ *
+ * Both share `tabsTriggerVariants` for visual styles (colors, spacing, active state).
+ * Layout concerns (flex-1, orientation group selectors) stay component-specific.
+ */
+
+import { Slot } from "@radix-ui/react-slot";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { createContext, use } from "react";
+
+import { cn } from "../lib/cn";
+
+/* ─── Shared trigger styles ──────────────────────────────────────────────── */
+
+const tabsTriggerVariants = cva(
+  [
+    "type-text-sm items-center gap-1.5 font-medium",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "rounded-md border border-transparent px-2 py-1",
+          "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        ],
+        line: [
+          "h-8 pb-3 px-1",
+          "text-quaternary-foreground",
+          "[@media(hover:hover)]:hover:text-muted-foreground-hover",
+          "data-[state=active]:border-b-2 data-[state=active]:border-foreground data-[state=active]:text-foreground",
+        ],
+        pill: [
+          "rounded-lg px-4 py-2",
+          "text-muted-foreground",
+          "[@media(hover:hover)]:hover:bg-accent [@media(hover:hover)]:hover:text-accent-foreground",
+          "data-[state=active]:bg-accent data-[state=active]:text-accent-foreground",
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+/* ─── Tabs (state-based, in-page content switching) ────────────────── */
+
+function Tabs({ className, orientation = "horizontal", ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-4",
+        "data-[orientation=horizontal]:flex-col",
+        "data-[orientation=vertical]:flex-row",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+type TabsListVariant = "default" | "line";
+
+const TabsListVariantContext = createContext<TabsListVariant>("default");
+
+const tabsListVariants = cva(
+  "inline-flex w-fit items-center justify-center text-muted-foreground group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default:
+          "rounded-lg bg-muted p-[3px] group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:bg-transparent group-data-[orientation=vertical]/tabs:p-0 group-data-[orientation=vertical]/tabs:rounded-none",
+        line: "gap-3 rounded-none bg-transparent border-b border-subtle group-data-[orientation=horizontal]/tabs:flex-wrap",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsListVariantContext value={variant ?? "default"}>
+      <TabsPrimitive.List data-slot="tabs-list" className={cn(tabsListVariants({ variant }), className)} {...props} />
+    </TabsListVariantContext>
+  );
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  const variant = use(TabsListVariantContext);
+
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        tabsTriggerVariants({ variant }),
+        "relative inline-flex flex-1 justify-center whitespace-nowrap transition-all",
+        "group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start",
+        variant === "default" && [
+          "h-[calc(100%-1px)]",
+          "group-data-[orientation=vertical]/tabs:data-[state=active]:bg-muted group-data-[orientation=vertical]/tabs:data-[state=active]:shadow-none dark:group-data-[orientation=vertical]/tabs:data-[state=active]:bg-subtle",
+          "group-data-[orientation=vertical]/tabs:p-2",
+        ],
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />;
+}
+
+/* ─── Navigation tabs (semantic <nav>/<ul>/<a>, for URL-based routing) ──── */
+
+type TabsNavVariant = "line" | "pill";
+type TabsNavOrientation = "horizontal" | "vertical";
+
+type TabsNavContextValue = {
+  orientation: TabsNavOrientation;
+  variant: TabsNavVariant;
+};
+
+const TabsNavContext = createContext<TabsNavContextValue>({ orientation: "horizontal", variant: "line" });
+
+function TabsNav({
+  orientation = "horizontal",
+  variant,
+  className,
+  ...props
+}: React.ComponentProps<"nav"> & {
+  orientation?: TabsNavOrientation;
+  variant?: TabsNavVariant;
+}) {
+  const resolvedVariant = variant ?? (orientation === "vertical" ? "pill" : "line");
+
+  return (
+    <TabsNavContext value={{ orientation, variant: resolvedVariant }}>
+      <nav data-slot="tabs-nav" data-orientation={orientation} className={className} {...props} />
+    </TabsNavContext>
+  );
+}
+
+function TabsNavList({ className, ...props }: React.ComponentProps<"ul">) {
+  const { orientation, variant } = use(TabsNavContext);
+
+  return (
+    <ul
+      data-slot="tabs-nav-list"
+      className={cn(
+        orientation === "vertical" ? "flex flex-col gap-1" : "flex flex-wrap",
+        variant === "line" && orientation === "horizontal" && "gap-3 border-b border-subtle",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsNavTrigger({
+  className,
+  active = false,
+  asChild = false,
+  children,
+  ...props
+}: React.ComponentProps<"a"> & {
+  active?: boolean;
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+  const { variant } = use(TabsNavContext);
+
+  return (
+    <li data-slot="tabs-nav-trigger-item">
+      <Comp
+        data-state={active ? "active" : "inactive"}
+        className={cn(
+          tabsTriggerVariants({ variant }),
+          "flex transition-colors",
+          // TODO(mobile): line h-8 (32px) is below 44px touch target minimum — desktop-primary nav per Figma spec
+          variant === "line" && "cursor-pointer",
+          className,
+        )}
+        aria-current={active ? "page" : undefined}
+        {...props}
+      >
+        {children}
+      </Comp>
+    </li>
+  );
+}
+
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsNav,
+  TabsNavList,
+  TabsNavTrigger,
+  TabsTrigger,
+  tabsListVariants,
+  tabsTriggerVariants,
+};

package/src/components/tag.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { cn } from "@alpic-ai/ui/lib/cn";
+
+const tagBase =
+  "inline-flex items-center justify-center rounded-sm border border-border bg-background py-0.5 type-text-sm font-medium text-muted-foreground";
+
+interface TagBaseProps {
+  icon?: React.ReactNode;
+}
+
+/* ── Tag (text only) ──────────────────────────────────────────── */
+
+interface TagProps extends React.ComponentProps<"span">, TagBaseProps {}
+
+function Tag({ className, icon, children, ...props }: TagProps) {
+  return (
+    <span className={cn(tagBase, icon ? "gap-[5px] pl-1 pr-[9px]" : "px-[9px]", className)} {...props}>
+      {icon && <span className="inline-flex shrink-0">{icon}</span>}
+      <span>{children}</span>
+    </span>
+  );
+}
+
+/* ── TagDismissible (with × button) ───────────────────────────── */
+
+interface TagDismissibleProps extends React.ComponentProps<"span">, TagBaseProps {
+  onDismiss?: () => void;
+}
+
+function TagDismissible({ className, icon, children, onDismiss, ...props }: TagDismissibleProps) {
+  return (
+    <span className={cn(tagBase, "gap-[3px]", icon ? "px-1" : "pl-[9px] pr-1", className)} {...props}>
+      <span className={cn("inline-flex items-center", icon && "gap-[5px]")}>
+        {icon && <span className="inline-flex shrink-0">{icon}</span>}
+        <span>{children}</span>
+      </span>
+      <button
+        type="button"
+        aria-label="Remove"
+        onClick={onDismiss}
+        className="inline-flex items-center justify-center rounded-[3px] p-0.5 hover:bg-accent"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M18 6 6 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+      </button>
+    </span>
+  );
+}
+
+/* ── TagCount (with count badge) ──────────────────────────────── */
+
+interface TagCountProps extends React.ComponentProps<"span">, TagBaseProps {
+  count: number;
+}
+
+function TagCount({ className, icon, children, count, ...props }: TagCountProps) {
+  return (
+    <span className={cn(tagBase, "gap-[5px]", icon ? "pl-1 pr-[3px]" : "pl-[9px] pr-[3px]", className)} {...props}>
+      {icon && <span className="inline-flex shrink-0">{icon}</span>}
+      <span>{children}</span>
+      <span className="inline-flex min-w-[18px] h-[18px] items-center justify-center rounded-[3px] bg-subtle px-[5px] type-text-xs font-medium text-muted-foreground">
+        {count}
+      </span>
+    </span>
+  );
+}
+
+export { Tag, TagCount, TagDismissible };

package/src/components/textarea.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../lib/cn";
+import { Label } from "./label";
+
+interface TextareaProps extends React.ComponentProps<"textarea"> {
+  label?: string;
+  required?: boolean;
+  hint?: string;
+  error?: string;
+}
+
+function Textarea({ className, id, label, required, hint, error, ...props }: TextareaProps) {
+  const generatedId = React.useId();
+  const fieldId = id ?? generatedId;
+
+  const textarea = (
+    <textarea
+      id={fieldId}
+      data-slot="textarea"
+      className={cn(
+        "block w-full min-h-[120px] resize-none",
+        "px-3.5 py-3",
+        "type-text-md text-foreground placeholder:text-placeholder",
+        "bg-background border border-border rounded-md",
+        "transition-colors",
+        "outline-none focus-visible:border-ring focus-visible:border-2",
+        "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed",
+        "aria-invalid:border-border-error [@media(hover:hover)]:aria-invalid:hover:border-border-error",
+        error && "border-border-error [@media(hover:hover)]:hover:border-border-error",
+        className,
+      )}
+      required={required}
+      aria-invalid={error ? true : undefined}
+      aria-describedby={fieldId && (hint || error) ? `${fieldId}-description` : undefined}
+      {...props}
+    />
+  );
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      {label && (
+        <div className="flex items-center gap-0.5">
+          <Label htmlFor={fieldId} className="type-text-sm font-medium text-muted-foreground">
+            {label}
+          </Label>
+          {required && (
+            <span aria-hidden className="type-text-sm font-medium text-required">
+              *
+            </span>
+          )}
+        </div>
+      )}
+      {textarea}
+      {(hint || error) && (
+        <p
+          id={fieldId ? `${fieldId}-description` : undefined}
+          className={cn("type-text-sm", error ? "text-destructive" : "text-subtle-foreground")}
+        >
+          {error ?? hint}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export type { TextareaProps };
+export { Textarea };