@omnikit-js/ui 0.6.0 → 0.6.1

package/dist/chunk-MQEH3FTA.mjs

@@ -0,0 +1,196 @@
+"use client";
+import { useState, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/client/Tabs/index.tsx
+function Tabs({ tabs, defaultTab, className = "" }) {
+  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id);
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx("nav", { className: "-mb-px flex space-x-8", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setActiveTab(tab.id),
+        className: `
+                whitespace-nowrap border-b-2 px-1 pb-4 text-sm font-medium transition-colors
+                ${activeTab === tab.id ? "border-blue-500 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"}
+              `,
+        children: tab.label
+      },
+      tab.id
+    )) }) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-6", children: tabs.find((tab) => tab.id === activeTab)?.content })
+  ] });
+}
+function Modal({ isOpen, onClose, title, children, className = "" }) {
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `relative bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto ${className}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: title }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onClose,
+                className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
+                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" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "p-6", children })
+        ]
+      }
+    )
+  ] });
+}
+function PaymentMethodManager({ currentMethod }) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: "Current Payment Method" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg mb-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-12 w-16 rounded bg-gradient-to-br from-blue-600 to-blue-800 flex items-center justify-center text-white font-bold text-sm", children: currentMethod.type }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("p", { className: "font-medium", children: [
+              "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ",
+              currentMethod.last4
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
+              "Expires ",
+              currentMethod.expiry
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsModalOpen(true),
+            className: "rounded-lg border border-gray-300 dark:border-gray-600 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors",
+            children: "Update"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setIsModalOpen(true),
+          className: "w-full rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors",
+          children: "Add New Payment Method"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        isOpen: isModalOpen,
+        onClose: () => setIsModalOpen(false),
+        title: "Add Payment Method",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Cardholder Name" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                placeholder: "John Doe",
+                className: "w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Card Number" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                placeholder: "1234 5678 9012 3456",
+                className: "w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "Expiry Date" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "MM/YY",
+                  className: "w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: "CVC" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "123",
+                  className: "w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                id: "setDefaultModal",
+                className: "rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
+              }
+            ),
+            /* @__PURE__ */ jsx("label", { htmlFor: "setDefaultModal", className: "text-sm text-gray-700 dark:text-gray-300", children: "Set as default payment method" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-3 pt-4", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setIsModalOpen(false),
+                className: "flex-1 rounded-lg border border-gray-300 dark:border-gray-600 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setIsModalOpen(false),
+                className: "flex-1 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors",
+                children: "Add Card"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
+export { Modal, PaymentMethodManager, Tabs };
+//# sourceMappingURL=chunk-MQEH3FTA.mjs.map
+//# sourceMappingURL=chunk-MQEH3FTA.mjs.map

package/dist/chunk-MQEH3FTA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/client/Tabs/index.tsx","../src/components/client/Modal/index.tsx","../src/components/client/PaymentMethodManager/index.tsx"],"names":["jsxs","jsx","useState"],"mappings":"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","file":"chunk-MQEH3FTA.mjs","sourcesContent":["'use client'\n\nimport { useState } from 'react'\n\nexport interface Tab {\n  id: string\n  label: string\n  content: React.ReactNode\n}\n\nexport interface TabsProps {\n  tabs: Tab[]\n  defaultTab?: string\n  className?: string\n}\n\nexport function Tabs({ tabs, defaultTab, className = '' }: TabsProps) {\n  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id)\n\n  return (\n    <div className={className}>\n      <div className=\"border-b border-gray-200 dark:border-gray-700\">\n        <nav className=\"-mb-px flex space-x-8\">\n          {tabs.map((tab) => (\n            <button\n              key={tab.id}\n              onClick={() => setActiveTab(tab.id)}\n              className={`\n                whitespace-nowrap border-b-2 px-1 pb-4 text-sm font-medium transition-colors\n                ${\n                  activeTab === tab.id\n                    ? 'border-blue-500 text-blue-600 dark:text-blue-400'\n                    : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'\n                }\n              `}\n            >\n              {tab.label}\n            </button>\n          ))}\n        </nav>\n      </div>\n      <div className=\"mt-6\">\n        {tabs.find((tab) => tab.id === activeTab)?.content}\n      </div>\n    </div>\n  )\n}\n","'use client'\n\nimport { useEffect } from 'react'\n\nexport interface ModalProps {\n  isOpen: boolean\n  onClose: () => void\n  title: string\n  children: React.ReactNode\n  className?: string\n}\n\nexport function Modal({ isOpen, onClose, title, children, className = '' }: ModalProps) {\n  useEffect(() => {\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose()\n    }\n\n    if (isOpen) {\n      document.addEventListener('keydown', handleEscape)\n      document.body.style.overflow = 'hidden'\n    }\n\n    return () => {\n      document.removeEventListener('keydown', handleEscape)\n      document.body.style.overflow = 'unset'\n    }\n  }, [isOpen, onClose])\n\n  if (!isOpen) return null\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n      {/* Backdrop */}\n      <div\n        className=\"absolute inset-0 bg-black/50 backdrop-blur-sm\"\n        onClick={onClose}\n      />\n\n      {/* Modal */}\n      <div\n        className={`relative bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto ${className}`}\n      >\n        {/* Header */}\n        <div className=\"flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700\">\n          <h2 className=\"text-xl font-semibold\">{title}</h2>\n          <button\n            onClick={onClose}\n            className=\"text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors\"\n          >\n            <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n\n        {/* Content */}\n        <div className=\"p-6\">\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n","'use client'\n\nimport { useState } from 'react'\nimport { Modal } from '../Modal'\n\nexport interface PaymentMethodManagerProps {\n  currentMethod: {\n    type: string\n    last4: string\n    expiry: string\n  }\n}\n\nexport function PaymentMethodManager({ currentMethod }: PaymentMethodManagerProps) {\n  const [isModalOpen, setIsModalOpen] = useState(false)\n\n  return (\n    <>\n      <div>\n        <h3 className=\"text-lg font-semibold mb-4\">Current Payment Method</h3>\n        <div className=\"flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg mb-6\">\n          <div className=\"flex items-center gap-4\">\n            <div className=\"h-12 w-16 rounded bg-gradient-to-br from-blue-600 to-blue-800 flex items-center justify-center text-white font-bold text-sm\">\n              {currentMethod.type}\n            </div>\n            <div>\n              <p className=\"font-medium\">•••• •••• •••• {currentMethod.last4}</p>\n              <p className=\"text-sm text-gray-600 dark:text-gray-400\">\n                Expires {currentMethod.expiry}\n              </p>\n            </div>\n          </div>\n          <button\n            onClick={() => setIsModalOpen(true)}\n            className=\"rounded-lg border border-gray-300 dark:border-gray-600 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors\"\n          >\n            Update\n          </button>\n        </div>\n\n        <button\n          onClick={() => setIsModalOpen(true)}\n          className=\"w-full rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors\"\n        >\n          Add New Payment Method\n        </button>\n      </div>\n\n      <Modal\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        title=\"Add Payment Method\"\n      >\n        <div className=\"space-y-4\">\n          <div>\n            <label className=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2\">\n              Cardholder Name\n            </label>\n            <input\n              type=\"text\"\n              placeholder=\"John Doe\"\n              className=\"w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20\"\n            />\n          </div>\n          <div>\n            <label className=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2\">\n              Card Number\n            </label>\n            <input\n              type=\"text\"\n              placeholder=\"1234 5678 9012 3456\"\n              className=\"w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20\"\n            />\n          </div>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div>\n              <label className=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2\">\n                Expiry Date\n              </label>\n              <input\n                type=\"text\"\n                placeholder=\"MM/YY\"\n                className=\"w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20\"\n              />\n            </div>\n            <div>\n              <label className=\"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2\">\n                CVC\n              </label>\n              <input\n                type=\"text\"\n                placeholder=\"123\"\n                className=\"w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20\"\n              />\n            </div>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <input\n              type=\"checkbox\"\n              id=\"setDefaultModal\"\n              className=\"rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500\"\n            />\n            <label htmlFor=\"setDefaultModal\" className=\"text-sm text-gray-700 dark:text-gray-300\">\n              Set as default payment method\n            </label>\n          </div>\n          <div className=\"flex gap-3 pt-4\">\n            <button\n              onClick={() => setIsModalOpen(false)}\n              className=\"flex-1 rounded-lg border border-gray-300 dark:border-gray-600 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors\"\n            >\n              Cancel\n            </button>\n            <button\n              onClick={() => setIsModalOpen(false)}\n              className=\"flex-1 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors\"\n            >\n              Add Card\n            </button>\n          </div>\n        </div>\n      </Modal>\n    </>\n  )\n}\n"]}

package/dist/components/client/index.d.mts

@@ -1,7 +1,40 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Tab {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+}
+interface TabsProps {
+    tabs: Tab[];
+    defaultTab?: string;
+    className?: string;
+}
+declare function Tabs({ tabs, defaultTab, className }: TabsProps): react_jsx_runtime.JSX.Element;
+
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function Modal({ isOpen, onClose, title, children, className }: ModalProps): react_jsx_runtime.JSX.Element | null;
+
+interface PaymentMethodManagerProps {
+    currentMethod: {
+        type: string;
+        last4: string;
+        expiry: string;
+    };
+}
+declare function PaymentMethodManager({ currentMethod }: PaymentMethodManagerProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Client Components
  * These components run on the client side
  */
-declare const OMNIKIT_CLIENT_VERSION = "0.1.0";
 
-export { OMNIKIT_CLIENT_VERSION };
+declare const OMNIKIT_CLIENT_VERSION = "0.6.1";
+
+export { Modal, type ModalProps, OMNIKIT_CLIENT_VERSION, PaymentMethodManager, type PaymentMethodManagerProps, type Tab, Tabs, type TabsProps };

package/dist/components/client/index.mjs

@@ -1,5 +1,7 @@
+export { Modal, PaymentMethodManager, Tabs } from '../../chunk-MQEH3FTA.mjs';
+
 // src/components/client/index.ts
-var OMNIKIT_CLIENT_VERSION = "0.1.0";
+var OMNIKIT_CLIENT_VERSION = "0.6.1";
 
 export { OMNIKIT_CLIENT_VERSION };
 //# sourceMappingURL=index.mjs.map

package/dist/components/client/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/client/index.ts"],"names":[],"mappings":";AAMO,IAAM,sBAAA,GAAyB","file":"index.mjs","sourcesContent":["/**\n * Client Components\n * These components run on the client side\n */\n\n// Placeholder for future client components\nexport const OMNIKIT_CLIENT_VERSION = '0.1.0'\n"]}
+{"version":3,"sources":["../../../src/components/client/index.ts"],"names":[],"mappings":";;;AAcO,IAAM,sBAAA,GAAyB","file":"index.mjs","sourcesContent":["/**\n * Client Components\n * These components run on the client side\n */\n\nexport { Tabs } from './Tabs'\nexport type { TabsProps, Tab } from './Tabs'\n\nexport { Modal } from './Modal'\nexport type { ModalProps } from './Modal'\n\nexport { PaymentMethodManager } from './PaymentMethodManager'\nexport type { PaymentMethodManagerProps } from './PaymentMethodManager'\n\nexport const OMNIKIT_CLIENT_VERSION = '0.6.1'\n"]}

package/dist/components/server/index.d.mts

@@ -1,2 +1,2 @@
-export { C as Column, c as ColumnDefinition, D as DataList, b as DataListProps } from '../../index-D-5etDTV.mjs';
+export { B as Billing, d as BillingProps, C as Column, c as ColumnDefinition, D as DataList, b as DataListProps } from '../../index-CsOyTW-D.mjs';
 import 'react/jsx-runtime';

package/dist/components/server/index.mjs

@@ -1,201 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-// src/lib/omnikit-client.ts
-var OmniKitClient = class {
-  constructor(config) {
-    this.baseUrl = config.baseUrl.replace(/\/$/, "");
-    this.apiKey = config.apiKey;
-    this.jwt = config.jwt;
-  }
-  getHeaders() {
-    const headers = {
-      "Content-Type": "application/json"
-    };
-    if (this.jwt) {
-      headers["Authorization"] = `Bearer ${this.jwt}`;
-    } else if (this.apiKey) {
-      headers["X-API-Key"] = this.apiKey;
-    }
-    return headers;
-  }
-  async request(endpoint, options) {
-    const url = `${this.baseUrl}${endpoint}`;
-    const response = await fetch(url, {
-      ...options,
-      headers: {
-        ...this.getHeaders(),
-        ...options?.headers
-      }
-    });
-    if (!response.ok) {
-      const error = await response.json().catch(() => ({ error: "Request failed" }));
-      throw new Error(error.error || `HTTP ${response.status}`);
-    }
-    return response.json();
-  }
-  /**
-   * Query records from a table
-   */
-  async query(table, options) {
-    const params = new URLSearchParams();
-    if (options?.filter) {
-      params.append("filter", JSON.stringify(options.filter));
-    }
-    if (options?.sort) {
-      params.append("sort", options.sort);
-    }
-    if (options?.limit) {
-      params.append("limit", options.limit.toString());
-    }
-    if (options?.offset) {
-      params.append("offset", options.offset.toString());
-    }
-    const queryString = params.toString();
-    const endpoint = `/data/${table}${queryString ? `?${queryString}` : ""}`;
-    return this.request(endpoint);
-  }
-  /**
-   * Find a record by ID
-   */
-  async findById(table, id) {
-    return this.request(`/data/${table}/${id}`);
-  }
-  /**
-   * Insert a new record
-   */
-  async insert(table, data) {
-    return this.request(`/data/${table}`, {
-      method: "POST",
-      body: JSON.stringify(data)
-    });
-  }
-  /**
-   * Update an existing record
-   */
-  async update(table, id, data) {
-    return this.request(`/data/${table}/${id}`, {
-      method: "PUT",
-      body: JSON.stringify(data)
-    });
-  }
-  /**
-   * Delete a record
-   */
-  async delete(table, id) {
-    return this.request(`/data/${table}/${id}`, {
-      method: "DELETE"
-    });
-  }
-  /**
-   * Upsert a record (insert or update)
-   */
-  async upsert(table, data) {
-    return this.request(`/data/${table}`, {
-      method: "PUT",
-      body: JSON.stringify(data)
-    });
-  }
-};
-function createOmniKitClient(config) {
-  return new OmniKitClient(config);
-}
-function normalizeColumn(column) {
-  if (typeof column === "string") {
-    return {
-      key: column,
-      label: column.charAt(0).toUpperCase() + column.slice(1).replace(/_/g, " "),
-      sortable: true
-    };
-  }
-  return {
-    ...column,
-    label: column.label || column.key.charAt(0).toUpperCase() + column.key.slice(1).replace(/_/g, " ")
-  };
-}
-function getCellValue(row, key) {
-  return key.split(".").reduce((obj, k) => obj?.[k], row);
-}
-async function DataList({
-  table,
-  baseUrl,
-  apiKey,
-  jwt,
-  columns,
-  keyField = "id",
-  filter,
-  sort,
-  limit,
-  offset,
-  className = "",
-  headerClassName = "",
-  rowClassName = "",
-  cellClassName = "",
-  emptyMessage = "No data found",
-  errorMessage = "Failed to load data"
-}) {
-  const client = createOmniKitClient({ baseUrl, apiKey, jwt });
-  let data = [];
-  let error = null;
-  try {
-    const response = await client.query(table, {
-      filter,
-      sort,
-      limit,
-      offset
-    });
-    if (response.success) {
-      data = response.data;
-    } else {
-      error = response.error || errorMessage;
-    }
-  } catch (err) {
-    error = err instanceof Error ? err.message : errorMessage;
-  }
-  const normalizedColumns = columns.map(normalizeColumn);
-  if (error) {
-    return /* @__PURE__ */ jsxs("div", { className: `rounded-lg border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-4 text-red-800 dark:text-red-200 ${className}`, children: [
-      /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Error" }),
-      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm", children: error })
-    ] });
-  }
-  if (data.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: `rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-8 text-center text-gray-600 dark:text-gray-400 ${className}`, children: /* @__PURE__ */ jsx("p", { children: emptyMessage }) });
-  }
-  return /* @__PURE__ */ jsx("div", { className: `overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700 ${className}`, children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-gray-200 dark:divide-gray-700", children: [
-    /* @__PURE__ */ jsx("thead", { className: `bg-gray-50 dark:bg-gray-800 ${headerClassName}`, children: /* @__PURE__ */ jsx("tr", { children: normalizedColumns.map((column) => /* @__PURE__ */ jsx(
-      "th",
-      {
-        className: `px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:text-gray-300 ${column.className || ""}`,
-        children: column.label
-      },
-      column.key
-    )) }) }),
-    /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-900", children: data.map((row) => {
-      const rowKey = String(row[keyField]);
-      const computedRowClassName = typeof rowClassName === "function" ? rowClassName(row) : rowClassName;
-      return /* @__PURE__ */ jsx(
-        "tr",
-        {
-          className: `hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${computedRowClassName}`,
-          children: normalizedColumns.map((column) => {
-            const cellValue = getCellValue(row, column.key);
-            const computedCellClassName = typeof cellClassName === "function" ? cellClassName(column, row) : cellClassName;
-            return /* @__PURE__ */ jsx(
-              "td",
-              {
-                className: `px-6 py-4 text-sm text-gray-900 dark:text-gray-100 ${computedCellClassName}`,
-                children: column.render ? column.render(cellValue, row) : cellValue
-              },
-              column.key
-            );
-          })
-        },
-        rowKey
-      );
-    }) })
-  ] }) });
-}
-
-export { DataList };
+export { Billing, DataList } from '../../chunk-FPLMULY5.mjs';
+import '../../chunk-MQEH3FTA.mjs';
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/components/server/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/omnikit-client.ts","../../../src/components/server/DataList/index.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["/**\n * OmniKit API Client\n * Wrapper for making requests to OmniKit serverless platform\n */\n\nimport type {\n  QueryOptions,\n  QueryResponse,\n  SingleRecordResponse,\n  MutationResponse,\n  OmniKitConfig,\n} from './types'\n\nexport class OmniKitClient {\n  private baseUrl: string\n  private apiKey?: string\n  private jwt?: string\n\n  constructor(config: OmniKitConfig) {\n    this.baseUrl = config.baseUrl.replace(/\\/$/, '') // Remove trailing slash\n    this.apiKey = config.apiKey\n    this.jwt = config.jwt\n  }\n\n  private getHeaders(): HeadersInit {\n    const headers: HeadersInit = {\n      'Content-Type': 'application/json',\n    }\n\n    if (this.jwt) {\n      headers['Authorization'] = `Bearer ${this.jwt}`\n    } else if (this.apiKey) {\n      headers['X-API-Key'] = this.apiKey\n    }\n\n    return headers\n  }\n\n  private async request<T>(\n    endpoint: string,\n    options?: RequestInit\n  ): Promise<T> {\n    const url = `${this.baseUrl}${endpoint}`\n\n    const response = await fetch(url, {\n      ...options,\n      headers: {\n        ...this.getHeaders(),\n        ...options?.headers,\n      },\n    })\n\n    if (!response.ok) {\n      const error = await response.json().catch(() => ({ error: 'Request failed' }))\n      throw new Error(error.error || `HTTP ${response.status}`)\n    }\n\n    return response.json()\n  }\n\n  /**\n   * Query records from a table\n   */\n  async query<T = any>(\n    table: string,\n    options?: QueryOptions\n  ): Promise<QueryResponse<T>> {\n    const params = new URLSearchParams()\n\n    if (options?.filter) {\n      params.append('filter', JSON.stringify(options.filter))\n    }\n    if (options?.sort) {\n      params.append('sort', options.sort)\n    }\n    if (options?.limit) {\n      params.append('limit', options.limit.toString())\n    }\n    if (options?.offset) {\n      params.append('offset', options.offset.toString())\n    }\n\n    const queryString = params.toString()\n    const endpoint = `/data/${table}${queryString ? `?${queryString}` : ''}`\n\n    return this.request<QueryResponse<T>>(endpoint)\n  }\n\n  /**\n   * Find a record by ID\n   */\n  async findById<T = any>(\n    table: string,\n    id: string | number\n  ): Promise<SingleRecordResponse<T>> {\n    return this.request<SingleRecordResponse<T>>(`/data/${table}/${id}`)\n  }\n\n  /**\n   * Insert a new record\n   */\n  async insert(\n    table: string,\n    data: Record<string, any>\n  ): Promise<MutationResponse> {\n    return this.request<MutationResponse>(`/data/${table}`, {\n      method: 'POST',\n      body: JSON.stringify(data),\n    })\n  }\n\n  /**\n   * Update an existing record\n   */\n  async update(\n    table: string,\n    id: string | number,\n    data: Record<string, any>\n  ): Promise<MutationResponse> {\n    return this.request<MutationResponse>(`/data/${table}/${id}`, {\n      method: 'PUT',\n      body: JSON.stringify(data),\n    })\n  }\n\n  /**\n   * Delete a record\n   */\n  async delete(table: string, id: string | number): Promise<MutationResponse> {\n    return this.request<MutationResponse>(`/data/${table}/${id}`, {\n      method: 'DELETE',\n    })\n  }\n\n  /**\n   * Upsert a record (insert or update)\n   */\n  async upsert(\n    table: string,\n    data: Record<string, any>\n  ): Promise<MutationResponse> {\n    return this.request<MutationResponse>(`/data/${table}`, {\n      method: 'PUT',\n      body: JSON.stringify(data),\n    })\n  }\n}\n\n/**\n * Create a new OmniKit client instance\n */\nexport function createOmniKitClient(config: OmniKitConfig): OmniKitClient {\n  return new OmniKitClient(config)\n}\n","/**\n * DataList Component\n *\n * A server-side React component that fetches and displays data from OmniKit API.\n * Renders on the server with zero client JavaScript for data fetching.\n *\n * @example\n * ```tsx\n * import { DataList } from '@omnikit-js/ui'\n *\n * export default function UsersPage() {\n *   return (\n *     <DataList\n *       table=\"users\"\n *       baseUrl={process.env.OMNIKIT_BASE_URL}\n *       apiKey={process.env.OMNIKIT_API_KEY}\n *       columns={['name', 'email', 'created_at']}\n *       filter={{ active: true }}\n *       limit={20}\n *     />\n *   )\n * }\n * ```\n */\n\nimport { createOmniKitClient } from '../../../lib/omnikit-client'\nimport type { DataListProps, Column, ColumnDefinition } from './types'\n\nfunction normalizeColumn<T>(column: Column<T>): ColumnDefinition<T> {\n  if (typeof column === 'string') {\n    return {\n      key: column,\n      label: column.charAt(0).toUpperCase() + column.slice(1).replace(/_/g, ' '),\n      sortable: true,\n    }\n  }\n  return {\n    ...column,\n    label: column.label || column.key.charAt(0).toUpperCase() + column.key.slice(1).replace(/_/g, ' '),\n  }\n}\n\nfunction getCellValue(row: any, key: string): any {\n  return key.split('.').reduce((obj, k) => obj?.[k], row)\n}\n\nexport async function DataList<T extends Record<string, any>>({\n  table,\n  baseUrl,\n  apiKey,\n  jwt,\n  columns,\n  keyField = 'id' as keyof T,\n  filter,\n  sort,\n  limit,\n  offset,\n  className = '',\n  headerClassName = '',\n  rowClassName = '',\n  cellClassName = '',\n  emptyMessage = 'No data found',\n  errorMessage = 'Failed to load data',\n}: DataListProps<T>) {\n  // Create API client\n  const client = createOmniKitClient({ baseUrl, apiKey, jwt })\n\n  // Fetch data\n  let data: T[] = []\n  let error: string | null = null\n\n  try {\n    const response = await client.query<T>(table, {\n      filter,\n      sort,\n      limit,\n      offset,\n    })\n\n    if (response.success) {\n      data = response.data\n    } else {\n      error = response.error || errorMessage\n    }\n  } catch (err) {\n    error = err instanceof Error ? err.message : errorMessage\n  }\n\n  // Normalize columns\n  const normalizedColumns = columns.map(normalizeColumn)\n\n  // Error state\n  if (error) {\n    return (\n      <div className={`rounded-lg border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 p-4 text-red-800 dark:text-red-200 ${className}`}>\n        <p className=\"font-medium\">Error</p>\n        <p className=\"mt-1 text-sm\">{error}</p>\n      </div>\n    )\n  }\n\n  // Empty state\n  if (data.length === 0) {\n    return (\n      <div className={`rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-8 text-center text-gray-600 dark:text-gray-400 ${className}`}>\n        <p>{emptyMessage}</p>\n      </div>\n    )\n  }\n\n  // Render table\n  return (\n    <div className={`overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700 ${className}`}>\n      <table className=\"min-w-full divide-y divide-gray-200 dark:divide-gray-700\">\n        <thead className={`bg-gray-50 dark:bg-gray-800 ${headerClassName}`}>\n          <tr>\n            {normalizedColumns.map((column) => (\n              <th\n                key={column.key}\n                className={`px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:text-gray-300 ${column.className || ''}`}\n              >\n                {column.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody className=\"divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-900\">\n          {data.map((row) => {\n            const rowKey = String(row[keyField])\n            const computedRowClassName = typeof rowClassName === 'function'\n              ? rowClassName(row)\n              : rowClassName\n\n            return (\n              <tr\n                key={rowKey}\n                className={`hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${computedRowClassName}`}\n              >\n                {normalizedColumns.map((column) => {\n                  const cellValue = getCellValue(row, column.key)\n                  const computedCellClassName = typeof cellClassName === 'function'\n                    ? cellClassName(column, row)\n                    : cellClassName\n\n                  return (\n                    <td\n                      key={column.key}\n                      className={`px-6 py-4 text-sm text-gray-900 dark:text-gray-100 ${computedCellClassName}`}\n                    >\n                      {column.render ? column.render(cellValue, row) : cellValue}\n                    </td>\n                  )\n                })}\n              </tr>\n            )\n          })}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n"]}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}

