@alpic-ai/ui 0.0.0

package/src/components/dialog.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { XIcon } from "lucide-react";
+import type * as React from "react";
+import { cn } from "../lib/cn";
+import { Button, type ButtonProps } from "./button";
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-overlay",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const dialogContentVariants = cva(
+  [
+    "bg-background fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2",
+    "overflow-y-auto rounded-2xl px-6 shadow-lg outline-none",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+    "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+    "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+    "duration-200",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "max-w-[400px]",
+        lg: "max-w-[544px]",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  },
+);
+
+interface DialogContentProps
+  extends React.ComponentProps<typeof DialogPrimitive.Content>,
+    VariantProps<typeof dialogContentVariants> {
+  showCloseButton?: boolean;
+}
+
+function DialogContent({ className, children, size, showCloseButton = true, ...props }: DialogContentProps) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(dialogContentVariants({ size }), className)}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className={cn(
+              "absolute top-3 right-4 flex size-8 items-center justify-center rounded-md",
+              "text-subtle-foreground transition-colors",
+              "[@media(hover:hover)]:hover:text-foreground",
+              "focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+              "disabled:pointer-events-none",
+            )}
+          >
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="dialog-header" className={cn("flex flex-col gap-0.5 pt-6 pr-10", className)} {...props} />;
+}
+
+const dialogFooterVariants = cva("pb-6 pt-6", {
+  variants: {
+    layout: {
+      horizontal: "flex gap-3 [&>*]:flex-1",
+      vertical: "flex flex-col gap-3",
+    },
+  },
+  defaultVariants: {
+    layout: "horizontal",
+  },
+});
+
+interface DialogFooterProps extends React.ComponentProps<"div">, VariantProps<typeof dialogFooterVariants> {}
+
+function DialogFooter({ className, layout, ...props }: DialogFooterProps) {
+  return <div data-slot="dialog-footer" className={cn(dialogFooterVariants({ layout }), className)} {...props} />;
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("type-text-md font-semibold text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogClose({ children = "Cancel", ...props }: Omit<ButtonProps, "variant" | "asChild">) {
+  return (
+    <DialogPrimitive.Close data-slot="dialog-cancel" asChild>
+      <Button variant="secondary" {...props}>
+        {children}
+      </Button>
+    </DialogPrimitive.Close>
+  );
+}
+
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("type-text-sm text-subtle-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export type { DialogContentProps, DialogFooterProps };
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  dialogContentVariants,
+  dialogFooterVariants,
+};

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ChevronRightIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../lib/cn";
+
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground",
+          "z-50 min-w-60 overflow-x-hidden overflow-y-auto rounded-md border border-border-secondary py-1 shadow-lg",
+          "max-h-(--radix-dropdown-menu-content-available-height)",
+          "origin-(--radix-dropdown-menu-content-transform-origin)",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+/* ── Item ─────────────────────────────────────────────────────────────────── */
+
+const dropdownMenuItemVariants = cva(
+  [
+    "relative flex cursor-default items-center gap-2 rounded-sm px-2.5 py-2 outline-hidden select-none",
+    "type-text-sm font-semibold",
+    "mx-1.5 my-px",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: [
+          "text-muted-foreground",
+          "[&_svg:not([class*='text-'])]:text-muted-foreground",
+          "[@media(hover:hover)]:hover:bg-background-hover [@media(hover:hover)]:hover:text-muted-foreground-hover",
+          "focus:bg-background-hover focus:text-muted-foreground-hover",
+        ].join(" "),
+        destructive: [
+          "text-destructive",
+          "[&_svg]:!text-destructive",
+          "[@media(hover:hover)]:hover:bg-destructive/10 dark:[@media(hover:hover)]:hover:bg-destructive/20",
+          "focus:bg-destructive/10 dark:focus:bg-destructive/20",
+        ].join(" "),
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> &
+  VariantProps<typeof dropdownMenuItemVariants> & {
+    inset?: boolean;
+  }) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      className={cn(dropdownMenuItemVariants({ variant }), inset && "pl-8", className)}
+      {...props}
+    />
+  );
+}
+
+/* ── Label ────────────────────────────────────────────────────────────────── */
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      className={cn("px-2.5 py-1.5 type-text-sm font-semibold text-foreground", inset && "pl-8", className)}
+      {...props}
+    />
+  );
+}
+
+/* ── Header (avatar group) ────────────────────────────────────────────────── */
+
+function DropdownMenuHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="dropdown-menu-header"
+      className={cn("flex items-center gap-2 border-b border-border-secondary p-3", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+/* ── Separator ────────────────────────────────────────────────────────────── */
+
+function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+/* ── Shortcut ─────────────────────────────────────────────────────────────── */
+
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto shrink-0 rounded-xs border border-border px-1 py-px type-text-xs font-medium text-subtle-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/* ── Sub menu ─────────────────────────────────────────────────────────────── */
+
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      className={cn(
+        dropdownMenuItemVariants({ variant: "default" }),
+        "data-[state=open]:bg-background-hover data-[state=open]:text-muted-foreground-hover",
+        inset && "pl-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border-secondary py-1 shadow-lg",
+        "origin-(--radix-dropdown-menu-content-transform-origin)",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuHeader,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  dropdownMenuItemVariants,
+};

package/src/components/input-group.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { cn } from "../lib/cn";
+
+function InputGroup({ className, children, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="input-group"
+      className={cn(
+        "group/input-group relative flex w-full items-center rounded-md border bg-background",
+        "h-9 min-w-0 has-[>textarea]:h-auto",
+        "transition-colors",
+
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+        // Focus state — matches Input component pattern.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:border-2",
+
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:border-border-error",
+
+        // Disabled state.
+        "has-[[data-slot=input-group-control]:disabled]:bg-disabled has-[[data-slot=input-group-control]:disabled]:text-disabled-foreground has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed",
+
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </fieldset>
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 type-text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 group-disabled/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+);
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: click delegates focus to the associated input control
+    // biome-ignore lint/a11y/useKeyWithClickEvents: click delegates focus to the associated input control
+    <div
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(event) => {
+        if ((event.target as HTMLElement).closest("button")) {
+          return;
+        }
+        const control = event.currentTarget.parentElement?.querySelector<HTMLElement>("textarea, input");
+        control?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="input-group-control"
+      className={cn(
+        "w-full flex-1 resize-none rounded-none border-0 bg-transparent px-3 py-3 shadow-none outline-none",
+        "type-text-md text-foreground placeholder:text-placeholder",
+        "focus-visible:ring-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { InputGroup, InputGroupAddon, InputGroupTextarea };

package/src/components/input.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../lib/cn";
+import { Label } from "./label";
+
+const inputSizeStyles = {
+  sm: {
+    standalone: "h-8 px-2 py-1.5 type-text-sm",
+    wrapper: "h-8",
+    inner: "px-2 py-1.5",
+    text: "type-text-sm",
+    leadingText: "pl-2 pr-2 type-text-sm",
+    leadingIcon: "pl-2 [&_svg]:size-4",
+  },
+  md: {
+    standalone: "h-8 px-2.5 py-1.5 type-text-md",
+    wrapper: "h-8",
+    inner: "px-2.5 py-1.5",
+    text: "type-text-md",
+    leadingText: "pl-2.5 pr-2 type-text-md",
+    leadingIcon: "pl-2.5 [&_svg]:size-5",
+  },
+};
+
+interface InputProps extends Omit<React.ComponentProps<"input">, "size"> {
+  label?: string;
+  required?: boolean;
+  hint?: string;
+  error?: string;
+  leadingText?: string;
+  leadingIcon?: React.ReactNode;
+  size?: "sm" | "md";
+}
+
+function Input({
+  className,
+  id,
+  label,
+  required,
+  hint,
+  error,
+  leadingText,
+  leadingIcon,
+  size = "md",
+  ...props
+}: InputProps) {
+  const generatedId = React.useId();
+  const fieldId = id ?? generatedId;
+
+  const hasAddons = leadingText || leadingIcon;
+  const sizes = inputSizeStyles[size];
+
+  const inputElement = (
+    <input
+      id={fieldId}
+      data-slot="input"
+      className={cn(
+        "w-full min-w-0 bg-transparent outline-none",
+        sizes.text,
+        "text-foreground placeholder:text-placeholder",
+        "disabled:cursor-not-allowed",
+        !hasAddons && [
+          "flex",
+          sizes.standalone,
+          "bg-background border border-border rounded-md",
+          "transition-colors",
+          "focus-visible:border-ring focus-visible:border-2",
+          "disabled:bg-disabled disabled:text-disabled-foreground",
+          "aria-invalid:border-border-error",
+          error && "border-border-error",
+        ],
+        hasAddons && "flex-1 min-h-0",
+        className,
+      )}
+      required={required}
+      aria-invalid={error ? true : undefined}
+      aria-describedby={fieldId && (hint || error) ? `${fieldId}-description` : undefined}
+      {...props}
+    />
+  );
+
+  const wrappedInput = hasAddons ? (
+    <div
+      className={cn(
+        "flex items-center w-full overflow-hidden",
+        sizes.wrapper,
+        "bg-background border border-border rounded-md",
+        "transition-colors",
+        "has-[input:focus-visible]:border-ring has-[input:focus-visible]:border-2",
+        "has-[input:disabled]:bg-disabled has-[input:disabled]:text-disabled-foreground has-[input:disabled]:cursor-not-allowed",
+        error && "border-border-error",
+      )}
+    >
+      {leadingIcon && (
+        <span className={cn("flex items-center text-subtle-foreground [&_svg]:shrink-0", sizes.leadingIcon)}>
+          {leadingIcon}
+        </span>
+      )}
+      {leadingText && (
+        <span
+          className={cn(
+            "flex items-center text-subtle-foreground whitespace-nowrap border-r border-border self-stretch",
+            sizes.leadingText,
+          )}
+        >
+          {leadingText}
+        </span>
+      )}
+      <div className={cn("flex flex-1 items-center min-w-0", sizes.inner)}>{inputElement}</div>
+    </div>
+  ) : (
+    inputElement
+  );
+
+  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>
+      )}
+      {wrappedInput}
+      {(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 { InputProps };
+export { Input };

package/src/components/label.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { cn } from "@alpic-ai/ui/lib/cn";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as React from "react";
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };