sonance-brand-mcp 1.0.0

package/dist/assets/components/autocomplete.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import { useState, useRef, useEffect, useMemo } from "react";
+import { Search, X, ChevronDown, Check, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface AutocompleteOption {
+  value: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+interface AutocompleteProps {
+  options: AutocompleteOption[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  onInputChange?: (input: string) => void;
+  placeholder?: string;
+  label?: string;
+  error?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  allowCustomValue?: boolean;
+  emptyMessage?: string;
+  className?: string;
+}
+
+export function Autocomplete({
+  options,
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  onInputChange,
+  placeholder = "Search...",
+  label,
+  error,
+  disabled = false,
+  loading = false,
+  allowCustomValue = false,
+  emptyMessage = "No results found",
+  className,
+}: AutocompleteProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [inputValue, setInputValue] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const value = controlledValue ?? internalValue;
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  // Filter options based on input
+  const filteredOptions = useMemo(() => {
+    if (!inputValue) return options;
+    const searchTerm = inputValue.toLowerCase();
+    return options.filter(
+      (opt) =>
+        opt.label.toLowerCase().includes(searchTerm) ||
+        opt.description?.toLowerCase().includes(searchTerm)
+    );
+  }, [options, inputValue]);
+
+  // Sync input value with selected option
+  useEffect(() => {
+    if (selectedOption && !isOpen) {
+      setInputValue(selectedOption.label);
+    }
+  }, [selectedOption, isOpen]);
+
+  const handleSelect = (optionValue: string) => {
+    setInternalValue(optionValue);
+    onValueChange?.(optionValue);
+    setIsOpen(false);
+    setHighlightedIndex(-1);
+
+    const option = options.find((opt) => opt.value === optionValue);
+    if (option) {
+      setInputValue(option.label);
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    onInputChange?.(newValue);
+    setIsOpen(true);
+    setHighlightedIndex(0);
+
+    if (allowCustomValue) {
+      setInternalValue(newValue);
+      onValueChange?.(newValue);
+    }
+  };
+
+  const handleClear = () => {
+    setInputValue("");
+    setInternalValue("");
+    onValueChange?.("");
+    inputRef.current?.focus();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!isOpen) {
+      if (e.key === "ArrowDown" || e.key === "Enter") {
+        setIsOpen(true);
+      }
+      return;
+    }
+
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setHighlightedIndex((prev) =>
+          prev < filteredOptions.length - 1 ? prev + 1 : prev
+        );
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+          handleSelect(filteredOptions[highlightedIndex].value);
+        }
+        break;
+      case "Escape":
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+        break;
+    }
+  };
+
+  // Close on click outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        if (selectedOption) {
+          setInputValue(selectedOption.label);
+        }
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [selectedOption]);
+
+  return (
+    <div ref={containerRef} className={cn("w-full", className)}>
+      {label && (
+        <label className="mb-2 block text-xs font-medium uppercase tracking-widest text-foreground-muted">
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground-muted" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            onFocus={() => setIsOpen(true)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            className={cn(
+              "w-full border border-input-border bg-input py-3 pl-10 pr-10",
+              "text-foreground placeholder:text-input-placeholder",
+              "transition-colors duration-200",
+              "focus:border-input-focus focus:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              error && "border-error",
+              isOpen && "border-input-focus"
+            )}
+          />
+          <div className="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
+            {loading && <Loader2 className="h-4 w-4 animate-spin text-foreground-muted" />}
+            {inputValue && !loading && (
+              <button
+                type="button"
+                onClick={handleClear}
+                className="p-0.5 hover:text-foreground text-foreground-muted"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            )}
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-foreground-muted transition-transform",
+                isOpen && "rotate-180"
+              )}
+            />
+          </div>
+        </div>
+
+        {isOpen && (
+          <div className="absolute z-50 mt-1 w-full border border-border bg-card shadow-lg max-h-60 overflow-auto">
+            {filteredOptions.length === 0 ? (
+              <div className="px-4 py-3 text-sm text-foreground-muted text-center">
+                {emptyMessage}
+              </div>
+            ) : (
+              filteredOptions.map((option, index) => (
+                <button
+                  key={option.value}
+                  type="button"
+                  onClick={() => !option.disabled && handleSelect(option.value)}
+                  disabled={option.disabled}
+                  className={cn(
+                    "flex w-full items-center justify-between px-4 py-2.5 text-left",
+                    "transition-colors duration-150",
+                    option.disabled && "cursor-not-allowed opacity-50",
+                    index === highlightedIndex && "bg-secondary-hover",
+                    option.value === value
+                      ? "bg-primary text-primary-foreground"
+                      : "text-foreground hover:bg-secondary-hover"
+                  )}
+                >
+                  <div>
+                    <div className="text-sm">{option.label}</div>
+                    {option.description && (
+                      <div className={cn(
+                        "text-xs mt-0.5",
+                        option.value === value ? "text-primary-foreground/70" : "text-foreground-muted"
+                      )}>
+                        {option.description}
+                      </div>
+                    )}
+                  </div>
+                  {option.value === value && <Check className="h-4 w-4" />}
+                </button>
+              ))
+            )}
+          </div>
+        )}
+      </div>
+      {error && <p className="mt-1 text-sm text-error">{error}</p>}
+    </div>
+  );
+}
+

