@stasho/ds 0.1.0

package/src/components/button/button.tsx

@@ -0,0 +1,153 @@
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type ButtonHTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+import { Spinner } from "@ac/components/ui/spinner";
+
+const buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center",
+    "font-heading font-bold",
+    "rounded-full border-3 transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2",
+    "focus-visible:ring-primary-400 focus-visible:ring-offset-2",
+    "disabled:pointer-events-none",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        primary: [
+          "gradient-fill-main text-white border-transparent",
+          "disabled:opacity-50",
+        ].join(" "),
+        secondary: [
+          "gradient-fill-lime text-neutral-950 border-neutral-950",
+          "disabled:opacity-50",
+        ].join(" "),
+        outline: [
+          "border-gradient-main text-primary-700",
+          "hover:text-primary-800",
+          "active:text-primary-800",
+          "disabled:opacity-50",
+        ].join(" "),
+        text: [
+          "bg-transparent text-primary-600 dark:text-primary-300 border-transparent",
+          "hover:bg-primary-100 hover:text-primary-700",
+          "dark:hover:bg-primary-200/10 dark:hover:text-primary-200",
+          "active:bg-primary-200 active:text-primary-800",
+          "dark:active:bg-primary-700 dark:active:text-primary-100",
+          "disabled:bg-transparent disabled:text-primary-600/50",
+          "dark:disabled:text-primary-300/50",
+        ].join(" "),
+        destructive: [
+          "bg-error-600/20 text-error-700 dark:text-error-300 border-error-600",
+          "hover:bg-error-600/30 hover:border-error-700",
+          "active:bg-error-600/40 active:border-error-800",
+          "disabled:bg-error-600/10 disabled:text-error-700/50 disabled:border-error-600/50",
+        ].join(" "),
+        warning: [
+          "bg-warning-500/20 text-warning-800 dark:text-warning-200 border-warning-500",
+          "hover:bg-warning-500/30 hover:border-warning-600",
+          "active:bg-warning-500/40 active:border-warning-700",
+          "disabled:bg-warning-500/10 disabled:text-warning-800/50 disabled:border-warning-500/50",
+        ].join(" "),
+      },
+      size: {
+        xs: "py-1 px-4 text-sm gap-1",
+        sm: "py-1.5 px-5 text-base gap-1.5",
+        md: "py-2 px-6 text-base gap-2",
+        lg: "py-2.5 px-8 text-lg gap-2",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  },
+);
+
+const iconSize = {
+  xs: "size-3.5",
+  sm: "size-4",
+  md: "size-4",
+  lg: "size-5",
+} as const;
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants> & {
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    loading?: boolean;
+    asChild?: boolean;
+  };
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant,
+      size,
+      iconLeft,
+      iconRight,
+      loading = false,
+      disabled = false,
+      asChild = false,
+      className,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const sizeKey = size ?? "md";
+    const classes = cn(
+      buttonVariants({ variant, size }),
+      loading && "pointer-events-none",
+      className,
+    );
+
+    const iconClass = cn("shrink-0", iconSize[sizeKey], "[&>svg]:size-full");
+
+    const content = (
+      <>
+        {loading ? (
+          <Spinner className={cn("shrink-0", iconSize[sizeKey])} />
+        ) : iconLeft ? (
+          <span className={iconClass}>{iconLeft}</span>
+        ) : null}
+        <span>{children}</span>
+        {!loading && iconRight ? (
+          <span className={iconClass}>{iconRight}</span>
+        ) : null}
+      </>
+    );
+
+    if (asChild && isValidElement(children)) {
+      return cloneElement(children as ReactElement<Record<string, unknown>>, {
+        className: classes,
+        ref,
+        ...rest,
+      });
+    }
+
+    return (
+      <button
+        ref={ref}
+        className={classes}
+        disabled={disabled}
+        aria-busy={loading || undefined}
+        {...rest}
+      >
+        {content}
+      </button>
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+export { Button, buttonVariants, type ButtonProps };

package/src/components/card/card.tsx

@@ -0,0 +1,48 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+
+const cardVariants = cva("rounded-md", {
+  variants: {
+    variant: {
+      default: "bg-surface text-surface-foreground",
+      noise: "fx-grain-lg text-surface-foreground",
+      ghost: "bg-transparent",
+    },
+    padding: {
+      sm: "p-4",
+      md: "p-6",
+      lg: "p-8",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    padding: "md",
+  },
+});
+
+type CardProps = HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof cardVariants> & {
+    title?: ReactNode;
+  };
+
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ variant, padding, title, className, children, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(cardVariants({ variant, padding }), className)}
+        {...rest}
+      >
+        {title ? (
+          <h3 className="mb-4 text-lg font-heading font-bold">{title}</h3>
+        ) : null}
+        {children}
+      </div>
+    );
+  },
+);
+
+Card.displayName = "Card";
+
+export { Card, cardVariants, type CardProps };

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,82 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+
+const checkboxVariants = cva(
+  [
+    "peer shrink-0 bg-surface",
+    "border-3 border-edge",
+    "hover:border-edge-hover",
+    "focus-visible:outline-none focus-visible:ring-3",
+    "focus-visible:ring-primary-500",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "data-[state=checked]:bg-primary data-[state=checked]:border-primary",
+    "data-[state=checked]:text-primary-foreground",
+    "transition-colors",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        xs: "size-4 rounded",
+        sm: "size-5 rounded-md",
+        md: "size-6 rounded-md",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+type CheckboxProps = Omit<
+  ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
+  "size"
+> &
+  VariantProps<typeof checkboxVariants> & {
+    error?: boolean;
+  };
+
+const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
+  ({ size, error = false, className, ...rest }, ref) => {
+    return (
+      <CheckboxPrimitive.Root
+        ref={ref}
+        className={cn(
+          checkboxVariants({ size }),
+          error && "border-3 border-error-400 hover:border-error-500",
+          className,
+        )}
+        aria-invalid={error || undefined}
+        {...rest}
+      >
+        <CheckboxPrimitive.Indicator
+          forceMount
+          className={cn(
+            "flex size-full items-center justify-center text-current",
+            "[clip-path:circle(0%_at_0%_75%)]",
+            "data-[state=checked]:[clip-path:circle(100%_at_50%_50%)]",
+            "transition-[clip-path] duration-200 ease-in-out motion-reduce:transition-none",
+          )}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={3}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="size-[90%]"
+          >
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+    );
+  },
+);
+
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox, checkboxVariants, type CheckboxProps };

