npm - @ugurdemirel/landcraft - Versions diffs - 0.1.14 → 0.1.16 - Mend

@ugurdemirel/landcraft 0.1.14 → 0.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/dist/cjs/components/Pricing/Pricing.cjs CHANGED Viewed

@@ -1,3 +1,3 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),a=require("react"),P=require("./variants/Cards.cjs"),d=require("./variants/Bento.cjs"),j=require("./variants/Compact.cjs"),u=({className:i,plans:r,option:o="cards",defaultBilling:g="monthly",onSelect:t,...e})=>{const[n,s]=a.useState(g);return o==="compact"?c.jsx(j.PricingCompact,{className:i,plans:r,billing:n,onSelect:t,...e}):o==="bento"?c.jsx(d.PricingBento,{className:i,plans:r,billing:n,onSelect:t,...e}):c.jsx(P.PricingCards,{className:i,plans:r,billing:n,onSelect:t,onBillingChange:s,...e})};u.displayName="Pricing";exports.Pricing=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),C=require("react"),P=require("./variants/Cards.cjs"),a=require("./variants/Bento.cjs"),j=require("./variants/Compact.cjs"),s=({className:i,plans:n,option:u="cards",defaultBilling:l="monthly",yearlyBadge:r,onSelect:t,...e})=>{const[c,o]=C.useState(l);return u==="compact"?g.jsx(j.PricingCompact,{className:i,plans:n,billing:c,onBillingChange:o,yearlyBadge:r,onSelect:t,...e}):u==="bento"?g.jsx(a.PricingBento,{className:i,plans:n,billing:c,onBillingChange:o,yearlyBadge:r,onSelect:t,...e}):g.jsx(P.PricingCards,{className:i,plans:n,billing:c,onSelect:t,onBillingChange:o,yearlyBadge:r,...e})};s.displayName="Pricing";exports.Pricing=s;
 //# sourceMappingURL=Pricing.cjs.map

package/dist/cjs/components/Pricing/Pricing.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pricing.cjs","sources":["../../../../src/components/Pricing/Pricing.tsx"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport type { PricingProps } from \"./types\";\nimport { PricingCards } from \"./variants/Cards\";\nimport { PricingBento } from \"./variants/Bento\";\nimport { PricingCompact } from \"./variants/Compact\";\n\nexport const Pricing = ({\n className,\n plans,\n option = \"cards\",\n defaultBilling = \"monthly\",\n onSelect,\n ...props\n}: PricingProps) => {\n const [billing, setBilling] = useState<\"monthly\" \| \"yearly\">(defaultBilling);\n\n if (option === \"compact\") {\n return <PricingCompact className={className} plans={plans} billing={billing} onSelect={onSelect} {...props} ~~/>;\~~n }\n\n if (option === \"bento\") {\n return <PricingBento className={className} plans={plans} billing={billing} onSelect={onSelect} {...props} ~~/>;\~~n }\n\n return (\n <PricingCards\n className={className}\n plans={plans}\n billing={billing}\n onSelect={onSelect}\n onBillingChange={setBilling}\n {...props}\n />\n );\n};\nPricing.displayName = \"Pricing\";"],"names":["Pricing","className","plans","option","defaultBilling","onSelect","props","billing","setBilling","useState","~~PricingCompact~~","~~PricingBento~~","~~jsx~~","PricingCards"],"mappings":"gPAOaA,EAAU,CAAC,CACtB,UAAAC,EACA,MAAAC,EACA,OAAAC,EAAS,QACT,eAAAC,EAAiB,UACjB,SAAAC,EACA,GAAGC,CACL,IAAoB,CAClB,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAA+BL,CAAc,EAE3E,OAAID,IAAW,~~gBACLO~~,EAAAA,eAAA,~~CAAe~~,~~UAAAT~~,~~EAAsB~~,MAAAC,~~EAAc~~,~~QAAAK~~,~~EAAkB~~,~~SAAAF~~,~~EAAqB~~,GAAGC,~~EAAO~~,~~EAG1GH~~,IAAW,~~cACLQ~~,EAAAA,aAAA,~~CAAa~~,~~UAAAV~~,~~EAAsB~~,MAAAC,~~EAAc~~,~~QAAAK~~,~~EAAkB~~,~~SAAAF~~,~~EAAqB~~,GAAGC,~~EAAO~~,~~EAI1GM~~,EAAAA,~~IAACC~~,EAAAA,aAAA,CACC,~~UAAAZ~~,EACA,MAAAC,EACA,~~QAAAK~~,EACA,SAAAF,EACA,gBAAiBG,~~EAChB~~,~~GAAGF~~,CAAA,CAAA,CAGV,~~EACAN~~,EAAQ,YAAc"}
1	+ {"version":3,"file":"Pricing.cjs","sources":["../../../../src/components/Pricing/Pricing.tsx"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport type { PricingProps } from \"./types\";\nimport { PricingCards } from \"./variants/Cards\";\nimport { PricingBento } from \"./variants/Bento\";\nimport { PricingCompact } from \"./variants/Compact\";\n\nexport const Pricing = ({\n className,\n plans,\n option = \"cards\",\n defaultBilling = \"monthly\",\n yearlyBadge,\n onSelect,\n ...props\n}: PricingProps) => {\n const [billing, setBilling] = useState<\"monthly\" \| \"yearly\">(defaultBilling);\n\n if (option === \"compact\") {\n return (\n <PricingCompact\n className={className}\n plans={plans}\n billing={billing}\n onBillingChange={setBilling}\n yearlyBadge={yearlyBadge}\n onSelect={onSelect}\n {...props}\n />\n );\n }\n\n if (option === \"bento\") {\n return (\n <PricingBento\n className={className}\n plans={plans}\n billing={billing}\n onBillingChange={setBilling}\n yearlyBadge={yearlyBadge}\n onSelect={onSelect}\n {...props}\n />\n );\n }\n\n return (\n <PricingCards\n className={className}\n plans={plans}\n billing={billing}\n onSelect={onSelect}\n onBillingChange={setBilling}\n yearlyBadge={yearlyBadge}\n {...props}\n />\n );\n};\nPricing.displayName = \"Pricing\";"],"names":["Pricing","className","plans","option","defaultBilling","yearlyBadge","onSelect","props","billing","setBilling","useState","jsx","PricingCompact","PricingBento","PricingCards"],"mappings":"gPAOaA,EAAU,CAAC,CACtB,UAAAC,EACA,MAAAC,EACA,OAAAC,EAAS,QACT,eAAAC,EAAiB,UACjB,YAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAAoB,CAClB,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAA+BN,CAAc,EAE3E,OAAID,IAAW,UAEXQ,EAAAA,IAACC,EAAAA,eAAA,CACC,UAAAX,EACA,MAAAC,EACA,QAAAM,EACA,gBAAiBC,EACjB,YAAAJ,EACA,SAAAC,EACC,GAAGC,CAAA,CAAA,EAKNJ,IAAW,QAEXQ,EAAAA,IAACE,EAAAA,aAAA,CACC,UAAAZ,EACA,MAAAC,EACA,QAAAM,EACA,gBAAiBC,EACjB,YAAAJ,EACA,SAAAC,EACC,GAAGC,CAAA,CAAA,EAMRI,EAAAA,IAACG,EAAAA,aAAA,CACC,UAAAb,EACA,MAAAC,EACA,QAAAM,EACA,SAAAF,EACA,gBAAiBG,EACjB,YAAAJ,EACC,GAAGE,CAAA,CAAA,CAGV,EACAP,EAAQ,YAAc"}

package/dist/cjs/components/Pricing/parts.cjs CHANGED Viewed

@@ -1,3 +1,3 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("../../utils/cn.cjs"),l=require("../../utils/contrast.cjs"),a=require("../../utils/useTokenForeground.cjs"),u=require("../../icons.cjs");function m({value:e,billing:s,dim:r}){return e===null?o.jsx("span",{children:"Custom"}):o.jsxs(o.Fragment,{children:[o.jsxs("span",{className:"text-[2.6rem] font-semibold tracking-tight sm:text-[3rem]",children:["$",e]}),o.jsxs("span",{className:t.cn("text-sm font-normal",r&&"opacity-60"),children:["/",s==="monthly"?"mo":"yr"]})]})}function d({billing:e,onChange:s,dark:r}){const n=a.useTokenForeground("--color-accent");return o.jsxs("div",{className:"mb-10 flex items-center justify-center gap-4",children:[o.jsx("span",{className:t.cn("text-sm font-medium transition-colors",e==="monthly"?r?"text-white":"text-foreground":"text-muted-foreground"),children:"Monthly"}),o.jsx("button",{type:"button",role:"switch","aria-checked":e==="yearly","aria-label":"Billing period",onClick:()=>s(e==="monthly"?"yearly":"monthly"),className:t.cn("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",e==="yearly"?"bg-primary":"bg-border"),children:o.jsx("span",{className:t.cn("inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform duration-200",e==="yearly"?"translate-x-6":"translate-x-1")})}),o.jsxs("span",{className:t.cn("flex items-center gap-2 text-sm font-medium transition-colors",e==="yearly"?r?"text-white":"text-foreground":"text-muted-foreground"),children:["Yearly",o.jsx("span",{className:"rounded-full bg-accent px-2 py-0.5 text-xs font-semibold",style:{color:n},children:"−2 ay"})]})]})}function f({plan:e,billing:s,onSelect:r,dark:n}){const i=e.highlighted&&!e.customColor,c=e.customColor?l.getContrastText(e.customColor,"#111111","#ffffff"):void 0;return o.jsxs("button",{type:"button",onClick:()=>r==null?void 0:r(e,s),className:t.cn("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",i||e.customColor?"hover:brightness-95":n?"bg-white text-black hover:bg-white/90":"border border-border text-foreground hover:bg-surface"),style:e.customColor?{backgroundColor:e.customColor,color:c}:i?{backgroundColor:"rgb(var(--color-primary))",color:"rgb(var(--color-on-primary))"}:void 0,children:[e.cta||"Start",o.jsx(u.ArrowRight,{className:"h-4 w-4 opacity-60"})]})}exports.BillingToggle=d;exports.PlanButton=f;exports.PriceValue=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("../../utils/cn.cjs"),l=require("../../utils/contrast.cjs"),a=require("../../utils/useTokenForeground.cjs"),u=require("../../icons.cjs");function m({value:e,billing:n,dim:r}){return e===null?o.jsx("span",{children:"Custom"}):o.jsxs(o.Fragment,{children:[o.jsxs("span",{className:"text-[2.6rem] font-semibold tracking-tight sm:text-[3rem]",children:["$",e]}),o.jsxs("span",{className:t.cn("text-sm font-normal",r&&"opacity-60"),children:["/",n==="monthly"?"mo":"yr"]})]})}function f({billing:e,onChange:n,dark:r,yearlyBadge:s}){const i=a.useTokenForeground("--color-accent","#0f172a");return o.jsxs("div",{className:"mb-10 flex items-center justify-center gap-4",children:[o.jsx("span",{className:t.cn("text-sm font-medium transition-colors",e==="monthly"?r?"text-white":"text-foreground":"text-muted-foreground"),children:"Monthly"}),o.jsx("button",{type:"button",role:"switch","aria-checked":e==="yearly","aria-label":"Billing period",onClick:()=>n(e==="monthly"?"yearly":"monthly"),className:t.cn("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",e==="yearly"?"bg-primary":"bg-border"),children:o.jsx("span",{className:t.cn("inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform duration-200",e==="yearly"?"translate-x-6":"translate-x-1")})}),o.jsxs("span",{className:t.cn("flex items-center gap-2 text-sm font-medium transition-colors",e==="yearly"?r?"text-white":"text-foreground":"text-muted-foreground"),children:["Yearly",s?o.jsx("span",{className:"rounded-full bg-accent px-2 py-0.5 text-xs font-semibold",style:{color:i},children:s}):null]})]})}function d({plan:e,billing:n,onSelect:r,dark:s}){const i=e.highlighted&&!e.customColor,c=e.customColor?l.getContrastText(e.customColor,"#111111","#ffffff"):void 0;return o.jsxs("button",{type:"button",onClick:()=>r==null?void 0:r(e,n),className:t.cn("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",i||e.customColor?"hover:brightness-95":s?"bg-white text-black hover:bg-white/90":"border border-border text-foreground hover:bg-surface"),style:e.customColor?{backgroundColor:e.customColor,color:c}:i?{backgroundColor:"rgb(var(--color-primary))",color:"rgb(var(--color-on-primary))"}:void 0,children:[e.cta||"Start",o.jsx(u.ArrowRight,{className:"h-4 w-4 opacity-60"})]})}exports.BillingToggle=f;exports.PlanButton=d;exports.PriceValue=m;
 //# sourceMappingURL=parts.cjs.map

