@sudobility/design-components 1.0.8

package/dist/index.esm.js

@@ -0,0 +1,638 @@
+import te, { useState as D } from "react";
+import { cn as h } from "@sudobility/components";
+var T = { exports: {} }, C = {};
+var W;
+function ae() {
+  if (W) return C;
+  W = 1;
+  var a = Symbol.for("react.transitional.element"), l = Symbol.for("react.fragment");
+  function o(c, u, g) {
+    var m = null;
+    if (g !== void 0 && (m = "" + g), u.key !== void 0 && (m = "" + u.key), "key" in u) {
+      g = {};
+      for (var b in u)
+        b !== "key" && (g[b] = u[b]);
+    } else g = u;
+    return u = g.ref, {
+      $$typeof: a,
+      type: c,
+      key: m,
+      ref: u !== void 0 ? u : null,
+      props: g
+    };
+  }
+  return C.Fragment = l, C.jsx = o, C.jsxs = o, C;
+}
+var R = {};
+var z;
+function oe() {
+  return z || (z = 1, process.env.NODE_ENV !== "production" && (function() {
+    function a(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === K ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case x:
+          return "Fragment";
+        case A:
+          return "Profiler";
+        case _:
+          return "StrictMode";
+        case X:
+          return "Suspense";
+        case H:
+          return "SuspenseList";
+        case Q:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case s:
+            return "Portal";
+          case J:
+            return e.displayName || "Context";
+          case P:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case G:
+            var t = e.render;
+            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case Z:
+            return t = e.displayName || null, t !== null ? t : a(e.type) || "Memo";
+          case S:
+            t = e._payload, e = e._init;
+            try {
+              return a(e(t));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function l(e) {
+      return "" + e;
+    }
+    function o(e) {
+      try {
+        l(e);
+        var t = !1;
+      } catch {
+        t = !0;
+      }
+      if (t) {
+        t = console;
+        var i = t.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return i.call(
+          t,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          d
+        ), l(e);
+      }
+    }
+    function c(e) {
+      if (e === x) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === S)
+        return "<...>";
+      try {
+        var t = a(e);
+        return t ? "<" + t + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function u() {
+      var e = O.A;
+      return e === null ? null : e.getOwner();
+    }
+    function g() {
+      return Error("react-stack-top-frame");
+    }
+    function m(e) {
+      if (I.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function b(e, t) {
+      function i() {
+        Y || (Y = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          t
+        ));
+      }
+      i.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: i,
+        configurable: !0
+      });
+    }
+    function p() {
+      var e = a(this.type);
+      return L[e] || (L[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function v(e, t, i, d, N, F) {
+      var f = i.ref;
+      return e = {
+        $$typeof: k,
+        type: e,
+        key: t,
+        props: i,
+        _owner: d
+      }, (f !== void 0 ? f : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: p
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: N
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: F
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function y(e, t, i, d, N, F) {
+      var f = t.children;
+      if (f !== void 0)
+        if (d)
+          if (ee(f)) {
+            for (d = 0; d < f.length; d++)
+              w(f[d]);
+            Object.freeze && Object.freeze(f);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else w(f);
+      if (I.call(t, "key")) {
+        f = a(e);
+        var j = Object.keys(t).filter(function(re) {
+          return re !== "key";
+        });
+        d = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", V[f + d] || (j = 0 < j.length ? "{" + j.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          d,
+          f,
+          j,
+          f
+        ), V[f + d] = !0);
+      }
+      if (f = null, i !== void 0 && (o(i), f = "" + i), m(t) && (o(t.key), f = "" + t.key), "key" in t) {
+        i = {};
+        for (var $ in t)
+          $ !== "key" && (i[$] = t[$]);
+      } else i = t;
+      return f && b(
+        i,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), v(
+        e,
+        f,
+        i,
+        u(),
+        N,
+        F
+      );
+    }
+    function w(e) {
+      E(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === S && (e._payload.status === "fulfilled" ? E(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function E(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === k;
+    }
+    var n = te, k = Symbol.for("react.transitional.element"), s = Symbol.for("react.portal"), x = Symbol.for("react.fragment"), _ = Symbol.for("react.strict_mode"), A = Symbol.for("react.profiler"), P = Symbol.for("react.consumer"), J = Symbol.for("react.context"), G = Symbol.for("react.forward_ref"), X = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), S = Symbol.for("react.lazy"), Q = Symbol.for("react.activity"), K = Symbol.for("react.client.reference"), O = n.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, ee = Array.isArray, U = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    n = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var Y, L = {}, B = n.react_stack_bottom_frame.bind(
+      n,
+      g
+    )(), M = U(c(g)), V = {};
+    R.Fragment = x, R.jsx = function(e, t, i) {
+      var d = 1e4 > O.recentlyCreatedOwnerStacks++;
+      return y(
+        e,
+        t,
+        i,
+        !1,
+        d ? Error("react-stack-top-frame") : B,
+        d ? U(c(e)) : M
+      );
+    }, R.jsxs = function(e, t, i) {
+      var d = 1e4 > O.recentlyCreatedOwnerStacks++;
+      return y(
+        e,
+        t,
+        i,
+        !0,
+        d ? Error("react-stack-top-frame") : B,
+        d ? U(c(e)) : M
+      );
+    };
+  })()), R;
+}
+var q;
+function ne() {
+  return q || (q = 1, process.env.NODE_ENV === "production" ? T.exports = ae() : T.exports = oe()), T.exports;
+}
+var r = ne();
+const ie = ({
+  className: a,
+  children: l,
+  disabled: o = !1,
+  onClick: c
+}) => /* @__PURE__ */ r.jsx(
+  "div",
+  {
+    className: h(
+      "p-4 rounded-lg border transition-colors",
+      "bg-white dark:bg-gray-900",
+      "border-gray-200 dark:border-gray-700",
+      "text-gray-900 dark:text-white",
+      o && "opacity-50 cursor-not-allowed",
+      "hover:bg-gray-50 dark:hover:bg-gray-800",
+      a
+    ),
+    onClick: o ? void 0 : c,
+    role: "region",
+    "aria-label": "UauroraUbackground",
+    children: l || "UauroraUbackground Component"
+  }
+), ce = ({
+  className: a,
+  children: l,
+  disabled: o = !1,
+  onClick: c
+}) => /* @__PURE__ */ r.jsx(
+  "div",
+  {
+    className: h(
+      "p-4 rounded-lg border transition-colors",
+      "bg-white dark:bg-gray-900",
+      "border-gray-200 dark:border-gray-700",
+      "text-gray-900 dark:text-white",
+      o && "opacity-50 cursor-not-allowed",
+      "hover:bg-gray-50 dark:hover:bg-gray-800",
+      a
+    ),
+    onClick: o ? void 0 : c,
+    role: "region",
+    "aria-label": "UbadgeUdesigner",
+    children: l || "UbadgeUdesigner Component"
+  }
+), ue = ({
+  value: a,
+  onChange: l,
+  presets: o,
+  className: c
+}) => {
+  const g = o || [
+    "#000000",
+    "#ffffff",
+    "#ff0000",
+    "#00ff00",
+    "#0000ff",
+    "#ffff00",
+    "#ff00ff",
+    "#00ffff"
+  ];
+  return /* @__PURE__ */ r.jsxs("div", { className: h("space-y-3", c), children: [
+    /* @__PURE__ */ r.jsx(
+      "input",
+      {
+        type: "color",
+        value: a,
+        onChange: (m) => l(m.target.value),
+        className: "w-full h-12 rounded cursor-pointer"
+      }
+    ),
+    /* @__PURE__ */ r.jsx("div", { className: "grid grid-cols-8 gap-2", children: g.map((m) => /* @__PURE__ */ r.jsx(
+      "button",
+      {
+        onClick: () => l(m),
+        className: h(
+          "w-8 h-8 rounded border-2",
+          a === m ? "border-blue-500" : "border-transparent"
+        ),
+        style: { backgroundColor: m }
+      },
+      m
+    )) })
+  ] });
+}, de = ({
+  value: a,
+  onChange: l,
+  presets: o = [
+    "#000000",
+    "#FFFFFF",
+    "#FF6B6B",
+    "#4ECDC4",
+    "#45B7D1",
+    "#FFA07A",
+    "#F7DC6F",
+    "#BB8FCE",
+    "#85C1E2",
+    "#F8B500",
+    "#52B788",
+    "#E63946",
+    "#1D3557",
+    "#457B9D",
+    "#A8DADC",
+    "#F4A261",
+    "#264653",
+    "#2A9D8F"
+  ],
+  showInput: c = !0,
+  showOpacity: u = !1,
+  className: g
+}) => {
+  const [m, b] = D(a), [p, v] = D(100), y = (s) => {
+    l(s), b(s);
+  }, w = (s) => {
+    const x = s.target.value;
+    b(x), /^#[0-9A-F]{6}$/i.test(x) && l(x);
+  }, E = (s) => {
+    v(Number(s.target.value));
+  }, k = u ? ((s, x) => {
+    const _ = parseInt(s.slice(1, 3), 16), A = parseInt(s.slice(3, 5), 16), P = parseInt(s.slice(5, 7), 16);
+    return `rgba(${_}, ${A}, ${P}, ${x / 100})`;
+  })(a, p) : a;
+  return /* @__PURE__ */ r.jsxs("div", { className: h("bg-white dark:bg-gray-900 rounded-lg p-4", g), children: [
+    /* @__PURE__ */ r.jsx("div", { className: "mb-4", children: /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          className: "w-16 h-16 rounded-lg border-2 border-gray-200 dark:border-gray-700 shadow-sm",
+          style: { backgroundColor: k }
+        }
+      ),
+      /* @__PURE__ */ r.jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ r.jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "Selected Color" }),
+        /* @__PURE__ */ r.jsxs("p", { className: "text-xs text-gray-600 dark:text-gray-400 mt-1 font-mono", children: [
+          a,
+          u && ` (${p}%)`
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ r.jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ r.jsx("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Preset Colors" }),
+      /* @__PURE__ */ r.jsx("div", { className: "grid grid-cols-6 gap-2", children: o.map((s) => /* @__PURE__ */ r.jsx(
+        "button",
+        {
+          onClick: () => y(s),
+          className: h(
+            "w-full aspect-square rounded-md border-2 transition-all hover:scale-110",
+            s === a ? "border-blue-500 dark:border-blue-400 ring-2 ring-blue-200 dark:ring-blue-800" : "border-gray-200 dark:border-gray-700"
+          ),
+          style: { backgroundColor: s },
+          "aria-label": `Select color ${s}`
+        },
+        s
+      )) })
+    ] }),
+    c && /* @__PURE__ */ r.jsxs("div", { className: "mb-4", children: [
+      /* @__PURE__ */ r.jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Custom Color (Hex)" }),
+      /* @__PURE__ */ r.jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ r.jsx(
+          "input",
+          {
+            type: "text",
+            value: m,
+            onChange: w,
+            placeholder: "#000000",
+            className: "flex-1 px-3 py-2 text-sm font-mono bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
+          }
+        ),
+        /* @__PURE__ */ r.jsx(
+          "input",
+          {
+            type: "color",
+            value: a,
+            onChange: (s) => y(s.target.value),
+            className: "w-12 h-10 rounded-md cursor-pointer"
+          }
+        )
+      ] })
+    ] }),
+    u && /* @__PURE__ */ r.jsxs("div", { children: [
+      /* @__PURE__ */ r.jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: [
+        "Opacity: ",
+        p,
+        "%"
+      ] }),
+      /* @__PURE__ */ r.jsx(
+        "input",
+        {
+          type: "range",
+          min: "0",
+          max: "100",
+          value: p,
+          onChange: E,
+          className: "w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer"
+        }
+      )
+    ] })
+  ] });
+}, fe = ({
+  colors: a,
+  selectedColor: l,
+  onColorSelect: o,
+  size: c = "md",
+  showNames: u = !1,
+  showCopy: g = !1,
+  className: m
+}) => {
+  const [b, p] = D(null), v = {
+    sm: "w-8 h-8",
+    md: "w-12 h-12",
+    lg: "w-16 h-16"
+  }, y = () => a.map(
+    (n) => typeof n == "string" ? { hex: n } : n
+  ), w = async (n, k) => {
+    k.stopPropagation(), await navigator.clipboard.writeText(n), p(n), setTimeout(() => p(null), 2e3);
+  }, E = y();
+  return /* @__PURE__ */ r.jsx("div", { className: h("flex flex-wrap gap-3", m), children: E.map((n, k) => {
+    const s = l === n.hex, x = b === n.hex;
+    return /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+      /* @__PURE__ */ r.jsx(
+        "button",
+        {
+          onClick: () => o?.(n.hex),
+          className: h(
+            "rounded-lg transition-all relative group",
+            v[c],
+            s && "ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-900",
+            !s && "hover:scale-110"
+          ),
+          style: { backgroundColor: n.hex },
+          "aria-label": n.name || n.hex,
+          children: g && /* @__PURE__ */ r.jsx(
+            "div",
+            {
+              className: "absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/50 rounded-lg",
+              onClick: (_) => w(n.hex, _),
+              children: x ? /* @__PURE__ */ r.jsx(
+                "svg",
+                {
+                  className: "w-4 h-4 text-white",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ r.jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M5 13l4 4L19 7"
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ r.jsx(
+                "svg",
+                {
+                  className: "w-4 h-4 text-white",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  children: /* @__PURE__ */ r.jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                    }
+                  )
+                }
+              )
+            }
+          )
+        }
+      ),
+      u && /* @__PURE__ */ r.jsxs("div", { className: "text-center", children: [
+        n.name && /* @__PURE__ */ r.jsx("p", { className: "text-xs font-medium text-gray-900 dark:text-white", children: n.name }),
+        /* @__PURE__ */ r.jsx("p", { className: "text-xs text-gray-600 dark:text-gray-400 font-mono", children: n.hex })
+      ] })
+    ] }, k);
+  }) });
+}, ge = ({
+  children: a,
+  variant: l = "blue-purple",
+  gradientClasses: o,
+  size: c = "md",
+  rounded: u = "2xl",
+  bordered: g = !1,
+  borderClasses: m = "border border-white/20",
+  className: b
+}) => {
+  const p = {
+    "blue-purple": "bg-gradient-to-r from-blue-600 to-purple-600 text-white",
+    "green-blue": "bg-gradient-to-r from-green-600 to-blue-600 text-white",
+    "orange-red": "bg-gradient-to-r from-orange-600 to-red-600 text-white",
+    gray: "bg-gradient-to-r from-gray-600 to-gray-800 dark:from-gray-700 dark:to-gray-900 text-white",
+    light: "bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 text-gray-900 dark:text-gray-100",
+    custom: o || "bg-gradient-to-r from-blue-600 to-purple-600 text-white"
+  }, v = {
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8"
+  }, y = {
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    "2xl": "rounded-2xl"
+  };
+  return /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      className: h(
+        p[l],
+        v[c],
+        y[u],
+        g && m,
+        b
+      ),
+      children: a
+    }
+  );
+}, me = ({
+  className: a,
+  children: l,
+  disabled: o = !1,
+  onClick: c
+}) => /* @__PURE__ */ r.jsx(
+  "div",
+  {
+    className: h(
+      "p-4 rounded-lg border transition-colors",
+      "bg-white dark:bg-gray-900",
+      "border-gray-200 dark:border-gray-700",
+      "text-gray-900 dark:text-white",
+      o && "opacity-50 cursor-not-allowed",
+      "hover:bg-gray-50 dark:hover:bg-gray-800",
+      a
+    ),
+    onClick: o ? void 0 : c,
+    role: "region",
+    "aria-label": "UneumorphicUbutton",
+    children: l || "UneumorphicUbutton Component"
+  }
+), be = ({
+  className: a,
+  children: l,
+  disabled: o = !1,
+  onClick: c
+}) => /* @__PURE__ */ r.jsx(
+  "div",
+  {
+    className: h(
+      "p-4 rounded-lg border transition-colors",
+      "bg-white dark:bg-gray-900",
+      "border-gray-200 dark:border-gray-700",
+      "text-gray-900 dark:text-white",
+      o && "opacity-50 cursor-not-allowed",
+      "hover:bg-gray-50 dark:hover:bg-gray-800",
+      a
+    ),
+    onClick: o ? void 0 : c,
+    role: "region",
+    "aria-label": "UthemeUswitcher",
+    children: l || "UthemeUswitcher Component"
+  }
+);
+export {
+  de as ColorPicker,
+  ue as ColorPickerAdvanced,
+  fe as ColorSwatch,
+  ge as GradientBanner,
+  ie as UauroraUbackground,
+  ce as UbadgeUdesigner,
+  me as UneumorphicUbutton,
+  be as UthemeUswitcher
+};
+//# sourceMappingURL=index.esm.js.map