omui-lib 1.0.0 → 1.0.3

package/dist/chunk-VA6HDMVP.mjs

@@ -0,0 +1,50 @@
+// src/components/AnimatedProgressBar/AnimatedProgressBar.jsx
+import React, { useState, useEffect } from "react";
+var AnimatedProgressBar = ({
+  progress = 75,
+  height = "12px",
+  width = "300px",
+  bg = "#1e293b",
+  color = "#6366f1",
+  showPercentage = true,
+  borderRadius = "20px",
+  animationDuration = "1s"
+}) => {
+  const [animatedProgress, setAnimatedProgress] = useState(0);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAnimatedProgress(progress);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [progress]);
+  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: { width, fontFamily: "system-ui,sans-serif" } }, /* @__PURE__ */ React.createElement("div", { style: {
+    width: "100%",
+    height,
+    background: bg,
+    borderRadius,
+    overflow: "hidden",
+    position: "relative",
+    boxShadow: "inset 0 1px 3px rgba(0,0,0,0.2)"
+  } }, /* @__PURE__ */ React.createElement("div", { style: {
+    width: animatedProgress + "%",
+    height: "100%",
+    background: "linear-gradient(90deg, " + color + ", " + alpha(color, 0.7) + ")",
+    borderRadius,
+    transition: "width " + animationDuration + " cubic-bezier(0.65, 0, 0.35, 1)",
+    boxShadow: "0 2px 10px " + alpha(color, 0.4)
+  } })), showPercentage && /* @__PURE__ */ React.createElement("div", { style: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginTop: "8px",
+    fontSize: "12px",
+    color: "rgba(255,255,255,0.6)"
+  } }, /* @__PURE__ */ React.createElement("span", null, "Progress"), /* @__PURE__ */ React.createElement("span", { style: { fontWeight: "700", color } }, animatedProgress, "%")));
+};
+
+export {
+  AnimatedProgressBar
+};

package/dist/chunk-XD6E2QQI.mjs

@@ -0,0 +1,143 @@
+// src/components/SwipeCard/SwipeCard.jsx
+import React, { useState, useRef, useEffect } from "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] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isComplete, setIsComplete] = useState(false);
+  const containerRef = 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);
+    }
+  };
+  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__ */ React.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__ */ React.createElement("h3", { style: {
+    fontSize: "18px",
+    fontWeight: "700",
+    color: "#fff",
+    margin: "0 0 8px"
+  } }, title), /* @__PURE__ */ React.createElement("p", { style: {
+    fontSize: "14px",
+    color: "rgba(255,255,255,0.5)",
+    margin: "0 0 24px",
+    lineHeight: 1.5
+  } }, description), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        width: "100%",
+        height: "50px",
+        borderRadius: "12px",
+        background: "rgba(255,255,255,0.05)",
+        position: "relative",
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ React.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__ */ React.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__ */ React.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__ */ React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: accent, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React.createElement("polyline", { points: "9 18 15 12 9 6" }))
+    )
+  ));
+};
+
+export {
+  SwipeCard
+};

package/dist/chunk-XGVKPI3O.mjs

@@ -0,0 +1,23 @@
+// src/components/Loader/Loader.jsx
+import React from "react";
+var Loader = ({
+  size = "48px",
+  color = "#6366f1",
+  bg = "rgba(255,255,255,0.1)",
+  speed = "1s",
+  thickness = "4px"
+}) => {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", height: "100%" } }, /* @__PURE__ */ React.createElement("div", { style: {
+    width: size,
+    height: size,
+    borderRadius: "50%",
+    border: thickness + " solid " + bg,
+    borderTop: thickness + " solid " + color,
+    animation: "spin " + speed + " linear infinite",
+    display: "inline-block"
+  } }), /* @__PURE__ */ React.createElement("style", null, "@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }"));
+};
+
+export {
+  Loader
+};

package/dist/components/AnimatedProgressBar/AnimatedProgressBar.js

@@ -0,0 +1,83 @@
+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/AnimatedProgressBar/AnimatedProgressBar.jsx
+var AnimatedProgressBar_exports = {};
+__export(AnimatedProgressBar_exports, {
+  AnimatedProgressBar: () => AnimatedProgressBar
+});
+module.exports = __toCommonJS(AnimatedProgressBar_exports);
+var import_react = __toESM(require("react"));
+var AnimatedProgressBar = ({
+  progress = 75,
+  height = "12px",
+  width = "300px",
+  bg = "#1e293b",
+  color = "#6366f1",
+  showPercentage = true,
+  borderRadius = "20px",
+  animationDuration = "1s"
+}) => {
+  const [animatedProgress, setAnimatedProgress] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    const timer = setTimeout(() => {
+      setAnimatedProgress(progress);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [progress]);
+  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: { width, fontFamily: "system-ui,sans-serif" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    width: "100%",
+    height,
+    background: bg,
+    borderRadius,
+    overflow: "hidden",
+    position: "relative",
+    boxShadow: "inset 0 1px 3px rgba(0,0,0,0.2)"
+  } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    width: animatedProgress + "%",
+    height: "100%",
+    background: "linear-gradient(90deg, " + color + ", " + alpha(color, 0.7) + ")",
+    borderRadius,
+    transition: "width " + animationDuration + " cubic-bezier(0.65, 0, 0.35, 1)",
+    boxShadow: "0 2px 10px " + alpha(color, 0.4)
+  } })), showPercentage && /* @__PURE__ */ import_react.default.createElement("div", { style: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginTop: "8px",
+    fontSize: "12px",
+    color: "rgba(255,255,255,0.6)"
+  } }, /* @__PURE__ */ import_react.default.createElement("span", null, "Progress"), /* @__PURE__ */ import_react.default.createElement("span", { style: { fontWeight: "700", color } }, animatedProgress, "%")));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnimatedProgressBar
+});

