@varity-labs/ui-kit 2.0.0-alpha.1 → 2.0.0-beta.10

package/dist/components/Onramp/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Onramp/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Onramp/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/Onramp/index.js

@@ -1,11 +1,9 @@
 /**
- * Onramp Components Export
+ * Payment Components Export
  *
- * Thirdweb Pay for buying crypto with fiat currency
- * - Credit/Debit card payments
+ * Seamless credit card payments for adding funds.
+ * - Credit/Debit card
  * - Apple Pay & Google Pay
- * - KYC verification handling
- * - Transaction status tracking
  */
 export { BuyUSDCButton } from './BuyUSDCButton';
 export { OnrampWidget } from './OnrampWidget';

package/dist/components/Onramp/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Onramp/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Onramp/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/Overlay/ConfirmDialog.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface ConfirmDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    description: string;
+    confirmLabel?: string;
+    confirmVariant?: 'danger' | 'primary';
+    loading?: boolean;
+}
+export declare function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel, confirmVariant, loading, }: ConfirmDialogProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=ConfirmDialog.d.ts.map

package/dist/components/Overlay/ConfirmDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/ConfirmDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,kBAAkB;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,SAAS,EACT,KAAK,EACL,WAAW,EACX,YAAuB,EACvB,cAAyB,EACzB,OAAe,GAChB,EAAE,kBAAkB,qBAapB"}

package/dist/components/Overlay/ConfirmDialog.js

@@ -0,0 +1,11 @@
+'use client';
+import React from 'react';
+import { Dialog } from './Dialog';
+import { Button } from '../Form/Button';
+export function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel = 'Delete', confirmVariant = 'danger', loading = false, }) {
+    return (React.createElement(Dialog, { open: open, onClose: onClose, title: title, description: description },
+        React.createElement("div", { className: "flex gap-2 pt-4" },
+            React.createElement(Button, { variant: confirmVariant, onClick: onConfirm, loading: loading }, confirmLabel),
+            React.createElement(Button, { variant: "secondary", onClick: onClose, disabled: loading }, "Cancel"))));
+}
+//# sourceMappingURL=ConfirmDialog.js.map

package/dist/components/Overlay/ConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../../src/components/Overlay/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAaxC,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,SAAS,EACT,KAAK,EACL,WAAW,EACX,YAAY,GAAG,QAAQ,EACvB,cAAc,GAAG,QAAQ,EACzB,OAAO,GAAG,KAAK,GACI;IACnB,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW;QAC1E,6BAAK,SAAS,EAAC,iBAAiB;YAC9B,oBAAC,MAAM,IAAC,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,IAClE,YAAY,CACN;YACT,oBAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,aAEtD,CACL,CACC,CACV,CAAC;AACJ,CAAC"}

package/dist/components/Overlay/Dialog.d.ts

@@ -0,0 +1,11 @@
+import React, { type ReactNode } from 'react';
+interface DialogProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    description?: string;
+    children: ReactNode;
+}
+export declare function Dialog({ open, onClose, title, description, children }: DialogProps): React.JSX.Element | null;
+export {};
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/components/Overlay/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjE,UAAU,WAAW;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,WAAW,4BAgGlF"}

package/dist/components/Overlay/Dialog.js

@@ -0,0 +1,69 @@
+'use client';
+import React, { useEffect, useRef } from 'react';
+import { X } from 'lucide-react';
+export function Dialog({ open, onClose, title, description, children }) {
+    const overlayRef = useRef(null);
+    const contentRef = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        // Get all focusable elements
+        const getFocusableElements = () => {
+            return contentRef.current?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        };
+        // Focus trap handler
+        const handleTabKey = (e) => {
+            if (e.key !== 'Tab')
+                return;
+            const focusableElements = getFocusableElements();
+            if (!focusableElements || focusableElements.length === 0)
+                return;
+            const firstElement = focusableElements[0];
+            const lastElement = focusableElements[focusableElements.length - 1];
+            if (e.shiftKey && document.activeElement === firstElement) {
+                lastElement.focus();
+                e.preventDefault();
+            }
+            else if (!e.shiftKey && document.activeElement === lastElement) {
+                firstElement.focus();
+                e.preventDefault();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        document.addEventListener('keydown', handleTabKey);
+        document.body.style.overflow = 'hidden';
+        // Focus first focusable element
+        const timer = setTimeout(() => {
+            const focusableElements = getFocusableElements();
+            if (focusableElements && focusableElements.length > 0) {
+                focusableElements[0].focus();
+            }
+        }, 50);
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+            document.removeEventListener('keydown', handleTabKey);
+            document.body.style.overflow = '';
+            clearTimeout(timer);
+        };
+    }, [open, onClose]);
+    if (!open)
+        return null;
+    return (React.createElement("div", { ref: overlayRef, className: "fixed inset-0 z-50 flex items-center justify-center p-4", onClick: (e) => {
+            if (e.target === overlayRef.current)
+                onClose();
+        }, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-title" },
+        React.createElement("div", { className: "fixed inset-0 bg-black/50 backdrop-blur-sm" }),
+        React.createElement("div", { ref: contentRef, className: "relative z-10 w-full max-w-lg rounded-xl border border-gray-200 bg-white p-6 shadow-2xl" },
+            React.createElement("div", { className: "mb-4 flex items-start justify-between" },
+                React.createElement("div", null,
+                    React.createElement("h2", { id: "dialog-title", className: "text-lg font-semibold text-gray-900" }, title),
+                    description && (React.createElement("p", { className: "mt-1 text-sm text-gray-500" }, description))),
+                React.createElement("button", { onClick: onClose, className: "rounded-lg p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors", "aria-label": "Close dialog" },
+                    React.createElement(X, { className: "h-5 w-5" }))),
+            children)));
+}
+//# sourceMappingURL=Dialog.js.map

