@dimasbaguspm/versaur 0.0.0

package/dist/snackbar-CYias-fJ.js

@@ -0,0 +1,79 @@
+import { c as i, j as a } from "./index-DU1SCUkk.js";
+import { forwardRef as d } from "react";
+import { c as l } from "./cn-Ca4KprQ1.js";
+import { B as m } from "./button-icon-CWji4cBA.js";
+import { X as g } from "lucide-react";
+const u = i(
+  "flex items-center gap-2 px-4 py-2 rounded-sm w-fit max-w-sm relative bg-white shadow-sm",
+  {
+    variants: {
+      color: {
+        success: "text-success bg-success/5 border-l-4 border-success",
+        info: "text-info bg-info/5 border-l-4 border-info",
+        warning: "text-warning bg-warning/5 border-l-4 border-warning",
+        danger: "text-danger bg-danger/5 border-l-4 border-danger"
+      }
+    },
+    defaultVariants: {
+      color: "success"
+    }
+  }
+);
+function b(s) {
+  switch (s) {
+    case "info":
+      return "info-ghost";
+    case "warning":
+      return "warning-ghost";
+    case "danger":
+      return "danger-ghost";
+    case "success":
+    default:
+      return "success-ghost";
+  }
+}
+const x = ({
+  children: s,
+  ...r
+}) => /* @__PURE__ */ a.jsx(
+  "span",
+  {
+    className: "flex-1 truncate text-base font-medium",
+    "data-testid": "snackbar-text",
+    ...r,
+    children: s
+  }
+), f = ({
+  children: s,
+  ...r
+}) => /* @__PURE__ */ a.jsx("span", { className: "ml-2", "data-testid": "snackbar-action", ...r, children: s }), v = d(
+  ({ children: s, action: r, onClose: t, color: e, className: n, ...o }, c) => /* @__PURE__ */ a.jsxs(
+    "div",
+    {
+      ref: c,
+      role: "status",
+      "aria-live": "polite",
+      className: l(u({ color: e }), n),
+      ...o,
+      children: [
+        /* @__PURE__ */ a.jsx(x, { children: s }),
+        r && /* @__PURE__ */ a.jsx(f, { children: r }),
+        /* @__PURE__ */ a.jsx(
+          m,
+          {
+            variant: b(e),
+            size: "sm",
+            shape: "rounded",
+            "aria-label": "Close",
+            onClick: t,
+            className: "ml-2",
+            children: /* @__PURE__ */ a.jsx(g, { size: 16 })
+          }
+        )
+      ]
+    }
+  )
+);
+export {
+  v as S
+};

package/dist/styles.css