package/dist/cjs/components/Pricing/parts.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"parts.cjs","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}: {\n billing: \"monthly\" \| \"yearly\";\n onChange: (b: \"monthly\" \| \"yearly\") => void;\n dark?: boolean;\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.\n const accentText = useTokenForeground(\"--color-accent\");\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 <span\n className=\"rounded-full bg-accent px-2 py-0.5 text-xs font-semibold\"\n style={{ color: accentText }}\n >\n ~~−2 ay~~\n </span>\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","accentText","useTokenForeground","PlanButton","plan","onSelect","isHighlighted","fg","getContrastText","ArrowRight"],"mappings":"wQAOO,SAASA,EAAW,CACzB,MAAAC,EACA,QAAAC,EACA,IAAAC,CACF,EAKG,CACD,OAAIF,IAAU,KACLG,EAAAA,IAAC,QAAK,SAAA,QAAA,CAAM,EAGnBC,EAAAA,KAAAC,WAAA,CACE,SAAA,CAAAD,EAAAA,KAAC,OAAA,CAAK,UAAU,4DAA4D,SAAA,CAAA,IAAEJ,CAAA,EAAM,SACnF,OAAA,CAAK,UAAWM,EAAAA,GAAG,sBAAuBJ,GAAO,YAAY,EAAG,SAAA,CAAA,IAC7DD,IAAY,UAAY,KAAO,IAAA,CAAA,CACnC,CAAA,EACF,CAEJ,CAEO,SAASM,EAAc,CAC5B,QAAAN,EACA,SAAAO,EACA,KAAAC,CACF,~~EAIG~~,~~CAID~~,MAAMC,EAAaC,EAAAA,mBAAmB,~~gBAAgB~~,~~EACtD~~,~~OACEP~~,EAAAA,KAAC,MAAA,CAAI,UAAU,+CACb,SAAA,CAAAD,EAAAA,IAAC,OAAA,CACC,UAAWG,EAAAA,GACT,wCACAL,IAAY,UAAaQ,EAAO,aAAe,kBAAqB,uBAAA,EAEvE,SAAA,SAAA,CAAA,EAGDN,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,KAAK,SACL,eAAcF,IAAY,SAC1B,aAAW,iBACX,QAAS,IAAMO,EAASP,IAAY,UAAY,SAAW,SAAS,EACpE,UAAWK,EAAAA,GACT,iHACA,2IACAL,IAAY,SAAW,aAAe,WAAA,EAGxC,SAAAE,EAAAA,IAAC,OAAA,CACC,UAAWG,EAAAA,GACT,gGACAL,IAAY,SAAW,gBAAkB,eAAA,CAC3C,CAAA,CACF,CAAA,EAEFG,EAAAA,KAAC,OAAA,CACC,UAAWE,EAAAA,GACT,gEACAL,IAAY,SAAYQ,EAAO,aAAe,kBAAqB,uBAAA,EAEtE,SAAA,CAAA,~~SAECN~~,EAAAA,IAAC,OAAA,CACC,UAAU,2DACV,MAAO,CAAE,~~MAAOO~~,CAAA,~~EACjB~~,~~SAAA~~,~~OAAA~~,CAAA,~~CAED~~,CAAA,CAAA,~~CACF~~,EACF,CAEJ,CAEO,~~SAASE~~,EAAW,CACzB,KAAAC,EACA,~~QAAAZ~~,EACA,~~SAAAa~~,EACA,~~KAAAL~~,CACF,EAKG,CACD,~~MAAMM~~,EAAgBF,EAAK,aAAe,CAACA,EAAK,YAC1CG,EAAKH,EAAK,YAAcI,EAAAA,gBAAgBJ,EAAK,YAAa,UAAW,SAAS,EAAI,OACxF,~~OACET~~,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,QAAS,~~IAAMU~~,GAAA,YAAAA,EAAWD,~~EAAMZ~~,GAChC,UAAWK,EAAAA,GACT,yIACA,~~sGACAS~~,GAAiBF,EAAK,YAClB,~~sBACAJ~~,EACE,wCACA,uDAAA,EAER,~~MACEI~~,EAAK,YACD,CAAE,gBAAiBA,EAAK,YAAa,MAAOG,CAAA,EAC5CD,EACE,CACE,gBAAiB,4BACjB,MAAO,8BAAA,EAET,OAGP,SAAA,CAAAF,EAAK,KAAO,~~QACbV~~,EAAAA,~~IAACe~~,EAAAA,WAAA,CAAW,UAAU,oBAAA,CAAqB,CAAA,CAAA,CAAA,CAGjD"}
1	+ {"version":3,"file":"parts.cjs","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":"wQAOO,SAASA,EAAW,CACzB,MAAAC,EACA,QAAAC,EACA,IAAAC,CACF,EAKG,CACD,OAAIF,IAAU,KACLG,EAAAA,IAAC,QAAK,SAAA,QAAA,CAAM,EAGnBC,EAAAA,KAAAC,WAAA,CACE,SAAA,CAAAD,EAAAA,KAAC,OAAA,CAAK,UAAU,4DAA4D,SAAA,CAAA,IAAEJ,CAAA,EAAM,SACnF,OAAA,CAAK,UAAWM,EAAAA,GAAG,sBAAuBJ,GAAO,YAAY,EAAG,SAAA,CAAA,IAC7DD,IAAY,UAAY,KAAO,IAAA,CAAA,CACnC,CAAA,EACF,CAEJ,CAEO,SAASM,EAAc,CAC5B,QAAAN,EACA,SAAAO,EACA,KAAAC,EACA,YAAAC,CACF,EAKG,CAOD,MAAMC,EAAaC,EAAAA,mBAAmB,iBAAkB,SAAS,EACjE,OACER,EAAAA,KAAC,MAAA,CAAI,UAAU,+CACb,SAAA,CAAAD,EAAAA,IAAC,OAAA,CACC,UAAWG,EAAAA,GACT,wCACAL,IAAY,UAAaQ,EAAO,aAAe,kBAAqB,uBAAA,EAEvE,SAAA,SAAA,CAAA,EAGDN,EAAAA,IAAC,SAAA,CACC,KAAK,SACL,KAAK,SACL,eAAcF,IAAY,SAC1B,aAAW,iBACX,QAAS,IAAMO,EAASP,IAAY,UAAY,SAAW,SAAS,EACpE,UAAWK,EAAAA,GACT,iHACA,2IACAL,IAAY,SAAW,aAAe,WAAA,EAGxC,SAAAE,EAAAA,IAAC,OAAA,CACC,UAAWG,EAAAA,GACT,gGACAL,IAAY,SAAW,gBAAkB,eAAA,CAC3C,CAAA,CACF,CAAA,EAEFG,EAAAA,KAAC,OAAA,CACC,UAAWE,EAAAA,GACT,gEACAL,IAAY,SAAYQ,EAAO,aAAe,kBAAqB,uBAAA,EAEtE,SAAA,CAAA,SAEEC,EACCP,EAAAA,IAAC,OAAA,CACC,UAAU,2DACV,MAAO,CAAE,MAAOQ,CAAA,EAEf,SAAAD,CAAA,CAAA,EAED,IAAA,CAAA,CAAA,CACN,EACF,CAEJ,CAEO,SAASG,EAAW,CACzB,KAAAC,EACA,QAAAb,EACA,SAAAc,EACA,KAAAN,CACF,EAKG,CACD,MAAMO,EAAgBF,EAAK,aAAe,CAACA,EAAK,YAC1CG,EAAKH,EAAK,YAAcI,EAAAA,gBAAgBJ,EAAK,YAAa,UAAW,SAAS,EAAI,OACxF,OACEV,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,QAAS,IAAMW,GAAA,YAAAA,EAAWD,EAAMb,GAChC,UAAWK,EAAAA,GACT,yIACA,sGACAU,GAAiBF,EAAK,YAClB,sBACAL,EACE,wCACA,uDAAA,EAER,MACEK,EAAK,YACD,CAAE,gBAAiBA,EAAK,YAAa,MAAOG,CAAA,EAC5CD,EACE,CACE,gBAAiB,4BACjB,MAAO,8BAAA,EAET,OAGP,SAAA,CAAAF,EAAK,KAAO,QACbX,EAAAA,IAACgB,EAAAA,WAAA,CAAW,UAAU,oBAAA,CAAqB,CAAA,CAAA,CAAA,CAGjD"}

package/dist/cjs/components/Pricing/variants/Bento.cjs CHANGED Viewed

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

package/dist/cjs/components/Pricing/variants/Bento.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Bento.cjs","sources":["../../../../../src/components/Pricing/variants/Bento.tsx"],"sourcesContent":["import { cn } from \"../../../utils/cn\";\nimport { getContrastText } from \"../../../utils/contrast\";\nimport { PriceValue, 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, onSelect, ...props }: BentoProps) => {\n return (\n <div className={cn(\"w-full\", className)} {...props}>\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 ~~flex-wrap~~ items-start justify-between gap-4\">\n <div>\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(\"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","onSelect","props","cn","jsx","plan","isHighlighted","bg","fg","getContrastText","~~jsxs","~~PriceValue","feature","Check","PlanButton"],"mappings":"2PAUaA,EAAe,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,QAAAC,EAAS,SAAAC,EAAU,GAAGC,~~WAElE~~,~~MAAA~~,~~CAAI~~,UAAWC,EAAAA,GAAG,~~SAAUL~~,CAAS,EAAI,~~GAAGI~~,EAC3C,~~SAAAE~~,~~MAAC~~,~~OAAI~~,UAAU,wCACZ,~~SAAAL~~,EAAM,~~IAAKM~~,GAAS,CACnB,MAAMC,EAAgBD,EAAK,aAAe,CAACA,EAAK,YAC1CE,EAAKF,EAAK,cAAgBC,EAAgB,4BAA8B,QACxEE,EAAKH,EAAK,YACZI,EAAAA,gBAAgBJ,EAAK,YAAa,UAAW,SAAS,EACtDC,EACE,+BACA,OACN,~~OACEI~~,EAAAA,KAAC,MAAA,CAEC,~~UAAWP~~,EAAAA,GACT,~~sCACAI~~,EACI,gBACA,iCAAA,EAEN,MAAOA,EAAK,CAAE,gBAAiBA,EAAI,MAAOC,GAAO,OAEjD,SAAA,~~CAAAE~~,EAAAA,KAAC,MAAA,CAAI,UAAU,~~mDACb~~,SAAA,CAAAA,~~OAAC~~,MAAA,~~CACC~~,SAAA,~~CAAAN~~,EAAAA,IAAC,KAAA,CAAG,UAAWD,EAAAA,GAAG,~~oDAAqDI~~,EAAK,eAAiB,iBAAiB,EAC3G,SAAAF,EAAK,IAAA,CACR,EACCA,EAAK,~~YACJD~~,EAAAA,IAAC,IAAA,CAAE,UAAWD,EAAAA,GAAG,~~iBAAkBI~~,EAAK,OAAY,uBAAuB,EACxE,SAAAF,EAAK,YACR,EACE,IAAA,EACN,~~EACAD~~,EAAAA,IAAC,OAAI,UAAWD,KAAG,~~eAAgBI~~,EAAK,eAAiB,iBAAiB,~~EACxE~~,~~SAAAH~~,EAAAA,IAACO,EAAAA,WAAA,CAAW,~~MAAOX~~,IAAY,~~UAAYK~~,EAAK,QAAUA,EAAK,OAAQ,~~QAAAL~~,EAAkB,IAAK,~~CAACO~~,CAAA,CAAI,CAAA,CACrG,CAAA,EACF,~~EACAH~~,EAAAA,IAAC,KAAA,CACC,UAAWD,EAAAA,GACT,~~iEACAI~~,EAAK,eAAiB,MAAA,EAGvB,SAAAF,EAAK,SAAS,~~IAAKO~~,~~GAClBF~~,EAAAA,KAAC,KAAA,CAAiB,~~UAAWP~~,EAAAA,GAAG,~~2BAA4BI~~,EAAK,eAAiB,uBAAuB,EACvG,SAAA,~~CAAAH~~,MAACS,EAAAA,OAAM,UAAWV,EAAAA,GAAG,~~0BAA2BI~~,EAAK,eAAiB,cAAc,EAAG,~~EACtFK~~,CAAA,CAAA,EAFMA,CAGT,CACD,CAAA,CAAA,EAEHR,EAAAA,IAAC,MAAA,CAAI,UAAU,OACb,SAAAA,EAAAA,IAACU,EAAAA,WAAA,CAAW,~~KAAAT~~,EAAY,~~QAAAL~~,EAAkB,~~SAAAC~~,EAAoB,KAAM,~~CAACM~~,CAAA,CAAI,CAAA,CAC3E,CAAA,CAAA,EAvCKF,EAAK,IAAA,CA0ChB,CAAC,~~EACH~~,EACF,~~EAGJR~~,EAAa,YAAc"}
1	+ {"version":3,"file":"Bento.cjs","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":"2PAUaA,EAAe,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,QAAAC,EAAS,gBAAAC,EAAiB,SAAAC,EAAU,YAAAC,EAAa,GAAGC,KAEjGC,EAAAA,KAAC,OAAI,UAAWC,EAAAA,GAAG,SAAUR,CAAS,EAAI,GAAGM,EAC3C,SAAA,CAAAG,EAAAA,IAACC,EAAAA,cAAA,CAAc,QAAAR,EAAkB,SAAUC,EAAiB,YAAAE,EAA0B,QACrF,MAAA,CAAI,UAAU,wCACZ,SAAAJ,EAAM,IAAKU,GAAS,CACnB,MAAMC,EAAgBD,EAAK,aAAe,CAACA,EAAK,YAC1CE,EAAKF,EAAK,cAAgBC,EAAgB,4BAA8B,QACxEE,EAAKH,EAAK,YACZI,EAAAA,gBAAgBJ,EAAK,YAAa,UAAW,SAAS,EACtDC,EACE,+BACA,OACN,OACEL,EAAAA,KAAC,MAAA,CAEC,UAAWC,EAAAA,GACT,sCACAK,EACI,gBACA,iCAAA,EAEN,MAAOA,EAAK,CAAE,gBAAiBA,EAAI,MAAOC,GAAO,OAEjD,SAAA,CAAAP,EAAAA,KAAC,MAAA,CAAI,UAAU,yCACb,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,UACb,SAAA,CAAAE,EAAAA,IAAC,KAAA,CAAG,UAAWD,EAAAA,GAAG,oDAAqDK,EAAK,eAAiB,iBAAiB,EAC3G,SAAAF,EAAK,IAAA,CACR,EACCA,EAAK,YACJF,EAAAA,IAAC,IAAA,CAAE,UAAWD,EAAAA,GAAG,iBAAkBK,EAAK,OAAY,uBAAuB,EACxE,SAAAF,EAAK,YACR,EACE,IAAA,EACN,EACAF,EAAAA,IAAC,OAAI,UAAWD,KAAG,wBAAyBK,EAAK,eAAiB,iBAAiB,EACjF,SAAAJ,EAAAA,IAACO,EAAAA,WAAA,CAAW,MAAOd,IAAY,UAAYS,EAAK,QAAUA,EAAK,OAAQ,QAAAT,EAAkB,IAAK,CAACW,CAAA,CAAI,CAAA,CACrG,CAAA,EACF,EACAJ,EAAAA,IAAC,KAAA,CACC,UAAWD,EAAAA,GACT,iEACAK,EAAK,eAAiB,MAAA,EAGvB,SAAAF,EAAK,SAAS,IAAKM,GAClBV,EAAAA,KAAC,KAAA,CAAiB,UAAWC,EAAAA,GAAG,2BAA4BK,EAAK,eAAiB,uBAAuB,EACvG,SAAA,CAAAJ,MAACS,EAAAA,OAAM,UAAWV,EAAAA,GAAG,0BAA2BK,EAAK,eAAiB,cAAc,EAAG,EACtFI,CAAA,CAAA,EAFMA,CAGT,CACD,CAAA,CAAA,EAEHR,EAAAA,IAAC,MAAA,CAAI,UAAU,OACb,SAAAA,EAAAA,IAACU,EAAAA,WAAA,CAAW,KAAAR,EAAY,QAAAT,EAAkB,SAAAE,EAAoB,KAAM,CAACS,CAAA,CAAI,CAAA,CAC3E,CAAA,CAAA,EAvCKF,EAAK,IAAA,CA0ChB,CAAC,CAAA,CACH,CAAA,EACF,EAGJZ,EAAa,YAAc"}

