@castlekit/castle 0.0.1 → 0.1.0

package/src/components/layout/sidebar.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import {
+  LayoutDashboard,
+  type LucideIcon,
+} from "lucide-react";
+import { Fragment } from "react";
+import { CastleIcon } from "@/components/icons/castle-icon";
+import { Tooltip } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+interface NavItem {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+  href: string;
+}
+
+export interface SidebarProps {
+  activeItem?: string;
+  onNavigate?: (id: string) => void;
+  className?: string;
+  variant?: "glass" | "solid";
+}
+
+const navItems: NavItem[] = [
+  {
+    id: "dashboard",
+    label: "Dashboard",
+    icon: LayoutDashboard,
+    href: "/",
+  },
+];
+
+function Sidebar({ 
+  activeItem = "dashboard", 
+  onNavigate, 
+  className,
+  variant = "solid"
+}: SidebarProps) {
+  const pathname = usePathname();
+  const useLinks = !onNavigate;
+
+  const activeFromPath = (() => {
+    if (!pathname) return "dashboard";
+    if (pathname === "/") return "dashboard";
+    return "dashboard";
+  })();
+
+  const effectiveActive = useLinks ? activeFromPath : activeItem;
+
+  return (
+    <aside
+      className={cn(
+        "fixed top-5 left-6 bottom-5 flex flex-col z-40 shadow-xl shadow-black/20 rounded-[28px] w-14",
+        variant === "glass" ? "glass" : "bg-surface border border-border",
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-center pt-5 pb-[60px]">
+        {useLinks ? (
+          <Link
+            href="/"
+            aria-label="Go to Dashboard"
+            className="flex items-center justify-center transition-opacity hover:opacity-85"
+          >
+            <CastleIcon className="h-[36px] w-[36px] min-h-[36px] min-w-[36px] shrink-0 text-[var(--logo-color)] -mt-[3px]" />
+          </Link>
+        ) : (
+          <button
+            type="button"
+            aria-label="Go to Dashboard"
+            onClick={() => onNavigate?.("dashboard")}
+            className="flex items-center justify-center transition-opacity hover:opacity-85 cursor-pointer"
+          >
+            <CastleIcon className="h-[36px] w-[36px] min-h-[36px] min-w-[36px] shrink-0 text-[var(--logo-color)] -mt-[3px]" />
+          </button>
+        )}
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 space-y-1 px-2">
+        {navItems.map((item) => {
+          const isActive = effectiveActive === item.id;
+          const NavEl = useLinks ? (
+            <Link
+              href={item.href}
+              className={cn(
+                "flex items-center justify-center w-full rounded-[20px] p-2.5 cursor-pointer",
+                isActive
+                  ? "bg-accent/10 text-accent"
+                  : "text-foreground-secondary hover:text-foreground hover:bg-surface-hover"
+              )}
+            >
+              <item.icon className="h-5 w-5 shrink-0" />
+            </Link>
+          ) : (
+            <button
+              onClick={() => onNavigate?.(item.id)}
+              className={cn(
+                "flex items-center justify-center w-full rounded-[20px] p-2.5 cursor-pointer",
+                isActive
+                  ? "bg-accent/10 text-accent"
+                  : "text-foreground-secondary hover:text-foreground hover:bg-surface-hover"
+              )}
+            >
+              <item.icon className="h-5 w-5 shrink-0" />
+            </button>
+          );
+
+          return (
+            <Tooltip key={item.id} content={item.label} side="right">
+              {NavEl}
+            </Tooltip>
+          );
+        })}
+      </nav>
+
+      {/* Spacer at bottom for visual balance */}
+      <div className="pb-4" />
+    </aside>
+  );
+}
+
+export { Sidebar };

package/src/components/layout/theme-toggle.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Sun, Moon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
+
+export interface ThemeToggleProps {
+  className?: string;
+  collapsed?: boolean;
+}
+
+function ThemeToggle({ className, collapsed = false }: ThemeToggleProps) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <button
+        className={cn(
+          "flex items-center gap-3 p-2 rounded-[var(--radius-md)] hover:bg-surface transition-colors",
+          collapsed ? "justify-center" : "",
+          className
+        )}
+      >
+        <div className="h-5 w-5" />
+      </button>
+    );
+  }
+
+  const isDark = theme === "dark";
+
+  return (
+    <button
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      className={cn(
+        "flex items-center gap-3 p-2 rounded-[var(--radius-md)] hover:bg-surface transition-colors text-foreground-secondary hover:text-foreground",
+        collapsed ? "justify-center" : "",
+        className
+      )}
+      title={isDark ? "Switch to light mode" : "Switch to dark mode"}
+    >
+      {isDark ? (
+        <Sun className="h-5 w-5" />
+      ) : (
+        <Moon className="h-5 w-5" />
+      )}
+      {!collapsed && (
+        <span className="text-sm">{isDark ? "Light mode" : "Dark mode"}</span>
+      )}
+    </button>
+  );
+}
+
+export { ThemeToggle };

