@alfadocs/ui-kit-debug 0.1.9 → 0.2.0

package/dist/_chunks/{floating-action-button-Cnw-f6AG.js → floating-action-button-C8OYj8mE.js}

@@ -83,7 +83,14 @@ const x = g(
       ...a,
       "aria-label": p,
       children: [
-        e ? /* @__PURE__ */ d("span", { "aria-hidden": "true", className: "ds:inline-flex ds:items-center ds:justify-center", children: e }) : null,
+        e ? /* @__PURE__ */ d(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ds:inline-flex ds:items-center ds:justify-center",
+            children: e
+          }
+        ) : null,
         s ? /* @__PURE__ */ d("span", { className: "ds:inline-flex", children: c }) : null
       ]
     }
@@ -93,4 +100,4 @@ h.displayName = "FloatingActionButton";
 export {
   h as F
 };
-//# sourceMappingURL=floating-action-button-Cnw-f6AG.js.map
+//# sourceMappingURL=floating-action-button-C8OYj8mE.js.map

package/dist/_chunks/floating-action-button-C8OYj8mE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-action-button-C8OYj8mE.js","sources":["../../src/components/floating-action-button/floating-action-button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\n\nconst fabVariants = cva(\n  [\n    // `relative` anchors the `::before` hit-target expansion on `sm`.\n    'ds:relative ds:inline-flex ds:items-center ds:justify-center',\n    'ds:font-medium ds:whitespace-nowrap',\n    'ds:rounded-full',\n    'ds:shadow-[var(--shadow-lg)] ds:hover:shadow-[var(--shadow-xl)] ds:active:shadow-[var(--shadow-md)]',\n    'ds:transition-[box-shadow,background-color,transform]',\n    'ds:duration-[var(--animation-duration)]',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n    // Under Windows High Contrast Mode the `shadow-*` affordance is stripped.\n    // Repaint a solid edge + swap the focus ring to CanvasText so the FAB\n    // remains identifiable and its focus state stays visible.\n    'ds:forced-colors:border ds:forced-colors:border-[ButtonBorder] ds:forced-colors:focus-visible:outline-[CanvasText]',\n    'ds:disabled:opacity-50 ds:disabled:cursor-not-allowed ds:disabled:shadow-[var(--shadow-md)]',\n    'ds:motion-reduce:transition-none',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        primary:\n          'ds:bg-primary ds:text-primary-foreground ds:hover:bg-primary-hover',\n        secondary:\n          'ds:bg-accent ds:text-accent-foreground ds:hover:bg-accent-hover',\n      },\n      size: {\n        // `sm` is 40x40 which sits below the 44/48 px WCAG 2.5.5 target.\n        // Mirror Button's pseudo-expansion pattern: below the `sm:` (640 px)\n        // breakpoint, a `::before` rectangle enlarges the hit area to\n        // `--min-target-size` (44 default, 48 accessible). Above the\n        // breakpoint (desktop / trackpad), the physical 40 px circle is\n        // enough — the pseudo hides.\n        sm: 'ds:h-10 ds:w-10 ds:text-[length:var(--font-size-sm)] ds:[&_svg]:size-5 ds:before:absolute ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)] ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[\"\"] ds:sm:before:hidden',\n        md: 'ds:h-14 ds:w-14 ds:text-[length:var(--font-size-base)] ds:[&_svg]:size-6',\n        lg: 'ds:h-16 ds:w-16 ds:text-[length:var(--font-size-lg)] ds:[&_svg]:size-7',\n      },\n      extended: {\n        true: 'ds:w-auto ds:gap-[var(--spacing-sm)]',\n        false: '',\n      },\n      position: {\n        'bottom-end':\n          'ds:fixed ds:z-[var(--z-fixed)] ds:bottom-[calc(var(--spacing-lg)+env(safe-area-inset-bottom,0px))] ds:end-[var(--spacing-lg)]',\n        'bottom-start':\n          'ds:fixed ds:z-[var(--z-fixed)] ds:bottom-[calc(var(--spacing-lg)+env(safe-area-inset-bottom,0px))] ds:start-[var(--spacing-lg)]',\n        'top-end':\n          'ds:fixed ds:z-[var(--z-fixed)] ds:top-[calc(var(--spacing-lg)+env(safe-area-inset-top,0px))] ds:end-[var(--spacing-lg)]',\n        'top-start':\n          'ds:fixed ds:z-[var(--z-fixed)] ds:top-[calc(var(--spacing-lg)+env(safe-area-inset-top,0px))] ds:start-[var(--spacing-lg)]',\n        static: '',\n      },\n    },\n    compoundVariants: [\n      { extended: true, size: 'sm', class: 'ds:ps-3 ds:pe-4' },\n      { extended: true, size: 'md', class: 'ds:ps-4 ds:pe-5' },\n      { extended: true, size: 'lg', class: 'ds:ps-5 ds:pe-6' },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n      extended: false,\n      position: 'bottom-end',\n    },\n  },\n);\n\ntype FabBaseProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  VariantProps<typeof fabVariants>;\n\ninterface CircularFabProps extends FabBaseProps {\n  extended?: false;\n  icon: ReactNode;\n  'aria-label': string;\n  children?: never;\n}\n\ninterface ExtendedFabProps extends FabBaseProps {\n  extended: true;\n  icon?: ReactNode;\n  children: ReactNode;\n}\n\nexport type FloatingActionButtonProps = CircularFabProps | ExtendedFabProps;\n\nexport const FloatingActionButton = forwardRef<\n  HTMLButtonElement,\n  FloatingActionButtonProps\n>((props, ref) => {\n  const {\n    variant,\n    size,\n    extended,\n    position,\n    className,\n    icon,\n    children,\n    type,\n    ...rest\n  } = props;\n  const { t } = useTranslation();\n\n  const ariaLabel =\n    rest['aria-label'] ??\n    (!extended ? t('ui.common.add', { defaultValue: 'Add' }) : undefined);\n\n  return (\n    <button\n      ref={ref}\n      type={type ?? 'button'}\n      className={fabVariants({ variant, size, extended, position, className })}\n      data-component=\"floating-action-button\"\n      {...rest}\n      aria-label={ariaLabel}\n    >\n      {icon ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"ds:inline-flex ds:items-center ds:justify-center\"\n        >\n          {icon}\n        </span>\n      ) : null}\n      {extended ? <span className=\"ds:inline-flex\">{children}</span> : null}\n    </button>\n  );\n});\n\nFloatingActionButton.displayName = 'FloatingActionButton';\n"],"names":["fabVariants","cva","FloatingActionButton","forwardRef","props","ref","variant","size","extended","position","className","icon","children","type","rest","t","useTranslation","ariaLabel","jsxs","jsx"],"mappings":";;;;AAIA,MAAMA,IAAcC;AAAA,EAClB;AAAA;AAAA,IAEE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACA,KAAK,GAAG;AAAA,EACV;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WACE;AAAA,MAAA;AAAA,MAEJ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAET,UAAU;AAAA,QACR,cACE;AAAA,QACF,gBACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,IAEF,kBAAkB;AAAA,MAChB,EAAE,UAAU,IAAM,MAAM,MAAM,OAAO,kBAAA;AAAA,MACrC,EAAE,UAAU,IAAM,MAAM,MAAM,OAAO,kBAAA;AAAA,MACrC,EAAE,UAAU,IAAM,MAAM,MAAM,OAAO,kBAAA;AAAA,IAAkB;AAAA,IAEzD,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ,GAoBaC,IAAuBC,EAGlC,CAACC,GAAOC,MAAQ;AAChB,QAAM;AAAA,IACJ,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDV,GACE,EAAE,GAAAW,EAAA,IAAMC,EAAA,GAERC,IACJH,EAAK,YAAY,MACfN,IAAyD,SAA9CO,EAAE,iBAAiB,EAAE,cAAc,MAAA,CAAO;AAEzD,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,MAAMQ,KAAQ;AAAA,MACd,WAAWb,EAAY,EAAE,SAAAM,GAAS,MAAAC,GAAM,UAAAC,GAAU,UAAAC,GAAU,WAAAC,GAAW;AAAA,MACvE,kBAAe;AAAA,MACd,GAAGI;AAAA,MACJ,cAAYG;AAAA,MAEX,UAAA;AAAA,QAAAN,IACC,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA,YAET,UAAAR;AAAA,UAAA;AAAA,QAAA,IAED;AAAA,QACHH,IAAW,gBAAAW,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAP,GAAS,IAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvE,CAAC;AAEDV,EAAqB,cAAc;"}

package/dist/_chunks/{form-field-BfsPLTSc.js → form-field-Bmkeh7WY.js}

@@ -2,7 +2,7 @@ import { jsx as i, jsxs as t } from "react/jsx-runtime";
 import { forwardRef as z, useId as V, useMemo as p } from "react";
 import { c as f } from "./index-D2ZczOXr.js";
 import { useTranslation as j } from "react-i18next";
-import { F as w } from "./form-field-context-94LwgYTQ.js";
+import { F as w } from "./form-field-context-B3APVHKx.js";
 import { C as B } from "./circle-alert-ChA9opNA.js";
 const C = f("ds:text-start", {
   variants: {
@@ -34,7 +34,7 @@ const C = f("ds:text-start", {
     const {
       label: u,
       description: o,
-      error: s,
+      error: e,
       required: d = !1,
       optional: h = !1,
       orientation: n = "vertical",
@@ -42,12 +42,12 @@ const C = f("ds:text-start", {
       className: g,
       children: b,
       ...N
-    } = x, { t: y } = j(), e = V(), a = `${e}-help`, r = `${e}-error`, c = !!s, m = p(
-      () => [o ? a : null, s ? r : null].filter(Boolean).join(" "),
-      [o, s, a, r]
+    } = x, { t: y } = j(), s = V(), a = `${s}-help`, r = `${s}-error`, c = !!e, m = p(
+      () => [o ? a : null, e ? r : null].filter(Boolean).join(" "),
+      [o, e, a, r]
     ), F = p(
       () => ({
-        id: e,
+        id: s,
         helpId: a,
         errorId: r,
         describedBy: m,
@@ -55,7 +55,7 @@ const C = f("ds:text-start", {
         required: d,
         disabled: l
       }),
-      [e, a, r, m, c, d, l]
+      [s, a, r, m, c, d, l]
     );
     return /* @__PURE__ */ i(w.Provider, { value: F, children: /* @__PURE__ */ t(
       "div",
@@ -68,7 +68,8 @@ const C = f("ds:text-start", {
           /* @__PURE__ */ t(
             "label",
             {
-              htmlFor: e,
+              id: `${s}-label`,
+              htmlFor: s,
               className: "type-label ds:text-foreground",
               children: [
                 u,
@@ -91,7 +92,7 @@ const C = f("ds:text-start", {
           /* @__PURE__ */ t("div", { className: I({ orientation: n }), children: [
             b,
             o && /* @__PURE__ */ i("p", { id: a, className: "type-body-sm ds:text-muted-foreground", children: o }),
-            s && /* @__PURE__ */ t(
+            e && /* @__PURE__ */ t(
               "p",
               {
                 id: r,
@@ -105,7 +106,7 @@ const C = f("ds:text-start", {
                       className: "ds:size-4 ds:shrink-0"
                     }
                   ),
-                  /* @__PURE__ */ i("span", { children: s })
+                  /* @__PURE__ */ i("span", { children: e })
                 ]
               }
             )
@@ -119,4 +120,4 @@ $.displayName = "FormField";
 export {
   $ as F
 };
-//# sourceMappingURL=form-field-BfsPLTSc.js.map
+//# sourceMappingURL=form-field-Bmkeh7WY.js.map

package/dist/_chunks/form-field-Bmkeh7WY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-Bmkeh7WY.js","sources":["../../src/components/form-field/form-field.tsx"],"sourcesContent":["import { forwardRef, useId, useMemo, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { AlertCircle } from 'lucide-react';\nimport {\n  FormFieldContext,\n  type FormFieldContextShape,\n} from './form-field-context';\n\nconst fieldVariants = cva('ds:text-start', {\n  variants: {\n    orientation: {\n      vertical: 'ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]',\n      horizontal:\n        'ds:grid ds:grid-cols-[minmax(0,var(--form-label-inline-size))_minmax(0,1fr)] ds:items-start ds:gap-x-[var(--spacing-md)] ds:gap-y-[var(--spacing-xs)]',\n    },\n    disabled: {\n      true: 'ds:opacity-50 ds:cursor-not-allowed',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n    disabled: false,\n  },\n});\n\nconst slotsVariants = cva('ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]', {\n  variants: {\n    orientation: {\n      vertical: '',\n      horizontal: 'ds:min-w-0',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\ntype RequiredIndicator =\n  | { required?: boolean; optional?: never }\n  | { required?: never; optional?: boolean };\n\ninterface BaseFormFieldProps\n  extends\n    Omit<HTMLAttributes<HTMLDivElement>, 'children'>,\n    Omit<VariantProps<typeof fieldVariants>, 'disabled'> {\n  label: string;\n  description?: string;\n  error?: string;\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n\nexport type FormFieldProps = BaseFormFieldProps & RequiredIndicator;\n\nexport const FormField = forwardRef<HTMLDivElement, FormFieldProps>(\n  (props, ref) => {\n    const {\n      label,\n      description,\n      error,\n      required = false,\n      optional = false,\n      orientation = 'vertical',\n      disabled = false,\n      className,\n      children,\n      ...rest\n    } = props as BaseFormFieldProps & {\n      required?: boolean;\n      optional?: boolean;\n    };\n\n    const { t } = useTranslation();\n    const id = useId();\n    const helpId = `${id}-help`;\n    const errorId = `${id}-error`;\n    const invalid = Boolean(error);\n\n    const describedBy = useMemo(\n      () =>\n        [description ? helpId : null, error ? errorId : null]\n          .filter(Boolean)\n          .join(' '),\n      [description, error, helpId, errorId],\n    );\n\n    const ctx: FormFieldContextShape = useMemo(\n      () => ({\n        id,\n        helpId,\n        errorId,\n        describedBy,\n        invalid,\n        required,\n        disabled,\n      }),\n      [id, helpId, errorId, describedBy, invalid, required, disabled],\n    );\n\n    return (\n      <FormFieldContext.Provider value={ctx}>\n        <div\n          ref={ref}\n          className={fieldVariants({ orientation, disabled, className })}\n          data-component=\"form-field\"\n          {...rest}\n        >\n          <label\n            id={`${id}-label`}\n            htmlFor={id}\n            className=\"type-label ds:text-foreground\"\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"ds:text-destructive ds:ms-[var(--spacing-xs)]\"\n              >\n                *\n              </span>\n            )}\n            {optional && (\n              <span className=\"ds:text-muted-foreground ds:ms-[var(--spacing-xs)] ds:font-normal\">\n                ({t('ui.common.optional', 'optional')})\n              </span>\n            )}\n          </label>\n          <div className={slotsVariants({ orientation })}>\n            {children}\n            {description && (\n              <p id={helpId} className=\"type-body-sm ds:text-muted-foreground\">\n                {description}\n              </p>\n            )}\n            {error && (\n              <p\n                id={errorId}\n                role=\"alert\"\n                className=\"ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)] type-body-sm ds:text-destructive\"\n              >\n                <AlertCircle\n                  aria-hidden=\"true\"\n                  className=\"ds:size-4 ds:shrink-0\"\n                />\n                <span>{error}</span>\n              </p>\n            )}\n          </div>\n        </div>\n      </FormFieldContext.Provider>\n    );\n  },\n);\n\nFormField.displayName = 'FormField';\n"],"names":["fieldVariants","cva","slotsVariants","FormField","forwardRef","props","ref","label","description","error","required","optional","orientation","disabled","className","children","rest","t","useTranslation","id","useId","helpId","errorId","invalid","describedBy","useMemo","ctx","jsx","FormFieldContext","jsxs","AlertCircle"],"mappings":"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"}

package/dist/_chunks/{form-field-context-94LwgYTQ.js → form-field-context-B3APVHKx.js}

@@ -1,5 +1,7 @@
 import { createContext as t, useContext as o, useId as d } from "react";
-const l = t(null);
+const l = t(
+  null
+);
 function n() {
   const r = o(l), e = d();
   return r || {
@@ -16,4 +18,4 @@ export {
   l as F,
   n as u
 };
-//# sourceMappingURL=form-field-context-94LwgYTQ.js.map
+//# sourceMappingURL=form-field-context-B3APVHKx.js.map

package/dist/_chunks/form-field-context-B3APVHKx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-context-B3APVHKx.js","sources":["../../src/components/form-field/form-field-context.ts"],"sourcesContent":["import { createContext, useContext, useId } from 'react';\n\nexport interface FormFieldContextShape {\n  id: string;\n  helpId: string;\n  errorId: string;\n  describedBy: string;\n  invalid: boolean;\n  required: boolean;\n  disabled: boolean;\n}\n\nexport const FormFieldContext = createContext<FormFieldContextShape | null>(\n  null,\n);\n\nexport function useFormField(): FormFieldContextShape {\n  const ctx = useContext(FormFieldContext);\n  const fallbackId = useId();\n\n  if (ctx) {\n    return ctx;\n  }\n\n  return {\n    id: fallbackId,\n    helpId: `${fallbackId}-help`,\n    errorId: `${fallbackId}-error`,\n    describedBy: '',\n    invalid: false,\n    required: false,\n    disabled: false,\n  };\n}\n"],"names":["FormFieldContext","createContext","useFormField","ctx","useContext","fallbackId","useId"],"mappings":";AAYO,MAAMA,IAAmBC;AAAA,EAC9B;AACF;AAEO,SAASC,IAAsC;AACpD,QAAMC,IAAMC,EAAWJ,CAAgB,GACjCK,IAAaC,EAAA;AAEnB,SAAIH,KAIG;AAAA,IACL,IAAIE;AAAA,IACJ,QAAQ,GAAGA,CAAU;AAAA,IACrB,SAAS,GAAGA,CAAU;AAAA,IACtB,aAAa;AAAA,IACb,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EAAA;AAEd;"}

package/dist/_chunks/{freemium-paywall.agent-_nQqLyRF.js → freemium-paywall-CnvceDav.js}

@@ -1,15 +1,63 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { forwardRef as G, useId as I, useState as E, useRef as k, useImperativeHandle as J } from "react";
-import * as i from "@radix-ui/react-alert-dialog";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { forwardRef as J, useId as R, useState as Q, useRef as m, useImperativeHandle as W, useMemo as X } from "react";
+import * as d from "@radix-ui/react-alert-dialog";
 import * as K from "@radix-ui/react-radio-group";
-import { c as Q } from "./index-D2ZczOXr.js";
-import { useTranslation as W } from "react-i18next";
-import { B as R } from "./button-7mLWcMp_.js";
-import { P as X } from "./progress-wNsqkw8I.js";
-import { f as Y } from "./payment-form-BWaXas8z.js";
-import { T as Z } from "./triangle-alert-CBPUIzQo.js";
-import { C as $ } from "./check-DPdL_Sm7.js";
-const ee = Q(
+import { c as Y } from "./index-D2ZczOXr.js";
+import { useTranslation as Z } from "react-i18next";
+import { u as $ } from "./registry-C9nwlNyL.js";
+import { B as j } from "./button-DD_0Xdmr.js";
+import { P as ee } from "./progress-C11tqhoI.js";
+import { f as se } from "./payment-form-C3vT_npe.js";
+import { T as ae } from "./triangle-alert-CBPUIzQo.js";
+import { C as re } from "./check-DPdL_Sm7.js";
+const te = {
+  id: "freemium-paywall",
+  capabilities: ["submit", "dismiss"],
+  state: {
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.freemiumPaywall.state.isOpen",
+      description: "True when the paywall dialog is open.",
+      read: (r) => r.isOpen()
+    },
+    selectedPlanId: {
+      type: "string | null",
+      descriptionKey: "ui.agent.freemiumPaywall.state.selectedPlanId",
+      description: "Opaque id of the currently-selected plan.",
+      read: (r) => r.getSelectedPlanId()
+    }
+  },
+  actions: {
+    upgrade: {
+      safety: "write",
+      descriptionKey: "ui.agent.freemiumPaywall.actions.upgrade",
+      description: "Fire onUpgrade with the currently-selected plan id.",
+      invoke: (r) => {
+        r.upgrade();
+      }
+    },
+    dismiss: {
+      safety: "destructive",
+      descriptionKey: "ui.agent.freemiumPaywall.actions.dismiss",
+      description: "Dismiss the paywall via the Not Now action. Irreversible from the same UI.",
+      invoke: (r) => {
+        r.dismiss();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "freemium-paywall",
+      description: "Marks the FreemiumPaywall dialog content."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, ie = Y(
   [
     "ds:fixed ds:z-[var(--z-modal)] ds:overflow-auto",
     "ds:bg-[color:var(--popover)] ds:text-[color:var(--popover-foreground)]",
@@ -32,50 +80,56 @@ const ee = Q(
     },
     defaultVariants: { layout: "centered", density: "full" }
   }
-), se = G(
+), de = J(
   ({
     open: r,
-    onOpenChange: m,
-    plans: p,
-    selectedPlanId: u,
-    defaultSelectedPlanId: j,
+    onOpenChange: p,
+    plans: u,
+    selectedPlanId: f,
+    defaultSelectedPlanId: A,
     onSelectedPlanChange: n,
     usage: t,
     onUpgrade: F,
     onCancel: c,
     title: z,
-    description: A,
-    layout: C = "centered",
-    density: T = "full",
+    description: C,
+    layout: T = "centered",
+    density: M = "full",
     className: O
   }, L) => {
-    var w;
-    const { t: s, i18n: M } = W(), f = I(), v = I(), g = u !== void 0, [S, D] = E(
-      j ?? ((w = p[0]) == null ? void 0 : w.id) ?? ""
-    ), l = g ? u ?? "" : S, U = (a) => {
-      g || D(a), n == null || n(a);
-    }, h = () => {
-      c == null || c(), m(!1);
+    var P;
+    const { t: s, i18n: S } = Z(), v = R(), g = R(), h = f !== void 0, [D, H] = Q(
+      A ?? ((P = u[0]) == null ? void 0 : P.id) ?? ""
+    ), l = h ? f ?? "" : D, U = (a) => {
+      h || H(a), n == null || n(a);
     }, y = () => {
+      c == null || c(), p(!1);
+    }, b = () => {
       l && F(l);
-    }, b = k(r);
-    b.current = r;
-    const x = k(l);
-    x.current = l, J(
-      L,
+    }, x = m(r);
+    x.current = r;
+    const w = m(l);
+    w.current = l;
+    const N = m(null);
+    W(L, () => N.current, []);
+    const V = X(
       () => ({
-        isOpen: () => b.current,
-        getSelectedPlanId: () => x.current || null,
-        upgrade: () => y(),
-        dismiss: () => h()
+        isOpen: () => x.current,
+        getSelectedPlanId: () => w.current || null,
+        upgrade: () => b(),
+        dismiss: () => y()
       }),
       // eslint-disable-next-line react-hooks/exhaustive-deps
       []
     );
-    const V = t ? Math.min(100, Math.max(0, t.used / Math.max(1, t.limit) * 100)) : 0, o = t ? t.used >= t.limit : !1;
-    return /* @__PURE__ */ e(i.Root, { open: r, onOpenChange: m, children: /* @__PURE__ */ d(i.Portal, { children: [
+    $(te, V, void 0);
+    const B = t ? Math.min(
+      100,
+      Math.max(0, t.used / Math.max(1, t.limit) * 100)
+    ) : 0, o = t ? t.used >= t.limit : !1;
+    return /* @__PURE__ */ e(d.Root, { open: r, onOpenChange: p, children: /* @__PURE__ */ i(d.Portal, { children: [
       /* @__PURE__ */ e(
-        i.Overlay,
+        d.Overlay,
         {
           className: [
             "ds:fixed ds:inset-0 ds:z-[var(--z-modal-backdrop)]",
@@ -85,20 +139,21 @@ const ee = Q(
           ].join(" ")
         }
       ),
-      /* @__PURE__ */ d(
-        i.Content,
+      /* @__PURE__ */ i(
+        d.Content,
         {
-          "aria-labelledby": f,
-          "aria-describedby": v,
-          className: ee({ layout: C, density: T, className: O }),
+          ref: N,
+          "aria-labelledby": v,
+          "aria-describedby": g,
+          className: ie({ layout: T, density: M, className: O }),
           "data-component": "freemium-paywall",
           children: [
-            /* @__PURE__ */ e(i.Title, { id: f, asChild: !0, children: /* @__PURE__ */ e("h2", { className: "type-title-card", children: z ?? s("ui.paywall.title") }) }),
-            /* @__PURE__ */ e(i.Description, { id: v, asChild: !0, children: /* @__PURE__ */ e("p", { className: "ds:mt-[var(--spacing-xs)] ds:text-[color:var(--muted-foreground)]", children: A ?? s("ui.paywall.description") }) }),
-            t ? /* @__PURE__ */ d("div", { className: "ds:mt-[var(--spacing-md)]", children: [
-              /* @__PURE__ */ d("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:mb-[var(--spacing-xs)]", children: [
+            /* @__PURE__ */ e(d.Title, { id: v, asChild: !0, children: /* @__PURE__ */ e("h2", { className: "type-title-card", children: z ?? s("ui.paywall.title") }) }),
+            /* @__PURE__ */ e(d.Description, { id: g, asChild: !0, children: /* @__PURE__ */ e("p", { className: "ds:mt-[var(--spacing-xs)] ds:text-[color:var(--muted-foreground)]", children: C ?? s("ui.paywall.description") }) }),
+            t ? /* @__PURE__ */ i("div", { className: "ds:mt-[var(--spacing-md)]", children: [
+              /* @__PURE__ */ i("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:mb-[var(--spacing-xs)]", children: [
                 o ? /* @__PURE__ */ e(
-                  Z,
+                  ae,
                   {
                     "aria-hidden": "true",
                     className: "ds:size-4 ds:text-[color:var(--destructive)]"
@@ -119,9 +174,9 @@ const ee = Q(
                 )
               ] }),
               /* @__PURE__ */ e(
-                X,
+                ee,
                 {
-                  value: V,
+                  value: B,
                   max: 100,
                   ariaLabel: s("ui.paywall.usageLabel", {
                     used: t.used,
@@ -138,13 +193,13 @@ const ee = Q(
                 onValueChange: U,
                 "aria-label": s("ui.paywall.title"),
                 className: "ds:mt-[var(--spacing-md)] ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
-                children: p.map((a) => {
-                  const N = Y(
+                children: u.map((a) => {
+                  const I = se(
                     a.priceAmount,
                     a.currency,
-                    M.language
-                  ), P = a.perKey ? s(a.perKey) : void 0, B = P ? s("ui.paywall.pricePer", { price: N, period: P }) : N, H = s(a.nameKey);
-                  return /* @__PURE__ */ d(
+                    S.language
+                  ), k = a.perKey ? s(a.perKey) : void 0, _ = k ? s("ui.paywall.pricePer", { price: I, period: k }) : I, q = s(a.nameKey);
+                  return /* @__PURE__ */ i(
                     K.Item,
                     {
                       value: a.id,
@@ -159,31 +214,31 @@ const ee = Q(
                         "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]"
                       ].join(" "),
                       children: [
-                        /* @__PURE__ */ d("span", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
-                          /* @__PURE__ */ e("span", { className: "ds:font-semibold", children: H }),
-                          /* @__PURE__ */ e("span", { className: "ds:tabular-nums", children: B })
+                        /* @__PURE__ */ i("span", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+                          /* @__PURE__ */ e("span", { className: "ds:font-semibold", children: q }),
+                          /* @__PURE__ */ e("span", { className: "ds:tabular-nums", children: _ })
                         ] }),
                         a.featuresKeys && a.featuresKeys.length > 0 ? /* @__PURE__ */ e(
                           "ul",
                           {
                             "aria-label": s("ui.paywall.features"),
                             className: "ds:mt-[var(--spacing-xs)] ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
-                            children: a.featuresKeys.map((_, q) => /* @__PURE__ */ d(
+                            children: a.featuresKeys.map((G, E) => /* @__PURE__ */ i(
                               "li",
                               {
                                 className: "ds:flex ds:items-start ds:gap-[var(--spacing-xs)] type-body-sm",
                                 children: [
                                   /* @__PURE__ */ e(
-                                    $,
+                                    re,
                                     {
                                       "aria-hidden": "true",
                                       className: "ds:size-4 ds:shrink-0 ds:text-[color:var(--primary)] ds:mt-[1px]"
                                     }
                                   ),
-                                  /* @__PURE__ */ e("span", { children: s(_) })
+                                  /* @__PURE__ */ e("span", { children: s(G) })
                                 ]
                               },
-                              q
+                              E
                             ))
                           }
                         ) : null
@@ -194,9 +249,9 @@ const ee = Q(
                 })
               }
             ),
-            /* @__PURE__ */ d("div", { className: "ds:mt-[var(--spacing-lg)] ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:justify-end", children: [
-              /* @__PURE__ */ e(i.Cancel, { asChild: !0, children: /* @__PURE__ */ e(R, { intent: "outline", onClick: h, children: s("ui.paywall.notNow") }) }),
-              /* @__PURE__ */ e(i.Action, { asChild: !0, children: /* @__PURE__ */ e(R, { intent: "primary", onClick: y, children: s("ui.paywall.upgrade") }) })
+            /* @__PURE__ */ i("div", { className: "ds:mt-[var(--spacing-lg)] ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:justify-end", children: [
+              /* @__PURE__ */ e(d.Cancel, { asChild: !0, children: /* @__PURE__ */ e(j, { intent: "outline", onClick: y, children: s("ui.paywall.notNow") }) }),
+              /* @__PURE__ */ e(d.Action, { asChild: !0, children: /* @__PURE__ */ e(j, { intent: "primary", onClick: b, children: s("ui.paywall.upgrade") }) })
             ] })
           ]
         }
@@ -204,57 +259,9 @@ const ee = Q(
     ] }) });
   }
 );
-se.displayName = "FreemiumPaywall";
-const me = {
-  id: "freemium-paywall",
-  capabilities: ["submit", "dismiss"],
-  state: {
-    isOpen: {
-      type: "boolean",
-      descriptionKey: "ui.agent.freemiumPaywall.state.isOpen",
-      description: "True when the paywall dialog is open.",
-      read: (r) => r.isOpen()
-    },
-    selectedPlanId: {
-      type: "string | null",
-      descriptionKey: "ui.agent.freemiumPaywall.state.selectedPlanId",
-      description: "Opaque id of the currently-selected plan.",
-      read: (r) => r.getSelectedPlanId()
-    }
-  },
-  actions: {
-    upgrade: {
-      safety: "write",
-      descriptionKey: "ui.agent.freemiumPaywall.actions.upgrade",
-      description: "Fire onUpgrade with the currently-selected plan id.",
-      invoke: (r) => {
-        r.upgrade();
-      }
-    },
-    dismiss: {
-      safety: "destructive",
-      descriptionKey: "ui.agent.freemiumPaywall.actions.dismiss",
-      description: "Dismiss the paywall via the Not Now action. Irreversible from the same UI.",
-      invoke: (r) => {
-        r.dismiss();
-      }
-    }
-  },
-  domHooks: {
-    root: {
-      attr: "data-component",
-      value: "freemium-paywall",
-      description: "Marks the FreemiumPaywall dialog content."
-    },
-    instanceId: {
-      attr: "data-component-id",
-      sourceProp: "id",
-      description: "Sourced from the id prop."
-    }
-  }
-};
+de.displayName = "FreemiumPaywall";
 export {
-  se as F,
-  me as f
+  de as F,
+  te as f
 };
-//# sourceMappingURL=freemium-paywall.agent-_nQqLyRF.js.map
+//# sourceMappingURL=freemium-paywall-CnvceDav.js.map

package/dist/_chunks/freemium-paywall-CnvceDav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"freemium-paywall-CnvceDav.js","sources":["../../src/components/freemium-paywall/freemium-paywall.agent.ts","../../src/components/freemium-paywall/freemium-paywall.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Agent adapter — FreemiumPaywall.                                       */\n/* -------------------------------------------------------------------- */\n\nimport type { AgentAdapter } from '../../agent/types';\nimport type { FreemiumPaywallHandle } from './freemium-paywall';\n\nexport const freemiumPaywallAgent: AgentAdapter<FreemiumPaywallHandle> = {\n  id: 'freemium-paywall',\n  capabilities: ['submit', 'dismiss'],\n  state: {\n    isOpen: {\n      type: 'boolean',\n      descriptionKey: 'ui.agent.freemiumPaywall.state.isOpen',\n      description: 'True when the paywall dialog is open.',\n      read: (handle) => handle.isOpen(),\n    },\n    selectedPlanId: {\n      type: 'string | null',\n      descriptionKey: 'ui.agent.freemiumPaywall.state.selectedPlanId',\n      description: 'Opaque id of the currently-selected plan.',\n      read: (handle) => handle.getSelectedPlanId(),\n    },\n  },\n  actions: {\n    upgrade: {\n      safety: 'write',\n      descriptionKey: 'ui.agent.freemiumPaywall.actions.upgrade',\n      description: 'Fire onUpgrade with the currently-selected plan id.',\n      invoke: (handle) => {\n        handle.upgrade();\n      },\n    },\n    dismiss: {\n      safety: 'destructive',\n      descriptionKey: 'ui.agent.freemiumPaywall.actions.dismiss',\n      description:\n        'Dismiss the paywall via the Not Now action. Irreversible from the same UI.',\n      invoke: (handle) => {\n        handle.dismiss();\n      },\n    },\n  },\n  domHooks: {\n    root: {\n      attr: 'data-component',\n      value: 'freemium-paywall',\n      description: 'Marks the FreemiumPaywall dialog content.',\n    },\n    instanceId: {\n      attr: 'data-component-id',\n      sourceProp: 'id',\n      description: 'Sourced from the id prop.',\n    },\n  },\n};\n","import {\n  forwardRef,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\nimport * as RadixAlertDialog from '@radix-ui/react-alert-dialog';\nimport * as RadixRadioGroup from '@radix-ui/react-radio-group';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { useAgentRegistration } from '../../agent/registry';\nimport { freemiumPaywallAgent } from './freemium-paywall.agent';\nimport { AlertTriangle, Check } from 'lucide-react';\nimport { Button } from '../button';\nimport { Progress } from '../progress';\nimport { formatPaymentAmount } from '../payment-form';\n\n/* ------------------------------------------------------------------ */\n/* Types                                                                */\n/* ------------------------------------------------------------------ */\n\nexport interface FreemiumPlan {\n  id: string;\n  /** Translation key for the plan name (e.g. `app.paywall.plans.pro`). */\n  nameKey: string;\n  /** Amount in minor units (cents, centesimi). */\n  priceAmount: number;\n  /** ISO 4217 currency code. */\n  currency: string;\n  /** Translation key for the cadence suffix (e.g. `app.paywall.period.month`). */\n  perKey?: string;\n  /** Per-line feature translation keys. */\n  featuresKeys?: string[];\n}\n\nconst contentVariants = cva(\n  [\n    'ds:fixed ds:z-[var(--z-modal)] ds:overflow-auto',\n    'ds:bg-[color:var(--popover)] ds:text-[color:var(--popover-foreground)]',\n    'ds:border ds:border-border ds:shadow-[var(--shadow-lg)]',\n    // forced-colors: keep the dialog boundary visible under Windows High\n    // Contrast, where `var(--border)` may collapse to system colours.\n    'ds:forced-colors:border-[CanvasText]',\n    'ds:focus:outline-none',\n  ].join(' '),\n  {\n    variants: {\n      layout: {\n        centered:\n          'ds:start-1/2 ds:top-1/2 ds:-translate-x-1/2 ds:-translate-y-1/2 ds:rtl:translate-x-1/2 ds:rounded-[var(--radius-md)] ds:max-w-[var(--dialog-width-xl)] ds:w-[calc(100vw-2rem)] ds:max-h-[90vh]',\n        sheet:\n          'ds:inset-inline-0 ds:bottom-0 ds:w-full ds:max-h-[90vh] ds:rounded-t-[var(--radius-md)]',\n      },\n      density: {\n        compact:\n          'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]',\n        full: 'ds:ps-[var(--spacing-lg)] ds:pe-[var(--spacing-lg)] ds:pt-[var(--spacing-lg)] ds:pb-[var(--spacing-lg)]',\n      },\n    },\n    defaultVariants: { layout: 'centered', density: 'full' },\n  },\n);\n\n/** Curated imperative handle for agent / external automation. */\nexport interface FreemiumPaywallHandle {\n  isOpen: () => boolean;\n  getSelectedPlanId: () => string | null;\n  upgrade: () => void;\n  dismiss: () => void;\n}\n\nexport interface FreemiumPaywallProps extends VariantProps<\n  typeof contentVariants\n> {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  plans: FreemiumPlan[];\n  /** Currently-selected plan id (controlled) or default. */\n  selectedPlanId?: string;\n  defaultSelectedPlanId?: string;\n  onSelectedPlanChange?: (id: string) => void;\n  /** Usage indicator values — omit the object to hide the bar. */\n  usage?: { used: number; limit: number };\n  /** Fires on upgrade. */\n  onUpgrade: (planId: string) => void;\n  /** Fires when the user dismisses via Not Now. */\n  onCancel?: () => void;\n  /** Title override; defaults to t('ui.paywall.title'). */\n  title?: ReactNode;\n  /** Description override; defaults to t('ui.paywall.description'). */\n  description?: ReactNode;\n  className?: string;\n}\n\nexport const FreemiumPaywall = forwardRef<HTMLDivElement, FreemiumPaywallProps>(\n  (\n    {\n      open,\n      onOpenChange,\n      plans,\n      selectedPlanId,\n      defaultSelectedPlanId,\n      onSelectedPlanChange,\n      usage,\n      onUpgrade,\n      onCancel,\n      title,\n      description,\n      layout = 'centered',\n      density = 'full',\n      className,\n    },\n    ref,\n  ) => {\n    const { t, i18n } = useTranslation();\n    const titleId = useId();\n    const descId = useId();\n\n    const isControlled = selectedPlanId !== undefined;\n    const [internalSelected, setInternalSelected] = useState<string>(\n      defaultSelectedPlanId ?? plans[0]?.id ?? '',\n    );\n    const currentSelected = isControlled\n      ? (selectedPlanId ?? '')\n      : internalSelected;\n\n    const handleSelectedChange = (next: string) => {\n      if (!isControlled) setInternalSelected(next);\n      onSelectedPlanChange?.(next);\n    };\n\n    const handleCancel = () => {\n      onCancel?.();\n      onOpenChange(false);\n    };\n\n    const handleUpgrade = () => {\n      if (!currentSelected) return;\n      onUpgrade(currentSelected);\n    };\n\n    const openRef = useRef(open);\n    openRef.current = open;\n    const selectedRef = useRef<string>(currentSelected);\n    selectedRef.current = currentSelected;\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    useImperativeHandle(ref, () => contentRef.current as HTMLDivElement, []);\n\n    const agentHandle = useMemo<FreemiumPaywallHandle>(\n      () => ({\n        isOpen: () => openRef.current,\n        getSelectedPlanId: () => selectedRef.current || null,\n        upgrade: () => handleUpgrade(),\n        dismiss: () => handleCancel(),\n      }),\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n    useAgentRegistration(freemiumPaywallAgent, agentHandle, undefined);\n\n    const usagePercent = usage\n      ? Math.min(\n          100,\n          Math.max(0, (usage.used / Math.max(1, usage.limit)) * 100),\n        )\n      : 0;\n    const usageFull = usage ? usage.used >= usage.limit : false;\n\n    return (\n      <RadixAlertDialog.Root open={open} onOpenChange={onOpenChange}>\n        <RadixAlertDialog.Portal>\n          <RadixAlertDialog.Overlay\n            className={[\n              'ds:fixed ds:inset-0 ds:z-[var(--z-modal-backdrop)]',\n              'ds:bg-[color:var(--foreground)]/40',\n              'ds:motion-safe:data-[state=open]:animate-in ds:motion-safe:data-[state=closed]:animate-out',\n              'ds:[.theme-accessible_&]:animate-none',\n            ].join(' ')}\n          />\n          <RadixAlertDialog.Content\n            ref={contentRef}\n            aria-labelledby={titleId}\n            aria-describedby={descId}\n            className={contentVariants({ layout, density, className })}\n            data-component=\"freemium-paywall\"\n          >\n            <RadixAlertDialog.Title id={titleId} asChild>\n              <h2 className=\"type-title-card\">\n                {title ?? t('ui.paywall.title')}\n              </h2>\n            </RadixAlertDialog.Title>\n            <RadixAlertDialog.Description id={descId} asChild>\n              <p className=\"ds:mt-[var(--spacing-xs)] ds:text-[color:var(--muted-foreground)]\">\n                {description ?? t('ui.paywall.description')}\n              </p>\n            </RadixAlertDialog.Description>\n\n            {usage ? (\n              <div className=\"ds:mt-[var(--spacing-md)]\">\n                <div className=\"ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:mb-[var(--spacing-xs)]\">\n                  {usageFull ? (\n                    <AlertTriangle\n                      aria-hidden=\"true\"\n                      className=\"ds:size-4 ds:text-[color:var(--destructive)]\"\n                    />\n                  ) : null}\n                  <span\n                    className={[\n                      'type-body-sm',\n                      usageFull\n                        ? 'ds:text-[color:var(--destructive)]'\n                        : 'ds:text-[color:var(--muted-foreground)]',\n                    ].join(' ')}\n                  >\n                    {usageFull\n                      ? t('ui.paywall.usageFull')\n                      : t('ui.paywall.usageLabel', {\n                          used: usage.used,\n                          limit: usage.limit,\n                        })}\n                  </span>\n                </div>\n                <Progress\n                  value={usagePercent}\n                  max={100}\n                  ariaLabel={t('ui.paywall.usageLabel', {\n                    used: usage.used,\n                    limit: usage.limit,\n                  })}\n                  className={\n                    usageFull\n                      ? 'ds:[&_[role=progressbar]>*]:bg-[color:var(--destructive)]'\n                      : ''\n                  }\n                />\n              </div>\n            ) : null}\n\n            <RadixRadioGroup.Root\n              value={currentSelected}\n              onValueChange={handleSelectedChange}\n              aria-label={t('ui.paywall.title')}\n              className=\"ds:mt-[var(--spacing-md)] ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]\"\n            >\n              {plans.map((plan) => {\n                // Reuse the payment-form helper — it knows about\n                // zero-decimal currencies (JPY, KRW, VND …) and applies\n                // the right divisor. Raw `/ 100` would 100× the price in\n                // those currencies.\n                const formattedPrice = formatPaymentAmount(\n                  plan.priceAmount,\n                  plan.currency,\n                  i18n.language,\n                );\n                const period = plan.perKey ? t(plan.perKey) : undefined;\n                const priceLine = period\n                  ? t('ui.paywall.pricePer', { price: formattedPrice, period })\n                  : formattedPrice;\n                const planName = t(plan.nameKey);\n                return (\n                  <RadixRadioGroup.Item\n                    key={plan.id}\n                    value={plan.id}\n                    className={[\n                      'ds:group ds:relative ds:flex ds:flex-col ds:items-stretch',\n                      'ds:rounded-[var(--radius-md)] ds:border ds:border-border',\n                      'ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]',\n                      'ds:text-start ds:bg-[color:var(--card)] ds:text-[color:var(--card-foreground)]',\n                      'ds:data-[state=checked]:border-[color:var(--primary)]',\n                      'ds:data-[state=checked]:bg-[color:var(--primary)]/5',\n                      'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n                      'ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n                    ].join(' ')}\n                  >\n                    <span className=\"ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]\">\n                      <span className=\"ds:font-semibold\">{planName}</span>\n                      <span className=\"ds:tabular-nums\">{priceLine}</span>\n                    </span>\n                    {plan.featuresKeys && plan.featuresKeys.length > 0 ? (\n                      <ul\n                        aria-label={t('ui.paywall.features')}\n                        className=\"ds:mt-[var(--spacing-xs)] ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]\"\n                      >\n                        {plan.featuresKeys.map((key, i) => (\n                          <li\n                            key={i}\n                            className=\"ds:flex ds:items-start ds:gap-[var(--spacing-xs)] type-body-sm\"\n                          >\n                            <Check\n                              aria-hidden=\"true\"\n                              className=\"ds:size-4 ds:shrink-0 ds:text-[color:var(--primary)] ds:mt-[1px]\"\n                            />\n                            <span>{t(key)}</span>\n                          </li>\n                        ))}\n                      </ul>\n                    ) : null}\n                  </RadixRadioGroup.Item>\n                );\n              })}\n            </RadixRadioGroup.Root>\n\n            <div className=\"ds:mt-[var(--spacing-lg)] ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:justify-end\">\n              <RadixAlertDialog.Cancel asChild>\n                <Button intent=\"outline\" onClick={handleCancel}>\n                  {t('ui.paywall.notNow')}\n                </Button>\n              </RadixAlertDialog.Cancel>\n              <RadixAlertDialog.Action asChild>\n                <Button intent=\"primary\" onClick={handleUpgrade}>\n                  {t('ui.paywall.upgrade')}\n                </Button>\n              </RadixAlertDialog.Action>\n            </div>\n          </RadixAlertDialog.Content>\n        </RadixAlertDialog.Portal>\n      </RadixAlertDialog.Root>\n    );\n  },\n);\n\nFreemiumPaywall.displayName = 'FreemiumPaywall';\n"],"names":["freemiumPaywallAgent","handle","contentVariants","cva","FreemiumPaywall","forwardRef","open","onOpenChange","plans","selectedPlanId","defaultSelectedPlanId","onSelectedPlanChange","usage","onUpgrade","onCancel","title","description","layout","density","className","ref","t","i18n","useTranslation","titleId","useId","descId","isControlled","internalSelected","setInternalSelected","useState","_a","currentSelected","handleSelectedChange","next","handleCancel","handleUpgrade","openRef","useRef","selectedRef","contentRef","useImperativeHandle","agentHandle","useMemo","useAgentRegistration","usagePercent","usageFull","jsx","RadixAlertDialog","jsxs","AlertTriangle","Progress","RadixRadioGroup","plan","formattedPrice","formatPaymentAmount","period","priceLine","planName","key","i","Check","Button"],"mappings":"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"}