package/dist/cjs/components/Pricing/variants/Cards.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../../utils/cn.cjs"),f=require("../../../utils/contrast.cjs"),i=require("../parts.cjs"),h=require("../../../icons.cjs"),a=({className:n,plans:d,billing:o,onSelect:m,onBillingChange:u,...x})=>r.jsxs("div",{className:s.cn("w-full",n),...x,children:[r.jsx(i.BillingToggle,{billing:o,onChange:u}),r.jsx("div",{className:"grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3",children:d.map(e=>{const c=e.highlighted&&!e.customColor,t=e.customColor||(c?"rgb(var(--color-primary))":void 0),g=e.customColor?f.getContrastText(e.customColor,"#111111","#ffffff"):c?"rgb(var(--color-on-primary))":void 0;return r.jsxs("div",{className:s.cn("relative flex flex-col rounded-xl p-7",t?"shadow-raised":"border border-border bg-surface",!t&&c&&"border-primary"),style:t?{backgroundColor:t,color:g}:void 0,children:[c?r.jsx("span",{className:s.cn("absolute -top-3 left-7 rounded-full px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wider",!t&&"bg-primary text-on-primary"),style:t?{backgroundColor:"rgb(var(--color-on-primary))",color:"rgb(var(--color-primary))"}:void 0,children:"Most popular"}):null,r.jsx("h3",{className:s.cn("font-display text-lg font-semibold tracking-tight",t?"text-current":"text-foreground"),children:e.name}),e.description?r.jsx("p",{className:s.cn("mt-1.5 text-sm",t?void 0:"text-muted-foreground"),children:e.description}):null,r.jsx("div",{className:s.cn("mt-6 flex items-baseline font-display",t?"text-current":"text-foreground"),children:r.jsx(i.PriceValue,{value:o==="monthly"?e.monthly:e.yearly,billing:o,dim:!t})}),r.jsx("ul",{className:s.cn("mt-7 flex-1 space-y-2.5 text-sm",t?"text-current":"text-muted-foreground"),children:e.features.map(l=>r.jsxs("li",{className:"flex items-start gap-2.5",children:[r.jsx(h.Check,{className:s.cn("mt-0.5 h-4 w-4 shrink-0",t?"text-current":"text-primary")}),l]},l))}),r.jsx("div",{className:"mt-8",children:r.jsx(i.PlanButton,{plan:e,billing:o,onSelect:m,dark:!t})})]},e.name)})})]});a.displayName="PricingCards";exports.PricingCards=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../../utils/cn.cjs"),h=require("../../../utils/contrast.cjs"),i=require("../parts.cjs"),y=require("../../../icons.cjs"),a=({className:n,plans:d,billing:o,onBillingChange:m,onSelect:u,yearlyBadge:x,...g})=>r.jsxs("div",{className:s.cn("w-full",n),...g,children:[r.jsx(i.BillingToggle,{billing:o,onChange:m,yearlyBadge:x}),r.jsx("div",{className:"grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3",children:d.map(e=>{const c=e.highlighted&&!e.customColor,t=e.customColor||(c?"rgb(var(--color-primary))":void 0),f=e.customColor?h.getContrastText(e.customColor,"#111111","#ffffff"):c?"rgb(var(--color-on-primary))":void 0;return r.jsxs("div",{className:s.cn("relative flex flex-col rounded-xl p-7",t?"shadow-raised":"border border-border bg-surface",!t&&c&&"border-primary"),style:t?{backgroundColor:t,color:f}:void 0,children:[c?r.jsx("span",{className:s.cn("absolute -top-3 left-7 rounded-full px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wider",!t&&"bg-primary text-on-primary"),style:t?{backgroundColor:"rgb(var(--color-on-primary))",color:"rgb(var(--color-primary))"}:void 0,children:"Most popular"}):null,r.jsx("h3",{className:s.cn("font-display text-lg font-semibold tracking-tight",t?"text-current":"text-foreground"),children:e.name}),e.description?r.jsx("p",{className:s.cn("mt-1.5 text-sm",t?void 0:"text-muted-foreground"),children:e.description}):null,r.jsx("div",{className:s.cn("mt-6 flex items-baseline font-display",t?"text-current":"text-foreground"),children:r.jsx(i.PriceValue,{value:o==="monthly"?e.monthly:e.yearly,billing:o,dim:!t})}),r.jsx("ul",{className:s.cn("mt-7 flex-1 space-y-2.5 text-sm",t?"text-current":"text-muted-foreground"),children:e.features.map(l=>r.jsxs("li",{className:"flex items-start gap-2.5",children:[r.jsx(y.Check,{className:s.cn("mt-0.5 h-4 w-4 shrink-0",t?"text-current":"text-primary")}),l]},l))}),r.jsx("div",{className:"mt-8",children:r.jsx(i.PlanButton,{plan:e,billing:o,onSelect:u,dark:!t})})]},e.name)})})]});a.displayName="PricingCards";exports.PricingCards=a;
 //# sourceMappingURL=Cards.cjs.map

package/dist/cjs/components/Pricing/variants/Cards.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Cards.cjs","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 ~~onBillingChange: (billing: \"monthly\" \| \"yearly\") => void;\n~~}\n\nexport const PricingCards = ({ className, plans, billing, onSelect, ~~onBillingChange~~, ...props }: CardsProps) => {\n return (\n <div className={cn(\"w-full\", className)} {...props}>\n <BillingToggle billing={billing} onChange={onBillingChange} />\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","onSelect","~~onBillingChange~~","props","jsxs","cn","jsx","BillingToggle","plan","isHighlighted","bg","fg","getContrastText","PriceValue","feature","Check","PlanButton"],"mappings":"~~2PAWaA~~,EAAe,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,QAAAC,EAAS,SAAAC,EAAU,~~gBAAAC~~,~~EAAiB~~,GAAGC,~~KAEpFC~~,EAAAA,KAAC,OAAI,UAAWC,EAAAA,GAAG,~~SAAUP~~,CAAS,EAAI,~~GAAGK~~,EAC3C,SAAA,CAAAG,EAAAA,IAACC,EAAAA,cAAA,CAAc,~~QAAAP~~,EAAkB,~~SAAUE~~,~~CAAA~~,~~CAAiB~~,~~QAC3D~~,MAAA,CAAI,UAAU,uDACZ,~~SAAAH~~,EAAM,~~IAAKS~~,GAAS,CACnB,MAAMC,EAAgBD,EAAK,aAAe,CAACA,EAAK,YAC1CE,EAAKF,EAAK,cAAgBC,EAAgB,4BAA8B,QACxEE,EAAKH,EAAK,YACZI,EAAAA,gBAAgBJ,EAAK,YAAa,UAAW,SAAS,EACtDC,EACE,+BACA,OACN,OACEL,EAAAA,KAAC,MAAA,CAEC,UAAWC,EAAAA,GACT,wCACAK,EAAK,gBAAkB,kCACvB,CAACA,GAAMD,GAAiB,gBAAA,EAE1B,MAAOC,EAAK,CAAE,gBAAiBA,EAAI,MAAOC,GAAO,OAEhD,SAAA,CAAAF,EACCH,EAAAA,IAAC,OAAA,CACC,UAAWD,EAAAA,GACT,qGACA,CAACK,GAAM,4BAAA,EAET,MACEA,EACI,CAAE,gBAAiB,+BAAgC,MAAO,6BAC1D,OAEP,SAAA,cAAA,CAAA,EAGC,KACJJ,EAAAA,IAAC,KAAA,CAAG,UAAWD,EAAAA,GAAG,oDAAqDK,EAAK,eAAiB,iBAAiB,EAC3G,SAAAF,EAAK,IAAA,CACR,EACCA,EAAK,YACJF,EAAAA,IAAC,IAAA,CAAE,UAAWD,EAAAA,GAAG,iBAAkBK,EAAK,OAAY,uBAAuB,EACxE,SAAAF,EAAK,YACR,EACE,KACJF,EAAAA,IAAC,OAAI,UAAWD,EAAAA,GAAG,wCAAyCK,EAAK,eAAiB,iBAAiB,EACjG,SAAAJ,EAAAA,IAACO,EAAAA,WAAA,CAAW,~~MAAOb~~,IAAY,~~UAAYQ~~,EAAK,QAAUA,EAAK,OAAQ,~~QAAAR~~,EAAkB,IAAK,~~CAACU~~,CAAA,CAAI,CAAA,CACrG,QACC,KAAA,CAAG,UAAWL,EAAAA,GAAG,kCAAmCK,EAAK,eAAiB,uBAAuB,EAC/F,SAAAF,EAAK,SAAS,IAAKM,GAClBV,EAAAA,KAAC,KAAA,CAAiB,UAAU,2BAC1B,SAAA,CAAAE,MAACS,EAAAA,OAAM,UAAWV,EAAAA,GAAG,0BAA2BK,EAAK,eAAiB,cAAc,EAAG,EACtFI,CAAA,GAFMA,CAGT,CACD,EACH,EACAR,EAAAA,IAAC,MAAA,CAAI,UAAU,OACb,SAAAA,EAAAA,IAACU,EAAAA,WAAA,CAAW,KAAAR,EAAY,~~QAAAR~~,EAAkB,~~SAAAC~~,EAAoB,KAAM,CAACS,CAAA,CAAI,CAAA,CAC3E,CAAA,CAAA,EA5CKF,EAAK,IAAA,CA+ChB,CAAC,CAAA,CACH,CAAA,EACF,~~EAGJX~~,EAAa,YAAc"}
1	+ {"version":3,"file":"Cards.cjs","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":"2PAUaA,EAAe,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,QAAAC,EAAS,gBAAAC,EAAiB,SAAAC,EAAU,YAAAC,EAAa,GAAGC,KAEjGC,EAAAA,KAAC,OAAI,UAAWC,EAAAA,GAAG,SAAUR,CAAS,EAAI,GAAGM,EAC3C,SAAA,CAAAG,EAAAA,IAACC,EAAAA,cAAA,CAAc,QAAAR,EAAkB,SAAUC,EAAiB,YAAAE,EAA0B,QACrF,MAAA,CAAI,UAAU,uDACZ,SAAAJ,EAAM,IAAKU,GAAS,CACnB,MAAMC,EAAgBD,EAAK,aAAe,CAACA,EAAK,YAC1CE,EAAKF,EAAK,cAAgBC,EAAgB,4BAA8B,QACxEE,EAAKH,EAAK,YACZI,EAAAA,gBAAgBJ,EAAK,YAAa,UAAW,SAAS,EACtDC,EACE,+BACA,OACN,OACEL,EAAAA,KAAC,MAAA,CAEC,UAAWC,EAAAA,GACT,wCACAK,EAAK,gBAAkB,kCACvB,CAACA,GAAMD,GAAiB,gBAAA,EAE1B,MAAOC,EAAK,CAAE,gBAAiBA,EAAI,MAAOC,GAAO,OAEhD,SAAA,CAAAF,EACCH,EAAAA,IAAC,OAAA,CACC,UAAWD,EAAAA,GACT,qGACA,CAACK,GAAM,4BAAA,EAET,MACEA,EACI,CAAE,gBAAiB,+BAAgC,MAAO,6BAC1D,OAEP,SAAA,cAAA,CAAA,EAGC,KACJJ,EAAAA,IAAC,KAAA,CAAG,UAAWD,EAAAA,GAAG,oDAAqDK,EAAK,eAAiB,iBAAiB,EAC3G,SAAAF,EAAK,IAAA,CACR,EACCA,EAAK,YACJF,EAAAA,IAAC,IAAA,CAAE,UAAWD,EAAAA,GAAG,iBAAkBK,EAAK,OAAY,uBAAuB,EACxE,SAAAF,EAAK,YACR,EACE,KACJF,EAAAA,IAAC,OAAI,UAAWD,EAAAA,GAAG,wCAAyCK,EAAK,eAAiB,iBAAiB,EACjG,SAAAJ,EAAAA,IAACO,EAAAA,WAAA,CAAW,MAAOd,IAAY,UAAYS,EAAK,QAAUA,EAAK,OAAQ,QAAAT,EAAkB,IAAK,CAACW,CAAA,CAAI,CAAA,CACrG,QACC,KAAA,CAAG,UAAWL,EAAAA,GAAG,kCAAmCK,EAAK,eAAiB,uBAAuB,EAC/F,SAAAF,EAAK,SAAS,IAAKM,GAClBV,EAAAA,KAAC,KAAA,CAAiB,UAAU,2BAC1B,SAAA,CAAAE,MAACS,EAAAA,OAAM,UAAWV,EAAAA,GAAG,0BAA2BK,EAAK,eAAiB,cAAc,EAAG,EACtFI,CAAA,GAFMA,CAGT,CACD,EACH,EACAR,EAAAA,IAAC,MAAA,CAAI,UAAU,OACb,SAAAA,EAAAA,IAACU,EAAAA,WAAA,CAAW,KAAAR,EAAY,QAAAT,EAAkB,SAAAE,EAAoB,KAAM,CAACS,CAAA,CAAI,CAAA,CAC3E,CAAA,CAAA,EA5CKF,EAAK,IAAA,CA+ChB,CAAC,CAAA,CACH,CAAA,EACF,EAGJZ,EAAa,YAAc"}

package/dist/cjs/components/Pricing/variants/Compact.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),l=require("../../../utils/cn.cjs"),f=require("../parts.cjs"),h=require("../../../icons.cjs"),n=({className:a,plans:d,billing:t,onSelect:m,...u})=>{const x=e=>e===null?"Custom":`$${e}`;return r.jsx("div",{className:l.cn("w-full",a),...u,children:r.jsx("div",{className:"divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface",children:d.map(e=>{const o=t==="monthly"?e.monthly:e.yearly,s=e.highlighted&&!e.customColor,c=e.customColor?"rgb(var(--color-surface))":s?"rgb(var(--color-primary-soft))":void 0,g=e.customColor?e.customColor:s?"rgb(var(--color-primary))":void 0;return r.jsxs("div",{className:l.cn("group flex flex-col gap-5 p-5 transition-colors duration-200 hover:bg-surface-strong sm:flex-row sm:items-center sm:justify-between",s&&"bg-primary-soft/60"),style:c?{backgroundColor:c}:void 0,children:[r.jsxs("div",{className:"min-w-0",children:[r.jsxs("div",{className:"flex items-center gap-2.5",children:[r.jsx("h3",{className:"font-display text-lg font-semibold tracking-tight text-foreground",children:e.name}),s?r.jsx("span",{className:"rounded-full bg-primary px-2.5 py-0.5 text-[11px] font-semibold text-on-primary uppercase tracking-wider",children:"Popular"}):null]}),e.description?r.jsx("p",{className:"mt-1 truncate text-sm text-muted-foreground",children:e.description}):null]}),r.jsxs("div",{className:"flex items-center gap-6",children:[r.jsx("ul",{className:"hidden items-center gap-4 lg:flex",children:e.features.slice(0,3).map(i=>r.jsxs("li",{className:"flex items-center gap-1.5 text-sm text-muted-foreground",style:{color:g},children:[r.jsx(h.Check,{className:"h-3.5 w-3.5 text-current"}),i]},i))}),r.jsxs("div",{className:"font-display text-2xl font-semibold tracking-tight text-foreground",children:[x(o),o!==null?r.jsxs("span",{className:"text-sm font-normal text-muted-foreground",children:["/",t==="monthly"?"mo":"yr"]}):null]}),r.jsx(f.PlanButton,{plan:e,billing:t,onSelect:m})]})]},e.name)})})})};n.displayName="PricingCompact";exports.PricingCompact=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),l=require("../../../utils/cn.cjs"),n=require("../parts.cjs"),y=require("../../../icons.cjs"),a=({className:d,plans:m,billing:s,onBillingChange:u,onSelect:x,yearlyBadge:g,...h})=>{const f=e=>e===null?"Custom":`$${e}`;return r.jsxs("div",{className:l.cn("w-full",d),...h,children:[r.jsx(n.BillingToggle,{billing:s,onChange:u,yearlyBadge:g}),r.jsx("div",{className:"divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface",children:m.map(e=>{const o=s==="monthly"?e.monthly:e.yearly,t=e.highlighted&&!e.customColor,c=e.customColor?"rgb(var(--color-surface))":t?"rgb(var(--color-primary-soft))":void 0,p=e.customColor?e.customColor:t?"rgb(var(--color-primary))":void 0;return r.jsxs("div",{className:l.cn("group flex flex-col gap-5 p-5 transition-colors duration-200 hover:bg-surface-strong sm:flex-row sm:items-center sm:justify-between",t&&"bg-primary-soft/60"),style:c?{backgroundColor:c}:void 0,children:[r.jsxs("div",{className:"min-w-0",children:[r.jsxs("div",{className:"flex items-center gap-2.5",children:[r.jsx("h3",{className:"font-display text-lg font-semibold tracking-tight text-foreground",children:e.name}),t?r.jsx("span",{className:"rounded-full bg-primary px-2.5 py-0.5 text-[11px] font-semibold text-on-primary uppercase tracking-wider",children:"Popular"}):null]}),e.description?r.jsx("p",{className:"mt-1 truncate text-sm text-muted-foreground",children:e.description}):null]}),r.jsxs("div",{className:"flex items-center gap-6",children:[r.jsx("ul",{className:"hidden items-center gap-4 lg:flex",children:e.features.slice(0,3).map(i=>r.jsxs("li",{className:"flex items-center gap-1.5 text-sm text-muted-foreground",style:{color:p},children:[r.jsx(y.Check,{className:"h-3.5 w-3.5 text-current"}),i]},i))}),r.jsxs("div",{className:"font-display text-2xl font-semibold tracking-tight text-foreground",children:[f(o),o!==null?r.jsxs("span",{className:"text-sm font-normal text-muted-foreground",children:["/",s==="monthly"?"mo":"yr"]}):null]}),r.jsx(n.PlanButton,{plan:e,billing:s,onSelect:x})]})]},e.name)})})]})};a.displayName="PricingCompact";exports.PricingCompact=a;
 //# sourceMappingURL=Compact.cjs.map

package/dist/cjs/components/Pricing/variants/Compact.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Compact.cjs","sources":["../../../../../src/components/Pricing/variants/Compact.tsx"],"sourcesContent":["import { cn } from \"../../../utils/cn\";\nimport { PlanButton } from \"../parts\";\nimport { Check } from \"../../../icons\";\nimport type { PricingVariantProps } from \"../types\";\n\ninterface CompactProps extends PricingVariantProps {\n className?: string;\n}\n\nexport const PricingCompact = ({ className, plans, billing, onSelect, ...props }: CompactProps) => {\n const price = (v: number \| null) => (v === null ? \"Custom\" : `$${v}`);\n\n return (\n <div className={cn(\"w-full\", className)} {...props}>\n <div className=\"divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface\">\n {plans.map((plan) => {\n const value = billing === \"monthly\" ? plan.monthly : plan.yearly;\n const isHighlighted = plan.highlighted && !plan.customColor;\n const bg = plan.customColor ? \"rgb(var(--color-surface))\" : isHighlighted ? \"rgb(var(--color-primary-soft))\" : undefined;\n const fg = plan.customColor ? plan.customColor : isHighlighted ? \"rgb(var(--color-primary))\" : undefined;\n return (\n <div\n key={plan.name}\n className={cn(\n \"group flex flex-col gap-5 p-5 transition-colors duration-200 hover:bg-surface-strong sm:flex-row sm:items-center sm:justify-between\",\n isHighlighted && \"bg-primary-soft/60\",\n )}\n style={bg ? { backgroundColor: bg } : undefined}\n >\n <div className=\"min-w-0\">\n <div className=\"flex items-center gap-2.5\">\n <h3 className=\"font-display text-lg font-semibold tracking-tight text-foreground\">\n {plan.name}\n </h3>\n {isHighlighted ? (\n <span className=\"rounded-full bg-primary px-2.5 py-0.5 text-[11px] font-semibold text-on-primary uppercase tracking-wider\">\n Popular\n </span>\n ) : null}\n </div>\n {plan.description ? (\n <p className=\"mt-1 truncate text-sm text-muted-foreground\">{plan.description}</p>\n ) : null}\n </div>\n <div className=\"flex items-center gap-6\">\n <ul className=\"hidden items-center gap-4 lg:flex\">\n {plan.features.slice(0, 3).map((f) => (\n <li key={f} className=\"flex items-center gap-1.5 text-sm text-muted-foreground\" style={{ color: fg }}>\n <Check className=\"h-3.5 w-3.5 text-current\" />\n {f}\n </li>\n ))}\n </ul>\n <div className=\"font-display text-2xl font-semibold tracking-tight text-foreground\">\n {price(value)}\n {value !== null ? (\n <span className=\"text-sm font-normal text-muted-foreground\">/{billing === \"monthly\" ? \"mo\" : \"yr\"}</span>\n ) : null}\n </div>\n <PlanButton plan={plan} billing={billing} onSelect={onSelect} />\n </div>\n </div>\n );\n })}\n </div>\n </div>\n );\n};\nPricingCompact.displayName = \"PricingCompact\";"],"names":["PricingCompact","className","plans","billing","onSelect","props","price","v","cn","jsx","plan","value","isHighlighted","bg","fg","~~jsxs","~~f","Check","PlanButton"],"mappings":"kNASaA,EAAiB,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,QAAAC,EAAS,SAAAC,EAAU,GAAGC,KAA0B,~~CACjG~~,MAAMC,EAASC,GAAsBA,IAAM,KAAO,SAAW,IAAIA,CAAC,GAElE,~~aACG~~,~~MAAA~~,~~CAAI~~,UAAWC,EAAAA,GAAG,~~SAAUP~~,CAAS,EAAI,~~GAAGI~~,EAC3C,~~SAAAI~~,~~MAAC~~,~~OAAI~~,UAAU,oFACZ,~~SAAAP~~,EAAM,~~IAAKQ~~,GAAS,CACnB,MAAMC,~~EAAQR~~,IAAY,~~UAAYO~~,EAAK,QAAUA,EAAK,OACpDE,EAAgBF,EAAK,aAAe,CAACA,EAAK,YAC1CG,EAAKH,EAAK,YAAc,4BAA8BE,EAAgB,iCAAmC,OACzGE,EAAKJ,EAAK,YAAcA,EAAK,YAAcE,EAAgB,4BAA8B,OAC/F,~~OACEG~~,EAAAA,KAAC,MAAA,CAEC,~~UAAWP~~,EAAAA,GACT,~~sIACAI~~,GAAiB,oBAAA,EAEnB,MAAOC,EAAK,CAAE,gBAAiBA,GAAO,OAEtC,SAAA,~~CAAAE~~,EAAAA,KAAC,MAAA,CAAI,UAAU,UACb,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,4BACb,SAAA,~~CAAAN~~,EAAAA,IAAC,KAAA,CAAG,UAAU,oEACX,~~SAAAC~~,EAAK,KACR,EACCE,~~EACCH~~,EAAAA,IAAC,OAAA,CAAK,UAAU,2GAA2G,mBAE3H,EACE,IAAA,EACN,~~EACCC~~,EAAK,~~YACJD~~,MAAC,IAAA,CAAE,UAAU,8CAA+C,~~SAAAC~~,EAAK,YAAY,EAC3E,IAAA,EACN,~~EACAK~~,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACb,SAAA,~~CAAAN~~,EAAAA,IAAC,KAAA,CAAG,UAAU,oCACX,~~SAAAC~~,EAAK,SAAS,MAAM,EAAG,CAAC,EAAE,~~IAAKM~~,~~GAC9BD~~,EAAAA,KAAC,MAAW,UAAU,0DAA0D,MAAO,CAAE,~~MAAOD~~,GAC9F,SAAA,~~CAAAL~~,EAAAA,IAACQ,EAAAA,MAAA,CAAM,UAAU,0BAAA,CAA2B,EAC3CD,CAAA,GAFMA,CAGT,CACD,EACH,~~EACAD~~,EAAAA,KAAC,MAAA,CAAI,UAAU,qEACZ,SAAA,~~CAAAT~~,~~EAAMK~~,CAAK,EACXA,IAAU,~~KACTI~~,OAAC,OAAA,CAAK,UAAU,4CAA4C,SAAA,CAAA,~~IAAEZ~~,IAAY,UAAY,KAAO,IAAA,CAAA,CAAK,EAChG,IAAA,EACN,~~EACAM~~,EAAAA,IAACS,EAAAA,WAAA,CAAW,~~KAAAR~~,EAAY,~~QAAAP~~,EAAkB,~~SAAAC~~,CAAA,CAAoB,CAAA,CAAA,CAChE,CAAA,CAAA,~~EAtCKM~~,EAAK,IAAA,CAyChB,CAAC,~~EACH~~,EACF,CAEJ,~~EACAV~~,EAAe,YAAc"}
1	+ {"version":3,"file":"Compact.cjs","sources":["../../../../../src/components/Pricing/variants/Compact.tsx"],"sourcesContent":["import { cn } from \"../../../utils/cn\";\nimport { BillingToggle, PlanButton } from \"../parts\";\nimport { Check } from \"../../../icons\";\nimport type { PricingVariantProps } from \"../types\";\n\ninterface CompactProps extends PricingVariantProps {\n className?: string;\n}\n\nexport const PricingCompact = ({ className, plans, billing, onBillingChange, onSelect, yearlyBadge, ...props }: CompactProps) => {\n const price = (v: number \| null) => (v === null ? \"Custom\" : `$${v}`);\n\n return (\n <div className={cn(\"w-full\", className)} {...props}>\n <BillingToggle billing={billing} onChange={onBillingChange} yearlyBadge={yearlyBadge} />\n <div className=\"divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface\">\n {plans.map((plan) => {\n const value = billing === \"monthly\" ? plan.monthly : plan.yearly;\n const isHighlighted = plan.highlighted && !plan.customColor;\n const bg = plan.customColor ? \"rgb(var(--color-surface))\" : isHighlighted ? \"rgb(var(--color-primary-soft))\" : undefined;\n const fg = plan.customColor ? plan.customColor : isHighlighted ? \"rgb(var(--color-primary))\" : undefined;\n return (\n <div\n key={plan.name}\n className={cn(\n \"group flex flex-col gap-5 p-5 transition-colors duration-200 hover:bg-surface-strong sm:flex-row sm:items-center sm:justify-between\",\n isHighlighted && \"bg-primary-soft/60\",\n )}\n style={bg ? { backgroundColor: bg } : undefined}\n >\n <div className=\"min-w-0\">\n <div className=\"flex items-center gap-2.5\">\n <h3 className=\"font-display text-lg font-semibold tracking-tight text-foreground\">\n {plan.name}\n </h3>\n {isHighlighted ? (\n <span className=\"rounded-full bg-primary px-2.5 py-0.5 text-[11px] font-semibold text-on-primary uppercase tracking-wider\">\n Popular\n </span>\n ) : null}\n </div>\n {plan.description ? (\n <p className=\"mt-1 truncate text-sm text-muted-foreground\">{plan.description}</p>\n ) : null}\n </div>\n <div className=\"flex items-center gap-6\">\n <ul className=\"hidden items-center gap-4 lg:flex\">\n {plan.features.slice(0, 3).map((f) => (\n <li key={f} className=\"flex items-center gap-1.5 text-sm text-muted-foreground\" style={{ color: fg }}>\n <Check className=\"h-3.5 w-3.5 text-current\" />\n {f}\n </li>\n ))}\n </ul>\n <div className=\"font-display text-2xl font-semibold tracking-tight text-foreground\">\n {price(value)}\n {value !== null ? (\n <span className=\"text-sm font-normal text-muted-foreground\">/{billing === \"monthly\" ? \"mo\" : \"yr\"}</span>\n ) : null}\n </div>\n <PlanButton plan={plan} billing={billing} onSelect={onSelect} />\n </div>\n </div>\n );\n })}\n </div>\n </div>\n );\n};\nPricingCompact.displayName = \"PricingCompact\";"],"names":["PricingCompact","className","plans","billing","onBillingChange","onSelect","yearlyBadge","props","price","v","jsxs","cn","jsx","BillingToggle","plan","value","isHighlighted","bg","fg","f","Check","PlanButton"],"mappings":"kNASaA,EAAiB,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,QAAAC,EAAS,gBAAAC,EAAiB,SAAAC,EAAU,YAAAC,EAAa,GAAGC,KAA0B,CAC/H,MAAMC,EAASC,GAAsBA,IAAM,KAAO,SAAW,IAAIA,CAAC,GAElE,OACEC,EAAAA,KAAC,OAAI,UAAWC,EAAAA,GAAG,SAAUV,CAAS,EAAI,GAAGM,EAC3C,SAAA,CAAAK,EAAAA,IAACC,EAAAA,cAAA,CAAc,QAAAV,EAAkB,SAAUC,EAAiB,YAAAE,EAA0B,QACrF,MAAA,CAAI,UAAU,oFACZ,SAAAJ,EAAM,IAAKY,GAAS,CACnB,MAAMC,EAAQZ,IAAY,UAAYW,EAAK,QAAUA,EAAK,OACpDE,EAAgBF,EAAK,aAAe,CAACA,EAAK,YAC1CG,EAAKH,EAAK,YAAc,4BAA8BE,EAAgB,iCAAmC,OACzGE,EAAKJ,EAAK,YAAcA,EAAK,YAAcE,EAAgB,4BAA8B,OAC/F,OACEN,EAAAA,KAAC,MAAA,CAEC,UAAWC,EAAAA,GACT,sIACAK,GAAiB,oBAAA,EAEnB,MAAOC,EAAK,CAAE,gBAAiBA,GAAO,OAEtC,SAAA,CAAAP,EAAAA,KAAC,MAAA,CAAI,UAAU,UACb,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,4BACb,SAAA,CAAAE,EAAAA,IAAC,KAAA,CAAG,UAAU,oEACX,SAAAE,EAAK,KACR,EACCE,EACCJ,EAAAA,IAAC,OAAA,CAAK,UAAU,2GAA2G,mBAE3H,EACE,IAAA,EACN,EACCE,EAAK,YACJF,MAAC,IAAA,CAAE,UAAU,8CAA+C,SAAAE,EAAK,YAAY,EAC3E,IAAA,EACN,EACAJ,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACb,SAAA,CAAAE,EAAAA,IAAC,KAAA,CAAG,UAAU,oCACX,SAAAE,EAAK,SAAS,MAAM,EAAG,CAAC,EAAE,IAAKK,GAC9BT,EAAAA,KAAC,MAAW,UAAU,0DAA0D,MAAO,CAAE,MAAOQ,GAC9F,SAAA,CAAAN,EAAAA,IAACQ,EAAAA,MAAA,CAAM,UAAU,0BAAA,CAA2B,EAC3CD,CAAA,GAFMA,CAGT,CACD,EACH,EACAT,EAAAA,KAAC,MAAA,CAAI,UAAU,qEACZ,SAAA,CAAAF,EAAMO,CAAK,EACXA,IAAU,KACTL,OAAC,OAAA,CAAK,UAAU,4CAA4C,SAAA,CAAA,IAAEP,IAAY,UAAY,KAAO,IAAA,CAAA,CAAK,EAChG,IAAA,EACN,EACAS,EAAAA,IAACS,EAAAA,WAAA,CAAW,KAAAP,EAAY,QAAAX,EAAkB,SAAAE,CAAA,CAAoB,CAAA,CAAA,CAChE,CAAA,CAAA,EAtCKS,EAAK,IAAA,CAyChB,CAAC,CAAA,CACH,CAAA,EACF,CAEJ,EACAd,EAAe,YAAc"}

package/dist/es/components/Pricing/Pricing.js CHANGED Viewed

@@ -1,32 +1,56 @@
 "use client";
-import { jsx as m } from "react/jsx-runtime";
-import { useState as e } from "react";
-import { PricingCards as P } from "./variants/Cards.js";
-import { PricingBento as u } from "./variants/Bento.js";
-import { PricingCompact as d } from "./variants/Compact.js";
-const B = ({
+import { jsx as c } from "react/jsx-runtime";
+import { useState as P } from "react";
+import { PricingCards as h } from "./variants/Cards.js";
+import { PricingBento as l } from "./variants/Bento.js";
+import { PricingCompact as u } from "./variants/Compact.js";
+const e = ({
   className: i,
   plans: r,
-  option: g = "cards",
-  defaultBilling: c = "monthly",
+  option: f = "cards",
+  defaultBilling: C = "monthly",
+  yearlyBadge: n,
   onSelect: t,
-  ...n
+  ...o
 }) => {
-  const [o, f] = e(c);
-  return g === "compact" ? /* @__PURE__ */ m(d, { className: i, plans: r, billing: o, onSelect: t, ...n }) : g === "bento" ? /* @__PURE__ */ m(u, { className: i, plans: r, billing: o, onSelect: t, ...n }) : /* @__PURE__ */ m(
-    P,
+  const [m, g] = P(C);
+  return f === "compact" ? /* @__PURE__ */ c(
+    u,
     {
       className: i,
       plans: r,
-      billing: o,
+      billing: m,
+      onBillingChange: g,
+      yearlyBadge: n,
       onSelect: t,
-      onBillingChange: f,
-      ...n
+      ...o
+    }
+  ) : f === "bento" ? /* @__PURE__ */ c(
+    l,
+    {
+      className: i,
+      plans: r,
+      billing: m,
+      onBillingChange: g,
+      yearlyBadge: n,
+      onSelect: t,
+      ...o
+    }
+  ) : /* @__PURE__ */ c(
+    h,
+    {
+      className: i,
+      plans: r,
+      billing: m,
+      onSelect: t,
+      onBillingChange: g,
+      yearlyBadge: n,
+      ...o
     }
   );
 };
-B.displayName = "Pricing";
+e.displayName = "Pricing";
 export {
-  B as Pricing
+  e as Pricing
 };
 //# sourceMappingURL=Pricing.js.map

package/dist/es/components/Pricing/Pricing.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pricing.js","sources":["../../../../src/components/Pricing/Pricing.tsx"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport type { PricingProps } from \"./types\";\nimport { PricingCards } from \"./variants/Cards\";\nimport { PricingBento } from \"./variants/Bento\";\nimport { PricingCompact } from \"./variants/Compact\";\n\nexport const Pricing = ({\n className,\n plans,\n option = \"cards\",\n defaultBilling = \"monthly\",\n onSelect,\n ...props\n}: PricingProps) => {\n const [billing, setBilling] = useState<\"monthly\" \| \"yearly\">(defaultBilling);\n\n if (option === \"compact\") {\n return <PricingCompact className={className} plans={plans} billing={billing} onSelect={onSelect} {...props} ~~/>;\~~n }\n\n if (option === \"bento\") {\n return <PricingBento className={className} plans={plans} billing={billing} onSelect={onSelect} {...props} ~~/>;\~~n }\n\n return (\n <PricingCards\n className={className}\n plans={plans}\n billing={billing}\n onSelect={onSelect}\n onBillingChange={setBilling}\n {...props}\n />\n );\n};\nPricing.displayName = \"Pricing\";"],"names":["Pricing","className","plans","option","defaultBilling","onSelect","props","billing","setBilling","useState","~~PricingCompact~~","~~PricingBento~~","~~jsx~~","PricingCards"],"mappings":";;;;;AAOO,MAAMA,IAAU,CAAC;AAAA,EACtB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,GAAGC;AACL,MAAoB;AAClB,QAAM,CAACC,GAASC,CAAU,IAAIC,EAA+BL,CAAc;AAE3E,SAAID,MAAW,~~8BACLO~~,~~GAAA~~,~~EAAe~~,~~WAAAT~~,~~GAAsB~~,OAAAC,~~GAAc~~,~~SAAAK~~,~~GAAkB~~,~~UAAAF~~,~~GAAqB~~,GAAGC,~~GAAO~~,~~IAG1GH~~,MAAW,~~4BACLQ~~,~~GAAA~~,~~EAAa~~,~~WAAAV~~,~~GAAsB~~,OAAAC,~~GAAc~~,~~SAAAK~~,~~GAAkB~~,~~UAAAF~~,~~GAAqB~~,GAAGC,~~GAAO~~,~~IAI1G~~,~~gBAAAM~~;AAAA,~~IAACC~~;AAAA,IAAA;AAAA,MACC,~~WAAAZ~~;AAAA,MACA,OAAAC;AAAA,MACA,~~SAAAK~~;AAAA,MACA,UAAAF;AAAA,MACA,iBAAiBG;AAAA,~~MAChB~~,~~GAAGF~~;AAAA,IAAA;AAAA,EAAA;AAGV;~~AACAN~~,EAAQ,cAAc;"}
1	+ {"version":3,"file":"Pricing.js","sources":["../../../../src/components/Pricing/Pricing.tsx"],"sourcesContent":["\"use client\";\nimport { useState } from \"react\";\nimport type { PricingProps } from \"./types\";\nimport { PricingCards } from \"./variants/Cards\";\nimport { PricingBento } from \"./variants/Bento\";\nimport { PricingCompact } from \"./variants/Compact\";\n\nexport const Pricing = ({\n className,\n plans,\n option = \"cards\",\n defaultBilling = \"monthly\",\n yearlyBadge,\n onSelect,\n ...props\n}: PricingProps) => {\n const [billing, setBilling] = useState<\"monthly\" \| \"yearly\">(defaultBilling);\n\n if (option === \"compact\") {\n return (\n <PricingCompact\n className={className}\n plans={plans}\n billing={billing}\n onBillingChange={setBilling}\n yearlyBadge={yearlyBadge}\n onSelect={onSelect}\n {...props}\n />\n );\n }\n\n if (option === \"bento\") {\n return (\n <PricingBento\n className={className}\n plans={plans}\n billing={billing}\n onBillingChange={setBilling}\n yearlyBadge={yearlyBadge}\n onSelect={onSelect}\n {...props}\n />\n );\n }\n\n return (\n <PricingCards\n className={className}\n plans={plans}\n billing={billing}\n onSelect={onSelect}\n onBillingChange={setBilling}\n yearlyBadge={yearlyBadge}\n {...props}\n />\n );\n};\nPricing.displayName = \"Pricing\";"],"names":["Pricing","className","plans","option","defaultBilling","yearlyBadge","onSelect","props","billing","setBilling","useState","jsx","PricingCompact","PricingBento","PricingCards"],"mappings":";;;;;AAOO,MAAMA,IAAU,CAAC;AAAA,EACtB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAAC,IAAiB;AAAA,EACjB,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAoB;AAClB,QAAM,CAACC,GAASC,CAAU,IAAIC,EAA+BN,CAAc;AAE3E,SAAID,MAAW,YAEX,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAAX;AAAA,MACA,OAAAC;AAAA,MACA,SAAAM;AAAA,MACA,iBAAiBC;AAAA,MACjB,aAAAJ;AAAA,MACA,UAAAC;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA,IAKNJ,MAAW,UAEX,gBAAAQ;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,WAAAZ;AAAA,MACA,OAAAC;AAAA,MACA,SAAAM;AAAA,MACA,iBAAiBC;AAAA,MACjB,aAAAJ;AAAA,MACA,UAAAC;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA,IAMR,gBAAAI;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,WAAAb;AAAA,MACA,OAAAC;AAAA,MACA,SAAAM;AAAA,MACA,UAAAF;AAAA,MACA,iBAAiBG;AAAA,MACjB,aAAAJ;AAAA,MACC,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAP,EAAQ,cAAc;"}

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

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs as n, jsx as t, Fragment as a } from "react/jsx-runtime";
 import { cn as e } from "../../utils/cn.js";
