omui-lib 1.0.1 → 1.0.3

package/dist/components/SwipeCard/SwipeCard.js

@@ -0,0 +1,176 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/SwipeCard/SwipeCard.jsx
+var SwipeCard_exports = {};
+__export(SwipeCard_exports, {
+  SwipeCard: () => SwipeCard
+});
+module.exports = __toCommonJS(SwipeCard_exports);
+var import_react = __toESM(require("react"));
+var SwipeCard = ({
+  title = "Swipe to Unlock",
+  description = "Slide the button to confirm your action",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onSwipeComplete = () => {
+  },
+  successText = "Success!"
+}) => {
+  const [position, setPosition] = (0, import_react.useState)(0);
+  const [isDragging, setIsDragging] = (0, import_react.useState)(false);
+  const [isComplete, setIsComplete] = (0, import_react.useState)(false);
+  const containerRef = (0, import_react.useRef)(null);
+  const maxWidth = 300;
+  const threshold = maxWidth * 0.8;
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  const handleMouseDown = () => {
+    setIsDragging(true);
+  };
+  const handleMouseMove = (e) => {
+    if (!isDragging) return;
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const newPosition = e.clientX - containerRect.left;
+    if (newPosition >= 0 && newPosition <= maxWidth) {
+      setPosition(newPosition);
+    }
+  };
+  const handleMouseUp = () => {
+    setIsDragging(false);
+    if (position >= threshold) {
+      setPosition(maxWidth);
+      setIsComplete(true);
+      onSwipeComplete();
+    } else {
+      setPosition(0);
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    } else {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, position]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    background: bg,
+    borderRadius: "16px",
+    padding: "24px",
+    width: "340px",
+    fontFamily: "system-ui,sans-serif",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
+    border: "1px solid rgba(255,255,255,0.08)"
+  } }, /* @__PURE__ */ import_react.default.createElement("h3", { style: {
+    fontSize: "18px",
+    fontWeight: "700",
+    color: "#fff",
+    margin: "0 0 8px"
+  } }, title), /* @__PURE__ */ import_react.default.createElement("p", { style: {
+    fontSize: "14px",
+    color: "rgba(255,255,255,0.5)",
+    margin: "0 0 24px",
+    lineHeight: 1.5
+  } }, description), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        width: "100%",
+        height: "50px",
+        borderRadius: "12px",
+        background: "rgba(255,255,255,0.05)",
+        position: "relative",
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: position + "px",
+          height: "100%",
+          background: "linear-gradient(90deg, " + accent + ", " + alpha(accent, 0.7) + ")",
+          borderRadius: "12px",
+          transition: isDragging ? "none" : "width 0.3s ease"
+        }
+      }
+    ),
+    isComplete ? /* @__PURE__ */ import_react.default.createElement("div", { style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "#fff",
+      fontWeight: "700",
+      fontSize: "14px"
+    } }, successText) : /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        onMouseDown: handleMouseDown,
+        style: {
+          position: "absolute",
+          left: position + "px",
+          top: "50%",
+          transform: "translate(-50%, -50%)",
+          width: "60px",
+          height: "60px",
+          borderRadius: "12px",
+          background: "#fff",
+          cursor: "grab",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.2)",
+          userSelect: "none",
+          zIndex: 2
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: accent, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react.default.createElement("polyline", { points: "9 18 15 12 9 6" }))
+    )
+  ));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SwipeCard
+});

package/dist/components/SwipeCard/SwipeCard.mjs

@@ -0,0 +1,6 @@
+import {
+  SwipeCard
+} from "../../chunk-XD6E2QQI.mjs";
+export {
+  SwipeCard
+};

package/dist/components/ThumbnailCard/ThumbnailCard.js

