@rdna/radiants 0.1.0

package/dist/components/core/index.mjs

@@ -0,0 +1,2475 @@
+import { useClickOutside, useEscapeKey, useLockBodyScroll } from '../../chunk-SR2T7OEJ.mjs';
+import React14, { createContext, forwardRef, useState, useEffect, useCallback, useRef, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import Link from 'next/link';
+import { createPortal } from 'react-dom';
+
+var AccordionContext = createContext(null);
+var AccordionItemContext = createContext(null);
+function useAccordionContext() {
+  const context = useContext(AccordionContext);
+  if (!context) {
+    throw new Error("Accordion components must be used within an Accordion");
+  }
+  return context;
+}
+function useAccordionItemContext() {
+  const context = useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error("AccordionTrigger/AccordionContent must be used within an AccordionItem");
+  }
+  return context;
+}
+function Accordion({
+  type = "single",
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  className = "",
+  children
+}) {
+  const getInitialExpanded = () => {
+    const initial = controlledValue ?? defaultValue;
+    if (!initial) return /* @__PURE__ */ new Set();
+    return new Set(Array.isArray(initial) ? initial : [initial]);
+  };
+  const [expandedItems, setExpandedItems] = useState(getInitialExpanded);
+  useEffect(() => {
+    if (controlledValue !== void 0) {
+      setExpandedItems(new Set(Array.isArray(controlledValue) ? controlledValue : [controlledValue]));
+    }
+  }, [controlledValue]);
+  const toggleItem = useCallback((itemValue) => {
+    setExpandedItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(itemValue)) {
+        next.delete(itemValue);
+      } else {
+        if (type === "single") {
+          next.clear();
+        }
+        next.add(itemValue);
+      }
+      if (onValueChange) {
+        const newValue = Array.from(next);
+        onValueChange(type === "single" ? newValue[0] ?? "" : newValue);
+      }
+      return next;
+    });
+  }, [type, onValueChange]);
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { type, expandedItems, toggleItem }, children: /* @__PURE__ */ jsx("div", { className: `space-y-0 ${className}`, children }) });
+}
+function AccordionItem({ value, className = "", children }) {
+  const { expandedItems } = useAccordionContext();
+  const isExpanded = expandedItems.has(value);
+  return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: { value, isExpanded }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+          border border-edge-primary
+          bg-surface-primary
+          -mt-px first:mt-0
+          ${className}
+        `.trim(),
+      "data-state": isExpanded ? "open" : "closed",
+      children
+    }
+  ) });
+}
+function AccordionTrigger({ className = "", children }) {
+  const { toggleItem } = useAccordionContext();
+  const { value, isExpanded } = useAccordionItemContext();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => toggleItem(value),
+      className: `
+        w-full flex items-center justify-between
+        px-4 py-3
+        font-joystix text-sm uppercase text-content-primary
+        bg-transparent
+        hover:bg-content-primary/5
+        transition-colors
+        cursor-pointer
+        ${className}
+      `.trim(),
+      "aria-expanded": isExpanded,
+      children: [
+        /* @__PURE__ */ jsx("span", { children }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-[1rem] font-mondwest select-none",
+            "aria-hidden": "true",
+            children: isExpanded ? "\u2212" : "+"
+          }
+        )
+      ]
+    }
+  );
+}
+function AccordionContent({ className = "", children }) {
+  const { isExpanded } = useAccordionItemContext();
+  const contentRef = useRef(null);
+  const [height, setHeight] = useState(void 0);
+  const [isAnimating, setIsAnimating] = useState(false);
+  useEffect(() => {
+    const content = contentRef.current;
+    if (!content) return;
+    if (isExpanded) {
+      const scrollHeight = content.scrollHeight;
+      setHeight(scrollHeight);
+      setIsAnimating(true);
+      const timer = setTimeout(() => {
+        setIsAnimating(false);
+        setHeight(void 0);
+      }, 200);
+      return () => clearTimeout(timer);
+    } else {
+      const scrollHeight = content.scrollHeight;
+      setHeight(scrollHeight);
+      setIsAnimating(true);
+      requestAnimationFrame(() => {
+        setHeight(0);
+      });
+      const timer = setTimeout(() => {
+        setIsAnimating(false);
+      }, 200);
+      return () => clearTimeout(timer);
+    }
+  }, [isExpanded]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: contentRef,
+      className: `
+        overflow-hidden
+        transition-[height] duration-200 ease-out
+        ${className}
+      `.trim(),
+      style: {
+        height: isAnimating ? height : isExpanded ? "auto" : 0
+      },
+      "aria-hidden": !isExpanded,
+      children: /* @__PURE__ */ jsx("div", { className: "px-4 pb-4", children })
+    }
+  );
+}
+var variantStyles = {
+  default: "bg-surface-primary border-edge-primary text-content-primary",
+  success: "bg-status-success/10 border-status-success text-content-primary",
+  warning: "bg-status-warning/10 border-status-warning text-content-primary",
+  error: "bg-status-error/10 border-status-error text-content-primary",
+  info: "bg-status-info/10 border-status-info text-content-primary"
+};
+function Alert({
+  variant = "default",
+  title,
+  children,
+  closable = false,
+  onClose,
+  icon,
+  closeIcon,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "alert",
+      className: `
+        p-4
+        border-2
+        rounded-sm
+        ${variantStyles[variant]}
+        ${className}
+      `.trim(),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 mt-0.5", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          title && /* @__PURE__ */ jsx("p", { className: "font-joystix text-xs uppercase mb-1", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "font-mondwest text-base text-content-primary/80", children })
+        ] }),
+        closable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "text-content-primary/50 hover:text-content-primary flex-shrink-0 -mt-1",
+            "aria-label": "Close",
+            children: closeIcon || /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M12 4L4 12M4 4L12 12",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+var baseStyles = `
+  inline-flex items-center justify-center
+  font-joystix uppercase
+  rounded-sm
+  whitespace-nowrap
+`;
+var sizeStyles = {
+  sm: "px-2 py-0.5 text-2xs",
+  md: "px-2.5 py-1 text-xs"
+};
+var variantStyles2 = {
+  default: "bg-surface-primary text-content-primary border border-edge-primary",
+  success: "bg-status-success text-content-primary border border-edge-primary",
+  warning: "bg-status-warning text-content-primary border border-edge-primary",
+  error: "bg-status-error text-content-primary border border-edge-primary",
+  info: "bg-status-info text-content-primary border border-edge-primary"
+};
+function Badge({
+  variant = "default",
+  size = "md",
+  children,
+  className = ""
+}) {
+  const classes = [
+    baseStyles,
+    sizeStyles[size],
+    variantStyles2[variant],
+    className
+  ].join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ jsx("span", { className: classes, children });
+}
+function Breadcrumbs({
+  items,
+  separator = "/",
+  className = ""
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "Breadcrumb",
+      className: `flex items-center gap-2 ${className}`.trim(),
+      children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-2", children: items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+          index > 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "font-mondwest text-base text-content-primary/40",
+              "aria-hidden": "true",
+              children: separator
+            }
+          ),
+          item.href && !isLast ? /* @__PURE__ */ jsx(
+            Link,
+            {
+              href: item.href,
+              className: "font-mondwest text-base text-content-primary/60 hover:text-content-primary hover:underline transition-colors",
+              children: item.label
+            }
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `
+                    font-mondwest text-base
+                    ${isLast ? "text-content-primary font-semibold" : "text-content-primary/60"}
+                  `.trim(),
+              "aria-current": isLast ? "page" : void 0,
+              children: item.label
+            }
+          )
+        ] }, index);
+      }) })
+    }
+  );
+}
+var baseStyles2 = `
+  inline-flex items-center
+  font-heading uppercase
+  whitespace-nowrap
+  cursor-pointer select-none
+  border border-edge-primary
+  rounded-sm
+  shadow-btn
+  hover:-translate-y-0.5
+  hover:shadow-btn-hover
+  active:translate-y-0.5
+  active:shadow-none
+  disabled:opacity-50 disabled:cursor-not-allowed
+  disabled:hover:translate-y-0 disabled:hover:shadow-btn
+  focus:outline-none focus-visible:ring-2 focus-visible:ring-edge-focus focus-visible:ring-offset-1
+`;
+var sizeStyles2 = {
+  sm: "h-8 px-3 text-xs gap-3",
+  md: "h-8 px-3 text-xs gap-3",
+  lg: "h-8 px-3 text-sm gap-3"
+};
+var iconOnlySizeStyles = {
+  sm: "w-8 h-8 p-0",
+  md: "w-8 h-8 p-0",
+  lg: "w-8 h-8 p-0"
+};
+var variantStyles3 = {
+  primary: `
+    bg-action-primary text-content-primary
+    hover:bg-action-primary
+    active:bg-action-primary
+  `,
+  secondary: `
+    bg-surface-secondary text-content-inverted
+    hover:bg-surface-primary hover:text-content-primary
+    active:bg-action-primary active:text-content-primary
+  `,
+  outline: `
+    bg-transparent text-content-primary
+    shadow-none
+    hover:bg-content-primary/5 hover:!translate-y-0 hover:shadow-none
+    active:bg-action-primary active:!translate-y-0 active:shadow-none
+  `,
+  ghost: `
+    bg-transparent text-content-primary
+    border-transparent
+    shadow-none
+    hover:bg-transparent hover:border-edge-primary hover:text-content-primary hover:shadow-none hover:translate-y-0
+    active:bg-action-primary active:text-content-primary active:border-edge-primary active:translate-y-0
+  `
+};
+function getButtonClasses(variant, size, iconOnly, fullWidth, className, hasIcon) {
+  let justifyClass = "justify-start";
+  if (iconOnly) {
+    justifyClass = "justify-center";
+  } else if (fullWidth && hasIcon) {
+    justifyClass = "justify-between";
+  }
+  return [
+    baseStyles2,
+    iconOnly ? iconOnlySizeStyles[size] : sizeStyles2[size],
+    justifyClass,
+    variantStyles3[variant],
+    fullWidth ? "w-full" : "",
+    className
+  ].join(" ").replace(/\s+/g, " ").trim();
+}
+function Button(props) {
+  const {
+    variant = "primary",
+    size = "md",
+    fullWidth = false,
+    iconOnly = false,
+    icon,
+    loadingIndicator,
+    loading = false,
+    children,
+    className = "",
+    ...rest
+  } = props;
+  const hasIcon = Boolean(icon || iconOnly);
+  const showLoading = Boolean(loading && hasIcon && loadingIndicator);
+  const classes = getButtonClasses(variant, size, iconOnly, fullWidth, className, hasIcon);
+  const content = showLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    !iconOnly && children,
+    loadingIndicator
+  ] }) : icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    !iconOnly && children,
+    icon
+  ] }) : children;
+  if ("href" in props && props.href) {
+    const { href, asLink = true, target, ...linkRest } = rest;
+    if (asLink) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          target,
+          className: classes,
+          ...linkRest,
+          children: content
+        }
+      );
+    }
+    const linkButtonDisabled = showLoading || Boolean(linkRest.disabled);
+    const { disabled: _2, ...linkButtonRest } = linkRest;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: classes,
+        onClick: () => window.open(href, target || "_self"),
+        disabled: linkButtonDisabled,
+        ...linkButtonRest,
+        children: content
+      }
+    );
+  }
+  const buttonProps = rest;
+  const disabled = showLoading || Boolean(buttonProps.disabled);
+  const { disabled: _, ...buttonPropsWithoutDisabled } = buttonProps;
+  return /* @__PURE__ */ jsx("button", { className: classes, ...buttonPropsWithoutDisabled, disabled, children: content });
+}
+var baseStyles3 = `
+  border border-edge-primary
+  rounded-md
+  overflow-hidden
+`;
+var variantStyles4 = {
+  default: `
+    bg-surface-primary text-content-primary
+  `,
+  dark: `
+    bg-surface-secondary text-content-inverted
+  `,
+  raised: `
+    bg-surface-primary text-content-primary
+    shadow-card
+  `
+};
+function Card({
+  variant = "default",
+  children,
+  className = "",
+  noPadding = false
+}) {
+  const classes = [
+    baseStyles3,
+    variantStyles4[variant],
+    noPadding ? "" : "p-4",
+    className
+  ].join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ jsx("div", { className: classes, children });
+}
+function CardHeader({ children, className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: `px-4 py-3 border-b border-edge-primary ${className}`, children });
+}
+function CardBody({ children, className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: `p-4 ${className}`, children });
+}
+function CardFooter({ children, className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: `px-4 py-3 border-t border-edge-primary ${className}`, children });
+}
+function CheckmarkIcon({ className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M13.5 4.5L6 12L2.5 8.5",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+var Checkbox = forwardRef(function Checkbox2({ label, className = "", disabled, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: `
+        inline-flex items-center gap-2 cursor-pointer
+        ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+        ${className}
+      `,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "checkbox",
+              disabled,
+              className: "peer sr-only",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `
+            w-5 h-5
+            bg-surface-primary
+            border border-edge-primary
+            rounded-xs
+            peer-checked:bg-action-primary
+            peer-focus:ring-2 peer-focus:ring-edge-focus peer-focus:ring-offset-1
+            flex items-center justify-center
+          `
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 peer-checked:opacity-100 transition-opacity pointer-events-none", children: /* @__PURE__ */ jsx(CheckmarkIcon, { className: "text-content-primary" }) })
+        ] }),
+        label && /* @__PURE__ */ jsx("span", { className: "font-mondwest text-base text-content-primary select-none", children: label })
+      ]
+    }
+  );
+});
+var Radio = forwardRef(function Radio2({ label, className = "", disabled, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: `
+        inline-flex items-center gap-2 cursor-pointer
+        ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+        ${className}
+      `,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "radio",
+              disabled,
+              className: "peer sr-only",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `
+            w-5 h-5
+            bg-surface-primary
+            border border-edge-primary
+            rounded-full
+            peer-checked:bg-action-primary
+            peer-focus:ring-2 peer-focus:ring-edge-focus peer-focus:ring-offset-1
+            flex items-center justify-center
+          `
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-content-primary rounded-full opacity-0 peer-checked:opacity-100 pointer-events-none"
+            }
+          )
+        ] }),
+        label && /* @__PURE__ */ jsx("span", { className: "font-mondwest text-base text-content-primary select-none", children: label })
+      ]
+    }
+  );
+});
+var ContextMenuContext = createContext(null);
+function useContextMenu() {
+  const context = useContext(ContextMenuContext);
+  if (!context) {
+    throw new Error("ContextMenu components must be used within a ContextMenu provider");
+  }
+  return context;
+}
+function ContextMenu({ children, className = "" }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const containerRef = useRef(null);
+  const open = (pos) => {
+    setPosition(pos);
+    setIsOpen(true);
+  };
+  const close = () => {
+    setIsOpen(false);
+  };
+  const handleContextMenu = (e) => {
+    e.preventDefault();
+    open({ x: e.clientX, y: e.clientY });
+  };
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        close();
+      }
+    };
+    const handleEscape = (e) => {
+      if (e.key === "Escape") close();
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen]);
+  return /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: { isOpen, position, open, close }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      onContextMenu: handleContextMenu,
+      className,
+      children
+    }
+  ) });
+}
+function ContextMenuContent({ children, className = "" }) {
+  const { isOpen, position, close } = useContextMenu();
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+        fixed z-[1000]
+        min-w-[160px]
+        bg-surface-primary
+        border border-edge-primary
+        rounded-sm
+        shadow-[2px_2px_0_0_var(--color-edge-primary)]
+        py-1
+        ${className}
+      `,
+      style: {
+        left: position.x,
+        top: position.y
+      },
+      onClick: close,
+      children
+    }
+  );
+}
+function ContextMenuItem({
+  onClick,
+  disabled = false,
+  destructive = false,
+  icon,
+  children,
+  className = ""
+}) {
+  const { close } = useContextMenu();
+  const handleClick = () => {
+    if (!disabled && onClick) {
+      onClick();
+      close();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled,
+      className: `
+        w-full flex items-center gap-2
+        px-3 py-1.5
+        font-mondwest text-base text-left
+        ${destructive ? "text-status-error" : "text-content-primary"}
+        ${disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-action-primary cursor-pointer"}
+        ${className}
+      `,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4 flex items-center justify-center", children: icon }),
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  );
+}
+function ContextMenuSeparator({ className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `my-1 border-t border-edge-primary/20 ${className}`
+    }
+  );
+}
+function Divider({
+  orientation = "horizontal",
+  variant = "solid",
+  className = ""
+}) {
+  if (variant === "decorated") {
+    return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-4 ${className}`, children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 h-[2px] bg-edge-primary/20" }),
+      /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-action-primary border border-edge-primary rotate-45" }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 h-[2px] bg-edge-primary/20" })
+    ] });
+  }
+  if (orientation === "horizontal") {
+    const borderStyle2 = variant === "dashed" ? "border-dashed" : "border-solid";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `w-full border-t border-edge-primary/20 ${borderStyle2} ${className}`,
+        role: "separator",
+        "aria-orientation": "horizontal"
+      }
+    );
+  }
+  const borderStyle = variant === "dashed" ? "border-dashed" : "border-solid";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `h-full border-l border-edge-primary/20 ${borderStyle} ${className}`,
+      role: "separator",
+      "aria-orientation": "vertical"
+    }
+  );
+}
+var DropdownContext = createContext(null);
+function useDropdownContext() {
+  const context = useContext(DropdownContext);
+  if (!context) {
+    throw new Error("DropdownMenu components must be used within a DropdownMenu");
+  }
+  return context;
+}
+function DropdownMenu({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  position = "bottom-start",
+  children
+}) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const triggerRef = useRef(null);
+  const setOpen = useCallback((newOpen) => {
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  }, [isControlled, onOpenChange]);
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: { open, setOpen, triggerRef, position }, children: /* @__PURE__ */ jsx("div", { className: "relative inline-block", children }) });
+}
+function DropdownMenuTrigger({ children, asChild }) {
+  const { open, setOpen, triggerRef } = useDropdownContext();
+  const handleClick = () => {
+    setOpen(!open);
+  };
+  if (asChild && React14.isValidElement(children)) {
+    return React14.cloneElement(children, {
+      onClick: handleClick,
+      ref: triggerRef
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ref: triggerRef,
+      onClick: handleClick,
+      children
+    }
+  );
+}
+function DropdownMenuContent({ className = "", children }) {
+  const { open, setOpen, triggerRef, position } = useDropdownContext();
+  const contentRef = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  const [coords, setCoords] = useState({ top: 0, left: 0 });
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!open || !triggerRef.current || !contentRef.current) return;
+    const trigger = triggerRef.current.getBoundingClientRect();
+    const content = contentRef.current.getBoundingClientRect();
+    const gap = 4;
+    let top = 0;
+    let left = 0;
+    switch (position) {
+      case "bottom-start":
+        top = trigger.bottom + gap;
+        left = trigger.left;
+        break;
+      case "bottom-end":
+        top = trigger.bottom + gap;
+        left = trigger.right - content.width;
+        break;
+      case "top-start":
+        top = trigger.top - content.height - gap;
+        left = trigger.left;
+        break;
+      case "top-end":
+        top = trigger.top - content.height - gap;
+        left = trigger.right - content.width;
+        break;
+    }
+    top = Math.max(8, Math.min(top, window.innerHeight - content.height - 8));
+    left = Math.max(8, Math.min(left, window.innerWidth - content.width - 8));
+    setCoords({ top, left });
+  }, [open, position, triggerRef]);
+  useClickOutside(open, [contentRef, triggerRef], () => setOpen(false));
+  useEscapeKey(open, () => setOpen(false));
+  if (!mounted || !open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: contentRef,
+        role: "menu",
+        className: `
+        fixed z-50
+        min-w-[8rem]
+        bg-surface-primary
+        border-2 border-edge-primary
+        rounded-sm
+        shadow-[2px_2px_0_0_var(--color-edge-primary)]
+        py-1
+        animate-fadeIn
+        ${className}
+      `.trim(),
+        style: { top: coords.top, left: coords.left },
+        children
+      }
+    ),
+    document.body
+  );
+}
+function DropdownMenuItem({
+  children,
+  onClick,
+  disabled = false,
+  destructive = false,
+  className = ""
+}) {
+  const { setOpen } = useDropdownContext();
+  const handleClick = () => {
+    if (disabled) return;
+    onClick?.();
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      onClick: handleClick,
+      disabled,
+      className: `
+        w-full px-4 py-2
+        text-left
+        font-mondwest text-base
+        ${destructive ? "text-status-error" : "text-content-primary"}
+        ${disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-content-primary/5 cursor-pointer"}
+        transition-colors
+        ${className}
+      `.trim(),
+      children
+    }
+  );
+}
+function DropdownMenuSeparator({ className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      className: `h-px bg-edge-primary/20 my-1 ${className}`.trim()
+    }
+  );
+}
+function DropdownMenuLabel({ children, className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+        px-4 py-1
+        font-joystix text-2xs uppercase
+        text-content-primary/50
+        ${className}
+      `.trim(),
+      children
+    }
+  );
+}
+var baseStyles4 = `
+  font-sans
+  bg-surface-primary text-content-primary
+  border border-edge-primary
+  rounded-sm
+  placeholder:text-content-muted
+  focus:outline-none
+  focus:ring-2 focus:ring-edge-focus focus:ring-offset-0
+  disabled:opacity-50 disabled:cursor-not-allowed
+`;
+var sizeStyles3 = {
+  sm: "h-8 px-2 text-sm",
+  md: "h-10 px-3 text-base",
+  lg: "h-12 px-4 text-base"
+};
+var errorStyles = `
+  border-status-error
+  focus:ring-status-error
+`;
+var Input = forwardRef(function Input2({
+  size = "md",
+  error = false,
+  fullWidth = false,
+  iconName,
+  className = "",
+  ...props
+}, ref) {
+  const paddingLeft = iconName ? size === "sm" ? "pl-8" : size === "lg" ? "pl-12" : "pl-10" : "";
+  const classes = [
+    baseStyles4,
+    sizeStyles3[size],
+    error ? errorStyles : "",
+    fullWidth ? "w-full" : "",
+    paddingLeft,
+    className
+  ].join(" ").replace(/\s+/g, " ").trim();
+  const input = /* @__PURE__ */ jsx("input", { ref, className: classes, ...props });
+  if (iconName) {
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "text-content-muted",
+          "data-icon-slot": iconName,
+          style: {
+            width: size === "sm" ? 14 : size === "lg" ? 18 : 20,
+            height: size === "sm" ? 14 : size === "lg" ? 18 : 20
+          }
+        }
+      ) }),
+      input
+    ] });
+  }
+  return input;
+});
+var TextArea = forwardRef(function TextArea2({
+  error = false,
+  fullWidth = false,
+  className = "",
+  ...props
+}, ref) {
+  const classes = [
+    baseStyles4,
+    "px-3 py-2 text-base",
+    "resize-y min-h-24",
+    error ? errorStyles : "",
+    fullWidth ? "w-full" : "",
+    className
+  ].join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ jsx("textarea", { ref, className: classes, ...props });
+});
+function Label({ children, required, className = "", ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className,
+      ...props,
+      children: [
+        children,
+        required && /* @__PURE__ */ jsx("span", { className: "text-status-error ml-1", children: "*" })
+      ]
+    }
+  );
+}
+var sizeStyles4 = {
+  sm: "h-2",
+  md: "h-4",
+  lg: "h-6"
+};
+var variantStyles5 = {
+  default: "bg-action-primary",
+  success: "bg-status-success",
+  warning: "bg-surface-tertiary",
+  error: "bg-status-error"
+};
+function Progress({
+  value,
+  max = 100,
+  variant = "default",
+  size = "md",
+  showLabel = false,
+  className = ""
+}) {
+  const percentage = Math.min(100, Math.max(0, value / max * 100));
+  return /* @__PURE__ */ jsxs("div", { className: `w-full ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `
+          w-full
+          bg-surface-primary
+          border border-edge-primary
+          rounded-sm
+          overflow-hidden
+          ${sizeStyles4[size]}
+        `,
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `
+            h-full
+            ${variantStyles5[variant]}
+          `,
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsxs("div", { className: "mt-1 font-joystix text-2xs text-content-primary text-right", children: [
+      Math.round(percentage),
+      "%"
+    ] })
+  ] });
+}
+var LOADER_FRAMES = ["\uEE06", "\uEE07", "\uEE08", "\uEE09", "\uEE0A", "\uEE0B"];
+function Spinner({ size = 24, className = "", completed = false }) {
+  const [frameIndex, setFrameIndex] = React14.useState(0);
+  React14.useEffect(() => {
+    if (completed) {
+      setFrameIndex(0);
+      return;
+    }
+    const interval = setInterval(() => {
+      setFrameIndex((prev) => (prev + 1) % LOADER_FRAMES.length);
+    }, 150);
+    return () => clearInterval(interval);
+  }, [completed]);
+  const fontSize = size;
+  const displayChar = completed ? "\u2713" : LOADER_FRAMES[frameIndex];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `inline-block flex items-center justify-center ${className}`,
+      style: {
+        width: size,
+        height: size,
+        fontSize,
+        fontFamily: "PixelCode, monospace",
+        lineHeight: 1
+      },
+      "aria-label": completed ? "Completed" : "Loading",
+      role: "status",
+      children: displayChar
+    }
+  );
+}
+function Select({
+  options,
+  value,
+  placeholder = "Select...",
+  onChange,
+  disabled = false,
+  error = false,
+  fullWidth = false,
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const selectedOption = options.find((opt) => opt.value === value);
+  const handleSelect = (optionValue) => {
+    onChange?.(optionValue);
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative ${fullWidth ? "w-full" : "w-fit"} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => !disabled && setIsOpen(!isOpen),
+            disabled,
+            className: `
+          flex items-center justify-between gap-2
+          w-full h-10 px-3
+          font-mondwest text-base
+          bg-surface-primary text-content-primary
+          border rounded-sm
+          ${error ? "border-status-error" : "border-edge-primary"}
+          ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+          ${isOpen ? "shadow-[0_3px_0_0_var(--color-edge-primary)] -translate-y-0.5" : "shadow-[0_1px_0_0_var(--color-edge-primary)]"}
+        `,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: selectedOption ? "text-content-primary" : "text-content-primary/40", children: selectedOption?.label || placeholder }),
+              /* @__PURE__ */ jsx("span", { className: `text-content-primary ${isOpen ? "rotate-180" : ""}`, children: "\u25BC" })
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `
+            absolute z-50 top-full left-0 right-0 mt-1
+            bg-surface-primary
+            border border-edge-primary
+            rounded-sm
+            shadow-[2px_2px_0_0_var(--color-edge-primary)]
+            overflow-hidden
+          `,
+            children: options.map((option) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => !option.disabled && handleSelect(option.value),
+                disabled: option.disabled,
+                className: `
+                w-full px-3 py-2
+                font-mondwest text-base text-left
+                ${option.value === value ? "bg-action-primary text-content-primary" : "text-content-primary"}
+                ${option.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-action-primary cursor-pointer"}
+              `,
+                children: option.label
+              },
+              option.value
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+var sizeStyles5 = {
+  sm: {
+    track: "h-1",
+    thumb: "w-3 h-3"
+  },
+  md: {
+    track: "h-2",
+    thumb: "w-4 h-4"
+  },
+  lg: {
+    track: "h-3",
+    thumb: "w-5 h-5"
+  }
+};
+function Slider({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  size = "md",
+  disabled = false,
+  showValue = false,
+  label,
+  className = ""
+}) {
+  const trackRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const styles = sizeStyles5[size];
+  const percentage = (value - min) / (max - min) * 100;
+  const snapToStep = useCallback((val) => {
+    const stepped = Math.round((val - min) / step) * step + min;
+    return Math.max(min, Math.min(max, stepped));
+  }, [min, max, step]);
+  const getValueFromPosition = useCallback((clientX) => {
+    if (!trackRef.current) return value;
+    const rect = trackRef.current.getBoundingClientRect();
+    const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const newValue = min + percent * (max - min);
+    return snapToStep(newValue);
+  }, [min, max, value, snapToStep]);
+  const handlePointerDown = useCallback((e) => {
+    if (disabled) return;
+    e.preventDefault();
+    setIsDragging(true);
+    const newValue = getValueFromPosition(e.clientX);
+    onChange(newValue);
+  }, [disabled, getValueFromPosition, onChange]);
+  useEffect(() => {
+    if (!isDragging) return;
+    const handlePointerMove = (e) => {
+      const newValue = getValueFromPosition(e.clientX);
+      onChange(newValue);
+    };
+    const handlePointerUp = () => {
+      setIsDragging(false);
+    };
+    document.addEventListener("pointermove", handlePointerMove);
+    document.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [isDragging, getValueFromPosition, onChange]);
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    let newValue = value;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        newValue = Math.min(max, value + step);
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        newValue = Math.max(min, value - step);
+        break;
+      case "Home":
+        newValue = min;
+        break;
+      case "End":
+        newValue = max;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    onChange(newValue);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `space-y-2 ${className}`.trim(), children: [
+    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      label && /* @__PURE__ */ jsx("span", { className: "font-mondwest text-base text-content-primary", children: label }),
+      showValue && /* @__PURE__ */ jsx("span", { className: "font-mondwest text-sm text-content-primary/60", children: value })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: trackRef,
+        role: "slider",
+        tabIndex: disabled ? -1 : 0,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        "aria-disabled": disabled,
+        onPointerDown: handlePointerDown,
+        onKeyDown: handleKeyDown,
+        className: `
+          relative w-full
+          flex items-center
+          ${styles.track}
+          bg-edge-primary/10
+          border border-edge-primary
+          rounded-sm
+          ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+          focus:outline-none focus:ring-2 focus:ring-edge-focus focus:ring-offset-2
+        `.trim(),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `
+            absolute top-0 left-0 h-full
+            bg-action-primary
+            rounded-sm
+            pointer-events-none
+          `.trim(),
+              style: { width: `${percentage}%` }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute top-0 bottom-0 flex items-center pointer-events-none",
+              style: { left: `calc(${percentage}% - ${parseInt(styles.thumb.split(" ")[0].replace("w-", "")) * 2}px)` },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `
+              ${styles.thumb}
+              bg-surface-muted
+              border border-edge-primary
+              rounded
+              ${isDragging ? "scale-110" : ""}
+              transition-transform
+              pointer-events-auto
+            `.trim()
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var sizeStyles6 = {
+  sm: {
+    track: "w-8 h-4",
+    thumb: "w-3 h-3",
+    translate: "translate-x-4"
+  },
+  md: {
+    track: "w-10 h-5",
+    thumb: "w-4 h-4",
+    translate: "translate-x-5"
+  },
+  lg: {
+    track: "w-12 h-6",
+    thumb: "w-5 h-5",
+    translate: "translate-x-6"
+  }
+};
+function Switch({
+  checked,
+  onChange,
+  size = "md",
+  disabled = false,
+  label,
+  labelPosition = "right",
+  className = "",
+  id
+}) {
+  const styles = sizeStyles6[size];
+  const switchId = id || `switch-${Math.random().toString(36).slice(2)}`;
+  const handleClick = () => {
+    if (!disabled) {
+      onChange(!checked);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+  const switchElement = /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      id: switchId,
+      "aria-checked": checked,
+      disabled,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      className: `
+        relative inline-flex items-center
+        ${styles.track}
+        rounded-full
+        border border-edge-primary
+        transition-colors
+        ${checked ? "bg-action-primary" : "bg-edge-primary/10"}
+        ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+        focus:outline-none focus:ring-2 focus:ring-edge-focus focus:ring-offset-2
+      `.trim(),
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `
+          ${styles.thumb}
+          rounded-full
+          bg-surface-secondary
+          border border-edge-primary
+          transform transition-transform
+          ${checked ? styles.translate : "translate-x-0.5"}
+        `.trim(),
+          "aria-hidden": "true"
+        }
+      )
+    }
+  );
+  if (!label) {
+    return /* @__PURE__ */ jsx("div", { className, children: switchElement });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `inline-flex items-center gap-2 ${className}`.trim(), children: [
+    labelPosition === "left" && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: switchId,
+        className: `
+            font-mondwest text-base text-content-primary
+            ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+          `.trim(),
+        children: label
+      }
+    ),
+    switchElement,
+    labelPosition === "right" && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: switchId,
+        className: `
+            font-mondwest text-base text-content-primary
+            ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+          `.trim(),
+        children: label
+      }
+    )
+  ] });
+}
+var TabsContext = createContext(null);
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("Tab components must be used within a Tabs provider");
+  }
+  return context;
+}
+var triggerBaseStyles = `
+  flex items-center justify-center gap-2
+  px-4 py-2
+  font-joystix text-xs uppercase
+  cursor-pointer select-none
+  text-content-primary
+  transition-all duration-200 ease-out
+  relative
+  border border-edge-primary
+  rounded-sm
+  flex-1
+  shadow-none
+`;
+var pillStyles = {
+  inactive: `
+    bg-transparent text-content-primary
+    hover:bg-surface-secondary/5
+    hover:translate-y-0
+    hover:shadow-none
+  `,
+  active: `
+    bg-action-primary text-content-primary
+    hover:bg-action-primary
+    hover:translate-y-0
+    hover:shadow-none
+  `
+};
+var lineStyles = {
+  inactive: `
+    bg-transparent
+    hover:bg-surface-primary/50
+  `,
+  active: `
+    border-b-0
+    bg-surface-primary
+    border-t border-l border-r border-edge-primary
+    rounded-t-md
+    mb-0
+    relative
+    z-10
+  `
+};
+function Tabs({
+  defaultValue,
+  value,
+  onValueChange,
+  variant = "pill",
+  layout = "bottom-tabs",
+  children,
+  className = ""
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue || "");
+  const isControlled = value !== void 0;
+  const activeTab = isControlled ? value : internalValue;
+  const setActiveTab = (newValue) => {
+    if (isControlled) {
+      onValueChange?.(newValue);
+    } else {
+      setInternalValue(newValue);
+    }
+  };
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, setActiveTab, variant, layout }, children: /* @__PURE__ */ jsx("div", { className, children }) });
+}
+function TabList({ children, className = "" }) {
+  const { layout } = useTabsContext();
+  const shrinkClass = layout === "bottom-tabs" ? "shrink-0" : "";
+  return /* @__PURE__ */ jsx("div", { className: `flex items-center justify-between gap-4 px-2 py-2 bg-surface-primary border-t border-edge-primary ${shrinkClass} ${className}`, children: /* @__PURE__ */ jsx("div", { className: "flex gap-2 items-center overflow-x-auto w-full", children }) });
+}
+function TabTrigger({
+  value,
+  children,
+  icon,
+  className = ""
+}) {
+  const { activeTab, setActiveTab, variant } = useTabsContext();
+  const isActive = activeTab === value;
+  const variantStyle = variant === "pill" ? isActive ? pillStyles.active : pillStyles.inactive : isActive ? lineStyles.active : lineStyles.inactive;
+  const classes = [
+    triggerBaseStyles,
+    variantStyle,
+    className
+  ].join(" ").replace(/\s+/g, " ").trim();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": isActive,
+      onClick: () => setActiveTab(value),
+      className: classes,
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+}
+function TabContent({
+  value,
+  children,
+  className = ""
+}) {
+  const { activeTab, variant } = useTabsContext();
+  if (activeTab !== value) {
+    return null;
+  }
+  const contentClasses = variant === "line" ? `bg-surface-primary border-r border-edge-primary ${className}` : className;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      className: contentClasses,
+      style: { height: "auto" },
+      children
+    }
+  );
+}
+var positionStyles = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+  left: "right-full top-1/2 -translate-y-1/2 mr-2",
+  right: "left-full top-1/2 -translate-y-1/2 ml-2"
+};
+var arrowStyles = {
+  top: "top-full left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-b-transparent border-t-surface-secondary",
+  bottom: "bottom-full left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-t-transparent border-b-surface-secondary",
+  left: "left-full top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-r-transparent border-l-surface-secondary",
+  right: "right-full top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-l-transparent border-r-surface-secondary"
+};
+var sizeStyles7 = {
+  sm: "text-xs",
+  md: "text-xs",
+  lg: "text-sm"
+};
+function Tooltip({
+  content,
+  position = "top",
+  delay = 0,
+  size = "md",
+  children,
+  className = ""
+}) {
+  const [isVisible, setIsVisible] = useState(false);
+  const timeoutRef = useRef(null);
+  const showTooltip = () => {
+    if (delay > 0) {
+      timeoutRef.current = setTimeout(() => setIsVisible(true), delay);
+    } else {
+      setIsVisible(true);
+    }
+  };
+  const hideTooltip = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative inline-flex ${className}`,
+      onMouseEnter: showTooltip,
+      onMouseLeave: hideTooltip,
+      onFocus: showTooltip,
+      onBlur: hideTooltip,
+      children: [
+        children,
+        isVisible && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `
+            absolute z-[1000]
+            px-2 py-1
+            bg-surface-secondary text-content-inverted
+            font-joystix uppercase
+            rounded-sm
+            whitespace-nowrap
+            pointer-events-none
+            ${sizeStyles7[size]}
+            ${positionStyles[position]}
+          `,
+            role: "tooltip",
+            children: [
+              content,
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `
+              absolute
+              border-4 border-solid
+              ${arrowStyles[position]}
+            `
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var ToastContext = createContext(null);
+function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+}
+function ToastProvider({
+  children,
+  defaultDuration = 5e3,
+  renderIcon,
+  renderCloseIcon
+}) {
+  const [toasts, setToasts] = useState([]);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const addToast = useCallback((toast) => {
+    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const duration = toast.duration ?? defaultDuration;
+    setToasts((prev) => [...prev, { ...toast, id }]);
+    if (duration > 0) {
+      setTimeout(() => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+      }, duration);
+    }
+    return id;
+  }, [defaultDuration]);
+  const removeToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
+    children,
+    mounted && createPortal(
+      /* @__PURE__ */ jsx(
+        ToastViewport,
+        {
+          toasts,
+          removeToast,
+          renderIcon,
+          renderCloseIcon
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function ToastViewport({ toasts, removeToast, renderIcon, renderCloseIcon }) {
+  if (toasts.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed bottom-4 right-4 z-[100] flex flex-col gap-2 max-w-sm w-full pointer-events-none",
+      "aria-live": "polite",
+      children: toasts.map((toast) => /* @__PURE__ */ jsx(
+        Toast,
+        {
+          toast,
+          onClose: () => removeToast(toast.id),
+          renderIcon,
+          renderCloseIcon
+        },
+        toast.id
+      ))
+    }
+  );
+}
+var variantStyles6 = {
+  default: "bg-surface-primary border-edge-primary",
+  success: "bg-status-success border-status-success",
+  warning: "bg-status-warning border-surface-tertiary",
+  error: "bg-status-error border-status-error",
+  info: "bg-status-info border-status-info"
+};
+function Toast({ toast, onClose, renderIcon, renderCloseIcon }) {
+  const variant = toast.variant || "default";
+  const displayIcon = toast.icon ?? (renderIcon ? renderIcon(variant) : null);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+        pointer-events-auto
+        p-4
+        border-2
+        rounded-sm
+        shadow-[2px_2px_0_0_var(--color-edge-primary)]
+        animate-slideIn
+        ${variantStyles6[variant]}
+      `.trim(),
+      role: "alert",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        displayIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: displayIcon }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-joystix text-xs uppercase text-content-primary", children: toast.title }),
+          toast.description && /* @__PURE__ */ jsx("p", { className: "font-mondwest text-base text-content-primary/70 mt-1", children: toast.description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "text-content-primary/50 hover:text-content-primary flex-shrink-0 -mt-1",
+            "aria-label": "Close",
+            children: renderCloseIcon ? renderCloseIcon() : /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M12 4L4 12M4 4L12 12",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+function HelpPanel({
+  isOpen,
+  onClose,
+  children,
+  title = "Help",
+  closeButton,
+  className = ""
+}) {
+  const panelRef = useRef(null);
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (panelRef.current && !panelRef.current.contains(e.target) && isOpen) {
+        onClose();
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 100);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+        absolute inset-0 z-50
+        bg-surface-secondary/20
+        flex justify-center items-center
+      `,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelRef,
+          className: `
+          h-full w-full max-w-4xl
+          bg-surface-primary
+          border border-edge-primary
+          shadow-card-lg
+          flex flex-col
+          animate-slide-in-right
+          ${className}
+        `,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-edge-primary", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-joystix text-xs text-content-primary uppercase", children: title }),
+              closeButton ? /* @__PURE__ */ jsx("span", { onClick: onClose, className: "cursor-pointer", children: closeButton }) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "text-content-primary/50 hover:text-content-primary p-1",
+                  "aria-label": "Close help panel",
+                  children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 16 16",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M12 4L4 12M4 4L12 12",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-4", children: /* @__PURE__ */ jsx("div", { className: "font-mondwest text-base text-content-primary space-y-4", children }) })
+          ]
+        }
+      )
+    }
+  );
+}
+var PopoverContext = createContext(null);
+function usePopoverContext() {
+  const context = useContext(PopoverContext);
+  if (!context) {
+    throw new Error("Popover components must be used within a Popover");
+  }
+  return context;
+}
+function Popover({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  position = "bottom",
+  children
+}) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const triggerRef = useRef(null);
+  const setOpen = useCallback((newOpen) => {
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  }, [isControlled, onOpenChange]);
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: { open, setOpen, triggerRef, position }, children });
+}
+function PopoverTrigger({ children, asChild }) {
+  const { open, setOpen, triggerRef } = usePopoverContext();
+  const handleClick = () => {
+    setOpen(!open);
+  };
+  if (asChild && React14.isValidElement(children)) {
+    return React14.cloneElement(children, {
+      onClick: handleClick,
+      ref: triggerRef
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ref: triggerRef,
+      onClick: handleClick,
+      children
+    }
+  );
+}
+function PopoverContent({ className = "", children, align = "center" }) {
+  const { open, setOpen, triggerRef, position } = usePopoverContext();
+  const contentRef = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  const [coords, setCoords] = useState({ top: 0, left: 0 });
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!open || !triggerRef.current || !contentRef.current) return;
+    const trigger = triggerRef.current.getBoundingClientRect();
+    const content = contentRef.current.getBoundingClientRect();
+    const gap = 8;
+    let top = 0;
+    let left = 0;
+    switch (position) {
+      case "top":
+        top = trigger.top - content.height - gap;
+        left = trigger.left + (trigger.width - content.width) / 2;
+        break;
+      case "bottom":
+        top = trigger.bottom + gap;
+        left = trigger.left + (trigger.width - content.width) / 2;
+        break;
+      case "left":
+        top = trigger.top + (trigger.height - content.height) / 2;
+        left = trigger.left - content.width - gap;
+        break;
+      case "right":
+        top = trigger.top + (trigger.height - content.height) / 2;
+        left = trigger.right + gap;
+        break;
+    }
+    if (position === "top" || position === "bottom") {
+      if (align === "start") {
+        left = trigger.left;
+      } else if (align === "end") {
+        left = trigger.right - content.width;
+      }
+    }
+    top = Math.max(8, Math.min(top, window.innerHeight - content.height - 8));
+    left = Math.max(8, Math.min(left, window.innerWidth - content.width - 8));
+    setCoords({ top, left });
+  }, [open, position, align, triggerRef]);
+  useClickOutside(open, [contentRef, triggerRef], () => setOpen(false));
+  useEscapeKey(open, () => setOpen(false));
+  if (!mounted || !open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: contentRef,
+        className: `
+        fixed z-50
+        bg-surface-primary
+        border-2 border-edge-primary
+        rounded-sm
+        shadow-[2px_2px_0_0_var(--color-edge-primary)]
+        p-4
+        animate-fadeIn
+        ${className}
+      `.trim(),
+        style: { top: coords.top, left: coords.left },
+        children
+      }
+    ),
+    document.body
+  );
+}
+var SheetContext = createContext(null);
+function useSheetContext() {
+  const context = useContext(SheetContext);
+  if (!context) {
+    throw new Error("Sheet components must be used within a Sheet");
+  }
+  return context;
+}
+function Sheet({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  side = "right",
+  children
+}) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const setOpen = useCallback((newOpen) => {
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  }, [isControlled, onOpenChange]);
+  return /* @__PURE__ */ jsx(SheetContext.Provider, { value: { open, setOpen, side }, children });
+}
+function SheetTrigger({ children, asChild }) {
+  const { setOpen } = useSheetContext();
+  if (asChild && React14.isValidElement(children)) {
+    return React14.cloneElement(children, {
+      onClick: () => setOpen(true)
+    });
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setOpen(true), children });
+}
+var sideStyles = {
+  left: {
+    container: "inset-y-0 left-0 h-full w-80 max-w-[90vw]",
+    open: "translate-x-0",
+    closed: "-translate-x-full"
+  },
+  right: {
+    container: "inset-y-0 right-0 h-full w-80 max-w-[90vw]",
+    open: "translate-x-0",
+    closed: "translate-x-full"
+  },
+  top: {
+    container: "inset-x-0 top-0 w-full h-80 max-h-[90vh]",
+    open: "translate-y-0",
+    closed: "-translate-y-full"
+  },
+  bottom: {
+    container: "inset-x-0 bottom-0 w-full h-80 max-h-[90vh]",
+    open: "translate-y-0",
+    closed: "translate-y-full"
+  }
+};
+function SheetContent({ className = "", children }) {
+  const { open, setOpen, side } = useSheetContext();
+  const [mounted, setMounted] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const styles = sideStyles[side];
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (open) {
+      setIsVisible(true);
+    } else {
+      const timer = setTimeout(() => {
+        setIsVisible(false);
+      }, 200);
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+  useEscapeKey(open, () => setOpen(false));
+  useLockBodyScroll(open);
+  if (!mounted || !isVisible) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `
+          absolute inset-0 bg-surface-secondary/50
+          transition-opacity duration-200
+          ${open ? "opacity-100" : "opacity-0"}
+        `.trim(),
+          onClick: () => setOpen(false),
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          className: `
+          fixed
+          ${styles.container}
+          bg-surface-primary
+          border-edge-primary
+          ${side === "left" ? "border-r-2" : ""}
+          ${side === "right" ? "border-l-2" : ""}
+          ${side === "top" ? "border-b-2" : ""}
+          ${side === "bottom" ? "border-t-2" : ""}
+          shadow-[4px_4px_0_0_var(--color-edge-primary)]
+          transform transition-transform duration-200 ease-out
+          ${open ? styles.open : styles.closed}
+          ${className}
+        `.trim(),
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function SheetHeader({ className = "", children }) {
+  return /* @__PURE__ */ jsx("div", { className: `px-6 pt-6 pb-4 border-b border-edge-primary/20 ${className}`.trim(), children });
+}
+function SheetTitle({ className = "", children }) {
+  return /* @__PURE__ */ jsx("h2", { className: `font-joystix text-base uppercase text-content-primary ${className}`.trim(), children });
+}
+function SheetDescription({ className = "", children }) {
+  return /* @__PURE__ */ jsx("p", { className: `font-mondwest text-base text-content-primary/70 mt-2 ${className}`.trim(), children });
+}
+function SheetBody({ className = "", children }) {
+  return /* @__PURE__ */ jsx("div", { className: `px-6 py-4 flex-1 overflow-auto ${className}`.trim(), children });
+}
+function SheetFooter({ className = "", children }) {
+  return /* @__PURE__ */ jsx("div", { className: `px-6 pb-6 pt-4 border-t border-edge-primary/20 flex justify-end gap-2 ${className}`.trim(), children });
+}
+function SheetClose({ children, asChild }) {
+  const { setOpen } = useSheetContext();
+  if (asChild && React14.isValidElement(children)) {
+    return React14.cloneElement(children, {
+      onClick: () => setOpen(false)
+    });
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setOpen(false), children });
+}
+var popoverStyles = `
+  absolute top-12 right-2 z-50 w-72
+  bg-surface-primary border-2 border-edge-primary rounded-sm shadow-lg
+`;
+var headerStyles = `
+  flex items-center justify-between px-3 py-2 border-b border-edge-primary/20
+`;
+var contentStyles = `
+  p-2 space-y-3 max-h-80 overflow-y-auto
+`;
+var categoryLabelStyles = `
+  font-heading text-xs uppercase text-content-secondary px-2 mb-1
+`;
+var footerStyles = `
+  px-3 py-2 border-t border-edge-primary/20 bg-content-primary/5
+`;
+function MockStatesPopover({
+  isOpen,
+  onClose,
+  mockStates,
+  activeMockState,
+  onSelectState,
+  categories,
+  title = "Mock States",
+  footerText = "Dev mode only",
+  className = ""
+}) {
+  if (!isOpen) return null;
+  const derivedCategories = categories ?? [...new Set(mockStates.map((s) => s.category))].map((cat) => ({
+    id: cat,
+    label: cat.charAt(0).toUpperCase() + cat.slice(1)
+  }));
+  const statesByCategory = derivedCategories.map((cat) => ({
+    category: cat,
+    states: mockStates.filter((s) => s.category === cat.id)
+  })).filter((group) => group.states.length > 0);
+  const renderStateButton = (def) => {
+    const isActive = activeMockState === def.id;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => onSelectState(def.id),
+        className: `
+          w-full text-left px-3 py-2 rounded-sm
+          flex items-center gap-2
+          transition-colors duration-150
+          ${isActive ? "bg-action-primary text-content-primary" : "hover:bg-content-primary/5 text-content-primary"}
+        `,
+        children: [
+          def.icon && /* @__PURE__ */ jsx("span", { className: "text-sm", children: def.icon }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "font-heading text-xs uppercase truncate", children: def.name }),
+            /* @__PURE__ */ jsx("div", { className: "font-body text-xs text-content-secondary truncate", children: def.description })
+          ] }),
+          isActive && /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2713" })
+        ]
+      },
+      def.id
+    );
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-40",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: `${popoverStyles} ${className}`.trim(), children: [
+      /* @__PURE__ */ jsxs("div", { className: headerStyles, children: [
+        /* @__PURE__ */ jsx("span", { className: "font-heading text-xs uppercase", children: title }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            iconOnly: true,
+            onClick: onClose,
+            "aria-label": "Close",
+            children: "\u2715"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: contentStyles, children: statesByCategory.map(({ category, states }) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: categoryLabelStyles, children: category.label }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-1", children: states.map(renderStateButton) })
+      ] }, category.id)) }),
+      footerText && /* @__PURE__ */ jsx("div", { className: footerStyles, children: /* @__PURE__ */ jsx("div", { className: "font-body text-xs text-content-secondary text-center", children: footerText }) })
+    ] })
+  ] });
+}
+var baseStyles5 = `
+  text-center
+`;
+var variantStyles7 = {
+  default: {
+    container: "p-4 bg-surface-primary border border-edge-primary rounded-md",
+    label: "font-mono text-xs text-content-primary/60 mb-2",
+    timer: "flex items-center justify-center gap-1",
+    segment: "flex flex-col items-center min-w-[3rem]",
+    value: "font-joystix text-2xl text-content-primary tabular-nums",
+    unit: "font-mono text-2xs text-content-primary/50 uppercase mt-0.5",
+    separator: "font-joystix text-xl text-content-primary/40 self-start mt-1"
+  },
+  compact: {
+    container: "px-3 py-2 bg-surface-primary border border-edge-primary rounded-sm",
+    label: "font-mono text-2xs text-content-primary/60 mb-1",
+    timer: "flex items-center justify-center gap-0.5",
+    segment: "flex flex-col items-center min-w-[2rem]",
+    value: "font-joystix text-sm text-content-primary tabular-nums",
+    unit: "font-mono text-2xs text-content-primary/50 uppercase",
+    separator: "font-joystix text-sm text-content-primary/40 self-start"
+  },
+  large: {
+    container: "p-6 bg-surface-primary border border-edge-primary rounded-md shadow-card",
+    label: "font-mono text-sm text-content-primary/60 mb-3",
+    timer: "flex items-center justify-center gap-2",
+    segment: "flex flex-col items-center min-w-[4rem] bg-surface-muted border border-edge-primary rounded-sm px-3 py-2",
+    value: "font-joystix text-3xl text-content-primary tabular-nums",
+    unit: "font-mono text-xs text-content-primary/50 uppercase mt-1",
+    separator: "font-joystix text-2xl text-content-primary/40 self-center"
+  }
+};
+function getTimeRemaining(endTime) {
+  const end = typeof endTime === "number" ? endTime : endTime.getTime();
+  const total = Math.max(0, end - Date.now());
+  const seconds = Math.floor(total / 1e3 % 60);
+  const minutes = Math.floor(total / 1e3 / 60 % 60);
+  const hours = Math.floor(total / (1e3 * 60 * 60) % 24);
+  const days = Math.floor(total / (1e3 * 60 * 60 * 24));
+  return { days, hours, minutes, seconds, total };
+}
+function getStatus(endTime, startTime) {
+  const now = Date.now();
+  const end = typeof endTime === "number" ? endTime : endTime.getTime();
+  const start = startTime ? typeof startTime === "number" ? startTime : startTime.getTime() : now;
+  if (now < start) return "upcoming";
+  if (now >= end) return "ended";
+  return "active";
+}
+function padZero(num) {
+  return num.toString().padStart(2, "0");
+}
+function CountdownTimer({
+  endTime,
+  startTime,
+  variant = "default",
+  label,
+  onComplete,
+  endedMessage = "Ended",
+  upcomingMessage = "Starting soon",
+  showDays = true,
+  className = ""
+}) {
+  const [timeRemaining, setTimeRemaining] = useState(
+    () => getTimeRemaining(endTime)
+  );
+  const [status, setStatus] = useState(
+    () => getStatus(endTime, startTime)
+  );
+  const updateTime = useCallback(() => {
+    const newTime = getTimeRemaining(endTime);
+    const newStatus = getStatus(endTime, startTime);
+    setTimeRemaining(newTime);
+    setStatus(newStatus);
+    if (newStatus === "ended" && onComplete) {
+      onComplete();
+    }
+  }, [endTime, startTime, onComplete]);
+  useEffect(() => {
+    updateTime();
+    if (status === "ended") return;
+    const interval = setInterval(updateTime, 1e3);
+    return () => clearInterval(interval);
+  }, [updateTime, status]);
+  const styles = variantStyles7[variant];
+  if (status === "ended") {
+    return /* @__PURE__ */ jsxs("div", { className: `${baseStyles5} ${styles.container} ${className}`, children: [
+      label && /* @__PURE__ */ jsx("p", { className: styles.label, children: label }),
+      /* @__PURE__ */ jsx("p", { className: `font-joystix ${variant === "large" ? "text-xl" : variant === "compact" ? "text-sm" : "text-lg"} text-content-primary/60`, children: endedMessage })
+    ] });
+  }
+  if (status === "upcoming" && startTime) {
+    const startRemaining = getTimeRemaining(startTime);
+    return /* @__PURE__ */ jsxs("div", { className: `${baseStyles5} ${styles.container} ${className}`, children: [
+      /* @__PURE__ */ jsx("p", { className: styles.label, children: "Starts in" }),
+      /* @__PURE__ */ jsxs("div", { className: styles.timer, children: [
+        showDays && startRemaining.days > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.segment, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.value, children: startRemaining.days }),
+            /* @__PURE__ */ jsx("span", { className: styles.unit, children: "days" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: styles.separator, children: ":" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.segment, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.value, children: padZero(startRemaining.hours) }),
+          /* @__PURE__ */ jsx("span", { className: styles.unit, children: "hrs" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: styles.separator, children: ":" }),
+        /* @__PURE__ */ jsxs("div", { className: styles.segment, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.value, children: padZero(startRemaining.minutes) }),
+          /* @__PURE__ */ jsx("span", { className: styles.unit, children: "min" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: styles.separator, children: ":" }),
+        /* @__PURE__ */ jsxs("div", { className: styles.segment, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.value, children: padZero(startRemaining.seconds) }),
+          /* @__PURE__ */ jsx("span", { className: styles.unit, children: "sec" })
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `${baseStyles5} ${styles.container} ${className}`, children: [
+    label && /* @__PURE__ */ jsx("p", { className: styles.label, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: styles.timer, children: [
+      showDays && timeRemaining.days > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.segment, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.value, children: timeRemaining.days }),
+          /* @__PURE__ */ jsx("span", { className: styles.unit, children: "days" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: styles.separator, children: ":" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.segment, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.value, children: padZero(timeRemaining.hours) }),
+        /* @__PURE__ */ jsx("span", { className: styles.unit, children: "hrs" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: styles.separator, children: ":" }),
+      /* @__PURE__ */ jsxs("div", { className: styles.segment, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.value, children: padZero(timeRemaining.minutes) }),
+        /* @__PURE__ */ jsx("span", { className: styles.unit, children: "min" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: styles.separator, children: ":" }),
+      /* @__PURE__ */ jsxs("div", { className: styles.segment, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.value, children: padZero(timeRemaining.seconds) }),
+        /* @__PURE__ */ jsx("span", { className: styles.unit, children: "sec" })
+      ] })
+    ] })
+  ] });
+}
+function formatAddress(address) {
+  if (!address) return "";
+  if (address.length <= 10) return address;
+  return `${address.slice(0, 4)}...${address.slice(-4)}`;
+}
+function Web3ActionBar({
+  isConnected,
+  walletAddress,
+  onConnect,
+  onDisconnect,
+  disconnectIcon,
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-between gap-4 px-2 py-2 bg-surface-primary border-t border-edge-primary shrink-0 ${className}`.trim(), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex gap-2 items-center", children: !isConnected ? /* @__PURE__ */ jsx(Button, { onClick: onConnect, children: "Connect" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      walletAddress && /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-content-primary", children: formatAddress(walletAddress) }),
+      onDisconnect && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          iconOnly: true,
+          icon: disconnectIcon,
+          onClick: onDisconnect,
+          title: "Disconnect wallet"
+        }
+      )
+    ] }) }),
+    isConnected && children && /* @__PURE__ */ jsx("div", { className: "flex gap-2 items-center", children })
+  ] });
+}
+var DialogContext = createContext(null);
+function useDialogContext() {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error("Dialog components must be used within a Dialog");
+  }
+  return context;
+}
+function Dialog({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  children
+}) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const setOpen = useCallback((newOpen) => {
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  }, [isControlled, onOpenChange]);
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: { open, setOpen }, children });
+}
+function DialogTrigger({ children, asChild }) {
+  const { setOpen } = useDialogContext();
+  if (asChild && React14.isValidElement(children)) {
+    return React14.cloneElement(children, {
+      onClick: () => setOpen(true)
+    });
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setOpen(true), children });
+}
+function DialogContent({ className = "", children }) {
+  const { open, setOpen } = useDialogContext();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEscapeKey(open, () => setOpen(false));
+  useLockBodyScroll(open);
+  if (!mounted || !open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-0 bg-surface-secondary/50 animate-fadeIn",
+          onClick: () => setOpen(false),
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          className: `
+          relative z-10
+          w-full max-w-lg mx-4
+          bg-surface-primary
+          border-2 border-edge-primary
+          rounded-sm
+          shadow-[4px_4px_0_0_var(--color-edge-primary)]
+          animate-scaleIn
+          ${className}
+        `.trim(),
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function DialogHeader({ className = "", children }) {
+  return /* @__PURE__ */ jsx("div", { className: `px-6 pt-6 pb-4 border-b border-edge-primary/20 ${className}`.trim(), children });
+}
+function DialogTitle({ className = "", children }) {
+  return /* @__PURE__ */ jsx("h2", { className: `font-joystix text-base uppercase text-content-primary ${className}`.trim(), children });
+}
+function DialogDescription({ className = "", children }) {
+  return /* @__PURE__ */ jsx("p", { className: `font-mondwest text-base text-content-primary/70 mt-2 ${className}`.trim(), children });
+}
+function DialogBody({ className = "", children }) {
+  return /* @__PURE__ */ jsx("div", { className: `px-6 py-4 ${className}`.trim(), children });
+}
+function DialogFooter({ className = "", children }) {
+  return /* @__PURE__ */ jsx("div", { className: `px-6 pb-6 pt-4 border-t border-edge-primary/20 flex justify-end gap-2 ${className}`.trim(), children });
+}
+function DialogClose({ children, asChild }) {
+  const { setOpen } = useDialogContext();
+  if (asChild && React14.isValidElement(children)) {
+    return React14.cloneElement(children, {
+      onClick: () => setOpen(false)
+    });
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setOpen(false), children });
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, Badge, Breadcrumbs, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, CountdownTimer, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Divider, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, HelpPanel, Input, Label, MockStatesPopover, Popover, PopoverContent, PopoverTrigger, Progress, Radio, Select, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Slider, Spinner, Switch, TabContent, TabList, TabTrigger, Tabs, TextArea, ToastProvider, Tooltip, Web3ActionBar, useToast };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map