package/src/components/layout/user-menu.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useTheme } from "next-themes";
+import { User, Sun, Moon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface UserMenuProps {
+  className?: string;
+  variant?: "glass" | "solid";
+}
+
+function UserMenu({ className, variant = "solid" }: UserMenuProps) {
+  const [open, setOpen] = useState(false);
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const isDark = theme === "dark";
+
+  return (
+    <div ref={menuRef} className={cn("relative", className)}>
+      <button
+        onClick={() => setOpen(!open)}
+        className={cn(
+          "flex items-center justify-center h-14 w-14 rounded-[28px] shadow-xl shadow-black/20 text-foreground-secondary hover:text-foreground cursor-pointer",
+          variant === "glass" ? "glass" : "bg-surface border border-border"
+        )}
+      >
+        <User className="h-5 w-5" />
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-[calc(100%+8px)] w-48 rounded-[var(--radius-md)] bg-surface border border-border shadow-xl py-1 z-50">
+          {mounted && (
+            <button
+              onClick={() => {
+                setTheme(isDark ? "light" : "dark");
+                setOpen(false);
+              }}
+              className="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-foreground-secondary hover:text-foreground hover:bg-surface-hover cursor-pointer"
+            >
+              {isDark ? (
+                <Sun className="h-4 w-4" />
+              ) : (
+                <Moon className="h-4 w-4" />
+              )}
+              {isDark ? "Light mode" : "Dark mode"}
+            </button>
+          )}
+
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { UserMenu };

package/src/components/ui/alert.tsx

@@ -0,0 +1,72 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { AlertCircle, CheckCircle, Info, AlertTriangle, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: "info" | "success" | "warning" | "error";
+  dismissible?: boolean;
+  onDismiss?: () => void;
+}
+
+const variantStyles = {
+  info: {
+    container: "bg-info/10 border-info/20 text-info",
+    icon: Info,
+  },
+  success: {
+    container: "bg-success/10 border-success/20 text-success",
+    icon: CheckCircle,
+  },
+  warning: {
+    container: "bg-warning/10 border-warning/20 text-warning",
+    icon: AlertTriangle,
+  },
+  error: {
+    container: "bg-error/10 border-error/20 text-error",
+    icon: AlertCircle,
+  },
+};
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      className,
+      variant = "info",
+      dismissible = false,
+      onDismiss,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { container, icon: Icon } = variantStyles[variant];
+
+    return (
+      <div
+        className={cn(
+          "flex items-start gap-3 rounded-[var(--radius-md)] border p-4",
+          container,
+          className
+        )}
+        ref={ref}
+        role="alert"
+        {...props}
+      >
+        <Icon className="h-5 w-5 shrink-0 mt-0.5" />
+        <div className="flex-1 text-sm">{children}</div>
+        {dismissible && onDismiss && (
+          <button
+            onClick={onDismiss}
+            className="shrink-0 p-1 rounded-[var(--radius-sm)] hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+Alert.displayName = "Alert";
+
+export { Alert };

package/src/components/ui/avatar.tsx

@@ -0,0 +1,87 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+  size?: "sm" | "md" | "lg";
+  status?: "online" | "offline" | "busy" | "away";
+}
+
+const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
+  ({ className, size = "md", status, children, ...props }, ref) => {
+    return (
+      <div className="relative inline-block">
+        <div
+          className={cn(
+            "relative flex shrink-0 overflow-hidden rounded-[var(--radius-full)] bg-surface border border-border",
+            {
+              "h-8 w-8": size === "sm",
+              "h-10 w-10": size === "md",
+              "h-12 w-12": size === "lg",
+            },
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+        {status && (
+          <span
+            className={cn(
+              "absolute bottom-0 right-0 block rounded-[var(--radius-full)] ring-2 ring-background",
+              {
+                "h-2.5 w-2.5": size === "sm",
+                "h-3 w-3": size === "md",
+                "h-3.5 w-3.5": size === "lg",
+              },
+              {
+                "bg-success": status === "online",
+                "bg-foreground-muted": status === "offline",
+                "bg-error": status === "busy",
+                "bg-warning": status === "away",
+              }
+            )}
+          />
+        )}
+      </div>
+    );
+  }
+);
+
+Avatar.displayName = "Avatar";
+
+const AvatarImage = forwardRef<
+  HTMLImageElement,
+  React.ImgHTMLAttributes<HTMLImageElement>
+>(({ className, alt, ...props }, ref) => {
+  return (
+    <img
+      className={cn("aspect-square h-full w-full object-cover", className)}
+      alt={alt}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+AvatarImage.displayName = "AvatarImage";
+
+const AvatarFallback = forwardRef<
+  HTMLSpanElement,
+  HTMLAttributes<HTMLSpanElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <span
+      className={cn(
+        "flex h-full w-full items-center justify-center bg-surface text-foreground-secondary font-medium text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+AvatarFallback.displayName = "AvatarFallback";
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/components/ui/badge.tsx

@@ -0,0 +1,39 @@
+import { type HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: "default" | "success" | "warning" | "error" | "info" | "outline";
+  size?: "sm" | "md";
+}
+
+function Badge({
+  className,
+  variant = "default",
+  size = "md",
+  ...props
+}: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center font-medium rounded-[var(--radius-full)] transition-colors",
+        {
+          "bg-surface text-foreground-secondary": variant === "default",
+          "bg-success/10 text-success": variant === "success",
+          "bg-warning/10 text-warning": variant === "warning",
+          "bg-error/10 text-error": variant === "error",
+          "bg-info/10 text-info": variant === "info",
+          "bg-transparent text-foreground-secondary border border-border":
+            variant === "outline",
+        },
+        {
+          "px-2 py-0.5 text-xs": size === "sm",
+          "px-2.5 py-0.5 text-sm": size === "md",
+        },
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Badge };

package/src/components/ui/button.tsx

@@ -0,0 +1,43 @@
+import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "ghost" | "destructive" | "outline";
+  size?: "sm" | "md" | "lg" | "icon";
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "primary", size = "md", ...props }, ref) => {
+    return (
+      <button
+        className={cn(
+          "inline-flex items-center justify-center font-medium transition-colors rounded-[var(--radius-sm)] interactive disabled:pointer-events-none",
+          {
+            "bg-accent text-accent-foreground hover:bg-accent-hover":
+              variant === "primary",
+            "bg-surface text-foreground border border-border hover:bg-surface-hover hover:border-border-hover":
+              variant === "secondary",
+            "bg-transparent text-foreground hover:bg-surface":
+              variant === "ghost",
+            "bg-error text-white hover:bg-error/90": variant === "destructive",
+            "bg-transparent text-foreground border border-border hover:bg-surface hover:border-border-hover":
+              variant === "outline",
+          },
+          {
+            "h-8 px-3 text-sm": size === "sm",
+            "h-10 px-4 text-sm": size === "md",
+            "h-12 px-6 text-base": size === "lg",
+            "h-10 w-10 p-0": size === "icon",
+          },
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = "Button";
+
+export { Button };

package/src/components/ui/card.tsx

@@ -0,0 +1,107 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "bordered" | "elevated";
+}
+
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = "default", ...props }, ref) => {
+    return (
+      <div
+        className={cn(
+          "rounded-[var(--radius-md)] bg-surface p-6",
+          {
+            "": variant === "default",
+            "border border-border": variant === "bordered",
+            "shadow-lg shadow-black/5 dark:shadow-black/20":
+              variant === "elevated",
+          },
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Card.displayName = "Card";
+
+const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        className={cn("flex flex-col space-y-1.5 pb-4", className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = forwardRef<
+  HTMLHeadingElement,
+  HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <h3
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight text-foreground",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <p
+      className={cn("text-sm text-foreground-secondary", className)}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+CardDescription.displayName = "CardDescription";
+
+const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return <div className={cn("", className)} ref={ref} {...props} />;
+  }
+);
+
+CardContent.displayName = "CardContent";
+
+const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        className={cn("flex items-center pt-4", className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+};

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface CheckboxProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  label?: string;
+}
+
+const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
+  ({ className, checked = false, onCheckedChange, label, ...props }, ref) => {
+    const checkbox = (
+      <button
+        type="button"
+        role="checkbox"
+        aria-checked={checked}
+        data-state={checked ? "checked" : "unchecked"}
+        onClick={() => onCheckedChange?.(!checked)}
+        className={cn(
+          "peer h-5 w-5 shrink-0 rounded-[var(--radius-sm)] border-2 transition-colors interactive",
+          checked
+            ? "bg-accent border-accent text-accent-foreground"
+            : "bg-[var(--input-background)] border-[var(--input-border)]",
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {checked && <Check className="h-4 w-4 mx-auto" strokeWidth={3} />}
+      </button>
+    );
+
+    if (label) {
+      return (
+        <div className="flex items-center gap-3">
+          {checkbox}
+          <span 
+            className="text-sm text-foreground select-none cursor-pointer"
+            onClick={() => onCheckedChange?.(!checked)}
+          >
+            {label}
+          </span>
+        </div>
+      );
+    }
+
+    return checkbox;
+  }
+);
+
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };