@omnikit-js/ui 0.5.5 → 0.6.1

package/dist/chunk-FPLMULY5.mjs

@@ -0,0 +1,436 @@
+import { PaymentMethodManager, Tabs } from './chunk-MQEH3FTA.mjs';
+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
+      );
+    }) })
+  ] }) });
+}
+async function Billing({ className = "" }) {
+  const subscription = {
+    plan: "Professional",
+    status: "active",
+    price: "$49",
+    period: "month",
+    nextBilling: "November 14, 2025",
+    seats: 5
+  };
+  const invoices = [
+    { id: "INV-001", date: "Oct 14, 2025", amount: "$49.00", status: "Paid", url: "#" },
+    { id: "INV-002", date: "Sep 14, 2025", amount: "$49.00", status: "Paid", url: "#" },
+    { id: "INV-003", date: "Aug 14, 2025", amount: "$49.00", status: "Paid", url: "#" },
+    { id: "INV-004", date: "Jul 14, 2025", amount: "$49.00", status: "Paid", url: "#" }
+  ];
+  const paymentMethod = {
+    type: "Visa",
+    last4: "4242",
+    expiry: "12/2026"
+  };
+  const plans = [
+    {
+      name: "Starter",
+      price: "$19",
+      period: "month",
+      features: ["Up to 10,000 API calls/month", "5 GB storage", "1 team seat", "Email support"],
+      current: false
+    },
+    {
+      name: "Professional",
+      price: "$49",
+      period: "month",
+      features: ["Up to 100,000 API calls/month", "50 GB storage", "5 team seats", "Priority support", "Advanced analytics"],
+      current: true,
+      popular: true
+    },
+    {
+      name: "Enterprise",
+      price: "$199",
+      period: "month",
+      features: ["Unlimited API calls", "500 GB storage", "Unlimited team seats", "24/7 phone support", "Custom integrations", "SLA guarantee"],
+      current: false
+    }
+  ];
+  const tabs = [
+    {
+      id: "subscription",
+      label: "Subscription",
+      content: /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Current Plan" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-3xl font-bold", children: subscription.price }),
+                /* @__PURE__ */ jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
+                  "/ ",
+                  subscription.period
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: [
+                subscription.plan,
+                " Plan"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-green-100 dark:bg-green-900/30 px-3 py-1 text-sm font-medium text-green-800 dark:text-green-300", children: subscription.status })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3 mb-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Team seats" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: subscription.seats })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Next billing date" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: subscription.nextBilling })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ jsx("button", { 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: "Upgrade Plan" }),
+            /* @__PURE__ */ jsx("button", { 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: "Cancel" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: "Usage This Month" }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm mb-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "API Calls" }),
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: "45,231 / 100,000" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full bg-blue-600", style: { width: "45%" } }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm mb-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: "Storage" }),
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: "12.4 GB / 50 GB" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full bg-blue-600", style: { width: "25%" } }) })
+            ] })
+          ] })
+        ] })
+      ] }) })
+    },
+    {
+      id: "plans",
+      label: "Plans",
+      content: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Choose Your Plan" }),
+          /* @__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." })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: plans.map((plan) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `relative rounded-lg border-2 p-6 flex flex-col ${plan.current ? "border-blue-600 dark:border-blue-500" : "border-gray-200 dark:border-gray-700"} ${plan.popular ? "shadow-lg" : ""}`,
+            children: [
+              plan.popular && /* @__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" }) }),
+              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" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+                /* @__PURE__ */ jsx("h4", { className: "text-xl font-bold mb-2", children: plan.name }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-3xl font-bold", children: plan.price }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-gray-600 dark:text-gray-400", children: [
+                    "/ ",
+                    plan.period
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("ul", { className: "space-y-3 mb-6 flex-1", children: plan.features.map((feature, idx) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "w-5 h-5 text-green-600 dark:text-green-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: "M5 13l4 4L19 7"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-gray-700 dark:text-gray-300", children: feature })
+              ] }, idx)) }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: `w-full rounded-lg px-4 py-2 text-sm font-medium transition-colors ${plan.current ? "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 cursor-not-allowed" : "bg-blue-600 text-white hover:bg-blue-700"}`,
+                  disabled: plan.current,
+                  children: plan.current ? "Current Plan" : "Select Plan"
+                }
+              )
+            ]
+          },
+          plan.name
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4", children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-semibold text-blue-900 dark:text-blue-100 mb-2", children: "Need a custom solution?" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-blue-800 dark:text-blue-200 mb-3", children: "Contact our sales team for enterprise pricing and custom features tailored to your organization." }),
+          /* @__PURE__ */ jsx("button", { className: "text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300", children: "Contact Sales \u2192" })
+        ] })
+      ] })
+    },
+    {
+      id: "invoices",
+      label: "Invoices",
+      content: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Invoice History" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-6", children: "View and download your past invoices" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-3", children: invoices.map((invoice) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__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" }) }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("p", { className: "font-medium text-sm", children: invoice.id }),
+                /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-green-100 dark:bg-green-900/30 px-2 py-0.5 text-xs font-medium text-green-800 dark:text-green-300", children: invoice.status })
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: invoice.date })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-semibold", children: invoice.amount }),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: invoice.url,
+                className: "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium",
+                children: "Download"
+              }
+            )
+          ] })
+        ] }, invoice.id)) })
+      ] })
+    },
+    {
+      id: "payment",
+      label: "Payment Method",
+      content: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsx(PaymentMethodManager, { currentMethod: paymentMethod }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: "Recent Payments" }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-3", children: invoices.slice(0, 3).map((invoice) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-10 w-10 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 text-green-600 dark:text-green-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "font-medium text-sm", children: "Payment Successful" }),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: [
+                  invoice.date,
+                  " - Invoice #",
+                  invoice.id
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+              /* @__PURE__ */ jsx("p", { className: "font-semibold", children: invoice.amount }),
+              /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: [
+                "Visa \u2022\u2022\u2022\u2022 ",
+                paymentMethod.last4
+              ] })
+            ] })
+          ] }, invoice.id)) })
+        ] })
+      ] })
+    }
+  ];
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(Tabs, { tabs, defaultTab: "subscription" }) });
+}
+
+export { Billing, DataList, OmniKitClient, createOmniKitClient };
+//# sourceMappingURL=chunk-FPLMULY5.mjs.map
+//# sourceMappingURL=chunk-FPLMULY5.mjs.map

