@alpic-ai/ui 0.0.0

package/src/components/combobox.tsx

@@ -0,0 +1,393 @@
+"use client";
+
+import type { VariantProps } from "class-variance-authority";
+import { Command as CommandPrimitive } from "cmdk";
+import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
+import { createContext, type ReactNode, useCallback, useContext, useMemo, useState } from "react";
+
+import { cn } from "../lib/cn";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { selectTriggerVariants } from "./select-trigger-variants";
+import { TagDismissible } from "./tag";
+
+/* ── Context ──────────────────────────────────────────────────────────────── */
+
+interface ComboboxContextValue {
+  multiple: boolean;
+  value: string | null;
+  values: string[];
+  onSelect: (itemValue: string) => void;
+  onDeselect: (itemValue: string) => void;
+  isSelected: (itemValue: string) => boolean;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const ComboboxContext = createContext<ComboboxContextValue | null>(null);
+
+function useComboboxContext() {
+  const context = useContext(ComboboxContext);
+  if (!context) {
+    throw new Error("Combobox compound components must be used within <Combobox>");
+  }
+  return context;
+}
+
+/* ── Root ─────────────────────────────────────────────────────────────────── */
+
+interface ComboboxBaseProps {
+  children: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+interface ComboboxSingleProps extends ComboboxBaseProps {
+  multiple?: false;
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+}
+
+interface ComboboxMultipleProps extends ComboboxBaseProps {
+  multiple: true;
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+}
+
+type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
+
+function Combobox(props: ComboboxProps) {
+  const {
+    children,
+    multiple = false,
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange: controlledOnOpenChange,
+  } = props;
+
+  // Single mode state
+  const [uncontrolledSingleValue, setUncontrolledSingleValue] = useState<string | null>(
+    !multiple ? ((props as ComboboxSingleProps).defaultValue ?? null) : null,
+  );
+
+  // Multi mode state
+  const [uncontrolledMultiValue, setUncontrolledMultiValue] = useState<string[]>(
+    multiple ? ((props as ComboboxMultipleProps).defaultValue ?? []) : [],
+  );
+
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+
+  const isOpenControlled = controlledOpen !== undefined;
+  const open = isOpenControlled ? controlledOpen : uncontrolledOpen;
+
+  const onOpenChange = useCallback(
+    (newOpen: boolean) => {
+      if (!isOpenControlled) setUncontrolledOpen(newOpen);
+      controlledOnOpenChange?.(newOpen);
+    },
+    [isOpenControlled, controlledOnOpenChange],
+  );
+
+  // Resolve current values
+  const singleValue = multiple
+    ? null
+    : (((props as ComboboxSingleProps).value !== undefined
+        ? (props as ComboboxSingleProps).value
+        : uncontrolledSingleValue) ?? null);
+
+  const multiValues = multiple
+    ? (props as ComboboxMultipleProps).value !== undefined
+      ? ((props as ComboboxMultipleProps).value as string[])
+      : uncontrolledMultiValue
+    : [];
+
+  const isSelected = useCallback(
+    (itemValue: string) => {
+      if (multiple) return multiValues.includes(itemValue);
+      return singleValue === itemValue;
+    },
+    [multiple, singleValue, multiValues],
+  );
+
+  // Extract specific callbacks to avoid depending on the entire props object
+  const onValueChangeSingle = !multiple ? (props as ComboboxSingleProps).onValueChange : undefined;
+  const onValueChangeMulti = multiple ? (props as ComboboxMultipleProps).onValueChange : undefined;
+  const isControlledSingle = !multiple && (props as ComboboxSingleProps).value !== undefined;
+  const isControlledMulti = multiple && (props as ComboboxMultipleProps).value !== undefined;
+
+  const onSelect = useCallback(
+    (itemValue: string) => {
+      if (multiple) {
+        const next = multiValues.includes(itemValue)
+          ? multiValues.filter((val) => val !== itemValue)
+          : [...multiValues, itemValue];
+        if (!isControlledMulti) setUncontrolledMultiValue(next);
+        onValueChangeMulti?.(next);
+        // Stay open in multi mode
+      } else {
+        if (!isControlledSingle) setUncontrolledSingleValue(itemValue);
+        onValueChangeSingle?.(itemValue);
+        onOpenChange(false);
+      }
+    },
+    [
+      multiple,
+      isControlledMulti,
+      isControlledSingle,
+      onValueChangeMulti,
+      onValueChangeSingle,
+      multiValues,
+      onOpenChange,
+    ],
+  );
+
+  const onDeselect = useCallback(
+    (itemValue: string) => {
+      if (!multiple) return;
+      const next = multiValues.filter((val) => val !== itemValue);
+      if (!isControlledMulti) setUncontrolledMultiValue(next);
+      onValueChangeMulti?.(next);
+    },
+    [multiple, isControlledMulti, onValueChangeMulti, multiValues],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      multiple,
+      value: singleValue,
+      values: multiValues,
+      onSelect,
+      onDeselect,
+      isSelected,
+      open,
+      onOpenChange,
+    }),
+    [multiple, singleValue, multiValues, onSelect, onDeselect, isSelected, open, onOpenChange],
+  );
+
+  return (
+    <ComboboxContext.Provider value={contextValue}>
+      <Popover open={open} onOpenChange={onOpenChange}>
+        {children}
+      </Popover>
+    </ComboboxContext.Provider>
+  );
+}
+
+/* ── Trigger ──────────────────────────────────────────────────────────────── */
+
+interface ComboboxTriggerProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size">,
+    VariantProps<typeof selectTriggerVariants> {
+  placeholder?: string;
+}
+
+function ComboboxTrigger({ className, size, placeholder, children, ...props }: ComboboxTriggerProps) {
+  const { multiple, value, values, open, onDeselect } = useComboboxContext();
+
+  const isEmpty = multiple ? values.length === 0 : value === null || value === undefined;
+
+  return (
+    <PopoverTrigger asChild>
+      <button
+        type="button"
+        data-slot="combobox-trigger"
+        role="combobox"
+        aria-expanded={open}
+        className={cn(selectTriggerVariants({ size }), className)}
+        {...props}
+      >
+        <span
+          className={cn(
+            "flex flex-1 items-center gap-1.5 text-left",
+            multiple && "flex-wrap",
+            isEmpty && "text-placeholder",
+          )}
+        >
+          {isEmpty ? placeholder : multiple ? <ComboboxTags values={values} onDeselect={onDeselect} /> : children}
+        </span>
+        <ChevronDownIcon className="size-5 shrink-0 text-muted-foreground" />
+      </button>
+    </PopoverTrigger>
+  );
+}
+
+/* ── Tags (internal, for multi-select trigger) ────────────────────────────── */
+
+function ComboboxTags({ values, onDeselect }: { values: string[]; onDeselect: (value: string) => void }) {
+  return (
+    <>
+      {values.map((tagValue) => (
+        <TagDismissible
+          key={tagValue}
+          onClick={(event) => event.stopPropagation()}
+          onDismiss={() => onDeselect(tagValue)}
+        >
+          {tagValue}
+        </TagDismissible>
+      ))}
+    </>
+  );
+}
+
+/* ── Content ──────────────────────────────────────────────────────────────── */
+
+interface ComboboxContentProps extends React.ComponentProps<typeof PopoverContent> {
+  className?: string;
+  children?: ReactNode;
+  filter?: React.ComponentProps<typeof CommandPrimitive>["filter"];
+}
+
+function ComboboxContent({ className, children, filter, ...props }: ComboboxContentProps) {
+  const { multiple } = useComboboxContext();
+
+  return (
+    <PopoverContent
+      className={cn("w-[var(--radix-popover-trigger-width)] p-0", className)}
+      align="start"
+      onOpenAutoFocus={multiple ? (event: Event) => event.preventDefault() : undefined}
+      {...props}
+    >
+      <CommandPrimitive
+        data-slot="combobox-command"
+        filter={filter}
+        className="flex h-full w-full flex-col overflow-hidden rounded-md bg-popover"
+      >
+        {children}
+      </CommandPrimitive>
+    </PopoverContent>
+  );
+}
+
+/* ── Search ───────────────────────────────────────────────────────────────── */
+
+function ComboboxSearch({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="combobox-search" className="flex items-center gap-2 border-b border-border-secondary px-3 py-2.5">
+      <SearchIcon className="size-5 shrink-0 text-muted-foreground" />
+      <CommandPrimitive.Input
+        data-slot="combobox-search-input"
+        className={cn(
+          "flex h-full w-full bg-transparent type-text-md font-medium text-foreground outline-hidden",
+          "placeholder:text-placeholder",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+/* ── List ─────────────────────────────────────────────────────────────────── */
+
+function ComboboxList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="combobox-list"
+      className={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto py-1", className)}
+      {...props}
+    />
+  );
+}
+
+/* ── Empty ────────────────────────────────────────────────────────────────── */
+
+function ComboboxEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn("py-6 text-center type-text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+/* ── Group ────────────────────────────────────────────────────────────────── */
+
+function ComboboxGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="combobox-group"
+      className={cn(
+        "overflow-hidden [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:type-text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-subtle-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/* ── Separator ────────────────────────────────────────────────────────────── */
+
+function ComboboxSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("bg-border-secondary -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+/* ── Item ─────────────────────────────────────────────────────────────────── */
+
+interface ComboboxItemProps extends Omit<React.ComponentProps<typeof CommandPrimitive.Item>, "onSelect"> {
+  /** The value stored when this item is selected */
+  itemValue: string;
+}
+
+function ComboboxItem({ className, children, itemValue, ...props }: ComboboxItemProps) {
+  const { onSelect, isSelected } = useComboboxContext();
+  const selected = isSelected(itemValue);
+
+  return (
+    <CommandPrimitive.Item
+      data-slot="combobox-item"
+      data-selected-item={selected || undefined}
+      onSelect={() => onSelect(itemValue)}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-2.5 outline-hidden select-none",
+        "type-text-md font-medium text-foreground mx-1.5 my-px",
+        "data-[selected=true]:bg-background-hover",
+        "data-[selected-item]:bg-accent",
+        "data-[disabled=true]:pointer-events-none data-[disabled=true]:text-disabled-foreground",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5",
+        className,
+      )}
+      {...props}
+    >
+      <span className="flex flex-1 items-center gap-2 truncate">{children}</span>
+      {selected && <CheckIcon className="size-5 shrink-0 text-primary" />}
+    </CommandPrimitive.Item>
+  );
+}
+
+/* ── Item supporting text ─────────────────────────────────────────────────── */
+
+function ComboboxItemText({ className, children, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      data-slot="combobox-item-text"
+      className={cn("type-text-md font-normal text-subtle-foreground", className)}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
+
+export {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxItem,
+  ComboboxItemText,
+  ComboboxList,
+  ComboboxSearch,
+  ComboboxSeparator,
+  ComboboxTrigger,
+};

package/src/components/command.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { cn } from "@alpic-ai/ui/lib/cn";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+import type * as React from "react";
+
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn("bg-popover text-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="flex h-14 items-center gap-2 border-b p-3">
+      <SearchIcon className="size-5 shrink-0 text-muted-foreground" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-placeholder flex h-full w-full bg-transparent type-text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center type-text-sm text-muted-foreground"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-subtle-foreground overflow-hidden px-2 py-1 [&_[cmdk-group-heading]]:p-2 [&_[cmdk-group-heading]]:type-text-xs [&_[cmdk-group-heading]]:font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-background-hover [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-xs px-2 py-3 type-text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:text-disabled-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ml-auto shrink-0 rounded-xs border border-border-secondary px-1 py-px type-text-xs font-medium text-placeholder",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+};

package/src/components/copyable.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Check, Copy } from "lucide-react";
+import type { ReactNode } from "react";
+import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard";
+import { cn } from "../lib/cn";
+import { Button } from "./button";
+
+interface CopyableProps {
+  content: string;
+  children: ReactNode;
+  className?: string;
+}
+
+function Copyable({ content, children, className }: CopyableProps) {
+  const { copy, isCopied } = useCopyToClipboard();
+
+  return (
+    <div className={cn("flex items-center gap-1", className)}>
+      {children}
+      <Button
+        variant="tertiary"
+        size="icon"
+        onClick={(event) => {
+          event.preventDefault();
+          copy(content);
+        }}
+      >
+        {isCopied ? <Check className="size-4 text-success" /> : <Copy className="size-4 text-muted-foreground" />}
+      </Button>
+    </div>
+  );
+}
+
+interface CopyableUrlProps {
+  url: URL;
+}
+
+function CopyableUrl({ url }: CopyableUrlProps) {
+  return (
+    <Copyable content={url.href}>
+      <span className="font-semibold">{url.hostname}</span>
+    </Copyable>
+  );
+}
+
+export { Copyable, type CopyableProps, CopyableUrl, type CopyableUrlProps };

package/src/components/description-list.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { cn } from "@alpic-ai/ui/lib/cn";
+import type * as React from "react";
+
+function DescriptionList({ className, ...props }: React.ComponentProps<"dl">) {
+  return (
+    <dl
+      data-slot="description-list"
+      className={cn("grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4", className)}
+      {...props}
+    />
+  );
+}
+
+function DescriptionItem({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="description-item" className={cn("flex flex-col gap-1 xl:gap-1.5", className)} {...props} />;
+}
+
+function DescriptionTitle({ className, ...props }: React.ComponentProps<"dt">) {
+  return (
+    <dt
+      data-slot="description-title"
+      className={cn("type-text-xs font-medium text-subtle-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function DescriptionValue({ className, ...props }: React.ComponentProps<"dd">) {
+  return (
+    <dd data-slot="description-value" className={cn("type-text-sm text-foreground truncate", className)} {...props} />
+  );
+}
+
+export { DescriptionItem, DescriptionList, DescriptionTitle, DescriptionValue };