@castlekit/castle 0.0.1 → 0.1.0

package/src/components/ui/radio.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { forwardRef, createContext, useContext, type HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+interface RadioGroupContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+  name: string;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
+
+export interface RadioGroupProps extends HTMLAttributes<HTMLDivElement> {
+  value: string;
+  onValueChange: (value: string) => void;
+  name?: string;
+}
+
+const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+  ({ className, value, onValueChange, name = "radio-group", children, ...props }, ref) => {
+    return (
+      <RadioGroupContext.Provider value={{ value, onValueChange, name }}>
+        <div
+          ref={ref}
+          role="radiogroup"
+          className={cn("flex flex-col gap-3", className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </RadioGroupContext.Provider>
+    );
+  }
+);
+
+RadioGroup.displayName = "RadioGroup";
+
+export interface RadioGroupItemProps extends HTMLAttributes<HTMLButtonElement> {
+  value: string;
+  label?: string;
+  disabled?: boolean;
+}
+
+const RadioGroupItem = forwardRef<HTMLButtonElement, RadioGroupItemProps>(
+  ({ className, value, label, disabled = false, ...props }, ref) => {
+    const context = useContext(RadioGroupContext);
+    
+    if (!context) {
+      throw new Error("RadioGroupItem must be used within a RadioGroup");
+    }
+    
+    const isSelected = context.value === value;
+    
+    const handleClick = () => {
+      if (!disabled) {
+        context.onValueChange(value);
+      }
+    };
+    
+    const radio = (
+      <button
+        ref={ref}
+        type="button"
+        role="radio"
+        aria-checked={isSelected}
+        data-state={isSelected ? "checked" : "unchecked"}
+        disabled={disabled}
+        onClick={handleClick}
+        className={cn(
+          "h-5 w-5 shrink-0 rounded-full border-2 transition-colors interactive",
+          "flex items-center justify-center",
+          isSelected
+            ? "border-accent"
+            : "border-[var(--input-border)] bg-[var(--input-background)]",
+          className
+        )}
+        {...props}
+      >
+        {isSelected && (
+          <span className="h-2.5 w-2.5 rounded-full bg-accent" />
+        )}
+      </button>
+    );
+    
+    if (label) {
+      return (
+        <div className="flex items-center gap-3">
+          {radio}
+          <span 
+            className={cn(
+              "text-sm select-none cursor-pointer",
+              disabled ? "text-foreground-muted" : "text-foreground"
+            )}
+            onClick={handleClick}
+          >
+            {label}
+          </span>
+        </div>
+      );
+    }
+    
+    return radio;
+  }
+);
+
+RadioGroupItem.displayName = "RadioGroupItem";
+
+export { RadioGroup, RadioGroupItem };

package/src/components/ui/select.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { forwardRef, type SelectHTMLAttributes } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  error?: boolean;
+  label?: string;
+}
+
+const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, error, label, id, children, ...props }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={inputId} className="form-label">
+            {label}
+          </label>
+        )}
+        <div className="relative">
+          <select
+            id={inputId}
+            className={cn(
+              "input-base flex appearance-none pr-10 cursor-pointer",
+              error && "error",
+              className
+            )}
+            aria-invalid={error}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </select>
+          <ChevronDown className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-foreground-muted pointer-events-none" />
+        </div>
+      </div>
+    );
+  }
+);
+
+Select.displayName = "Select";
+
+export { Select };

package/src/components/ui/slider.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { forwardRef, useState } from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "@/lib/utils";
+
+export interface SliderProps
+  extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+  label?: string;
+  showValue?: boolean;
+}
+
+const Slider = forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  SliderProps
+>(({ className, label, showValue = false, value, defaultValue, onValueChange, ...props }, ref) => {
+  const [internalValue, setInternalValue] = useState(defaultValue ?? [0]);
+  
+  const displayValue = value ?? internalValue;
+  
+  const handleValueChange = (newValue: number[]) => {
+    setInternalValue(newValue);
+    onValueChange?.(newValue);
+  };
+  
+  return (
+    <div className="w-full">
+      {(label || showValue) && (
+        <div className="flex items-center justify-between mb-3">
+          {label && (
+            <label className="text-sm text-foreground-muted">{label}</label>
+          )}
+          {showValue && (
+            <span className="text-sm text-foreground tabular-nums">
+              {displayValue[0]}
+            </span>
+          )}
+        </div>
+      )}
+      <SliderPrimitive.Root
+        ref={ref}
+        className={cn(
+          "relative flex w-full touch-none select-none items-center",
+          className
+        )}
+        value={value}
+        defaultValue={defaultValue}
+        onValueChange={handleValueChange}
+        {...props}
+      >
+        <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-border">
+          <SliderPrimitive.Range className="absolute h-full bg-accent" />
+        </SliderPrimitive.Track>
+        <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-accent bg-white shadow-md transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 hover:scale-110" />
+      </SliderPrimitive.Root>
+    </div>
+  );
+});
+
+Slider.displayName = "Slider";
+
+export { Slider };