@@ -0,0 +1,116 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ThumbnailCard/ThumbnailCard.jsx
+var ThumbnailCard_exports = {};
+__export(ThumbnailCard_exports, {
+  ThumbnailCard: () => ThumbnailCard
+});
+module.exports = __toCommonJS(ThumbnailCard_exports);
+var import_react = __toESM(require("react"));
+var ThumbnailCard = ({
+  image = "https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=600&q=80",
+  title = "Modern UI Design",
+  views = 1243,
+  duration = "2:45",
+  channel = "Design Mastery",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onClick = () => {
+  }
+}) => {
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        background: bg,
+        borderRadius: "12px",
+        overflow: "hidden",
+        width: "280px",
+        cursor: "pointer",
+        transition: "transform 0.2s",
+        transform: hovered ? "scale(1.02)" : "scale(1)",
+        fontFamily: "system-ui,sans-serif"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { position: "relative", width: "100%", height: "160px" } }, /* @__PURE__ */ import_react.default.createElement(
+      "img",
+      {
+        src: image,
+        alt: title,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          transition: "transform 0.3s",
+          transform: hovered ? "scale(1.05)" : "scale(1)"
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("div", { style: {
+      position: "absolute",
+      bottom: "8px",
+      right: "8px",
+      padding: "3px 6px",
+      borderRadius: "4px",
+      background: "rgba(0,0,0,0.8)",
+      color: "#fff",
+      fontSize: "10px",
+      fontWeight: "600"
+    } }, duration)),
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "12px" } }, /* @__PURE__ */ import_react.default.createElement("h3", { style: {
+      fontSize: "14px",
+      fontWeight: "700",
+      color: "#fff",
+      margin: "0 0 6px",
+      lineHeight: 1.4,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    } }, title), /* @__PURE__ */ import_react.default.createElement("p", { style: {
+      fontSize: "12px",
+      color: "rgba(255,255,255,0.5)",
+      margin: "0 0 4px"
+    } }, channel), /* @__PURE__ */ import_react.default.createElement("p", { style: {
+      fontSize: "11px",
+      color: "rgba(255,255,255,0.35)",
+      margin: 0
+    } }, views.toLocaleString(), " views"))
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThumbnailCard
+});

package/dist/components/ThumbnailCard/ThumbnailCard.mjs

@@ -0,0 +1,6 @@
+import {
+  ThumbnailCard
+} from "../../chunk-57QJO5RD.mjs";
+export {
+  ThumbnailCard
+};

package/dist/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,100 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ToggleButton/ToggleButton.jsx
+var ToggleButton_exports = {};
+__export(ToggleButton_exports, {
+  ToggleButton: () => ToggleButton
+});
+module.exports = __toCommonJS(ToggleButton_exports);
+var import_react = __toESM(require("react"));
+var ToggleButton = ({
+  initialActive = false,
+  activeText = "ON",
+  inactiveText = "OFF",
+  activeBg = "#7c3aed",
+  inactiveBg = "#1e293b",
+  thumbColor = "#fff",
+  width = "120px",
+  height = "40px",
+  onChange = () => {
+  }
+}) => {
+  const [active, setActive] = (0, import_react.useState)(initialActive);
+  const toggle = () => {
+    setActive(!active);
+    onChange(!active);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      onClick: toggle,
+      style: {
+        position: "relative",
+        width,
+        height,
+        borderRadius: "100px",
+        background: active ? activeBg : inactiveBg,
+        cursor: "pointer",
+        transition: "background 0.3s ease",
+        boxShadow: "0 4px 12px rgba(0,0,0,0.2)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "0 12px",
+        boxSizing: "border-box",
+        fontFamily: "system-ui,sans-serif",
+        fontWeight: "700",
+        fontSize: "12px",
+        color: thumbColor,
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("span", { style: { opacity: active ? 0 : 1, transition: "opacity 0.2s", zIndex: 1 } }, inactiveText),
+    /* @__PURE__ */ import_react.default.createElement("span", { style: { opacity: active ? 1 : 0, transition: "opacity 0.2s", zIndex: 1 } }, activeText),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: active ? "calc(100% - 32px)" : "4px",
+          width: "calc(" + height + " - 8px)",
+          height: "calc(" + height + " - 8px)",
+          background: thumbColor,
+          borderRadius: "50%",
+          transition: "left 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.2)"
+        }
+      }
+    )
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToggleButton
+});

package/dist/components/ToggleButton/ToggleButton.mjs