package/dist/components/AnimatedProgressBar/AnimatedProgressBar.mjs

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

package/dist/components/Box/Box.js

@@ -0,0 +1,71 @@
+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/Box/Box.jsx
+var Box_exports = {};
+__export(Box_exports, {
+  Box: () => Box
+});
+module.exports = __toCommonJS(Box_exports);
+var import_react = __toESM(require("react"));
+var Box = ({
+  width = "300px",
+  height = "200px",
+  bg = "#1e293b",
+  color = "#fff",
+  borderRadius = "16px",
+  padding = "20px",
+  border = "1px solid rgba(255,255,255,0.08)",
+  shadow = "0 10px 40px rgba(0,0,0,0.4)",
+  children = "Box Content"
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        background: bg,
+        color,
+        borderRadius,
+        padding,
+        border,
+        boxShadow: shadow,
+        fontFamily: "system-ui, sans-serif",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    },
+    children
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Box
+});

package/dist/components/Box/Box.mjs

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

package/dist/components/Button/Button.js

@@ -0,0 +1,89 @@
+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/Button/Button.jsx
+var Button_exports = {};
+__export(Button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(Button_exports);
+var import_react = __toESM(require("react"));
+var Button = ({
+  text = "Click me",
+  bg = "#6366f1",
+  color = "#ffffff",
+  size = "md",
+  radius = "10px",
+  disabled = false,
+  loading = false,
+  onClick = () => {
+  },
+  shadow = true
+}) => {
+  const sizes = {
+    sm: { padding: "8px 16px", fontSize: "13px" },
+    md: { padding: "12px 24px", fontSize: "15px" },
+    lg: { padding: "16px 32px", fontSize: "17px" }
+  };
+  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(
+    "button",
+    {
+      onClick,
+      disabled: disabled || loading,
+      style: {
+        background: bg,
+        color,
+        padding: sizes[size].padding,
+        borderRadius: radius,
+        border: "none",
+        cursor: disabled ? "not-allowed" : "pointer",
+        fontWeight: "700",
+        fontSize: sizes[size].fontSize,
+        fontFamily: "system-ui, sans-serif",
+        boxShadow: shadow ? "0 4px 14px " + alpha(bg, 0.4) : "none",
+        opacity: disabled ? 0.7 : 1,
+        transition: "all 0.2s ease",
+        position: "relative",
+        overflow: "hidden",
+        transform: "translateY(0)",
+        "&:hover": {
+          transform: "translateY(-1px)"
+        }
+      }
+    },
+    loading ? /* @__PURE__ */ import_react.default.createElement("span", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "8px" } }, /* @__PURE__ */ import_react.default.createElement("span", { style: { width: "12px", height: "12px", borderRadius: "50%", border: "2px solid " + color, borderTopColor: "transparent", animation: "spin 0.8s linear infinite" } }), "Loading...") : text
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/dist/components/Button/Button.mjs

@@ -0,0 +1,6 @@
+import {
+  Button
+} from "../../chunk-5LA6VVEY.mjs";
+export {
+  Button
+};

package/dist/components/CommentCard/CommentCard.js

@@ -0,0 +1,72 @@
+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/CommentCard/CommentCard.jsx
+var CommentCard_exports = {};
+__export(CommentCard_exports, {
+  CommentCard: () => CommentCard
+});
+module.exports = __toCommonJS(CommentCard_exports);
+var import_react = __toESM(require("react"));
+var CommentCard = ({
+  avatar = "https://i.pravatar.cc/150?img=68",
+  name = "John Doe",
+  timestamp = "2 hours ago",
+  comment = "This is an insightful comment that adds value to the discussion.",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onReplyClick = () => {
+  }
+}) => {
+  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: "16px",
+    padding: "16px",
+    border: "1px solid " + alpha(accent, 0.1),
+    fontFamily: "system-ui,sans-serif",
+    width: "320px"
+  } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "12px" } }, /* @__PURE__ */ import_react.default.createElement("img", { src: avatar, alt: name, style: { width: "40px", height: "40px", borderRadius: "50%", objectFit: "cover" } }), /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.4)" } }, timestamp))), /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.7)", lineHeight: 1.5, marginBottom: "16px" } }, comment), /* @__PURE__ */ import_react.default.createElement("button", { onClick: onReplyClick, style: {
+    padding: "6px 12px",
+    borderRadius: "8px",
+    border: "1px solid " + alpha(accent, 0.2),
+    background: "transparent",
+    color: accent,
+    fontSize: "12px",
+    fontWeight: "600",
+    cursor: "pointer",
+    fontFamily: "inherit"
+  } }, "Reply"));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CommentCard
+});

package/dist/components/CommentCard/CommentCard.mjs

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