package/src/components/ui/tabs.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { forwardRef, createContext, useContext, type HTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+interface TabsContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  ({ className, value, onValueChange, children, ...props }, ref) => {
+    return (
+      <TabsContext.Provider value={{ value, onValueChange }}>
+        <div ref={ref} className={cn("w-full", className)} {...props}>
+          {children}
+        </div>
+      </TabsContext.Provider>
+    );
+  }
+);
+
+Tabs.displayName = "Tabs";
+
+export type TabsListProps = HTMLAttributes<HTMLDivElement>;
+
+const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="tablist"
+        className={cn(
+          "inline-flex items-center gap-1 border-b border-border",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+TabsList.displayName = "TabsList";
+
+export interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+  value: string;
+  disabled?: boolean;
+}
+
+const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
+  ({ className, value, disabled = false, children, ...props }, ref) => {
+    const context = useContext(TabsContext);
+    
+    if (!context) {
+      throw new Error("TabsTrigger must be used within Tabs");
+    }
+    
+    const isSelected = context.value === value;
+    
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="tab"
+        aria-selected={isSelected}
+        data-state={isSelected ? "active" : "inactive"}
+        disabled={disabled}
+        onClick={() => !disabled && context.onValueChange(value)}
+        className={cn(
+          "relative px-4 py-2.5 text-sm font-medium transition-colors cursor-pointer",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
+          "disabled:pointer-events-none disabled:opacity-50",
+          isSelected
+            ? "text-foreground"
+            : "text-foreground-muted hover:text-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {isSelected && (
+          <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent" />
+        )}
+      </button>
+    );
+  }
+);
+
+TabsTrigger.displayName = "TabsTrigger";
+
+export interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
+  value: string;
+}
+
+const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(
+  ({ className, value, children, ...props }, ref) => {
+    const context = useContext(TabsContext);
+    
+    if (!context) {
+      throw new Error("TabsContent must be used within Tabs");
+    }
+    
+    if (context.value !== value) {
+      return null;
+    }
+    
+    return (
+      <div
+        ref={ref}
+        role="tabpanel"
+        tabIndex={0}
+        className={cn("mt-4 focus-visible:outline-none", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+TabsContent.displayName = "TabsContent";
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/components/ui/toggle-group.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { forwardRef, createContext, useContext, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+interface ToggleGroupContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null);
+
+export interface ToggleGroupProps extends HTMLAttributes<HTMLDivElement> {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
+  ({ className, value, onValueChange, children, ...props }, ref) => {
+    return (
+      <ToggleGroupContext.Provider value={{ value, onValueChange }}>
+        <div
+          ref={ref}
+          role="group"
+          className={cn(
+            "inline-flex items-center rounded-[var(--radius-sm)] bg-surface border border-border p-1 gap-1",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </ToggleGroupContext.Provider>
+    );
+  }
+);
+
+ToggleGroup.displayName = "ToggleGroup";
+
+export interface ToggleGroupItemProps extends HTMLAttributes<HTMLButtonElement> {
+  value: string;
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+const ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
+  ({ className, value, disabled = false, children, ...props }, ref) => {
+    const context = useContext(ToggleGroupContext);
+    
+    if (!context) {
+      throw new Error("ToggleGroupItem must be used within a ToggleGroup");
+    }
+    
+    const isSelected = context.value === value;
+    
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="radio"
+        aria-checked={isSelected}
+        data-state={isSelected ? "on" : "off"}
+        disabled={disabled}
+        onClick={() => !disabled && context.onValueChange(value)}
+        className={cn(
+          "inline-flex items-center justify-center h-8 px-3 rounded-[var(--radius-sm)] text-sm font-medium transition-all",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "cursor-pointer",
+          isSelected
+            ? "bg-background text-foreground shadow-sm"
+            : "text-foreground-secondary hover:text-foreground hover:bg-surface-hover",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+ToggleGroupItem.displayName = "ToggleGroupItem";
+
+export { ToggleGroup, ToggleGroupItem };

package/src/components/ui/toggle.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { cn } from "@/lib/utils";
+
+export interface ToggleProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  pressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  size?: "sm" | "md" | "lg";
+  label?: string;
+}
+
+const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
+  (
+    { className, pressed = false, onPressedChange, size = "md", label, ...props },
+    ref
+  ) => {
+    const toggle = (
+      <button
+        type="button"
+        role="switch"
+        aria-checked={pressed}
+        data-state={pressed ? "on" : "off"}
+        onClick={() => onPressedChange?.(!pressed)}
+        className={cn(
+          "relative inline-flex shrink-0 items-center rounded-[var(--radius-full)] border-2 border-transparent transition-colors interactive",
+          pressed ? "bg-accent" : "bg-[var(--input-border)]",
+          {
+            "h-5 w-9": size === "sm",
+            "h-6 w-11": size === "md",
+            "h-7 w-14": size === "lg",
+          },
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        <span
+          className={cn(
+            "pointer-events-none block rounded-[var(--radius-full)] bg-white shadow-lg ring-0 transition-transform",
+            {
+              "h-4 w-4": size === "sm",
+              "h-5 w-5": size === "md",
+              "h-6 w-6": size === "lg",
+            },
+            pressed
+              ? {
+                  "translate-x-4": size === "sm",
+                  "translate-x-5": size === "md",
+                  "translate-x-7": size === "lg",
+                }
+              : "translate-x-0"
+          )}
+        />
+      </button>
+    );
+
+    if (label) {
+      return (
+        <div className="flex items-center gap-3">
+          {toggle}
+          <span 
+            className="text-sm text-foreground select-none cursor-pointer"
+            onClick={() => onPressedChange?.(!pressed)}
+          >
+            {label}
+          </span>
+        </div>
+      );
+    }
+
+    return toggle;
+  }
+);
+
+Toggle.displayName = "Toggle";
+
+export { Toggle };

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { useState, useRef, useLayoutEffect, useEffect, useCallback, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@/lib/utils";
+
+export interface TooltipProps {
+  children: ReactNode;
+  content: string;
+  side?: "top" | "right" | "bottom" | "left";
+  className?: string;
+}
+
+function Tooltip({ 
+  children, 
+  content, 
+  side = "right",
+  className 
+}: TooltipProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isPositioned, setIsPositioned] = useState(false);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const updatePosition = useCallback(() => {
+    if (triggerRef.current && tooltipRef.current) {
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      const gap = 10;
+
+      let x = 0;
+      let y = 0;
+
+      switch (side) {
+        case "top":
+          x = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+          y = triggerRect.top - tooltipRect.height - gap;
+          break;
+        case "bottom":
+          x = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+          y = triggerRect.bottom + gap;
+          break;
+        case "left":
+          x = triggerRect.left - tooltipRect.width - gap;
+          y = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+          break;
+        case "right":
+        default:
+          x = triggerRect.right + gap;
+          y = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+          break;
+      }
+
+      setPosition({ x, y });
+      setIsPositioned(true);
+    }
+  }, [side]);
+
+  useLayoutEffect(() => {
+    if (!isHovered) {
+      setIsPositioned(false);
+      return;
+    }
+
+    updatePosition();
+
+    const onChange = () => updatePosition();
+    window.addEventListener("resize", onChange);
+    window.addEventListener("scroll", onChange, true);
+    return () => {
+      window.removeEventListener("resize", onChange);
+      window.removeEventListener("scroll", onChange, true);
+    };
+  }, [isHovered, updatePosition]);
+
+  return (
+    <>
+      <div
+        ref={triggerRef}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        className={className}
+      >
+        {children}
+      </div>
+      {isHovered && mounted
+        ? createPortal(
+            <div
+              ref={tooltipRef}
+              className="fixed z-[9999] pointer-events-none"
+              style={{
+                left: position.x,
+                top: position.y,
+                visibility: isPositioned ? "visible" : "hidden",
+              }}
+            >
+              <div
+                className={cn(
+                  "transition-all duration-150 ease-out",
+                  isPositioned ? "opacity-100 scale-100" : "opacity-0 scale-95",
+                  side === "right" && (isPositioned ? "translate-x-0" : "-translate-x-2"),
+                  side === "left" && (isPositioned ? "translate-x-0" : "translate-x-2"),
+                  side === "top" && (isPositioned ? "translate-y-0" : "translate-y-2"),
+                  side === "bottom" && (isPositioned ? "translate-y-0" : "-translate-y-2")
+                )}
+              >
+                <div className="relative bg-foreground text-background text-sm font-medium px-3 py-1.5 rounded-[4px] whitespace-nowrap shadow-xl shadow-black/25">
+                  {content}
+                  {side === "right" && (
+                    <div className="absolute -left-[7px] top-1/2 -translate-y-1/2">
+                      <div className="w-0 h-0 border-t-[8px] border-t-transparent border-b-[8px] border-b-transparent border-r-[8px] border-r-foreground" />
+                    </div>
+                  )}
+                  {side === "left" && (
+                    <div className="absolute -right-[7px] top-1/2 -translate-y-1/2">
+                      <div className="w-0 h-0 border-t-[8px] border-t-transparent border-b-[8px] border-b-transparent border-l-[8px] border-l-foreground" />
+                    </div>
+                  )}
+                  {side === "top" && (
+                    <div className="absolute -bottom-[7px] left-1/2 -translate-x-1/2">
+                      <div className="w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-foreground" />
+                    </div>
+                  )}
+                  {side === "bottom" && (
+                    <div className="absolute -top-[7px] left-1/2 -translate-x-1/2">
+                      <div className="w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-b-[8px] border-b-foreground" />
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>,
+            document.body
+          )
+        : null}
+    </>
+  );
+}
+
+export { Tooltip };