@omnikit-js/ui 0.9.45 → 0.9.47

package/dist/components/client/index.js

@@ -1,7 +1,7 @@
-export { AddPaymentMethodForm, BillingContent } from '../../chunk-3AQCVPQI.js';
+export { AddPaymentMethodForm, BillingContent, PaymentForm } from '../../chunk-SRPYYSJZ.js';
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Button, TextInput, Spinner } from '@marcoschwartz/lite-ui';
+import { Button, TextInput, Spinner, ProgressBar } from '@marcoschwartz/lite-ui';
 export { Button } from '@marcoschwartz/lite-ui';
 
 function Tabs({ tabs, defaultTab, className = "" }) {
@@ -1252,7 +1252,7 @@ function FileUploader({
   const isUploading = uploads.some((u) => u.status === "uploading");
   const hasPendingFiles = uploads.some((u) => u.status === "pending");
   return /* @__PURE__ */ jsxs("div", { className: `w-full ${className}`, children: [
-    label && /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-900 dark:text-neutral-100 mb-2", children: label }),
+    label && /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-2", children: label }),
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -1262,7 +1262,7 @@ function FileUploader({
         onClick: handleClick,
         className: `
           relative border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-all
-          ${isDragging ? "border-blue-500 bg-blue-50 dark:border-neutral-400 dark:bg-neutral-700/50" : "border-gray-300 dark:border-neutral-600 hover:border-gray-400 dark:hover:border-neutral-500"}
+          ${isDragging ? "border-[hsl(var(--primary))] bg-[hsl(var(--primary))]/10" : "border-[hsl(var(--input))] hover:border-[hsl(var(--muted-foreground))]"}
           ${disabled ? "opacity-50 cursor-not-allowed" : ""}
         `,
         children: [
@@ -1279,13 +1279,13 @@ function FileUploader({
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-full bg-gray-100 dark:bg-neutral-800 flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-gray-400 dark:text-neutral-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }) }),
+            /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-full bg-[hsl(var(--muted))] flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 text-[hsl(var(--muted-foreground))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }) }),
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-gray-900 dark:text-neutral-100", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-blue-600 dark:text-neutral-200 dark:font-medium", children: "Click to upload" }),
+              /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[hsl(var(--primary))]", children: "Click to upload" }),
                 " or drag and drop"
               ] }),
-              /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 dark:text-neutral-400 mt-1", children: [
+              /* @__PURE__ */ jsxs("p", { className: "text-xs text-[hsl(var(--muted-foreground))] mt-1", children: [
                 accept ? `Accepted: ${accept}` : "Any file type",
                 maxFileSize && ` \xB7 Max: ${formatFileSize(maxFileSize)}`
               ] })
@@ -1294,28 +1294,22 @@ function FileUploader({
         ]
       }
     ),