package/dist/components/Overlay/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Overlay/Dialog.tsx"],"names":[],"mappings":"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"}

package/dist/components/Overlay/DropdownMenu.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+export interface DropdownMenuItem {
+    label: string;
+    onClick: () => void;
+    icon?: LucideIcon;
+    disabled?: boolean;
+    danger?: boolean;
+}
+export interface DropdownMenuProps {
+    trigger: React.ReactNode;
+    items: (DropdownMenuItem | 'divider')[];
+    align?: 'left' | 'right';
+    className?: string;
+}
+export declare function DropdownMenu({ trigger, items, align, className, }: DropdownMenuProps): React.JSX.Element;
+//# sourceMappingURL=DropdownMenu.d.ts.map

package/dist/components/Overlay/DropdownMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/DropdownMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,CAAC,gBAAgB,GAAG,SAAS,CAAC,EAAE,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,KAAe,EACf,SAAc,GACf,EAAE,iBAAiB,qBA6KnB"}

package/dist/components/Overlay/DropdownMenu.js

@@ -0,0 +1,123 @@
+'use client';
+import React, { useState, useRef, useEffect } from 'react';
+export function DropdownMenu({ trigger, items, align = 'right', className = '', }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const menuRef = useRef(null);
+    const triggerRef = useRef(null);
+    // Get only the actual menu items (not dividers)
+    const menuItems = items.filter((item) => item !== 'divider');
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current &&
+                !menuRef.current.contains(event.target) &&
+                triggerRef.current &&
+                !triggerRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setFocusedIndex(-1);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [isOpen]);
+    const handleKeyDown = (e) => {
+        if (!isOpen) {
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                setIsOpen(true);
+                setFocusedIndex(0);
+            }
+            return;
+        }
+        switch (e.key) {
+            case 'Escape':
+                e.preventDefault();
+                setIsOpen(false);
+                setFocusedIndex(-1);
+                triggerRef.current?.focus();
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                setFocusedIndex((prev) => {
+                    const nextIndex = prev + 1;
+                    return nextIndex >= menuItems.length ? 0 : nextIndex;
+                });
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setFocusedIndex((prev) => {
+                    const nextIndex = prev - 1;
+                    return nextIndex < 0 ? menuItems.length - 1 : nextIndex;
+                });
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (focusedIndex >= 0 && focusedIndex < menuItems.length) {
+                    const item = menuItems[focusedIndex];
+                    if (!item.disabled) {
+                        item.onClick();
+                        setIsOpen(false);
+                        setFocusedIndex(-1);
+                    }
+                }
+                break;
+            case 'Tab':
+                // Focus trap: keep focus within menu
+                e.preventDefault();
+                if (e.shiftKey) {
+                    // Shift+Tab: move backwards
+                    setFocusedIndex((prev) => {
+                        const nextIndex = prev - 1;
+                        return nextIndex < 0 ? menuItems.length - 1 : nextIndex;
+                    });
+                }
+                else {
+                    // Tab: move forwards
+                    setFocusedIndex((prev) => {
+                        const nextIndex = prev + 1;
+                        return nextIndex >= menuItems.length ? 0 : nextIndex;
+                    });
+                }
+                break;
+        }
+    };
+    const handleItemClick = (item) => {
+        if (!item.disabled) {
+            item.onClick();
+            setIsOpen(false);
+            setFocusedIndex(-1);
+        }
+    };
+    return (React.createElement("div", { className: `relative inline-block ${className}` },
+        React.createElement("button", { ref: triggerRef, onClick: () => setIsOpen(!isOpen), onKeyDown: handleKeyDown, className: "focus:outline-none", "aria-haspopup": "true", "aria-expanded": isOpen }, trigger),
+        isOpen && (React.createElement("div", { ref: menuRef, className: `
+            absolute z-50 mt-2 w-56 rounded-md shadow-lg
+            bg-white dark:bg-gray-800
+            border border-gray-200 dark:border-gray-700
+            ${align === 'right' ? 'right-0' : 'left-0'}
+          `, role: "menu", "aria-orientation": "vertical" },
+            React.createElement("div", { className: "py-1" }, items.map((item, index) => {
+                if (item === 'divider') {
+                    return (React.createElement("div", { key: `divider-${index}`, className: "my-1 border-t border-gray-200 dark:border-gray-700", role: "separator" }));
+                }
+                const Icon = item.icon;
+                const menuItemIndex = menuItems.indexOf(item);
+                const isFocused = menuItemIndex === focusedIndex;
+                return (React.createElement("button", { key: index, onClick: () => handleItemClick(item), disabled: item.disabled, role: "menuitem", className: `
+                    w-full flex items-center gap-3 px-4 py-2 text-sm text-left
+                    transition-colors
+                    ${item.disabled
+                        ? 'opacity-50 cursor-not-allowed'
+                        : item.danger
+                            ? 'text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20'
+                            : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'}
+                    ${isFocused ? 'bg-gray-100 dark:bg-gray-700' : ''}
+                  ` },
+                    Icon && React.createElement(Icon, { className: "w-4 h-4 flex-shrink-0" }),
+                    React.createElement("span", null, item.label)));
+            }))))));
+}
+//# sourceMappingURL=DropdownMenu.js.map

