@pos-360/horizon 0.1.0 → 0.2.1

package/dist/chunk-BWR6DSQJ.js

@@ -0,0 +1,995 @@
+'use strict';
+
+var chunkTMZLQK74_js = require('./chunk-TMZLQK74.js');
+var framerMotion = require('framer-motion');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var lucideReact = require('lucide-react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var AnimatedButton = ({
+  label,
+  variant = "primary",
+  buttonContainerClassName,
+  buttonTextClassName,
+  onClick
+}) => {
+  const handleOnClick = () => {
+    onClick?.();
+  };
+  const baseButtonClass = "text-xs tracking-wider font-medium";
+  const variantButtonClass = `${variant === "outlined" ? "border border-1 bg-white" : "bg-[#0F62FE]"}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.button,
+    {
+      whileHover: {
+        scale: variant === "primary" ? 1.025 : 1,
+        boxShadow: variant === "primary" ? "0 0 4px rgba(15, 96, 254, 0.4), 0 0 16px rgba(15, 96, 254, 0.2)" : ""
+      },
+      whileTap: { scale: variant === "primary" ? 0.98 : 1 },
+      onClick: handleOnClick,
+      className: `w-fit p-2 px-4 ${variantButtonClass} ${buttonContainerClassName}`,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${baseButtonClass} ${buttonTextClassName}`, children: label.toUpperCase() })
+    }
+  );
+};
+var Input = React.forwardRef(
+  ({
+    label,
+    placeholder,
+    value,
+    onChange,
+    onNumberChange,
+    onSelectChange,
+    onFocus,
+    onBlur,
+    type = "text",
+    disabled = false,
+    required = false,
+    error,
+    helperText,
+    leadingIcon,
+    trailingIcon,
+    leadingDecorator,
+    trailingDecorator,
+    onLeadingClick,
+    onTrailingClick,
+    size = "md",
+    variant = "default",
+    className = "",
+    min,
+    max,
+    step = 1,
+    precision = 0,
+    allowNegative = true,
+    showControls = false,
+    options = [],
+    autoComplete,
+    readOnly = false,
+    tabIndex = 0,
+    tooltip,
+    ...props
+  }, ref) => {
+    const [showTooltip, setShowTooltip] = React.useState(false);
+    const isNumberType = type === "number";
+    const isSelectType = type === "select";
+    const isMobileType = type === "mobile";
+    const [inputValue, setInputValue] = React.useState(
+      value !== void 0 ? value.toString() : ""
+    );
+    React.useEffect(() => {
+      if (value !== void 0) {
+        setInputValue(value.toString());
+      }
+    }, [value]);
+    const formatNumber = (num) => {
+      if (precision > 0) {
+        return parseFloat(num.toFixed(precision));
+      }
+      return Math.round(num);
+    };
+    const isValidNumber = (str) => {
+      if (str === "" || str === "-") return true;
+      const num = parseFloat(str);
+      if (isNaN(num)) return false;
+      if (!allowNegative && num < 0) return false;
+      if (min !== void 0 && num < min) return false;
+      if (max !== void 0 && num > max) return false;
+      return true;
+    };
+    const handleInputChange = (e) => {
+      if (isMobileType) {
+        const digits = (e.target.value || "").replace(/\D/g, "").slice(0, 10);
+        onChange?.({
+          target: { value: digits }
+        });
+        return;
+      }
+      if (isNumberType && onNumberChange) {
+        const newValue = e.target.value;
+        if (newValue === "" || allowNegative && newValue === "-") {
+          setInputValue(newValue);
+          return;
+        }
+        if (isValidNumber(newValue)) {
+          setInputValue(newValue);
+          const numValue = parseFloat(newValue);
+          if (!isNaN(numValue)) {
+            onNumberChange(formatNumber(numValue));
+          }
+        }
+      } else {
+        onChange?.(e);
+      }
+    };
+    const handleSelectChange = (e) => {
+      onSelectChange?.(e.target.value);
+    };
+    const handleIncrement = () => {
+      if (disabled || !isNumberType) return;
+      const currentNum = parseFloat(inputValue) || 0;
+      const newValue = currentNum + step;
+      const constrainedValue = max !== void 0 ? Math.min(newValue, max) : newValue;
+      const finalValue = formatNumber(constrainedValue);
+      setInputValue(finalValue.toString());
+      onNumberChange?.(finalValue);
+    };
+    const handleDecrement = () => {
+      if (disabled || !isNumberType) return;
+      const currentNum = parseFloat(inputValue) || 0;
+      const newValue = currentNum - step;
+      const constrainedValue = min !== void 0 ? Math.max(newValue, min) : newValue;
+      const finalValue = formatNumber(constrainedValue);
+      setInputValue(finalValue.toString());
+      onNumberChange?.(finalValue);
+    };
+    const handleBlur = (e) => {
+      if (isNumberType && onNumberChange) {
+        if (inputValue !== "" && inputValue !== "-") {
+          const numValue = parseFloat(inputValue);
+          if (!isNaN(numValue)) {
+            const cleanValue = formatNumber(numValue);
+            setInputValue(cleanValue.toString());
+            onNumberChange(cleanValue);
+          }
+        } else if (inputValue === "" || inputValue === "-") {
+          setInputValue("");
+        }
+      }
+      onBlur?.(e);
+    };
+    const baseInputStyles = "w-full transition-colors focus:outline-none min-h-[52px]";
+    const sizeStyles = {
+      sm: "px-3 py-2 text-sm",
+      md: "px-4 py-3 text-base",
+      lg: "px-5 py-4 text-lg"
+    };
+    const controlSizeStyles = {
+      sm: "w-6 h-5",
+      md: "w-8 h-6",
+      lg: "w-10 h-8"
+    };
+    const iconSizeStyles = {
+      sm: 12,
+      md: 16,
+      lg: 20
+    };
+    const variantStyles = {
+      default: "border bg-white/60 dark:bg-neutral-800/60 backdrop-blur-sm transition-colors duration-300 rounded-lg",
+      filled: "border-0 bg-neutral-50/60 dark:bg-neutral-700/60 backdrop-blur-sm transition-colors duration-300 rounded-lg"
+    };
+    const stateStyles = error ? "border-rose-500/50 dark:border-rose-400/50 focus:border-rose-600/70 dark:focus:border-rose-500/70 focus:ring-1 focus:ring-rose-500/50 dark:focus:ring-rose-400/50" : "border-neutral-300/50 dark:border-neutral-600/50 focus:border-blue-500/70 dark:focus:border-blue-400/70 focus:ring-1 focus:ring-blue-500/50 dark:focus:ring-blue-400/50";
+    const disabledStyles = disabled ? "bg-neutral-100/60 dark:bg-neutral-700/60 text-neutral-500 dark:text-neutral-400 cursor-not-allowed" : "text-neutral-900 dark:text-neutral-100";
+    const hasControls = isNumberType && showControls;
+    const hasLeadingContent = leadingIcon || leadingDecorator;
+    const hasTrailingContent = trailingIcon || trailingDecorator || hasControls;
+    const inputClasses = `
+    ${baseInputStyles}
+    ${sizeStyles[size]}
+    ${variantStyles[variant]}
+    ${stateStyles}
+    ${disabledStyles}
+    ${hasLeadingContent || isMobileType ? "pl-10" : ""}
+    ${hasTrailingContent ? hasControls ? "pr-20" : "pr-10" : ""}
+    ${className}
+  `.trim().replace(/\s+/g, " ");
+    const selectClasses = `
+    ${baseInputStyles}
+    ${sizeStyles[size]}
+    ${variantStyles[variant]}
+    ${stateStyles}
+    ${disabledStyles}
+    ${hasLeadingContent ? "pl-10" : ""}
+    ${hasTrailingContent ? "pr-10" : ""}
+    ${className}
+    appearance-none cursor-pointer
+  `.trim().replace(/\s+/g, " ");
+    const canDecrement = !disabled && (min === void 0 || (parseFloat(inputValue) || 0) > min);
+    const canIncrement = !disabled && (max === void 0 || (parseFloat(inputValue) || 0) < max);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300 transition-colors duration-300 flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm", children: label }),
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-rose-500 ml-1", children: "*" }),
+          tooltip && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "ml-2 text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors duration-300",
+              onMouseEnter: () => setShowTooltip(true),
+              onMouseLeave: () => setShowTooltip(false),
+              onFocus: () => setShowTooltip(true),
+              onBlur: () => setShowTooltip(false),
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "w-4 h-4" })
+            }
+          )
+        ] }),
+        tooltip && showTooltip && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-[9999] pointer-events-none left-0 bottom-full mt-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-neutral-900/80 dark:bg-neutral-100/80 backdrop-blur-md text-white dark:text-neutral-900 text-sm rounded-xl p-3 shadow-lg w-80 transition-colors duration-300", children: tooltip.content }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        hasLeadingContent && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `absolute inset-y-0 left-0 pl-3 flex items-center ${onLeadingClick ? "cursor-pointer" : "pointer-events-none"}`,
+            onClick: onLeadingClick,
+            children: leadingDecorator ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral-400", children: leadingDecorator }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral-400", children: leadingIcon })
+          }
+        ),
+        isMobileType && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center z-10 pointer-events-none border-r pr-3 border-neutral-300/50 dark:border-neutral-600/50", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral-500 dark:text-neutral-300", children: "+1" }) }),
+        isSelectType ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            ref,
+            value,
+            onChange: handleSelectChange,
+            onFocus,
+            onBlur,
+            disabled,
+            required,
+            className: selectClasses,
+            ...props,
+            children: [
+              placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }),
+              options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+                "option",
+                {
+                  value: option.value,
+                  disabled: option.disabled,
+                  children: option.label
+                },
+                option.value
+              ))
+            ]
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref,
+            type: isMobileType ? "tel" : isNumberType ? "text" : type,
+            inputMode: isMobileType ? "numeric" : isNumberType ? "numeric" : void 0,
+            value: isNumberType && onNumberChange ? inputValue : value,
+            onChange: handleInputChange,
+            onFocus,
+            onBlur: isNumberType && onNumberChange ? handleBlur : onBlur,
+            placeholder,
+            disabled,
+            required,
+            autoComplete: isMobileType ? autoComplete ?? "tel" : autoComplete,
+            className: inputClasses,
+            readOnly,
+            tabIndex,
+            ...props
+          }
+        ),
+        hasControls && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 flex items-center pr-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleDecrement,
+              disabled: !canDecrement,
+              className: `
+                  ${controlSizeStyles[size]}
+                  flex items-center justify-center
+                  text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100
+                  disabled:text-neutral-300 disabled:cursor-not-allowed
+                  transition-colors
+                  border-r border-neutral-300
+                `,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: iconSizeStyles[size] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleIncrement,
+              disabled: !canIncrement,
+              className: `
+                  ${controlSizeStyles[size]}
+                  flex items-center justify-center
+                  text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100
+                  disabled:text-neutral-300 disabled:cursor-not-allowed
+                  transition-colors
+                `,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { size: iconSizeStyles[size] })
+            }
+          )
+        ] }) }),
+        isSelectType && !trailingIcon && !trailingDecorator && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.ChevronDown,
+          {
+            size: iconSizeStyles[size],
+            className: "text-neutral-400"
+          }
+        ) }),
+        (trailingIcon || trailingDecorator) && !hasControls && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `absolute top-1/2 -translate-y-1/3 right-0 pr-3 flex items-center ${onTrailingClick ? "cursor-pointer" : ""}`,
+            onClick: onTrailingClick,
+            onMouseEnter: tooltip ? () => setShowTooltip(true) : void 0,
+            onMouseLeave: tooltip ? () => setShowTooltip(false) : void 0,
+            onFocus: tooltip ? () => setShowTooltip(true) : void 0,
+            onBlur: tooltip ? () => setShowTooltip(false) : void 0,
+            children: trailingDecorator ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral-400", children: trailingDecorator }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral-400", children: trailingIcon })
+          }
+        )
+      ] }),
+      (error || helperText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
+        error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-rose-600 dark:text-rose-400 transition-colors duration-300", children: error }),
+        helperText && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-500 dark:text-neutral-400 transition-colors duration-300", children: helperText })
+      ] })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var accentColors = {
+  blue: {
+    selected: "bg-blue-100/80 dark:bg-blue-900/30",
+    selectedBorder: "border-blue-500 dark:border-blue-400",
+    selectedGlow: "shadow-lg shadow-blue-500/20 dark:shadow-blue-400/20",
+    hoverBg: "group-hover:bg-blue-50/60 dark:group-hover:bg-blue-900/20",
+    hoverBgDark: "hover:bg-blue-50 dark:hover:bg-blue-900/30",
+    iconSelected: "text-blue-600 dark:text-blue-400",
+    iconHover: "group-hover:text-blue-500 dark:group-hover:text-blue-400",
+    checkBg: "bg-blue-500 border-blue-500 dark:bg-blue-400 dark:border-blue-400",
+    inputBorder: "border-blue-500 dark:border-blue-400",
+    inputRing: "focus:ring-blue-500/20",
+    textHover: "hover:text-blue-600 dark:hover:text-blue-400",
+    toggleActive: "text-blue-600 dark:text-blue-400"
+  },
+  violet: {
+    selected: "bg-violet-100/80 dark:bg-violet-900/30",
+    selectedBorder: "border-violet-500 dark:border-violet-400",
+    selectedGlow: "shadow-lg shadow-violet-500/20 dark:shadow-violet-400/20",
+    hoverBg: "group-hover:bg-violet-50/60 dark:group-hover:bg-violet-900/20",
+    hoverBgDark: "hover:bg-violet-50 dark:hover:bg-violet-900/30",
+    iconSelected: "text-violet-600 dark:text-violet-400",
+    iconHover: "group-hover:text-violet-500 dark:group-hover:text-violet-400",
+    checkBg: "bg-violet-500 border-violet-500 dark:bg-violet-400 dark:border-violet-400",
+    inputBorder: "border-violet-500 dark:border-violet-400",
+    inputRing: "focus:ring-violet-500/20",
+    textHover: "hover:text-violet-600 dark:hover:text-violet-400",
+    toggleActive: "text-violet-600 dark:text-violet-400"
+  },
+  emerald: {
+    selected: "bg-emerald-100/80 dark:bg-emerald-900/30",
+    selectedBorder: "border-emerald-500 dark:border-emerald-400",
+    selectedGlow: "shadow-lg shadow-emerald-500/20 dark:shadow-emerald-400/20",
+    hoverBg: "group-hover:bg-emerald-50/60 dark:group-hover:bg-emerald-900/20",
+    hoverBgDark: "hover:bg-emerald-50 dark:hover:bg-emerald-900/30",
+    iconSelected: "text-emerald-600 dark:text-emerald-400",
+    iconHover: "group-hover:text-emerald-500 dark:group-hover:text-emerald-400",
+    checkBg: "bg-emerald-500 border-emerald-500 dark:bg-emerald-400 dark:border-emerald-400",
+    inputBorder: "border-emerald-500 dark:border-emerald-400",
+    inputRing: "focus:ring-emerald-500/20",
+    textHover: "hover:text-emerald-600 dark:hover:text-emerald-400",
+    toggleActive: "text-emerald-600 dark:text-emerald-400"
+  },
+  rose: {
+    selected: "bg-rose-100/80 dark:bg-rose-900/30",
+    selectedBorder: "border-rose-500 dark:border-rose-400",
+    selectedGlow: "shadow-lg shadow-rose-500/20 dark:shadow-rose-400/20",
+    hoverBg: "group-hover:bg-rose-50/60 dark:group-hover:bg-rose-900/20",
+    hoverBgDark: "hover:bg-rose-50 dark:hover:bg-rose-900/30",
+    iconSelected: "text-rose-600 dark:text-rose-400",
+    iconHover: "group-hover:text-rose-500 dark:group-hover:text-rose-400",
+    checkBg: "bg-rose-500 border-rose-500 dark:bg-rose-400 dark:border-rose-400",
+    inputBorder: "border-rose-500 dark:border-rose-400",
+    inputRing: "focus:ring-rose-500/20",
+    textHover: "hover:text-rose-600 dark:hover:text-rose-400",
+    toggleActive: "text-rose-600 dark:text-rose-400"
+  },
+  amber: {
+    selected: "bg-amber-100/80 dark:bg-amber-900/30",
+    selectedBorder: "border-amber-500 dark:border-amber-400",
+    selectedGlow: "shadow-lg shadow-amber-500/20 dark:shadow-amber-400/20",
+    hoverBg: "group-hover:bg-amber-50/60 dark:group-hover:bg-amber-900/20",
+    hoverBgDark: "hover:bg-amber-50 dark:hover:bg-amber-900/30",
+    iconSelected: "text-amber-600 dark:text-amber-400",
+    iconHover: "group-hover:text-amber-500 dark:group-hover:text-amber-400",
+    checkBg: "bg-amber-500 border-amber-500 dark:bg-amber-400 dark:border-amber-400",
+    inputBorder: "border-amber-500 dark:border-amber-400",
+    inputRing: "focus:ring-amber-500/20",
+    textHover: "hover:text-amber-600 dark:hover:text-amber-400",
+    toggleActive: "text-amber-600 dark:text-amber-400"
+  }
+};
+var defaultIconMap = {
+  nebula: lucideReact.Sparkles,
+  andromeda: lucideReact.Orbit,
+  cosmos: lucideReact.Globe,
+  stellar: lucideReact.Star,
+  voyager: lucideReact.Rocket,
+  eclipse: lucideReact.Moon
+};
+var getTemplateIcon = (template) => {
+  if (template.icon) return template.icon;
+  const key = template.title.toLowerCase();
+  return defaultIconMap[key] || lucideReact.Star;
+};
+var TemplateSelector = ({
+  templates,
+  value,
+  onChange,
+  onNameChange,
+  defaultView = "card",
+  showViewToggle = true,
+  editable = false,
+  className,
+  cardClassName,
+  columns = 3,
+  accentColor = "blue"
+}) => {
+  const colors = accentColors[accentColor];
+  const [view, setView] = React.useState(defaultView);
+  const [selectedId, setSelectedId] = React.useState(value);
+  React__namespace.useEffect(() => {
+    setSelectedId(value);
+  }, [value]);
+  const handleSelect = (templateId) => {
+    setSelectedId(templateId);
+    onChange?.(templateId);
+  };
+  const handlePreviewClick = (e, previewUrl) => {
+    e.stopPropagation();
+    window.open(previewUrl, "_blank", "noopener,noreferrer");
+  };
+  const handleNameChange = (templateId, newName) => {
+    onNameChange?.(templateId, newName);
+  };
+  const columnClasses = {
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkTMZLQK74_js.cn("w-full", className), children: [
+    showViewToggle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end mb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex rounded-lg border border-neutral-200 dark:border-neutral-700 p-1 bg-neutral-100 dark:bg-neutral-800", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setView("card"),
+          className: chunkTMZLQK74_js.cn(
+            "p-2 rounded-md text-sm font-medium transition-all duration-200",
+            view === "card" ? `bg-white dark:bg-neutral-700 shadow-sm ${colors.toggleActive}` : "text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300"
+          ),
+          "aria-label": "Card view",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setView("list"),
+          className: chunkTMZLQK74_js.cn(
+            "p-2 rounded-md text-sm font-medium transition-all duration-200",
+            view === "list" ? `bg-white dark:bg-neutral-700 shadow-sm ${colors.toggleActive}` : "text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300"
+          ),
+          "aria-label": "List view",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { size: 16 })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: view === "card" ? /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0, y: 10 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -10 },
+        transition: { duration: 0.2 },
+        className: chunkTMZLQK74_js.cn("grid gap-4", columnClasses[columns]),
+        children: templates.map((template) => /* @__PURE__ */ jsxRuntime.jsx(
+          TemplateCard,
+          {
+            template,
+            isSelected: selectedId === template.id,
+            onSelect: handleSelect,
+            onPreviewClick: handlePreviewClick,
+            onNameChange: handleNameChange,
+            editable,
+            className: cardClassName,
+            colors
+          },
+          template.id
+        ))
+      },
+      "card-view"
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0, y: 10 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -10 },
+        transition: { duration: 0.2 },
+        className: "flex flex-col gap-2",
+        children: templates.map((template) => /* @__PURE__ */ jsxRuntime.jsx(
+          TemplateListItem,
+          {
+            template,
+            isSelected: selectedId === template.id,
+            onSelect: handleSelect,
+            onPreviewClick: handlePreviewClick,
+            onNameChange: handleNameChange,
+            editable,
+            colors
+          },
+          template.id
+        ))
+      },
+      "list-view"
+    ) })
+  ] });
+};
+var TemplateCard = ({
+  template,
+  isSelected,
+  onSelect,
+  onPreviewClick,
+  onNameChange,
+  editable,
+  className,
+  colors
+}) => {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [editValue, setEditValue] = React.useState(template.name || template.title);
+  const inputRef = React__namespace.useRef(null);
+  const displayName = template.name || template.title;
+  const IconComponent = getTemplateIcon(template);
+  const handleDoubleClick = (e) => {
+    if (editable) {
+      e.stopPropagation();
+      setIsEditing(true);
+      setEditValue(displayName);
+    }
+  };
+  const handleBlur = () => {
+    setIsEditing(false);
+    if (editValue.trim() && editValue !== displayName) {
+      onNameChange(template.id, editValue.trim());
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleBlur();
+    } else if (e.key === "Escape") {
+      setIsEditing(false);
+      setEditValue(displayName);
+    }
+  };
+  React__namespace.useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    framerMotion.motion.div,
+    {
+      whileHover: { y: -4, scale: 1.02 },
+      whileTap: { scale: 0.98 },
+      transition: { type: "spring", stiffness: 400, damping: 25 },
+      onClick: () => onSelect(template.id),
+      className: chunkTMZLQK74_js.cn(
+        "group relative cursor-pointer rounded-xl overflow-hidden border-2 transition-all duration-300",
+        "bg-white dark:bg-neutral-800",
+        isSelected ? `${colors.selectedBorder} ${colors.selectedGlow}` : "border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 hover:shadow-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: chunkTMZLQK74_js.cn(
+              "absolute top-3 left-3 z-10 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all duration-200",
+              isSelected ? colors.checkBg : "bg-white dark:bg-neutral-800 border-neutral-300 dark:border-neutral-600"
+            ),
+            children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 12, className: "text-white", strokeWidth: 3 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => onPreviewClick(e, template.previewUrl),
+            className: chunkTMZLQK74_js.cn(
+              "absolute top-3 right-3 z-10 p-1.5 rounded-lg transition-all duration-200",
+              "bg-white dark:bg-neutral-700",
+              "border border-neutral-200 dark:border-neutral-600",
+              "text-neutral-500 dark:text-neutral-400",
+              "opacity-0 group-hover:opacity-100",
+              "hover:bg-blue-50 dark:hover:bg-blue-900/30 hover:text-blue-600 dark:hover:text-blue-400 hover:border-blue-300 dark:hover:border-blue-600"
+            ),
+            "aria-label": `Preview ${displayName}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[4/3] overflow-hidden bg-neutral-50 dark:bg-neutral-800/80 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            initial: { scale: 0.9, opacity: 0.5 },
+            animate: { scale: 1, opacity: 1 },
+            className: chunkTMZLQK74_js.cn(
+              "p-6 rounded-full transition-all duration-300",
+              isSelected ? colors.selected : `bg-neutral-100 dark:bg-neutral-700/50 ${colors.hoverBg}`
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              IconComponent,
+              {
+                size: 48,
+                strokeWidth: 1.5,
+                className: chunkTMZLQK74_js.cn(
+                  "transition-colors duration-300",
+                  isSelected ? colors.iconSelected : `text-neutral-400 dark:text-neutral-500 ${colors.iconHover}`
+                )
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 border-t border-neutral-100 dark:border-neutral-700", children: isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value: editValue,
+            onChange: (e) => setEditValue(e.target.value),
+            onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
+            onClick: (e) => e.stopPropagation(),
+            className: chunkTMZLQK74_js.cn(
+              "w-full px-2 py-1 text-sm font-medium rounded",
+              "bg-neutral-100 dark:bg-neutral-700",
+              `border ${colors.inputBorder}`,
+              "text-neutral-900 dark:text-neutral-100",
+              `focus:outline-none focus:ring-2 ${colors.inputRing}`
+            )
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "h3",
+          {
+            onDoubleClick: handleDoubleClick,
+            className: chunkTMZLQK74_js.cn(
+              "text-sm font-medium text-neutral-900 dark:text-neutral-100 truncate",
+              editable && `cursor-text ${colors.textHover}`
+            ),
+            title: editable ? "Double-click to rename" : displayName,
+            children: displayName
+          }
+        ) })
+      ]
+    }
+  );
+};
+var TemplateListItem = ({
+  template,
+  isSelected,
+  onSelect,
+  onPreviewClick,
+  onNameChange,
+  editable,
+  colors
+}) => {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [editValue, setEditValue] = React.useState(template.name || template.title);
+  const inputRef = React__namespace.useRef(null);
+  const displayName = template.name || template.title;
+  const IconComponent = getTemplateIcon(template);
+  const handleDoubleClick = (e) => {
+    if (editable) {
+      e.stopPropagation();
+      setIsEditing(true);
+      setEditValue(displayName);
+    }
+  };
+  const handleBlur = () => {
+    setIsEditing(false);
+    if (editValue.trim() && editValue !== displayName) {
+      onNameChange(template.id, editValue.trim());
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleBlur();
+    } else if (e.key === "Escape") {
+      setIsEditing(false);
+      setEditValue(displayName);
+    }
+  };
+  React__namespace.useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    framerMotion.motion.div,
+    {
+      whileHover: { x: 4, scale: 1.01 },
+      whileTap: { scale: 0.995 },
+      transition: { type: "spring", stiffness: 400, damping: 25 },
+      onClick: () => onSelect(template.id),
+      className: chunkTMZLQK74_js.cn(
+        "group flex items-center gap-4 p-3 cursor-pointer rounded-xl border-2 transition-all duration-300",
+        "bg-white dark:bg-neutral-800",
+        isSelected ? `${colors.selectedBorder} shadow-md ${colors.selectedGlow}` : "border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: chunkTMZLQK74_js.cn(
+              "w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-all duration-200",
+              isSelected ? colors.checkBg : "bg-white dark:bg-neutral-800 border-neutral-300 dark:border-neutral-600"
+            ),
+            children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 12, className: "text-white", strokeWidth: 3 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: chunkTMZLQK74_js.cn(
+              "w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0 transition-colors duration-300",
+              isSelected ? colors.selected : `bg-neutral-100 dark:bg-neutral-700/50 ${colors.hoverBg}`
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              IconComponent,
+              {
+                size: 24,
+                strokeWidth: 1.5,
+                className: chunkTMZLQK74_js.cn(
+                  "transition-colors duration-300",
+                  isSelected ? colors.iconSelected : `text-neutral-400 dark:text-neutral-500 ${colors.iconHover}`
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value: editValue,
+            onChange: (e) => setEditValue(e.target.value),
+            onBlur: handleBlur,
+            onKeyDown: handleKeyDown,
+            onClick: (e) => e.stopPropagation(),
+            className: chunkTMZLQK74_js.cn(
+              "w-full px-2 py-1 text-sm font-medium rounded",
+              "bg-neutral-100 dark:bg-neutral-700",
+              `border ${colors.inputBorder}`,
+              "text-neutral-900 dark:text-neutral-100",
+              `focus:outline-none focus:ring-2 ${colors.inputRing}`
+            )
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "h3",
+          {
+            onDoubleClick: handleDoubleClick,
+            className: chunkTMZLQK74_js.cn(
+              "text-sm font-medium text-neutral-900 dark:text-neutral-100 truncate",
+              editable && `cursor-text ${colors.textHover}`
+            ),
+            title: editable ? "Double-click to rename" : displayName,
+            children: displayName
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => onPreviewClick(e, template.previewUrl),
+            className: chunkTMZLQK74_js.cn(
+              "p-2 rounded-lg transition-all duration-200 flex-shrink-0",
+              "text-neutral-400 dark:text-neutral-500",
+              "opacity-0 group-hover:opacity-100",
+              colors.hoverBgDark,
+              colors.textHover
+            ),
+            "aria-label": `Preview ${displayName}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 16 })
+          }
+        )
+      ]
+    }
+  );
+};
+TemplateSelector.displayName = "TemplateSelector";
+var TextButton = ({
+  children,
+  onClick,
+  disabled = false,
+  leadingDecorator,
+  trailingDecorator,
+  variant = "primary",
+  size = "md",
+  className = "",
+  type = "button",
+  ...buttonProps
+}) => {
+  const baseStyles = `group inline-flex justify-center items-center gap-2 font-medium uppercase tracking-wide transition-all duration-200 ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`;
+  const variantStyles = {
+    primary: "text-blue-600 hover:text-blue-700 focus:ring-blue-500",
+    secondary: "text-neutral-600 hover:text-neutral-700 focus:ring-neutral-500",
+    danger: "text-rose-600 hover:text-rose-700 focus:ring-rose-500",
+    success: "text-green-600 hover:text-green-700 focus:ring-green-500",
+    disabled: "text-neutral-400 cursor-not-allowed"
+  };
+  const sizeStyles = {
+    sm: "text-xs px-2 py-1",
+    md: "text-sm px-3 py-2",
+    lg: "text-base px-4 py-3"
+  };
+  const disabledStyles = disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type,
+      className: `${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${disabledStyles} ${className}`,
+      onClick,
+      disabled,
+      ...buttonProps,
+      children: [
+        leadingDecorator && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-in slide-in-from-left-1 duration-200", children: leadingDecorator }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+        trailingDecorator && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-in slide-in-from-right-1 duration-200 group-hover:translate-x-1", children: trailingDecorator })
+      ]
+    }
+  );
+};
+var Toast = ({
+  message,
+  type,
+  duration = 5e3,
+  onDismiss,
+  isVisible
+}) => {
+  const [isDismissing, setIsDismissing] = React.useState(false);
+  const [progressWidth, setProgressWidth] = React.useState(100);
+  React.useEffect(() => {
+    if (isVisible && !isDismissing) {
+      const timer = setTimeout(() => {
+        setIsDismissing(true);
+        setTimeout(() => {
+          onDismiss?.();
+        }, 300);
+      }, duration);
+      return () => clearTimeout(timer);
+    }
+  }, [isVisible, isDismissing, duration, onDismiss]);
+  React.useEffect(() => {
+    if (isVisible) {
+      setIsDismissing(false);
+      setProgressWidth(0);
+    }
+  }, [isVisible]);
+  React.useEffect(() => {
+    if (isVisible && !isDismissing) {
+      const progressTimer = setInterval(() => {
+        setProgressWidth((prev) => {
+          if (prev >= 100) return 100;
+          return prev + 100 / (duration / 100);
+        });
+      }, 100);
+      return () => clearInterval(progressTimer);
+    }
+  }, [isVisible, isDismissing, duration]);
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `fixed top-4 right-4 z-50 max-w-sm w-[calc(100vw-2rem)] sm:w-auto transition-all duration-300 ${isDismissing ? "translate-x-full opacity-0" : "translate-x-0 opacity-100"}`,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `p-3 sm:p-4 shadow-lg border transition-all duration-300 ${type === "success" ? "bg-green-50 dark:bg-green-900/70 border-green-200 dark:border-green-700 text-green-800 dark:text-green-200" : "bg-rose-50 dark:bg-rose-900/70 border-rose-200 dark:border-rose-700 text-rose-800 dark:text-rose-200"}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `w-5 h-5 mt-0.5 flex-shrink-0 ${type === "success" ? "text-green-600 dark:text-green-400" : "text-rose-600 dark:text-rose-400"}`,
+                  children: type === "success" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "w-5 h-5" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: message }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => {
+                    setIsDismissing(true);
+                    setTimeout(() => {
+                      onDismiss?.();
+                    }, 300);
+                  },
+                  className: "text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300 transition-colors duration-300",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 w-full bg-neutral-200 dark:bg-neutral-600 h-1 transition-all duration-300", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `h-full transition-all duration-100 ease-linear ${type === "success" ? "bg-green-500 dark:bg-green-400" : "bg-rose-500 dark:bg-rose-400"}`,
+                style: { width: `${progressWidth}%` }
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+
+Object.defineProperty(exports, "Globe", {
+  enumerable: true,
+  get: function () { return lucideReact.Globe; }
+});
+Object.defineProperty(exports, "Moon", {
+  enumerable: true,
+  get: function () { return lucideReact.Moon; }
+});
+Object.defineProperty(exports, "Orbit", {
+  enumerable: true,
+  get: function () { return lucideReact.Orbit; }
+});
+Object.defineProperty(exports, "Rocket", {
+  enumerable: true,
+  get: function () { return lucideReact.Rocket; }
+});
+Object.defineProperty(exports, "Sparkles", {
+  enumerable: true,
+  get: function () { return lucideReact.Sparkles; }
+});
+Object.defineProperty(exports, "Star", {
+  enumerable: true,
+  get: function () { return lucideReact.Star; }
+});
+exports.AnimatedButton = AnimatedButton;
+exports.Input = Input;
+exports.TemplateSelector = TemplateSelector;
+exports.TextButton = TextButton;
+exports.Toast = Toast;
+//# sourceMappingURL=chunk-BWR6DSQJ.js.map
+//# sourceMappingURL=chunk-BWR6DSQJ.js.map