-import { getContrastText as m } from "../../utils/contrast.js";
-import { useTokenForeground as u } from "../../utils/useTokenForeground.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 x({
+function y({
   value: o,
   billing: i,
   dim: r
@@ -23,9 +23,10 @@ function x({
 function p({
   billing: o,
   onChange: i,
-  dark: r
+  dark: r,
+  yearlyBadge: s
 }) {
-  const s = u("--color-accent");
+  const l = m("--color-accent", "#0f172a");
   return /* @__PURE__ */ n("div", { className: "mb-10 flex items-center justify-center gap-4", children: [
     /* @__PURE__ */ t(
       "span",
@@ -70,14 +71,14 @@ function p({
         ),
         children: [
           "Yearly",
-          /* @__PURE__ */ t(
+          s ? /* @__PURE__ */ t(
             "span",
             {
               className: "rounded-full bg-accent px-2 py-0.5 text-xs font-semibold",
-              style: { color: s },
-              children: "−2 ay"
+              style: { color: l },
+              children: s
             }
-          )
+          ) : null
         ]
       }
     )
@@ -89,7 +90,7 @@ function v({
   onSelect: r,
   dark: s
 }) {
-  const c = o.highlighted && !o.customColor, l = o.customColor ? m(o.customColor, "#111111", "#ffffff") : void 0;
+  const l = o.highlighted && !o.customColor, c = o.customColor ? u(o.customColor, "#111111", "#ffffff") : void 0;
   return /* @__PURE__ */ n(
     "button",
     {
@@ -98,9 +99,9 @@ function v({
       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",
-        c || o.customColor ? "hover:brightness-95" : s ? "bg-white text-black hover:bg-white/90" : "border border-border text-foreground hover:bg-surface"
+        l || o.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: l } : c ? {
+      style: o.customColor ? { backgroundColor: o.customColor, color: c } : l ? {
         backgroundColor: "rgb(var(--color-primary))",
         color: "rgb(var(--color-on-primary))"
       } : void 0,
@@ -114,6 +115,6 @@ function v({
 export {
   p as BillingToggle,
   v as PlanButton,
-  x as PriceValue
+  y as PriceValue
 };
 //# sourceMappingURL=parts.js.map

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

	@@ -1 +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}: {\n billing: \"monthly\" \| \"yearly\";\n onChange: (b: \"monthly\" \| \"yearly\") => void;\n dark?: boolean;\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.\n const accentText = useTokenForeground(\"--color-accent\");\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 <span\n className=\"rounded-full bg-accent px-2 py-0.5 text-xs font-semibold\"\n style={{ color: accentText }}\n >\n ~~−2 ay~~\n </span>\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","accentText","useTokenForeground","PlanButton","plan","onSelect","isHighlighted","fg","getContrastText","ArrowRight"],"mappings":";;;;;AAOO,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;AACF,~~GAIG~~;~~AAID~~,QAAMC,IAAaC,EAAmB,~~gBAAgB~~;~~AACtD~~,SACE,~~gBAAAP~~,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,~~UAEC~~,~~gBAAAN~~;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,~~OAAOO~~,EAAA;AAAA,~~cACjB~~,~~UAAA~~;AAAA,YAAA;AAAA,UAAA;AAAA,~~QAED~~;AAAA,MAAA;AAAA,IAAA;AAAA,~~EACF~~,GACF;AAEJ;AAEO,~~SAASE~~,EAAW;AAAA,EACzB,MAAAC;AAAA,EACA,~~SAAAZ~~;AAAA,EACA,~~UAAAa~~;AAAA,EACA,~~MAAAL~~;AACF,GAKG;AACD,~~QAAMM~~,IAAgBF,EAAK,eAAe,CAACA,EAAK,aAC1CG,IAAKH,EAAK,cAAcI,EAAgBJ,EAAK,aAAa,WAAW,SAAS,IAAI;AACxF,SACE,~~gBAAAT~~;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,~~MAAMU~~,KAAA,gBAAAA,EAAWD,~~GAAMZ~~;AAAA,MAChC,WAAWK;AAAA,QACT;AAAA,QACA;AAAA,~~QACAS~~,KAAiBF,EAAK,cAClB,~~wBACAJ~~,IACE,0CACA;AAAA,MAAA;AAAA,MAER,~~OACEI~~,EAAK,cACD,EAAE,iBAAiBA,EAAK,aAAa,OAAOG,EAAA,IAC5CD,IACE;AAAA,QACE,iBAAiB;AAAA,QACjB,OAAO;AAAA,MAAA,IAET;AAAA,MAGP,UAAA;AAAA,QAAAF,EAAK,OAAO;AAAA,QACb,~~gBAAAV~~,~~EAACe~~,GAAA,EAAW,WAAU,qBAAA,CAAqB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjD;"}
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":";;;;;AAOO,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;AAOD,QAAMC,IAAaC,EAAmB,kBAAkB,SAAS;AACjE,SACE,gBAAAR,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,OAAOQ,EAAA;AAAA,cAEf,UAAAD;AAAA,YAAA;AAAA,UAAA,IAED;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GACF;AAEJ;AAEO,SAASG,EAAW;AAAA,EACzB,MAAAC;AAAA,EACA,SAAAb;AAAA,EACA,UAAAc;AAAA,EACA,MAAAN;AACF,GAKG;AACD,QAAMO,IAAgBF,EAAK,eAAe,CAACA,EAAK,aAC1CG,IAAKH,EAAK,cAAcI,EAAgBJ,EAAK,aAAa,WAAW,SAAS,IAAI;AACxF,SACE,gBAAAV;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAMW,KAAA,gBAAAA,EAAWD,GAAMb;AAAA,MAChC,WAAWK;AAAA,QACT;AAAA,QACA;AAAA,QACAU,KAAiBF,EAAK,cAClB,wBACAL,IACE,0CACA;AAAA,MAAA;AAAA,MAER,OACEK,EAAK,cACD,EAAE,iBAAiBA,EAAK,aAAa,OAAOG,EAAA,IAC5CD,IACE;AAAA,QACE,iBAAiB;AAAA,QACjB,OAAO;AAAA,MAAA,IAET;AAAA,MAGP,UAAA;AAAA,QAAAF,EAAK,OAAO;AAAA,QACb,gBAAAX,EAACgB,GAAA,EAAW,WAAU,qBAAA,CAAqB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjD;"}

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

@@ -1,47 +1,50 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import { cn as o } from "../../../utils/cn.js";
-import { getContrastText as f } from "../../../utils/contrast.js";
-import { PriceValue as u, PlanButton as x } from "../parts.js";
-import { Check as h } from "../../../icons.js";
-const v = ({ className: d, plans: m, billing: s, onSelect: a, ...n }) => /* @__PURE__ */ t("div", { className: o("w-full", d), ...n, children: /* @__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), g = r.customColor ? f(r.customColor, "#111111", "#ffffff") : c ? "rgb(var(--color-on-primary))" : void 0;
-  return /* @__PURE__ */ i(
-    "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: g } : void 0,
-      children: [
-        /* @__PURE__ */ i("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [
-          /* @__PURE__ */ i("div", { 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("font-display", e ? "text-current" : "text-foreground"), children: /* @__PURE__ */ t(u, { value: s === "monthly" ? r.monthly : r.yearly, billing: s, dim: !e }) })
-        ] }),
-        /* @__PURE__ */ t(
-          "ul",
-          {
-            className: o(
-              "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(h, { className: o("mt-0.5 h-4 w-4 shrink-0", e ? "text-current" : "text-primary") }),
-              l
-            ] }, l))
-          }
+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 }),
+  /* @__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(
+      "div",
+      {
+        className: o(
+          "flex h-full flex-col rounded-xl p-8",
+          e ? "lg:col-span-2" : "border border-border bg-surface"
         ),
-        /* @__PURE__ */ t("div", { className: "mt-8", children: /* @__PURE__ */ t(x, { plan: r, billing: s, onSelect: a, dark: !e }) })
-      ]
-    },
-    r.name
-  );
-}) }) });
-v.displayName = "PricingBento";
+        style: e ? { backgroundColor: e, color: u } : void 0,
+        children: [
+          /* @__PURE__ */ i("div", { className: "flex items-start justify-between gap-4", children: [
+            /* @__PURE__ */ i("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(
+            "ul",
+            {
+              className: o(
+                "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") }),
+                l
+              ] }, l))
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: "mt-8", children: /* @__PURE__ */ t(y, { plan: r, billing: s, onSelect: n, dark: !e }) })
+        ]
+      },
+      r.name
+    );
+  }) })
+] });
+p.displayName = "PricingBento";
 export {
-  v as PricingBento
+  p as PricingBento
 };
 //# sourceMappingURL=Bento.js.map

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

	@@ -1 +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, 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, onSelect, ...props }: BentoProps) => {\n return (\n <div className={cn(\"w-full\", className)} {...props}>\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 ~~flex-wrap~~ items-start justify-between gap-4\">\n <div>\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(\"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","onSelect","props","cn","jsx","plan","isHighlighted","bg","fg","getContrastText","~~jsxs","~~PriceValue","feature","Check","PlanButton"],"mappings":";;;;;AAUO,MAAMA,IAAe,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,GAAGC,~~0BAElE~~,~~OAAA~~,~~EAAI~~,WAAWC,EAAG,~~UAAUL~~,CAAS,GAAI,~~GAAGI~~,GAC3C,UAAA,~~gBAAAE~~,~~EAAC~~,~~SAAI~~,WAAU,yCACZ,~~UAAAL~~,EAAM,IAAI,~~CAACM~~,MAAS;AACnB,~~QAAMC~~,IAAgBD,EAAK,eAAe,CAACA,EAAK,aAC1CE,IAAKF,EAAK,gBAAgBC,IAAgB,8BAA8B,SACxEE,IAAKH,EAAK,cACZI,EAAgBJ,EAAK,aAAa,WAAW,SAAS,IACtDC,IACE,iCACA;AACN,~~SACE~~,~~gBAAAI~~;AAAA,~~IAAC~~;AAAA,~~IAAA~~;AAAA,~~MAEC~~,~~WAAWP~~;AAAA,~~QACT~~;AAAA,~~QACAI~~,IACI,kBACA;AAAA,~~MAAA~~;AAAA,~~MAEN~~,OAAOA,IAAK,EAAE,iBAAiBA,GAAI,OAAOC,MAAO;AAAA,~~MAEjD~~,UAAA;AAAA,~~QAAA~~,~~gBAAAE~~,EAAC,OAAA,EAAI,WAAU,~~oDACb~~,UAAA;AAAA,~~UAAA~~,gBAAAA,EAAC,OAAA,~~EACC~~,UAAA;AAAA,~~YAAA~~,~~gBAAAN~~,EAAC,MAAA,EAAG,WAAWD,EAAG,~~qDAAqDI~~,IAAK,iBAAiB,iBAAiB,GAC3G,UAAAF,EAAK,KAAA,CACR;AAAA,~~YACCA~~,EAAK,cACJ,~~gBAAAD~~,EAAC,KAAA,EAAE,WAAWD,EAAG,~~kBAAkBI~~,IAAK,SAAY,uBAAuB,GACxE,UAAAF,EAAK,aACR,IACE;AAAA,~~UAAA~~,GACN;AAAA,~~UACA~~,~~gBAAAD~~,EAAC,SAAI,WAAWD,EAAG,~~gBAAgBI~~,IAAK,iBAAiB,iBAAiB,~~GACxE~~,UAAA,~~gBAAAH~~,EAACO,GAAA,EAAW,~~OAAOX~~,MAAY,~~YAAYK~~,EAAK,UAAUA,EAAK,QAAQ,~~SAAAL~~,GAAkB,KAAK,~~CAACO~~,EAAA,CAAI,EAAA,CACrG;AAAA,~~QAAA~~,GACF;AAAA,~~QACA~~,~~gBAAAH~~;AAAA,~~UAAC~~;AAAA,~~UAAA~~;AAAA,~~YACC~~,WAAWD;AAAA,~~cACT~~;AAAA,~~cACAI~~,IAAK,iBAAiB;AAAA,~~YAAA~~;AAAA,~~YAGvB~~,UAAAF,EAAK,SAAS,IAAI,~~CAACO~~,MAClB,~~gBAAAF~~,EAAC,MAAA,EAAiB,~~WAAWP~~,EAAG,~~4BAA4BI~~,IAAK,iBAAiB,uBAAuB,GACvG,UAAA;AAAA,~~cAAA~~,~~gBAAAH~~,EAACS,KAAM,WAAWV,EAAG,~~2BAA2BI~~,IAAK,iBAAiB,cAAc,GAAG;AAAA,~~cACtFK~~;AAAA,~~YAAA~~,EAAA,GAFMA,CAGT,CACD;AAAA,~~UAAA~~;AAAA,~~QAAA~~;AAAA,~~QAEH~~,gBAAAR,EAAC,OAAA,EAAI,WAAU,QACb,UAAA,gBAAAA,EAACU,GAAA,EAAW,~~MAAAT~~,GAAY,~~SAAAL~~,GAAkB,~~UAAAC~~,GAAoB,MAAM,~~CAACM~~,EAAA,CAAI,EAAA,CAC3E;AAAA,~~MAAA~~;AAAA,~~IAAA~~;AAAA,~~IAvCKF~~,EAAK;AAAA,~~EAAA~~;~~AA0ChB~~,CAAC,~~GACH~~,GACF;~~AAGJR~~,EAAa,cAAc;"}
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;"}

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

@@ -1,12 +1,12 @@
 import { jsxs as l, jsx as o } from "react/jsx-runtime";
 import { cn as t } from "../../../utils/cn.js";
-import { getContrastText as f } from "../../../utils/contrast.js";
-import { BillingToggle as x, PriceValue as h, PlanButton as p } from "../parts.js";
-import { Check as y } from "../../../icons.js";
-const v = ({ className: d, plans: a, billing: s, onSelect: m, onBillingChange: n, ...g }) => /* @__PURE__ */ l("div", { className: t("w-full", d), ...g, children: [
-  /* @__PURE__ */ o(x, { billing: s, onChange: n }),
+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: [
+  /* @__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), u = r.customColor ? f(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), f = r.customColor ? x(r.customColor, "#111111", "#ffffff") : i ? "rgb(var(--color-on-primary))" : void 0;
     return /* @__PURE__ */ l(
       "div",
       {
@@ -15,7 +15,7 @@ const v = ({ className: d, plans: a, billing: s, onSelect: m, onBillingChange: n
           e ? "shadow-raised" : "border border-border bg-surface",
           !e && i && "border-primary"
         ),
-        style: e ? { backgroundColor: e, color: u } : void 0,
+        style: e ? { backgroundColor: e, color: f } : void 0,
         children: [
           i ? /* @__PURE__ */ o(
             "span",
@@ -30,20 +30,20 @@ const v = ({ className: d, plans: a, billing: s, onSelect: m, onBillingChange: 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(h, { 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(p, { 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(y, { className: t("mt-0.5 h-4 w-4 shrink-0", e ? "text-current" : "text-primary") }),
+            /* @__PURE__ */ o(v, { 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(p, { plan: r, billing: s, onSelect: m, dark: !e }) })
+          /* @__PURE__ */ o("div", { className: "mt-8", children: /* @__PURE__ */ o(y, { plan: r, billing: s, onSelect: n, dark: !e }) })
         ]
       },
       r.name
     );
   }) })
 ] });
-v.displayName = "PricingCards";
+b.displayName = "PricingCards";
 export {
-  v as PricingCards
+  b as PricingCards
 };
 //# sourceMappingURL=Cards.js.map

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

	@@ -1 +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 ~~onBillingChange: (billing: \"monthly\" \| \"yearly\") => void;\n~~}\n\nexport const PricingCards = ({ className, plans, billing, onSelect, ~~onBillingChange~~, ...props }: CardsProps) => {\n return (\n <div className={cn(\"w-full\", className)} {...props}>\n <BillingToggle billing={billing} onChange={onBillingChange} />\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","onSelect","~~onBillingChange~~","props","jsxs","cn","jsx","BillingToggle","plan","isHighlighted","bg","fg","getContrastText","PriceValue","feature","Check","PlanButton"],"mappings":";;;;;~~AAWO~~,MAAMA,IAAe,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,~~iBAAAC~~,~~GAAiB~~,GAAGC,~~QAEpF~~,gBAAAC,EAAC,SAAI,WAAWC,EAAG,~~UAAUP~~,CAAS,GAAI,~~GAAGK~~,GAC3C,UAAA;AAAA,EAAA,gBAAAG,EAACC,GAAA,EAAc,~~SAAAP~~,GAAkB,~~UAAUE~~,~~EAAA~~,~~CAAiB~~;AAAA,~~oBAC3D~~,OAAA,EAAI,WAAU,wDACZ,~~UAAAH~~,EAAM,IAAI,~~CAACS~~,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,~~OAAOb~~,MAAY,~~YAAYQ~~,EAAK,UAAUA,EAAK,QAAQ,~~SAAAR~~,GAAkB,KAAK,~~CAACU~~,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,~~SAAAR~~,GAAkB,~~UAAAC~~,GAAoB,MAAM,CAACS,EAAA,CAAI,EAAA,CAC3E;AAAA,QAAA;AAAA,MAAA;AAAA,MA5CKF,EAAK;AAAA,IAAA;AAAA,EA+ChB,CAAC,EAAA,CACH;AAAA,GACF;~~AAGJX~~,EAAa,cAAc;"}
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;"}

package/dist/es/components/Pricing/variants/Compact.js CHANGED Viewed

@@ -1,49 +1,52 @@
-import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
 import { cn as m } from "../../../utils/cn.js";
-import { PlanButton as h } from "../parts.js";
-import { Check as x } from "../../../icons.js";
-const p = ({ className: d, plans: n, billing: s, onSelect: a, ...u }) => {
-  const g = (e) => e === null ? "Custom" : `$${e}`;
-  return /* @__PURE__ */ r("div", { className: m("w-full", d), ...u, children: /* @__PURE__ */ r("div", { className: "divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface", children: n.map((e) => {
-    const i = s === "monthly" ? e.monthly : e.yearly, o = e.highlighted && !e.customColor, l = e.customColor ? "rgb(var(--color-surface))" : o ? "rgb(var(--color-primary-soft))" : void 0, f = e.customColor ? e.customColor : o ? "rgb(var(--color-primary))" : void 0;
-    return /* @__PURE__ */ t(
-      "div",
-      {
-        className: m(
-          "group flex flex-col gap-5 p-5 transition-colors duration-200 hover:bg-surface-strong sm:flex-row sm:items-center sm:justify-between",
-          o && "bg-primary-soft/60"
-        ),
-        style: l ? { backgroundColor: l } : void 0,
-        children: [
-          /* @__PURE__ */ t("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ t("div", { className: "flex items-center gap-2.5", children: [
-              /* @__PURE__ */ r("h3", { className: "font-display text-lg font-semibold tracking-tight text-foreground", children: e.name }),
-              o ? /* @__PURE__ */ r("span", { className: "rounded-full bg-primary px-2.5 py-0.5 text-[11px] font-semibold text-on-primary uppercase tracking-wider", children: "Popular" }) : null
+import { BillingToggle as p, PlanButton as y } from "../parts.js";
+import { Check as v } from "../../../icons.js";
+const N = ({ className: n, plans: d, billing: o, onBillingChange: a, onSelect: u, yearlyBadge: g, ...f }) => {
+  const h = (e) => e === null ? "Custom" : `$${e}`;
+  return /* @__PURE__ */ r("div", { className: m("w-full", n), ...f, children: [
+    /* @__PURE__ */ t(p, { billing: o, onChange: a, yearlyBadge: g }),
+    /* @__PURE__ */ t("div", { className: "divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface", children: d.map((e) => {
+      const i = o === "monthly" ? e.monthly : e.yearly, s = e.highlighted && !e.customColor, l = e.customColor ? "rgb(var(--color-surface))" : s ? "rgb(var(--color-primary-soft))" : void 0, x = e.customColor ? e.customColor : s ? "rgb(var(--color-primary))" : void 0;
+      return /* @__PURE__ */ r(
+        "div",
+        {
+          className: m(
+            "group flex flex-col gap-5 p-5 transition-colors duration-200 hover:bg-surface-strong sm:flex-row sm:items-center sm:justify-between",
+            s && "bg-primary-soft/60"
+          ),
+          style: l ? { backgroundColor: l } : void 0,
+          children: [
+            /* @__PURE__ */ r("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ r("div", { className: "flex items-center gap-2.5", children: [
+                /* @__PURE__ */ t("h3", { className: "font-display text-lg font-semibold tracking-tight text-foreground", children: e.name }),
+                s ? /* @__PURE__ */ t("span", { className: "rounded-full bg-primary px-2.5 py-0.5 text-[11px] font-semibold text-on-primary uppercase tracking-wider", children: "Popular" }) : null
+              ] }),
+              e.description ? /* @__PURE__ */ t("p", { className: "mt-1 truncate text-sm text-muted-foreground", children: e.description }) : null
             ] }),
-            e.description ? /* @__PURE__ */ r("p", { className: "mt-1 truncate text-sm text-muted-foreground", children: e.description }) : null
-          ] }),
-          /* @__PURE__ */ t("div", { className: "flex items-center gap-6", children: [
-            /* @__PURE__ */ r("ul", { className: "hidden items-center gap-4 lg:flex", children: e.features.slice(0, 3).map((c) => /* @__PURE__ */ t("li", { className: "flex items-center gap-1.5 text-sm text-muted-foreground", style: { color: f }, children: [
-              /* @__PURE__ */ r(x, { className: "h-3.5 w-3.5 text-current" }),
-              c
-            ] }, c)) }),
-            /* @__PURE__ */ t("div", { className: "font-display text-2xl font-semibold tracking-tight text-foreground", children: [
-              g(i),
-              i !== null ? /* @__PURE__ */ t("span", { className: "text-sm font-normal text-muted-foreground", children: [
-                "/",
-                s === "monthly" ? "mo" : "yr"
-              ] }) : null
-            ] }),
-            /* @__PURE__ */ r(h, { plan: e, billing: s, onSelect: a })
-          ] })
-        ]
-      },
-      e.name
-    );
-  }) }) });
+            /* @__PURE__ */ r("div", { className: "flex items-center gap-6", children: [
+              /* @__PURE__ */ t("ul", { className: "hidden items-center gap-4 lg:flex", children: e.features.slice(0, 3).map((c) => /* @__PURE__ */ r("li", { className: "flex items-center gap-1.5 text-sm text-muted-foreground", style: { color: x }, children: [
+                /* @__PURE__ */ t(v, { className: "h-3.5 w-3.5 text-current" }),
+                c
+              ] }, c)) }),
+              /* @__PURE__ */ r("div", { className: "font-display text-2xl font-semibold tracking-tight text-foreground", children: [
+                h(i),
+                i !== null ? /* @__PURE__ */ r("span", { className: "text-sm font-normal text-muted-foreground", children: [
+                  "/",
+                  o === "monthly" ? "mo" : "yr"
+                ] }) : null
+              ] }),
+              /* @__PURE__ */ t(y, { plan: e, billing: o, onSelect: u })
+            ] })
+          ]
+        },
+        e.name
+      );
+    }) })
+  ] });
 };