@@ -0,0 +1,115 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
+@import 'tailwindcss';
+
+/* Font Face Definitions */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: format('ttf');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Versaur Design System - Spenicle Color Palette */
+@theme {
+  /* Font Families */
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+
+  /* Core Colors */
+  --color-coral: #e07a5f;
+  --color-sage: #81b29a;
+  --color-mist: #84a5c0;
+  --color-slate: #3d405b;
+  --color-cream: #f4f1de;
+  --color-light-gray: #f8f9fa;
+
+  /* Semantic Colors */
+  --color-success: #6db285;
+  --color-info: #6b8fad;
+  --color-warning: #e08a47;
+  --color-danger: #e06650;
+
+  /* Background and Foreground */
+  --color-background: #ffffff; /* White */
+  --color-foreground: #2d3748; /* Darker Slate */
+
+  /* Button/Component Variants */
+  --color-primary: #e07a5f; /* Coral */
+  --color-secondary: #81b29a; /* Sage */
+  --color-tertiary: #84a5c0; /* Mist */
+  --color-ghost: #3d405b; /* Slate */
+  --color-neutral: #f8f9fa; /* Light Gray */
+
+  /* Utility Colors */
+  --color-border: #e0e0e0;
+  --color-accent: #84a5c0;
+}
+
+/* Apply Inter font to body */
+body {
+  font-family: var(--font-sans);
+}
+
+/* Field sizing utilities for textarea auto-resize */
+.field-sizing-content {
+  field-sizing: content;
+}
+
+.field-sizing-fixed {
+  field-sizing: fixed;
+}
+
+/* Color harmony principles documentation */
+/*
+Our palette follows these harmonious relationships:
+1. Professional Harmony: Colors work together for business applications
+2. Natural Temperature: Warm coral balanced with cool sage and mist
+3. Clear Hierarchy: Each color has a distinct purpose and usage
+4. Complementary Balance: Coral (warm) balanced with sage/mist (cool)
+*/
+
+/* Keyframes and utility classes for animations */
+@keyframes loading-bar {
+  0% {
+    left: -40%;
+    width: 30%;
+  }
+  50% {
+    left: 35%;
+    width: 40%;
+  }
+  100% {
+    left: 100%;
+    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);
+  }
+}
+.animate-spin-perfect {
+  animation: spin-perfect 0.8s linear infinite;
+}
+
+@keyframes fab-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.9) translateY(16px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+.animate-fab-in {
+  animation: fab-in 0.32s cubic-bezier(0.4, 0, 0.2, 1);
+}

package/dist/switch-input-C5s1lvYh.js

@@ -0,0 +1,186 @@
+import { c as f, j as r } from "./index-DU1SCUkk.js";
+import N, { useState as S, useId as C } from "react";
+import { c as t } from "./cn-Ca4KprQ1.js";
+const I = f(
+  "relative inline-flex items-center transition-colors duration-200",
+  {
+    variants: {
+      color: {
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        ghost: "",
+        neutral: "",
+        success: "",
+        info: "",
+        warning: "",
+        danger: ""
+      },
+      size: {
+        sm: "h-4 w-8",
+        md: "h-5 w-10",
+        lg: "h-6 w-12"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      },
+      checked: {
+        true: "",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "md",
+      disabled: !1,
+      checked: !1
+    },
+    compoundVariants: [
+      { checked: !0, color: "primary", class: "bg-[var(--color-primary)]" },
+      {
+        checked: !0,
+        color: "secondary",
+        class: "bg-[var(--color-secondary)]"
+      },
+      { checked: !0, color: "tertiary", class: "bg-[var(--color-tertiary)]" },
+      { checked: !0, color: "ghost", class: "bg-[var(--color-ghost)]" },
+      { checked: !0, color: "neutral", class: "bg-[var(--color-neutral)]" },
+      { checked: !0, color: "success", class: "bg-[var(--color-success)]" },
+      { checked: !0, color: "info", class: "bg-[var(--color-info)]" },
+      { checked: !0, color: "warning", class: "bg-[var(--color-warning)]" },
+      { checked: !0, color: "danger", class: "bg-[var(--color-danger)]" },
+      { checked: !1, class: "bg-white border border-slate-300" }
+    ]
+  }
+), V = f(
+  "absolute rounded-full transition-transform duration-200",
+  {
+    variants: {
+      size: {
+        sm: "h-3 w-3",
+        md: "h-4 w-4",
+        lg: "h-5 w-5"
+      },
+      checked: {
+        true: "translate-x-full bg-white left-1.5",
+        false: "bg-slate-300 left-0.5"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      checked: !1
+    }
+  }
+), z = ({
+  color: e = "primary",
+  size: s = "md",
+  disabled: a = !1,
+  className: c,
+  checked: o
+}) => /* @__PURE__ */ r.jsx(
+  "span",
+  {
+    className: t(
+      I({ color: e, size: s, disabled: a, checked: o }),
+      "rounded-full pointer-events-none",
+      c
+    ),
+    "aria-hidden": "true"
+  }
+), R = ({ size: e = "md", checked: s = !1 }) => /* @__PURE__ */ r.jsx("span", { className: t(V({ size: e, checked: s })), "aria-hidden": "true" }), T = ({ label: e, htmlFor: s, placement: a = "top", disabled: c = !1 }) => e ? /* @__PURE__ */ r.jsx(
+  "label",
+  {
+    htmlFor: s,
+    className: t(
+      "text-sm select-none font-medium text-foreground",
+      a === "inline" ? "ml-2 mb-0" : "mb-1",
+      c && "opacity-50 cursor-not-allowed"
+    ),
+    children: e
+  }
+) : null, _ = N.forwardRef(
+  ({
+    checked: e,
+    defaultChecked: s,
+    onCheckedChange: a,
+    color: c = "primary",
+    size: o = "md",
+    label: d,
+    labelPlacement: l = "top",
+    disabled: n = !1,
+    className: p,
+    id: g,
+    ariaLabel: k,
+    ...b
+  }, w) => {
+    const [x, y] = S(
+      s ?? !1
+    ), v = C(), h = g || v, u = typeof e == "boolean", i = u ? e : x, j = (m) => {
+      u || y(m.target.checked), a?.(m.target.checked);
+    };
+    return /* @__PURE__ */ r.jsxs(
+      "div",
+      {
+        className: t(
+          "flex flex-col",
+          l === "inline" && "flex-row items-center",
+          p
+        ),
+        children: [
+          /* @__PURE__ */ r.jsx(
+            T,
+            {
+              label: d,
+              htmlFor: h,
+              placement: l,
+              disabled: n
+            }
+          ),
+          /* @__PURE__ */ r.jsxs(
+            "span",
+            {
+              className: t(
+                "relative flex items-center",
+                l === "inline" && "ml-2"
+              ),
+              children: [
+                /* @__PURE__ */ r.jsx(
+                  "input",
+                  {
+                    ref: w,
+                    type: "checkbox",
+                    id: h,
+                    "aria-label": k || d,
+                    checked: i,
+                    disabled: n,
+                    onChange: j,
+                    className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10",
+                    ...b
+                  }
+                ),
+                /* @__PURE__ */ r.jsx(
+                  z,
+                  {
+                    color: c,
+                    size: o,
+                    disabled: n,
+                    checked: i
+                  }
+                ),
+                /* @__PURE__ */ r.jsx(R, { size: o, checked: i })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+_.displayName = "SwitchInput";
+export {
+  _ as S,
+  z as a,
+  R as b,
+  T as c
+};

package/dist/tabs-C8aRKfxS.js

@@ -0,0 +1,216 @@
+import { c as l, j as c } from "./index-DU1SCUkk.js";
+import { createContext as g, useContext as v, useState as x, useLayoutEffect as m, useRef as y } from "react";
+import { c as u } from "./cn-Ca4KprQ1.js";
+const b = g(null), f = () => {
+  const t = v(b);
+  if (!t)
+    throw new Error("useTabsContext must be used within a TabsProvider");
+  return t;
+}, h = l(
+  "inline-flex items-center justify-center transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none select-none px-4 py-2 text-base bg-transparent relative border-b-2 border-transparent",
+  {
+    variants: {
+      active: {
+        true: "font-medium",
+        false: "font-normal"
+      },
+      color: {
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        ghost: "",
+        neutral: ""
+      }
+    },
+    compoundVariants: [
+      // Primary
+      {
+        color: "primary",
+        active: !0,
+        class: "text-coral border-coral"
+      },
+      {
+        color: "primary",
+        active: !1,
+        class: "text-foreground hover:text-coral"
+      },
+      // Secondary
+      {
+        color: "secondary",
+        active: !0,
+        class: "text-sage border-sage"
+      },
+      {
+        color: "secondary",
+        active: !1,
+        class: "text-foreground hover:text-sage"
+      },
+      // Tertiary
+      {
+        color: "tertiary",
+        active: !0,
+        class: "text-mist border-mist"
+      },
+      {
+        color: "tertiary",
+        active: !1,
+        class: "text-foreground hover:text-mist"
+      },
+      // Ghost
+      {
+        color: "ghost",
+        active: !0,
+        class: "text-slate border-slate"
+      },
+      {
+        color: "ghost",
+        active: !1,
+        class: "text-foreground hover:text-slate"
+      },
+      // Neutral
+      {
+        color: "neutral",
+        active: !0,
+        class: "text-foreground border-light-gray"
+      },
+      {
+        color: "neutral",
+        active: !1,
+        class: "text-foreground hover:text-light-gray"
+      }
+    ],
+    defaultVariants: {
+      active: !1,
+      color: "primary"
+    }
+  }
+), p = l(
+  "flex flex-row w-full border-b border-neutral overflow-x-auto whitespace-nowrap",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+), T = l(
+  "absolute bottom-0 h-0.5 rounded transition-all duration-300",
+  {
+    variants: {
+      color: {
+        primary: "bg-coral",
+        secondary: "bg-sage",
+        tertiary: "bg-mist",
+        ghost: "bg-slate",
+        neutral: "bg-light-gray"
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  }
+), w = ({
+  value: t,
+  children: e,
+  className: r,
+  ...a
+}) => {
+  const { activeTab: s, setActiveTab: n, color: i } = f(), o = s === t;
+  return /* @__PURE__ */ c.jsx(
+    "button",
+    {
+      role: "tab",
+      id: `tabs-trigger-${t}`,
+      "aria-selected": o,
+      "aria-controls": `tabs-content-${t}`,
+      tabIndex: o ? 0 : -1,
+      className: u(
+        h({
+          active: o,
+          color: i
+        }),
+        r
+      ),
+      onClick: () => n(t),
+      type: "button",
+      ...a,
+      children: e
+    }
+  );
+}, j = ({
+  left: t,
+  width: e,
+  className: r,
+  ...a
+}) => {
+  const { color: s } = f();
+  return /* @__PURE__ */ c.jsx(
+    "div",
+    {
+      "aria-hidden": !0,
+      className: u(T({ color: s }), r),
+      style: {
+        left: t,
+        width: e,
+        pointerEvents: "none"
+      },
+      ...a
+    }
+  );
+};
+function V(t, e, r) {
+  const [a, s] = x({
+    left: 0,
+    width: 0
+  });
+  return m(() => {
+    if (!e.current) return;
+    const n = e.current.querySelector(
+      `#tabs-trigger-${t}`
+    );
+    if (n) {
+      const { offsetLeft: i, offsetWidth: o } = n;
+      s({ left: i, width: o }), n.scrollIntoView({
+        behavior: "smooth",
+        inline: "center",
+        block: "nearest"
+      });
+    }
+  }, [t, r, e]), a;
+}
+const C = ({
+  value: t,
+  onValueChange: e,
+  children: r,
+  className: a,
+  color: s = "primary",
+  ...n
+}) => {
+  const i = {
+    activeTab: t,
+    setActiveTab: e,
+    color: s
+  }, o = y(null), d = V(t, o, r);
+  return /* @__PURE__ */ c.jsx(b.Provider, { value: i, children: /* @__PURE__ */ c.jsxs(
+    "div",
+    {
+      role: "tablist",
+      className: u(p(), a),
+      ref: o,
+      style: { position: "relative" },
+      ...n,
+      children: [
+        r,
+        /* @__PURE__ */ c.jsx(
+          j,
+          {
+            left: d.left,
+            width: d.width
+          }
+        )
+      ]
+    }
+  ) });
+}, E = Object.assign(C, {
+  Trigger: w
+});
+export {
+  E as T
+};

package/dist/text-B7e-au41.js

@@ -0,0 +1,120 @@
+import { c as d, j as g } from "./index-DU1SCUkk.js";
+import { forwardRef as p } from "react";
+import { c as h } from "./cn-Ca4KprQ1.js";
+const u = d("", {
+  variants: {
+    color: {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      tertiary: "text-tertiary",
+      ghost: "text-ghost",
+      neutral: "text-ghost",
+      success: "text-success",
+      info: "text-info",
+      warning: "text-warning",
+      danger: "text-danger"
+    },
+    hasUnderline: {
+      true: "underline",
+      false: ""
+    },
+    isCapitalize: {
+      true: "capitalize",
+      false: ""
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify"
+    },
+    italic: {
+      true: "italic",
+      false: ""
+    },
+    clamp: {
+      1: "line-clamp-1",
+      2: "line-clamp-2",
+      3: "line-clamp-3",
+      4: "line-clamp-4",
+      5: "line-clamp-5",
+      none: ""
+    },
+    ellipsis: {
+      true: "truncate",
+      false: ""
+    },
+    as: {
+      h1: "font-bold text-4xl leading-loose",
+      h2: "font-semibold text-3xl leading-relaxed",
+      h3: "font-medium text-2xl leading-relaxed",
+      h4: "font-bold text-xl leading-normal",
+      h5: "font-semibold text-lg leading-normal",
+      h6: "font-medium text-base leading-normal",
+      p: "font-normal text-base leading-normal",
+      span: "font-normal text-base leading-normal",
+      label: "font-normal text-xs leading-normal"
+    }
+  },
+  defaultVariants: {
+    color: "neutral",
+    hasUnderline: !1,
+    isCapitalize: !1,
+    align: "left",
+    italic: !1,
+    clamp: "none",
+    ellipsis: !1,
+    as: "span"
+  }
+}), T = p(
+  ({
+    as: e = "span",
+    color: t = "ghost",
+    hasUnderline: a = !1,
+    isCapitalize: l = !1,
+    align: n = "left",
+    italic: s = !1,
+    clamp: i = "none",
+    ellipsis: r = !1,
+    className: o,
+    children: f,
+    ...x
+  }, c) => {
+    const m = [
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "p",
+      "span",
+      "label"
+    ].includes(e) ? e : "span";
+    return /* @__PURE__ */ g.jsx(
+      e,
+      {
+        ref: c,
+        className: h(
+          u({
+            color: t,
+            hasUnderline: a,
+            isCapitalize: l,
+            align: n,
+            italic: s,
+            clamp: i,
+            ellipsis: r,
+            // @ts-expect-error - `as` is not a valid variant
+            as: m
+          }),
+          o
+        ),
+        ...x,
+        children: f
+      }
+    );
+  }
+);
+export {
+  T
+};