package/dist/{index-D-5etDTV.d.mts → index-CsOyTW-D.d.mts}

@@ -77,4 +77,11 @@ interface DataListProps<T = any> {
 
 declare function DataList<T extends Record<string, any>>({ table, baseUrl, apiKey, jwt, columns, keyField, filter, sort, limit, offset, className, headerClassName, rowClassName, cellClassName, emptyMessage, errorMessage, }: DataListProps<T>): Promise<react_jsx_runtime.JSX.Element>;
 
-export { type Column as C, DataList as D, type FilterExpression as F, type MutationResponse as M, type OmniKitConfig as O, type QueryOptions as Q, type SingleRecordResponse as S, type QueryResponse as a, type DataListProps as b, type ColumnDefinition as c };
+interface BillingProps {
+    /** Custom class names */
+    className?: string;
+}
+
+declare function Billing({ className }: BillingProps): Promise<react_jsx_runtime.JSX.Element>;
+
+export { Billing as B, type Column as C, DataList as D, type FilterExpression as F, type MutationResponse as M, type OmniKitConfig as O, type QueryOptions as Q, type SingleRecordResponse as S, type QueryResponse as a, type DataListProps as b, type ColumnDefinition as c, type BillingProps as d };

package/dist/index.d.mts

@@ -1,6 +1,5 @@
-import { O as OmniKitConfig, Q as QueryOptions, a as QueryResponse, S as SingleRecordResponse, M as MutationResponse } from './index-D-5etDTV.mjs';
-export { C as Column, c as ColumnDefinition, D as DataList, b as DataListProps, F as FilterExpression } from './index-D-5etDTV.mjs';
-export { OMNIKIT_CLIENT_VERSION } from './components/client/index.mjs';
+import { O as OmniKitConfig, Q as QueryOptions, a as QueryResponse, S as SingleRecordResponse, M as MutationResponse } from './index-CsOyTW-D.mjs';
+export { B as Billing, d as BillingProps, C as Column, c as ColumnDefinition, D as DataList, b as DataListProps, F as FilterExpression } from './index-CsOyTW-D.mjs';
 import 'react/jsx-runtime';
 
 /**