-p.displayName = "PricingCompact";
+N.displayName = "PricingCompact";
 export {
-  p as PricingCompact
+  N as PricingCompact
 };
 //# sourceMappingURL=Compact.js.map

package/dist/es/components/Pricing/variants/Compact.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Compact.js","sources":["../../../../../src/components/Pricing/variants/Compact.tsx"],"sourcesContent":["import { cn } from \"../../../utils/cn\";\nimport { PlanButton } from \"../parts\";\nimport { Check } from \"../../../icons\";\nimport type { PricingVariantProps } from \"../types\";\n\ninterface CompactProps extends PricingVariantProps {\n className?: string;\n}\n\nexport const PricingCompact = ({ className, plans, billing, onSelect, ...props }: CompactProps) => {\n const price = (v: number \| null) => (v === null ? \"Custom\" : `$${v}`);\n\n return (\n <div className={cn(\"w-full\", className)} {...props}>\n <div className=\"divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface\">\n {plans.map((plan) => {\n const value = billing === \"monthly\" ? plan.monthly : plan.yearly;\n const isHighlighted = plan.highlighted && !plan.customColor;\n const bg = plan.customColor ? \"rgb(var(--color-surface))\" : isHighlighted ? \"rgb(var(--color-primary-soft))\" : undefined;\n const fg = plan.customColor ? plan.customColor : isHighlighted ? \"rgb(var(--color-primary))\" : undefined;\n return (\n <div\n key={plan.name}\n className={cn(\n \"group flex flex-col gap-5 p-5 transition-colors duration-200 hover:bg-surface-strong sm:flex-row sm:items-center sm:justify-between\",\n isHighlighted && \"bg-primary-soft/60\",\n )}\n style={bg ? { backgroundColor: bg } : undefined}\n >\n <div className=\"min-w-0\">\n <div className=\"flex items-center gap-2.5\">\n <h3 className=\"font-display text-lg font-semibold tracking-tight text-foreground\">\n {plan.name}\n </h3>\n {isHighlighted ? (\n <span className=\"rounded-full bg-primary px-2.5 py-0.5 text-[11px] font-semibold text-on-primary uppercase tracking-wider\">\n Popular\n </span>\n ) : null}\n </div>\n {plan.description ? (\n <p className=\"mt-1 truncate text-sm text-muted-foreground\">{plan.description}</p>\n ) : null}\n </div>\n <div className=\"flex items-center gap-6\">\n <ul className=\"hidden items-center gap-4 lg:flex\">\n {plan.features.slice(0, 3).map((f) => (\n <li key={f} className=\"flex items-center gap-1.5 text-sm text-muted-foreground\" style={{ color: fg }}>\n <Check className=\"h-3.5 w-3.5 text-current\" />\n {f}\n </li>\n ))}\n </ul>\n <div className=\"font-display text-2xl font-semibold tracking-tight text-foreground\">\n {price(value)}\n {value !== null ? (\n <span className=\"text-sm font-normal text-muted-foreground\">/{billing === \"monthly\" ? \"mo\" : \"yr\"}</span>\n ) : null}\n </div>\n <PlanButton plan={plan} billing={billing} onSelect={onSelect} />\n </div>\n </div>\n );\n })}\n </div>\n </div>\n );\n};\nPricingCompact.displayName = \"PricingCompact\";"],"names":["PricingCompact","className","plans","billing","onSelect","props","price","v","cn","jsx","plan","value","isHighlighted","bg","fg","~~jsxs","~~f","Check","PlanButton"],"mappings":";;;;AASO,MAAMA,IAAiB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,GAAGC,QAA0B;~~AACjG~~,QAAMC,IAAQ,CAACC,MAAsBA,MAAM,OAAO,WAAW,IAAIA,CAAC;AAElE,~~2BACG~~,~~OAAA~~,~~EAAI~~,WAAWC,EAAG,~~UAAUP~~,CAAS,GAAI,~~GAAGI~~,GAC3C,UAAA,~~gBAAAI~~,~~EAAC~~,~~SAAI~~,WAAU,qFACZ,~~UAAAP~~,EAAM,IAAI,~~CAACQ~~,MAAS;AACnB,~~UAAMC~~,~~IAAQR~~,MAAY,~~YAAYO~~,EAAK,UAAUA,EAAK,QACpDE,IAAgBF,EAAK,eAAe,CAACA,EAAK,aAC1CG,IAAKH,EAAK,cAAc,8BAA8BE,IAAgB,mCAAmC,QACzGE,IAAKJ,EAAK,cAAcA,EAAK,cAAcE,IAAgB,8BAA8B;AAC/F,~~WACE~~,~~gBAAAG~~;AAAA,~~MAAC~~;AAAA,~~MAAA~~;AAAA,~~QAEC~~,~~WAAWP~~;AAAA,~~UACT~~;AAAA,~~UACAI~~,KAAiB;AAAA,~~QAAA~~;AAAA,~~QAEnB~~,OAAOC,IAAK,EAAE,iBAAiBA,MAAO;AAAA,~~QAEtC~~,UAAA;AAAA,~~UAAA~~,~~gBAAAE~~,EAAC,OAAA,EAAI,WAAU,WACb,UAAA;AAAA,~~YAAA~~,gBAAAA,EAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,~~cAAA~~,~~gBAAAN~~,EAAC,MAAA,EAAG,WAAU,qEACX,~~UAAAC~~,EAAK,MACR;AAAA,~~cACCE~~,IACC,~~gBAAAH~~,EAAC,QAAA,EAAK,WAAU,4GAA2G,qBAE3H,IACE;AAAA,~~YAAA~~,GACN;AAAA,~~YACCC~~,EAAK,cACJ,~~gBAAAD~~,EAAC,KAAA,EAAE,WAAU,+CAA+C,~~UAAAC~~,EAAK,aAAY,IAC3E;AAAA,~~UAAA~~,GACN;AAAA,~~UACA~~,~~gBAAAK~~,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,~~YAAA~~,~~gBAAAN~~,EAAC,MAAA,EAAG,WAAU,qCACX,~~UAAAC~~,EAAK,SAAS,MAAM,GAAG,CAAC,EAAE,IAAI,~~CAACM~~,MAC9B,~~gBAAAD~~,EAAC,QAAW,WAAU,2DAA0D,OAAO,EAAE,~~OAAOD~~,KAC9F,UAAA;AAAA,~~cAAA~~,~~gBAAAL~~,EAACQ,GAAA,EAAM,WAAU,2BAAA,CAA2B;AAAA,~~cAC3CD~~;AAAA,~~YAAA~~,KAFMA,CAGT,CACD,GACH;AAAA,~~YACA~~,~~gBAAAD~~,EAAC,OAAA,EAAI,WAAU,sEACZ,UAAA;AAAA,~~cAAAT~~,~~EAAMK~~,CAAK;AAAA,~~cACXA~~,MAAU,OACT,~~gBAAAI~~,EAAC,QAAA,EAAK,WAAU,6CAA4C,UAAA;AAAA,~~gBAAA~~;AAAA,~~gBAAEZ~~,MAAY,YAAY,OAAO;AAAA,~~cAAA~~,EAAA,CAAK,IAChG;AAAA,~~YAAA~~,GACN;AAAA,~~YACA~~,~~gBAAAM~~,EAACS,GAAA,EAAW,~~MAAAR~~,GAAY,~~SAAAP~~,GAAkB,~~UAAAC~~,EAAA,CAAoB;AAAA,~~UAAA~~,EAAA,CAChE;AAAA,~~QAAA~~;AAAA,~~MAAA~~;AAAA,~~MAtCKM~~,EAAK;AAAA,~~IAAA~~;AAAA,~~EAyChB~~,CAAC,~~GACH~~,GACF;AAEJ;~~AACAV~~,EAAe,cAAc;"}
1	+ {"version":3,"file":"Compact.js","sources":["../../../../../src/components/Pricing/variants/Compact.tsx"],"sourcesContent":["import { cn } from \"../../../utils/cn\";\nimport { BillingToggle, PlanButton } from \"../parts\";\nimport { Check } from \"../../../icons\";\nimport type { PricingVariantProps } from \"../types\";\n\ninterface CompactProps extends PricingVariantProps {\n className?: string;\n}\n\nexport const PricingCompact = ({ className, plans, billing, onBillingChange, onSelect, yearlyBadge, ...props }: CompactProps) => {\n const price = (v: number \| null) => (v === null ? \"Custom\" : `$${v}`);\n\n return (\n <div className={cn(\"w-full\", className)} {...props}>\n <BillingToggle billing={billing} onChange={onBillingChange} yearlyBadge={yearlyBadge} />\n <div className=\"divide-y divide-border overflow-hidden rounded-xl border border-border bg-surface\">\n {plans.map((plan) => {\n const value = billing === \"monthly\" ? plan.monthly : plan.yearly;\n const isHighlighted = plan.highlighted && !plan.customColor;\n const bg = plan.customColor ? \"rgb(var(--color-surface))\" : isHighlighted ? \"rgb(var(--color-primary-soft))\" : undefined;\n const fg = plan.customColor ? plan.customColor : isHighlighted ? \"rgb(var(--color-primary))\" : undefined;\n return (\n <div\n key={plan.name}\n className={cn(\n \"group flex flex-col gap-5 p-5 transition-colors duration-200 hover:bg-surface-strong sm:flex-row sm:items-center sm:justify-between\",\n isHighlighted && \"bg-primary-soft/60\",\n )}\n style={bg ? { backgroundColor: bg } : undefined}\n >\n <div className=\"min-w-0\">\n <div className=\"flex items-center gap-2.5\">\n <h3 className=\"font-display text-lg font-semibold tracking-tight text-foreground\">\n {plan.name}\n </h3>\n {isHighlighted ? (\n <span className=\"rounded-full bg-primary px-2.5 py-0.5 text-[11px] font-semibold text-on-primary uppercase tracking-wider\">\n Popular\n </span>\n ) : null}\n </div>\n {plan.description ? (\n <p className=\"mt-1 truncate text-sm text-muted-foreground\">{plan.description}</p>\n ) : null}\n </div>\n <div className=\"flex items-center gap-6\">\n <ul className=\"hidden items-center gap-4 lg:flex\">\n {plan.features.slice(0, 3).map((f) => (\n <li key={f} className=\"flex items-center gap-1.5 text-sm text-muted-foreground\" style={{ color: fg }}>\n <Check className=\"h-3.5 w-3.5 text-current\" />\n {f}\n </li>\n ))}\n </ul>\n <div className=\"font-display text-2xl font-semibold tracking-tight text-foreground\">\n {price(value)}\n {value !== null ? (\n <span className=\"text-sm font-normal text-muted-foreground\">/{billing === \"monthly\" ? \"mo\" : \"yr\"}</span>\n ) : null}\n </div>\n <PlanButton plan={plan} billing={billing} onSelect={onSelect} />\n </div>\n </div>\n );\n })}\n </div>\n </div>\n );\n};\nPricingCompact.displayName = \"PricingCompact\";"],"names":["PricingCompact","className","plans","billing","onBillingChange","onSelect","yearlyBadge","props","price","v","jsxs","cn","jsx","BillingToggle","plan","value","isHighlighted","bg","fg","f","Check","PlanButton"],"mappings":";;;;AASO,MAAMA,IAAiB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,iBAAAC,GAAiB,UAAAC,GAAU,aAAAC,GAAa,GAAGC,QAA0B;AAC/H,QAAMC,IAAQ,CAACC,MAAsBA,MAAM,OAAO,WAAW,IAAIA,CAAC;AAElE,SACE,gBAAAC,EAAC,SAAI,WAAWC,EAAG,UAAUV,CAAS,GAAI,GAAGM,GAC3C,UAAA;AAAA,IAAA,gBAAAK,EAACC,GAAA,EAAc,SAAAV,GAAkB,UAAUC,GAAiB,aAAAE,GAA0B;AAAA,sBACrF,OAAA,EAAI,WAAU,qFACZ,UAAAJ,EAAM,IAAI,CAACY,MAAS;AACnB,YAAMC,IAAQZ,MAAY,YAAYW,EAAK,UAAUA,EAAK,QACpDE,IAAgBF,EAAK,eAAe,CAACA,EAAK,aAC1CG,IAAKH,EAAK,cAAc,8BAA8BE,IAAgB,mCAAmC,QACzGE,IAAKJ,EAAK,cAAcA,EAAK,cAAcE,IAAgB,8BAA8B;AAC/F,aACE,gBAAAN;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAWC;AAAA,YACT;AAAA,YACAK,KAAiB;AAAA,UAAA;AAAA,UAEnB,OAAOC,IAAK,EAAE,iBAAiBA,MAAO;AAAA,UAEtC,UAAA;AAAA,YAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,WACb,UAAA;AAAA,cAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,gBAAA,gBAAAE,EAAC,MAAA,EAAG,WAAU,qEACX,UAAAE,EAAK,MACR;AAAA,gBACCE,IACC,gBAAAJ,EAAC,QAAA,EAAK,WAAU,4GAA2G,qBAE3H,IACE;AAAA,cAAA,GACN;AAAA,cACCE,EAAK,cACJ,gBAAAF,EAAC,KAAA,EAAE,WAAU,+CAA+C,UAAAE,EAAK,aAAY,IAC3E;AAAA,YAAA,GACN;AAAA,YACA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,cAAA,gBAAAE,EAAC,MAAA,EAAG,WAAU,qCACX,UAAAE,EAAK,SAAS,MAAM,GAAG,CAAC,EAAE,IAAI,CAACK,MAC9B,gBAAAT,EAAC,QAAW,WAAU,2DAA0D,OAAO,EAAE,OAAOQ,KAC9F,UAAA;AAAA,gBAAA,gBAAAN,EAACQ,GAAA,EAAM,WAAU,2BAAA,CAA2B;AAAA,gBAC3CD;AAAA,cAAA,KAFMA,CAGT,CACD,GACH;AAAA,cACA,gBAAAT,EAAC,OAAA,EAAI,WAAU,sEACZ,UAAA;AAAA,gBAAAF,EAAMO,CAAK;AAAA,gBACXA,MAAU,OACT,gBAAAL,EAAC,QAAA,EAAK,WAAU,6CAA4C,UAAA;AAAA,kBAAA;AAAA,kBAAEP,MAAY,YAAY,OAAO;AAAA,gBAAA,EAAA,CAAK,IAChG;AAAA,cAAA,GACN;AAAA,cACA,gBAAAS,EAACS,GAAA,EAAW,MAAAP,GAAY,SAAAX,GAAkB,UAAAE,EAAA,CAAoB;AAAA,YAAA,EAAA,CAChE;AAAA,UAAA;AAAA,QAAA;AAAA,QAtCKS,EAAK;AAAA,MAAA;AAAA,IAyChB,CAAC,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;AACAd,EAAe,cAAc;"}

package/dist/index.d.ts CHANGED Viewed

@@ -596,7 +596,7 @@ export declare const Play: (props: IconProps) => JSX_2.Element;
 export declare const Plus: (props: IconProps) => JSX_2.Element;
 export declare const Pricing: {
-    ({ className, plans, option, defaultBilling, onSelect, ...props }: PricingProps): JSX_2.Element;
+    ({ className, plans, option, defaultBilling, yearlyBadge, onSelect, ...props }: PricingProps): JSX_2.Element;
     displayName: string;
 };
@@ -606,6 +606,7 @@ export declare interface PricingProps extends Omit<HTMLAttributes<HTMLDivElement
     plans: Plan[];
     option?: PricingOption;
     defaultBilling?: "monthly" | "yearly";
+    yearlyBadge?: string;
     onSelect?: (plan: Plan, billing: "monthly" | "yearly") => void;
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ugurdemirel/landcraft",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "publishConfig": {
     "access": "public"
   },