@alpic-ai/ui 0.0.0

package/src/components/attachment-tile.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { FileText, XIcon } from "lucide-react";
+import { useState } from "react";
+
+import { cn } from "../lib/cn";
+import { TooltipIconButton } from "./tooltip-icon-button";
+
+interface AttachmentTileProps {
+  /** Source URL for the attachment thumbnail */
+  src?: string;
+  /** Whether the attachment is an image */
+  isImage?: boolean;
+  /** Accessible label describing the attachment */
+  label?: string;
+  /** Called when the remove button is clicked */
+  onRemove?: () => void;
+  /** Called when the tile is clicked (e.g. to open a preview) */
+  onClick?: () => void;
+  className?: string;
+}
+
+function AttachmentTile({ src, isImage, label, onRemove, onClick, className }: AttachmentTileProps) {
+  const [hasError, setHasError] = useState(false);
+  const showImage = isImage && src && !hasError;
+
+  return (
+    <div className={cn("group relative w-fit", className)}>
+      <button
+        type="button"
+        className={cn(
+          "bg-muted flex size-18 cursor-pointer items-center justify-center overflow-hidden rounded-[14px] border transition-opacity",
+          "[@media(hover:hover)]:hover:opacity-75",
+        )}
+        onClick={onClick}
+        aria-label={label ?? `${isImage ? "Image" : "File"} attachment`}
+      >
+        {showImage ? (
+          <img
+            src={src}
+            alt="Attachment preview"
+            className="size-full object-cover"
+            onError={() => setHasError(true)}
+          />
+        ) : (
+          <FileText className="text-muted-foreground size-8" />
+        )}
+      </button>
+      {onRemove && (
+        <TooltipIconButton
+          tooltip="Remove file"
+          size="icon-rounded"
+          variant="primary"
+          onClick={onRemove}
+          className={cn(
+            "absolute -top-1.5 -right-1.5 z-10 size-5",
+            "opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100",
+          )}
+        >
+          <XIcon className="size-3 dark:stroke-[2.5px]" />
+        </TooltipIconButton>
+      )}
+    </div>
+  );
+}
+
+export type { AttachmentTileProps };
+export { AttachmentTile };

