ergo-ui 0.1.0

package/dist/ergo-ui.js

@@ -0,0 +1,1219 @@
+import { jsxs as p, jsx as l } from "react/jsx-runtime";
+import * as x from "react";
+import { forwardRef as y, useRef as M, useId as z, useEffect as O } from "react";
+function E(r) {
+  var a, e, t = "";
+  if (typeof r == "string" || typeof r == "number") t += r;
+  else if (typeof r == "object") if (Array.isArray(r)) {
+    var s = r.length;
+    for (a = 0; a < s; a++) r[a] && (e = E(r[a])) && (t && (t += " "), t += e);
+  } else for (e in r) r[e] && (t && (t += " "), t += e);
+  return t;
+}
+function B() {
+  for (var r, a, e = 0, t = "", s = arguments.length; e < s; e++) (r = arguments[e]) && (a = E(r)) && (t && (t += " "), t += a);
+  return t;
+}
+const A = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, _ = B, u = (r, a) => (e) => {
+  var t;
+  if ((a == null ? void 0 : a.variants) == null) return _(r, e == null ? void 0 : e.class, e == null ? void 0 : e.className);
+  const { variants: s, defaultVariants: n } = a, o = Object.keys(s).map((i) => {
+    const f = e == null ? void 0 : e[i], d = n == null ? void 0 : n[i];
+    if (f === null) return null;
+    const b = A(f) || A(d);
+    return s[i][b];
+  }), m = e && Object.entries(e).reduce((i, f) => {
+    let [d, b] = f;
+    return b === void 0 || (i[d] = b), i;
+  }, {}), c = a == null || (t = a.compoundVariants) === null || t === void 0 ? void 0 : t.reduce((i, f) => {
+    let { class: d, className: b, ...h } = f;
+    return Object.entries(h).every((v) => {
+      let [g, N] = v;
+      return Array.isArray(N) ? N.includes({
+        ...n,
+        ...m
+      }[g]) : {
+        ...n,
+        ...m
+      }[g] === N;
+    }) ? [
+      ...i,
+      d,
+      b
+    ] : i;
+  }, []);
+  return _(r, o, c, e == null ? void 0 : e.class, e == null ? void 0 : e.className);
+};
+function D({
+  title: r,
+  titleId: a,
+  ...e
+}, t) {
+  return /* @__PURE__ */ x.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: t,
+    "aria-labelledby": a
+  }, e), r ? /* @__PURE__ */ x.createElement("title", {
+    id: a
+  }, r) : null, /* @__PURE__ */ x.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "m19.5 8.25-7.5 7.5-7.5-7.5"
+  }));
+}
+const $ = /* @__PURE__ */ x.forwardRef(D);
+function W({
+  title: r,
+  titleId: a,
+  ...e
+}, t) {
+  return /* @__PURE__ */ x.createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon",
+    ref: t,
+    "aria-labelledby": a
+  }, e), r ? /* @__PURE__ */ x.createElement("title", {
+    id: a
+  }, r) : null, /* @__PURE__ */ x.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M6 18 18 6M6 6l12 12"
+  }));
+}
+const X = /* @__PURE__ */ x.forwardRef(W), U = u("w-full bg-gray-500 text-white overflow-hidden", {
+  variants: {
+    variant: {
+      primary: "bg-emerald-500",
+      secondary: "bg-violet-700",
+      tertiary: "bg-blue-500"
+    },
+    sharp: {
+      true: "rounded-none",
+      false: "rounded-lg border"
+    }
+  },
+  compoundVariants: [
+    { sharp: !1, variant: "primary", className: "border-emerald-500" },
+    { sharp: !1, variant: "secondary", className: "border-violet-700" },
+    { sharp: !1, variant: "tertiary", className: "border-blue-500" }
+  ],
+  defaultVariants: {
+    sharp: !1,
+    variant: "primary"
+  }
+}), F = u(
+  "w-full flex list-none cursor-pointer select-none items-center justify-between px-4 py-3 font-semibold [&::-webkit-details-marker]:hidden",
+  {
+    variants: {
+      variant: {
+        primary: "bg-emerald-500",
+        secondary: "bg-violet-700",
+        tertiary: "bg-blue-500"
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+), G = u(
+  "border-l-4 px-4 pb-4 pt-3 text-gray-300 bg-gray-500",
+  {
+    variants: {
+      variant: {
+        primary: "border-l-emerald-500",
+        secondary: "border-l-violet-700",
+        tertiary: "border-l-blue-500"
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+), K = u("block p-px", {
+  variants: {
+    variant: {
+      primary: "bg-emerald-500",
+      secondary: "bg-violet-700",
+      tertiary: "bg-blue-500"
+    }
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+}), C = "polygon(22px 0%, 100% 0%, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0% 100%, 0% 22px)", Y = y(
+  ({ className: r, sharp: a, variant: e, title: t, children: s, defaultOpen: n, customColour: o, ...m }, c) => {
+    const i = /* @__PURE__ */ p(
+      "details",
+      {
+        ref: c,
+        open: n,
+        className: `group ${U({ sharp: a, variant: e, className: r })}`,
+        style: a ? { clipPath: C } : { borderColor: o },
+        ...m,
+        children: [
+          /* @__PURE__ */ p("summary", { className: F({ variant: e }), style: { backgroundColor: o }, children: [
+            /* @__PURE__ */ l("span", { children: t }),
+            /* @__PURE__ */ l($, { "aria-hidden": "true", className: "h-5 w-5 flex-shrink-0 transition-transform duration-200 group-open:rotate-180" })
+          ] }),
+          /* @__PURE__ */ l("div", { className: G({ variant: e }), style: { borderLeftColor: o }, children: s })
+        ]
+      }
+    );
+    return a ? /* @__PURE__ */ l(
+      "div",
+      {
+        className: K({ variant: e }),
+        style: { backgroundColor: o, clipPath: C },
+        children: i
+      }
+    ) : i;
+  }
+);
+Y.displayName = "Accordion";
+const q = u("flex justify-center items-center p-3", {
+  variants: {
+    variant: {
+      complete: "bg-emerald-500",
+      info: "bg-blue-500",
+      secondary: "bg-violet-700",
+      danger: "bg-red-500"
+    },
+    sharp: {
+      true: "",
+      false: "rounded-l-2xl"
+    }
+  },
+  defaultVariants: { variant: "complete", sharp: !1 }
+}), J = u("px-4 py-2", {
+  variants: {
+    variant: {
+      complete: "bg-emerald-500",
+      info: "bg-blue-500",
+      secondary: "bg-violet-700",
+      danger: "bg-red-500"
+    },
+    sharp: {
+      true: "",
+      false: "rounded-tr-2xl"
+    }
+  },
+  defaultVariants: { variant: "complete", sharp: !1 }
+}), Q = u("bg-gray-500 flex-1", {
+  variants: {
+    sharp: {
+      true: "",
+      false: "rounded-r-2xl"
+    }
+  },
+  defaultVariants: { sharp: !1 }
+}), Z = "polygon(20px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 20px)";
+function Me({
+  variant: r,
+  sharp: a,
+  alertIcon: e,
+  headingText: t,
+  bodyText: s,
+  customColour: n
+}) {
+  const o = n ? { backgroundColor: n } : void 0;
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      role: "alert",
+      className: "flex max-w-[600px]",
+      style: a ? { clipPath: Z } : void 0,
+      children: [
+        /* @__PURE__ */ l("div", { className: q({ variant: r, sharp: a }), style: o, children: /* @__PURE__ */ l("span", { "aria-hidden": "true", children: e }) }),
+        /* @__PURE__ */ p("div", { className: Q({ sharp: a }), children: [
+          /* @__PURE__ */ l("div", { className: J({ variant: r, sharp: a }), style: o, children: /* @__PURE__ */ l("span", { className: "text-white text-lg font-semibold", children: t }) }),
+          /* @__PURE__ */ l("div", { className: "p-4", children: /* @__PURE__ */ l("p", { className: "text-slate-200", children: s }) })
+        ] })
+      ]
+    }
+  );
+}
+const ee = u("relative inline-block shrink-0", {
+  variants: {
+    sharp: {
+      true: "rounded-none",
+      false: "rounded-full"
+    }
+  },
+  defaultVariants: {
+    sharp: !1
+  }
+}), ae = u("w-full h-full object-cover", {
+  variants: {
+    sharp: {
+      true: "rounded-none",
+      false: "rounded-full"
+    }
+  },
+  defaultVariants: {
+    sharp: !1
+  }
+}), re = u("absolute  block border border-gray-900", {
+  variants: {
+    status: {
+      online: "bg-emerald-500",
+      away: "bg-amber-400",
+      offline: "bg-red-500"
+    },
+    sharp: {
+      true: "rounded-none top-[-5px] right-[-5px]",
+      false: "rounded-full top-0 right-0"
+    }
+  },
+  defaultVariants: {
+    sharp: !1
+  }
+}), te = y(
+  ({ sharp: r, status: a, size: e = 48, src: t, alt: s, className: n, customColour: o, ...m }, c) => {
+    const i = Math.max(8, Math.round(e * 0.22));
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        className: ee({ sharp: r, className: n }),
+        style: { width: e, height: e },
+        children: [
+          /* @__PURE__ */ l(
+            "img",
+            {
+              ref: c,
+              src: t,
+              alt: s ?? "avatar",
+              className: ae({ sharp: r }),
+              style: { width: e, height: e },
+              ...m
+            }
+          ),
+          a && /* @__PURE__ */ l(
+            "span",
+            {
+              role: "img",
+              "aria-label": a,
+              className: re({ status: a, sharp: r }),
+              style: { width: i, height: i, ...o ? { backgroundColor: o } : {} }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+te.displayName = "Avatar";
+const le = u(
+  "inline-flex items-center justify-center font-semibold",
+  {
+    variants: {
+      variant: {
+        primary: "bg-emerald-500 text-white",
+        secondary: "bg-violet-700 text-white",
+        tertiary: "bg-blue-500 text-white",
+        danger: "bg-red-500 text-white"
+      },
+      size: {
+        sm: "px-2 py-0.5 text-xs",
+        md: "px-2.5 py-1 text-sm",
+        lg: "px-3 py-1.5 text-base"
+      },
+      sharp: {
+        true: "rounded-none",
+        false: "rounded-full"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      sharp: !1
+    }
+  }
+), ne = "polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px)", se = y(
+  ({ className: r, variant: a, size: e, sharp: t, children: s, style: n, customColour: o, ...m }, c) => {
+    const i = o ? { backgroundColor: o } : void 0;
+    return /* @__PURE__ */ l(
+      "span",
+      {
+        ref: c,
+        className: le({ variant: a, size: e, sharp: t, className: r }),
+        style: t ? { clipPath: ne, ...i, ...n } : { ...i, ...n },
+        ...m,
+        children: s
+      }
+    );
+  }
+);
+se.displayName = "Badge";
+const ie = u(
+  `font-semibold transition-colors focus:outline-none focus-visible:outline-none
+   focus:ring-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center gap-2`,
+  {
+    variants: {
+      variant: {
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        ghost: "bg-transparent text-slate-200 hover:bg-gray-600",
+        danger: ""
+      },
+      size: {
+        sm: "px-3 py-1.5 text-sm",
+        md: "px-4 py-2 text-base",
+        lg: "px-6 py-3 text-lg"
+      },
+      sharp: {
+        true: "rounded-none active:opacity-75",
+        false: "rounded-lg"
+      },
+      outline: {
+        true: "border",
+        false: "border-transparent"
+      }
+    },
+    compoundVariants: [
+      // Non-sharp outline: transparent bg
+      { outline: !0, sharp: !1, className: "bg-transparent" },
+      // Sharp outline: dark bg so only the wrapper's 1px edge shows as the border
+      {
+        outline: !0,
+        sharp: !0,
+        className: "bg-gray-950 border-transparent hover:bg-gray-800"
+      },
+      // Per-variant outline Colors
+      {
+        outline: !0,
+        variant: "primary",
+        className: "text-emerald-500 border-emerald-500 hover:border-emerald-500/75"
+      },
+      {
+        outline: !0,
+        variant: "secondary",
+        className: "text-violet-700 border-violet-700 hover:border-violet-700/75"
+      },
+      {
+        outline: !0,
+        variant: "tertiary",
+        className: "text-blue-500 border-blue-500 hover:border-blue-500/75"
+      },
+      {
+        outline: !0,
+        variant: "danger",
+        className: "text-red-500 border-red-500 hover:border-red-500/75"
+      },
+      // Filled variants
+      {
+        outline: !1,
+        variant: "primary",
+        className: "bg-emerald-500 text-white hover:bg-emerald-600"
+      },
+      {
+        outline: !1,
+        variant: "secondary",
+        className: "bg-violet-700 text-white hover:bg-violet-800"
+      },
+      {
+        outline: !1,
+        variant: "tertiary",
+        className: "bg-blue-500 text-white hover:bg-blue-600"
+      },
+      {
+        outline: !1,
+        variant: "danger",
+        className: "bg-red-500 text-white hover:bg-red-600"
+      }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      sharp: !1,
+      outline: !1
+    }
+  }
+), oe = u("inline-block p-px", {
+  variants: {
+    variant: {
+      primary: "bg-emerald-500",
+      secondary: "bg-violet-700",
+      tertiary: "bg-blue-500",
+      ghost: "bg-slate-400",
+      danger: "bg-red-500"
+    }
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+}), R = "polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px)", de = y(
+  ({
+    className: r,
+    variant: a,
+    size: e,
+    sharp: t,
+    outline: s,
+    icon: n,
+    iconPosition: o = "left",
+    children: m,
+    style: c,
+    customColor: i,
+    ...f
+  }, d) => {
+    const b = i ? { backgroundColor: i } : void 0, h = i ? { borderColor: i, color: i } : void 0, v = /* @__PURE__ */ p(
+      "button",
+      {
+        ref: d,
+        className: ie({ variant: a, size: e, sharp: t, outline: s, className: r }),
+        style: t ? {
+          clipPath: R,
+          ...s ? h : b,
+          ...c
+        } : { ...s ? h : b, ...c },
+        ...f,
+        children: [
+          n && o === "left" && /* @__PURE__ */ l("span", { className: "inline-flex", "aria-hidden": "true", children: n }),
+          m,
+          n && o === "right" && /* @__PURE__ */ l("span", { className: "inline-flex", "aria-hidden": "true", children: n })
+        ]
+      }
+    );
+    return t && s ? /* @__PURE__ */ l(
+      "div",
+      {
+        className: oe({ variant: a }),
+        style: {
+          clipPath: R,
+          ...i ? { backgroundColor: i } : {}
+        },
+        children: v
+      }
+    ) : v;
+  }
+);
+de.displayName = "Button";
+const ce = u(
+  `w-full py-2 bg-white dark:bg-gray-900 border text-gray-800 dark:text-gray-400
+  transition-colors placeholder:text-gray-500
+  focus:outline-none disabled:cursor-not-allowed disabled:opacity-50`,
+  {
+    variants: {
+      variant: {
+        primary: "",
+        secondary: "",
+        tertiary: ""
+      },
+      error: {
+        true: "border-red-500",
+        false: ""
+      },
+      sharp: {
+        true: "rounded-none",
+        false: "rounded-lg"
+      },
+      iconLeft: {
+        true: "pl-10 pr-4",
+        false: "pr-10 pl-4"
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "primary",
+        error: !1,
+        className: "border-emerald-700 focus:ring-2 focus:ring-emerald-500"
+      },
+      {
+        variant: "secondary",
+        error: !1,
+        className: "border-violet-700 focus:ring-2 focus:ring-violet-500"
+      },
+      {
+        variant: "tertiary",
+        error: !1,
+        className: "border-blue-700 focus:ring-2 focus:ring-blue-500"
+      }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      error: !1,
+      sharp: !1,
+      iconLeft: !1
+    }
+  }
+), T = "polygon(0% 0%, 100% 0%, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0% 100%)", ue = u("inline-block p-px", {
+  variants: {
+    variant: {
+      primary: "",
+      secondary: "",
+      tertiary: ""
+    },
+    error: {
+      true: "bg-red-500",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "primary",
+      error: !1,
+      className: "bg-emerald-700 focus-within:bg-emerald-500"
+    },
+    {
+      variant: "secondary",
+      error: !1,
+      className: "bg-violet-700 focus-within:bg-violet-500"
+    },
+    {
+      variant: "tertiary",
+      error: !1,
+      className: "bg-blue-700 focus-within:bg-blue-500"
+    }
+  ],
+  defaultVariants: {
+    variant: "primary",
+    error: !1
+  }
+}), me = y(
+  ({
+    className: r,
+    variant: a,
+    error: e,
+    sharp: t,
+    iconLeft: s,
+    icon: n,
+    placeholder: o,
+    style: m,
+    label: c,
+    ...i
+  }, f) => {
+    const d = n != null, b = /* @__PURE__ */ l(
+      "input",
+      {
+        ref: f,
+        placeholder: o,
+        "aria-invalid": e === !0 ? !0 : void 0,
+        className: ce({
+          variant: a,
+          error: e,
+          sharp: t,
+          iconLeft: d ? s : void 0,
+          className: r
+        }),
+        style: t ? { clipPath: T, ...m } : m,
+        ...i
+      }
+    ), v = d ? /* @__PURE__ */ p("div", { className: "relative flex items-center", children: [
+      b,
+      d && /* @__PURE__ */ l(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: `absolute top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none ${s ? "left-3" : "right-3"}`,
+          children: n
+        }
+      )
+    ] }) : b;
+    return t ? /* @__PURE__ */ p("label", { className: "flex flex-col gap-0", children: [
+      /* @__PURE__ */ l("span", { className: "text-gray-800 dark:text-gray-300", children: c }),
+      /* @__PURE__ */ l(
+        "div",
+        {
+          className: ue({ variant: a, error: e }),
+          style: { clipPath: T },
+          children: v
+        }
+      )
+    ] }) : /* @__PURE__ */ p("label", { children: [
+      /* @__PURE__ */ l("span", { className: "text-gray-800 dark:text-gray-300", children: c }),
+      v
+    ] });
+  }
+);
+me.displayName = "Input";
+const H = {
+  primary: "#10b981",
+  secondary: "#8b5cf6",
+  tertiary: "#3b82f6"
+}, pe = { sm: "h-1.5", md: "h-3", lg: "h-5" }, be = { sm: 64, md: 96, lg: 128 }, fe = y(
+  ({
+    className: r,
+    variant: a = "primary",
+    size: e = "md",
+    sharp: t = !1,
+    value: s,
+    type: n = "bar",
+    showLabel: o = !1,
+    customColour: m,
+    style: c,
+    ...i
+  }, f) => {
+    const d = Math.max(0, Math.min(100, s)), b = m ?? H[a ?? "primary"] ?? H.primary;
+    if (n === "circular") {
+      const g = be[e ?? "md"], N = Math.max(6, Math.round(g * 0.1)), k = (g - N) / 2, P = 2 * Math.PI * k, j = P * (1 - d / 100), w = g / 2;
+      return /* @__PURE__ */ p(
+        "div",
+        {
+          ref: f,
+          role: "progressbar",
+          "aria-valuenow": d,
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          className: `relative inline-flex items-center justify-center${r ? ` ${r}` : ""}`,
+          style: { width: g, height: g, ...c },
+          ...i,
+          children: [
+            /* @__PURE__ */ p(
+              "svg",
+              {
+                width: g,
+                height: g,
+                style: { transform: "rotate(-90deg)" },
+                children: [
+                  /* @__PURE__ */ l(
+                    "circle",
+                    {
+                      cx: w,
+                      cy: w,
+                      r: k,
+                      fill: "none",
+                      stroke: "#1f2937",
+                      strokeWidth: N
+                    }
+                  ),
+                  /* @__PURE__ */ l(
+                    "circle",
+                    {
+                      cx: w,
+                      cy: w,
+                      r: k,
+                      fill: "none",
+                      stroke: b,
+                      strokeWidth: N,
+                      strokeDasharray: P,
+                      strokeDashoffset: j,
+                      strokeLinecap: t ? "butt" : "round",
+                      style: { transition: "stroke-dashoffset 0.5s ease" }
+                    }
+                  )
+                ]
+              }
+            ),
+            o && /* @__PURE__ */ p(
+              "span",
+              {
+                className: "absolute text-gray-800 dark:text-gray-300 font-semibold tabular-nums",
+                style: { fontSize: Math.round(g * 0.2) },
+                children: [
+                  d,
+                  "%"
+                ]
+              }
+            )
+          ]
+        }
+      );
+    }
+    const h = pe[e ?? "md"], v = t ? "rounded-none" : "rounded-full";
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        ref: f,
+        className: `flex items-center gap-2${r ? ` ${r}` : ""}`,
+        style: c,
+        ...i,
+        children: [
+          /* @__PURE__ */ l(
+            "div",
+            {
+              role: "progressbar",
+              "aria-valuenow": d,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              className: `flex-1 overflow-hidden bg-gray-700 ${h} ${v}`,
+              children: /* @__PURE__ */ l(
+                "div",
+                {
+                  className: `h-full ${v} transition-all duration-500`,
+                  style: { width: `${d}%`, backgroundColor: b }
+                }
+              )
+            }
+          ),
+          o && /* @__PURE__ */ p("span", { className: "text-sm text-gray-800 dark:text-gray-300 tabular-nums min-w-[3ch] text-right", children: [
+            d,
+            "%"
+          ] })
+        ]
+      }
+    );
+  }
+);
+fe.displayName = "Progress";
+const ge = u(
+  `w-full pl-4 pr-10 py-2 text-base bg-white dark:bg-gray-900 border text-gray-800 dark:text-gray-400 appearance-none
+  transition-colors focus:outline-none disabled:cursor-not-allowed disabled:opacity-50`,
+  {
+    variants: {
+      error: {
+        true: "border-red-500",
+        false: "border-emerald-700 focus:ring-2 focus:ring-emerald-500"
+      },
+      sharp: {
+        true: "rounded-none",
+        false: "rounded-lg"
+      }
+    },
+    defaultVariants: {
+      error: !1,
+      sharp: !1
+    }
+  }
+), ye = u("inline-block p-px", {
+  variants: {
+    error: {
+      true: "bg-red-500",
+      false: "bg-emerald-700 focus-within:bg-emerald-500"
+    }
+  },
+  defaultVariants: {
+    error: !1
+  }
+}), V = "polygon(0% 0%, 100% 0%, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0% 100%)", he = y(
+  ({ className: r, error: a, sharp: e, label: t, customColour: s, style: n, children: o, ...m }, c) => {
+    const i = /* @__PURE__ */ p("div", { className: "relative", children: [
+      /* @__PURE__ */ l(
+        "select",
+        {
+          ref: c,
+          "aria-invalid": a === !0 ? !0 : void 0,
+          className: ge({ error: a, sharp: e, className: r }),
+          style: e ? { clipPath: V, ...n } : { borderColor: s, ...n },
+          ...m,
+          children: o
+        }
+      ),
+      /* @__PURE__ */ l("span", { "aria-hidden": "true", className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-500", children: /* @__PURE__ */ l($, { className: "w-4 h-4" }) })
+    ] });
+    return e ? /* @__PURE__ */ p("label", { className: "flex flex-col gap-0", children: [
+      /* @__PURE__ */ l("span", { className: "text-gray-800 dark:text-gray-300", children: t }),
+      /* @__PURE__ */ l(
+        "div",
+        {
+          className: ye({ error: a }),
+          style: s ? {
+            backgroundColor: s,
+            clipPath: V
+          } : { clipPath: V },
+          children: i
+        }
+      )
+    ] }) : /* @__PURE__ */ p("label", { className: "flex flex-col gap-0", children: [
+      /* @__PURE__ */ l("span", { className: "text-gray-800 dark:text-gray-300", children: t }),
+      i
+    ] });
+  }
+);
+he.displayName = "Select";
+const I = {
+  primary: "#10b981",
+  secondary: "#8b5cf6",
+  tertiary: "#3b82f6"
+}, ve = u(
+  `w-full h-2 appearance-none cursor-pointer
+   bg-gray-700
+   [&::-webkit-slider-thumb]:appearance-none
+   [&::-webkit-slider-thumb]:h-4
+   [&::-webkit-slider-thumb]:w-4
+   [&::-webkit-slider-thumb]:cursor-pointer
+   [&::-webkit-slider-thumb]:bg-[var(--slider-color)]
+   [&::-webkit-slider-thumb]:transition-transform
+   [&::-webkit-slider-thumb]:hover:scale-110
+   [&::-moz-range-thumb]:border-none
+   [&::-moz-range-thumb]:h-4
+   [&::-moz-range-thumb]:w-4
+   [&::-moz-range-thumb]:cursor-pointer
+   [&::-moz-range-thumb]:bg-[var(--slider-color)]
+   [&::-moz-range-progress]:bg-[var(--slider-color)]
+   [&::-moz-range-progress]:h-2
+   disabled:opacity-50 disabled:cursor-not-allowed`,
+  {
+    variants: {
+      variant: {
+        primary: "",
+        secondary: "",
+        tertiary: ""
+      },
+      sharp: {
+        true: "rounded-none [&::-webkit-slider-thumb]:rounded-none [&::-moz-range-thumb]:rounded-none",
+        false: "rounded-full [&::-webkit-slider-thumb]:rounded-full [&::-moz-range-thumb]:rounded-full"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      sharp: !1
+    }
+  }
+), xe = y(
+  ({ className: r, variant: a = "primary", sharp: e, label: t, customColour: s, style: n, ...o }, m) => {
+    const c = s ?? I[a ?? "primary"] ?? I.primary;
+    return /* @__PURE__ */ p("label", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ l("span", { className: "text-sm text-gray-800 dark:text-gray-300", children: t }),
+      /* @__PURE__ */ l(
+        "input",
+        {
+          ...o,
+          type: "range",
+          ref: m,
+          className: ve({ variant: a, sharp: e, className: r }),
+          style: {
+            "--slider-color": c,
+            accentColor: c,
+            ...n
+          }
+        }
+      )
+    ] });
+  }
+);
+xe.displayName = "Slider";
+const Ne = u(
+  `w-full px-4 py-2 bg-white dark:bg-gray-900 border text-gray-800 dark:text-gray-400 resize-none
+  transition-colors placeholder:text-gray-500
+  focus:outline-none disabled:cursor-not-allowed disabled:opacity-50`,
+  {
+    variants: {
+      variant: {
+        primary: "",
+        secondary: "",
+        tertiary: ""
+      },
+      error: {
+        true: "border-red-500",
+        false: ""
+      },
+      sharp: {
+        true: "rounded-none",
+        false: "rounded-lg"
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "primary",
+        error: !1,
+        className: "border-emerald-700 focus:ring-2 focus:ring-emerald-500"
+      },
+      {
+        variant: "secondary",
+        error: !1,
+        className: "border-violet-700 focus:ring-2 focus:ring-violet-500"
+      },
+      {
+        variant: "tertiary",
+        error: !1,
+        className: "border-blue-700 focus:ring-2 focus:ring-blue-500"
+      }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      error: !1,
+      sharp: !1
+    }
+  }
+), we = u("block p-px", {
+  variants: {
+    variant: {
+      primary: "",
+      secondary: "",
+      tertiary: ""
+    },
+    error: {
+      true: "bg-red-500",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "primary",
+      error: !1,
+      className: "bg-emerald-700 focus-within:bg-emerald-500"
+    },
+    {
+      variant: "secondary",
+      error: !1,
+      className: "bg-violet-700 focus-within:bg-violet-500"
+    },
+    {
+      variant: "tertiary",
+      error: !1,
+      className: "bg-blue-700 focus-within:bg-blue-500"
+    }
+  ],
+  defaultVariants: {
+    variant: "primary",
+    error: !1
+  }
+}), S = "polygon(0% 0%, 100% 0%, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0% 100%)", ke = y(
+  ({ className: r, variant: a, error: e, sharp: t, label: s, style: n, ...o }, m) => {
+    const c = /* @__PURE__ */ l(
+      "textarea",
+      {
+        ref: m,
+        rows: 4,
+        "aria-invalid": e === !0 ? !0 : void 0,
+        className: Ne({ variant: a, error: e, sharp: t, className: r }),
+        style: t ? { clipPath: S, ...n } : n,
+        ...o
+      }
+    );
+    return t ? /* @__PURE__ */ p("label", { className: "flex flex-col gap-0", children: [
+      /* @__PURE__ */ l("span", { className: "text-gray-800 dark:text-gray-300", children: s }),
+      /* @__PURE__ */ l(
+        "div",
+        {
+          className: we({ variant: a, error: e }),
+          style: { clipPath: S },
+          children: c
+        }
+      )
+    ] }) : /* @__PURE__ */ p("label", { className: "flex flex-col gap-0", children: [
+      /* @__PURE__ */ l("span", { className: "text-gray-800 dark:text-gray-300", children: s }),
+      c
+    ] });
+  }
+);
+ke.displayName = "TextArea";
+const Ve = u(
+  "group relative inline-flex w-11 shrink-0 bg-gray-500 p-0.5 shadow-inner outline-offset-2 transition-colors duration-200 ease-in-out has-[:focus-visible]:outline-2",
+  {
+    variants: {
+      variant: {
+        primary: "has-[:checked]:bg-emerald-500 outline-emerald-500",
+        secondary: "has-[:checked]:bg-violet-700 outline-violet-700",
+        tertiary: "has-[:checked]:bg-blue-500 outline-blue-500"
+      },
+      sharp: {
+        true: "rounded-none",
+        false: "rounded-full"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      sharp: !1
+    }
+  }
+), Pe = u(
+  "size-5 rounded-full bg-white shadow-sm ring-1 ring-gray-900/5 transition-transform duration-200 ease-in-out group-has-[:checked]:translate-x-5",
+  {
+    variants: {
+      sharp: {
+        true: "rounded-none",
+        false: "rounded-full"
+      }
+    },
+    defaultVariants: {
+      sharp: !1
+    }
+  }
+), Ae = y(
+  ({ variant: r, sharp: a, customColour: e, "aria-label": t, ...s }, n) => /* @__PURE__ */ p(
+    "div",
+    {
+      className: `${Ve({ variant: r, sharp: a })}${e ? " has-[:checked]:[background-color:var(--toggle-color)]" : ""}`,
+      style: e ? { "--toggle-color": e } : void 0,
+      children: [
+        /* @__PURE__ */ l("span", { "aria-hidden": "true", className: Pe({ sharp: a }) }),
+        /* @__PURE__ */ l(
+          "input",
+          {
+            ref: n,
+            name: "track",
+            type: "checkbox",
+            "aria-label": t ?? "Toggle",
+            className: "absolute inset-0 size-full appearance-none focus:outline-hidden",
+            ...s
+          }
+        )
+      ]
+    }
+  )
+);
+Ae.displayName = "Toggle";
+const _e = u("w-full text-white overflow-hidden", {
+  variants: {
+    variant: {
+      primary: "bg-emerald-500",
+      secondary: "bg-violet-700",
+      tertiary: "bg-blue-500"
+    },
+    sharp: {
+      true: "rounded-none",
+      false: "rounded-lg border"
+    }
+  },
+  compoundVariants: [
+    { sharp: !1, variant: "primary", className: "border-emerald-500" },
+    { sharp: !1, variant: "secondary", className: "border-violet-700" },
+    { sharp: !1, variant: "tertiary", className: "border-blue-500" }
+  ],
+  defaultVariants: {
+    sharp: !1,
+    variant: "primary"
+  }
+}), Ce = u("w-full px-4 py-3 font-semibold text-white", {
+  variants: {
+    variant: {
+      primary: "bg-emerald-500",
+      secondary: "bg-violet-700",
+      tertiary: "bg-blue-500"
+    }
+  }
+}), Re = u("border-l-4 px-4 py-4 text-slate-200 bg-gray-500", {
+  variants: {
+    variant: {
+      primary: "border-l-emerald-500",
+      secondary: "border-l-violet-700",
+      tertiary: "border-l-blue-500"
+    }
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+}), Te = u("block p-px", {
+  variants: {
+    variant: {
+      primary: "bg-emerald-500",
+      secondary: "bg-violet-700",
+      tertiary: "bg-blue-500"
+    }
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+}), L = "polygon(22px 0%, 100% 0%, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0% 100%, 0% 22px)", He = y(
+  ({ className: r, sharp: a, variant: e, title: t, children: s, customColour: n, ...o }, m) => {
+    const c = /* @__PURE__ */ p(
+      "div",
+      {
+        ref: m,
+        className: _e({ sharp: a, variant: e, className: r }),
+        style: a ? { clipPath: L } : { borderColor: n },
+        ...o,
+        children: [
+          /* @__PURE__ */ l("div", { className: Ce({ variant: e }), style: { backgroundColor: n }, children: /* @__PURE__ */ l("span", { className: "text-lg", children: t }) }),
+          /* @__PURE__ */ l("div", { className: Re({ variant: e }), style: { borderLeftColor: n }, children: s })
+        ]
+      }
+    );
+    return a ? /* @__PURE__ */ l(
+      "div",
+      {
+        className: Te({ variant: e }),
+        style: { backgroundColor: n, clipPath: L },
+        children: c
+      }
+    ) : c;
+  }
+);
+He.displayName = "Card";
+const Ie = u(
+  "flex items-center justify-between px-6 py-4 flex-shrink-0",
+  {
+    variants: {
+      variant: {
+        primary: "bg-emerald-500",
+        secondary: "bg-violet-700",
+        tertiary: "bg-blue-500"
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+), Se = u(
+  `open:flex open:flex-col p-0 border-none outline-none
+   bg-gray-500
+   w-full max-w-lg
+   shadow-2xl
+   backdrop:bg-black/60`,
+  {
+    variants: {
+      sharp: {
+        true: "rounded-none",
+        false: "rounded-xl overflow-hidden"
+      }
+    },
+    defaultVariants: {
+      sharp: !1
+    }
+  }
+), Le = "polygon(20px 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 20px)", Ee = ({
+  open: r,
+  onClose: a,
+  title: e,
+  children: t,
+  variant: s,
+  sharp: n,
+  customColour: o
+}) => {
+  const m = M(null), c = z();
+  O(() => {
+    const d = m.current;
+    d && (r && !d.open ? d.showModal() : !r && d.open && d.close());
+  }, [r]);
+  const i = (d) => {
+    var h;
+    const b = (h = m.current) == null ? void 0 : h.getBoundingClientRect();
+    b && (d.clientX < b.left || d.clientX > b.right || d.clientY < b.top || d.clientY > b.bottom) && a();
+  }, f = o ? { backgroundColor: o } : void 0;
+  return /* @__PURE__ */ l(
+    "dialog",
+    {
+      ref: m,
+      "aria-labelledby": c,
+      onClick: i,
+      onCancel: (d) => {
+        d.preventDefault(), a();
+      },
+      className: Se({ sharp: n }),
+      style: n ? { clipPath: Le } : void 0,
+      children: /* @__PURE__ */ p("div", { onClick: (d) => d.stopPropagation(), className: "flex flex-col", children: [
+        /* @__PURE__ */ p("header", { className: Ie({ variant: s }), style: f, children: [
+          /* @__PURE__ */ l("h2", { id: c, className: "text-white font-semibold", children: e }),
+          /* @__PURE__ */ l(
+            "button",
+            {
+              onClick: a,
+              className: "text-white/70 hover:text-white transition-colors ml-4 flex-shrink-0",
+              "aria-label": "Close modal",
+              children: /* @__PURE__ */ l(X, { className: "w-5 h-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ l("div", { className: "px-6 py-5 text-gray-300", children: t })
+      ] })
+    }
+  );
+};
+Ee.displayName = "Modal";
+export {
+  Y as Accordion,
+  Me as Alert,
+  te as Avatar,
+  se as Badge,
+  de as Button,
+  He as Card,
+  me as Input,
+  Ee as Modal,
+  fe as Progress,
+  he as Select,
+  xe as Slider,
+  ke as TextArea,
+  Ae as Toggle
+};