package/dist/components/Overlay/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.js","sourceRoot":"","sources":["../../../src/components/Overlay/DropdownMenu.tsx"],"names":[],"mappings":"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"}

package/dist/components/Overlay/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Overlay Components
+ *
+ * Modal dialogs and overlays for Varity dashboards
+ */
+export { Dialog } from './Dialog';
+export { ConfirmDialog } from './ConfirmDialog';
+export { DropdownMenu } from './DropdownMenu';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Overlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/Overlay/index.js

@@ -0,0 +1,9 @@
+/**
+ * Overlay Components
+ *
+ * Modal dialogs and overlays for Varity dashboards
+ */
+export { Dialog } from './Dialog';
+export { ConfirmDialog } from './ConfirmDialog';
+export { DropdownMenu } from './DropdownMenu';
+//# sourceMappingURL=index.js.map

package/dist/components/Overlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Overlay/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/PaymentWidget/PaymentGate.d.ts

@@ -0,0 +1,30 @@
+/**
+ * PaymentGate Component
+ *
+ * A paywall component that shows premium content only to users who have purchased.
+ * Shows a fallback/paywall UI for non-purchasers.
+ *
+ * @example
+ * ```tsx
+ * import { PaymentGate } from '@varity/ui-kit';
+ *
+ * <PaymentGate
+ *   appId={123}
+ *   price={9900}
+ *   fallback={<LockedContent />}
+ * >
+ *   <PremiumContent />
+ * </PaymentGate>
+ * ```
+ */
+import React from 'react';
+import { PaymentGateProps } from './types';
+/**
+ * PaymentGate - Paywall component for premium content
+ *
+ * Automatically shows premium content if the user has purchased,
+ * otherwise shows the fallback UI with a purchase option.
+ */
+export declare const PaymentGate: React.FC<PaymentGateProps>;
+export default PaymentGate;
+//# sourceMappingURL=PaymentGate.d.ts.map

package/dist/components/PaymentWidget/PaymentGate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentGate.d.ts","sourceRoot":"","sources":["../../../src/components/PaymentWidget/PaymentGate.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAI3C;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoDlD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/PaymentWidget/PaymentGate.js

