@castlekit/castle 0.0.1 → 0.1.0

package/src/components/ui/clock.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { cn } from "@/lib/utils";
+
+export interface ClockProps {
+  size?: number;
+  variant?: "solid" | "glass";
+  className?: string;
+}
+
+function Clock({ size = 200, variant = "solid", className }: ClockProps) {
+  const [mounted, setMounted] = useState(false);
+  const [time, setTime] = useState<Date | null>(null);
+
+  useEffect(() => {
+    setMounted(true);
+    setTime(new Date());
+    const timer = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const seconds = time?.getSeconds() ?? 0;
+  const minutes = time?.getMinutes() ?? 0;
+  const hours = (time?.getHours() ?? 0) % 12;
+
+  const secondDeg = seconds * 6;
+  const minuteDeg = minutes * 6 + seconds * 0.1;
+  const hourDeg = hours * 30 + minutes * 0.5;
+
+  const center = size / 2;
+  const clockRadius = size * 0.45;
+
+  const ticks = [];
+  for (let i = 0; i < 60; i++) {
+    const angle = (i * 6 - 90) * (Math.PI / 180);
+    const isHour = i % 5 === 0;
+    const innerRadius = isHour ? clockRadius * 0.85 : clockRadius * 0.92;
+    const outerRadius = clockRadius * 0.98;
+    
+    const x1 = center + innerRadius * Math.cos(angle);
+    const y1 = center + innerRadius * Math.sin(angle);
+    const x2 = center + outerRadius * Math.cos(angle);
+    const y2 = center + outerRadius * Math.sin(angle);
+    
+    ticks.push(
+      <line
+        key={i}
+        x1={x1}
+        y1={y1}
+        x2={x2}
+        y2={y2}
+        stroke="currentColor"
+        strokeWidth={isHour ? 1.5 : 0.5}
+        className="text-foreground-muted"
+      />
+    );
+  }
+
+  const numerals = [
+    { num: "12", angle: -90 },
+    { num: "3", angle: 0 },
+    { num: "6", angle: 90 },
+    { num: "9", angle: 180 },
+  ];
+
+  const numeralRadius = clockRadius * 0.7;
+
+  if (!mounted) {
+    return (
+      <div 
+        className={cn(
+          "rounded-[20px] shadow-lg select-none",
+          variant === "glass" ? "glass" : "bg-surface border border-border",
+          className
+        )}
+        style={{ width: size, height: size }}
+      />
+    );
+  }
+
+  return (
+    <div 
+      className={cn(
+        "rounded-[20px] shadow-lg select-none",
+        variant === "glass" ? "glass" : "bg-surface border border-border",
+        className
+      )}
+      style={{ width: size, height: size }}
+    >
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        {ticks}
+        
+        {numerals.map(({ num, angle }) => {
+          const rad = angle * (Math.PI / 180);
+          const x = center + numeralRadius * Math.cos(rad);
+          const y = center + numeralRadius * Math.sin(rad);
+          return (
+            <text
+              key={num}
+              x={x}
+              y={y}
+              textAnchor="middle"
+              dominantBaseline="central"
+              className="fill-foreground/50 font-sans font-medium"
+              style={{ fontSize: size * 0.09 }}
+            >
+              {num}
+            </text>
+          );
+        })}
+        
+        <line
+          x1={center}
+          y1={center - size * 0.06}
+          x2={center}
+          y2={center - clockRadius * 0.5}
+          stroke="currentColor"
+          strokeWidth={3}
+          strokeLinecap="round"
+          className="text-foreground"
+          style={{
+            transformOrigin: `${center}px ${center}px`,
+            transform: `rotate(${hourDeg}deg)`,
+          }}
+        />
+        
+        <line
+          x1={center}
+          y1={center - size * 0.06}
+          x2={center}
+          y2={center - clockRadius * 0.75}
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          className="text-foreground"
+          style={{
+            transformOrigin: `${center}px ${center}px`,
+            transform: `rotate(${minuteDeg}deg)`,
+          }}
+        />
+        
+        <line
+          x1={center}
+          y1={center + clockRadius * 0.15}
+          x2={center}
+          y2={center - clockRadius * 0.8}
+          stroke="currentColor"
+          strokeWidth={1}
+          strokeLinecap="round"
+          className="text-error"
+          style={{
+            transformOrigin: `${center}px ${center}px`,
+            transform: `rotate(${secondDeg}deg)`,
+          }}
+        />
+        
+        <circle
+          cx={center}
+          cy={center}
+          r={size * 0.025}
+          className="fill-error"
+        />
+      </svg>
+    </div>
+  );
+}
+
+export { Clock };

package/src/components/ui/dialog.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes } from "react";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
+  open?: boolean;
+  onClose?: () => void;
+}
+
+const Dialog = forwardRef<HTMLDivElement, DialogProps>(
+  ({ className, open = false, onClose, children, ...props }, ref) => {
+    if (!open) return null;
+
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center">
+        <div
+          className="fixed inset-0 bg-black/50 backdrop-blur-sm"
+          onClick={onClose}
+        />
+        <div
+          className={cn(
+            "relative z-50 w-full max-w-lg rounded-[var(--radius-lg)] bg-surface border border-border p-6 shadow-xl",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {onClose && (
+            <button
+              onClick={onClose}
+              className="absolute right-4 top-4 p-1 rounded-[var(--radius-sm)] text-foreground-muted hover:text-foreground hover:bg-surface-hover transition-colors"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+Dialog.displayName = "Dialog";
+
+const DialogHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        className={cn("mb-4", className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+DialogHeader.displayName = "DialogHeader";
+
+const DialogTitle = forwardRef<
+  HTMLHeadingElement,
+  HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <h2
+      className={cn("text-lg font-semibold text-foreground", className)}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+DialogTitle.displayName = "DialogTitle";
+
+const DialogDescription = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <p
+      className={cn("text-sm text-foreground-secondary mt-1", className)}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+DialogDescription.displayName = "DialogDescription";
+
+const DialogFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        className={cn("flex justify-end gap-3 mt-6", className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+DialogFooter.displayName = "DialogFooter";
+
+export { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogFooter };

package/src/components/ui/index.ts

@@ -0,0 +1,34 @@
+export { Button, type ButtonProps } from "./button";
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  type CardProps,
+} from "./card";
+export { Input, Textarea, type InputProps, type TextareaProps } from "./input";
+export { Badge, type BadgeProps } from "./badge";
+export { Avatar, AvatarImage, AvatarFallback, type AvatarProps } from "./avatar";
+export { Select, type SelectProps } from "./select";
+export {
+  Dialog,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  type DialogProps,
+} from "./dialog";
+export { Alert, type AlertProps } from "./alert";
+export { Tooltip, type TooltipProps } from "./tooltip";
+export { Toggle, type ToggleProps } from "./toggle";
+export { Checkbox, type CheckboxProps } from "./checkbox";
+export { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps } from "./radio";
+export { OptionCardGroup, OptionCard, CheckboxCard, type OptionCardGroupProps, type OptionCardProps, type CheckboxCardProps } from "./option-card";
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupProps, type ToggleGroupItemProps } from "./toggle-group";
+export { Tabs, TabsList, TabsTrigger, TabsContent, type TabsProps, type TabsListProps, type TabsTriggerProps, type TabsContentProps } from "./tabs";
+export { Progress, type ProgressProps } from "./progress";
+export { Slider, type SliderProps } from "./slider";
+export { Uptime, type UptimeProps, type UptimeStatus } from "./uptime";
+export { Clock, type ClockProps } from "./clock";

package/src/components/ui/input.tsx

@@ -0,0 +1,112 @@
+import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'prefix'> {
+  error?: boolean;
+  label?: string;
+  startAddon?: ReactNode;
+  endAddon?: ReactNode;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = "text", error, label, id, startAddon, endAddon, ...props }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    const hasAddon = startAddon || endAddon;
+    
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={inputId} className="form-label">
+            {label}
+          </label>
+        )}
+        {hasAddon ? (
+          <div 
+            className={cn(
+              "flex items-center input-base",
+              error && "error",
+              "focus-within:border-[var(--input-focus)]"
+            )}
+          >
+            {startAddon && (
+              <span className="text-foreground-muted shrink-0 select-none">
+                {startAddon}
+              </span>
+            )}
+            <input
+              id={inputId}
+              type={type}
+              className={cn(
+                "flex-1 bg-transparent border-0 p-0 text-sm text-foreground placeholder:text-foreground-muted",
+                "focus:outline-none focus:ring-0",
+                startAddon && "pl-2",
+                endAddon && "pr-2",
+                className
+              )}
+              aria-invalid={error}
+              ref={ref}
+              {...props}
+            />
+            {endAddon && (
+              <span className="text-foreground-muted shrink-0 select-none">
+                {endAddon}
+              </span>
+            )}
+          </div>
+        ) : (
+          <input
+            id={inputId}
+            type={type}
+            className={cn(
+              "input-base flex placeholder:text-foreground-muted",
+              error && "error",
+              className
+            )}
+            aria-invalid={error}
+            ref={ref}
+            {...props}
+          />
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  error?: boolean;
+  label?: string;
+}
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, error, label, id, ...props }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={inputId} className="form-label">
+            {label}
+          </label>
+        )}
+        <textarea
+          id={inputId}
+          className={cn(
+            "input-base flex min-h-[100px] h-auto placeholder:text-foreground-muted resize-none",
+            error && "error",
+            className
+          )}
+          aria-invalid={error}
+          ref={ref}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+
+Textarea.displayName = "Textarea";
+
+export { Input, Textarea };

package/src/components/ui/option-card.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { forwardRef, createContext, useContext, type HTMLAttributes, type ReactNode } from "react";
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface OptionCardGroupContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const OptionCardGroupContext = createContext<OptionCardGroupContextValue | null>(null);
+
+export interface OptionCardGroupProps extends HTMLAttributes<HTMLDivElement> {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const OptionCardGroup = forwardRef<HTMLDivElement, OptionCardGroupProps>(
+  ({ className, value, onValueChange, children, ...props }, ref) => {
+    return (
+      <OptionCardGroupContext.Provider value={{ value, onValueChange }}>
+        <div
+          ref={ref}
+          role="radiogroup"
+          className={cn("flex flex-col gap-3", className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </OptionCardGroupContext.Provider>
+    );
+  }
+);
+
+OptionCardGroup.displayName = "OptionCardGroup";
+
+export interface OptionCardProps extends HTMLAttributes<HTMLButtonElement> {
+  value: string;
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+const OptionCard = forwardRef<HTMLButtonElement, OptionCardProps>(
+  ({ className, value, disabled = false, children, ...props }, ref) => {
+    const context = useContext(OptionCardGroupContext);
+    
+    if (!context) {
+      throw new Error("OptionCard must be used within an OptionCardGroup");
+    }
+    
+    const isSelected = context.value === value;
+    
+    const handleClick = () => {
+      if (!disabled) {
+        context.onValueChange(value);
+      }
+    };
+    
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="radio"
+        aria-checked={isSelected}
+        data-state={isSelected ? "checked" : "unchecked"}
+        disabled={disabled}
+        onClick={handleClick}
+        className={cn(
+          "flex items-center gap-4 w-full px-4 py-3 rounded-[var(--radius-md)] border-2 transition-all text-left",
+          "interactive",
+          isSelected
+            ? "border-accent bg-accent/5"
+            : "border-[var(--input-border)] bg-[var(--input-background)] hover:border-border-hover",
+          disabled && "opacity-50",
+          className
+        )}
+        {...props}
+      >
+        <div
+          className={cn(
+            "h-5 w-5 shrink-0 rounded-full border-2 flex items-center justify-center transition-colors",
+            isSelected ? "border-accent" : "border-[var(--input-border)]"
+          )}
+        >
+          {isSelected && (
+            <span className="h-2.5 w-2.5 rounded-full bg-accent" />
+          )}
+        </div>
+        <div className="flex-1">{children}</div>
+      </button>
+    );
+  }
+);
+
+OptionCard.displayName = "OptionCard";
+
+export interface CheckboxCardProps extends HTMLAttributes<HTMLButtonElement> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+const CheckboxCard = forwardRef<HTMLButtonElement, CheckboxCardProps>(
+  ({ className, checked = false, onCheckedChange, disabled = false, children, ...props }, ref) => {
+    const handleClick = () => {
+      if (!disabled) {
+        onCheckedChange?.(!checked);
+      }
+    };
+    
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="checkbox"
+        aria-checked={checked}
+        data-state={checked ? "checked" : "unchecked"}
+        disabled={disabled}
+        onClick={handleClick}
+        className={cn(
+          "flex items-center gap-4 w-full px-4 py-3 rounded-[var(--radius-md)] border-2 transition-all text-left",
+          "interactive",
+          checked
+            ? "border-accent bg-accent/5"
+            : "border-[var(--input-border)] bg-[var(--input-background)] hover:border-border-hover",
+          disabled && "opacity-50",
+          className
+        )}
+        {...props}
+      >
+        <div
+          className={cn(
+            "h-5 w-5 shrink-0 rounded-[var(--radius-sm)] border-2 flex items-center justify-center transition-colors",
+            checked
+              ? "border-accent bg-accent text-white"
+              : "border-[var(--input-border)] bg-[var(--input-background)]"
+          )}
+        >
+          {checked && <Check className="h-3.5 w-3.5" strokeWidth={3} />}
+        </div>
+        <div className="flex-1">{children}</div>
+      </button>
+    );
+  }
+);
+
+CheckboxCard.displayName = "CheckboxCard";
+
+export { OptionCardGroup, OptionCard, CheckboxCard };

package/src/components/ui/progress.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { TrendingUp, TrendingDown } from "lucide-react";
+
+export interface ProgressProps {
+  value: number;
+  max: number;
+  trend?: number;
+  trendLabel?: string;
+  variant?: "success" | "accent" | "warning" | "error";
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+function Progress({
+  value,
+  max,
+  trend,
+  trendLabel,
+  variant = "success",
+  size = "md",
+  className,
+}: ProgressProps) {
+  const percentage = Math.round((value / max) * 100);
+  
+  const barColors = {
+    success: "bg-success",
+    accent: "bg-accent",
+    warning: "bg-warning",
+    error: "bg-error",
+  };
+
+  const trendColors = {
+    success: "text-success",
+    accent: "text-accent",
+    warning: "text-warning",
+    error: "text-error",
+  };
+
+  const sizes = {
+    sm: {
+      percentage: "text-xl",
+      fraction: "text-xs",
+      bar: "h-1.5",
+      trend: "text-xs",
+    },
+    md: {
+      percentage: "text-2xl",
+      fraction: "text-sm",
+      bar: "h-2",
+      trend: "text-sm",
+    },
+    lg: {
+      percentage: "text-4xl",
+      fraction: "text-base",
+      bar: "h-3",
+      trend: "text-base",
+    },
+  };
+
+  const sizeConfig = sizes[size];
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      <div className="flex items-baseline justify-between">
+        <span className={cn("font-bold text-foreground", sizeConfig.percentage)}>
+          {percentage}%
+        </span>
+        <span className={cn("text-foreground-secondary", sizeConfig.fraction)}>
+          {value.toLocaleString()} of {max.toLocaleString()}
+        </span>
+      </div>
+
+      <div className={cn("w-full bg-border rounded-full overflow-hidden", sizeConfig.bar)}>
+        <div
+          className={cn("h-full rounded-full transition-all duration-500", barColors[variant])}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+
+      {trend !== undefined && (
+        <div className="flex items-center gap-2">
+          {trend >= 0 ? (
+            <TrendingUp className={cn("h-4 w-4", trendColors[variant])} />
+          ) : (
+            <TrendingDown className="h-4 w-4 text-error" />
+          )}
+          <span className={cn("font-medium", trend >= 0 ? trendColors[variant] : "text-error", sizeConfig.trend)}>
+            {trend >= 0 ? "+" : ""}{trend}%
+          </span>
+          {trendLabel && (
+            <span className={cn("text-foreground-secondary", sizeConfig.trend)}>
+              {trendLabel}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { Progress };