@alpic-ai/ui 0.0.0

package/src/components/toggle-group.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../lib/cn";
+
+const toggleGroupItemVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-1 whitespace-nowrap",
+    "type-text-sm font-medium",
+    "transition-colors",
+    "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus:z-10 focus-visible:z-10",
+    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
+    "disabled:pointer-events-none disabled:opacity-50",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-transparent text-muted-foreground",
+          "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+          "[@media(hover:hover)]:hover:bg-background-hover [@media(hover:hover)]:hover:text-muted-foreground-hover",
+        ].join(" "),
+        outline: [
+          "border border-border bg-transparent text-muted-foreground",
+          "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+          "[@media(hover:hover)]:hover:bg-background-hover [@media(hover:hover)]:hover:text-muted-foreground-hover",
+        ].join(" "),
+      },
+      size: {
+        default: "h-8 px-2 min-w-8",
+        sm: "h-7 px-1.5 min-w-7",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ToggleGroupContextValue = VariantProps<typeof toggleGroupItemVariants>;
+
+const ToggleGroupContext = React.createContext<ToggleGroupContextValue>({
+  size: "default",
+  variant: "default",
+});
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & ToggleGroupContextValue) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      className={cn("group/toggle-group flex h-fit w-fit items-center rounded-md", className)}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleGroupItemVariants>) {
+  const context = React.useContext(ToggleGroupContext);
+  const resolvedVariant = context.variant ?? variant;
+  const resolvedSize = context.size ?? size;
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      className={cn(
+        toggleGroupItemVariants({ variant: resolvedVariant, size: resolvedSize }),
+        "min-w-0 flex-1 shrink-0 rounded-none first:rounded-l-md last:rounded-r-md",
+        resolvedVariant === "outline" && "border-l-0 first:border-l",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem, toggleGroupItemVariants };

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

@@ -0,0 +1,33 @@
+"use client";
+
+import { Slottable } from "@radix-ui/react-slot";
+import { type ComponentPropsWithRef, forwardRef } from "react";
+
+import { Button } from "./button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
+  tooltip: string;
+  side?: "top" | "bottom" | "left" | "right";
+};
+
+const TooltipIconButton = forwardRef<HTMLButtonElement, TooltipIconButtonProps>(
+  ({ children, tooltip, side = "bottom", ...rest }, ref) => {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button size="icon" {...rest} ref={ref}>
+            <Slottable>{children}</Slottable>
+            <span className="sr-only">{tooltip}</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side={side}>{tooltip}</TooltipContent>
+      </Tooltip>
+    );
+  },
+);
+
+TooltipIconButton.displayName = "TooltipIconButton";
+
+export type { TooltipIconButtonProps };
+export { TooltipIconButton };

package/src/components/tooltip.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type * as React from "react";
+
+import { cn } from "../lib/cn";
+
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 6,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-inverted text-inverted-foreground dark:bg-subtle dark:text-foreground",
+          "z-50 w-fit rounded-md px-3 py-2 shadow-lg dark:shadow-none dark:drop-shadow-[0_0_0.5px_var(--color-border)]",
+          "type-text-xs font-semibold text-balance text-center",
+          "animate-in fade-in-0 zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "origin-(--radix-tooltip-content-transform-origin)",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-inverted fill-inverted dark:bg-subtle dark:fill-subtle z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,27 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export function useCopyToClipboard({ resetDelay = 2000 }: { resetDelay?: number } = {}) {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  const copy = useCallback(
+    (text: string) => {
+      navigator.clipboard.writeText(text).then(() => {
+        setIsCopied(true);
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => setIsCopied(false), resetDelay);
+      });
+    },
+    [resetDelay],
+  );
+
+  return { copy, isCopied };
+}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => setIsMobile(mql.matches);
+    mql.addEventListener("change", onChange);
+    setIsMobile(mql.matches);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/styles/tokens.css

@@ -0,0 +1,352 @@
+/* ─── Color tokens ────────────────────────────────────────────────────────── */
+
+@theme {
+  --font-sans: "Inter", system-ui, sans-serif;
+  --font-display: "Inter", sans-serif;
+  --font-body: "Inter", sans-serif;
+
+  --color-background: #ffffff; /* Figma: bg-primary */
+  --color-foreground: #121e1e; /* Figma: fg-primary */
+  --color-border: #acb8b8; /* Figma: border-primary */
+
+  --color-accent: #f1f5f5; /* Figma: bg-secondary */
+  --color-accent-foreground: #121e1e; /* Figma: fg-primary */
+
+  --color-muted: #f1f5f5; /* Figma: bg-secondary */
+  --color-muted-foreground: #3a4848; /* Figma: fg-secondary */
+
+  --color-shadow: #0000001a;
+
+  --color-inverted: #071718; /* Figma: bg-primary-solid */
+  --color-inverted-foreground: #ffffff; /* Figma: fg-white */
+
+  --color-primary-hover: #c70054; /* Figma: bg-brand-solid-hover */
+  --color-primary-hover-foreground: #ffffff;
+
+  --color-background-hover: #f1f5f5; /* Figma: bg-primary-hover */
+  --color-muted-foreground-hover: #232e2e; /* Figma: text-secondary-hover */
+  --color-link: #c70054; /* Figma: text-brand-secondary */
+  --color-link-muted: #536262; /* Figma: text-tertiary */
+
+  --color-primary: #e90060; /* Figma: bg-brand-solid */
+  --color-primary-foreground: #ffffff; /* Figma: fg-white */
+
+  --color-tertiary: #e90060; /* Figma: fg-brand-primary */
+
+  --color-destructive: #d92d20; /* Figma: bg-error-solid */
+  --color-destructive-hover: #b42318; /* Figma: bg-error-solid-hover */
+  --color-destructive-foreground: #ffffff;
+
+  --color-ring: #f22b79; /* Figma: focus-ring */
+
+  /* sidebar */
+  --color-sidebar: #f8fafa; /* Figma: bg-secondary-subtle */
+  --color-sidebar-foreground: #3a4848; /* Figma: fg-secondary */
+  --color-sidebar-primary: #121e1e; /* Figma: fg-primary */
+  --color-sidebar-primary-foreground: #ffffff;
+  --color-sidebar-accent: #f1f5f5; /* Figma: bg-secondary */
+  --color-sidebar-accent-foreground: #121e1e;
+  --color-sidebar-border: #e3eaea; /* Figma: border-tertiary */
+  --color-sidebar-ring: #f22b79; /* Figma: focus-ring */
+
+  /* card */
+  --color-card: #f8fafa; /* Figma: bg-secondary-subtle */
+  --color-card-foreground: #121e1e; /* Figma: fg-primary */
+
+  /* popover */
+  --color-popover: #ffffff; /* Figma: bg-primary */
+  --color-popover-foreground: #121e1e; /* Figma: fg-primary */
+
+  /* code editor */
+  --color-code: #ffffff;
+  --color-code-foreground: #121e1e;
+  --color-code-warning: #eab308;
+  --color-code-debug: #3b82f6;
+  --color-code-error: #d92d20; /* Figma: bg-error-solid */
+
+  /* surfaces */
+  --color-subtle: #e3eaea; /* Figma: bg-tertiary */
+  --color-subtle-foreground: #536262; /* Figma: fg-tertiary */
+
+  /* input */
+  --color-placeholder: #6f7f7f; /* Figma: text-placeholder */
+  --color-border-error: #fda29b; /* Figma: border-error-subtle */
+  --color-disabled: #f1f5f5; /* Figma: bg-disabled (lightened to distinguish from switch bg) */
+  --color-disabled-foreground: #6f7f7f; /* Figma: text-disabled */
+  --color-border-secondary: #c9d4d4; /* Figma: border-secondary */
+  --color-required: #ffaac9; /* Figma: text-secondary-on-brand */
+
+  /* badge */
+  --color-badge-success: #079455; /* Figma: fg-success-primary */
+  --color-badge-warning: #dc6803; /* Figma: fg-warning-primary */
+  --color-badge-error: #d92d20; /* Figma: fg-error-primary */
+
+  /* status */
+  --color-success: #079455; /* Figma: bg-success-solid */
+  --color-warning: #dc6803; /* Figma: bg-warning-solid */
+
+  /* tabs */
+  --color-quaternary-foreground: #6f7f7f; /* Figma: text-quaternary */
+
+  /* avatar */
+  --color-avatar-border: rgba(0, 0, 0, 0.08); /* Figma: border overlay on avatar image */
+  --color-avatar-online: #079455; /* Figma: bg-success-solid */
+
+  /* radius */
+  --radius-xs: 4px; /* Figma: radius-xs */
+  --radius-sm: 6px; /* Figma: radius-sm */
+  --radius-md: 8px; /* Figma: radius-md */
+  --radius-lg: 10px; /* Figma: radius-lg */
+  --radius-xl: 12px; /* Figma: radius-xl */
+  --radius-2xl: 16px; /* Figma: radius-2xl */
+
+  /* overlay */
+  --color-overlay: rgba(7, 23, 24, 0.7); /* Figma: bg-overlay at 70% */
+
+  /* animations */
+  --animate-accordion-down: accordion-down 200ms ease-out;
+  --animate-accordion-up: accordion-up 200ms ease-out;
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* ─── Dark mode ───────────────────────────────────────────────────────────── */
+
+.dark {
+  --color-background: #071718; /* Figma: bg-primary */
+  --color-foreground: #ffffff; /* Figma: fg-primary */
+  --color-border: #213535; /* Figma: border-primary */
+
+  --color-accent: #0c1c1c; /* Figma: bg-secondary */
+  --color-accent-foreground: #ffffff;
+
+  --color-muted: #0c1c1c; /* Figma: bg-secondary */
+  --color-muted-foreground: #90a4a4; /* Figma: fg-secondary */
+
+  --color-shadow: #ffffff1a;
+
+  --color-inverted: #0c1c1c; /* Figma: bg-primary-solid */
+  --color-inverted-foreground: #ffffff; /* Figma: fg-white */
+
+  --color-primary-hover: #f22b79; /* Figma: bg-brand-solid-hover */
+  --color-primary-hover-foreground: #ffffff;
+
+  --color-background-hover: #162828; /* Figma: bg-primary-hover */
+  --color-muted-foreground-hover: #b8c8c8; /* Figma: text-secondary-hover */
+  --color-link: #90a4a4; /* Figma: text-brand-secondary */
+  --color-link-muted: #698080; /* Figma: text-tertiary */
+
+  --color-primary: #e90060; /* Figma: bg-brand-solid */
+  --color-primary-foreground: #ffffff; /* Figma: fg-white */
+
+  --color-tertiary: #f22b79; /* Figma: fg-brand-primary */
+
+  --color-destructive: #d92d20; /* Figma: bg-error-solid */
+  --color-destructive-foreground: #ffffff;
+  --color-destructive-hover: #f04438; /* Figma: bg-error-solid-hover */
+
+  --color-ring: #f22b79; /* Figma: focus-ring */
+
+  /* sidebar */
+  --color-sidebar: #0c1c1c; /* Figma: bg-secondary */
+  --color-sidebar-foreground: #90a4a4; /* Figma: fg-secondary */
+  --color-sidebar-primary: #ffffff; /* Figma: fg-primary */
+  --color-sidebar-primary-foreground: #071718;
+  --color-sidebar-accent: #162828; /* Figma: bg-tertiary */
+  --color-sidebar-accent-foreground: #ffffff;
+  --color-sidebar-border: #162828; /* Figma: border-tertiary */
+  --color-sidebar-ring: #f22b79; /* Figma: focus-ring */
+
+  /* card */
+  --color-card: #0c1c1c; /* Figma: bg-secondary */
+  --color-card-foreground: #ffffff;
+
+  /* popover */
+  --color-popover: #071718; /* Figma: bg-primary */
+  --color-popover-foreground: #ffffff; /* Figma: fg-primary */
+
+  /* surfaces */
+  --color-subtle: #243838; /* Figma: bg-tertiary (darkened to distinguish from disabled) */
+  --color-subtle-foreground: #698080; /* Figma: fg-tertiary */
+
+  /* input */
+  --color-placeholder: #465b5b; /* Figma: text-placeholder */
+  --color-border-error: #f04438; /* Figma: border-error-subtle */
+  --color-disabled: #162828; /* Figma: bg-disabled */
+  --color-disabled-foreground: #465b5b; /* Figma: text-disabled */
+  --color-border-secondary: #162828; /* Figma: border-secondary */
+  --color-required: #90a4a4; /* Figma: text-secondary-on-brand */
+
+  /* badge */
+  --color-badge-success: #17b26a; /* Figma: fg-success-primary */
+  --color-badge-warning: #f79009; /* Figma: fg-warning-primary */
+  --color-badge-error: #f04438; /* Figma: fg-error-primary */
+
+  /* status */
+  --color-success: #079455; /* Figma: bg-success-solid */
+  --color-warning: #dc6803; /* Figma: bg-warning-solid */
+
+  /* tabs */
+  --color-quaternary-foreground: #698080; /* Figma: text-quaternary */
+
+  /* avatar */
+  --color-avatar-border: rgba(255, 255, 255, 0.08); /* Figma: border overlay on avatar image */
+  --color-avatar-online: #17b26a; /* Figma: fg-success-secondary */
+
+  /* overlay */
+  --color-overlay: rgba(22, 40, 40, 0.7); /* Figma: bg-overlay at 70% */
+
+  /* code editor */
+  --color-code: #071718;
+  --color-code-foreground: #ffffff;
+}
+
+/* ─── Base layer ──────────────────────────────────────────────────────────── */
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@layer base {
+  * {
+    @apply border-border shadow-shadow;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  button,
+  a {
+    cursor: pointer;
+  }
+}
+
+/* ─── Typography ──────────────────────────────────────────────────────────── */
+
+:root {
+  /* Font sizes — display */
+  --font-size-display-2xl: 72px;
+  --font-size-display-xl: 60px;
+  --font-size-display-lg: 48px;
+  --font-size-display-md: 36px;
+  --font-size-display-sm: 30px;
+  --font-size-display-xs: 24px;
+
+  /* Font sizes — text */
+  --font-size-text-xl: 20px;
+  --font-size-text-lg: 18px;
+  --font-size-text-md: 16px;
+  --font-size-text-sm: 14px;
+  --font-size-text-xs: 12px;
+
+  /* Line heights — display */
+  --line-height-display-2xl: 90px;
+  --line-height-display-xl: 72px;
+  --line-height-display-lg: 60px;
+  --line-height-display-md: 44px;
+  --line-height-display-sm: 38px;
+  --line-height-display-xs: 32px;
+
+  /* Line heights — text */
+  --line-height-text-xl: 30px;
+  --line-height-text-lg: 28px;
+  --line-height-text-md: 24px;
+  --line-height-text-sm: 20px;
+  --line-height-text-xs: 18px;
+
+  /* Letter spacing */
+  --tracking-display: -2px;
+  --tracking-normal: 0px;
+}
+
+/* ─── Type preset utilities ───────────────────────────────────────────────── */
+
+@utility type-display-2xl {
+  font-family: var(--font-display);
+  font-size: var(--font-size-display-2xl);
+  line-height: var(--line-height-display-2xl);
+  letter-spacing: var(--tracking-display);
+}
+
+@utility type-display-xl {
+  font-family: var(--font-display);
+  font-size: var(--font-size-display-xl);
+  line-height: var(--line-height-display-xl);
+  letter-spacing: var(--tracking-display);
+}
+
+@utility type-display-lg {
+  font-family: var(--font-display);
+  font-size: var(--font-size-display-lg);
+  line-height: var(--line-height-display-lg);
+  letter-spacing: var(--tracking-display);
+}
+
+@utility type-display-md {
+  font-family: var(--font-display);
+  font-size: var(--font-size-display-md);
+  line-height: var(--line-height-display-md);
+  letter-spacing: var(--tracking-display);
+}
+
+@utility type-display-sm {
+  font-family: var(--font-display);
+  font-size: var(--font-size-display-sm);
+  line-height: var(--line-height-display-sm);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility type-display-xs {
+  font-family: var(--font-display);
+  font-size: var(--font-size-display-xs);
+  line-height: var(--line-height-display-xs);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility type-text-xl {
+  font-family: var(--font-body);
+  font-size: var(--font-size-text-xl);
+  line-height: var(--line-height-text-xl);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility type-text-lg {
+  font-family: var(--font-body);
+  font-size: var(--font-size-text-lg);
+  line-height: var(--line-height-text-lg);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility type-text-md {
+  font-family: var(--font-body);
+  font-size: var(--font-size-text-md);
+  line-height: var(--line-height-text-md);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility type-text-sm {
+  font-family: var(--font-body);
+  font-size: var(--font-size-text-sm);
+  line-height: var(--line-height-text-sm);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility type-text-xs {
+  font-family: var(--font-body);
+  font-size: var(--font-size-text-xs);
+  line-height: var(--line-height-text-xs);
+  letter-spacing: var(--tracking-normal);
+}