package/dist/assets/components/avatar.tsx

@@ -0,0 +1,105 @@
+import { forwardRef } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { User } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const avatarVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center overflow-hidden bg-background-secondary",
+  {
+    variants: {
+      size: {
+        xs: "h-6 w-6 text-xs",
+        sm: "h-8 w-8 text-sm",
+        md: "h-10 w-10 text-base",
+        lg: "h-12 w-12 text-lg",
+        xl: "h-16 w-16 text-xl",
+      },
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-sm",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "circle",
+    },
+  }
+);
+
+interface AvatarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof avatarVariants> {
+  src?: string;
+  alt?: string;
+  fallback?: string;
+}
+
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
+  ({ className, size, shape, src, alt, fallback, ...props }, ref) => {
+    const initials = fallback
+      ? fallback
+          .split(" ")
+          .map((n) => n[0])
+          .join("")
+          .toUpperCase()
+          .slice(0, 2)
+      : null;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(avatarVariants({ size, shape }), className)}
+        {...props}
+      >
+        {src ? (
+          <img
+            src={src}
+            alt={alt || "Avatar"}
+            className="h-full w-full object-cover"
+          />
+        ) : initials ? (
+          <span className="font-medium text-foreground-muted">{initials}</span>
+        ) : (
+          <User className="h-1/2 w-1/2 text-foreground-muted" />
+        )}
+      </div>
+    );
+  }
+);
+
+Avatar.displayName = "Avatar";
+
+// Avatar Group
+interface AvatarGroupProps {
+  children: React.ReactNode;
+  max?: number;
+  size?: VariantProps<typeof avatarVariants>["size"];
+  className?: string;
+}
+
+export function AvatarGroup({ children, max, size = "md", className }: AvatarGroupProps) {
+  const avatars = Array.isArray(children) ? children : [children];
+  const displayAvatars = max ? avatars.slice(0, max) : avatars;
+  const excess = max ? Math.max(0, avatars.length - max) : 0;
+
+  return (
+    <div className={cn("flex -space-x-2", className)}>
+      {displayAvatars.map((avatar, index) => (
+        <div key={index} className="ring-2 ring-background rounded-full">
+          {avatar}
+        </div>
+      ))}
+      {excess > 0 && (
+        <div
+          className={cn(
+            avatarVariants({ size, shape: "circle" }),
+            "ring-2 ring-background bg-background-tertiary"
+          )}
+        >
+          <span className="text-xs font-medium text-foreground-muted">+{excess}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+

package/dist/assets/components/badge.tsx

@@ -0,0 +1,64 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-background-secondary text-foreground border border-border",
+        primary: "bg-primary text-primary-foreground",
+        secondary: "bg-secondary-hover text-secondary-foreground border border-border",
+        success: "bg-success text-white",
+        error: "bg-error text-white",
+        warning: "bg-warning text-white",
+        info: "bg-info text-white",
+        outline: "border border-border text-foreground bg-transparent",
+      },
+      size: {
+        sm: "px-2 py-0.5 text-xs",
+        md: "px-2.5 py-0.5 text-xs",
+        lg: "px-3 py-1 text-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  }
+);
+
+interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+export function Badge({ className, variant, size, ...props }: BadgeProps) {
+  return (
+    <span className={cn(badgeVariants({ variant, size }), className)} {...props} />
+  );
+}
+
+// Chip variant with optional close button
+interface ChipProps extends BadgeProps {
+  onClose?: () => void;
+}
+
+export function Chip({ className, variant, size, onClose, children, ...props }: ChipProps) {
+  return (
+    <span className={cn(badgeVariants({ variant, size }), "gap-1", className)} {...props}>
+      {children}
+      {onClose && (
+        <button
+          onClick={onClose}
+          className="ml-1 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10"
+        >
+          <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+          <span className="sr-only">Remove</span>
+        </button>
+      )}
+    </span>
+  );
+}
+

package/dist/assets/components/breadcrumbs.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { forwardRef } from "react";
+import { ChevronRight, Home } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  icon?: React.ReactNode;
+}
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+  separator?: React.ReactNode;
+  showHome?: boolean;
+  homeHref?: string;
+  className?: string;
+}
+
+export function Breadcrumbs({
+  items,
+  separator,
+  showHome = false,
+  homeHref = "/",
+  className,
+}: BreadcrumbsProps) {
+  const separatorElement = separator || (
+    <ChevronRight className="h-4 w-4 text-foreground-muted" />
+  );
+
+  const allItems = showHome
+    ? [{ label: "Home", href: homeHref, icon: <Home className="h-4 w-4" /> }, ...items]
+    : items;
+
+  return (
+    <nav aria-label="Breadcrumb" className={cn("flex items-center", className)}>
+      <ol className="flex items-center gap-2">
+        {allItems.map((item, index) => {
+          const isLast = index === allItems.length - 1;
+
+          return (
+            <li key={index} className="flex items-center gap-2">
+              {index > 0 && (
+                <span className="text-foreground-muted" aria-hidden="true">
+                  {separatorElement}
+                </span>
+              )}
+              {isLast ? (
+                <span
+                  className="flex items-center gap-1.5 text-sm font-medium text-foreground"
+                  aria-current="page"
+                >
+                  {item.icon}
+                  {item.label}
+                </span>
+              ) : (
+                <a
+                  href={item.href}
+                  className={cn(
+                    "flex items-center gap-1.5 text-sm text-foreground-muted",
+                    "hover:text-foreground transition-colors"
+                  )}
+                >
+                  {item.icon}
+                  {item.label}
+                </a>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
+
+// Individual breadcrumb components for more control
+export const BreadcrumbList = forwardRef<
+  HTMLOListElement,
+  React.OlHTMLAttributes<HTMLOListElement>
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn("flex items-center gap-2 flex-wrap", className)}
+    {...props}
+  />
+));
+
+BreadcrumbList.displayName = "BreadcrumbList";
+
+export const BreadcrumbItem = forwardRef<
+  HTMLLIElement,
+  React.LiHTMLAttributes<HTMLLIElement>
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("flex items-center gap-2", className)}
+    {...props}
+  />
+));
+
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+export const BreadcrumbLink = forwardRef<
+  HTMLAnchorElement,
+  React.AnchorHTMLAttributes<HTMLAnchorElement>
+>(({ className, ...props }, ref) => (
+  <a
+    ref={ref}
+    className={cn(
+      "text-sm text-foreground-muted hover:text-foreground transition-colors",
+      className
+    )}
+    {...props}
+  />
+));
+
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+export const BreadcrumbPage = forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    aria-current="page"
+    className={cn("text-sm font-medium text-foreground", className)}
+    {...props}
+  />
+));
+
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+export const BreadcrumbSeparator = forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(({ className, children, ...props }, ref) => (
+  <span
+    ref={ref}
+    aria-hidden="true"
+    className={cn("text-foreground-muted", className)}
+    {...props}
+  >
+    {children || <ChevronRight className="h-4 w-4" />}
+  </span>
+));
+
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+

package/dist/assets/components/button.tsx

@@ -0,0 +1,50 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { forwardRef } from "react";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center font-medium uppercase tracking-wide transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
+        secondary:
+          "bg-secondary text-secondary-foreground border border-border hover:bg-secondary-hover hover:border-border-hover",
+        ghost: "text-foreground hover:bg-secondary-hover",
+        inverted:
+          "bg-sonance-white text-sonance-charcoal hover:opacity-90",
+      },
+      size: {
+        sm: "h-9 px-4 text-xs",
+        md: "h-11 px-6 text-sm",
+        lg: "h-14 px-8 text-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  }
+);
+
+interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = "Button";
+
+export { buttonVariants };
+