@@ -0,0 +1,66 @@
+// src/components/ToggleButton/ToggleButton.jsx
+import React, { useState } from "react";
+var ToggleButton = ({
+  initialActive = false,
+  activeText = "ON",
+  inactiveText = "OFF",
+  activeBg = "#7c3aed",
+  inactiveBg = "#1e293b",
+  thumbColor = "#fff",
+  width = "120px",
+  height = "40px",
+  onChange = () => {
+  }
+}) => {
+  const [active, setActive] = useState(initialActive);
+  const toggle = () => {
+    setActive(!active);
+    onChange(!active);
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick: toggle,
+      style: {
+        position: "relative",
+        width,
+        height,
+        borderRadius: "100px",
+        background: active ? activeBg : inactiveBg,
+        cursor: "pointer",
+        transition: "background 0.3s ease",
+        boxShadow: "0 4px 12px rgba(0,0,0,0.2)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "0 12px",
+        boxSizing: "border-box",
+        fontFamily: "system-ui,sans-serif",
+        fontWeight: "700",
+        fontSize: "12px",
+        color: thumbColor,
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ React.createElement("span", { style: { opacity: active ? 0 : 1, transition: "opacity 0.2s", zIndex: 1 } }, inactiveText),
+    /* @__PURE__ */ React.createElement("span", { style: { opacity: active ? 1 : 0, transition: "opacity 0.2s", zIndex: 1 } }, activeText),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: active ? "calc(100% - 32px)" : "4px",
+          width: "calc(" + height + " - 8px)",
+          height: "calc(" + height + " - 8px)",
+          background: thumbColor,
+          borderRadius: "50%",
+          transition: "left 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+          boxShadow: "0 2px 8px rgba(0,0,0,0.2)"
+        }
+      }
+    )
+  );
+};
+export {
+  ToggleButton
+};

package/dist/components/Toolbox/Toolbox.js

@@ -0,0 +1,102 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Toolbox/Toolbox.jsx
+var Toolbox_exports = {};
+__export(Toolbox_exports, {
+  Toolbox: () => Toolbox
+});
+module.exports = __toCommonJS(Toolbox_exports);
+var import_react = __toESM(require("react"));
+var Toolbox = ({
+  tools = ["Brush", "Eraser", "Text", "Shapes", "Crop"],
+  activeTool = "Brush",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onToolSelect = () => {
+  }
+}) => {
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    background: bg,
+    borderRadius: "14px",
+    padding: "12px",
+    width: "280px",
+    border: "1px solid rgba(255,255,255,0.08)",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
+    fontFamily: "system-ui,sans-serif"
+  } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    fontSize: "13px",
+    fontWeight: "700",
+    color: "rgba(255,255,255,0.5)",
+    marginBottom: "4px",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  } }, "Tools"), tools.map((tool) => /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      key: tool,
+      onClick: () => onToolSelect(tool),
+      style: {
+        background: activeTool === tool ? alpha(accent, 0.15) : "transparent",
+        border: "1px solid " + (activeTool === tool ? alpha(accent, 0.3) : "rgba(255,255,255,0.05)"),
+        padding: "10px 14px",
+        borderRadius: "10px",
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        cursor: "pointer",
+        transition: "all 0.2s",
+        color: activeTool === tool ? "#fff" : "rgba(255,255,255,0.7)",
+        fontWeight: activeTool === tool ? "600" : "500",
+        fontSize: "14px"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { style: {
+      width: "24px",
+      height: "24px",
+      borderRadius: "6px",
+      background: activeTool === tool ? accent : "rgba(255,255,255,0.1)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    } }, /* @__PURE__ */ import_react.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, tool === "Brush" && /* @__PURE__ */ import_react.default.createElement("path", { d: "M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z" }), tool === "Eraser" && /* @__PURE__ */ import_react.default.createElement("path", { d: "M16.24,3.56L21.19,8.5C21.97,9.29 21.97,10.55 21.19,11.34L12,20.53C10.44,22.09 7.91,22.09 6.34,20.53L2.81,17C2.03,16.21 2.03,14.95 2.81,14.16L13.41,3.56C14.2,2.78 15.46,2.78 16.24,3.56M4.22,15.58L7.76,19.11C8.54,19.9 9.8,19.9 10.59,19.11L14.12,15.58L9.17,10.63L4.22,15.58Z" }), tool === "Text" && /* @__PURE__ */ import_react.default.createElement("path", { d: "M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z" }), tool === "Shapes" && /* @__PURE__ */ import_react.default.createElement("path", { d: "M11,13.5V21.5H3V13.5H11M12,2L17.5,11H6.5L12,2M17.5,13C20,13 22,15 22,17.5C22,20 20,22 17.5,22C15,22 13,20 13,17.5C13,15 15,13 17.5,13Z" }), tool === "Crop" && /* @__PURE__ */ import_react.default.createElement("path", { d: "M7,17V1H5V5H1V7H5V17A2,2 0 0,0 7,19H17V23H19V19H23V17M17,15H19V7C19,5.89 18.1,5 17,5H9V7H17V15Z" }))),
+    tool
+  ))));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Toolbox
+});

