@dimasbaguspm/versaur 0.0.8 → 0.0.9

package/dist/tile-BinjKW_i.js

@@ -0,0 +1,921 @@
+import { c as b, j as a, a as l } from "./index-DOdDlCoL.js";
+import * as u from "react";
+import { forwardRef as d, useState as v, useEffect as w, useCallback as y, useRef as S, createContext as V, useContext as T, useMemo as B } from "react";
+import { a as A } from "./calendar-DwRERSxq.js";
+import { X as I } from "lucide-react";
+const R = b(
+  "relative flex items-center gap-2 rounded-md p-2 text-sm transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        default: "",
+        outline: "border"
+      },
+      color: {
+        // Core colors
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        ghost: "",
+        neutral: "",
+        // Semantic colors
+        success: "",
+        info: "",
+        warning: "",
+        danger: ""
+      }
+    },
+    compoundVariants: [
+      // Default variant styles (soft backgrounds)
+      {
+        variant: "default",
+        color: "primary",
+        class: "bg-coral-soft text-coral border border-coral"
+      },
+      {
+        variant: "default",
+        color: "secondary",
+        class: "bg-sage-soft text-sage border border-sage"
+      },
+      {
+        variant: "default",
+        color: "tertiary",
+        class: "bg-mist-soft text-mist border border-mist"
+      },
+      {
+        variant: "default",
+        color: "ghost",
+        class: "bg-slate-soft text-slate border border-slate"
+      },
+      {
+        variant: "default",
+        color: "neutral",
+        class: "bg-border/50 text-foreground border border-border"
+      },
+      {
+        variant: "default",
+        color: "success",
+        class: "bg-success-soft text-success border border-success"
+      },
+      {
+        variant: "default",
+        color: "info",
+        class: "bg-info-soft text-info border border-info"
+      },
+      {
+        variant: "default",
+        color: "warning",
+        class: "bg-warning-soft text-warning border border-warning"
+      },
+      {
+        variant: "default",
+        color: "danger",
+        class: "bg-danger-soft text-danger border border-danger"
+      },
+      // Outline variant styles
+      {
+        variant: "outline",
+        color: "primary",
+        class: "bg-transparent text-coral border-coral"
+      },
+      {
+        variant: "outline",
+        color: "secondary",
+        class: "bg-transparent text-sage border-sage"
+      },
+      {
+        variant: "outline",
+        color: "tertiary",
+        class: "bg-transparent text-mist border-mist"
+      },
+      {
+        variant: "outline",
+        color: "ghost",
+        class: "bg-transparent text-slate border-slate"
+      },
+      {
+        variant: "outline",
+        color: "neutral",
+        class: "bg-transparent text-foreground border-border"
+      },
+      {
+        variant: "outline",
+        color: "success",
+        class: "bg-transparent text-success border-success"
+      },
+      {
+        variant: "outline",
+        color: "info",
+        class: "bg-transparent text-info border-info"
+      },
+      {
+        variant: "outline",
+        color: "warning",
+        class: "bg-transparent text-warning border-warning"
+      },
+      {
+        variant: "outline",
+        color: "danger",
+        class: "bg-transparent text-danger border-danger"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      color: "neutral"
+    }
+  }
+), k = b(
+  "flex-shrink-0 flex justify-center items-center ",
+  {
+    variants: {
+      size: {
+        sm: "w-4 h-4",
+        md: "w-5 h-5",
+        lg: "w-6 h-6"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), C = d(
+  ({ className: e, children: t, ...r }, s) => /* @__PURE__ */ a.jsx("div", { ref: s, className: l(k(), e), ...r, children: t })
+), O = d(
+  ({
+    variant: e = "default",
+    color: t = "neutral",
+    icon: r,
+    className: s,
+    children: o,
+    ...n
+  }, g) => /* @__PURE__ */ a.jsxs(
+    "div",
+    {
+      ref: g,
+      role: "alert",
+      className: l(R({ variant: e, color: t }), s),
+      ...n,
+      children: [
+        r && /* @__PURE__ */ a.jsx(C, { children: r }),
+        /* @__PURE__ */ a.jsx("div", { className: "flex-1", children: o })
+      ]
+    }
+  )
+), de = Object.assign(O, {
+  Icon: C
+}), q = b(
+  "inline-flex items-center justify-center font-medium text-white overflow-hidden transition-all duration-200 select-none relative",
+  {
+    variants: {
+      variant: {
+        // Core variants using Versaur color system
+        primary: "bg-coral-soft text-coral",
+        secondary: "bg-sage-soft text-sage",
+        tertiary: "bg-mist-soft text-mist",
+        ghost: "bg-slate-soft text-slate",
+        neutral: "bg-neutral-soft text-foreground border border-border",
+        // Semantic variants
+        success: "bg-success-soft text-success",
+        info: "bg-info-soft text-info",
+        warning: "bg-warning-soft text-warning",
+        danger: "bg-danger-soft text-danger"
+      },
+      size: {
+        xs: "h-6 w-6 text-xs",
+        sm: "h-8 w-8 text-xs",
+        md: "h-10 w-10 text-sm",
+        lg: "h-12 w-12 text-base",
+        xl: "h-16 w-16 text-xl"
+      },
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-none",
+        rounded: "rounded-md"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      shape: "circle"
+    }
+  }
+), F = b(
+  "absolute inset-0 h-full w-full object-cover"
+), L = d(
+  ({
+    variant: e = "primary",
+    size: t = "md",
+    shape: r = "circle",
+    className: s,
+    children: o,
+    ...n
+  }, g) => /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      ref: g,
+      className: l(q({ variant: e, size: t, shape: r }), s),
+      ...n,
+      children: o
+    }
+  )
+), M = d(
+  ({ src: e, alt: t, className: r, onError: s, ...o }, n) => {
+    const [g, i] = v(!1);
+    w(() => {
+      i(!1);
+    }, [e]);
+    const f = y(
+      (c) => {
+        i(!0), s?.(c);
+      },
+      [s]
+    );
+    return g ? null : /* @__PURE__ */ a.jsx(
+      "img",
+      {
+        ref: n,
+        src: e,
+        alt: t,
+        className: l(F(), r),
+        onError: f,
+        ...o
+      }
+    );
+  }
+), ue = Object.assign(L, {
+  /**
+   * AvatarImage sub-component for displaying images with fallback behavior
+   */
+  Image: M
+}), P = b(
+  "inline-flex items-center justify-center font-medium transition-all duration-200 select-none gap-1 min-h-[1.25rem]",
+  {
+    variants: {
+      variant: {
+        default: "",
+        outline: "border bg-transparent"
+      },
+      color: {
+        // Core colors
+        primary: "",
+        secondary: "",
+        tertiary: "",
+        ghost: "",
+        neutral: "",
+        // Semantic colors
+        success: "",
+        info: "",
+        warning: "",
+        danger: ""
+      },
+      shape: {
+        rounded: "rounded-full",
+        square: "rounded-md"
+      },
+      size: {
+        sm: "text-xs px-1 py-0.25 h-3",
+        md: "text-xs px-1.5 py-0.5 h-4",
+        lg: "text-sm px-2 py-1 h-6"
+      },
+      iconOnly: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Default variant color combinations - using light/soft backgrounds
+      {
+        variant: "default",
+        color: "primary",
+        className: "bg-coral-soft text-coral"
+      },
+      {
+        variant: "default",
+        color: "secondary",
+        className: "bg-sage-soft text-sage"
+      },
+      {
+        variant: "default",
+        color: "tertiary",
+        className: "bg-mist-soft text-mist"
+      },
+      {
+        variant: "default",
+        color: "ghost",
+        className: "bg-slate-soft text-slate"
+      },
+      {
+        variant: "default",
+        color: "neutral",
+        className: "bg-neutral text-foreground"
+      },
+      {
+        variant: "default",
+        color: "success",
+        className: "bg-success-soft text-success"
+      },
+      {
+        variant: "default",
+        color: "info",
+        className: "bg-info-soft text-info"
+      },
+      {
+        variant: "default",
+        color: "warning",
+        className: "bg-warning-soft text-warning"
+      },
+      {
+        variant: "default",
+        color: "danger",
+        className: "bg-danger-soft text-danger"
+      },
+      // Outline variant color combinations
+      {
+        variant: "outline",
+        color: "primary",
+        className: "border-coral text-coral"
+      },
+      {
+        variant: "outline",
+        color: "secondary",
+        className: "border-sage text-sage"
+      },
+      {
+        variant: "outline",
+        color: "tertiary",
+        className: "border-mist text-mist"
+      },
+      {
+        variant: "outline",
+        color: "ghost",
+        className: "border-slate text-slate"
+      },
+      {
+        variant: "outline",
+        color: "neutral",
+        className: "border-neutral text-foreground"
+      },
+      {
+        variant: "outline",
+        color: "success",
+        className: "border-success text-success"
+      },
+      {
+        variant: "outline",
+        color: "info",
+        className: "border-info text-info"
+      },
+      {
+        variant: "outline",
+        color: "warning",
+        className: "border-warning text-warning"
+      },
+      {
+        variant: "outline",
+        color: "danger",
+        className: "border-danger text-danger"
+      },
+      // Icon-only size adjustments
+      {
+        iconOnly: !0,
+        size: "sm",
+        className: "px-1 py-1 w-5 h-5"
+      },
+      {
+        iconOnly: !0,
+        size: "md",
+        className: "px-1.5 py-1.5 w-6 h-6"
+      },
+      {
+        iconOnly: !0,
+        size: "lg",
+        className: "px-2 py-2 w-7 h-7"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      color: "primary",
+      shape: "square",
+      size: "md",
+      iconOnly: !1
+    }
+  }
+), H = d(
+  ({
+    variant: e = "default",
+    shape: t = "square",
+    color: r = "primary",
+    size: s = "md",
+    iconLeft: o,
+    iconRight: n,
+    className: g,
+    children: i,
+    ...f
+  }, c) => {
+    const h = !(i != null && i !== "") && !!(o || n);
+    return /* @__PURE__ */ a.jsx(
+      "span",
+      {
+        ref: c,
+        className: l(
+          P({
+            variant: e,
+            color: r,
+            shape: t,
+            size: s,
+            iconOnly: h
+          }),
+          g
+        ),
+        ...f,
+        children: h ? (
+          // Icon-only mode: display only the icon
+          o || n
+        ) : (
+          // Normal mode: display icon(s) and text
+          /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+            o,
+            i,
+            n
+          ] })
+        )
+      }
+    );
+  }
+);
+H.displayName = "Badge";
+const E = (e) => /* @__PURE__ */ u.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("title", null, "Spenicle"), /* @__PURE__ */ u.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ u.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ u.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), $ = (e) => /* @__PURE__ */ u.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("title", null, "Spenicle"), /* @__PURE__ */ u.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ u.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ u.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), X = (e) => /* @__PURE__ */ u.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("title", null, "Spenicle"), /* @__PURE__ */ u.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ u.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ u.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), Y = b("", {
+  variants: {
+    size: {
+      xs: "h-6 w-6",
+      sm: "h-6 w-6",
+      md: "h-8 w-8",
+      lg: "h-10 w-10",
+      xl: "h-12 w-12"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), _ = d(
+  ({ shape: e = "square", size: t, ...r }, s) => {
+    const n = {
+      square: E,
+      rounded: $,
+      circle: X
+    }[e] || E;
+    return /* @__PURE__ */ a.jsx(
+      n,
+      {
+        ref: s,
+        ...r,
+        className: l("inline-block", Y({ size: t }))
+      }
+    );
+  }
+), fe = d(
+  ({ name: e = "spenicle", size: t = "md", shape: r, ...s }, o) => /* @__PURE__ */ a.jsx(
+    "span",
+    {
+      ref: o,
+      className: l("inline-flex items-center gap-2"),
+      ...s,
+      children: /* @__PURE__ */ a.jsx(_, { shape: r, size: t, "aria-hidden": "true" })
+    }
+  )
+), D = b(
+  [
+    "inline-flex items-center justify-center gap-2",
+    "rounded-lg",
+    "font-medium",
+    "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",
+    "shadow-lg",
+    "transition-transform",
+    "transition-shadow",
+    "will-change-transform,opacity,box-shadow",
+    "hover:scale-105",
+    "active:scale-95",
+    "focus-visible:shadow-xl",
+    "hover:shadow-xl",
+    "active:shadow-md"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        primary: "bg-coral text-white hover:bg-coral/90 focus-visible:ring-coral-soft focus-visible:ring-offset-white",
+        secondary: "bg-sage text-white hover:bg-sage/90 focus-visible:ring-sage-soft focus-visible:ring-offset-white",
+        tertiary: "bg-mist text-white hover:bg-mist/90 focus-visible:ring-mist-soft focus-visible:ring-offset-white",
+        ghost: "bg-white text-foreground hover:bg-slate-soft focus-visible:ring-slate-soft focus-visible:ring-offset-white",
+        neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-soft focus-visible:ring-offset-white",
+        "primary-outline": "border border-coral text-coral bg-white hover:bg-coral hover:text-white focus-visible:ring-coral-soft focus-visible:ring-offset-white",
+        "secondary-outline": "border border-sage text-sage bg-white hover:bg-sage hover:text-white focus-visible:ring-sage-soft focus-visible:ring-offset-white",
+        "tertiary-outline": "border border-mist text-mist bg-white hover:bg-mist hover:text-white focus-visible:ring-mist-soft focus-visible:ring-offset-white",
+        "ghost-outline": "border border-slate text-slate bg-white hover:bg-slate hover:text-white focus-visible:ring-slate-soft focus-visible:ring-offset-white",
+        "neutral-outline": "border border-neutral text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-soft focus-visible:ring-offset-white",
+        "primary-ghost": "text-coral bg-white hover:bg-coral-soft focus-visible:ring-coral-soft focus-visible:ring-offset-white",
+        "secondary-ghost": "text-sage bg-white hover:bg-sage-soft focus-visible:ring-sage-soft focus-visible:ring-offset-white",
+        "tertiary-ghost": "text-mist bg-white hover:bg-mist-soft focus-visible:ring-mist-soft focus-visible:ring-offset-white",
+        "neutral-ghost": "text-foreground bg-white hover:bg-neutral/70 focus-visible:ring-foreground-soft focus-visible:ring-offset-white",
+        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-soft focus-visible:ring-offset-white",
+        "success-outline": "border border-success text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-soft focus-visible:ring-offset-white",
+        "success-ghost": "text-success bg-white hover:bg-success-soft focus-visible:ring-success-soft focus-visible:ring-offset-white",
+        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-soft focus-visible:ring-offset-white",
+        "info-outline": "border border-info text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-soft focus-visible:ring-offset-white",
+        "info-ghost": "text-info bg-white hover:bg-info-soft focus-visible:ring-info-soft focus-visible:ring-offset-white",
+        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-soft focus-visible:ring-offset-white",
+        "warning-outline": "border border-warning text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-soft focus-visible:ring-offset-white",
+        "warning-ghost": "text-warning bg-white hover:bg-warning-soft focus-visible:ring-warning-soft focus-visible:ring-offset-white",
+        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white",
+        "danger-outline": "border border-danger text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-soft focus-visible:ring-offset-white",
+        "danger-ghost": "text-danger bg-white hover:bg-danger-soft focus-visible:ring-danger-soft focus-visible:ring-offset-white",
+        outline: "border border-border text-foreground bg-white hover:bg-accent-soft focus-visible:ring-accent-soft focus-visible:ring-offset-white",
+        destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white"
+      },
+      size: {
+        sm: "h-12 w-12 min-w-12 min-h-12 text-base",
+        md: "h-14 w-14 min-w-14 min-h-14 text-lg",
+        lg: "h-16 w-16 min-w-16 min-h-16 text-xl"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+function G(e, t = "1rem") {
+  const r = S(null), [s, o] = v({}), [n, g] = v(
+    "absolute bottom-4 right-4"
+  ), i = y(() => {
+    const c = r.current;
+    if (!c) return;
+    const m = c.getBoundingClientRect().height > window.innerHeight;
+    let h = {}, p = "";
+    m ? (h = {
+      position: "absolute",
+      bottom: t,
+      zIndex: 50,
+      transform: `translateY(${c.scrollTop}px)`
+    }, p = `absolute bottom-4 ${e}-4`) : (h = {
+      position: "absolute",
+      bottom: t,
+      zIndex: 50
+    }, p = `absolute bottom-4 ${e}-4`), o(h), g(p);
+  }, [e, t]);
+  return w(() => {
+    i();
+    const c = r.current;
+    return c && c.addEventListener("scroll", i), window.addEventListener("resize", i), () => {
+      c && c.removeEventListener("scroll", i), window.removeEventListener("resize", i);
+    };
+  }, [i]), w(() => {
+    r.current && i();
+  }, [e, t, i]), [y(
+    (c) => {
+      r.current = c, c && i();
+    },
+    [i]
+  ), s, n];
+}
+const be = d(
+  function({
+    className: t,
+    variant: r = "primary",
+    size: s = "md",
+    side: o = "right",
+    offset: n = "1rem",
+    ...g
+  }, i) {
+    const [f, c, x] = G(
+      o,
+      n
+    ), [m, h] = v(!1);
+    return w(() => {
+      h(!0);
+    }, []), /* @__PURE__ */ a.jsx("div", { ref: f, children: /* @__PURE__ */ a.jsx(
+      "button",
+      {
+        ref: i,
+        type: g.type || "button",
+        className: l(
+          D({ variant: r, size: s }),
+          x,
+          m && "animate-fab-in",
+          t
+        ),
+        style: c,
+        ...g
+      }
+    ) });
+  }
+), J = b(
+  "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 K(e) {
+  switch (e) {
+    case "info":
+      return "info-ghost";
+    case "warning":
+      return "warning-ghost";
+    case "danger":
+      return "danger-ghost";
+    case "success":
+    default:
+      return "success-ghost";
+  }
+}
+const Q = ({
+  children: e,
+  ...t
+}) => /* @__PURE__ */ a.jsx(
+  "span",
+  {
+    className: "flex-1 truncate text-base font-medium",
+    "data-testid": "snackbar-text",
+    ...t,
+    children: e
+  }
+), U = ({
+  children: e,
+  ...t
+}) => /* @__PURE__ */ a.jsx("span", { className: "ml-2", "data-testid": "snackbar-action", ...t, children: e }), he = d(
+  ({ children: e, action: t, onClose: r, color: s, className: o, ...n }, g) => /* @__PURE__ */ a.jsxs(
+    "div",
+    {
+      ref: g,
+      role: "status",
+      "aria-live": "polite",
+      className: l(J({ color: s }), o),
+      ...n,
+      children: [
+        /* @__PURE__ */ a.jsx(Q, { children: e }),
+        t && /* @__PURE__ */ a.jsx(U, { children: t }),
+        /* @__PURE__ */ a.jsx(
+          A,
+          {
+            as: I,
+            variant: K(s),
+            size: "sm",
+            shape: "rounded",
+            "aria-label": "Close",
+            onClick: r,
+            className: "ml-2"
+          }
+        )
+      ]
+    }
+  )
+), z = V(null), W = z.Provider;
+function N() {
+  const e = T(z);
+  if (!e)
+    throw new Error("Table compound components must be used within <Table>");
+  return e;
+}
+const j = (e) => {
+  if (e < 1 || e > 12)
+    throw new Error("Column span must be between 1 and 12");
+  switch (e) {
+    case 1:
+      return "grid-cols-1";
+    case 2:
+      return "grid-cols-2";
+    case 3:
+      return "grid-cols-3";
+    case 4:
+      return "grid-cols-4";
+    case 5:
+      return "grid-cols-5";
+    case 6:
+      return "grid-cols-6";
+    case 7:
+      return "grid-cols-7";
+    case 8:
+      return "grid-cols-8";
+    case 9:
+      return "grid-cols-9";
+    case 10:
+      return "grid-cols-10";
+    case 11:
+      return "grid-cols-11";
+    case 12:
+      return "grid-cols-12";
+    default:
+      return "grid-cols-2";
+  }
+}, Z = (e) => {
+  if (e < 1 || e > 12)
+    throw new Error("Column span must be between 1 and 12");
+  switch (e) {
+    case 1:
+      return "col-span-1";
+    case 2:
+      return "col-span-2";
+    case 3:
+      return "col-span-3";
+    case 4:
+      return "col-span-4";
+    case 5:
+      return "col-span-5";
+    case 6:
+      return "col-span-6";
+    case 7:
+      return "col-span-7";
+    case 8:
+      return "col-span-8";
+    case 9:
+      return "col-span-9";
+    case 10:
+      return "col-span-10";
+    case 11:
+      return "col-span-11";
+    case 12:
+      return "col-span-12";
+    default:
+      return "col-span-2";
+  }
+}, ee = d(
+  ({ children: e, className: t, ...r }, s) => {
+    const { maxColumns: o } = N();
+    return /* @__PURE__ */ a.jsx(
+      "div",
+      {
+        role: "rowgroup",
+        className: l("bg-neutral-soft", t),
+        ...r,
+        ref: s,
+        children: /* @__PURE__ */ a.jsx(
+          "div",
+          {
+            role: "row",
+            className: l("grid gap-4", j(o)),
+            children: e
+          }
+        )
+      }
+    );
+  }
+), te = d(
+  ({ children: e, className: t, ...r }, s) => /* @__PURE__ */ a.jsx("div", { role: "rowgroup", ref: s, className: l(t), ...r, children: e })
+), re = d(
+  ({ children: e, className: t, ...r }, s) => {
+    const { maxColumns: o } = N();
+    return /* @__PURE__ */ a.jsx(
+      "div",
+      {
+        role: "rowgroup",
+        className: l("bg-neutral-soft", t),
+        ...r,
+        ref: s,
+        children: /* @__PURE__ */ a.jsx(
+          "div",
+          {
+            role: "row",
+            className: l("grid gap-4", j(o)),
+            children: e
+          }
+        )
+      }
+    );
+  }
+), se = d(
+  ({ children: e, className: t, ...r }, s) => {
+    const { maxColumns: o } = N();
+    return /* @__PURE__ */ a.jsx(
+      "div",
+      {
+        role: "row",
+        className: l(
+          "grid gap-4",
+          j(o),
+          "border-b border-border last:border-0",
+          t
+        ),
+        ref: s,
+        ...r,
+        children: e
+      }
+    );
+  }
+), oe = d(
+  ({ as: e = "td", span: t, align: r = "left", children: s, className: o, ...n }, g) => {
+    const i = e === "th" ? "columnheader" : "cell";
+    let f = "text-left";
+    return r === "center" ? f = "text-center" : r === "right" && (f = "text-right"), /* @__PURE__ */ a.jsx(
+      "div",
+      {
+        ref: g,
+        role: i,
+        className: l(
+          "px-4 py-2",
+          "[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border",
+          Z(t),
+          f,
+          o
+        ),
+        ...n,
+        children: s
+      }
+    );
+  }
+), ae = d(
+  ({ children: e, className: t, maxColumns: r = 12, ...s }, o) => {
+    const n = B(
+      () => ({ maxColumns: r }),
+      [r]
+    );
+    return /* @__PURE__ */ a.jsx(W, { value: n, children: /* @__PURE__ */ a.jsx(
+      "div",
+      {
+        ref: o,
+        role: "table",
+        className: l(
+          "w-full overflow-x-auto rounded-lg border border-border",
+          t
+        ),
+        ...s,
+        children: e
+      }
+    ) });
+  }
+), me = Object.assign(ae, {
+  Header: ee,
+  Body: te,
+  Footer: re,
+  Row: se,
+  Column: oe
+}), ne = b(
+  // Base classes
+  "block transition-colors duration-200",
+  {
+    variants: {
+      variant: {
+        white: "bg-white border border-border",
+        neutral: "bg-neutral border border-gray-200",
+        primary: "bg-coral-soft border border-coral",
+        secondary: "bg-sage-soft border border-sage",
+        tertiary: "bg-mist-soft border border-mist",
+        ghost: "bg-transparent border border-slate",
+        success: "bg-success-soft border border-success",
+        info: "bg-info-soft border border-info",
+        warning: "bg-warning-soft border border-warning",
+        danger: "bg-danger-soft border border-danger"
+      },
+      size: {
+        xs: "p-2",
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-6",
+        xl: "p-8"
+      },
+      shape: {
+        rounded: "rounded-lg",
+        square: "rounded-none"
+      }
+    },
+    defaultVariants: {
+      variant: "white",
+      size: "md",
+      shape: "rounded"
+    }
+  }
+), ve = d(
+  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...o }, n) => /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      ref: n,
+      className: l(ne({ variant: e, size: t, shape: r }), s),
+      ...o
+    }
+  )
+);
+export {
+  de as A,
+  H as B,
+  he as S,
+  me as T,
+  ue as a,
+  fe as b,
+  be as c,
+  ve as d
+};