package/src/components/combobox/combobox.tsx

@@ -0,0 +1,166 @@
+import { forwardRef, useState } from "react";
+import { Popover } from "radix-ui";
+import { Command } from "cmdk";
+import { cva, type VariantProps } from "class-variance-authority";
+import { CaretDown, Check } from "@phosphor-icons/react";
+import { cn } from "@ac/lib/cn";
+
+const triggerVariants = cva(
+  [
+    "inline-flex items-center justify-between",
+    "w-full font-sans text-foreground bg-primary-100 dark:bg-base-700",
+    "border-0 rounded-full",
+    "focus-visible:outline-none focus-visible:ring-3",
+    "focus-visible:ring-primary-500",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "ring-0 transition-colors",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "py-1.5 px-4 text-sm",
+        md: "py-2 px-5 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+type ComboboxOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+type ComboboxProps = VariantProps<typeof triggerVariants> & {
+  options: ComboboxOption[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  size?: "sm" | "md";
+  error?: boolean;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean;
+};
+
+const Combobox = forwardRef<HTMLButtonElement, ComboboxProps>(
+  (
+    {
+      options,
+      value,
+      onValueChange,
+      placeholder = "Select...",
+      searchPlaceholder = "Search...",
+      emptyMessage = "No results found.",
+      size,
+      error = false,
+      disabled = false,
+      className,
+      id,
+      "aria-describedby": ariaDescribedBy,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(false);
+    const selectedLabel = options.find((o) => o.value === value)?.label;
+
+    return (
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.Trigger
+          ref={ref}
+          id={id}
+          disabled={disabled}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={error || undefined}
+          className={cn(
+            triggerVariants({ size }),
+            error && "border-3 border-error-400 hover:border-error-500",
+            !selectedLabel && "text-muted-foreground",
+            className,
+          )}
+          {...rest}
+        >
+          <span className="truncate">
+            {selectedLabel ?? placeholder}
+          </span>
+          <CaretDown
+            weight="bold"
+            className={cn(
+              "ml-2 size-4 shrink-0 text-muted-foreground",
+              "transition-transform motion-reduce:transition-none",
+              open && "rotate-180",
+            )}
+            aria-hidden="true"
+          />
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            className={cn(
+              "z-50 w-[var(--radix-popover-trigger-width)]",
+              "overflow-hidden rounded-2xl",
+              "bg-surface border border-edge shadow-brand",
+            )}
+            sideOffset={4}
+            align="start"
+          >
+            <Command>
+              <Command.Input
+                placeholder={searchPlaceholder}
+                className={cn(
+                  "w-full border-b border-edge bg-transparent px-4 py-2.5",
+                  "text-sm text-foreground placeholder:text-muted-foreground",
+                  "outline-none",
+                )}
+              />
+              <Command.List className="max-h-60 overflow-y-auto p-1">
+                <Command.Empty className="px-4 py-6 text-center text-sm text-muted-foreground">
+                  {emptyMessage}
+                </Command.Empty>
+                {options.map((option) => (
+                  <Command.Item
+                    key={option.value}
+                    value={option.label}
+                    {...(option.disabled ? { disabled: true } : {})}
+                    onSelect={() => {
+                      onValueChange?.(option.value);
+                      setOpen(false);
+                    }}
+                    className={cn(
+                      "relative flex items-center rounded-xl px-4 py-2",
+                      "text-sm text-foreground cursor-pointer select-none",
+                      "outline-none",
+                      "data-[selected=true]:bg-muted",
+                      "data-[disabled=true]:opacity-50",
+                      "data-[disabled=true]:pointer-events-none",
+                    )}
+                  >
+                    <span className="flex-1">{option.label}</span>
+                    {value === option.value && (
+                      <Check
+                        weight="bold"
+                        className="ml-auto size-4"
+                        aria-hidden="true"
+                      />
+                    )}
+                  </Command.Item>
+                ))}
+              </Command.List>
+            </Command>
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    );
+  },
+);
+
+Combobox.displayName = "Combobox";
+
+export { Combobox, triggerVariants, type ComboboxProps, type ComboboxOption };

package/src/components/copyable-text/copyable-text.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type HTMLAttributes,
+} from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ArrowUpRight, Copy } from "@phosphor-icons/react";
+import { cn } from "@ac/lib/cn";
+
+const copyableTextVariants = cva(
+  "inline-flex items-center font-mono select-none",
+  {
+    variants: {
+      size: {
+        sm: "text-xs gap-1",
+        md: "text-sm gap-1.5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+const iconSize: Record<"sm" | "md", string> = {
+  sm: "size-3.5",
+  md: "size-4",
+};
+
+const buttonSize: Record<"sm" | "md", string> = {
+  sm: "size-4",
+  md: "size-5",
+};
+
+function isExternalUrl(url: string): boolean {
+  return /^https?:\/\//.test(url) || url.startsWith("//");
+}
+
+function truncateMiddle(
+  text: string,
+  startChars: number,
+  endChars: number,
+): string {
+  if (text.length <= startChars + endChars) return text;
+  return `${text.slice(0, startChars)}...${text.slice(-endChars)}`;
+}
+
+type CopyableTextProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> &
+  VariantProps<typeof copyableTextVariants> & {
+    text: string;
+    startChars?: number;
+    endChars?: number;
+    href?: string;
+  };
+
+const CopyableText = forwardRef<HTMLSpanElement, CopyableTextProps>(
+  (
+    {
+      text,
+      startChars = 6,
+      endChars = 4,
+      href,
+      size = "md",
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [copied, setCopied] = useState(false);
+    const timerRef = useRef<ReturnType<typeof setTimeout>>(null);
+
+    useEffect(() => {
+      return () => {
+        if (timerRef.current) clearTimeout(timerRef.current);
+      };
+    }, []);
+
+    const handleCopy = useCallback((e: React.MouseEvent) => {
+      e.stopPropagation();
+      void navigator.clipboard.writeText(text).then(() => {
+        setCopied(true);
+        if (timerRef.current) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => setCopied(false), 1500);
+      });
+    }, [text]);
+
+    const resolvedSize = size ?? "md";
+    const iconCn = iconSize[resolvedSize];
+    const btnCn = buttonSize[resolvedSize];
+
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          copyableTextVariants({ size }),
+          href && "text-primary-500 dark:text-primary-300",
+          className,
+        )}
+        {...rest}
+      >
+        {href ? (
+          <a
+            href={href}
+            {...(isExternalUrl(href)
+              ? { target: "_blank", rel: "noopener noreferrer" }
+              : {})}
+            onClick={(e) => e.stopPropagation()}
+            className="cursor-pointer hover:underline"
+          >
+            {truncateMiddle(text, startChars, endChars)}
+          </a>
+        ) : (
+          <span className="cursor-default">
+            {truncateMiddle(text, startChars, endChars)}
+          </span>
+        )}
+
+        <button
+            type="button"
+            onClick={handleCopy}
+            className={cn(
+              "relative inline-flex items-center justify-center",
+              "rounded-md cursor-pointer",
+              "hover:bg-foreground/10 transition-colors",
+              btnCn,
+            )}
+            aria-label={copied ? "Copied" : "Copy to clipboard"}
+          >
+            <Copy
+              weight="bold"
+              className={cn(
+                iconCn,
+                "text-muted-foreground",
+                "transition-opacity duration-100",
+                "motion-reduce:transition-none",
+                copied && "opacity-0",
+              )}
+              aria-hidden="true"
+            />
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={3}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className={cn(
+                iconCn,
+                "text-muted-foreground absolute",
+                "[stroke-dasharray:20] [stroke-dashoffset:20]",
+                "transition-[stroke-dashoffset] duration-300 delay-75 ease-out",
+                "motion-reduce:transition-none",
+                copied && "[stroke-dashoffset:0]",
+              )}
+              aria-hidden="true"
+            >
+              <polyline points="4 12 9 17 20 6" />
+            </svg>
+          </button>
+
+        {href && isExternalUrl(href) ? (
+          <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => e.stopPropagation()}
+            className={cn(
+              "inline-flex items-center justify-center rounded-md",
+              "text-muted-foreground hover:text-foreground",
+              "hover:bg-foreground/10 transition-colors",
+              btnCn,
+            )}
+            aria-label="Open in new tab"
+          >
+            <ArrowUpRight
+              weight="bold"
+              className={iconCn}
+              aria-hidden="true"
+            />
+          </a>
+        ) : null}
+      </span>
+    );
+  },
+);
+
+CopyableText.displayName = "CopyableText";
+
+export { CopyableText, copyableTextVariants, type CopyableTextProps };