@omnikit-js/ui 0.9.22 → 0.9.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/{chunk-FETPTCD3.js → chunk-3FSOHWPO.js} +39 -118
  2. package/dist/chunk-3FSOHWPO.js.map +1 -0
  3. package/dist/{chunk-7AYD5TRL.js → chunk-XM66TOME.js} +3 -3
  4. package/dist/{chunk-7AYD5TRL.js.map → chunk-XM66TOME.js.map} +1 -1
  5. package/dist/components/client/index.js +48 -4
  6. package/dist/components/client/index.js.map +1 -1
  7. package/dist/components/server/index.js +2 -2
  8. package/dist/index.js +2 -2
  9. package/package.json +1 -1
  10. package/dist/chunk-FETPTCD3.js.map +0 -1
  11. package/dist/components/client/index.css +0 -160
  12. package/dist/components/client/index.css.map +0 -1
  13. package/dist/components/server/index.css +0 -160
  14. package/dist/components/server/index.css.map +0 -1
  15. package/dist/index.css +0 -160
  16. package/dist/index.css.map +0 -1
package/dist/{chunk-FETPTCD3.js → chunk-3FSOHWPO.js} RENAMED
@@ -1,57 +1,12 @@
1
1
  "use client";
2
- import { useEffect, useState, useMemo } from 'react';
3
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
+ import { useState, useEffect, useMemo } from 'react';
4
3
  import { loadStripe } from '@stripe/stripe-js';
5
4
  import { Elements, useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
6
- import { Card, Button, Radio, TextInput, Select, Tabs } from '@marcoschwartz/lite-ui';
5
+ import { Alert, Card, Button, ProgressBar, Radio, TextInput, Select, Tabs, Modal } from '@marcoschwartz/lite-ui';
6
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
7
7
  import { useRouter } from 'next/navigation';
8
8
 
9
- // src/components/client/Modal/index.tsx
10
- function Modal({ isOpen, onClose, title, children, className = "" }) {
11
- useEffect(() => {
12
- const handleEscape = (e) => {
13
- if (e.key === "Escape") onClose();
14
- };
15
- if (isOpen) {
16
- document.addEventListener("keydown", handleEscape);
17
- document.body.style.overflow = "hidden";
18
- }
19
- return () => {
20
- document.removeEventListener("keydown", handleEscape);
21
- document.body.style.overflow = "unset";
22
- };
23
- }, [isOpen, onClose]);
24
- if (!isOpen) return null;
25
- return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
26
- /* @__PURE__ */ jsx(
27
- "div",
28
- {
29
- className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
30
- onClick: onClose
31
- }
32
- ),
33
- /* @__PURE__ */ jsxs(
34
- "div",
35
- {
36
- className: `relative bg-white dark:bg-neutral-900 rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto ${className}`,
37
- children: [
38
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-neutral-700", children: [
39
- /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: title }),
40
- /* @__PURE__ */ jsx(
41
- "button",
42
- {
43
- onClick: onClose,
44
- className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
45
- children: /* @__PURE__ */ jsx("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
46
- }
47
- )
48
- ] }),
49
- /* @__PURE__ */ jsx("div", { className: "p-6", children })
50
- ]
51
- }
52
- )
53
- ] });
54
- }
9
+ // src/components/client/AddPaymentMethodForm/index.tsx
55
10
  function PaymentForm({ customerId, onSuccess, onCancel, onSubmit }) {
56
11
  const stripe = useStripe();
57
12
  const elements = useElements();
@@ -369,33 +324,6 @@ async function updateCustomer(config, customerId, data) {
369
324
  }
370
325
  return { success: true, data: result.data };
371
326
  }
