@ugurdemirel/landcraft 0.1.16 → 0.1.18

package/dist/es/components/Navbar/Navbar.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { useState as D } from "react";
-import { cn as o } from "../../utils/cn.js";
+import { cn as n } from "../../utils/cn.js";
 import { X as P, Menu as T } from "../../icons.js";
 const f = "text-on-secondary", d = "text-foreground", C = {
   classic: {
@@ -49,7 +49,7 @@ const f = "text-on-secondary", d = "text-foreground", C = {
   logoAlt: N,
   logoClassName: k,
   brandHref: w = "#",
-  links: h,
+  links: x,
   actions: l,
   cta: i,
   languageSwitcher: c,
@@ -57,28 +57,30 @@ const f = "text-on-secondary", d = "text-foreground", C = {
   LinkComponent: L,
   ...j
 }) => {
-  const [a, x] = D(!1), m = L ?? "a", r = C[b], p = v ?? (u ? /* @__PURE__ */ e(
+  const [a, h] = D(!1), m = L ?? "a", o = C[b], p = v ?? (u ? /* @__PURE__ */ e(
     "img",
     {
       src: u,
       alt: N ?? (typeof s == "string" ? s : "Logo"),
-      className: o("h-7 w-auto", k)
+      className: n("h-7 w-auto", k)
     }
-  ) : null), B = p ? /* @__PURE__ */ e("span", { className: "flex items-center", children: p }) : /* @__PURE__ */ t("span", { className: o("flex items-center gap-2 font-display text-[17px] font-bold tracking-tight", r.brandText), children: [
-    /* @__PURE__ */ e("span", { "aria-hidden": !0, className: o("inline-block h-2.5 w-2.5 rounded-sm", r.brandDot) }),
+  ) : null), B = p ? /* @__PURE__ */ e("span", { className: "flex items-center", children: p }) : /* @__PURE__ */ t("span", { className: n("flex items-center gap-2 font-display text-[17px] font-bold tracking-tight", o.brandText), children: [
+    /* @__PURE__ */ e("span", { "aria-hidden": !0, className: n("inline-block h-2.5 w-2.5 rounded-sm", o.brandDot) }),
     s
   ] });
-  return /* @__PURE__ */ t("header", { className: o("w-full transition-colors duration-200", y && "sticky top-0 z-50", r.shell, r.header, g), ...j, children: [
-    /* @__PURE__ */ t("nav", { className: o("flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200", r.bar), "aria-label": "Main navigation", children: [
+  return /* @__PURE__ */ t("header", { className: n("w-full transition-colors duration-200", y && "sticky top-0 z-50", o.shell, o.header, g), ...j, children: [
+    /* @__PURE__ */ t("nav", { className: n("flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200", o.bar), "aria-label": "Main navigation", children: [
       /* @__PURE__ */ e(m, { href: w, className: "shrink-0", children: B }),
-      /* @__PURE__ */ e("ul", { className: r.desktopList, children: h.map((n) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e("ul", { className: o.desktopList, children: x.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
         m,
         {
-          href: n.href,
-          className: o("text-sm font-medium transition-colors duration-150", r.link),
-          children: n.label
+          href: r.href,
+          target: r.external ? "_blank" : void 0,
+          rel: r.external ? "noopener noreferrer" : void 0,
+          className: n("text-sm font-medium transition-colors duration-150", o.link),
+          children: r.label
         }
-      ) }, n.href)) }),
+      ) }, r.href)) }),
       /* @__PURE__ */ t("div", { className: "hidden items-center gap-3 md:flex", children: [
         c,
         l,
@@ -90,11 +92,11 @@ const f = "text-on-secondary", d = "text-foreground", C = {
           type: "button",
           "aria-label": a ? "Close menu" : "Open menu",
           "aria-expanded": a,
-          onClick: () => x((n) => !n),
-          className: o(
+          onClick: () => h((r) => !r),
+          className: n(
             "inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md md:hidden",
             "transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            r.menuButton
+            o.menuButton
           ),
           children: a ? /* @__PURE__ */ e(P, { className: "h-5 w-5" }) : /* @__PURE__ */ e(T, { className: "h-5 w-5" })
         }
@@ -103,25 +105,27 @@ const f = "text-on-secondary", d = "text-foreground", C = {
     /* @__PURE__ */ e(
       "div",
       {
-        className: o(
+        className: n(
           "grid transition-[grid-template-rows,opacity] duration-200 md:hidden",
           a ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
-          r.mobilePanel
+          o.mobilePanel
         ),
-        children: /* @__PURE__ */ e("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ t("ul", { className: o("flex flex-col py-4", b !== "floating" && "px-5"), children: [
+        children: /* @__PURE__ */ e("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ t("ul", { className: n("flex flex-col py-4", b !== "floating" && "px-5"), children: [
           c ? /* @__PURE__ */ e("li", { className: "px-2 pb-4", children: c }) : null,
-          h.map((n) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+          x.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
             m,
             {
-              href: n.href,
-              onClick: () => x(!1),
-              className: o(
+              href: r.href,
+              target: r.external ? "_blank" : void 0,
+              rel: r.external ? "noopener noreferrer" : void 0,
+              onClick: () => h(!1),
+              className: n(
                 "block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150",
-                r.mobileLink
+                o.mobileLink
               ),
-              children: n.label
+              children: r.label
             }
-          ) }, n.href)),
+          ) }, r.href)),
           i ? /* @__PURE__ */ e("li", { className: "mt-3 px-2 pb-2", children: i }) : l ? /* @__PURE__ */ e("li", { className: "mt-3 flex flex-wrap gap-3 px-2 pb-2", children: l }) : null
         ] }) })
       }

package/dist/es/components/Navbar/Navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.js","sources":["../../../../src/components/Navbar/Navbar.tsx"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Menu, X } from \"../../icons\";\nimport type { NavbarProps, NavbarVariant } from \"./types\";\n\ninterface NavbarStyle {\n  shell: string;\n  bar: string;\n  header: string;\n  link: string;\n  mobilePanel: string;\n  mobileLink: string;\n  menuButton: string;\n  brandText: string;\n  brandDot: string;\n  desktopList: string;\n}\n\nconst inverse = \"text-on-secondary\";\nconst light = \"text-foreground\";\n\nconst styles: Record<NavbarVariant, NavbarStyle> = {\n  classic: {\n    shell: \"border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75\",\n    bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n    header: \"px-0\",\n    link: \"text-muted-foreground hover:text-foreground\",\n    mobilePanel: \"border-t border-border bg-background\",\n    mobileLink:\n      \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n    menuButton: `${light} hover:bg-surface`,\n    brandText: light,\n    brandDot: \"bg-foreground\",\n    desktopList: \"hidden items-center gap-7 md:flex\",\n  },\n  floating: {\n    shell: \"px-0\",\n    bar: \"mx-auto mt-3 max-w-5xl rounded-xl border border-border bg-surface/90 px-5 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-surface/70\",\n    header: \"px-3 sm:px-6\",\n    link: \"text-muted-foreground hover:text-foreground\",\n    mobilePanel:\n      \"mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface\",\n    mobileLink:\n      \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n    menuButton: `${light} hover:bg-surface`,\n    brandText: light,\n    brandDot: \"bg-foreground\",\n    desktopList: \"hidden items-center gap-7 md:flex\",\n  },\n  inverse: {\n    shell: \"border-b border-white/10 bg-[#101010]/85 backdrop-blur-md\",\n    bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n    header: \"px-0\",\n    link: \"text-on-secondary/60 hover:text-on-secondary\",\n    mobilePanel: \"border-t border-white/10 bg-[#101010]\",\n    mobileLink:\n      \"text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary\",\n    menuButton: `${inverse} hover:bg-white/10`,\n    brandText: inverse,\n    brandDot: \"bg-on-secondary\",\n    desktopList: \"hidden items-center gap-7 md:flex\",\n  },\n};\n\nexport const Navbar = ({\n  className,\n  variant = \"classic\",\n  brand,\n  logo,\n  logoSrc,\n  logoAlt,\n  logoClassName,\n  brandHref = \"#\",\n  links,\n  actions,\n  cta,\n  languageSwitcher,\n  sticky = true,\n  LinkComponent,\n  ...props\n}: NavbarProps) => {\n  const [open, setOpen] = useState(false);\n  const Link = LinkComponent ?? \"a\";\n  const s = styles[variant];\n\n  const logoNode =\n    logo ??\n    (logoSrc ? (\n      <img\n        src={logoSrc}\n        alt={logoAlt ?? (typeof brand === \"string\" ? brand : \"Logo\")}\n        className={cn(\"h-7 w-auto\", logoClassName)}\n      />\n    ) : null);\n\n  const brandNode = logoNode ? (\n    <span className=\"flex items-center\">{logoNode}</span>\n  ) : (\n    <span className={cn(\"flex items-center gap-2 font-display text-[17px] font-bold tracking-tight\", s.brandText)}>\n      <span aria-hidden className={cn(\"inline-block h-2.5 w-2.5 rounded-sm\", s.brandDot)} />\n      {brand}\n    </span>\n  );\n\n  return (\n    <header className={cn(\"w-full transition-colors duration-200\", sticky && \"sticky top-0 z-50\", s.shell, s.header, className)} {...props}>\n      <nav className={cn(\"flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200\", s.bar)} aria-label=\"Main navigation\">\n        <Link href={brandHref} className=\"shrink-0\">\n          {brandNode}\n        </Link>\n\n        <ul className={s.desktopList}>\n          {links.map((link) => (\n            <li key={link.href}>\n              <Link\n                href={link.href}\n                className={cn(\"text-sm font-medium transition-colors duration-150\", s.link)}\n              >\n                {link.label}\n              </Link>\n            </li>\n          ))}\n        </ul>\n\n        <div className=\"hidden items-center gap-3 md:flex\">\n          {languageSwitcher}\n          {actions}\n          {cta}\n        </div>\n\n        <button\n          type=\"button\"\n          aria-label={open ? \"Close menu\" : \"Open menu\"}\n          aria-expanded={open}\n          onClick={() => setOpen((o) => !o)}\n          className={cn(\n            \"inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md md:hidden\",\n            \"transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            s.menuButton,\n          )}\n        >\n          {open ? <X className=\"h-5 w-5\" /> : <Menu className=\"h-5 w-5\" />}\n        </button>\n      </nav>\n\n      <div\n        className={cn(\n          \"grid transition-[grid-template-rows,opacity] duration-200 md:hidden\",\n          open ? \"grid-rows-[1fr] opacity-100\" : \"grid-rows-[0fr] opacity-0\",\n          s.mobilePanel,\n        )}\n      >\n        <div className=\"min-h-0 overflow-hidden\">\n          <ul className={cn(\"flex flex-col py-4\", variant !== \"floating\" && \"px-5\")}>\n            {languageSwitcher ? (\n              <li className=\"px-2 pb-4\">{languageSwitcher}</li>\n            ) : null}\n            {links.map((link) => (\n              <li key={link.href}>\n                <Link\n                  href={link.href}\n                  onClick={() => setOpen(false)}\n                  className={cn(\n                    \"block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150\",\n                    s.mobileLink,\n                  )}\n                >\n                  {link.label}\n                </Link>\n              </li>\n            ))}\n            {cta ? (\n              <li className=\"mt-3 px-2 pb-2\">{cta}</li>\n            ) : actions ? (\n              <li className=\"mt-3 flex flex-wrap gap-3 px-2 pb-2\">{actions}</li>\n            ) : null}\n          </ul>\n        </div>\n      </div>\n    </header>\n  );\n};\nNavbar.displayName = \"Navbar\";"],"names":["inverse","light","styles","Navbar","className","variant","brand","logo","logoSrc","logoAlt","logoClassName","brandHref","links","actions","cta","languageSwitcher","sticky","LinkComponent","props","open","setOpen","useState","Link","s","logoNode","jsx","cn","brandNode","jsxs","link","o","X","Menu"],"mappings":"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"}
+{"version":3,"file":"Navbar.js","sources":["../../../../src/components/Navbar/Navbar.tsx"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Menu, X } from \"../../icons\";\nimport type { NavbarProps, NavbarVariant } from \"./types\";\n\ninterface NavbarStyle {\n  shell: string;\n  bar: string;\n  header: string;\n  link: string;\n  mobilePanel: string;\n  mobileLink: string;\n  menuButton: string;\n  brandText: string;\n  brandDot: string;\n  desktopList: string;\n}\n\nconst inverse = \"text-on-secondary\";\nconst light = \"text-foreground\";\n\nconst styles: Record<NavbarVariant, NavbarStyle> = {\n  classic: {\n    shell: \"border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75\",\n    bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n    header: \"px-0\",\n    link: \"text-muted-foreground hover:text-foreground\",\n    mobilePanel: \"border-t border-border bg-background\",\n    mobileLink:\n      \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n    menuButton: `${light} hover:bg-surface`,\n    brandText: light,\n    brandDot: \"bg-foreground\",\n    desktopList: \"hidden items-center gap-7 md:flex\",\n  },\n  floating: {\n    shell: \"px-0\",\n    bar: \"mx-auto mt-3 max-w-5xl rounded-xl border border-border bg-surface/90 px-5 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-surface/70\",\n    header: \"px-3 sm:px-6\",\n    link: \"text-muted-foreground hover:text-foreground\",\n    mobilePanel:\n      \"mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface\",\n    mobileLink:\n      \"text-muted-foreground hover:bg-surface hover:text-foreground\",\n    menuButton: `${light} hover:bg-surface`,\n    brandText: light,\n    brandDot: \"bg-foreground\",\n    desktopList: \"hidden items-center gap-7 md:flex\",\n  },\n  inverse: {\n    shell: \"border-b border-white/10 bg-[#101010]/85 backdrop-blur-md\",\n    bar: \"mx-auto max-w-6xl px-5 sm:px-8\",\n    header: \"px-0\",\n    link: \"text-on-secondary/60 hover:text-on-secondary\",\n    mobilePanel: \"border-t border-white/10 bg-[#101010]\",\n    mobileLink:\n      \"text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary\",\n    menuButton: `${inverse} hover:bg-white/10`,\n    brandText: inverse,\n    brandDot: \"bg-on-secondary\",\n    desktopList: \"hidden items-center gap-7 md:flex\",\n  },\n};\n\nexport const Navbar = ({\n  className,\n  variant = \"classic\",\n  brand,\n  logo,\n  logoSrc,\n  logoAlt,\n  logoClassName,\n  brandHref = \"#\",\n  links,\n  actions,\n  cta,\n  languageSwitcher,\n  sticky = true,\n  LinkComponent,\n  ...props\n}: NavbarProps) => {\n  const [open, setOpen] = useState(false);\n  const Link = LinkComponent ?? \"a\";\n  const s = styles[variant];\n\n  const logoNode =\n    logo ??\n    (logoSrc ? (\n      <img\n        src={logoSrc}\n        alt={logoAlt ?? (typeof brand === \"string\" ? brand : \"Logo\")}\n        className={cn(\"h-7 w-auto\", logoClassName)}\n      />\n    ) : null);\n\n  const brandNode = logoNode ? (\n    <span className=\"flex items-center\">{logoNode}</span>\n  ) : (\n    <span className={cn(\"flex items-center gap-2 font-display text-[17px] font-bold tracking-tight\", s.brandText)}>\n      <span aria-hidden className={cn(\"inline-block h-2.5 w-2.5 rounded-sm\", s.brandDot)} />\n      {brand}\n    </span>\n  );\n\n  return (\n    <header className={cn(\"w-full transition-colors duration-200\", sticky && \"sticky top-0 z-50\", s.shell, s.header, className)} {...props}>\n      <nav className={cn(\"flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200\", s.bar)} aria-label=\"Main navigation\">\n        <Link href={brandHref} className=\"shrink-0\">\n          {brandNode}\n        </Link>\n\n        <ul className={s.desktopList}>\n          {links.map((link) => (\n            <li key={link.href}>\n              <Link\n                href={link.href}\n                target={link.external ? \"_blank\" : undefined}\n                rel={link.external ? \"noopener noreferrer\" : undefined}\n                className={cn(\"text-sm font-medium transition-colors duration-150\", s.link)}\n              >\n                {link.label}\n              </Link>\n            </li>\n          ))}\n        </ul>\n\n        <div className=\"hidden items-center gap-3 md:flex\">\n          {languageSwitcher}\n          {actions}\n          {cta}\n        </div>\n\n        <button\n          type=\"button\"\n          aria-label={open ? \"Close menu\" : \"Open menu\"}\n          aria-expanded={open}\n          onClick={() => setOpen((o) => !o)}\n          className={cn(\n            \"inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md md:hidden\",\n            \"transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            s.menuButton,\n          )}\n        >\n          {open ? <X className=\"h-5 w-5\" /> : <Menu className=\"h-5 w-5\" />}\n        </button>\n      </nav>\n\n      <div\n        className={cn(\n          \"grid transition-[grid-template-rows,opacity] duration-200 md:hidden\",\n          open ? \"grid-rows-[1fr] opacity-100\" : \"grid-rows-[0fr] opacity-0\",\n          s.mobilePanel,\n        )}\n      >\n        <div className=\"min-h-0 overflow-hidden\">\n          <ul className={cn(\"flex flex-col py-4\", variant !== \"floating\" && \"px-5\")}>\n            {languageSwitcher ? (\n              <li className=\"px-2 pb-4\">{languageSwitcher}</li>\n            ) : null}\n            {links.map((link) => (\n              <li key={link.href}>\n                <Link\n                  href={link.href}\n                  target={link.external ? \"_blank\" : undefined}\n                  rel={link.external ? \"noopener noreferrer\" : undefined}\n                  onClick={() => setOpen(false)}\n                  className={cn(\n                    \"block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150\",\n                    s.mobileLink,\n                  )}\n                >\n                  {link.label}\n                </Link>\n              </li>\n            ))}\n            {cta ? (\n              <li className=\"mt-3 px-2 pb-2\">{cta}</li>\n            ) : actions ? (\n              <li className=\"mt-3 flex flex-wrap gap-3 px-2 pb-2\">{actions}</li>\n            ) : null}\n          </ul>\n        </div>\n      </div>\n    </header>\n  );\n};\nNavbar.displayName = \"Navbar\";"],"names":["inverse","light","styles","Navbar","className","variant","brand","logo","logoSrc","logoAlt","logoClassName","brandHref","links","actions","cta","languageSwitcher","sticky","LinkComponent","props","open","setOpen","useState","Link","s","logoNode","jsx","cn","brandNode","jsxs","link","o","X","Menu"],"mappings":"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"}

package/dist/es/components/Pricing/parts.js

@@ -1,39 +1,35 @@
-"use client";
-import { jsxs as n, jsx as t, Fragment as a } from "react/jsx-runtime";
+import { jsxs as n, jsx as t, Fragment as c } from "react/jsx-runtime";
 import { cn as e } from "../../utils/cn.js";
-import { getContrastText as u } from "../../utils/contrast.js";
-import { useTokenForeground as m } from "../../utils/useTokenForeground.js";
-import { ArrowRight as f } from "../../icons.js";
-function y({
-  value: o,
+import { ArrowRight as a } from "../../icons.js";
+function f({
+  value: r,
   billing: i,
-  dim: r
+  dim: o
 }) {
-  return o === null ? /* @__PURE__ */ t("span", { children: "Custom" }) : /* @__PURE__ */ n(a, { children: [
+  return r === null ? /* @__PURE__ */ t("span", { children: "Custom" }) : /* @__PURE__ */ n(c, { children: [
     /* @__PURE__ */ n("span", { className: "text-[2.6rem] font-semibold tracking-tight sm:text-[3rem]", children: [
       "$",
-      o
+      r
     ] }),
-    /* @__PURE__ */ n("span", { className: e("text-sm font-normal", r && "opacity-60"), children: [
+    /* @__PURE__ */ n("span", { className: e("text-sm font-normal", o && "opacity-60"), children: [
       "/",
       i === "monthly" ? "mo" : "yr"
     ] })
   ] });
 }
-function p({
-  billing: o,
+function h({
+  billing: r,
   onChange: i,
-  dark: r,
+  dark: o,
   yearlyBadge: s
 }) {
-  const l = m("--color-accent", "#0f172a");
   return /* @__PURE__ */ n("div", { className: "mb-10 flex items-center justify-center gap-4", children: [
     /* @__PURE__ */ t(
       "span",
       {
         className: e(
           "text-sm font-medium transition-colors",
-          o === "monthly" ? r ? "text-white" : "text-foreground" : "text-muted-foreground"
+          r === "monthly" ? o ? "text-white" : "text-foreground" : "text-muted-foreground"
         ),
         children: "Monthly"
       }
@@ -43,20 +39,20 @@ function p({
       {
         type: "button",
         role: "switch",
-        "aria-checked": o === "yearly",
+        "aria-checked": r === "yearly",
         "aria-label": "Billing period",
-        onClick: () => i(o === "monthly" ? "yearly" : "monthly"),
+        onClick: () => i(r === "monthly" ? "yearly" : "monthly"),
         className: e(
           "relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-          o === "yearly" ? "bg-primary" : "bg-border"
+          r === "yearly" ? "bg-primary" : "bg-border"
         ),
         children: /* @__PURE__ */ t(
           "span",
           {
             className: e(
               "inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform duration-200",
-              o === "yearly" ? "translate-x-6" : "translate-x-1"
+              r === "yearly" ? "translate-x-6" : "translate-x-1"
             )
           }
         )
@@ -67,7 +63,7 @@ function p({
       {
         className: e(
           "flex items-center gap-2 text-sm font-medium transition-colors",
-          o === "yearly" ? r ? "text-white" : "text-foreground" : "text-muted-foreground"
+          r === "yearly" ? o ? "text-white" : "text-foreground" : "text-muted-foreground"
         ),
         children: [
           "Yearly",
@@ -75,7 +71,7 @@ function p({
             "span",
             {
               className: "rounded-full bg-accent px-2 py-0.5 text-xs font-semibold",
-              style: { color: l },
+              style: { color: "contrast-color(rgb(var(--color-accent)))" },
               children: s
             }
           ) : null
@@ -84,37 +80,40 @@ function p({
     )
   ] });
 }
-function v({
-  plan: o,
+function g({
+  plan: r,
   billing: i,
-  onSelect: r,
+  onSelect: o,
   dark: s
 }) {
-  const l = o.highlighted && !o.customColor, c = o.customColor ? u(o.customColor, "#111111", "#ffffff") : void 0;
+  const l = r.highlighted && !r.customColor;
   return /* @__PURE__ */ n(
     "button",
     {
       type: "button",
-      onClick: () => r == null ? void 0 : r(o, i),
+      onClick: () => o == null ? void 0 : o(r, i),
       className: e(
         "inline-flex h-11 cursor-pointer items-center justify-center gap-2 rounded-lg px-5 text-sm font-semibold transition-colors duration-200",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        l || o.customColor ? "hover:brightness-95" : s ? "bg-white text-black hover:bg-white/90" : "border border-border text-foreground hover:bg-surface"
+        l || r.customColor ? "hover:brightness-95" : s ? "bg-white text-black hover:bg-white/90" : "border border-border text-foreground hover:bg-surface"
       ),
-      style: o.customColor ? { backgroundColor: o.customColor, color: c } : l ? {
+      style: r.customColor ? {
+        backgroundColor: r.customColor,
+        color: `contrast-color(${r.customColor})`
+      } : l ? {
         backgroundColor: "rgb(var(--color-primary))",
         color: "rgb(var(--color-on-primary))"
       } : void 0,
       children: [
-        o.cta || "Start",
-        /* @__PURE__ */ t(f, { className: "h-4 w-4 opacity-60" })
+        r.cta || "Start",
+        /* @__PURE__ */ t(a, { className: "h-4 w-4 opacity-60" })
       ]
     }
   );
 }
 export {
-  p as BillingToggle,
-  v as PlanButton,
-  y as PriceValue
+  h as BillingToggle,
+  g as PlanButton,
+  f as PriceValue
 };
 //# sourceMappingURL=parts.js.map

package/dist/es/components/Pricing/parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"parts.js","sources":["../../../../src/components/Pricing/parts.tsx"],"sourcesContent":["\"use client\";\nimport { cn } from \"../../utils/cn\";\nimport { getContrastText } from \"../../utils/contrast\";\nimport { useTokenForeground } from \"../../utils/useTokenForeground\";\nimport { ArrowRight } from \"../../icons\";\nimport type { Plan } from \"./types\";\n\nexport function PriceValue({\n  value,\n  billing,\n  dim,\n}: {\n  value: number | null;\n  billing: \"monthly\" | \"yearly\";\n  /** False when rendered on a colored background where opacity would kill contrast. */\n  dim?: boolean;\n}) {\n  if (value === null) {\n    return <span>Custom</span>;\n  }\n  return (\n    <>\n      <span className=\"text-[2.6rem] font-semibold tracking-tight sm:text-[3rem]\">${value}</span>\n      <span className={cn(\"text-sm font-normal\", dim && \"opacity-60\")}>\n        /{billing === \"monthly\" ? \"mo\" : \"yr\"}\n      </span>\n    </>\n  );\n}\n\nexport function BillingToggle({\n  billing,\n  onChange,\n  dark,\n  yearlyBadge,\n}: {\n  billing: \"monthly\" | \"yearly\";\n  onChange: (b: \"monthly\" | \"yearly\") => void;\n  dark?: boolean;\n  yearlyBadge?: string;\n}) {\n  // The accent token is a background color, but its shipped \"on-accent\"\n  // pairing isn't guaranteed to be contrast-safe (e.g. white on amber).\n  // Derive the badge text color from the actual accent value instead. When\n  // the token can't be read yet (SSR/prerender/jsdom/first paint), fall back\n  // to the contrast-correct color for the default emerald accent — white on\n  // emerald-600 only reaches ~3.8:1 and fails WCAG AA for small text.\n  const accentText = useTokenForeground(\"--color-accent\", \"#0f172a\");\n  return (\n    <div className=\"mb-10 flex items-center justify-center gap-4\">\n      <span\n        className={cn(\n          \"text-sm font-medium transition-colors\",\n          billing === \"monthly\" ? (dark ? \"text-white\" : \"text-foreground\") : \"text-muted-foreground\",\n        )}\n      >\n        Monthly\n      </span>\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={billing === \"yearly\"}\n        aria-label=\"Billing period\"\n        onClick={() => onChange(billing === \"monthly\" ? \"yearly\" : \"monthly\")}\n        className={cn(\n          \"relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n          billing === \"yearly\" ? \"bg-primary\" : \"bg-border\",\n        )}\n      >\n        <span\n          className={cn(\n            \"inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform duration-200\",\n            billing === \"yearly\" ? \"translate-x-6\" : \"translate-x-1\",\n          )}\n        />\n      </button>\n      <span\n        className={cn(\n          \"flex items-center gap-2 text-sm font-medium transition-colors\",\n          billing === \"yearly\" ? (dark ? \"text-white\" : \"text-foreground\") : \"text-muted-foreground\",\n        )}\n      >\n        Yearly\n        {yearlyBadge ? (\n          <span\n            className=\"rounded-full bg-accent px-2 py-0.5 text-xs font-semibold\"\n            style={{ color: accentText }}\n          >\n            {yearlyBadge}\n          </span>\n        ) : null}\n      </span>\n    </div>\n  );\n}\n\nexport function PlanButton({\n  plan,\n  billing,\n  onSelect,\n  dark,\n}: {\n  plan: Plan;\n  billing: \"monthly\" | \"yearly\";\n  onSelect?: (plan: Plan, billing: \"monthly\" | \"yearly\") => void;\n  dark?: boolean;\n}) {\n  const isHighlighted = plan.highlighted && !plan.customColor;\n  const fg = plan.customColor ? getContrastText(plan.customColor, \"#111111\", \"#ffffff\") : undefined;\n  return (\n    <button\n      type=\"button\"\n      onClick={() => onSelect?.(plan, billing)}\n      className={cn(\n        \"inline-flex h-11 cursor-pointer items-center justify-center gap-2 rounded-lg px-5 text-sm font-semibold transition-colors duration-200\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n        isHighlighted || plan.customColor\n          ? \"hover:brightness-95\"\n          : dark\n            ? \"bg-white text-black hover:bg-white/90\"\n            : \"border border-border text-foreground hover:bg-surface\",\n      )}\n      style={\n        plan.customColor\n          ? { backgroundColor: plan.customColor, color: fg }\n          : isHighlighted\n            ? {\n                backgroundColor: \"rgb(var(--color-primary))\",\n                color: \"rgb(var(--color-on-primary))\",\n              }\n            : undefined\n      }\n    >\n      {plan.cta || \"Start\"}\n      <ArrowRight className=\"h-4 w-4 opacity-60\" />\n    </button>\n  );\n}"],"names":["PriceValue","value","billing","dim","jsx","jsxs","Fragment","cn","BillingToggle","onChange","dark","yearlyBadge","accentText","useTokenForeground","PlanButton","plan","onSelect","isHighlighted","fg","getContrastText","ArrowRight"],"mappings":"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"}
+{"version":3,"file":"parts.js","sources":["../../../../src/components/Pricing/parts.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport { ArrowRight } from \"../../icons\";\nimport type { Plan } from \"./types\";\n\nexport function PriceValue({\n  value,\n  billing,\n  dim,\n}: {\n  value: number | null;\n  billing: \"monthly\" | \"yearly\";\n  /** False when rendered on a colored background where opacity would kill contrast. */\n  dim?: boolean;\n}) {\n  if (value === null) {\n    return <span>Custom</span>;\n  }\n  return (\n    <>\n      <span className=\"text-[2.6rem] font-semibold tracking-tight sm:text-[3rem]\">${value}</span>\n      <span className={cn(\"text-sm font-normal\", dim && \"opacity-60\")}>\n        /{billing === \"monthly\" ? \"mo\" : \"yr\"}\n      </span>\n    </>\n  );\n}\n\nexport function BillingToggle({\n  billing,\n  onChange,\n  dark,\n  yearlyBadge,\n}: {\n  billing: \"monthly\" | \"yearly\";\n  onChange: (b: \"monthly\" | \"yearly\") => void;\n  dark?: boolean;\n  yearlyBadge?: string;\n}) {\n  // The accent token is a background color, but its shipped \"on-accent\"\n  // pairing isn't guaranteed to be contrast-safe (e.g. white on amber).\n  // Let CSS pick the readable text color from the actual accent value via\n  // contrast-color(); it re-evaluates automatically when the token changes.\n  return (\n    <div className=\"mb-10 flex items-center justify-center gap-4\">\n      <span\n        className={cn(\n          \"text-sm font-medium transition-colors\",\n          billing === \"monthly\" ? (dark ? \"text-white\" : \"text-foreground\") : \"text-muted-foreground\",\n        )}\n      >\n        Monthly\n      </span>\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={billing === \"yearly\"}\n        aria-label=\"Billing period\"\n        onClick={() => onChange(billing === \"monthly\" ? \"yearly\" : \"monthly\")}\n        className={cn(\n          \"relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n          billing === \"yearly\" ? \"bg-primary\" : \"bg-border\",\n        )}\n      >\n        <span\n          className={cn(\n            \"inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform duration-200\",\n            billing === \"yearly\" ? \"translate-x-6\" : \"translate-x-1\",\n          )}\n        />\n      </button>\n      <span\n        className={cn(\n          \"flex items-center gap-2 text-sm font-medium transition-colors\",\n          billing === \"yearly\" ? (dark ? \"text-white\" : \"text-foreground\") : \"text-muted-foreground\",\n        )}\n      >\n        Yearly\n        {yearlyBadge ? (\n          <span\n            className=\"rounded-full bg-accent px-2 py-0.5 text-xs font-semibold\"\n            style={{ color: \"contrast-color(rgb(var(--color-accent)))\" }}\n          >\n            {yearlyBadge}\n          </span>\n        ) : null}\n      </span>\n    </div>\n  );\n}\n\nexport function PlanButton({\n  plan,\n  billing,\n  onSelect,\n  dark,\n}: {\n  plan: Plan;\n  billing: \"monthly\" | \"yearly\";\n  onSelect?: (plan: Plan, billing: \"monthly\" | \"yearly\") => void;\n  dark?: boolean;\n}) {\n  const isHighlighted = plan.highlighted && !plan.customColor;\n  return (\n    <button\n      type=\"button\"\n      onClick={() => onSelect?.(plan, billing)}\n      className={cn(\n        \"inline-flex h-11 cursor-pointer items-center justify-center gap-2 rounded-lg px-5 text-sm font-semibold transition-colors duration-200\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n        isHighlighted || plan.customColor\n          ? \"hover:brightness-95\"\n          : dark\n            ? \"bg-white text-black hover:bg-white/90\"\n            : \"border border-border text-foreground hover:bg-surface\",\n      )}\n      style={\n        plan.customColor\n          ? {\n              backgroundColor: plan.customColor,\n              color: `contrast-color(${plan.customColor})`,\n            }\n          : isHighlighted\n            ? {\n                backgroundColor: \"rgb(var(--color-primary))\",\n                color: \"rgb(var(--color-on-primary))\",\n              }\n            : undefined\n      }\n    >\n      {plan.cta || \"Start\"}\n      <ArrowRight className=\"h-4 w-4 opacity-60\" />\n    </button>\n  );\n}"],"names":["PriceValue","value","billing","dim","jsx","jsxs","Fragment","cn","BillingToggle","onChange","dark","yearlyBadge","PlanButton","plan","onSelect","isHighlighted","ArrowRight"],"mappings":";;;AAIO,SAASA,EAAW;AAAA,EACzB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AACF,GAKG;AACD,SAAIF,MAAU,OACL,gBAAAG,EAAC,UAAK,UAAA,SAAA,CAAM,IAGnB,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD,EAAC,QAAA,EAAK,WAAU,6DAA4D,UAAA;AAAA,MAAA;AAAA,MAAEJ;AAAA,IAAA,GAAM;AAAA,sBACnF,QAAA,EAAK,WAAWM,EAAG,uBAAuBJ,KAAO,YAAY,GAAG,UAAA;AAAA,MAAA;AAAA,MAC7DD,MAAY,YAAY,OAAO;AAAA,IAAA,EAAA,CACnC;AAAA,EAAA,GACF;AAEJ;AAEO,SAASM,EAAc;AAAA,EAC5B,SAAAN;AAAA,EACA,UAAAO;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AACF,GAKG;AAKD,SACE,gBAAAN,EAAC,OAAA,EAAI,WAAU,gDACb,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWG;AAAA,UACT;AAAA,UACAL,MAAY,YAAaQ,IAAO,eAAe,oBAAqB;AAAA,QAAA;AAAA,QAEvE,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGD,gBAAAN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,gBAAcF,MAAY;AAAA,QAC1B,cAAW;AAAA,QACX,SAAS,MAAMO,EAASP,MAAY,YAAY,WAAW,SAAS;AAAA,QACpE,WAAWK;AAAA,UACT;AAAA,UACA;AAAA,UACAL,MAAY,WAAW,eAAe;AAAA,QAAA;AAAA,QAGxC,UAAA,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWG;AAAA,cACT;AAAA,cACAL,MAAY,WAAW,kBAAkB;AAAA,YAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAEF,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWE;AAAA,UACT;AAAA,UACAL,MAAY,WAAYQ,IAAO,eAAe,oBAAqB;AAAA,QAAA;AAAA,QAEtE,UAAA;AAAA,UAAA;AAAA,UAEEC,IACC,gBAAAP;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,2CAAA;AAAA,cAEf,UAAAO;AAAA,YAAA;AAAA,UAAA,IAED;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GACF;AAEJ;AAEO,SAASC,EAAW;AAAA,EACzB,MAAAC;AAAA,EACA,SAAAX;AAAA,EACA,UAAAY;AAAA,EACA,MAAAJ;AACF,GAKG;AACD,QAAMK,IAAgBF,EAAK,eAAe,CAACA,EAAK;AAChD,SACE,gBAAAR;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAMS,KAAA,gBAAAA,EAAWD,GAAMX;AAAA,MAChC,WAAWK;AAAA,QACT;AAAA,QACA;AAAA,QACAQ,KAAiBF,EAAK,cAClB,wBACAH,IACE,0CACA;AAAA,MAAA;AAAA,MAER,OACEG,EAAK,cACD;AAAA,QACE,iBAAiBA,EAAK;AAAA,QACtB,OAAO,kBAAkBA,EAAK,WAAW;AAAA,MAAA,IAE3CE,IACE;AAAA,QACE,iBAAiB;AAAA,QACjB,OAAO;AAAA,MAAA,IAET;AAAA,MAGP,UAAA;AAAA,QAAAF,EAAK,OAAO;AAAA,QACb,gBAAAT,EAACY,GAAA,EAAW,WAAU,qBAAA,CAAqB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjD;"}

package/dist/es/components/Pricing/variants/Bento.js

@@ -1,27 +1,26 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import { cn as o } from "../../../utils/cn.js";
-import { getContrastText as h } from "../../../utils/contrast.js";
-import { BillingToggle as x, PriceValue as v, PlanButton as y } from "../parts.js";
-import { Check as N } from "../../../icons.js";
-const p = ({ className: d, plans: m, billing: s, onBillingChange: a, onSelect: n, yearlyBadge: g, ...f }) => /* @__PURE__ */ i("div", { className: o("w-full", d), ...f, children: [
-  /* @__PURE__ */ t(x, { billing: s, onChange: a, yearlyBadge: g }),
+import { BillingToggle as x, PriceValue as f, PlanButton as v } from "../parts.js";
+import { Check as y } from "../../../icons.js";
+const N = ({ className: d, plans: m, billing: i, onBillingChange: a, onSelect: n, yearlyBadge: g, ...u }) => /* @__PURE__ */ s("div", { className: o("w-full", d), ...u, children: [
+  /* @__PURE__ */ t(x, { billing: i, onChange: a, yearlyBadge: g }),
   /* @__PURE__ */ t("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: m.map((r) => {
-    const c = r.highlighted && !r.customColor, e = r.customColor || (c ? "rgb(var(--color-primary))" : void 0), u = r.customColor ? h(r.customColor, "#111111", "#ffffff") : c ? "rgb(var(--color-on-primary))" : void 0;
-    return /* @__PURE__ */ i(
+    const c = r.highlighted && !r.customColor, e = r.customColor || (c ? "rgb(var(--color-primary))" : void 0), h = r.customColor ? `contrast-color(${r.customColor})` : c ? "rgb(var(--color-on-primary))" : void 0;
+    return /* @__PURE__ */ s(
       "div",
       {
         className: o(
           "flex h-full flex-col rounded-xl p-8",
           e ? "lg:col-span-2" : "border border-border bg-surface"
         ),
-        style: e ? { backgroundColor: e, color: u } : void 0,
+        style: e ? { backgroundColor: e, color: h } : void 0,
         children: [
-          /* @__PURE__ */ i("div", { className: "flex items-start justify-between gap-4", children: [
-            /* @__PURE__ */ i("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-start justify-between gap-4", children: [
+            /* @__PURE__ */ s("div", { className: "min-w-0", children: [
               /* @__PURE__ */ t("h3", { className: o("font-display text-xl font-semibold tracking-tight", e ? "text-current" : "text-foreground"), children: r.name }),
               r.description ? /* @__PURE__ */ t("p", { className: o("mt-1.5 text-sm", e ? void 0 : "text-muted-foreground"), children: r.description }) : null
             ] }),
-            /* @__PURE__ */ t("div", { className: o("shrink-0 font-display", e ? "text-current" : "text-foreground"), children: /* @__PURE__ */ t(v, { value: s === "monthly" ? r.monthly : r.yearly, billing: s, dim: !e }) })
+            /* @__PURE__ */ t("div", { className: o("shrink-0 font-display", e ? "text-current" : "text-foreground"), children: /* @__PURE__ */ t(f, { value: i === "monthly" ? r.monthly : r.yearly, billing: i, dim: !e }) })
           ] }),
           /* @__PURE__ */ t(
             "ul",
@@ -30,21 +29,21 @@ const p = ({ className: d, plans: m, billing: s, onBillingChange: a, onSelect: n
                 "mt-7 grid grid-cols-1 gap-x-8 gap-y-2.5 text-sm sm:grid-cols-2",
                 e ? "lg:max-w-2xl" : void 0
               ),
-              children: r.features.map((l) => /* @__PURE__ */ i("li", { className: o("flex items-start gap-2.5", e ? "text-current" : "text-muted-foreground"), children: [
-                /* @__PURE__ */ t(N, { className: o("mt-0.5 h-4 w-4 shrink-0", e ? "text-current" : "text-primary") }),
+              children: r.features.map((l) => /* @__PURE__ */ s("li", { className: o("flex items-start gap-2.5", e ? "text-current" : "text-muted-foreground"), children: [
+                /* @__PURE__ */ t(y, { className: o("mt-0.5 h-4 w-4 shrink-0", e ? "text-current" : "text-primary") }),
                 l
               ] }, l))
             }
           ),
-          /* @__PURE__ */ t("div", { className: "mt-8", children: /* @__PURE__ */ t(y, { plan: r, billing: s, onSelect: n, dark: !e }) })
+          /* @__PURE__ */ t("div", { className: "mt-8", children: /* @__PURE__ */ t(v, { plan: r, billing: i, onSelect: n, dark: !e }) })
         ]
       },
       r.name
     );
   }) })
 ] });
-p.displayName = "PricingBento";
+N.displayName = "PricingBento";
 export {
-  p as PricingBento
+  N as PricingBento
 };
 //# sourceMappingURL=Bento.js.map

package/dist/es/components/Pricing/variants/Bento.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bento.js","sources":["../../../../../src/components/Pricing/variants/Bento.tsx"],"sourcesContent":["import { cn } from \"../../../utils/cn\";\nimport { getContrastText } from \"../../../utils/contrast\";\nimport { PriceValue, BillingToggle, PlanButton } from \"../parts\";\nimport { Check } from \"../../../icons\";\nimport type { PricingVariantProps } from \"../types\";\n\ninterface BentoProps extends PricingVariantProps {\n  className?: string;\n}\n\nexport const PricingBento = ({ className, plans, billing, onBillingChange, onSelect, yearlyBadge, ...props }: BentoProps) => {\n  return (\n    <div className={cn(\"w-full\", className)} {...props}>\n      <BillingToggle billing={billing} onChange={onBillingChange} yearlyBadge={yearlyBadge} />\n      <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n        {plans.map((plan) => {\n          const isHighlighted = plan.highlighted && !plan.customColor;\n          const bg = plan.customColor || (isHighlighted ? \"rgb(var(--color-primary))\" : undefined);\n          const fg = plan.customColor\n            ? getContrastText(plan.customColor, \"#111111\", \"#ffffff\")\n            : isHighlighted\n              ? \"rgb(var(--color-on-primary))\"\n              : undefined;\n          return (\n            <div\n              key={plan.name}\n              className={cn(\n                \"flex h-full flex-col rounded-xl p-8\",\n                bg\n                  ? \"lg:col-span-2\"\n                  : \"border border-border bg-surface\",\n              )}\n              style={bg ? { backgroundColor: bg, color: fg } : undefined}\n            >\n              <div className=\"flex items-start justify-between gap-4\">\n                <div className=\"min-w-0\">\n                  <h3 className={cn(\"font-display text-xl font-semibold tracking-tight\", bg ? \"text-current\" : \"text-foreground\")}>\n                    {plan.name}\n                  </h3>\n                  {plan.description ? (\n                    <p className={cn(\"mt-1.5 text-sm\", bg ? undefined : \"text-muted-foreground\")}>\n                      {plan.description}\n                    </p>\n                  ) : null}\n                </div>\n                <div className={cn(\"shrink-0 font-display\", bg ? \"text-current\" : \"text-foreground\")}>\n                  <PriceValue value={billing === \"monthly\" ? plan.monthly : plan.yearly} billing={billing} dim={!bg} />\n                </div>\n              </div>\n              <ul\n                className={cn(\n                  \"mt-7 grid grid-cols-1 gap-x-8 gap-y-2.5 text-sm sm:grid-cols-2\",\n                  bg ? \"lg:max-w-2xl\" : undefined,\n                )}\n              >\n                {plan.features.map((feature) => (\n                  <li key={feature} className={cn(\"flex items-start gap-2.5\", bg ? \"text-current\" : \"text-muted-foreground\")}>\n                    <Check className={cn(\"mt-0.5 h-4 w-4 shrink-0\", bg ? \"text-current\" : \"text-primary\")} />\n                    {feature}\n                  </li>\n                ))}\n              </ul>\n              <div className=\"mt-8\">\n                <PlanButton plan={plan} billing={billing} onSelect={onSelect} dark={!bg} />\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\nPricingBento.displayName = \"PricingBento\";"],"names":["PricingBento","className","plans","billing","onBillingChange","onSelect","yearlyBadge","props","jsxs","cn","jsx","BillingToggle","plan","isHighlighted","bg","fg","getContrastText","PriceValue","feature","Check","PlanButton"],"mappings":";;;;;AAUO,MAAMA,IAAe,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,iBAAAC,GAAiB,UAAAC,GAAU,aAAAC,GAAa,GAAGC,QAEjG,gBAAAC,EAAC,SAAI,WAAWC,EAAG,UAAUR,CAAS,GAAI,GAAGM,GAC3C,UAAA;AAAA,EAAA,gBAAAG,EAACC,GAAA,EAAc,SAAAR,GAAkB,UAAUC,GAAiB,aAAAE,GAA0B;AAAA,oBACrF,OAAA,EAAI,WAAU,yCACZ,UAAAJ,EAAM,IAAI,CAACU,MAAS;AACnB,UAAMC,IAAgBD,EAAK,eAAe,CAACA,EAAK,aAC1CE,IAAKF,EAAK,gBAAgBC,IAAgB,8BAA8B,SACxEE,IAAKH,EAAK,cACZI,EAAgBJ,EAAK,aAAa,WAAW,SAAS,IACtDC,IACE,iCACA;AACN,WACE,gBAAAL;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWC;AAAA,UACT;AAAA,UACAK,IACI,kBACA;AAAA,QAAA;AAAA,QAEN,OAAOA,IAAK,EAAE,iBAAiBA,GAAI,OAAOC,MAAO;AAAA,QAEjD,UAAA;AAAA,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,YAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,WACb,UAAA;AAAA,cAAA,gBAAAE,EAAC,MAAA,EAAG,WAAWD,EAAG,qDAAqDK,IAAK,iBAAiB,iBAAiB,GAC3G,UAAAF,EAAK,KAAA,CACR;AAAA,cACCA,EAAK,cACJ,gBAAAF,EAAC,KAAA,EAAE,WAAWD,EAAG,kBAAkBK,IAAK,SAAY,uBAAuB,GACxE,UAAAF,EAAK,aACR,IACE;AAAA,YAAA,GACN;AAAA,YACA,gBAAAF,EAAC,SAAI,WAAWD,EAAG,yBAAyBK,IAAK,iBAAiB,iBAAiB,GACjF,UAAA,gBAAAJ,EAACO,GAAA,EAAW,OAAOd,MAAY,YAAYS,EAAK,UAAUA,EAAK,QAAQ,SAAAT,GAAkB,KAAK,CAACW,EAAA,CAAI,EAAA,CACrG;AAAA,UAAA,GACF;AAAA,UACA,gBAAAJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACAK,IAAK,iBAAiB;AAAA,cAAA;AAAA,cAGvB,UAAAF,EAAK,SAAS,IAAI,CAACM,MAClB,gBAAAV,EAAC,MAAA,EAAiB,WAAWC,EAAG,4BAA4BK,IAAK,iBAAiB,uBAAuB,GACvG,UAAA;AAAA,gBAAA,gBAAAJ,EAACS,KAAM,WAAWV,EAAG,2BAA2BK,IAAK,iBAAiB,cAAc,GAAG;AAAA,gBACtFI;AAAA,cAAA,EAAA,GAFMA,CAGT,CACD;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAR,EAAC,OAAA,EAAI,WAAU,QACb,UAAA,gBAAAA,EAACU,GAAA,EAAW,MAAAR,GAAY,SAAAT,GAAkB,UAAAE,GAAoB,MAAM,CAACS,EAAA,CAAI,EAAA,CAC3E;AAAA,QAAA;AAAA,MAAA;AAAA,MAvCKF,EAAK;AAAA,IAAA;AAAA,EA0ChB,CAAC,EAAA,CACH;AAAA,GACF;AAGJZ,EAAa,cAAc;"}
+{"version":3,"file":"Bento.js","sources":["../../../../../src/components/Pricing/variants/Bento.tsx"],"sourcesContent":["import { cn } from \"../../../utils/cn\";\nimport { PriceValue, BillingToggle, PlanButton } from \"../parts\";\nimport { Check } from \"../../../icons\";\nimport type { PricingVariantProps } from \"../types\";\n\ninterface BentoProps extends PricingVariantProps {\n  className?: string;\n}\n\nexport const PricingBento = ({ className, plans, billing, onBillingChange, onSelect, yearlyBadge, ...props }: BentoProps) => {\n  return (\n    <div className={cn(\"w-full\", className)} {...props}>\n      <BillingToggle billing={billing} onChange={onBillingChange} yearlyBadge={yearlyBadge} />\n      <div className=\"grid grid-cols-1 gap-4 lg:grid-cols-2\">\n        {plans.map((plan) => {\n          const isHighlighted = plan.highlighted && !plan.customColor;\n          const bg = plan.customColor || (isHighlighted ? \"rgb(var(--color-primary))\" : undefined);\n          const fg = plan.customColor\n            ? `contrast-color(${plan.customColor})`\n            : isHighlighted\n              ? \"rgb(var(--color-on-primary))\"\n              : undefined;\n          return (\n            <div\n              key={plan.name}\n              className={cn(\n                \"flex h-full flex-col rounded-xl p-8\",\n                bg\n                  ? \"lg:col-span-2\"\n                  : \"border border-border bg-surface\",\n              )}\n              style={bg ? { backgroundColor: bg, color: fg } : undefined}\n            >\n              <div className=\"flex items-start justify-between gap-4\">\n                <div className=\"min-w-0\">\n                  <h3 className={cn(\"font-display text-xl font-semibold tracking-tight\", bg ? \"text-current\" : \"text-foreground\")}>\n                    {plan.name}\n                  </h3>\n                  {plan.description ? (\n                    <p className={cn(\"mt-1.5 text-sm\", bg ? undefined : \"text-muted-foreground\")}>\n                      {plan.description}\n                    </p>\n                  ) : null}\n                </div>\n                <div className={cn(\"shrink-0 font-display\", bg ? \"text-current\" : \"text-foreground\")}>\n                  <PriceValue value={billing === \"monthly\" ? plan.monthly : plan.yearly} billing={billing} dim={!bg} />\n                </div>\n              </div>\n              <ul\n                className={cn(\n                  \"mt-7 grid grid-cols-1 gap-x-8 gap-y-2.5 text-sm sm:grid-cols-2\",\n                  bg ? \"lg:max-w-2xl\" : undefined,\n                )}\n              >\n                {plan.features.map((feature) => (\n                  <li key={feature} className={cn(\"flex items-start gap-2.5\", bg ? \"text-current\" : \"text-muted-foreground\")}>\n                    <Check className={cn(\"mt-0.5 h-4 w-4 shrink-0\", bg ? \"text-current\" : \"text-primary\")} />\n                    {feature}\n                  </li>\n                ))}\n              </ul>\n              <div className=\"mt-8\">\n                <PlanButton plan={plan} billing={billing} onSelect={onSelect} dark={!bg} />\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\nPricingBento.displayName = \"PricingBento\";"],"names":["PricingBento","className","plans","billing","onBillingChange","onSelect","yearlyBadge","props","jsxs","cn","jsx","BillingToggle","plan","isHighlighted","bg","fg","PriceValue","feature","Check","PlanButton"],"mappings":";;;;AASO,MAAMA,IAAe,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,iBAAAC,GAAiB,UAAAC,GAAU,aAAAC,GAAa,GAAGC,QAEjG,gBAAAC,EAAC,SAAI,WAAWC,EAAG,UAAUR,CAAS,GAAI,GAAGM,GAC3C,UAAA;AAAA,EAAA,gBAAAG,EAACC,GAAA,EAAc,SAAAR,GAAkB,UAAUC,GAAiB,aAAAE,GAA0B;AAAA,oBACrF,OAAA,EAAI,WAAU,yCACZ,UAAAJ,EAAM,IAAI,CAACU,MAAS;AACnB,UAAMC,IAAgBD,EAAK,eAAe,CAACA,EAAK,aAC1CE,IAAKF,EAAK,gBAAgBC,IAAgB,8BAA8B,SACxEE,IAAKH,EAAK,cACZ,kBAAkBA,EAAK,WAAW,MAClCC,IACE,iCACA;AACN,WACE,gBAAAL;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWC;AAAA,UACT;AAAA,UACAK,IACI,kBACA;AAAA,QAAA;AAAA,QAEN,OAAOA,IAAK,EAAE,iBAAiBA,GAAI,OAAOC,MAAO;AAAA,QAEjD,UAAA;AAAA,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,YAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,WACb,UAAA;AAAA,cAAA,gBAAAE,EAAC,MAAA,EAAG,WAAWD,EAAG,qDAAqDK,IAAK,iBAAiB,iBAAiB,GAC3G,UAAAF,EAAK,KAAA,CACR;AAAA,cACCA,EAAK,cACJ,gBAAAF,EAAC,KAAA,EAAE,WAAWD,EAAG,kBAAkBK,IAAK,SAAY,uBAAuB,GACxE,UAAAF,EAAK,aACR,IACE;AAAA,YAAA,GACN;AAAA,YACA,gBAAAF,EAAC,SAAI,WAAWD,EAAG,yBAAyBK,IAAK,iBAAiB,iBAAiB,GACjF,UAAA,gBAAAJ,EAACM,GAAA,EAAW,OAAOb,MAAY,YAAYS,EAAK,UAAUA,EAAK,QAAQ,SAAAT,GAAkB,KAAK,CAACW,EAAA,CAAI,EAAA,CACrG;AAAA,UAAA,GACF;AAAA,UACA,gBAAAJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACAK,IAAK,iBAAiB;AAAA,cAAA;AAAA,cAGvB,UAAAF,EAAK,SAAS,IAAI,CAACK,MAClB,gBAAAT,EAAC,MAAA,EAAiB,WAAWC,EAAG,4BAA4BK,IAAK,iBAAiB,uBAAuB,GACvG,UAAA;AAAA,gBAAA,gBAAAJ,EAACQ,KAAM,WAAWT,EAAG,2BAA2BK,IAAK,iBAAiB,cAAc,GAAG;AAAA,gBACtFG;AAAA,cAAA,EAAA,GAFMA,CAGT,CACD;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAP,EAAC,OAAA,EAAI,WAAU,QACb,UAAA,gBAAAA,EAACS,GAAA,EAAW,MAAAP,GAAY,SAAAT,GAAkB,UAAAE,GAAoB,MAAM,CAACS,EAAA,CAAI,EAAA,CAC3E;AAAA,QAAA;AAAA,MAAA;AAAA,MAvCKF,EAAK;AAAA,IAAA;AAAA,EA0ChB,CAAC,EAAA,CACH;AAAA,GACF;AAGJZ,EAAa,cAAc;"}

package/dist/es/components/Pricing/variants/Cards.js

@@ -1,12 +1,11 @@
 import { jsxs as l, jsx as o } from "react/jsx-runtime";
 import { cn as t } from "../../../utils/cn.js";
-import { getContrastText as x } from "../../../utils/contrast.js";
-import { BillingToggle as h, PriceValue as p, PlanButton as y } from "../parts.js";
-import { Check as v } from "../../../icons.js";
-const b = ({ className: d, plans: a, billing: s, onBillingChange: m, onSelect: n, yearlyBadge: g, ...u }) => /* @__PURE__ */ l("div", { className: t("w-full", d), ...u, children: [
+import { BillingToggle as h, PriceValue as f, PlanButton as p } from "../parts.js";
+import { Check as y } from "../../../icons.js";
+const v = ({ className: d, plans: a, billing: s, onBillingChange: m, onSelect: n, yearlyBadge: g, ...u }) => /* @__PURE__ */ l("div", { className: t("w-full", d), ...u, children: [
   /* @__PURE__ */ o(h, { billing: s, onChange: m, yearlyBadge: g }),
   /* @__PURE__ */ o("div", { className: "grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3", children: a.map((r) => {
-    const i = r.highlighted && !r.customColor, e = r.customColor || (i ? "rgb(var(--color-primary))" : void 0), f = r.customColor ? x(r.customColor, "#111111", "#ffffff") : i ? "rgb(var(--color-on-primary))" : void 0;
+    const i = r.highlighted && !r.customColor, e = r.customColor || (i ? "rgb(var(--color-primary))" : void 0), x = r.customColor ? `contrast-color(${r.customColor})` : i ? "rgb(var(--color-on-primary))" : void 0;
     return /* @__PURE__ */ l(
       "div",
       {
@@ -15,7 +14,7 @@ const b = ({ className: d, plans: a, billing: s, onBillingChange: m, onSelect: n
           e ? "shadow-raised" : "border border-border bg-surface",
           !e && i && "border-primary"
         ),
-        style: e ? { backgroundColor: e, color: f } : void 0,
+        style: e ? { backgroundColor: e, color: x } : void 0,
         children: [
           i ? /* @__PURE__ */ o(
             "span",
@@ -30,20 +29,20 @@ const b = ({ className: d, plans: a, billing: s, onBillingChange: m, onSelect: n
           ) : null,
           /* @__PURE__ */ o("h3", { className: t("font-display text-lg font-semibold tracking-tight", e ? "text-current" : "text-foreground"), children: r.name }),
           r.description ? /* @__PURE__ */ o("p", { className: t("mt-1.5 text-sm", e ? void 0 : "text-muted-foreground"), children: r.description }) : null,
-          /* @__PURE__ */ o("div", { className: t("mt-6 flex items-baseline font-display", e ? "text-current" : "text-foreground"), children: /* @__PURE__ */ o(p, { value: s === "monthly" ? r.monthly : r.yearly, billing: s, dim: !e }) }),
+          /* @__PURE__ */ o("div", { className: t("mt-6 flex items-baseline font-display", e ? "text-current" : "text-foreground"), children: /* @__PURE__ */ o(f, { value: s === "monthly" ? r.monthly : r.yearly, billing: s, dim: !e }) }),
           /* @__PURE__ */ o("ul", { className: t("mt-7 flex-1 space-y-2.5 text-sm", e ? "text-current" : "text-muted-foreground"), children: r.features.map((c) => /* @__PURE__ */ l("li", { className: "flex items-start gap-2.5", children: [
-            /* @__PURE__ */ o(v, { className: t("mt-0.5 h-4 w-4 shrink-0", e ? "text-current" : "text-primary") }),
+            /* @__PURE__ */ o(y, { className: t("mt-0.5 h-4 w-4 shrink-0", e ? "text-current" : "text-primary") }),
             c
           ] }, c)) }),
-          /* @__PURE__ */ o("div", { className: "mt-8", children: /* @__PURE__ */ o(y, { plan: r, billing: s, onSelect: n, dark: !e }) })
+          /* @__PURE__ */ o("div", { className: "mt-8", children: /* @__PURE__ */ o(p, { plan: r, billing: s, onSelect: n, dark: !e }) })
         ]
       },
       r.name
     );
   }) })
 ] });
-b.displayName = "PricingCards";
+v.displayName = "PricingCards";
 export {
-  b as PricingCards
+  v as PricingCards
 };
 //# sourceMappingURL=Cards.js.map

package/dist/es/components/Pricing/variants/Cards.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cards.js","sources":["../../../../../src/components/Pricing/variants/Cards.tsx"],"sourcesContent":["import { cn } from \"../../../utils/cn\";\nimport { getContrastText } from \"../../../utils/contrast\";\nimport { PriceValue, BillingToggle, PlanButton } from \"../parts\";\nimport { Check } from \"../../../icons\";\nimport type { PricingVariantProps } from \"../types\";\n\ninterface CardsProps extends PricingVariantProps {\n  className?: string;\n}\n\nexport const PricingCards = ({ className, plans, billing, onBillingChange, onSelect, yearlyBadge, ...props }: CardsProps) => {\n  return (\n    <div className={cn(\"w-full\", className)} {...props}>\n      <BillingToggle billing={billing} onChange={onBillingChange} yearlyBadge={yearlyBadge} />\n      <div className=\"grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3\">\n        {plans.map((plan) => {\n          const isHighlighted = plan.highlighted && !plan.customColor;\n          const bg = plan.customColor || (isHighlighted ? \"rgb(var(--color-primary))\" : undefined);\n          const fg = plan.customColor\n            ? getContrastText(plan.customColor, \"#111111\", \"#ffffff\")\n            : isHighlighted\n              ? \"rgb(var(--color-on-primary))\"\n              : undefined;\n          return (\n            <div\n              key={plan.name}\n              className={cn(\n                \"relative flex flex-col rounded-xl p-7\",\n                bg ? \"shadow-raised\" : \"border border-border bg-surface\",\n                !bg && isHighlighted && \"border-primary\",\n              )}\n              style={bg ? { backgroundColor: bg, color: fg } : undefined}\n            >\n              {isHighlighted ? (\n                <span\n                  className={cn(\n                    \"absolute -top-3 left-7 rounded-full px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wider\",\n                    !bg && \"bg-primary text-on-primary\",\n                  )}\n                  style={\n                    bg\n                      ? { backgroundColor: \"rgb(var(--color-on-primary))\", color: \"rgb(var(--color-primary))\" }\n                      : undefined\n                  }\n                >\n                  Most popular\n                </span>\n              ) : null}\n              <h3 className={cn(\"font-display text-lg font-semibold tracking-tight\", bg ? \"text-current\" : \"text-foreground\")}>\n                {plan.name}\n              </h3>\n              {plan.description ? (\n                <p className={cn(\"mt-1.5 text-sm\", bg ? undefined : \"text-muted-foreground\")}>\n                  {plan.description}\n                </p>\n              ) : null}\n              <div className={cn(\"mt-6 flex items-baseline font-display\", bg ? \"text-current\" : \"text-foreground\")}>\n                <PriceValue value={billing === \"monthly\" ? plan.monthly : plan.yearly} billing={billing} dim={!bg} />\n              </div>\n              <ul className={cn(\"mt-7 flex-1 space-y-2.5 text-sm\", bg ? \"text-current\" : \"text-muted-foreground\")}>\n                {plan.features.map((feature) => (\n                  <li key={feature} className=\"flex items-start gap-2.5\">\n                    <Check className={cn(\"mt-0.5 h-4 w-4 shrink-0\", bg ? \"text-current\" : \"text-primary\")} />\n                    {feature}\n                  </li>\n                ))}\n              </ul>\n              <div className=\"mt-8\">\n                <PlanButton plan={plan} billing={billing} onSelect={onSelect} dark={!bg} />\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\nPricingCards.displayName = \"PricingCards\";"],"names":["PricingCards","className","plans","billing","onBillingChange","onSelect","yearlyBadge","props","jsxs","cn","jsx","BillingToggle","plan","isHighlighted","bg","fg","getContrastText","PriceValue","feature","Check","PlanButton"],"mappings":";;;;;AAUO,MAAMA,IAAe,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,iBAAAC,GAAiB,UAAAC,GAAU,aAAAC,GAAa,GAAGC,QAEjG,gBAAAC,EAAC,SAAI,WAAWC,EAAG,UAAUR,CAAS,GAAI,GAAGM,GAC3C,UAAA;AAAA,EAAA,gBAAAG,EAACC,GAAA,EAAc,SAAAR,GAAkB,UAAUC,GAAiB,aAAAE,GAA0B;AAAA,oBACrF,OAAA,EAAI,WAAU,wDACZ,UAAAJ,EAAM,IAAI,CAACU,MAAS;AACnB,UAAMC,IAAgBD,EAAK,eAAe,CAACA,EAAK,aAC1CE,IAAKF,EAAK,gBAAgBC,IAAgB,8BAA8B,SACxEE,IAAKH,EAAK,cACZI,EAAgBJ,EAAK,aAAa,WAAW,SAAS,IACtDC,IACE,iCACA;AACN,WACE,gBAAAL;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWC;AAAA,UACT;AAAA,UACAK,IAAK,kBAAkB;AAAA,UACvB,CAACA,KAAMD,KAAiB;AAAA,QAAA;AAAA,QAE1B,OAAOC,IAAK,EAAE,iBAAiBA,GAAI,OAAOC,MAAO;AAAA,QAEhD,UAAA;AAAA,UAAAF,IACC,gBAAAH;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACA,CAACK,KAAM;AAAA,cAAA;AAAA,cAET,OACEA,IACI,EAAE,iBAAiB,gCAAgC,OAAO,gCAC1D;AAAA,cAEP,UAAA;AAAA,YAAA;AAAA,UAAA,IAGC;AAAA,UACJ,gBAAAJ,EAAC,MAAA,EAAG,WAAWD,EAAG,qDAAqDK,IAAK,iBAAiB,iBAAiB,GAC3G,UAAAF,EAAK,KAAA,CACR;AAAA,UACCA,EAAK,cACJ,gBAAAF,EAAC,KAAA,EAAE,WAAWD,EAAG,kBAAkBK,IAAK,SAAY,uBAAuB,GACxE,UAAAF,EAAK,aACR,IACE;AAAA,UACJ,gBAAAF,EAAC,SAAI,WAAWD,EAAG,yCAAyCK,IAAK,iBAAiB,iBAAiB,GACjG,UAAA,gBAAAJ,EAACO,GAAA,EAAW,OAAOd,MAAY,YAAYS,EAAK,UAAUA,EAAK,QAAQ,SAAAT,GAAkB,KAAK,CAACW,EAAA,CAAI,EAAA,CACrG;AAAA,4BACC,MAAA,EAAG,WAAWL,EAAG,mCAAmCK,IAAK,iBAAiB,uBAAuB,GAC/F,UAAAF,EAAK,SAAS,IAAI,CAACM,MAClB,gBAAAV,EAAC,MAAA,EAAiB,WAAU,4BAC1B,UAAA;AAAA,YAAA,gBAAAE,EAACS,KAAM,WAAWV,EAAG,2BAA2BK,IAAK,iBAAiB,cAAc,GAAG;AAAA,YACtFI;AAAA,UAAA,KAFMA,CAGT,CACD,GACH;AAAA,UACA,gBAAAR,EAAC,OAAA,EAAI,WAAU,QACb,UAAA,gBAAAA,EAACU,GAAA,EAAW,MAAAR,GAAY,SAAAT,GAAkB,UAAAE,GAAoB,MAAM,CAACS,EAAA,CAAI,EAAA,CAC3E;AAAA,QAAA;AAAA,MAAA;AAAA,MA5CKF,EAAK;AAAA,IAAA;AAAA,EA+ChB,CAAC,EAAA,CACH;AAAA,GACF;AAGJZ,EAAa,cAAc;"}
+{"version":3,"file":"Cards.js","sources":["../../../../../src/components/Pricing/variants/Cards.tsx"],"sourcesContent":["import { cn } from \"../../../utils/cn\";\nimport { PriceValue, BillingToggle, PlanButton } from \"../parts\";\nimport { Check } from \"../../../icons\";\nimport type { PricingVariantProps } from \"../types\";\n\ninterface CardsProps extends PricingVariantProps {\n  className?: string;\n}\n\nexport const PricingCards = ({ className, plans, billing, onBillingChange, onSelect, yearlyBadge, ...props }: CardsProps) => {\n  return (\n    <div className={cn(\"w-full\", className)} {...props}>\n      <BillingToggle billing={billing} onChange={onBillingChange} yearlyBadge={yearlyBadge} />\n      <div className=\"grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3\">\n        {plans.map((plan) => {\n          const isHighlighted = plan.highlighted && !plan.customColor;\n          const bg = plan.customColor || (isHighlighted ? \"rgb(var(--color-primary))\" : undefined);\n          const fg = plan.customColor\n            ? `contrast-color(${plan.customColor})`\n            : isHighlighted\n              ? \"rgb(var(--color-on-primary))\"\n              : undefined;\n          return (\n            <div\n              key={plan.name}\n              className={cn(\n                \"relative flex flex-col rounded-xl p-7\",\n                bg ? \"shadow-raised\" : \"border border-border bg-surface\",\n                !bg && isHighlighted && \"border-primary\",\n              )}\n              style={bg ? { backgroundColor: bg, color: fg } : undefined}\n            >\n              {isHighlighted ? (\n                <span\n                  className={cn(\n                    \"absolute -top-3 left-7 rounded-full px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wider\",\n                    !bg && \"bg-primary text-on-primary\",\n                  )}\n                  style={\n                    bg\n                      ? { backgroundColor: \"rgb(var(--color-on-primary))\", color: \"rgb(var(--color-primary))\" }\n                      : undefined\n                  }\n                >\n                  Most popular\n                </span>\n              ) : null}\n              <h3 className={cn(\"font-display text-lg font-semibold tracking-tight\", bg ? \"text-current\" : \"text-foreground\")}>\n                {plan.name}\n              </h3>\n              {plan.description ? (\n                <p className={cn(\"mt-1.5 text-sm\", bg ? undefined : \"text-muted-foreground\")}>\n                  {plan.description}\n                </p>\n              ) : null}\n              <div className={cn(\"mt-6 flex items-baseline font-display\", bg ? \"text-current\" : \"text-foreground\")}>\n                <PriceValue value={billing === \"monthly\" ? plan.monthly : plan.yearly} billing={billing} dim={!bg} />\n              </div>\n              <ul className={cn(\"mt-7 flex-1 space-y-2.5 text-sm\", bg ? \"text-current\" : \"text-muted-foreground\")}>\n                {plan.features.map((feature) => (\n                  <li key={feature} className=\"flex items-start gap-2.5\">\n                    <Check className={cn(\"mt-0.5 h-4 w-4 shrink-0\", bg ? \"text-current\" : \"text-primary\")} />\n                    {feature}\n                  </li>\n                ))}\n              </ul>\n              <div className=\"mt-8\">\n                <PlanButton plan={plan} billing={billing} onSelect={onSelect} dark={!bg} />\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\nPricingCards.displayName = \"PricingCards\";"],"names":["PricingCards","className","plans","billing","onBillingChange","onSelect","yearlyBadge","props","jsxs","cn","jsx","BillingToggle","plan","isHighlighted","bg","fg","PriceValue","feature","Check","PlanButton"],"mappings":";;;;AASO,MAAMA,IAAe,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,iBAAAC,GAAiB,UAAAC,GAAU,aAAAC,GAAa,GAAGC,QAEjG,gBAAAC,EAAC,SAAI,WAAWC,EAAG,UAAUR,CAAS,GAAI,GAAGM,GAC3C,UAAA;AAAA,EAAA,gBAAAG,EAACC,GAAA,EAAc,SAAAR,GAAkB,UAAUC,GAAiB,aAAAE,GAA0B;AAAA,oBACrF,OAAA,EAAI,WAAU,wDACZ,UAAAJ,EAAM,IAAI,CAACU,MAAS;AACnB,UAAMC,IAAgBD,EAAK,eAAe,CAACA,EAAK,aAC1CE,IAAKF,EAAK,gBAAgBC,IAAgB,8BAA8B,SACxEE,IAAKH,EAAK,cACZ,kBAAkBA,EAAK,WAAW,MAClCC,IACE,iCACA;AACN,WACE,gBAAAL;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWC;AAAA,UACT;AAAA,UACAK,IAAK,kBAAkB;AAAA,UACvB,CAACA,KAAMD,KAAiB;AAAA,QAAA;AAAA,QAE1B,OAAOC,IAAK,EAAE,iBAAiBA,GAAI,OAAOC,MAAO;AAAA,QAEhD,UAAA;AAAA,UAAAF,IACC,gBAAAH;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACA,CAACK,KAAM;AAAA,cAAA;AAAA,cAET,OACEA,IACI,EAAE,iBAAiB,gCAAgC,OAAO,gCAC1D;AAAA,cAEP,UAAA;AAAA,YAAA;AAAA,UAAA,IAGC;AAAA,UACJ,gBAAAJ,EAAC,MAAA,EAAG,WAAWD,EAAG,qDAAqDK,IAAK,iBAAiB,iBAAiB,GAC3G,UAAAF,EAAK,KAAA,CACR;AAAA,UACCA,EAAK,cACJ,gBAAAF,EAAC,KAAA,EAAE,WAAWD,EAAG,kBAAkBK,IAAK,SAAY,uBAAuB,GACxE,UAAAF,EAAK,aACR,IACE;AAAA,UACJ,gBAAAF,EAAC,SAAI,WAAWD,EAAG,yCAAyCK,IAAK,iBAAiB,iBAAiB,GACjG,UAAA,gBAAAJ,EAACM,GAAA,EAAW,OAAOb,MAAY,YAAYS,EAAK,UAAUA,EAAK,QAAQ,SAAAT,GAAkB,KAAK,CAACW,EAAA,CAAI,EAAA,CACrG;AAAA,4BACC,MAAA,EAAG,WAAWL,EAAG,mCAAmCK,IAAK,iBAAiB,uBAAuB,GAC/F,UAAAF,EAAK,SAAS,IAAI,CAACK,MAClB,gBAAAT,EAAC,MAAA,EAAiB,WAAU,4BAC1B,UAAA;AAAA,YAAA,gBAAAE,EAACQ,KAAM,WAAWT,EAAG,2BAA2BK,IAAK,iBAAiB,cAAc,GAAG;AAAA,YACtFG;AAAA,UAAA,KAFMA,CAGT,CACD,GACH;AAAA,UACA,gBAAAP,EAAC,OAAA,EAAI,WAAU,QACb,UAAA,gBAAAA,EAACS,GAAA,EAAW,MAAAP,GAAY,SAAAT,GAAkB,UAAAE,GAAoB,MAAM,CAACS,EAAA,CAAI,EAAA,CAC3E;AAAA,QAAA;AAAA,MAAA;AAAA,MA5CKF,EAAK;AAAA,IAAA;AAAA,EA+ChB,CAAC,EAAA,CACH;AAAA,GACF;AAGJZ,EAAa,cAAc;"}

package/dist/es/components/Testimonials/TestimonialCard.js

@@ -1,37 +1,36 @@
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import { forwardRef as b } from "react";
 import { cn as o } from "../../utils/cn.js";
-import { getContrastText as g } from "../../utils/contrast.js";
-import { Quote as h, Star as y } from "../../icons.js";
-import { initials as N } from "./parts.js";
-const A = b(
-  function({ className: m, testimonial: c, ...d }, f) {
-    const { quote: x, author: a, role: i, company: l, avatar: n, accent: e, rating: s } = c, p = e ? { backgroundColor: e, color: g(e, "#111111", "#ffffff") } : void 0;
+import { Quote as h, Star as g } from "../../icons.js";
+import { initials as y } from "./parts.js";
+const S = b(
+  function({ className: c, testimonial: m, ...d }, f) {
+    const { quote: x, author: a, role: i, company: l, avatar: n, accent: e, rating: s } = m, u = e ? { backgroundColor: e, color: `contrast-color(${e})` } : void 0;
     return /* @__PURE__ */ t(
       "figure",
       {
         ref: f,
         className: o(
           "mb-4 flex flex-col break-inside-avoid rounded-2xl border border-border bg-surface p-7",
-          m
+          c
         ),
         ...d,
         children: [
           /* @__PURE__ */ t("div", { className: "mb-5 flex items-center justify-between", children: [
             /* @__PURE__ */ r(h, { className: o("h-6 w-6", e ? void 0 : "text-primary/30"), style: e ? { color: e } : void 0 }),
-            s ? /* @__PURE__ */ r("span", { className: "flex items-center gap-0.5 text-amber-500", "aria-label": `${s} / 5`, children: Array.from({ length: 5 }).map((j, u) => /* @__PURE__ */ r(y, { className: "h-3.5 w-3.5" }, u)) }) : null
+            s ? /* @__PURE__ */ r("span", { className: "flex items-center gap-0.5 text-amber-500", "aria-label": `${s} / 5`, children: Array.from({ length: 5 }).map((v, p) => /* @__PURE__ */ r(g, { className: "h-3.5 w-3.5" }, p)) }) : null
           ] }),
           /* @__PURE__ */ r("blockquote", { className: "flex-1 text-[15px] leading-7 text-foreground/85", children: x }),
           /* @__PURE__ */ t("figcaption", { className: "mt-6 flex items-center gap-3", children: [
             n || /* @__PURE__ */ r(
               "span",
               {
-                style: p,
+                style: u,
                 className: o(
                   "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-xs font-bold",
                   !e && "bg-primary-soft text-primary"
                 ),
-                children: N(a)
+                children: y(a)
               }
             ),
             /* @__PURE__ */ t("div", { children: [
@@ -45,6 +44,6 @@ const A = b(
   }
 );
 export {
-  A as TestimonialCard
+  S as TestimonialCard
 };
 //# sourceMappingURL=TestimonialCard.js.map