package/dist/components/Toolbox/Toolbox.mjs

@@ -0,0 +1,68 @@
+// src/components/Toolbox/Toolbox.jsx
+import React, { useState } from "react";
+var Toolbox = ({
+  tools = ["Brush", "Eraser", "Text", "Shapes", "Crop"],
+  activeTool = "Brush",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onToolSelect = () => {
+  }
+}) => {
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  return /* @__PURE__ */ React.createElement("div", { style: {
+    background: bg,
+    borderRadius: "14px",
+    padding: "12px",
+    width: "280px",
+    border: "1px solid rgba(255,255,255,0.08)",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
+    fontFamily: "system-ui,sans-serif"
+  } }, /* @__PURE__ */ React.createElement("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  } }, /* @__PURE__ */ React.createElement("div", { style: {
+    fontSize: "13px",
+    fontWeight: "700",
+    color: "rgba(255,255,255,0.5)",
+    marginBottom: "4px",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  } }, "Tools"), tools.map((tool) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: tool,
+      onClick: () => onToolSelect(tool),
+      style: {
+        background: activeTool === tool ? alpha(accent, 0.15) : "transparent",
+        border: "1px solid " + (activeTool === tool ? alpha(accent, 0.3) : "rgba(255,255,255,0.05)"),
+        padding: "10px 14px",
+        borderRadius: "10px",
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        cursor: "pointer",
+        transition: "all 0.2s",
+        color: activeTool === tool ? "#fff" : "rgba(255,255,255,0.7)",
+        fontWeight: activeTool === tool ? "600" : "500",
+        fontSize: "14px"
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { style: {
+      width: "24px",
+      height: "24px",
+      borderRadius: "6px",
+      background: activeTool === tool ? accent : "rgba(255,255,255,0.1)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    } }, /* @__PURE__ */ React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, tool === "Brush" && /* @__PURE__ */ React.createElement("path", { d: "M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z" }), tool === "Eraser" && /* @__PURE__ */ React.createElement("path", { d: "M16.24,3.56L21.19,8.5C21.97,9.29 21.97,10.55 21.19,11.34L12,20.53C10.44,22.09 7.91,22.09 6.34,20.53L2.81,17C2.03,16.21 2.03,14.95 2.81,14.16L13.41,3.56C14.2,2.78 15.46,2.78 16.24,3.56M4.22,15.58L7.76,19.11C8.54,19.9 9.8,19.9 10.59,19.11L14.12,15.58L9.17,10.63L4.22,15.58Z" }), tool === "Text" && /* @__PURE__ */ React.createElement("path", { d: "M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z" }), tool === "Shapes" && /* @__PURE__ */ React.createElement("path", { d: "M11,13.5V21.5H3V13.5H11M12,2L17.5,11H6.5L12,2M17.5,13C20,13 22,15 22,17.5C22,20 20,22 17.5,22C15,22 13,20 13,17.5C13,15 15,13 17.5,13Z" }), tool === "Crop" && /* @__PURE__ */ React.createElement("path", { d: "M7,17V1H5V5H1V7H5V17A2,2 0 0,0 7,19H17V23H19V19H23V17M17,15H19V7C19,5.89 18.1,5 17,5H9V7H17V15Z" }))),
+    tool
+  ))));
+};
+export {
+  Toolbox
+};