372
- function UsageBar({ label, used, limit, unit = "" }) {
373
- const percentage = limit > 0 ? used / limit * 100 : 0;
374
- const isWarning = percentage > 80;
375
- return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
376
- /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
377
- /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-gray-300", children: label }),
378
- /* @__PURE__ */ jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
379
- used.toLocaleString(),
380
- unit,
381
- " / ",
382
- limit.toLocaleString(),
383
- unit
384
- ] })
385
- ] }),
386
- /* @__PURE__ */ jsx("div", { className: "w-full bg-gray-200 dark:bg-neutral-700 rounded-full h-2", children: /* @__PURE__ */ jsx(
387
- "div",
388
- {
389
- className: `h-2 rounded-full transition-all ${isWarning ? "bg-yellow-500" : "bg-blue-600"}`,
390
- style: { width: `${Math.min(percentage, 100)}%` }
391
- }
392
- ) }),
393
- /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
394
- percentage.toFixed(1),
395
- "% used"
396
- ] })
397
- ] });
398
- }
399
327
  function BillingContent({
400
328
  subscription,
401
329
  invoices,
@@ -632,8 +560,8 @@ function BillingContent({
632
560
  id: "subscription",
633
561
  label: "Subscription",
634
562
  content: /* @__PURE__ */ jsxs("div", { className: "space-y-6 mt-6", children: [
635
- error && /* @__PURE__ */ jsx("div", { className: "p-4 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200 rounded-lg", children: error }),
636
- success && /* @__PURE__ */ jsx("div", { className: "p-4 bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200 rounded-lg", children: success }),
563
+ error && /* @__PURE__ */ jsx(Alert, { variant: "error", children: error }),
564
+ success && /* @__PURE__ */ jsx(Alert, { variant: "success", children: success }),
637
565
  /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", { children: [
638
566
  /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-4", children: [
639
567
  /* @__PURE__ */ jsxs("div", { children: [
@@ -673,13 +601,15 @@ function BillingContent({
673
601
  /* @__PURE__ */ jsx("div", { className: "space-y-4", children: Object.values(featureUsage).map((usage) => {
674
602
  const featureName = usage.feature_name || usage.feature_key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
675
603
  if (usage.limit > 0) {
604
+ const percentage = usage.current_usage / usage.limit * 100;
676
605
  return /* @__PURE__ */ jsx(
677
- UsageBar,
606
+ ProgressBar,
678
607
  {
679
- label: featureName,
680
- used: usage.current_usage,
681
- limit: usage.limit,
682
- unit: usage.unit ? ` ${usage.unit}` : ""
608
+ value: usage.current_usage,
609
+ max: usage.limit,
610
+ label: `${featureName}: ${usage.current_usage.toLocaleString()}${usage.unit || ""} / ${usage.limit.toLocaleString()}${usage.unit || ""}`,
611
+ showLabel: true,
612
+ variant: percentage > 80 ? "warning" : "default"
683
613
  },
684
614
  usage.feature_key
685
615
  );
@@ -708,9 +638,9 @@ function BillingContent({
708
638
  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-6", children: "Select the plan that best fits your needs. You can upgrade or downgrade at any time." })
709
639
  ] }),
710
640
  plans.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-gray-500 dark:text-gray-400", children: "No plans available." }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: plans.map((plan) => /* @__PURE__ */ jsxs(
711
- "div",
641
+ Card,
712
642
  {
713
- className: `okt-plan-card relative p-6 flex flex-col ${plan.current ? "okt-plan-card-selected" : "okt-plan-card-default"} ${plan.popular ? "shadow-lg" : ""}`,
643
+ className: `relative flex flex-col ${plan.popular ? "shadow-lg" : ""}`,
714
644
  children: [
715
645
  plan.popular && !plan.current && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx("span", { className: "bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full", children: "Most Popular" }) }),
716
646
  plan.current && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx("span", { className: "bg-green-600 text-white text-xs font-semibold px-3 py-1 rounded-full", children: "Current Plan" }) }),
@@ -768,7 +698,7 @@ function BillingContent({
768
698
  content: /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxs(Card, { children: [
769
699
  /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Invoice History" }),
770
700
  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-6", children: "View and download your past invoices" }),
771
- invoices.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-gray-500 dark:text-gray-400", children: "No invoices yet." }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: invoices.map((invoice) => /* @__PURE__ */ jsxs("div", { className: "okt-card-border flex items-center justify-between p-4 transition-colors", children: [
701
+ invoices.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-gray-500 dark:text-gray-400", children: "No invoices yet." }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: invoices.map((invoice) => /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 dark:border-neutral-700 rounded-lg flex items-center justify-between p-4 transition-colors", children: [
772
702
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
773
703
  /* @__PURE__ */ jsx("div", { className: "h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-blue-600 dark:text-blue-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }),
774
704
  /* @__PURE__ */ jsxs("div", { children: [
@@ -800,11 +730,11 @@ function BillingContent({
800
730
  content: /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxs(Card, { children: [
801
731
  /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Payment Methods" }),
802
732
  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-6", children: "Manage your payment methods" }),
803
- paymentMethods.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "okt-empty-border text-center py-8", children: [
733
+ paymentMethods.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "border border-dashed border-gray-300 dark:border-neutral-600 rounded-lg text-center py-8", children: [
804
734
  /* @__PURE__ */ jsx("p", { className: "text-gray-500 dark:text-gray-400 mb-4", children: "No payment methods on file" }),
805
735
  /* @__PURE__ */ jsx(Button, { onClick: () => setIsAddPaymentModalOpen(true), disabled: stripeLoading, children: stripeLoading ? "Loading..." : "Add Payment Method" })
806
736
  ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
807
- paymentMethods.map((pm) => /* @__PURE__ */ jsxs("div", { className: "okt-card-border flex items-center justify-between p-4", children: [
737
+ paymentMethods.map((pm) => /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 dark:border-neutral-700 rounded-lg flex items-center justify-between p-4", children: [
808
738
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
809
739
  /* @__PURE__ */ jsx("div", { className: "h-10 w-10 rounded-full bg-gray-100 dark:bg-neutral-800 flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" }) }) }),
810
740
  /* @__PURE__ */ jsxs("div", { children: [
@@ -866,7 +796,7 @@ function BillingContent({
866
796
  content: /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxs(Card, { children: [
867
797
  /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Billing Preferences" }),
868
798
  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-6", children: "Manage your billing information and tax settings" }),
869
- preferencesSuccess && /* @__PURE__ */ jsx("div", { className: "p-4 mb-6 bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200 rounded-lg", children: "Preferences saved successfully" }),
799
+ preferencesSuccess && /* @__PURE__ */ jsx(Alert, { variant: "success", className: "mb-6", children: "Preferences saved successfully" }),
870
800
  /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
871
801
  /* @__PURE__ */ jsxs("div", { children: [
872
802
  /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Customer Type" }),
@@ -1024,7 +954,7 @@ function BillingContent({
1024
954
  )
1025
955
  ] })
1026
956
  ] }),
1027
- initialTaxInfo && /* @__PURE__ */ jsxs("div", { className: "p-4 bg-gray-50 dark:bg-neutral-800 rounded-lg", children: [
957
+ initialTaxInfo && /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 dark:border-neutral-700 rounded-lg p-4", children: [
1028
958
  /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Tax Information" }),
1029
959
  /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
1030
960
  /* @__PURE__ */ jsxs("p", { children: [
@@ -1043,7 +973,7 @@ function BillingContent({
1043
973
  initialTaxInfo.reverse_charge && /* @__PURE__ */ jsx("p", { className: "text-blue-600 dark:text-blue-400", children: "Reverse charge applies" })
1044
974
  ] })
1045
975
  ] }),
1046
- /* @__PURE__ */ jsx("div", { className: "okt-divider flex justify-end pt-4", children: /* @__PURE__ */ jsx(
976
+ /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200 dark:border-neutral-700 flex justify-end pt-4", children: /* @__PURE__ */ jsx(
1047
977
  Button,
1048
978
  {
1049
979
  onClick: handleSavePreferences,
@@ -1055,7 +985,7 @@ function BillingContent({
1055
985
  ] }) })
1056
986
  }
1057
987
  ];
1058
- return /* @__PURE__ */ jsxs("div", { className: `okt-billing ${className}`, children: [
988
+ return /* @__PURE__ */ jsxs("div", { className, children: [
1059
989
  /* @__PURE__ */ jsx(Tabs, { tabs, defaultIndex: activeTabIndex, onChange: setActiveTabIndex }, activeTabIndex),
1060
990
  /* @__PURE__ */ jsx(
1061
991
  Modal,
@@ -1086,8 +1016,8 @@ function BillingContent({
1086
1016
  title: "Remove Payment Method",
1087
1017
  children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
1088
1018
  /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-400", children: "Are you sure you want to remove this payment method?" }),
1089
- selectedPaymentMethod && /* @__PURE__ */ jsx("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
1090
- /* @__PURE__ */ jsx("div", { className: "w-12 h-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" }) }) }),
1019
+ selectedPaymentMethod && /* @__PURE__ */ jsx("div", { className: "border border-gray-200 dark:border-neutral-700 rounded-lg p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
1020
+ /* @__PURE__ */ jsx("div", { className: "w-12 h-8 bg-gradient-to-br from-gray-400 to-gray-600 dark:from-gray-500 dark:to-gray-700 rounded-lg flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" }) }) }),
1091
1021
  /* @__PURE__ */ jsxs("div", { children: [
1092
1022
  /* @__PURE__ */ jsx("p", { className: "font-semibold text-gray-900 dark:text-white", children: selectedPaymentMethod.card_brand || "Card" }),
1093
1023
  /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
@@ -1097,7 +1027,7 @@ function BillingContent({
1097
1027
  ] })
1098
1028
  ] }) }),
1099
1029
  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "This action cannot be undone." }),
1100
- /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end mt-6 pt-4 okt-divider", children: [
1030
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end mt-6 pt-4 border-t border-gray-200 dark:border-neutral-700", children: [
1101
1031
  /* @__PURE__ */ jsx(
1102
1032
  Button,
1103
1033
  {
@@ -1130,14 +1060,8 @@ function BillingContent({
1130
1060
  onClose: () => setIsCancelModalOpen(false),
1131
1061
  title: "Cancel Subscription",
1132
1062
  children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
1133
- /* @__PURE__ */ jsxs("div", { className: "okt-alert-warning flex items-start gap-3 bg-yellow-50 dark:bg-yellow-900/20 p-4", children: [
1134
- /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-yellow-600 dark:text-yellow-400 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
1135
- /* @__PURE__ */ jsxs("div", { children: [
1136
- /* @__PURE__ */ jsx("p", { className: "font-medium text-yellow-900 dark:text-yellow-100 mb-1", children: "Are you sure you want to cancel?" }),
1137
- /* @__PURE__ */ jsx("p", { className: "text-sm text-yellow-800 dark:text-yellow-200", children: "You'll lose access to premium features when your current billing period ends." })
1138
- ] })
1139
- ] }),
1140
- subscription && /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 dark:bg-gray-800 rounded-lg p-4", children: [
1063
+ /* @__PURE__ */ jsx(Alert, { variant: "warning", title: "Are you sure you want to cancel?", children: "You'll lose access to premium features when your current billing period ends." }),
1064
+ subscription && /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 dark:border-neutral-700 rounded-lg p-4", children: [
1141
1065
  /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
1142
1066
  /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Current Plan:" }),
1143
1067
  /* @__PURE__ */ jsx("span", { className: "font-medium", children: subscription.plan })
@@ -1147,7 +1071,7 @@ function BillingContent({
1147
1071
  /* @__PURE__ */ jsx("span", { className: "font-medium", children: subscription.nextBilling })
1148
1072
  ] })
1149
1073
  ] }),
1150
- /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end mt-6 pt-4 okt-divider", children: [
1074
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end mt-6 pt-4 border-t border-gray-200 dark:border-neutral-700", children: [
1151
1075
  /* @__PURE__ */ jsx(
1152
1076
  Button,
1153
1077
  {
@@ -1193,7 +1117,7 @@ function BillingContent({
1193
1117
  /* @__PURE__ */ jsx("strong", { children: selectedPlan?.name }),
1194
1118
  " plan"
1195
1119
  ] }) }),
1196
- /* @__PURE__ */ jsxs("div", { className: "okt-card-border p-4", children: [
1120
+ /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 dark:border-neutral-700 rounded-lg p-4", children: [
1197
1121
  /* @__PURE__ */ jsx("h4", { className: "font-semibold text-gray-900 dark:text-white mb-2", children: "Billing Summary" }),
1198
1122
  /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm mb-1", children: [
1199
1123
  /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Plan:" }),
@@ -1230,8 +1154,8 @@ function BillingContent({
1230
1154
  /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: "$0.00" })
1231
1155
  ] }) : null
1232
1156
  ] }),
1233
- taxInfo && taxInfo.reverse_charge && /* @__PURE__ */ jsx("div", { className: "mt-2 p-2 bg-blue-50 dark:bg-blue-900/20 rounded text-xs text-blue-700 dark:text-blue-300", children: "EU reverse charge applies - you are responsible for reporting VAT in your country." }),
1234
- /* @__PURE__ */ jsx("div", { className: "okt-divider mt-3 pt-3", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
1157
+ taxInfo && taxInfo.reverse_charge && /* @__PURE__ */ jsx("div", { className: "mt-2 p-2 border border-gray-200 dark:border-neutral-700 rounded text-xs text-gray-700 dark:text-gray-300", children: "EU reverse charge applies - you are responsible for reporting VAT in your country." }),
1158
+ /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200 dark:border-neutral-700 mt-3 pt-3", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
1235
1159
  /* @__PURE__ */ jsx("span", { className: "font-semibold text-gray-900 dark:text-white", children: selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 ? "Total:" : "Charged Today:" }),
1236
1160
  /* @__PURE__ */ jsx("span", { className: "font-bold text-lg text-gray-900 dark:text-white", children: selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 ? /* @__PURE__ */ jsx("span", { className: "text-green-600 dark:text-green-400", children: "FREE" }) : taxInfo ? `$${(taxInfo.total / 100).toFixed(2)}` : selectedPlan?.price || "$0" })
1237
1161
  ] }) })
@@ -1241,7 +1165,7 @@ function BillingContent({
1241
1165
  /* @__PURE__ */ jsx("div", { className: "space-y-2", children: paymentMethods.map((method) => /* @__PURE__ */ jsxs(
1242
1166
  "label",
1243
1167
  {
1244
- className: `okt-selectable flex items-center gap-3 p-3 transition-all ${selectedUpgradePaymentMethod === method.id ? "okt-selectable-selected" : "okt-selectable-default"}`,
1168
+ className: `flex items-center gap-3 p-3 border-2 rounded-lg cursor-pointer transition-all ${selectedUpgradePaymentMethod === method.id ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20" : "border-gray-200 dark:border-neutral-700 hover:border-gray-300 dark:hover:border-neutral-600"}`,
1245
1169
  children: [
1246
1170
  /* @__PURE__ */ jsx(
1247
1171
  "input",
@@ -1269,13 +1193,10 @@ function BillingContent({
1269
1193
  method.id
1270
1194
  )) })
1271
1195
  ] }),
1272
- selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && paymentMethods.length === 0 && /* @__PURE__ */ jsx("div", { className: "okt-alert-warning bg-yellow-50 dark:bg-yellow-900/20 p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-yellow-800 dark:text-yellow-200", children: "Please add a payment method before subscribing to a paid plan." }) }),
1273
- selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 && /* @__PURE__ */ jsx("div", { className: "okt-alert-success bg-green-50 dark:bg-green-900/20 p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-green-800 dark:text-green-200", children: "This is a free plan. No payment method required!" }) }),
1196
+ selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && paymentMethods.length === 0 && /* @__PURE__ */ jsx(Alert, { variant: "warning", children: "Please add a payment method before subscribing to a paid plan." }),
1197
+ selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 && /* @__PURE__ */ jsx(Alert, { variant: "success", children: "This is a free plan. No payment method required!" }),
1274
1198
  selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Your payment method will be charged immediately. You can cancel anytime." }),
1275
- error && /* @__PURE__ */ jsx("div", { className: "okt-alert-error bg-red-50 dark:bg-red-900/20 p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
1276
- /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
1277
- /* @__PURE__ */ jsx("p", { className: "text-sm text-red-800 dark:text-red-200", children: error })
1278
- ] }) }),
1199
+ error && /* @__PURE__ */ jsx(Alert, { variant: "error", children: error }),
1279
1200
  /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end mt-6", children: [
1280
1201
  /* @__PURE__ */ jsx(
1281
1202
  Button,
@@ -1327,7 +1248,7 @@ function BillingContent({
1327
1248
  /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Billing:" }),
1328
1249
  /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 ? "Free" : `${selectedPlan?.price}/${selectedPlan?.period}` })
1329
1250
  ] }),
1330
- selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm pt-2 okt-divider", children: [
1251
+ selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm pt-2 border-t border-gray-200 dark:border-neutral-700", children: [
1331
1252
  /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Status:" }),
1332
1253
  /* @__PURE__ */ jsx("span", { className: "font-medium text-green-600 dark:text-green-400", children: "Active" })
1333
1254
  ] })
@@ -1347,6 +1268,6 @@ function BillingContent({
1347
1268
  ] });
1348
1269
  }
1349
1270
 
1350
- export { AddPaymentMethodForm, BillingContent, Modal };
1351
- //# sourceMappingURL=chunk-FETPTCD3.js.map
1352
- //# sourceMappingURL=chunk-FETPTCD3.js.map
1271
+ export { AddPaymentMethodForm, BillingContent };
1272
+ //# sourceMappingURL=chunk-3FSOHWPO.js.map
1273
+ //# sourceMappingURL=chunk-3FSOHWPO.js.map