pixelforge-ui 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1069 @@
+// src/tokens/index.ts
+var colors = {
+  primary: {
+    lime: "#C4F0C8",
+    lavender: "#D4B5E8",
+    sky: "#B8E0F0",
+    peach: "#F0D9C8",
+    mint: "#C8F0E0"
+  },
+  dark: {
+    lime: "#6B9D77",
+    lavender: "#8B6BA8",
+    sky: "#6BA3C8",
+    peach: "#C89968",
+    mint: "#6BA89F"
+  },
+  neutral: {
+    black: "#1A1A24",
+    dark: "#2D2D3D",
+    gray: "#666670",
+    light: "#F5F5F0",
+    white: "#FFFBF5"
+  },
+  semantic: {
+    success: "#7FD8B8",
+    warning: "#FFB347",
+    error: "#FF6B6B",
+    info: "#B8E0F0"
+  },
+  accent: "#FF6B9D"
+};
+var typography = {
+  font: {
+    pixel: '"Press Start 2P", monospace',
+    sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    mono: '"Courier New", monospace'
+  },
+  size: {
+    xs: "12px",
+    sm: "14px",
+    base: "16px",
+    lg: "20px",
+    xl: "24px",
+    "2xl": "32px"
+  },
+  weight: {
+    normal: 400,
+    bold: 700
+  },
+  lineHeight: {
+    tight: 1.2,
+    normal: 1.5,
+    relaxed: 1.75
+  }
+};
+var spacing = {
+  0: "0",
+  1: "4px",
+  2: "8px",
+  3: "12px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  8: "32px",
+  10: "40px",
+  12: "48px",
+  16: "64px",
+  20: "80px"
+};
+var shadows = {
+  sm: "4px 4px 0px rgba(0, 0, 0, 0.2)",
+  md: "8px 8px 0px rgba(0, 0, 0, 0.15)",
+  lg: "12px 12px 0px rgba(0, 0, 0, 0.1)",
+  glow: {
+    lime: "0 0 20px rgba(196, 240, 200, 0.4)",
+    lavender: "0 0 20px rgba(212, 181, 232, 0.4)",
+    sky: "0 0 20px rgba(184, 224, 240, 0.4)",
+    peach: "0 0 20px rgba(240, 217, 200, 0.4)"
+  },
+  press: "2px 2px 0px rgba(0, 0, 0, 0.3), inset 0 2px 0px rgba(0, 0, 0, 0.1)"
+};
+var borderRadius = {
+  sm: "4px",
+  base: "8px",
+  lg: "12px",
+  full: "9999px"
+};
+var breakpoints = {
+  xs: "320px",
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px"
+};
+var zIndex = {
+  hidden: -1,
+  base: 0,
+  dropdown: 1e3,
+  sticky: 1100,
+  fixed: 1200,
+  modal: 1300,
+  popover: 1400,
+  tooltip: 1500
+};
+var transitions = {
+  fast: "150ms ease-in-out",
+  base: "200ms ease-in-out",
+  slow: "300ms ease-in-out"
+};
+var gamePalettes = {
+  nes: {
+    name: "NES Classic",
+    colors: ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF"]
+  },
+  gameboy: {
+    name: "Game Boy",
+    colors: ["#9BBC0F", "#8BAC0F", "#306230", "#0F380F"]
+  },
+  atari: {
+    name: "Atari 2600",
+    colors: ["#000000", "#FFFFFF", "#FF0000", "#FFFF00"]
+  },
+  snes: {
+    name: "SNES",
+    colors: ["#8B008B", "#FF1493", "#1E90FF", "#FFD700"]
+  }
+};
+
+// src/components/Button.tsx
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Button = React.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    disabled = false,
+    isLoading = false,
+    loadingText,
+    children,
+    className = "",
+    ...props
+  }, ref) => {
+    const baseStyles = `
+      inline-flex items-center justify-center
+      font-pixel text-sm
+      transition-all duration-200
+      cursor-pointer
+      active:scale-95
+      focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pixelforge-accent
+      disabled:opacity-50 disabled:cursor-not-allowed
+    `;
+    const sizeStyles = {
+      sm: "px-3 py-2 text-xs gap-2",
+      md: "px-4 py-3 text-sm gap-2",
+      lg: "px-6 py-4 text-base gap-3"
+    };
+    const variantStyles = {
+      primary: `
+        bg-pixelforge-lime text-pixelforge-black
+        border-2 border-pixelforge-darkLime
+        shadow-px
+        hover:shadow-px-lg hover:translate-y-[-2px]
+        active:shadow-px-press active:translate-y-[2px]
+        dark:bg-pixelforge-darkLime dark:text-pixelforge-white dark:border-pixelforge-lime
+      `,
+      secondary: `
+        bg-pixelforge-lavender text-pixelforge-black
+        border-2 border-pixelforge-darkLavender
+        shadow-px
+        hover:shadow-px-lg hover:translate-y-[-2px]
+        active:shadow-px-press active:translate-y-[2px]
+        dark:bg-pixelforge-darkLavender dark:text-pixelforge-white dark:border-pixelforge-lavender
+      `,
+      outline: `
+        bg-transparent border-2
+        text-pixelforge-black border-pixelforge-darkLime
+        hover:bg-pixelforge-lime/10 active:bg-pixelforge-lime/20
+        dark:text-pixelforge-white dark:border-pixelforge-lime
+        dark:hover:bg-pixelforge-lime/30 dark:active:bg-pixelforge-lime/40
+      `,
+      ghost: `
+        bg-transparent text-pixelforge-black border-2 border-transparent
+        hover:bg-pixelforge-lime/20 active:bg-pixelforge-lime/30
+        dark:text-pixelforge-white dark:hover:bg-pixelforge-lime/30
+        dark:active:bg-pixelforge-lime/40
+      `
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        disabled: disabled || isLoading,
+        className: `${baseStyles} ${sizeStyles[size]} ${variantStyles[variant]} ${className}`,
+        ...props,
+        children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "animate-spin", children: "\u27F3" }),
+          loadingText || children
+        ] }) : children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/Input.tsx
+import React2 from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Input = React2.forwardRef(
+  ({
+    label,
+    error,
+    helperText,
+    required,
+    leftIcon,
+    rightIcon,
+    className = "",
+    disabled,
+    ...props
+  }, ref) => {
+    const hasError = !!error;
+    return /* @__PURE__ */ jsxs2("div", { className: "w-full", children: [
+      label && /* @__PURE__ */ jsx2(
+        "label",
+        {
+          htmlFor: props.id,
+          className: `
+              block font-pixel text-xs mb-2
+              text-pixelforge-black dark:text-pixelforge-white
+              ${required ? "after:content-['*'] after:text-pixelforge-error after:ml-1" : ""}
+            `,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+        leftIcon && /* @__PURE__ */ jsx2("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-pixelforge-black dark:text-pixelforge-white", children: leftIcon }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref,
+            disabled,
+            className: `
+              w-full
+              px-4 py-3
+              font-mono text-sm
+              bg-pixelforge-white dark:bg-pixelforge-dark
+              text-pixelforge-black dark:text-pixelforge-white
+              border-2 border-pixelforge-darkLime dark:border-pixelforge-lime
+              rounded-px-sm
+              shadow-px
+              transition-all duration-200
+              placeholder:text-pixelforge-gray/50
+              focus:outline-none focus:shadow-px-lg focus:translate-y-[-2px]
+              focus:border-pixelforge-accent
+              disabled:opacity-50 disabled:cursor-not-allowed
+              ${hasError ? "border-pixelforge-error focus:border-pixelforge-error shadow-px focus:shadow-px-glow" : ""}
+              ${leftIcon ? "pl-10" : ""}
+              ${rightIcon ? "pr-10" : ""}
+              ${className}
+            `,
+            ...props
+          }
+        ),
+        rightIcon && /* @__PURE__ */ jsx2("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-pixelforge-black dark:text-pixelforge-white", children: rightIcon })
+      ] }),
+      error && /* @__PURE__ */ jsxs2("p", { className: "mt-2 font-mono text-xs text-pixelforge-error", children: [
+        "\u26A0 ",
+        error
+      ] }),
+      helperText && !error && /* @__PURE__ */ jsx2("p", { className: "mt-2 font-mono text-xs text-pixelforge-gray", children: helperText })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/Card.tsx
+import React3 from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Card = React3.forwardRef(
+  ({
+    title,
+    subtitle,
+    interactive = false,
+    variant = "default",
+    header,
+    footer,
+    children,
+    className = "",
+    ...props
+  }, ref) => {
+    const variantStyles = {
+      default: `
+        bg-pixelforge-white dark:bg-pixelforge-dark
+        border-pixelforge-darkLime dark:border-pixelforge-lime
+      `,
+      lime: `
+        bg-pixelforge-lime/20 dark:bg-pixelforge-darkLime/20
+        border-pixelforge-lime dark:border-pixelforge-lime
+      `,
+      lavender: `
+        bg-pixelforge-lavender/20 dark:bg-pixelforge-darkLavender/20
+        border-pixelforge-lavender dark:border-pixelforge-lavender
+      `,
+      sky: `
+        bg-pixelforge-sky/20 dark:bg-pixelforge-darkSky/20
+        border-pixelforge-sky dark:border-pixelforge-sky
+      `,
+      peach: `
+        bg-pixelforge-peach/20 dark:bg-pixelforge-darkPeach/20
+        border-pixelforge-peach dark:border-pixelforge-peach
+      `,
+      mint: `
+        bg-pixelforge-mint/20 dark:bg-pixelforge-darkMint/20
+        border-pixelforge-mint dark:border-pixelforge-mint
+      `
+    };
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        ref,
+        className: `
+          border-2 border-solid
+          rounded-px
+          shadow-px
+          transition-all duration-200
+          ${interactive ? "cursor-pointer hover:shadow-px-lg hover:translate-y-[-2px] active:shadow-px-press active:translate-y-[2px]" : ""}
+          ${variantStyles[variant]}
+          ${className}
+        `,
+        ...props,
+        children: [
+          header && /* @__PURE__ */ jsx3("div", { className: "border-b-2 border-pixelforge-darkLime dark:border-pixelforge-lime/30 px-6 py-4", children: header }),
+          /* @__PURE__ */ jsxs3("div", { className: "p-6", children: [
+            title && /* @__PURE__ */ jsx3("h3", { className: "font-pixel text-lg text-pixelforge-black dark:text-pixelforge-white mb-1", children: title }),
+            subtitle && /* @__PURE__ */ jsx3("p", { className: "font-mono text-xs text-pixelforge-gray mb-4", children: subtitle }),
+            children
+          ] }),
+          footer && /* @__PURE__ */ jsx3("div", { className: "border-t-2 border-pixelforge-darkLime dark:border-pixelforge-lime/30 px-6 py-4 bg-pixelforge-light/50 dark:bg-pixelforge-black/20", children: footer })
+        ]
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+
+// src/components/Badge.tsx
+import React4 from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Badge = React4.forwardRef(
+  ({
+    variant = "default",
+    size = "md",
+    dismissible = false,
+    onDismiss,
+    children,
+    className = "",
+    ...props
+  }, ref) => {
+    const sizeStyles = {
+      sm: "px-2 py-1 text-xs",
+      md: "px-3 py-1.5 text-sm",
+      lg: "px-4 py-2 text-base"
+    };
+    const variantStyles = {
+      default: `
+        bg-pixelforge-light dark:bg-pixelforge-dark
+        text-pixelforge-black dark:text-pixelforge-white
+        border-pixelforge-darkLime dark:border-pixelforge-lime
+      `,
+      lime: `
+        bg-pixelforge-lime text-pixelforge-black
+        border-pixelforge-darkLime dark:bg-pixelforge-darkLime dark:text-pixelforge-white dark:border-pixelforge-lime
+      `,
+      lavender: `
+        bg-pixelforge-lavender text-pixelforge-black
+        border-pixelforge-darkLavender dark:bg-pixelforge-darkLavender dark:text-pixelforge-white dark:border-pixelforge-lavender
+      `,
+      sky: `
+        bg-pixelforge-sky text-pixelforge-black
+        border-pixelforge-darkSky dark:bg-pixelforge-darkSky dark:text-pixelforge-white dark:border-pixelforge-sky
+      `,
+      peach: `
+        bg-pixelforge-peach text-pixelforge-black
+        border-pixelforge-darkPeach dark:bg-pixelforge-darkPeach dark:text-pixelforge-white dark:border-pixelforge-peach
+      `,
+      mint: `
+        bg-pixelforge-mint text-pixelforge-black
+        border-pixelforge-darkMint dark:bg-pixelforge-darkMint dark:text-pixelforge-white dark:border-pixelforge-mint
+      `,
+      success: `
+        bg-pixelforge-success/20 text-pixelforge-success
+        border-pixelforge-success dark:bg-pixelforge-success/10 dark:text-pixelforge-success/80
+      `,
+      warning: `
+        bg-pixelforge-warning/20 text-pixelforge-warning
+        border-pixelforge-warning dark:bg-pixelforge-warning/10 dark:text-pixelforge-warning/80
+      `,
+      error: `
+        bg-pixelforge-error/20 text-pixelforge-error
+        border-pixelforge-error dark:bg-pixelforge-error/10 dark:text-pixelforge-error/80
+      `,
+      info: `
+        bg-pixelforge-sky/20 text-pixelforge-sky
+        border-pixelforge-sky dark:bg-pixelforge-sky/10 dark:text-pixelforge-sky/80
+      `
+    };
+    return /* @__PURE__ */ jsxs4(
+      "span",
+      {
+        ref,
+        className: `
+          inline-flex items-center gap-2
+          font-pixel text-xs
+          border-2
+          rounded-px-sm
+          whitespace-nowrap
+          transition-all duration-200
+          ${sizeStyles[size]}
+          ${variantStyles[variant]}
+          ${className}
+        `,
+        ...props,
+        children: [
+          children,
+          dismissible && /* @__PURE__ */ jsx4(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onDismiss?.();
+              },
+              className: "ml-1 font-bold hover:opacity-70 transition-opacity",
+              "aria-label": "Dismiss",
+              children: "\u2715"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+// src/components/Modal.tsx
+import { useEffect } from "react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  closeOnBackdropClick = true,
+  showCloseButton = true,
+  footer,
+  size = "md",
+  children
+}) => {
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const sizeStyles = {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg"
+  };
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: `
+          fixed inset-0 z-modal
+          bg-black/40 backdrop-blur-xs
+          transition-opacity duration-200
+          ${isOpen ? "opacity-100" : "opacity-0 pointer-events-none"}
+        `,
+        onClick: () => closeOnBackdropClick && onClose(),
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: `
+          fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
+          z-modal w-11/12 ${sizeStyles[size]}
+          bg-pixelforge-white dark:bg-pixelforge-dark
+          border-2 border-pixelforge-darkLime dark:border-pixelforge-lime
+          rounded-px
+          shadow-lg
+          transition-all duration-200
+          ${isOpen ? "scale-100 opacity-100" : "scale-95 opacity-0 pointer-events-none"}
+        `,
+        role: "dialog",
+        "aria-modal": "true",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          title && /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between border-b-2 border-pixelforge-darkLime dark:border-pixelforge-lime/30 px-6 py-4", children: [
+            /* @__PURE__ */ jsx5("h2", { className: "font-pixel text-lg text-pixelforge-black dark:text-pixelforge-white", children: title }),
+            showCloseButton && /* @__PURE__ */ jsx5(
+              "button",
+              {
+                onClick: onClose,
+                className: `
+                  text-2xl font-bold
+                  text-pixelforge-black dark:text-pixelforge-white
+                  hover:opacity-70
+                  transition-opacity
+                  p-1 -mr-2
+                `,
+                "aria-label": "Close modal",
+                children: "\u2715"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx5("div", { className: "px-6 py-6 max-h-[60vh] overflow-y-auto", children }),
+          footer && /* @__PURE__ */ jsx5("div", { className: "border-t-2 border-pixelforge-darkLime dark:border-pixelforge-lime/30 px-6 py-4 bg-pixelforge-light/50 dark:bg-pixelforge-black/20", children: footer })
+        ]
+      }
+    )
+  ] });
+};
+Modal.displayName = "Modal";
+
+// src/components/Dropdown.tsx
+import { useEffect as useEffect2, useRef, useState } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var Dropdown = ({
+  trigger,
+  items,
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  placement = "bottom"
+}) => {
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
+  const triggerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  useEffect2(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      if (triggerRef.current?.contains(e.target) || dropdownRef.current?.contains(e.target)) {
+        return;
+      }
+      handleClose();
+    };
+    window.addEventListener("mousedown", handleClickOutside);
+    return () => window.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  useEffect2(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        handleClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen]);
+  const handleOpen = () => {
+    const newState = !isOpen;
+    if (controlledIsOpen === void 0) {
+      setInternalIsOpen(newState);
+    }
+    onOpenChange?.(newState);
+  };
+  const handleClose = () => {
+    if (controlledIsOpen === void 0) {
+      setInternalIsOpen(false);
+    }
+    onOpenChange?.(false);
+  };
+  const handleItemClick = (item) => {
+    if (item.disabled) return;
+    item.onClick?.();
+    handleClose();
+  };
+  const placementStyles = {
+    bottom: "top-full mt-2",
+    top: "bottom-full mb-2",
+    left: "right-full mr-2",
+    right: "left-full ml-2"
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: "relative inline-block", children: [
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        ref: triggerRef,
+        onClick: handleOpen,
+        className: "cursor-pointer",
+        children: trigger
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx6(
+      "div",
+      {
+        ref: dropdownRef,
+        className: `
+            absolute ${placementStyles[placement]}
+            min-w-max
+            bg-pixelforge-white dark:bg-pixelforge-dark
+            border-2 border-pixelforge-darkLime dark:border-pixelforge-lime
+            rounded-px-sm
+            shadow-px-lg
+            z-dropdown
+            py-1
+            animation-in fade-in zoom-in-95 duration-200
+          `,
+        role: "menu",
+        children: items.map((item, index) => {
+          if (item.divider) {
+            return /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: "h-px bg-pixelforge-darkLime/20 dark:bg-pixelforge-lime/20 my-1",
+                role: "separator"
+              },
+              item.id || `divider-${index}`
+            );
+          }
+          return /* @__PURE__ */ jsx6(
+            "button",
+            {
+              onClick: () => handleItemClick(item),
+              disabled: item.disabled,
+              className: `
+                  w-full text-left
+                  px-4 py-2.5
+                  font-mono text-sm
+                  transition-colors duration-150
+                  flex items-center gap-2
+                  ${item.disabled ? "opacity-50 cursor-not-allowed text-pixelforge-gray dark:text-pixelforge-gray/50" : `
+                        text-pixelforge-black dark:text-pixelforge-white
+                        hover:bg-pixelforge-lime/20 dark:hover:bg-pixelforge-lime/40
+                        active:bg-pixelforge-lime/30 dark:active:bg-pixelforge-lime/50
+                      `}
+                `,
+              role: "menuitem",
+              children: item.label
+            },
+            item.id
+          );
+        })
+      }
+    )
+  ] });
+};
+Dropdown.displayName = "Dropdown";
+
+// src/components/Tooltip.tsx
+import { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var Tooltip = ({
+  content,
+  children,
+  placement = "top",
+  delay = 200,
+  disabled = false,
+  variant = "default"
+}) => {
+  const [isVisible, setIsVisible] = useState2(false);
+  const [position, setPosition] = useState2({ top: 0, left: 0 });
+  const triggerRef = useRef2(null);
+  const tooltipRef = useRef2(null);
+  const timeoutRef = useRef2();
+  const handleMouseEnter = () => {
+    if (disabled) return;
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(true);
+      updatePosition();
+    }, delay);
+  };
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+  };
+  const updatePosition = () => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const offset = 8;
+    let top = 0;
+    let left = 0;
+    switch (placement) {
+      case "top":
+        top = triggerRect.top - tooltipRect.height - offset;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case "bottom":
+        top = triggerRect.bottom + offset;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case "left":
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.left - tooltipRect.width - offset;
+        break;
+      case "right":
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.right + offset;
+        break;
+    }
+    setPosition({ top, left });
+  };
+  useEffect3(() => {
+    if (isVisible) {
+      updatePosition();
+      const handleResize = () => updatePosition();
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, [isVisible, placement]);
+  useEffect3(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const variantStyles = {
+    default: `
+      bg-pixelforge-black dark:bg-pixelforge-white
+      text-pixelforge-white dark:text-pixelforge-black
+      border-2 border-pixelforge-darkLime
+    `,
+    dark: `
+      bg-pixelforge-black/90 dark:bg-pixelforge-white/90
+      text-pixelforge-white dark:text-pixelforge-black
+      border-2 border-pixelforge-darkLime/50
+      backdrop-blur-xs
+    `
+  };
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        ref: triggerRef,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        className: "inline-block",
+        children
+      }
+    ),
+    isVisible && /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        ref: tooltipRef,
+        style: {
+          position: "fixed",
+          top: `${position.top}px`,
+          left: `${position.left}px`
+        },
+        className: `
+            z-tooltip
+            px-3 py-2
+            font-mono text-xs
+            rounded-px-sm
+            shadow-px-lg
+            whitespace-nowrap
+            pointer-events-none
+            transition-opacity duration-200
+            ${variantStyles[variant]}
+          `,
+        role: "tooltip",
+        children: [
+          content,
+          /* @__PURE__ */ jsx7(
+            "div",
+            {
+              className: `
+              absolute w-2 h-2 bg-pixelforge-black dark:bg-pixelforge-white
+              border-r-2 border-b-2 border-pixelforge-darkLime
+              ${placement === "top" ? "bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 rotate-45" : placement === "bottom" ? "top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 -rotate-45" : placement === "left" ? "right-0 top-1/2 -translate-y-1/2 translate-x-1/2 rotate-[135deg]" : "left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 -rotate-[135deg]"}
+            `
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+Tooltip.displayName = "Tooltip";
+
+// src/components/Navbar.tsx
+import React8 from "react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var Navbar = React8.forwardRef(
+  ({
+    brand,
+    links = [],
+    rightElement,
+    onBrandClick,
+    sticky = false,
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx8(
+      "nav",
+      {
+        ref,
+        className: `
+          bg-pixelforge-white dark:bg-pixelforge-dark
+          text-pixelforge-black dark:text-pixelforge-white
+          border-b-2 border-pixelforge-darkLime dark:border-pixelforge-lime
+          shadow-px
+          transition-all duration-200
+          ${sticky ? "sticky top-0 z-fixed" : ""}
+          ${className}
+        `,
+        ...props,
+        children: /* @__PURE__ */ jsx8("div", { className: "max-w-full px-6 py-4", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between gap-8", children: [
+          brand && /* @__PURE__ */ jsx8(
+            "button",
+            {
+              onClick: onBrandClick,
+              className: `
+                  font-pixel text-lg
+                  text-pixelforge-black dark:text-pixelforge-white
+                  hover:text-pixelforge-accent
+                  transition-colors
+                  whitespace-nowrap
+                  ${onBrandClick ? "cursor-pointer" : "cursor-default"}
+                `,
+              children: brand
+            }
+          ),
+          links.length > 0 && /* @__PURE__ */ jsx8("div", { className: "hidden md:flex items-center gap-1", children: links.map((link, index) => /* @__PURE__ */ jsx8(
+            "a",
+            {
+              href: link.href || "#",
+              onClick: (e) => {
+                if (link.onClick) {
+                  e.preventDefault();
+                  link.onClick();
+                }
+              },
+              className: `
+                      px-4 py-2
+                      font-mono text-sm
+                      border-2 border-transparent
+                      rounded-px-sm
+                      transition-all duration-200
+                      ${link.disabled ? "opacity-50 cursor-not-allowed text-pixelforge-gray dark:text-pixelforge-gray/50" : `
+                            text-pixelforge-black dark:text-pixelforge-white
+                            hover:bg-pixelforge-lime/20 dark:hover:bg-pixelforge-lime/40
+                            ${link.active ? "bg-pixelforge-lime/30 dark:bg-pixelforge-lime/50 border-pixelforge-darkLime dark:border-pixelforge-lime" : ""}
+                          `}
+                    `,
+              children: link.label
+            },
+            index
+          )) }),
+          /* @__PURE__ */ jsx8("div", { className: "flex-1" }),
+          rightElement && /* @__PURE__ */ jsx8("div", { className: "flex items-center gap-4", children: rightElement })
+        ] }) })
+      }
+    );
+  }
+);
+Navbar.displayName = "Navbar";
+
+// src/components/Sidebar.tsx
+import React9, { useState as useState3 } from "react";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var Sidebar = React9.forwardRef(
+  ({
+    brand,
+    items,
+    collapsible = true,
+    defaultCollapsed = false,
+    footer,
+    className = "",
+    ...props
+  }, ref) => {
+    const [isCollapsed, setIsCollapsed] = useState3(defaultCollapsed);
+    const [expandedItems, setExpandedItems] = useState3([]);
+    const toggleExpand = (itemId) => {
+      setExpandedItems(
+        (prev) => prev.includes(itemId) ? prev.filter((id) => id !== itemId) : [...prev, itemId]
+      );
+    };
+    const renderItem = (item, depth = 0) => {
+      const isExpanded = expandedItems.includes(item.id);
+      const hasChildren = item.children && item.children.length > 0;
+      return /* @__PURE__ */ jsxs9("div", { children: [
+        /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            onClick: () => {
+              if (hasChildren) {
+                toggleExpand(item.id);
+              }
+              item.onClick?.();
+            },
+            disabled: item.disabled,
+            className: `
+              w-full text-left
+              px-4 py-3
+              font-mono text-sm
+              border-2 border-transparent
+              rounded-px-sm
+              transition-all duration-200
+              flex items-center gap-3
+              ${item.disabled ? "opacity-50 cursor-not-allowed text-pixelforge-gray dark:text-pixelforge-gray/50" : `
+                    text-pixelforge-black dark:text-pixelforge-white
+                    hover:bg-pixelforge-lime/20 dark:hover:bg-pixelforge-lime/40
+                    ${item.active ? "bg-pixelforge-lime/30 dark:bg-pixelforge-lime/50 border-pixelforge-darkLime dark:border-pixelforge-lime" : ""}
+                  `}
+              ml-${depth * 4}
+            `,
+            style: {
+              marginLeft: `${depth * 16}px`
+            },
+            children: [
+              item.icon && /* @__PURE__ */ jsx9("span", { className: "flex-shrink-0 text-lg", children: item.icon }),
+              /* @__PURE__ */ jsx9("span", { className: "flex-1", children: item.label }),
+              hasChildren && /* @__PURE__ */ jsx9(
+                "span",
+                {
+                  className: `
+                  transition-transform duration-200
+                  ${isExpanded ? "rotate-180" : ""}
+                `,
+                  children: "\u25BC"
+                }
+              )
+            ]
+          }
+        ),
+        hasChildren && isExpanded && /* @__PURE__ */ jsx9("div", { className: "mt-1", children: item.children?.map((child) => renderItem(child, depth + 1)) })
+      ] }, item.id);
+    };
+    return /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        ref,
+        className: `
+          bg-pixelforge-white dark:bg-pixelforge-dark
+          text-pixelforge-black dark:text-pixelforge-white
+          border-r-2 border-pixelforge-darkLime dark:border-pixelforge-lime
+          h-screen
+          overflow-y-auto
+          transition-all duration-300
+          flex flex-col
+          ${isCollapsed ? "w-20" : "w-64"}
+          ${className}
+        `,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx9("div", { className: "border-b-2 border-pixelforge-darkLime dark:border-pixelforge-lime px-4 py-4", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between gap-2", children: [
+            !isCollapsed && brand && /* @__PURE__ */ jsx9("h2", { className: "font-pixel text-sm text-pixelforge-black dark:text-pixelforge-white truncate", children: brand }),
+            collapsible && /* @__PURE__ */ jsx9(
+              "button",
+              {
+                onClick: () => setIsCollapsed(!isCollapsed),
+                className: `
+                  p-2 -mr-2
+                  text-pixelforge-black dark:text-pixelforge-white
+                  hover:bg-pixelforge-lime/20 dark:hover:bg-pixelforge-lime/30
+                  rounded-px-sm
+                  transition-all
+                  flex-shrink-0
+                `,
+                "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                children: isCollapsed ? "\u2192" : "\u2190"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx9("div", { className: "flex-1 overflow-y-auto py-4 px-2 space-y-1", children: items.map((item) => renderItem(item)) }),
+          footer && /* @__PURE__ */ jsx9("div", { className: "border-t-2 border-pixelforge-darkLime dark:border-pixelforge-lime px-4 py-4", children: footer })
+        ]
+      }
+    );
+  }
+);
+Sidebar.displayName = "Sidebar";
+
+// src/components/Footer.tsx
+import React10 from "react";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var Footer = React10.forwardRef(
+  ({
+    brand,
+    sections = [],
+    copyright,
+    socialLinks,
+    className = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs10(
+      "footer",
+      {
+        ref,
+        className: `
+          bg-pixelforge-white dark:bg-pixelforge-dark
+          text-pixelforge-black dark:text-pixelforge-white
+          border-t-2 border-pixelforge-darkLime dark:border-pixelforge-lime
+          ${className}
+        `,
+        ...props,
+        children: [
+          (brand || sections.length > 0 || socialLinks) && /* @__PURE__ */ jsx10("div", { className: "max-w-full px-6 py-12", children: /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8", children: [
+            brand && /* @__PURE__ */ jsxs10("div", { className: "col-span-1", children: [
+              /* @__PURE__ */ jsx10("div", { className: "font-pixel text-lg text-pixelforge-black dark:text-pixelforge-white mb-4", children: brand }),
+              socialLinks && /* @__PURE__ */ jsx10("div", { className: "flex gap-3", children: socialLinks })
+            ] }),
+            sections.map((section, index) => /* @__PURE__ */ jsxs10("div", { children: [
+              /* @__PURE__ */ jsx10("h3", { className: "font-pixel text-sm text-pixelforge-black dark:text-pixelforge-white mb-4 uppercase tracking-wider", children: section.title }),
+              /* @__PURE__ */ jsx10("ul", { className: "space-y-3", children: section.links.map((link, linkIndex) => /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(
+                "a",
+                {
+                  href: link.href || "#",
+                  onClick: (e) => {
+                    if (link.onClick) {
+                      e.preventDefault();
+                      link.onClick();
+                    }
+                  },
+                  className: `
+                            font-mono text-sm
+                            text-pixelforge-gray dark:text-pixelforge-gray/70
+                            hover:text-pixelforge-black dark:hover:text-pixelforge-white
+                            transition-colors duration-200
+                            hover:underline
+                          `,
+                  children: link.label
+                }
+              ) }, linkIndex)) })
+            ] }, index))
+          ] }) }),
+          copyright && /* @__PURE__ */ jsx10("div", { className: "border-t-2 border-pixelforge-darkLime dark:border-pixelforge-lime/30 px-6 py-6 bg-pixelforge-light/50 dark:bg-pixelforge-black/20", children: /* @__PURE__ */ jsx10("p", { className: "font-mono text-xs text-pixelforge-gray dark:text-pixelforge-gray/70 text-center", children: copyright }) })
+        ]
+      }
+    );
+  }
+);
+Footer.displayName = "Footer";
+export {
+  Badge,
+  Button,
+  Card,
+  Dropdown,
+  Footer,
+  Input,
+  Modal,
+  Navbar,
+  Sidebar,
+  Tooltip,
+  borderRadius,
+  breakpoints,
+  colors,
+  gamePalettes,
+  shadows,
+  spacing,
+  transitions,
+  typography,
+  zIndex
+};