@nlabs/gothamui 1.8.0

package/lib/components/PaymentMethodPanel/PaymentMethodPanel.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@nlabs/utils';
+import { CreditCard } from '../../icons/index.js';
+import { Button } from '../Button/Button.js';
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '../Empty/Empty.js';
+export const PaymentMethodPanel = (paymentMethodPanelProps)=>{
+    const { actionIcon = /*#__PURE__*/ _jsx(CreditCard, {
+        "aria-hidden": "true",
+        size: 18
+    }), addLabel = 'Add payment method', brand = '', className, description = 'Payment details are collected and stored by the payment provider.', emptyDescription = 'Add a payment method to enable purchases and subscriptions.', emptyTitle = 'No payment method saved', isAdding = false, isRemoving = false, last4 = '', onAdd, onRemove, removeLabel = 'Remove', replaceLabel = 'Replace payment method', title = 'Payment method', ...props } = paymentMethodPanelProps;
+    const accessibleTitle = typeof title === 'string' ? title : 'Payment method';
+    const hasPaymentMethod = Boolean(brand.trim() || last4.trim());
+    const paymentMethodLabel = [
+        brand.trim(),
+        last4.trim() ? `ending in ${last4.trim()}` : ''
+    ].filter(Boolean).join(' ');
+    return /*#__PURE__*/ _jsxs("section", {
+        "aria-label": accessibleTitle,
+        className: cn('rounded-2xl bg-card p-5 text-card-foreground', className),
+        "data-slot": "payment-method-panel",
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsxs("header", {
+                className: "mb-6 grid gap-2",
+                children: [
+                    /*#__PURE__*/ _jsx("h2", {
+                        className: "m-0 text-2xl font-semibold",
+                        children: title
+                    }),
+                    description ? /*#__PURE__*/ _jsx("p", {
+                        className: "m-0 text-sm leading-relaxed text-muted-foreground",
+                        children: description
+                    }) : null
+                ]
+            }),
+            hasPaymentMethod ? /*#__PURE__*/ _jsxs("div", {
+                "aria-live": "polite",
+                className: "grid gap-5",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-3",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary",
+                                children: /*#__PURE__*/ _jsx(CreditCard, {
+                                    "aria-hidden": "true",
+                                    size: 20
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("strong", {
+                                className: "text-lg font-semibold capitalize",
+                                children: paymentMethodLabel
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-wrap items-center gap-3",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                disabled: isAdding || isRemoving,
+                                icon: actionIcon,
+                                isLoading: isAdding,
+                                onClick: onAdd,
+                                type: "button",
+                                children: replaceLabel
+                            }),
+                            onRemove ? /*#__PURE__*/ _jsx(Button, {
+                                disabled: isAdding || isRemoving,
+                                isLoading: isRemoving,
+                                onClick: onRemove,
+                                type: "button",
+                                variant: "outline",
+                                children: removeLabel
+                            }) : null
+                        ]
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsxs(Empty, {
+                className: "border-border/70 bg-muted/20",
+                children: [
+                    /*#__PURE__*/ _jsxs(EmptyHeader, {
+                        children: [
+                            /*#__PURE__*/ _jsx(EmptyMedia, {
+                                variant: "icon",
+                                children: /*#__PURE__*/ _jsx(CreditCard, {
+                                    "aria-hidden": "true"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(EmptyTitle, {
+                                children: emptyTitle
+                            }),
+                            /*#__PURE__*/ _jsx(EmptyDescription, {
+                                children: emptyDescription
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(EmptyContent, {
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            disabled: isAdding,
+                            icon: actionIcon,
+                            isLoading: isAdding,
+                            onClick: onAdd,
+                            type: "button",
+                            children: addLabel
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL1BheW1lbnRNZXRob2RQYW5lbC9QYXltZW50TWV0aG9kUGFuZWwudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Y259IGZyb20gJ0BubGFicy91dGlscyc7XG5cbmltcG9ydCB7Q3JlZGl0Q2FyZH0gZnJvbSAnLi4vLi4vaWNvbnMvaW5kZXguanMnO1xuaW1wb3J0IHtCdXR0b259IGZyb20gJy4uL0J1dHRvbi9CdXR0b24uanMnO1xuaW1wb3J0IHtFbXB0eSwgRW1wdHlDb250ZW50LCBFbXB0eURlc2NyaXB0aW9uLCBFbXB0eUhlYWRlciwgRW1wdHlNZWRpYSwgRW1wdHlUaXRsZX0gZnJvbSAnLi4vRW1wdHkvRW1wdHkuanMnO1xuXG5pbXBvcnQgdHlwZSB7SFRNTEF0dHJpYnV0ZXMsIFJlYWN0Tm9kZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgaW50ZXJmYWNlIFBheW1lbnRNZXRob2RQYW5lbFByb3BzIGV4dGVuZHMgT21pdDxIVE1MQXR0cmlidXRlczxIVE1MRWxlbWVudD4sICd0aXRsZSc+IHtcbiAgcmVhZG9ubHkgYWN0aW9uSWNvbj86IFJlYWN0Tm9kZTtcbiAgcmVhZG9ubHkgYWRkTGFiZWw/OiBzdHJpbmc7XG4gIHJlYWRvbmx5IGJyYW5kPzogc3RyaW5nO1xuICByZWFkb25seSBkZXNjcmlwdGlvbj86IFJlYWN0Tm9kZTtcbiAgcmVhZG9ubHkgZW1wdHlEZXNjcmlwdGlvbj86IFJlYWN0Tm9kZTtcbiAgcmVhZG9ubHkgZW1wdHlUaXRsZT86IFJlYWN0Tm9kZTtcbiAgcmVhZG9ubHkgaXNBZGRpbmc/OiBib29sZWFuO1xuICByZWFkb25seSBpc1JlbW92aW5nPzogYm9vbGVhbjtcbiAgcmVhZG9ubHkgbGFzdDQ/OiBzdHJpbmc7XG4gIHJlYWRvbmx5IG9uQWRkOiAoKSA9PiB2b2lkO1xuICByZWFkb25seSBvblJlbW92ZT86ICgpID0+IHZvaWQ7XG4gIHJlYWRvbmx5IHJlbW92ZUxhYmVsPzogc3RyaW5nO1xuICByZWFkb25seSByZXBsYWNlTGFiZWw/OiBzdHJpbmc7XG4gIHJlYWRvbmx5IHRpdGxlPzogUmVhY3ROb2RlO1xufVxuXG5leHBvcnQgY29uc3QgUGF5bWVudE1ldGhvZFBhbmVsID0gKHBheW1lbnRNZXRob2RQYW5lbFByb3BzOiBQYXltZW50TWV0aG9kUGFuZWxQcm9wcykgPT4ge1xuICBjb25zdCB7XG4gICAgYWN0aW9uSWNvbiA9IDxDcmVkaXRDYXJkIGFyaWEtaGlkZGVuPVwidHJ1ZVwiIHNpemU9ezE4fSAvPixcbiAgICBhZGRMYWJlbCA9ICdBZGQgcGF5bWVudCBtZXRob2QnLFxuICAgIGJyYW5kID0gJycsXG4gICAgY2xhc3NOYW1lLFxuICAgIGRlc2NyaXB0aW9uID0gJ1BheW1lbnQgZGV0YWlscyBhcmUgY29sbGVjdGVkIGFuZCBzdG9yZWQgYnkgdGhlIHBheW1lbnQgcHJvdmlkZXIuJyxcbiAgICBlbXB0eURlc2NyaXB0aW9uID0gJ0FkZCBhIHBheW1lbnQgbWV0aG9kIHRvIGVuYWJsZSBwdXJjaGFzZXMgYW5kIHN1YnNjcmlwdGlvbnMuJyxcbiAgICBlbXB0eVRpdGxlID0gJ05vIHBheW1lbnQgbWV0aG9kIHNhdmVkJyxcbiAgICBpc0FkZGluZyA9IGZhbHNlLFxuICAgIGlzUmVtb3ZpbmcgPSBmYWxzZSxcbiAgICBsYXN0NCA9ICcnLFxuICAgIG9uQWRkLFxuICAgIG9uUmVtb3ZlLFxuICAgIHJlbW92ZUxhYmVsID0gJ1JlbW92ZScsXG4gICAgcmVwbGFjZUxhYmVsID0gJ1JlcGxhY2UgcGF5bWVudCBtZXRob2QnLFxuICAgIHRpdGxlID0gJ1BheW1lbnQgbWV0aG9kJyxcbiAgICAuLi5wcm9wc1xuICB9ID0gcGF5bWVudE1ldGhvZFBhbmVsUHJvcHM7XG4gIGNvbnN0IGFjY2Vzc2libGVUaXRsZSA9IHR5cGVvZiB0aXRsZSA9PT0gJ3N0cmluZycgPyB0aXRsZSA6ICdQYXltZW50IG1ldGhvZCc7XG4gIGNvbnN0IGhhc1BheW1lbnRNZXRob2QgPSBCb29sZWFuKGJyYW5kLnRyaW0oKSB8fCBsYXN0NC50cmltKCkpO1xuICBjb25zdCBwYXltZW50TWV0aG9kTGFiZWwgPSBbYnJhbmQudHJpbSgpLCBsYXN0NC50cmltKCkgPyBgZW5kaW5nIGluICR7bGFzdDQudHJpbSgpfWAgOiAnJ11cbiAgICAuZmlsdGVyKEJvb2xlYW4pXG4gICAgLmpvaW4oJyAnKTtcblxuICByZXR1cm4gKFxuICAgIDxzZWN0aW9uXG4gICAgICBhcmlhLWxhYmVsPXthY2Nlc3NpYmxlVGl0bGV9XG4gICAgICBjbGFzc05hbWU9e2NuKCdyb3VuZGVkLTJ4bCBiZy1jYXJkIHAtNSB0ZXh0LWNhcmQtZm9yZWdyb3VuZCcsIGNsYXNzTmFtZSl9XG4gICAgICBkYXRhLXNsb3Q9XCJwYXltZW50LW1ldGhvZC1wYW5lbFwiXG4gICAgICB7Li4ucHJvcHN9PlxuICAgICAgPGhlYWRlciBjbGFzc05hbWU9XCJtYi02IGdyaWQgZ2FwLTJcIj5cbiAgICAgICAgPGgyIGNsYXNzTmFtZT1cIm0tMCB0ZXh0LTJ4bCBmb250LXNlbWlib2xkXCI+e3RpdGxlfTwvaDI+XG4gICAgICAgIHtkZXNjcmlwdGlvbiA/IDxwIGNsYXNzTmFtZT1cIm0tMCB0ZXh0LXNtIGxlYWRpbmctcmVsYXhlZCB0ZXh0LW11dGVkLWZvcmVncm91bmRcIj57ZGVzY3JpcHRpb259PC9wPiA6IG51bGx9XG4gICAgICA8L2hlYWRlcj5cblxuICAgICAge2hhc1BheW1lbnRNZXRob2QgPyAoXG4gICAgICAgIDxkaXYgYXJpYS1saXZlPVwicG9saXRlXCIgY2xhc3NOYW1lPVwiZ3JpZCBnYXAtNVwiPlxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiZmxleCBpdGVtcy1jZW50ZXIgZ2FwLTNcIj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cImZsZXggc2l6ZS0xMCBzaHJpbmstMCBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXIgcm91bmRlZC1mdWxsIGJnLXByaW1hcnkvMTAgdGV4dC1wcmltYXJ5XCI+XG4gICAgICAgICAgICAgIDxDcmVkaXRDYXJkIGFyaWEtaGlkZGVuPVwidHJ1ZVwiIHNpemU9ezIwfSAvPlxuICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgPHN0cm9uZyBjbGFzc05hbWU9XCJ0ZXh0LWxnIGZvbnQtc2VtaWJvbGQgY2FwaXRhbGl6ZVwiPntwYXltZW50TWV0aG9kTGFiZWx9PC9zdHJvbmc+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJmbGV4IGZsZXgtd3JhcCBpdGVtcy1jZW50ZXIgZ2FwLTNcIj5cbiAgICAgICAgICAgIDxCdXR0b25cbiAgICAgICAgICAgICAgZGlzYWJsZWQ9e2lzQWRkaW5nIHx8IGlzUmVtb3Zpbmd9XG4gICAgICAgICAgICAgIGljb249e2FjdGlvbkljb259XG4gICAgICAgICAgICAgIGlzTG9hZGluZz17aXNBZGRpbmd9XG4gICAgICAgICAgICAgIG9uQ2xpY2s9e29uQWRkfVxuICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCI+XG4gICAgICAgICAgICAgIHtyZXBsYWNlTGFiZWx9XG4gICAgICAgICAgICA8L0J1dHRvbj5cbiAgICAgICAgICAgIHtvblJlbW92ZSA/IChcbiAgICAgICAgICAgICAgPEJ1dHRvblxuICAgICAgICAgICAgICAgIGRpc2FibGVkPXtpc0FkZGluZyB8fCBpc1JlbW92aW5nfVxuICAgICAgICAgICAgICAgIGlzTG9hZGluZz17aXNSZW1vdmluZ31cbiAgICAgICAgICAgICAgICBvbkNsaWNrPXtvblJlbW92ZX1cbiAgICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgICAgICB2YXJpYW50PVwib3V0bGluZVwiPlxuICAgICAgICAgICAgICAgIHtyZW1vdmVMYWJlbH1cbiAgICAgICAgICAgICAgPC9CdXR0b24+XG4gICAgICAgICAgICApIDogbnVsbH1cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICApIDogKFxuICAgICAgICA8RW1wdHkgY2xhc3NOYW1lPVwiYm9yZGVyLWJvcmRlci83MCBiZy1tdXRlZC8yMFwiPlxuICAgICAgICAgIDxFbXB0eUhlYWRlcj5cbiAgICAgICAgICAgIDxFbXB0eU1lZGlhIHZhcmlhbnQ9XCJpY29uXCI+PENyZWRpdENhcmQgYXJpYS1oaWRkZW49XCJ0cnVlXCIgLz48L0VtcHR5TWVkaWE+XG4gICAgICAgICAgICA8RW1wdHlUaXRsZT57ZW1wdHlUaXRsZX08L0VtcHR5VGl0bGU+XG4gICAgICAgICAgICA8RW1wdHlEZXNjcmlwdGlvbj57ZW1wdHlEZXNjcmlwdGlvbn08L0VtcHR5RGVzY3JpcHRpb24+XG4gICAgICAgICAgPC9FbXB0eUhlYWRlcj5cbiAgICAgICAgICA8RW1wdHlDb250ZW50PlxuICAgICAgICAgICAgPEJ1dHRvblxuICAgICAgICAgICAgICBkaXNhYmxlZD17aXNBZGRpbmd9XG4gICAgICAgICAgICAgIGljb249e2FjdGlvbkljb259XG4gICAgICAgICAgICAgIGlzTG9hZGluZz17aXNBZGRpbmd9XG4gICAgICAgICAgICAgIG9uQ2xpY2s9e29uQWRkfVxuICAgICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCI+XG4gICAgICAgICAgICAgIHthZGRMYWJlbH1cbiAgICAgICAgICAgIDwvQnV0dG9uPlxuICAgICAgICAgIDwvRW1wdHlDb250ZW50PlxuICAgICAgICA8L0VtcHR5PlxuICAgICAgKX1cbiAgICA8L3NlY3Rpb24+XG4gICk7XG59O1xuIl0sIm5hbWVzIjpbImNuIiwiQ3JlZGl0Q2FyZCIsIkJ1dHRvbiIsIkVtcHR5IiwiRW1wdHlDb250ZW50IiwiRW1wdHlEZXNjcmlwdGlvbiIsIkVtcHR5SGVhZGVyIiwiRW1wdHlNZWRpYSIsIkVtcHR5VGl0bGUiLCJQYXltZW50TWV0aG9kUGFuZWwiLCJwYXltZW50TWV0aG9kUGFuZWxQcm9wcyIsImFjdGlvbkljb24iLCJhcmlhLWhpZGRlbiIsInNpemUiLCJhZGRMYWJlbCIsImJyYW5kIiwiY2xhc3NOYW1lIiwiZGVzY3JpcHRpb24iLCJlbXB0eURlc2NyaXB0aW9uIiwiZW1wdHlUaXRsZSIsImlzQWRkaW5nIiwiaXNSZW1vdmluZyIsImxhc3Q0Iiwib25BZGQiLCJvblJlbW92ZSIsInJlbW92ZUxhYmVsIiwicmVwbGFjZUxhYmVsIiwidGl0bGUiLCJwcm9wcyIsImFjY2Vzc2libGVUaXRsZSIsImhhc1BheW1lbnRNZXRob2QiLCJCb29sZWFuIiwidHJpbSIsInBheW1lbnRNZXRob2RMYWJlbCIsImZpbHRlciIsImpvaW4iLCJzZWN0aW9uIiwiYXJpYS1sYWJlbCIsImRhdGEtc2xvdCIsImhlYWRlciIsImgyIiwicCIsImRpdiIsImFyaWEtbGl2ZSIsInNwYW4iLCJzdHJvbmciLCJkaXNhYmxlZCIsImljb24iLCJpc0xvYWRpbmciLCJvbkNsaWNrIiwidHlwZSIsInZhcmlhbnQiXSwibWFwcGluZ3MiOiI7QUFBQSxTQUFRQSxFQUFFLFFBQU8sZUFBZTtBQUVoQyxTQUFRQyxVQUFVLFFBQU8sdUJBQXVCO0FBQ2hELFNBQVFDLE1BQU0sUUFBTyxzQkFBc0I7QUFDM0MsU0FBUUMsS0FBSyxFQUFFQyxZQUFZLEVBQUVDLGdCQUFnQixFQUFFQyxXQUFXLEVBQUVDLFVBQVUsRUFBRUMsVUFBVSxRQUFPLG9CQUFvQjtBQXFCN0csT0FBTyxNQUFNQyxxQkFBcUIsQ0FBQ0M7SUFDakMsTUFBTSxFQUNKQywyQkFBYSxLQUFDVjtRQUFXVyxlQUFZO1FBQU9DLE1BQU07TUFBTSxFQUN4REMsV0FBVyxvQkFBb0IsRUFDL0JDLFFBQVEsRUFBRSxFQUNWQyxTQUFTLEVBQ1RDLGNBQWMsbUVBQW1FLEVBQ2pGQyxtQkFBbUIsNkRBQTZELEVBQ2hGQyxhQUFhLHlCQUF5QixFQUN0Q0MsV0FBVyxLQUFLLEVBQ2hCQyxhQUFhLEtBQUssRUFDbEJDLFFBQVEsRUFBRSxFQUNWQyxLQUFLLEVBQ0xDLFFBQVEsRUFDUkMsY0FBYyxRQUFRLEVBQ3RCQyxlQUFlLHdCQUF3QixFQUN2Q0MsUUFBUSxnQkFBZ0IsRUFDeEIsR0FBR0MsT0FDSixHQUFHbEI7SUFDSixNQUFNbUIsa0JBQWtCLE9BQU9GLFVBQVUsV0FBV0EsUUFBUTtJQUM1RCxNQUFNRyxtQkFBbUJDLFFBQVFoQixNQUFNaUIsSUFBSSxNQUFNVixNQUFNVSxJQUFJO0lBQzNELE1BQU1DLHFCQUFxQjtRQUFDbEIsTUFBTWlCLElBQUk7UUFBSVYsTUFBTVUsSUFBSSxLQUFLLENBQUMsVUFBVSxFQUFFVixNQUFNVSxJQUFJLElBQUksR0FBRztLQUFHLENBQ3ZGRSxNQUFNLENBQUNILFNBQ1BJLElBQUksQ0FBQztJQUVSLHFCQUNFLE1BQUNDO1FBQ0NDLGNBQVlSO1FBQ1piLFdBQVdoQixHQUFHLGdEQUFnRGdCO1FBQzlEc0IsYUFBVTtRQUNULEdBQUdWLEtBQUs7OzBCQUNULE1BQUNXO2dCQUFPdkIsV0FBVTs7a0NBQ2hCLEtBQUN3Qjt3QkFBR3hCLFdBQVU7a0NBQThCVzs7b0JBQzNDViw0QkFBYyxLQUFDd0I7d0JBQUV6QixXQUFVO2tDQUFxREM7eUJBQW1COzs7WUFHckdhLGlDQUNDLE1BQUNZO2dCQUFJQyxhQUFVO2dCQUFTM0IsV0FBVTs7a0NBQ2hDLE1BQUMwQjt3QkFBSTFCLFdBQVU7OzBDQUNiLEtBQUM0QjtnQ0FBSzVCLFdBQVU7MENBQ2QsY0FBQSxLQUFDZjtvQ0FBV1csZUFBWTtvQ0FBT0MsTUFBTTs7OzBDQUV2QyxLQUFDZ0M7Z0NBQU83QixXQUFVOzBDQUFvQ2lCOzs7O2tDQUV4RCxNQUFDUzt3QkFBSTFCLFdBQVU7OzBDQUNiLEtBQUNkO2dDQUNDNEMsVUFBVTFCLFlBQVlDO2dDQUN0QjBCLE1BQU1wQztnQ0FDTnFDLFdBQVc1QjtnQ0FDWDZCLFNBQVMxQjtnQ0FDVDJCLE1BQUs7MENBQ0p4Qjs7NEJBRUZGLHlCQUNDLEtBQUN0QjtnQ0FDQzRDLFVBQVUxQixZQUFZQztnQ0FDdEIyQixXQUFXM0I7Z0NBQ1g0QixTQUFTekI7Z0NBQ1QwQixNQUFLO2dDQUNMQyxTQUFROzBDQUNQMUI7aUNBRUQ7Ozs7K0JBSVIsTUFBQ3RCO2dCQUFNYSxXQUFVOztrQ0FDZixNQUFDVjs7MENBQ0MsS0FBQ0M7Z0NBQVc0QyxTQUFROzBDQUFPLGNBQUEsS0FBQ2xEO29DQUFXVyxlQUFZOzs7MENBQ25ELEtBQUNKOzBDQUFZVzs7MENBQ2IsS0FBQ2Q7MENBQWtCYTs7OztrQ0FFckIsS0FBQ2Q7a0NBQ0MsY0FBQSxLQUFDRjs0QkFDQzRDLFVBQVUxQjs0QkFDVjJCLE1BQU1wQzs0QkFDTnFDLFdBQVc1Qjs0QkFDWDZCLFNBQVMxQjs0QkFDVDJCLE1BQUs7c0NBQ0pwQzs7Ozs7OztBQU9mLEVBQUUifQ==

package/lib/components/PaymentMethodPanel/PaymentMethodPanel.stories.js

@@ -0,0 +1,88 @@
+import { interactWithCanvas } from '../../utils/storyInteractions.js';
+import { PaymentMethodPanel } from './PaymentMethodPanel.js';
+const noop = ()=>undefined;
+const meta = {
+    argTypes: {
+        actionIcon: {
+            control: false
+        },
+        addLabel: {
+            control: 'text'
+        },
+        brand: {
+            control: 'text'
+        },
+        description: {
+            control: 'text'
+        },
+        emptyDescription: {
+            control: 'text'
+        },
+        emptyTitle: {
+            control: 'text'
+        },
+        isAdding: {
+            control: 'boolean'
+        },
+        isRemoving: {
+            control: 'boolean'
+        },
+        last4: {
+            control: 'text'
+        },
+        onAdd: {
+            control: false
+        },
+        onRemove: {
+            control: false
+        },
+        removeLabel: {
+            control: 'text'
+        },
+        replaceLabel: {
+            control: 'text'
+        },
+        title: {
+            control: 'text'
+        }
+    },
+    args: {
+        className: 'w-full max-w-2xl',
+        onAdd: noop
+    },
+    component: PaymentMethodPanel,
+    parameters: {
+        layout: 'centered'
+    },
+    tags: [
+        'autodocs'
+    ],
+    title: 'Application UI/Commerce/PaymentMethodPanel'
+};
+export default meta;
+export const Empty = {
+    play: interactWithCanvas
+};
+export const Saved = {
+    args: {
+        brand: 'Visa',
+        last4: '4242',
+        onRemove: noop
+    },
+    play: interactWithCanvas
+};
+export const Adding = {
+    args: {
+        isAdding: true
+    }
+};
+export const Removing = {
+    args: {
+        brand: 'Mastercard',
+        isRemoving: true,
+        last4: '4444',
+        onRemove: noop
+    }
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL1BheW1lbnRNZXRob2RQYW5lbC9QYXltZW50TWV0aG9kUGFuZWwuc3Rvcmllcy50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtpbnRlcmFjdFdpdGhDYW52YXN9IGZyb20gJy4uLy4uL3V0aWxzL3N0b3J5SW50ZXJhY3Rpb25zLmpzJztcbmltcG9ydCB7UGF5bWVudE1ldGhvZFBhbmVsfSBmcm9tICcuL1BheW1lbnRNZXRob2RQYW5lbC5qcyc7XG5cbmltcG9ydCB0eXBlIHtNZXRhLCBTdG9yeU9ian0gZnJvbSAnQG5sYWJzL2xleC9zdG9yeWJvb2snO1xuXG5jb25zdCBub29wID0gKCkgPT4gdW5kZWZpbmVkO1xuXG5jb25zdCBtZXRhOiBNZXRhPHR5cGVvZiBQYXltZW50TWV0aG9kUGFuZWw+ID0ge1xuICBhcmdUeXBlczoge1xuICAgIGFjdGlvbkljb246IHtcbiAgICAgIGNvbnRyb2w6IGZhbHNlXG4gICAgfSxcbiAgICBhZGRMYWJlbDoge1xuICAgICAgY29udHJvbDogJ3RleHQnXG4gICAgfSxcbiAgICBicmFuZDoge1xuICAgICAgY29udHJvbDogJ3RleHQnXG4gICAgfSxcbiAgICBkZXNjcmlwdGlvbjoge1xuICAgICAgY29udHJvbDogJ3RleHQnXG4gICAgfSxcbiAgICBlbXB0eURlc2NyaXB0aW9uOiB7XG4gICAgICBjb250cm9sOiAndGV4dCdcbiAgICB9LFxuICAgIGVtcHR5VGl0bGU6IHtcbiAgICAgIGNvbnRyb2w6ICd0ZXh0J1xuICAgIH0sXG4gICAgaXNBZGRpbmc6IHtcbiAgICAgIGNvbnRyb2w6ICdib29sZWFuJ1xuICAgIH0sXG4gICAgaXNSZW1vdmluZzoge1xuICAgICAgY29udHJvbDogJ2Jvb2xlYW4nXG4gICAgfSxcbiAgICBsYXN0NDoge1xuICAgICAgY29udHJvbDogJ3RleHQnXG4gICAgfSxcbiAgICBvbkFkZDoge1xuICAgICAgY29udHJvbDogZmFsc2VcbiAgICB9LFxuICAgIG9uUmVtb3ZlOiB7XG4gICAgICBjb250cm9sOiBmYWxzZVxuICAgIH0sXG4gICAgcmVtb3ZlTGFiZWw6IHtcbiAgICAgIGNvbnRyb2w6ICd0ZXh0J1xuICAgIH0sXG4gICAgcmVwbGFjZUxhYmVsOiB7XG4gICAgICBjb250cm9sOiAndGV4dCdcbiAgICB9LFxuICAgIHRpdGxlOiB7XG4gICAgICBjb250cm9sOiAndGV4dCdcbiAgICB9XG4gIH0sXG4gIGFyZ3M6IHtcbiAgICBjbGFzc05hbWU6ICd3LWZ1bGwgbWF4LXctMnhsJyxcbiAgICBvbkFkZDogbm9vcFxuICB9LFxuICBjb21wb25lbnQ6IFBheW1lbnRNZXRob2RQYW5lbCxcbiAgcGFyYW1ldGVyczoge1xuICAgIGxheW91dDogJ2NlbnRlcmVkJ1xuICB9LFxuICB0YWdzOiBbJ2F1dG9kb2NzJ10sXG4gIHRpdGxlOiAnQXBwbGljYXRpb24gVUkvQ29tbWVyY2UvUGF5bWVudE1ldGhvZFBhbmVsJ1xufTtcblxuZXhwb3J0IGRlZmF1bHQgbWV0YTtcblxudHlwZSBTdG9yeSA9IFN0b3J5T2JqPHR5cGVvZiBQYXltZW50TWV0aG9kUGFuZWw+O1xuXG5leHBvcnQgY29uc3QgRW1wdHk6IFN0b3J5ID0ge1xuICBwbGF5OiBpbnRlcmFjdFdpdGhDYW52YXNcbn07XG5cbmV4cG9ydCBjb25zdCBTYXZlZDogU3RvcnkgPSB7XG4gIGFyZ3M6IHtcbiAgICBicmFuZDogJ1Zpc2EnLFxuICAgIGxhc3Q0OiAnNDI0MicsXG4gICAgb25SZW1vdmU6IG5vb3BcbiAgfSxcbiAgcGxheTogaW50ZXJhY3RXaXRoQ2FudmFzXG59O1xuXG5leHBvcnQgY29uc3QgQWRkaW5nOiBTdG9yeSA9IHtcbiAgYXJnczoge1xuICAgIGlzQWRkaW5nOiB0cnVlXG4gIH1cbn07XG5cbmV4cG9ydCBjb25zdCBSZW1vdmluZzogU3RvcnkgPSB7XG4gIGFyZ3M6IHtcbiAgICBicmFuZDogJ01hc3RlcmNhcmQnLFxuICAgIGlzUmVtb3Zpbmc6IHRydWUsXG4gICAgbGFzdDQ6ICc0NDQ0JyxcbiAgICBvblJlbW92ZTogbm9vcFxuICB9XG59O1xuIl0sIm5hbWVzIjpbImludGVyYWN0V2l0aENhbnZhcyIsIlBheW1lbnRNZXRob2RQYW5lbCIsIm5vb3AiLCJ1bmRlZmluZWQiLCJtZXRhIiwiYXJnVHlwZXMiLCJhY3Rpb25JY29uIiwiY29udHJvbCIsImFkZExhYmVsIiwiYnJhbmQiLCJkZXNjcmlwdGlvbiIsImVtcHR5RGVzY3JpcHRpb24iLCJlbXB0eVRpdGxlIiwiaXNBZGRpbmciLCJpc1JlbW92aW5nIiwibGFzdDQiLCJvbkFkZCIsIm9uUmVtb3ZlIiwicmVtb3ZlTGFiZWwiLCJyZXBsYWNlTGFiZWwiLCJ0aXRsZSIsImFyZ3MiLCJjbGFzc05hbWUiLCJjb21wb25lbnQiLCJwYXJhbWV0ZXJzIiwibGF5b3V0IiwidGFncyIsIkVtcHR5IiwicGxheSIsIlNhdmVkIiwiQWRkaW5nIiwiUmVtb3ZpbmciXSwibWFwcGluZ3MiOiJBQUFBLFNBQVFBLGtCQUFrQixRQUFPLG1DQUFtQztBQUNwRSxTQUFRQyxrQkFBa0IsUUFBTywwQkFBMEI7QUFJM0QsTUFBTUMsT0FBTyxJQUFNQztBQUVuQixNQUFNQyxPQUF3QztJQUM1Q0MsVUFBVTtRQUNSQyxZQUFZO1lBQ1ZDLFNBQVM7UUFDWDtRQUNBQyxVQUFVO1lBQ1JELFNBQVM7UUFDWDtRQUNBRSxPQUFPO1lBQ0xGLFNBQVM7UUFDWDtRQUNBRyxhQUFhO1lBQ1hILFNBQVM7UUFDWDtRQUNBSSxrQkFBa0I7WUFDaEJKLFNBQVM7UUFDWDtRQUNBSyxZQUFZO1lBQ1ZMLFNBQVM7UUFDWDtRQUNBTSxVQUFVO1lBQ1JOLFNBQVM7UUFDWDtRQUNBTyxZQUFZO1lBQ1ZQLFNBQVM7UUFDWDtRQUNBUSxPQUFPO1lBQ0xSLFNBQVM7UUFDWDtRQUNBUyxPQUFPO1lBQ0xULFNBQVM7UUFDWDtRQUNBVSxVQUFVO1lBQ1JWLFNBQVM7UUFDWDtRQUNBVyxhQUFhO1lBQ1hYLFNBQVM7UUFDWDtRQUNBWSxjQUFjO1lBQ1paLFNBQVM7UUFDWDtRQUNBYSxPQUFPO1lBQ0xiLFNBQVM7UUFDWDtJQUNGO0lBQ0FjLE1BQU07UUFDSkMsV0FBVztRQUNYTixPQUFPZDtJQUNUO0lBQ0FxQixXQUFXdEI7SUFDWHVCLFlBQVk7UUFDVkMsUUFBUTtJQUNWO0lBQ0FDLE1BQU07UUFBQztLQUFXO0lBQ2xCTixPQUFPO0FBQ1Q7QUFFQSxlQUFlaEIsS0FBSztBQUlwQixPQUFPLE1BQU11QixRQUFlO0lBQzFCQyxNQUFNNUI7QUFDUixFQUFFO0FBRUYsT0FBTyxNQUFNNkIsUUFBZTtJQUMxQlIsTUFBTTtRQUNKWixPQUFPO1FBQ1BNLE9BQU87UUFDUEUsVUFBVWY7SUFDWjtJQUNBMEIsTUFBTTVCO0FBQ1IsRUFBRTtBQUVGLE9BQU8sTUFBTThCLFNBQWdCO0lBQzNCVCxNQUFNO1FBQ0pSLFVBQVU7SUFDWjtBQUNGLEVBQUU7QUFFRixPQUFPLE1BQU1rQixXQUFrQjtJQUM3QlYsTUFBTTtRQUNKWixPQUFPO1FBQ1BLLFlBQVk7UUFDWkMsT0FBTztRQUNQRSxVQUFVZjtJQUNaO0FBQ0YsRUFBRSJ9

package/lib/components/Pricing/Pricing.d.ts

@@ -0,0 +1,78 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type PricingVariant = 'grid' | 'single' | 'comparison';
+export type PricingTone = 'default' | 'dark' | 'gradient';
+export type PricingCardStyle = 'default' | 'contrast' | 'solid';
+export interface PricingFrequency {
+    readonly label: string;
+    readonly priceSuffix?: string;
+    readonly value: string;
+}
+export interface PricingHighlight {
+    readonly description: string;
+    readonly disabled?: boolean;
+}
+export type PricingTierValue = boolean | string;
+export interface PricingTier {
+    readonly badge?: string;
+    readonly ctaLabel?: string;
+    readonly ctaSubtitle?: string;
+    readonly description?: ReactNode;
+    readonly featured?: boolean;
+    readonly features?: readonly string[];
+    readonly highlights?: readonly PricingHighlight[];
+    readonly href?: string;
+    readonly id: string;
+    readonly name: string;
+    readonly price: string | Record<string, string>;
+    readonly priceCaption?: ReactNode;
+    readonly priceSuffix?: string | Record<string, string>;
+}
+export interface PricingComparisonFeature {
+    readonly name: string;
+    readonly tiers: Record<string, PricingTierValue>;
+}
+export interface PricingComparisonSection {
+    readonly features: readonly PricingComparisonFeature[];
+    readonly name: string;
+}
+export interface PricingLogo {
+    readonly alt: string;
+    readonly className?: string;
+    readonly src: string;
+}
+export interface PricingExtraOffer {
+    readonly ctaHref: string;
+    readonly ctaLabel: string;
+    readonly description?: ReactNode;
+    readonly title: ReactNode;
+}
+export interface PricingSingleOffer {
+    readonly ctaHref: string;
+    readonly ctaLabel: string;
+    readonly description?: ReactNode;
+    readonly featureLabel?: ReactNode;
+    readonly features?: readonly string[];
+    readonly note?: ReactNode;
+    readonly price: ReactNode;
+    readonly priceLabel?: ReactNode;
+    readonly priceSuffix?: ReactNode;
+    readonly title: ReactNode;
+}
+export interface PricingProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    readonly cardStyle?: PricingCardStyle;
+    readonly comparisonSections?: readonly PricingComparisonSection[];
+    readonly defaultFrequency?: string;
+    readonly description?: ReactNode;
+    readonly eyebrow?: ReactNode;
+    readonly extraOffer?: PricingExtraOffer;
+    readonly frequencies?: readonly PricingFrequency[];
+    readonly logos?: readonly PricingLogo[];
+    readonly singleOffer?: PricingSingleOffer;
+    readonly tiers?: readonly PricingTier[];
+    readonly title?: ReactNode;
+    readonly tone?: PricingTone;
+    readonly variant?: PricingVariant;
+}
+declare const PricingComponent: ({ cardStyle, className, comparisonSections, defaultFrequency, description, eyebrow, extraOffer, frequencies, logos, singleOffer, tiers, title, tone, variant, ...props }: PricingProps) => import("react").JSX.Element;
+export declare const Pricing: import("react").MemoExoticComponent<typeof PricingComponent>;
+export {};