@dimasbaguspm/versaur 0.0.8 → 0.0.10

package/dist/skeleton-DwqjRsF-.js

@@ -0,0 +1,277 @@
+import { c as l, j as o, a as d } from "./index-DOdDlCoL.js";
+import * as m from "react";
+import u, { forwardRef as f } from "react";
+const p = l(
+  "inline-block border animate-spin rounded-full",
+  {
+    variants: {
+      size: {
+        sm: "w-4 h-4 border-2",
+        md: "w-6 h-6 border-2",
+        lg: "w-8 h-8 border-4"
+      },
+      color: {
+        primary: "border-coral border-t-transparent ",
+        secondary: "border-sage border-t-transparent",
+        tertiary: "border-mist border-t-transparent",
+        ghost: "border-slate border-t-transparent",
+        neutral: "border-neutral border-t-transparent",
+        success: "border-success border-t-transparent",
+        info: "border-info border-t-transparent",
+        warning: "border-warning border-t-transparent",
+        danger: "border-danger border-t-transparent"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "primary"
+    }
+  }
+), h = l("relative w-full h-1 overflow-hidden rounded", {
+  variants: {
+    color: {
+      primary: "bg-coral",
+      secondary: "bg-sage",
+      tertiary: "bg-mist",
+      ghost: "bg-slate",
+      neutral: "bg-neutral",
+      success: "bg-success",
+      info: "bg-info",
+      warning: "bg-warning",
+      danger: "bg-danger"
+    },
+    size: {
+      sm: "h-1",
+      md: "h-2",
+      lg: "h-3"
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md"
+  }
+}), w = (a) => {
+  switch (a) {
+    case "primary":
+      return "bg-coral";
+    case "secondary":
+      return "bg-sage";
+    case "tertiary":
+      return "bg-mist";
+    case "ghost":
+      return "bg-slate";
+    case "neutral":
+      return "bg-neutral";
+    case "success":
+      return "bg-success";
+    case "info":
+      return "bg-info";
+    case "warning":
+      return "bg-warning";
+    case "danger":
+      return "bg-danger";
+    default:
+      return "bg-coral";
+  }
+}, v = u.forwardRef(
+  ({
+    color: a = "primary",
+    size: e = "md",
+    ariaLabel: n = "Loading",
+    className: r,
+    ...s
+  }, t) => /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      ref: t,
+      role: "status",
+      "aria-label": n,
+      className: d(p({ color: a, size: e }), r),
+      ...s
+    }
+  )
+), y = u.forwardRef(
+  ({
+    color: a = "primary",
+    size: e = "md",
+    ariaLabel: n = "Loading",
+    className: r,
+    ...s
+  }, t) => /* @__PURE__ */ o.jsxs(
+    "div",
+    {
+      ref: t,
+      role: "progressbar",
+      "aria-label": n,
+      className: d(
+        h({ color: a, size: e }),
+        "bg-neutral/40 relative overflow-hidden",
+        r
+      ),
+      ...s,
+      children: [
+        /* @__PURE__ */ o.jsx(
+          "div",
+          {
+            className: d(
+              "absolute left-0 top-0 w-full h-full rounded bg-neutral/40 pointer-events-none"
+            ),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          "div",
+          {
+            className: d(
+              "absolute left-0 top-0 h-full w-1/3 animate-loading-bar rounded-full",
+              w(a)
+            ),
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  )
+), x = u.forwardRef(
+  ({
+    type: a = "spinner",
+    size: e = "md",
+    color: n = "primary",
+    ariaLabel: r = "Loading",
+    className: s,
+    ...t
+  }, i) => a === "bar" ? /* @__PURE__ */ o.jsx(
+    y,
+    {
+      ref: i,
+      color: n,
+      size: e,
+      ariaLabel: r,
+      className: s,
+      ...t
+    }
+  ) : /* @__PURE__ */ o.jsx(
+    v,
+    {
+      ref: i,
+      color: n,
+      size: e,
+      ariaLabel: r,
+      className: s,
+      ...t
+    }
+  )
+);
+x.displayName = "LoadingIndicator";
+const j = l(
+  "absolute left-0 top-0 h-full rounded transition-all duration-500",
+  {
+    variants: {
+      color: {
+        primary: "bg-primary",
+        secondary: "bg-secondary",
+        tertiary: "bg-tertiary",
+        ghost: "bg-ghost",
+        neutral: "bg-neutral",
+        success: "bg-success",
+        info: "bg-info",
+        warning: "bg-warning",
+        danger: "bg-danger"
+      },
+      indeterminate: {
+        true: "animate-progress-indicator-indeterminate w-full",
+        false: ""
+      }
+    },
+    compoundVariants: [],
+    defaultVariants: {
+      color: "primary",
+      indeterminate: !1
+    }
+  }
+), S = f(({ value: a, max: e = 100, color: n = "primary", className: r, ...s }, t) => {
+  const i = Math.max(0, Math.min(a, e));
+  return /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      ref: t,
+      role: "progressbar",
+      "aria-valuenow": i,
+      "aria-valuemin": 0,
+      "aria-valuemax": e,
+      className: d(
+        "relative h-0.5 w-full overflow-hidden bg-neutral-soft",
+        // thinner bar
+        r
+      ),
+      ...s,
+      children: /* @__PURE__ */ o.jsx(
+        "div",
+        {
+          className: j({ color: n, indeterminate: !1 }),
+          style: {
+            width: `${i / e * 100}%`,
+            transition: "width 0.4s cubic-bezier(0.4,0,0.2,1)"
+          }
+        }
+      )
+    }
+  );
+}), z = l("w-full overflow-hidden bg-neutral-200", {
+  variants: {
+    shape: {
+      rectangle: "rounded-none",
+      rounded: "rounded-md",
+      circle: "rounded-full",
+      square: "aspect-square rounded-md"
+    },
+    size: {
+      sm: "h-4",
+      md: "h-6",
+      lg: "h-8",
+      xl: "h-12"
+    }
+  },
+  defaultVariants: {
+    shape: "rounded",
+    size: "md"
+  }
+}), L = m.forwardRef(
+  function({ shape: e = "rounded", size: n = "md", height: r, className: s, style: t, ...i }, c) {
+    const g = ["sm", "md", "lg", "xl"].includes(n) ? n : "md", b = r ? {
+      ...t,
+      height: typeof r == "number" ? `${r}px` : r
+    } : t;
+    return /* @__PURE__ */ o.jsx(
+      "div",
+      {
+        ref: c,
+        role: "presentation",
+        className: d(
+          "relative",
+          z({ shape: e, size: g }),
+          s
+        ),
+        style: b,
+        "aria-hidden": "true",
+        ...i,
+        children: /* @__PURE__ */ o.jsx(
+          "span",
+          {
+            className: [
+              "absolute inset-0 block w-full h-full",
+              "animate-loading-bar",
+              "bg-gradient-to-r from-transparent via-white/60 to-transparent pointer-events-none"
+            ].join(" "),
+            "aria-hidden": "true"
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  x as L,
+  S as P,
+  L as S
+};

package/dist/styles.css

@@ -1,3 +1,4 @@
+
 @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
 @import 'tailwindcss';
 
@@ -102,10 +103,12 @@ Our palette follows these harmonious relationships:
     width: 30%;
   }
 }
+
 .animate-loading-bar {
   animation: loading-bar 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }
 
+
 @keyframes spin-perfect {
   100% {
     transform: rotate(360deg);
@@ -128,3 +131,4 @@ Our palette follows these harmonious relationships:
 .animate-fab-in {
   animation: fab-in 0.32s cubic-bezier(0.4, 0, 0.2, 1);
 }
+