@dimasbaguspm/versaur 0.0.16 → 0.0.17

package/dist/js/tile-B9bt2AY6.js

@@ -0,0 +1,1776 @@
+import { a as cva, j as jsxRuntimeExports, c as cn } from "./index-C1uJQB34.js";
+import * as React from "react";
+import React__default, { forwardRef, useState, useRef, useEffect, useCallback, createContext, useContext, useMemo } from "react";
+import { X, ChevronLeft, ChevronRight } from "lucide-react";
+const calculatorRootVariants = cva(
+  "flex flex-col w-full max-w-xs rounded-lg bg-background",
+  {
+    variants: {
+      disabled: {
+        true: "opacity-60 pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: !1
+    }
+  }
+), calculatorButtonVariants = cva(
+  "flex-1 min-w-0 h-12 m-0.5 rounded text-lg font-medium transition-colors select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-neutral text-foreground hover:bg-neutral-soft hover:text-neutral",
+        action: "bg-primary text-white hover:bg-primary-soft hover:text-primary",
+        operator: "bg-secondary text-white hover:bg-secondary-soft hover:text-secondary",
+        danger: "bg-danger text-white hover:bg-danger-soft hover:text-danger"
+      },
+      disabled: {
+        true: "opacity-50 pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      disabled: !1
+    }
+  }
+), CalculatorButton = forwardRef(({ variant: e = "default", className: t, ...r }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "button",
+  {
+    ref: s,
+    type: "button",
+    className: cn(
+      calculatorButtonVariants({ variant: e, disabled: r.disabled }),
+      t
+    ),
+    ...r
+  }
+));
+function getIconColorFromVariant(e = "primary") {
+  const t = e.split("-");
+  if (t.length === 1)
+    switch (t[0]) {
+      case "ghost":
+      case "neutral":
+      case "outline":
+        return "ghost";
+      default:
+        return "neutral";
+    }
+  if (t?.[1] === "outline") return "inherit";
+  switch (t[0]) {
+    case "primary":
+      return "primary";
+    case "secondary":
+      return "secondary";
+    case "tertiary":
+      return "tertiary";
+    case "ghost":
+      return "ghost";
+    case "neutral":
+      return "ghost";
+    case "success":
+      return "success";
+    case "info":
+      return "info";
+    case "warning":
+      return "warning";
+    case "danger":
+      return "danger";
+    default:
+      return "neutral";
+  }
+}
+const buttonIconVariants = cva(
+  "inline-flex items-center justify-center 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 active:scale-[0.98] select-none",
+  {
+    variants: {
+      variant: {
+        // Core variants using Versaur color system
+        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-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 shadow-sm",
+        // Outline variants
+        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-soft focus-visible:ring-offset-white transition-all",
+        "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-soft focus-visible:ring-offset-white transition-all",
+        "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-soft focus-visible:ring-offset-white transition-all",
+        "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-soft focus-visible:ring-offset-white transition-all",
+        "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 transition-all",
+        // Ghost variants (subtle)
+        "primary-ghost": "text-primary bg-white hover:bg-primary-light focus-visible:ring-primary-light focus-visible:ring-offset-white",
+        "secondary-ghost": "text-secondary bg-white hover:bg-secondary-light focus-visible:ring-secondary-light focus-visible:ring-offset-white",
+        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary-light focus-visible:ring-tertiary-light focus-visible:ring-offset-white",
+        "neutral-ghost": "text-foreground bg-white hover:bg-neutral-light focus-visible:ring-foreground-light focus-visible:ring-offset-white",
+        // Semantic variants
+        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "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 transition-all",
+        "success-ghost": "text-success bg-white hover:bg-success-light focus-visible:ring-success-light focus-visible:ring-offset-white",
+        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "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 transition-all",
+        "info-ghost": "text-info bg-white hover:bg-info-light focus-visible:ring-info-light focus-visible:ring-offset-white",
+        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "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 transition-all",
+        "warning-ghost": "text-warning bg-white hover:bg-warning-light focus-visible:ring-warning-light focus-visible:ring-offset-white",
+        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "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 transition-all",
+        "danger-ghost": "text-danger bg-white hover:bg-danger-light focus-visible:ring-danger-light focus-visible:ring-offset-white",
+        // Utility variants
+        outline: "border border-border text-foreground bg-white hover:bg-accent-soft focus-visible:ring-accent-soft focus-visible:ring-offset-white transition-all",
+        destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md"
+      },
+      size: {
+        xs: "h-6 w-6",
+        sm: "h-8 w-8",
+        md: "h-10 w-10",
+        lg: "h-12 w-12",
+        xl: "h-14 w-14"
+      },
+      shape: {
+        rounded: "rounded-md",
+        square: "rounded-sm",
+        circle: "rounded-full"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      shape: "rounded"
+    }
+  }
+), iconVariants = cva("inline-flex items-center justify-center", {
+  variants: {
+    size: {
+      xs: "w-3 h-3",
+      sm: "w-4 h-4",
+      md: "w-5 h-5",
+      lg: "w-6 h-6",
+      xl: "w-8 h-8"
+    },
+    color: {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      tertiary: "text-tertiary",
+      ghost: "text-ghost",
+      neutral: "text-neutral",
+      success: "text-success",
+      info: "text-info",
+      warning: "text-warning",
+      danger: "text-danger",
+      inherit: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: o, ...n }, a) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    t,
+    {
+      ref: a,
+      className: iconVariants({ color: r, size: s, className: o }),
+      ...n
+    }
+  );
+}), ButtonIcon = React__default.forwardRef(
+  function({
+    className: t,
+    variant: r = "primary",
+    size: s = "md",
+    shape: o = "rounded",
+    disabled: n = !1,
+    as: a,
+    "aria-label": i,
+    ...u
+  }, c) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        ref: c,
+        type: "button",
+        className: cn(
+          buttonIconVariants({
+            variant: r,
+            size: s,
+            shape: o
+          }),
+          t
+        ),
+        disabled: n,
+        "aria-disabled": n,
+        "aria-label": i,
+        inert: n ? !0 : void 0,
+        ...u,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Icon,
+          {
+            as: a,
+            size: s,
+            color: getIconColorFromVariant(r)
+          }
+        )
+      }
+    );
+  }
+);
+function useCalculator({
+  initialValue = "",
+  disabled,
+  onChange
+}) {
+  const [input, setInput] = useState(String(initialValue)), inputRef = useRef(null);
+  useEffect(() => {
+    setInput(String(initialValue));
+  }, [initialValue]);
+  const evaluate = useCallback((expr) => {
+    try {
+      if (!/^[-+*/.\d\s]+$/.test(expr)) return "";
+      const result = eval(expr);
+      return result?.toString() ?? "";
+    } catch {
+      return "";
+    }
+  }, []), handleButton = useCallback(
+    (e) => {
+      if (!disabled)
+        if (e === "C")
+          setInput("");
+        else if (e === "⌫")
+          setInput((t) => t.slice(0, -1));
+        else if (e === "=") {
+          const t = evaluate(input);
+          setInput(t);
+        } else
+          setInput((t) => t + e);
+    },
+    [disabled, input, evaluate]
+  );
+  useEffect(() => {
+    if (onChange) {
+      const e = evaluate(input);
+      onChange(e);
+    }
+  }, [evaluate, input, onChange]), useEffect(() => {
+    if (disabled) return;
+    const e = (t) => {
+      if (document.activeElement !== inputRef.current && document.activeElement?.tagName !== "BODY")
+        return;
+      const r = t.key;
+      r === "Enter" || r === "=" ? (handleButton("="), t.preventDefault()) : r === "Backspace" ? (handleButton("⌫"), t.preventDefault()) : r === "Escape" || r === "C" || r === "c" ? (handleButton("C"), t.preventDefault()) : (/^[0-9]$/.test(r) || ["/", "*", "-", "+", "."].includes(r)) && (handleButton(r), t.preventDefault());
+    };
+    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+  }, [handleButton, disabled]), useEffect(() => {
+    disabled || inputRef.current?.focus();
+  }, [disabled]);
+  const handleInput = (e) => {
+    const t = e.target.value.replace(/[^\d+\-*/.]/g, "");
+    setInput(t);
+  };
+  return {
+    input,
+    inputRef,
+    handleButton,
+    handleInput
+  };
+}
+const BUTTONS = [
+  ["7", "8", "9", "/"],
+  ["4", "5", "6", "*"],
+  ["1", "2", "3", "-"],
+  ["0", ".", "=", "+"]
+], Calculator = forwardRef(
+  ({
+    initialValue: e = "",
+    onChange: t,
+    disabled: r,
+    className: s,
+    "aria-label": o
+  }, n) => {
+    const { input: a, inputRef: i, handleButton: u, handleInput: c } = useCalculator({
+      initialValue: e,
+      disabled: r,
+      onChange: t
+    });
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        ref: n,
+        className: cn(calculatorRootVariants({ disabled: r }), s),
+        "aria-label": o || "Calculator",
+        role: "region",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              ref: i,
+              className: "w-full mb-3 px-3 py-2 rounded border border-[var(--color-neutral)] bg-[var(--color-neutral-soft)] text-right text-xl font-mono focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]",
+              value: a,
+              onChange: c,
+              disabled: r,
+              inputMode: "decimal",
+              "aria-label": "Calculator input"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((x, b) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: x.map((f) => f === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ButtonIcon,
+            {
+              as: X,
+              variant: "danger-ghost",
+              "aria-label": "Backspace",
+              size: "md",
+              onClick: () => u("⌫"),
+              disabled: r
+            },
+            "backspace"
+          ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CalculatorButton,
+            {
+              variant: f === "=" ? "action" : f === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(f) ? "operator" : "default",
+              onClick: () => u(f),
+              disabled: r,
+              "aria-label": f,
+              children: f
+            },
+            f
+          )) }, b)) })
+        ]
+      }
+    );
+  }
+);
+Calculator.displayName = "Calculator";
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md 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 active:scale-[0.98] select-none",
+  {
+    variants: {
+      variant: {
+        // Core variants using Versaur color system
+        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-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 shadow-sm",
+        // Outline variants
+        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-soft focus-visible:ring-offset-white transition-all",
+        "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-soft focus-visible:ring-offset-white transition-all",
+        "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-soft focus-visible:ring-offset-white transition-all",
+        "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-soft focus-visible:ring-offset-white transition-all",
+        "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 transition-all",
+        // Ghost variants (subtle)
+        "primary-ghost": "text-primary bg-white hover:bg-primary-light focus-visible:ring-primary-light focus-visible:ring-offset-white",
+        "secondary-ghost": "text-secondary bg-white hover:bg-secondary-light focus-visible:ring-secondary-light focus-visible:ring-offset-white",
+        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary-light focus-visible:ring-tertiary-light 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",
+        // Semantic variants
+        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "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 transition-all",
+        "success-ghost": "text-success bg-white hover:bg-success-light focus-visible:ring-success-light focus-visible:ring-offset-white",
+        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "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 transition-all",
+        "info-ghost": "text-info bg-white hover:bg-info-light focus-visible:ring-info-light focus-visible:ring-offset-white",
+        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "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 transition-all",
+        "warning-ghost": "text-warning bg-white hover:bg-warning-light focus-visible:ring-warning-light focus-visible:ring-offset-white",
+        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "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 transition-all",
+        "danger-ghost": "text-danger bg-white hover:bg-danger-light focus-visible:ring-danger-light focus-visible:ring-offset-white",
+        // Utility variants
+        outline: "border border-border text-foreground bg-white hover:bg-accent-soft focus-visible:ring-accent-soft focus-visible:ring-offset-white transition-all",
+        destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md"
+      },
+      size: {
+        sm: "h-8 px-3 text-sm min-w-[2.25rem]",
+        md: "h-10 px-4 text-sm min-w-[2.5rem]",
+        lg: "h-12 px-8 text-lg min-w-[2.75rem]"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+), Button = React__default.forwardRef(
+  function e({
+    className: t,
+    variant: r = "primary",
+    size: s = "md",
+    disabled: o = !1,
+    type: n = "button",
+    children: a,
+    ...i
+  }, u) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        ref: u,
+        type: n,
+        className: cn(buttonVariants({ variant: r, size: s }), t),
+        disabled: o,
+        "aria-disabled": o,
+        inert: o ? !0 : void 0,
+        ...i,
+        children: a
+      }
+    );
+  }
+), alertVariants = cva(
+  "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-primary-soft text-primary border border-primary"
+      },
+      {
+        variant: "default",
+        color: "secondary",
+        class: "bg-secondary-soft text-secondary border border-secondary"
+      },
+      {
+        variant: "default",
+        color: "tertiary",
+        class: "bg-tertiary-soft text-tertiary border border-tertiary"
+      },
+      {
+        variant: "default",
+        color: "ghost",
+        class: "bg-ghost-soft text-ghost border border-ghost"
+      },
+      {
+        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-primary border-primary"
+      },
+      {
+        variant: "outline",
+        color: "secondary",
+        class: "bg-transparent text-secondary border-secondary"
+      },
+      {
+        variant: "outline",
+        color: "tertiary",
+        class: "bg-transparent text-tertiary border-tertiary"
+      },
+      {
+        variant: "outline",
+        color: "ghost",
+        class: "bg-transparent text-ghost border-ghost"
+      },
+      {
+        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"
+    }
+  }
+), alertIconVariants = cva(
+  "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"
+    }
+  }
+), AlertIcon = forwardRef(
+  ({ className: e, children: t, ...r }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: s, className: cn(alertIconVariants(), e), ...r, children: t })
+), AlertRoot = forwardRef(
+  ({
+    variant: e = "default",
+    color: t = "neutral",
+    icon: r,
+    className: s,
+    children: o,
+    ...n
+  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      ref: a,
+      role: "alert",
+      className: cn(alertVariants({ variant: e, color: t }), s),
+      ...n,
+      children: [
+        r && /* @__PURE__ */ jsxRuntimeExports.jsx(AlertIcon, { children: r }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: o })
+      ]
+    }
+  )
+), Alert = Object.assign(AlertRoot, {
+  Icon: AlertIcon
+}), anchorVariants = cva(
+  [
+    "inline-flex items-center transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+    // pseudo selectors for anchor
+    "hover:no-underline"
+  ],
+  {
+    variants: {
+      color: {
+        primary: "text-primary",
+        secondary: "text-secondary",
+        ghost: "text-ghost",
+        danger: "text-danger",
+        neutral: "text-neutral"
+      },
+      fontSize: {
+        xs: "text-xs",
+        sm: "text-sm",
+        base: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+        "3xl": "text-3xl",
+        "4xl": "text-4xl",
+        "5xl": "text-5xl",
+        "6xl": "text-6xl",
+        "7xl": "text-7xl",
+        "8xl": "text-8xl",
+        "9xl": "text-9xl",
+        inherit: "",
+        undefined: ""
+      },
+      fontWeight: {
+        thin: "font-thin",
+        extralight: "font-extralight",
+        light: "font-light",
+        normal: "font-normal",
+        medium: "font-medium",
+        semibold: "font-semibold",
+        bold: "font-bold",
+        extrabold: "font-extrabold",
+        black: "font-black",
+        inherit: "",
+        undefined: ""
+      },
+      quiet: {
+        true: "",
+        false: "underline underline-offset-2"
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      fontSize: "base",
+      fontWeight: "medium",
+      quiet: !1
+    }
+  }
+), Anchor = forwardRef(
+  ({
+    children: e,
+    className: t,
+    color: r = "primary",
+    fontSize: s = "base",
+    fontWeight: o = "medium",
+    quiet: n = !1,
+    ...a
+  }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "a",
+    {
+      ref: i,
+      className: cn(
+        anchorVariants({ color: r, fontSize: s, fontWeight: o, quiet: n }),
+        t
+      ),
+      ...a,
+      children: e
+    }
+  )
+), avatarVariants = cva(
+  "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-primary-light text-primary",
+        secondary: "bg-secondary-light text-secondary",
+        tertiary: "bg-tertiary-light text-tertiary",
+        ghost: "bg-ghost-light text-ghost",
+        neutral: "bg-neutral-light text-foreground border border-border",
+        // Semantic variants
+        success: "bg-success-light text-success",
+        info: "bg-info-light text-info",
+        warning: "bg-warning-light text-warning",
+        danger: "bg-danger-light 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"
+    }
+  }
+), avatarImageVariants = cva(
+  "absolute inset-0 h-full w-full object-cover"
+), Avatar$1 = forwardRef(
+  ({
+    variant: e = "primary",
+    size: t = "md",
+    shape: r = "circle",
+    className: s,
+    children: o,
+    ...n
+  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: a,
+      className: cn(avatarVariants({ variant: e, size: t, shape: r }), s),
+      ...n,
+      children: o
+    }
+  )
+), AvatarImage = forwardRef(
+  ({ src: e, alt: t, className: r, onError: s, ...o }, n) => {
+    const [a, i] = useState(!1);
+    useEffect(() => {
+      i(!1);
+    }, [e]);
+    const u = useCallback(
+      (c) => {
+        i(!0), s?.(c);
+      },
+      [s]
+    );
+    return a ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "img",
+      {
+        ref: n,
+        src: e,
+        alt: t,
+        className: cn(avatarImageVariants(), r),
+        onError: u,
+        ...o
+      }
+    );
+  }
+), Avatar = Object.assign(Avatar$1, {
+  /**
+   * AvatarImage sub-component for displaying images with fallback behavior
+   */
+  Image: AvatarImage
+}), badgeVariants = cva(
+  "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-background"
+      },
+      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-primary-light text-primary"
+      },
+      {
+        variant: "default",
+        color: "secondary",
+        className: "bg-secondary-light text-secondary"
+      },
+      {
+        variant: "default",
+        color: "tertiary",
+        className: "bg-tertiary-light text-tertiary"
+      },
+      {
+        variant: "default",
+        color: "ghost",
+        className: "bg-ghost-light text-ghost"
+      },
+      {
+        variant: "default",
+        color: "neutral",
+        className: "bg-neutral text-foreground"
+      },
+      {
+        variant: "default",
+        color: "success",
+        className: "bg-success-light text-success"
+      },
+      {
+        variant: "default",
+        color: "info",
+        className: "bg-info-light text-info"
+      },
+      {
+        variant: "default",
+        color: "warning",
+        className: "bg-warning-light text-warning"
+      },
+      {
+        variant: "default",
+        color: "danger",
+        className: "bg-danger-light text-danger"
+      },
+      // Outline variant color combinations
+      {
+        variant: "outline",
+        color: "primary",
+        className: "border-primary text-primary"
+      },
+      {
+        variant: "outline",
+        color: "secondary",
+        className: "border-secondary text-secondary"
+      },
+      {
+        variant: "outline",
+        color: "tertiary",
+        className: "border-tertiary text-tertiary"
+      },
+      {
+        variant: "outline",
+        color: "ghost",
+        className: "border-ghost text-ghost"
+      },
+      {
+        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
+    }
+  }
+), Badge = forwardRef(
+  ({
+    variant: e = "default",
+    shape: t = "square",
+    color: r = "primary",
+    size: s = "md",
+    iconLeft: o,
+    iconRight: n,
+    className: a,
+    children: i,
+    ...u
+  }, c) => {
+    const f = !(i != null && i !== "") && !!(o || n);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "span",
+      {
+        ref: c,
+        className: cn(
+          badgeVariants({
+            variant: e,
+            color: r,
+            shape: t,
+            size: s,
+            iconOnly: f
+          }),
+          a
+        ),
+        ...u,
+        children: f ? (
+          // Icon-only mode: display only the icon
+          o || n
+        ) : (
+          // Normal mode: display icon(s) and text
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            o,
+            i,
+            n
+          ] })
+        )
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.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" }))), SvgSpenicleRounded = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.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" }))), SvgSpenicleCircle = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.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" }))), brandSizeClass = cva("", {
+  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"
+  }
+}), BrandLogo = forwardRef(
+  ({ shape: e = "square", size: t, ...r }, s) => {
+    const n = {
+      square: SvgSpenicleSquare,
+      rounded: SvgSpenicleRounded,
+      circle: SvgSpenicleCircle
+    }[e] || SvgSpenicleSquare;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      n,
+      {
+        ref: s,
+        ...r,
+        className: cn("inline-block", brandSizeClass({ size: t }))
+      }
+    );
+  }
+), Brand = forwardRef(
+  ({ name: e = "spenicle", size: t = "md", shape: r, ...s }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "span",
+    {
+      ref: o,
+      className: cn("inline-flex items-center gap-2"),
+      ...s,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(BrandLogo, { shape: r, size: t, "aria-hidden": "true" })
+    }
+  )
+), buttonFloatVariants = cva(
+  [
+    "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-primary text-white hover:bg-primary/90 focus-visible:ring-primary-soft focus-visible:ring-offset-white",
+        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-soft focus-visible:ring-offset-white",
+        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-soft focus-visible:ring-offset-white",
+        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-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-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-soft focus-visible:ring-offset-white",
+        "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-soft focus-visible:ring-offset-white",
+        "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-soft focus-visible:ring-offset-white",
+        "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-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-primary bg-white hover:bg-primary-soft focus-visible:ring-primary-soft focus-visible:ring-offset-white",
+        "secondary-ghost": "text-secondary bg-white hover:bg-secondary-soft focus-visible:ring-secondary-soft focus-visible:ring-offset-white",
+        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary-soft focus-visible:ring-tertiary-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 useFloatingPosition(e, t = "1rem") {
+  const r = useRef(null), [s, o] = useState({}), [n, a] = useState("fixed bottom-4 right-4"), i = useCallback(() => {
+    const c = r.current;
+    if (!c) return;
+    const b = c.getBoundingClientRect().height > window.innerHeight;
+    let f = {}, w = "";
+    b ? (f = {
+      position: "fixed",
+      bottom: t,
+      zIndex: 50,
+      transform: `translateY(${c.scrollTop}px)`
+    }, w = `fixed bottom-4 ${e}-4`) : (f = {
+      position: "fixed",
+      bottom: t,
+      zIndex: 50
+    }, w = `fixed bottom-4 ${e}-4`), o(f), a(w);
+  }, [e, t]);
+  return useEffect(() => {
+    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]), useEffect(() => {
+    r.current && i();
+  }, [e, t, i]), [useCallback(
+    (c) => {
+      r.current = c, c && i();
+    },
+    [i]
+  ), s, n];
+}
+const ButtonFloat = forwardRef(
+  function e({
+    className: t,
+    variant: r = "primary",
+    size: s = "md",
+    side: o = "right",
+    offset: n = "1rem",
+    ...a
+  }, i) {
+    const [u, c, x] = useFloatingPosition(
+      o,
+      n
+    ), [b, f] = useState(!1);
+    return useEffect(() => {
+      f(!0);
+    }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: u, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        ref: i,
+        type: a.type || "button",
+        className: cn(
+          buttonFloatVariants({ variant: r, size: s }),
+          x,
+          b && "animate-fab-in",
+          t
+        ),
+        style: c,
+        ...a
+      }
+    ) });
+  }
+), textVariants = cva("", {
+  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",
+      inherit: "",
+      gray: "text-gray-500",
+      black: "text-black",
+      white: "text-white"
+    },
+    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"
+  }
+}), Text = forwardRef(
+  ({
+    as: e = "span",
+    color: t = "ghost",
+    hasUnderline: r = !1,
+    isCapitalize: s = !1,
+    align: o = "left",
+    italic: n = !1,
+    clamp: a = "none",
+    ellipsis: i = !1,
+    fontSize: u,
+    fontWeight: c,
+    className: x,
+    children: b,
+    ...f
+  }, w) => {
+    const d = [
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "p",
+      "span",
+      "label"
+    ].includes(e) ? e : "span", v = u ? `text-${u}` : "", p = c ? `font-${c}` : "";
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      e,
+      {
+        ref: w,
+        className: cn(
+          textVariants({
+            color: t,
+            hasUnderline: r,
+            isCapitalize: s,
+            align: o,
+            italic: n,
+            clamp: a,
+            ellipsis: i,
+            // @ts-expect-error - `as` is not a valid variant
+            as: d
+          }),
+          v,
+          p,
+          x
+        ),
+        ...f,
+        children: b
+      }
+    );
+  }
+), CalendarContext = createContext(null);
+function useCalendarContext() {
+  const e = useContext(CalendarContext);
+  if (!e)
+    throw new Error(
+      "useCalendarContext must be used within CalendarContext.Provider"
+    );
+  return e;
+}
+const CalendarHeader = () => {
+  const { value: e, year: t, month: r, setMonth: s } = useCalendarContext();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-4 pt-4 pb-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fontSize: "base", fontWeight: "semibold", className: "ml-2", children: e ? e instanceof Date ? e.toLocaleDateString(void 0, {
+      year: "numeric",
+      month: "long"
+    }) : Array.isArray(e) && e[0] ? e[0].toLocaleDateString(void 0, {
+      year: "numeric",
+      month: "long"
+    }) : `${t} ${new Date(t, r).toLocaleString(void 0, { month: "long" })}` : `${t} ${new Date(t, r).toLocaleString(void 0, { month: "long" })}` }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ButtonIcon,
+        {
+          as: ChevronLeft,
+          variant: "ghost",
+          size: "sm",
+          "aria-label": "Previous month",
+          onClick: () => s(r === 0 ? 11 : r - 1)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ButtonIcon,
+        {
+          as: ChevronRight,
+          variant: "ghost",
+          size: "sm",
+          "aria-label": "Next month",
+          onClick: () => s(r === 11 ? 0 : r + 1)
+        }
+      )
+    ] })
+  ] });
+}, CalendarWeekdays = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 px-4 text-ghost-500 mb-3", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((e) => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fontSize: "xs", color: "ghost", align: "center", children: e }, e)) }), CalendarDaysSingle = () => {
+  const e = useCalendarContext(), { year: t, month: r, value: s, onChange: o, setMonth: n, setYear: a } = e, i = (g, m) => new Date(g, m + 1, 0).getDate(), c = ((g, m) => new Date(g, m, 1).getDay())(t, r), x = i(t, r), b = r - 1 < 0 ? 11 : r - 1, f = r === 0 ? t - 1 : t, w = i(t, b), y = r === 11 ? 0 : r + 1, d = r === 11 ? t + 1 : t, v = [];
+  for (let g = 0; g < c; g++) {
+    const m = w - c + g + 1;
+    v.push(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ButtonIcon,
+        {
+          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: m }),
+          size: "sm",
+          "aria-label": "Previous month day",
+          variant: "ghost",
+          onClick: () => {
+            o?.(new Date(f, b, m)), n(b), a(f);
+          }
+        },
+        "prev-" + g
+      )
+    );
+  }
+  for (let g = 1; g <= x; g++) {
+    const m = s instanceof Date && s.getFullYear() === t && s.getMonth() === r && s.getDate() === g;
+    v.push(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ButtonIcon,
+        {
+          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Text,
+            {
+              as: "span",
+              fontSize: "sm",
+              color: m ? "inherit" : "ghost",
+              className: m ? "bg-primary text-white rounded-full" : "",
+              children: g
+            }
+          ),
+          variant: m ? "primary" : "ghost",
+          size: "sm",
+          "aria-label": `Select ${t}-${r + 1}-${g}`,
+          "aria-current": m ? "date" : void 0,
+          onClick: () => {
+            o?.(new Date(t, r, g));
+          }
+        },
+        g
+      )
+    );
+  }
+  const p = c + x;
+  for (let g = 0; g < (p % 7 === 0 ? 0 : 7 - p % 7); g++)
+    v.push(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ButtonIcon,
+        {
+          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: g + 1 }),
+          size: "sm",
+          "aria-label": "Next month day",
+          variant: "ghost",
+          onClick: () => {
+            o?.(new Date(d, y, g + 1)), n(y), a(d);
+          }
+        },
+        "next-" + g
+      )
+    );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-2 px-4 pb-4", children: v });
+}, CalendarDaysRange = () => {
+  const { year: e, month: t, value: r, onChange: s, setMonth: o, setYear: n } = useCalendarContext(), a = (l, h) => new Date(l, h + 1, 0).getDate(), u = ((l, h) => new Date(l, h, 1).getDay())(e, t), c = a(e, t), x = t - 1 < 0 ? 11 : t - 1, b = t === 0 ? e - 1 : e, f = a(e, x), w = t === 11 ? 0 : t + 1, y = t === 11 ? e + 1 : e, d = [], v = () => {
+    if (!Array.isArray(r)) return [null, null];
+    const [l, h] = r;
+    return !l && !h ? [null, null] : l && h ? l <= h ? [l, h] : [h, l] : [l, h];
+  }, [p, g] = v(), m = (l) => {
+    if (!p || !g) return !1;
+    const h = new Date(e, t, l);
+    return h >= p && h <= g;
+  }, N = (l) => p ? p.getFullYear() === e && p.getMonth() === t && p.getDate() === l : !1, T = (l) => g ? g.getFullYear() === e && g.getMonth() === t && g.getDate() === l : !1;
+  for (let l = 0; l < u; l++) {
+    const h = f - u + l + 1;
+    d.push(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ButtonIcon,
+        {
+          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: h }),
+          size: "sm",
+          "aria-label": "Previous month day",
+          variant: "ghost",
+          onClick: () => {
+            s?.([null, null]), o(x), n(b);
+          }
+        },
+        "prev-" + l
+      )
+    );
+  }
+  for (let l = 1; l <= c; l++) {
+    const h = m(l), C = N(l), E = T(l);
+    d.push(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ButtonIcon,
+        {
+          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Text,
+            {
+              as: "span",
+              fontSize: "sm",
+              color: h || C || E ? "inherit" : "ghost",
+              className: cn(
+                h && " bg-primary text-white",
+                C && "rounded-l-full bg-primary text-white",
+                E && "rounded-r-full bg-primary text-white"
+              ),
+              children: l
+            }
+          ),
+          variant: C || E || h ? "primary" : "ghost",
+          size: "sm",
+          "aria-label": `Select ${e}-${t + 1}-${l}`,
+          "aria-current": C || E ? "date" : void 0,
+          onClick: () => {
+            if (!Array.isArray(r) || !r[0] || r[0] && r[1])
+              s?.([new Date(e, t, l), null]);
+            else if (r[0] && !r[1]) {
+              const j = r[0], R = new Date(e, t, l);
+              j.getTime() === R.getTime() ? s?.([j, R]) : s?.(j < R ? [j, R] : [R, j]);
+            }
+          }
+        },
+        l
+      )
+    );
+  }
+  const S = u + c;
+  for (let l = 0; l < (S % 7 === 0 ? 0 : 7 - S % 7); l++)
+    d.push(
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ButtonIcon,
+        {
+          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: l + 1 }),
+          size: "sm",
+          "aria-label": "Next month day",
+          variant: "ghost",
+          onClick: () => {
+            s?.([null, null]), o(w), n(y);
+          }
+        },
+        "next-" + l
+      )
+    );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-2 px-4 pb-4", children: d });
+}, CalendarDays = () => {
+  const { type: e } = useCalendarContext();
+  return e === "range" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDaysRange, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDaysSingle, {});
+};
+function useCalendar({
+  value: e,
+  type: t,
+  onChange: r,
+  initialYear: s,
+  initialMonth: o
+}) {
+  const [n, a] = useState(o), [i, u] = useState(s), [c, x] = useState([
+    null,
+    null
+  ]);
+  let b = e;
+  t === "range" && !e && (b = c);
+  const f = useCallback(() => {
+    const d = n === 0 ? 11 : n - 1, v = n === 0 ? i - 1 : i;
+    a(d), u(v), t === "single" && r?.(new Date(v, d, 1));
+  }, [n, i, t, r]), w = useCallback(() => {
+    const d = n === 11 ? 0 : n + 1, v = n === 11 ? i + 1 : i;
+    a(d), u(v), t === "single" && r?.(new Date(v, d, 1));
+  }, [n, i, t, r]), y = useCallback(
+    (d) => {
+      t === "single" ? r?.(d) : t === "range" && (x(d), r?.(d));
+    },
+    [t, r]
+  );
+  return {
+    year: i,
+    month: n,
+    value: b,
+    setMonth: a,
+    setYear: u,
+    onChange: y,
+    handlePrevMonth: f,
+    handleNextMonth: w
+  };
+}
+const CalendarRoot = ({
+  value: e,
+  onChange: t,
+  className: r,
+  type: s = "single",
+  ...o
+}) => {
+  const n = /* @__PURE__ */ new Date(), a = useCalendar({
+    value: e,
+    onChange: t,
+    type: s,
+    initialYear: n.getFullYear(),
+    initialMonth: n.getMonth()
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    CalendarContext.Provider,
+    {
+      value: {
+        year: a.year,
+        month: a.month,
+        value: a.value,
+        type: s,
+        setMonth: a.setMonth,
+        setYear: a.setYear,
+        onChange: a.onChange
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("select-none", r), ...o, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarHeader, {}),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarWeekdays, {}),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDays, {})
+      ] })
+    }
+  );
+}, Calendar = Object.assign(CalendarRoot, {}), snackbarVariants = cva(
+  "flex items-center gap-2 px-4 py-2 rounded-sm w-fit relative shadow-sm",
+  {
+    variants: {
+      color: {
+        success: "text-success-bold bg-success-soft border-l-4 border-success",
+        info: "text-info-bold bg-info-soft border-l-4 border-info",
+        warning: "text-warning-bold bg-warning-soft border-l-4 border-warning",
+        danger: "text-danger-bold bg-danger-soft border-l-4 border-danger"
+      }
+    },
+    defaultVariants: {
+      color: "success"
+    }
+  }
+), SnackbarText = ({
+  children: e,
+  ...t
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  "span",
+  {
+    className: "flex-1 truncate text-sm",
+    "data-testid": "snackbar-text",
+    ...t,
+    children: e
+  }
+), SnackbarAction = ({
+  children: e,
+  ...t
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2", "data-testid": "snackbar-action", ...t, children: e }), Snackbar = forwardRef(
+  ({ children: e, action: t, color: r, className: s, ...o }, n) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      ref: n,
+      role: "status",
+      "aria-live": "polite",
+      className: cn(snackbarVariants({ color: r }), s),
+      ...o,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SnackbarText, { children: e }),
+        t && /* @__PURE__ */ jsxRuntimeExports.jsx(SnackbarAction, { children: t })
+      ]
+    }
+  )
+), TableContext = createContext(null), TableProvider = TableContext.Provider;
+function useTableContext() {
+  const e = useContext(TableContext);
+  if (!e)
+    throw new Error("Table compound components must be used within <Table>");
+  return e;
+}
+const getTableColumnClass = (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";
+  }
+}, getRowSpanClass = (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";
+  }
+}, TableHeader = forwardRef(
+  ({ children: e, className: t, ...r }, s) => {
+    const { maxColumns: o } = useTableContext();
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        role: "rowgroup",
+        className: cn("bg-neutral-soft", t),
+        ...r,
+        ref: s,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            role: "row",
+            className: cn("grid gap-4", getTableColumnClass(o)),
+            children: e
+          }
+        )
+      }
+    );
+  }
+), TableBody = forwardRef(
+  ({ children: e, className: t, ...r }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "rowgroup", ref: s, className: cn(t), ...r, children: e })
+), TableFooter = forwardRef(
+  ({ children: e, className: t, ...r }, s) => {
+    const { maxColumns: o } = useTableContext();
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        role: "rowgroup",
+        className: cn("bg-neutral-soft", t),
+        ...r,
+        ref: s,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            role: "row",
+            className: cn("grid gap-4", getTableColumnClass(o)),
+            children: e
+          }
+        )
+      }
+    );
+  }
+), TableRow = forwardRef(
+  ({ children: e, className: t, ...r }, s) => {
+    const { maxColumns: o } = useTableContext();
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        role: "row",
+        className: cn(
+          "grid gap-4",
+          getTableColumnClass(o),
+          "border-b border-border last:border-0",
+          t
+        ),
+        ref: s,
+        ...r,
+        children: e
+      }
+    );
+  }
+), TableColumn = forwardRef(
+  ({ as: e = "td", span: t, align: r = "left", children: s, className: o, ...n }, a) => {
+    const i = e === "th" ? "columnheader" : "cell";
+    let u = "text-left";
+    return r === "center" ? u = "text-center" : r === "right" && (u = "text-right"), /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        ref: a,
+        role: i,
+        className: cn(
+          "px-4 py-2",
+          "[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border",
+          getRowSpanClass(t),
+          u,
+          o
+        ),
+        ...n,
+        children: s
+      }
+    );
+  }
+), TableRoot = forwardRef(
+  ({ children: e, className: t, maxColumns: r = 12, ...s }, o) => {
+    const n = useMemo(
+      () => ({ maxColumns: r }),
+      [r]
+    );
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(TableProvider, { value: n, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        ref: o,
+        role: "table",
+        className: cn(
+          "w-full overflow-x-auto rounded-lg border border-border",
+          t
+        ),
+        ...s,
+        children: e
+      }
+    ) });
+  }
+), Table = Object.assign(TableRoot, {
+  Header: TableHeader,
+  Body: TableBody,
+  Footer: TableFooter,
+  Row: TableRow,
+  Column: TableColumn
+}), tileVariants = cva(
+  // Base classes
+  "block transition-colors duration-200",
+  {
+    variants: {
+      variant: {
+        white: "bg-white border border-border",
+        neutral: "bg-neutral border border-gray-200",
+        primary: "bg-primary-soft border border-primary",
+        secondary: "bg-secondary-soft border border-secondary",
+        tertiary: "bg-tertiary-soft border border-tertiary",
+        ghost: "bg-transparent border border-ghost",
+        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"
+    }
+  }
+), Tile = forwardRef(
+  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...o }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: n,
+      className: cn(tileVariants({ variant: e, size: t, shape: r }), s),
+      ...o
+    }
+  )
+);
+export {
+  Alert as A,
+  Badge as B,
+  Calculator as C,
+  Icon as I,
+  Snackbar as S,
+  Table as T,
+  Anchor as a,
+  Avatar as b,
+  Brand as c,
+  Button as d,
+  ButtonFloat as e,
+  ButtonIcon as f,
+  Calendar as g,
+  Text as h,
+  Tile as i
+};