-    helperText && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500 dark:text-neutral-400", children: helperText }),
-    showProgress && overallProgress && isUploading && overallProgress.totalFiles > 1 && /* @__PURE__ */ jsxs("div", { className: "mt-4 p-3 bg-gray-50 dark:bg-neutral-800 rounded-lg", children: [
+    helperText && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-[hsl(var(--muted-foreground))]", children: helperText }),
+    showProgress && overallProgress && isUploading && overallProgress.totalFiles > 1 && /* @__PURE__ */ jsxs("div", { className: "mt-4 p-3 bg-[hsl(var(--muted))] rounded-lg", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm mb-2", children: [
-        /* @__PURE__ */ jsxs("span", { className: "text-gray-700 dark:text-neutral-300", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-[hsl(var(--foreground))]", children: [
           "Uploading ",
           overallProgress.completedFiles + 1,
           " of ",
           overallProgress.totalFiles
         ] }),
-        /* @__PURE__ */ jsxs("span", { className: "text-gray-500 dark:text-neutral-400", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-[hsl(var(--muted-foreground))]", children: [
           overallProgress.percentage,
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "w-full h-2 bg-gray-200 dark:bg-neutral-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "h-full bg-blue-600 dark:bg-neutral-300 transition-all duration-300",
-          style: { width: `${overallProgress.percentage}%` }
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-gray-500 dark:text-neutral-400 mt-1", children: [
+      /* @__PURE__ */ jsx(ProgressBar, { value: overallProgress.percentage, size: "sm" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-[hsl(var(--muted-foreground))] mt-1", children: [
         /* @__PURE__ */ jsxs("span", { children: [
           formatFileSize(overallProgress.bytesUploaded),
           " / ",
@@ -1327,35 +1321,29 @@ function FileUploader({
     showFileList && uploads.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2", children: uploads.map((upload) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "flex items-center gap-3 p-3 bg-gray-50 dark:bg-neutral-800 rounded-lg border border-gray-200 dark:border-neutral-700",
+        className: "flex items-center gap-3 p-3 bg-[hsl(var(--muted))] rounded-lg border border-[hsl(var(--border))]",
         children: [
-          /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded bg-gray-200 dark:bg-neutral-700 flex items-center justify-center flex-shrink-0", children: upload.status === "uploading" ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : upload.status === "completed" ? /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-green-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) : upload.status === "error" ? /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-red-500", 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" }) }) : /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-gray-400 dark:text-neutral-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" }) }) }),
+          /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded bg-[hsl(var(--card))] flex items-center justify-center flex-shrink-0", children: upload.status === "uploading" ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : upload.status === "completed" ? /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-[hsl(var(--success))]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) : upload.status === "error" ? /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-[hsl(var(--destructive))]", 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" }) }) : /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-[hsl(var(--muted-foreground))]", 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" }) }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-neutral-100 truncate", children: upload.file.name }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-500 dark:text-neutral-400", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[hsl(var(--foreground))] truncate", children: upload.file.name }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-[hsl(var(--muted-foreground))]", children: [
               /* @__PURE__ */ jsx("span", { children: formatFileSize(upload.file.size) }),
               upload.status === "uploading" && /* @__PURE__ */ jsxs("span", { children: [
                 "\xB7 ",
                 upload.progress,
                 "%"
               ] }),
-              upload.status === "error" && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: upload.error }),
-              upload.file.size >= multipartThreshold && upload.status === "pending" && /* @__PURE__ */ jsx("span", { className: "text-blue-500 dark:text-neutral-300", children: "Multipart" })
+              upload.status === "error" && /* @__PURE__ */ jsx("span", { className: "text-[hsl(var(--destructive))]", children: upload.error }),
+              upload.file.size >= multipartThreshold && upload.status === "pending" && /* @__PURE__ */ jsx("span", { className: "text-[hsl(var(--primary))]", children: "Multipart" })
             ] }),
-            upload.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "w-full h-1 bg-gray-200 dark:bg-neutral-700 rounded-full mt-2 overflow-hidden", children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "h-full bg-blue-600 dark:bg-neutral-300 transition-all duration-300",
-                style: { width: `${upload.progress}%` }
-              }
-            ) })
+            upload.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(ProgressBar, { value: upload.progress, size: "sm" }) })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
             upload.status === "error" && /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: () => handleRetry(upload),
-                className: "p-1 text-gray-400 dark:text-neutral-400 hover:text-blue-500 dark:hover:text-neutral-200 transition-colors",
+                className: "p-1 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--primary))] transition-colors",
                 title: "Retry",
                 children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) })
               }
@@ -1364,7 +1352,7 @@ function FileUploader({
               "button",
               {
                 onClick: () => handleRemoveFile(upload.id),
-                className: "p-1 text-gray-400 dark:text-neutral-400 hover:text-red-500 transition-colors",
+                className: "p-1 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--destructive))] transition-colors",
                 title: "Remove",
                 children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", 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" }) })
               }