package/dist/chunk-FPLMULY5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/omnikit-client.ts","../src/components/server/DataList/index.tsx","../src/components/server/Billing/index.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-FPLMULY5.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","/**\n * Billing Component\n *\n * A server-side React component that displays billing information for a SaaS application.\n * Includes subscription details, invoices, and payment methods.\n *\n * @example\n * ```tsx\n * import { Billing } from '@omnikit-js/ui'\n *\n * export default function BillingPage() {\n *   return <Billing />\n * }\n * ```\n */\n\nimport { Tabs } from '../../client/Tabs'\nimport { PaymentMethodManager } from '../../client/PaymentMethodManager'\nimport type { BillingProps } from './types'\n\nexport async function Billing({ className = '' }: BillingProps) {\n  // Mock data - in production this would be fetched from API\n  const subscription = {\n    plan: 'Professional',\n    status: 'active',\n    price: '$49',\n    period: 'month',\n    nextBilling: 'November 14, 2025',\n    seats: 5,\n  }\n\n  const invoices = [\n    { id: 'INV-001', date: 'Oct 14, 2025', amount: '$49.00', status: 'Paid', url: '#' },\n    { id: 'INV-002', date: 'Sep 14, 2025', amount: '$49.00', status: 'Paid', url: '#' },\n    { id: 'INV-003', date: 'Aug 14, 2025', amount: '$49.00', status: 'Paid', url: '#' },\n    { id: 'INV-004', date: 'Jul 14, 2025', amount: '$49.00', status: 'Paid', url: '#' },\n  ]\n\n  const paymentMethod = {\n    type: 'Visa',\n    last4: '4242',\n    expiry: '12/2026',\n  }\n\n  const plans = [\n    {\n      name: 'Starter',\n      price: '$19',\n      period: 'month',\n      features: ['Up to 10,000 API calls/month', '5 GB storage', '1 team seat', 'Email support'],\n      current: false,\n    },\n    {\n      name: 'Professional',\n      price: '$49',\n      period: 'month',\n      features: ['Up to 100,000 API calls/month', '50 GB storage', '5 team seats', 'Priority support', 'Advanced analytics'],\n      current: true,\n      popular: true,\n    },\n    {\n      name: 'Enterprise',\n      price: '$199',\n      period: 'month',\n      features: ['Unlimited API calls', '500 GB storage', 'Unlimited team seats', '24/7 phone support', 'Custom integrations', 'SLA guarantee'],\n      current: false,\n    },\n  ]\n\n  const tabs = [\n    {\n      id: 'subscription',\n      label: 'Subscription',\n      content: (\n        <div className=\"space-y-6\">\n          {/* Current Plan */}\n          <div className=\"space-y-4\">\n            <div>\n              <div className=\"flex items-start justify-between mb-4\">\n                <div>\n                  <h3 className=\"text-lg font-semibold mb-2\">Current Plan</h3>\n                  <div className=\"flex items-baseline gap-2\">\n                    <span className=\"text-3xl font-bold\">{subscription.price}</span>\n                    <span className=\"text-gray-600 dark:text-gray-400\">/ {subscription.period}</span>\n                  </div>\n                  <p className=\"mt-2 text-sm text-gray-600 dark:text-gray-400\">\n                    {subscription.plan} Plan\n                  </p>\n                </div>\n                <span className=\"inline-flex items-center rounded-full bg-green-100 dark:bg-green-900/30 px-3 py-1 text-sm font-medium text-green-800 dark:text-green-300\">\n                  {subscription.status}\n                </span>\n              </div>\n\n              <div className=\"space-y-3 mb-4\">\n                <div className=\"flex justify-between text-sm\">\n                  <span className=\"text-gray-600 dark:text-gray-400\">Team seats</span>\n                  <span className=\"font-medium\">{subscription.seats}</span>\n                </div>\n                <div className=\"flex justify-between text-sm\">\n                  <span className=\"text-gray-600 dark:text-gray-400\">Next billing date</span>\n                  <span className=\"font-medium\">{subscription.nextBilling}</span>\n                </div>\n              </div>\n\n              <div className=\"flex gap-3\">\n                <button 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                  Upgrade Plan\n                </button>\n                <button 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                  Cancel\n                </button>\n              </div>\n            </div>\n\n            {/* Usage */}\n            <div>\n              <h3 className=\"text-lg font-semibold mb-4\">Usage This Month</h3>\n              <div className=\"space-y-4\">\n                <div>\n                  <div className=\"flex justify-between text-sm mb-2\">\n                    <span className=\"text-gray-600 dark:text-gray-400\">API Calls</span>\n                    <span className=\"font-medium\">45,231 / 100,000</span>\n                  </div>\n                  <div className=\"h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden\">\n                    <div className=\"h-full bg-blue-600\" style={{ width: '45%' }} />\n                  </div>\n                </div>\n                <div>\n                  <div className=\"flex justify-between text-sm mb-2\">\n                    <span className=\"text-gray-600 dark:text-gray-400\">Storage</span>\n                    <span className=\"font-medium\">12.4 GB / 50 GB</span>\n                  </div>\n                  <div className=\"h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden\">\n                    <div className=\"h-full bg-blue-600\" style={{ width: '25%' }} />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      ),\n    },\n    {\n      id: 'plans',\n      label: 'Plans',\n      content: (\n        <div className=\"space-y-6\">\n          <div>\n            <h3 className=\"text-lg font-semibold mb-2\">Choose Your Plan</h3>\n            <p className=\"text-sm text-gray-600 dark:text-gray-400 mb-6\">\n              Select the plan that best fits your needs. You can upgrade or downgrade at any time.\n            </p>\n          </div>\n\n          <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n            {plans.map((plan) => (\n              <div\n                key={plan.name}\n                className={`relative rounded-lg border-2 p-6 flex flex-col ${\n                  plan.current\n                    ? 'border-blue-600 dark:border-blue-500'\n                    : 'border-gray-200 dark:border-gray-700'\n                } ${plan.popular ? 'shadow-lg' : ''}`}\n              >\n                {plan.popular && (\n                  <div className=\"absolute -top-3 left-1/2 -translate-x-1/2\">\n                    <span className=\"bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full\">\n                      Most Popular\n                    </span>\n                  </div>\n                )}\n                {plan.current && (\n                  <div className=\"absolute -top-3 left-1/2 -translate-x-1/2\">\n                    <span className=\"bg-green-600 text-white text-xs font-semibold px-3 py-1 rounded-full\">\n                      Current Plan\n                    </span>\n                  </div>\n                )}\n\n                <div className=\"mb-6\">\n                  <h4 className=\"text-xl font-bold mb-2\">{plan.name}</h4>\n                  <div className=\"flex items-baseline gap-2\">\n                    <span className=\"text-3xl font-bold\">{plan.price}</span>\n                    <span className=\"text-gray-600 dark:text-gray-400\">/ {plan.period}</span>\n                  </div>\n                </div>\n\n                <ul className=\"space-y-3 mb-6 flex-1\">\n                  {plan.features.map((feature, idx) => (\n                    <li key={idx} className=\"flex items-start gap-2 text-sm\">\n                      <svg\n                        className=\"w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        viewBox=\"0 0 24 24\"\n                      >\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          strokeWidth={2}\n                          d=\"M5 13l4 4L19 7\"\n                        />\n                      </svg>\n                      <span className=\"text-gray-700 dark:text-gray-300\">{feature}</span>\n                    </li>\n                  ))}\n                </ul>\n\n                <button\n                  className={`w-full rounded-lg px-4 py-2 text-sm font-medium transition-colors ${\n                    plan.current\n                      ? 'bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 cursor-not-allowed'\n                      : 'bg-blue-600 text-white hover:bg-blue-700'\n                  }`}\n                  disabled={plan.current}\n                >\n                  {plan.current ? 'Current Plan' : 'Select Plan'}\n                </button>\n              </div>\n            ))}\n          </div>\n\n          <div className=\"bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4\">\n            <h4 className=\"font-semibold text-blue-900 dark:text-blue-100 mb-2\">\n              Need a custom solution?\n            </h4>\n            <p className=\"text-sm text-blue-800 dark:text-blue-200 mb-3\">\n              Contact our sales team for enterprise pricing and custom features tailored to your organization.\n            </p>\n            <button className=\"text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300\">\n              Contact Sales →\n            </button>\n          </div>\n        </div>\n      ),\n    },\n    {\n      id: 'invoices',\n      label: 'Invoices',\n      content: (\n        <div className=\"space-y-6\">\n          <div>\n            <h3 className=\"text-lg font-semibold mb-2\">Invoice History</h3>\n            <p className=\"text-sm text-gray-600 dark:text-gray-400 mb-6\">\n              View and download your past invoices\n            </p>\n          </div>\n\n          <div className=\"space-y-3\">\n            {invoices.map((invoice) => (\n              <div key={invoice.id} className=\"flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors\">\n                <div className=\"flex items-center gap-4\">\n                  <div className=\"h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center\">\n                    <svg className=\"w-5 h-5 text-blue-600 dark:text-blue-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                      <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\" />\n                    </svg>\n                  </div>\n                  <div>\n                    <div className=\"flex items-center gap-2\">\n                      <p className=\"font-medium text-sm\">{invoice.id}</p>\n                      <span className=\"inline-flex items-center rounded-full bg-green-100 dark:bg-green-900/30 px-2 py-0.5 text-xs font-medium text-green-800 dark:text-green-300\">\n                        {invoice.status}\n                      </span>\n                    </div>\n                    <p className=\"text-xs text-gray-600 dark:text-gray-400\">{invoice.date}</p>\n                  </div>\n                </div>\n                <div className=\"flex items-center gap-4\">\n                  <p className=\"font-semibold\">{invoice.amount}</p>\n                  <a\n                    href={invoice.url}\n                    className=\"text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium\"\n                  >\n                    Download\n                  </a>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      ),\n    },\n    {\n      id: 'payment',\n      label: 'Payment Method',\n      content: (\n        <div className=\"space-y-6\">\n          <PaymentMethodManager currentMethod={paymentMethod} />\n\n          {/* Payment History */}\n          <div>\n            <h3 className=\"text-lg font-semibold mb-4\">Recent Payments</h3>\n            <div className=\"space-y-3\">\n              {invoices.slice(0, 3).map((invoice) => (\n                <div key={invoice.id} className=\"flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg\">\n                  <div className=\"flex items-center gap-4\">\n                    <div className=\"h-10 w-10 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center\">\n                      <svg className=\"w-5 h-5 text-green-600 dark:text-green-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n                      </svg>\n                    </div>\n                    <div>\n                      <p className=\"font-medium text-sm\">Payment Successful</p>\n                      <p className=\"text-xs text-gray-600 dark:text-gray-400\">{invoice.date} - Invoice #{invoice.id}</p>\n                    </div>\n                  </div>\n                  <div className=\"text-right\">\n                    <p className=\"font-semibold\">{invoice.amount}</p>\n                    <p className=\"text-xs text-gray-600 dark:text-gray-400\">Visa •••• {paymentMethod.last4}</p>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      ),\n    },\n  ]\n\n  return (\n    <div className={className}>\n      <Tabs tabs={tabs} defaultTab=\"subscription\" />\n    </div>\n  )\n}\n"]}