@@ -0,0 +1,54 @@
+/**
+ * PaymentGate Component
+ *
+ * A paywall component that shows premium content only to users who have purchased.
+ * Shows a fallback/paywall UI for non-purchasers.
+ *
+ * @example
+ * ```tsx
+ * import { PaymentGate } from '@varity/ui-kit';
+ *
+ * <PaymentGate
+ *   appId={123}
+ *   price={9900}
+ *   fallback={<LockedContent />}
+ * >
+ *   <PremiumContent />
+ * </PaymentGate>
+ * ```
+ */
+import React from 'react';
+import { useVarityPayment } from './useVarityPayment';
+import { PaymentWidget } from './PaymentWidget';
+/**
+ * PaymentGate - Paywall component for premium content
+ *
+ * Automatically shows premium content if the user has purchased,
+ * otherwise shows the fallback UI with a purchase option.
+ */
+export const PaymentGate = ({ appId, price, fallback, children, theme = 'dark', className = '', }) => {
+    const { hasPurchased, isLoading, pricing } = useVarityPayment({ appId });
+    // Loading state
+    if (isLoading) {
+        return (React.createElement("div", { className: `flex items-center justify-center p-8 ${className}` },
+            React.createElement("div", { className: "animate-pulse flex items-center gap-2 text-gray-500" },
+                React.createElement("svg", { className: "animate-spin h-5 w-5", fill: "none", viewBox: "0 0 24 24" },
+                    React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                    React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })),
+                React.createElement("span", null, "Loading..."))));
+    }
+    // User has purchased - show premium content
+    if (hasPurchased) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    // User has not purchased - show fallback/paywall
+    return (React.createElement("div", { className: className },
+        fallback,
+        pricing?.isActive && (React.createElement("div", { className: "mt-4 text-center" },
+            React.createElement(PaymentWidget, { appId: appId, price: price, theme: theme },
+                React.createElement("button", { className: "px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg transition-colors" },
+                    "Unlock for $",
+                    price ? (price / 100).toFixed(2) : (Number(pricing.priceUsdc) / 1_000_000).toFixed(2)))))));
+};
+export default PaymentGate;
+//# sourceMappingURL=PaymentGate.js.map

package/dist/components/PaymentWidget/PaymentGate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentGate.js","sourceRoot":"","sources":["../../../src/components/PaymentWidget/PaymentGate.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAEzE,gBAAgB;IAChB,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CACL,6BAAK,SAAS,EAAE,wCAAwC,SAAS,EAAE;YACjE,6BAAK,SAAS,EAAC,qDAAqD;gBAClE,6BAAK,SAAS,EAAC,sBAAsB,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW;oBACnE,gCAAQ,SAAS,EAAC,YAAY,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,GAAG;oBAC9F,8BAAM,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,iHAAiH,GAAG,CACnK;gBACN,+CAAuB,CACnB,CACF,CACP,CAAC;IACJ,CAAC;IAED,4CAA4C;IAC5C,IAAI,YAAY,EAAE,CAAC;QACjB,OAAO,0CAAG,QAAQ,CAAI,CAAC;IACzB,CAAC;IAED,iDAAiD;IACjD,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS;QAEtB,QAAQ;QAGR,OAAO,EAAE,QAAQ,IAAI,CACpB,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,oBAAC,aAAa,IACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK;gBAEZ,gCAAQ,SAAS,EAAC,2FAA2F;;oBAC9F,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAC3F,CACK,CACZ,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/PaymentWidget/PaymentWidget.d.ts

@@ -0,0 +1,40 @@
+/**
+ * PaymentWidget Component
+ *
+ * REQUIRED in every Varity app that charges users.
+ * All payments go through the VarityPayments contract with 90/10 revenue split:
+ * - 90% to developer
+ * - 10% to Varity treasury
+ *
+ * Zero-crypto checkout: Users pay with credit card via thirdweb Pay.
+ * No wallets, no tokens, no blockchain terminology visible.
+ * The experience is identical to Stripe checkout.
+ *
+ * Flow:
+ * 1. User clicks purchase button
+ * 2. Credit card form appears (thirdweb Pay modal)
+ * 3. thirdweb converts USD → USDC on Arbitrum One
+ * 4. USDC approve + purchaseApp() execute automatically
+ * 5. User sees "Purchase complete" — never sees crypto
+ *
+ * @example
+ * ```tsx
+ * import { PaymentWidget } from '@varity-labs/ui-kit';
+ *
+ * <PaymentWidget appId={123} price={9900}>
+ *   <button>Buy Premium - $99</button>
+ * </PaymentWidget>
+ * ```
+ */
+import React from 'react';
+import { PaymentWidgetProps } from './types';
+/**
+ * PaymentWidget - Required component for app monetization
+ *
+ * Wraps a trigger element and handles the full purchase flow.
+ * Automatically checks USDC allowance — skips authorize step if sufficient.
+ * Credit card payments handled seamlessly via thirdweb Pay.
+ */
+export declare const PaymentWidget: React.FC<PaymentWidgetProps>;
+export default PaymentWidget;
+//# sourceMappingURL=PaymentWidget.d.ts.map

package/dist/components/PaymentWidget/PaymentWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentWidget.d.ts","sourceRoot":"","sources":["../../../src/components/PaymentWidget/PaymentWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA6C7C;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4KtD,CAAC;AAEF,eAAe,aAAa,CAAC"}