package/src/components/avatar.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "../lib/cn";
+
+const avatarVariants = cva("relative inline-flex shrink-0", {
+  variants: {
+    size: {
+      xs: "size-6",
+      sm: "size-8",
+      md: "size-10",
+      lg: "size-12",
+      xl: "size-14",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+const avatarIndicatorVariants = cva(
+  "absolute -bottom-px -right-px rounded-full bg-avatar-online border-2 border-background",
+  {
+    variants: {
+      size: {
+        xs: "size-2",
+        sm: "size-2.5",
+        md: "size-3",
+        lg: "size-3",
+        xl: "size-3.5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
+type AvatarStatus = "online";
+
+interface AvatarProps extends React.ComponentProps<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
+  status?: AvatarStatus;
+}
+
+function Avatar({ size, status, className, children, ...props }: AvatarProps) {
+  return (
+    <span className={cn(avatarVariants({ size }), className)}>
+      <AvatarPrimitive.Root
+        data-slot="avatar"
+        className="size-full overflow-hidden rounded-full border border-avatar-border"
+        {...props}
+      >
+        {children}
+      </AvatarPrimitive.Root>
+      {status === "online" && <span aria-label="Online" role="img" className={avatarIndicatorVariants({ size })} />}
+    </span>
+  );
+}
+
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full object-cover", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted type-text-sm font-medium text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+// ─── AvatarLabelGroup ─────────────────────────────────────────────────────────
+
+interface AvatarLabelGroupProps extends React.ComponentProps<"div"> {
+  size?: "sm" | "md";
+  src?: string;
+  alt?: string;
+  fallback?: string;
+  name: string;
+  label?: string;
+  status?: AvatarStatus;
+}
+
+function AvatarLabelGroup({
+  size = "md",
+  src,
+  alt,
+  fallback,
+  name,
+  label,
+  status,
+  className,
+  ...props
+}: AvatarLabelGroupProps) {
+  const avatarSize = size === "sm" ? ("sm" as const) : ("md" as const);
+
+  return (
+    <div className={cn("flex items-center gap-2", className)} {...props}>
+      <Avatar size={avatarSize} status={status}>
+        {src && <AvatarImage src={src} alt={alt ?? name} />}
+        <AvatarFallback>{fallback ?? name.slice(0, 2).toUpperCase()}</AvatarFallback>
+      </Avatar>
+      <div className="flex min-w-0 flex-col">
+        <span className="type-text-sm font-semibold text-foreground truncate">{name}</span>
+        {label && <span className="type-text-sm text-subtle-foreground truncate">{label}</span>}
+      </div>
+    </div>
+  );
+}
+
+export type { AvatarSize, AvatarStatus };
+export { Avatar, AvatarFallback, AvatarImage, AvatarLabelGroup };

package/src/components/badge.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { cn } from "@alpic-ai/ui/lib/cn";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border font-medium whitespace-nowrap shrink-0 [&>svg]:shrink-0 [&>svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        secondary: "border-border bg-background text-muted-foreground",
+        primary: "border-transparent bg-primary text-primary-foreground",
+        success: "border-badge-success/30 bg-badge-success/10 text-badge-success",
+        warning: "border-badge-warning/30 bg-badge-warning/10 text-badge-warning",
+        error: "border-badge-error/30 bg-badge-error/10 text-badge-error",
+      },
+      size: {
+        sm: "px-1.5 py-px gap-0.5 type-text-xs [&>svg]:size-2.5",
+        md: "px-[9px] py-0.5 gap-1 type-text-sm [&>svg]:size-3",
+      },
+    },
+    defaultVariants: {
+      variant: "secondary",
+      size: "md",
+    },
+  },
+);
+
+interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, size, children, ...props }: BadgeProps) {
+  return (
+    <span className={cn(badgeVariants({ variant, size }), className)} {...props}>
+      {children}
+    </span>
+  );
+}
+
+type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>["variant"]>;
+
+export { Badge, type BadgeVariant, badgeVariants };

package/src/components/breadcrumb.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { cn } from "@alpic-ai/ui/lib/cn";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronDown, Ellipsis } from "lucide-react";
+import type * as React from "react";
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return <nav data-slot="breadcrumb" aria-label="Breadcrumb" className={className} {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return <ol data-slot="breadcrumb-list" className={cn("flex items-center gap-2", className)} {...props} />;
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-0.5 rounded-sm px-1 py-0.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn(
+        "type-text-sm font-medium text-subtle-foreground transition-colors [@media(hover:hover)]:hover:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      aria-current="page"
+      className={cn("type-text-sm font-medium text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex items-center text-subtle-foreground", className)}
+      {...props}
+    >
+      {children ?? <span className="inline-block size-4 text-center leading-4 select-none">/</span>}
+    </li>
+  );
+}
+
+function BreadcrumbChevron({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span data-slot="breadcrumb-chevron" className={cn("text-subtle-foreground [&>svg]:size-4", className)} {...props}>
+      <ChevronDown />
+    </span>
+  );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <Ellipsis className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbChevron,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};

package/src/components/button.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../lib/cn";
+
+const buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-1 whitespace-nowrap",
+    "h-8 px-2 rounded-md",
+    "font-medium",
+    "transition-colors",
+    "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
+    "disabled:pointer-events-none disabled:opacity-50",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        primary: ["bg-primary text-primary-foreground", "[@media(hover:hover)]:hover:bg-primary-hover"].join(" "),
+        secondary: [
+          "border border-border bg-background text-muted-foreground",
+          "[@media(hover:hover)]:hover:bg-background-hover [@media(hover:hover)]:hover:text-muted-foreground-hover",
+        ].join(" "),
+        tertiary: [
+          "text-muted-foreground",
+          "[@media(hover:hover)]:hover:bg-background-hover [@media(hover:hover)]:hover:text-muted-foreground-hover",
+          "focus-visible:bg-background",
+        ].join(" "),
+        link: [
+          "h-auto px-0 rounded-xs underline-offset-4",
+          "text-link",
+          "[@media(hover:hover)]:hover:underline",
+          "focus-visible:bg-background",
+        ].join(" "),
+        "link-muted": [
+          "h-auto px-0 rounded-xs underline-offset-4",
+          "text-link-muted",
+          "[@media(hover:hover)]:hover:underline",
+          "focus-visible:bg-background",
+        ].join(" "),
+        destructive: [
+          "bg-destructive text-destructive-foreground",
+          "[@media(hover:hover)]:hover:bg-destructive-hover",
+        ].join(" "),
+      },
+      size: {
+        default: "type-text-sm",
+        icon: "size-8 p-0 type-text-sm",
+        "icon-rounded": "size-8 p-0 rounded-full type-text-sm",
+        pill: "h-7 px-3 rounded-full type-text-xs",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "default",
+    },
+  },
+);
+
+interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  loading?: boolean;
+  icon?: React.ReactNode;
+}
+
+function Button({
+  className,
+  variant,
+  size,
+  type = "button",
+  asChild = false,
+  loading = false,
+  icon,
+  disabled,
+  children,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size }), className)}
+      type={type}
+      disabled={disabled || loading}
+      aria-busy={loading || undefined}
+      {...props}
+    >
+      {asChild ? (
+        children
+      ) : (
+        <>
+          {loading ? <Loader2 className="motion-safe:animate-spin" /> : icon}
+          {children}
+        </>
+      )}
+    </Comp>
+  );
+}
+
+export type { ButtonProps };
+export { Button, buttonVariants };

package/src/components/card.tsx

@@ -0,0 +1,62 @@
+import type * as React from "react";
+
+import { cn } from "../lib/cn";
+
+function Card({ className, hoverable, ...props }: React.ComponentProps<"div"> & { hoverable?: boolean }) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6",
+        hoverable && "transition-shadow [@media(hover:hover)]:hover:shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-title" className={cn("type-text-md font-semibold leading-none", className)} {...props} />;
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="card-description" className={cn("type-text-sm text-muted-foreground", className)} {...props} />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="card-footer" className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...props} />
+  );
+}
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/src/components/checkbox.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon, MinusIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../lib/cn";
+
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer size-4 shrink-0 rounded-xs border border-border bg-background",
+        "not-disabled:data-[state=checked]:border-primary not-disabled:data-[state=checked]:bg-primary not-disabled:data-[state=checked]:text-primary-foreground",
+        "not-disabled:data-[state=indeterminate]:border-primary not-disabled:data-[state=indeterminate]:bg-primary not-disabled:data-[state=indeterminate]:text-primary-foreground",
+        "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:bg-muted disabled:border-border disabled:text-border",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current [&[data-state=indeterminate]>svg:first-child]:hidden [&[data-state=checked]>svg:last-child]:hidden"
+      >
+        <CheckIcon className="size-3" strokeWidth={4} />
+        <MinusIcon className="size-3" strokeWidth={4} />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

package/src/components/collapsible.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import type * as React from "react";
+
+function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
+}
+
+function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
+}
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };