@omnikit-js/ui 0.5.4 → 0.6.0

package/README.md

@@ -1,300 +1,145 @@
 # @omnikit-js/ui
 
-A comprehensive SaaS billing component for Next.js applications with Stripe integration. Built with React Server Components support and Tailwind CSS v4.
-
-## Features
-
-- 🚀 **Server Components Support** - Optimized for Next.js App Router
-- 💳 **Stripe Integration** - Complete payment processing and subscription management
-- 🎨 **Beautiful UI** - Built with Tailwind CSS v4 and Radix UI
-- 📊 **Usage Tracking** - Monitor and display resource usage
-- 🔄 **Subscription Management** - Handle upgrades, downgrades, and cancellations
-- 💰 **Payment Methods** - Add, remove, and manage multiple payment methods
-- 📜 **Billing History** - View and download past invoices
-- 🔐 **Secure** - Server-side API key handling
-- 🎯 **No Style Conflicts** - Prefixed CSS option to avoid conflicts with your app
+React component library for OmniKit serverless platform. Provides both server and client components for building data-driven applications.
 
 ## Installation
 
 ```bash
 npm install @omnikit-js/ui
+# or
+pnpm add @omnikit-js/ui
+# or
+yarn add @omnikit-js/ui
 ```
 
-## Usage
-
-### Option 1: Standard CSS (For Apps Without Tailwind)
-
-If your app doesn't use Tailwind CSS or you want to use the component's default styles:
-
-```javascript
-// Import the CSS in your app's entry point (e.g., _app.tsx or layout.tsx)
-import '@omnikit-js/ui/dist/styles.css'
+## Components
 
-// Use the component
-import { Billing } from '@omnikit-js/ui'
-
-export default function BillingPage() {
-  return (
-    <Billing 
-      userId="user_123"
-      apiUrl="https://your-api.com"
-      apiKey="your-api-key"
-    />
-  )
-}
-```
+### DataList
 
-### Option 2: Isolated CSS (Recommended for Apps With Style Conflicts)
+A server-side component that fetches and displays data from OmniKit API with zero client JavaScript.
 
-To completely isolate the component styles and avoid any conflicts:
+**Features:**
+- Server-side rendering (SSR)
+- Automatic data fetching from OmniKit `/data/{table}` endpoints
+- Support for filtering, sorting, pagination
+- Tailwind CSS styling (customizable)
+- TypeScript support
 
-```javascript
-// Import the isolated CSS version
-import '@omnikit-js/ui/dist/styles.isolated.css'
+**Usage:**
 
-// Use the component
-import { Billing } from '@omnikit-js/ui'
+```tsx
+import { DataList } from '@omnikit-js/ui'
 
-export default function BillingPage() {
+export default async function UsersPage() {
   return (
-    <Billing 
-      userId="user_123"
-      apiUrl="https://your-api.com"
-      apiKey="your-api-key"
+    <DataList
+      table="users"
+      baseUrl={process.env.OMNIKIT_BASE_URL!}
+      apiKey={process.env.OMNIKIT_API_KEY!}
+      columns={['name', 'email', 'created_at']}
+      filter={{ active: true }}
+      limit={20}
     />
   )
 }
 ```
 
-**Note:** The isolated version wraps all styles in `.omnikit-billing-component` and uses `!important` for critical styles like progress bars to prevent conflicts.
-
-### Next.js App Router Example
-
-```javascript
-// app/billing/page.tsx
-import '@omnikit-js/ui/dist/styles.isolated.css'
-import { Billing } from '@omnikit-js/ui'
-
-export default function BillingPage() {
-  return (
-    <main className="container mx-auto p-4">
-      <h1 className="text-2xl font-bold mb-6">Billing & Subscription</h1>
-      <Billing 
-        userId="user_123"
-        apiUrl={process.env.NEXT_PUBLIC_API_URL}
-        apiKey={process.env.API_KEY}
-      />
-    </main>
-  )
-}
-```
-
-### Next.js Pages Router Example
-
-```javascript
-// pages/_app.tsx
-import '@omnikit-js/ui/dist/styles.isolated.css'
-import type { AppProps } from 'next/app'
-
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
-}
-
-// pages/billing.tsx
-import { Billing } from '@omnikit-js/ui'
-
-export default function BillingPage() {
-  return (
-    <div className="container mx-auto p-4">
-      <h1 className="text-2xl font-bold mb-6">Billing & Subscription</h1>
-      <Billing 
-        userId="user_123"
-        apiUrl={process.env.NEXT_PUBLIC_API_URL}
-        apiKey={process.env.API_KEY}
-      />
-    </div>
-  )
-}
-```
-
-### Using Client Component Directly
-
-If you need to use the client component directly (e.g., in a client-side only context):
-
-```jsx
-'use client';
-
-import { BillingClient } from '@omnikit-js/ui';
-
-export default function ClientBillingPage({ customerData, pricingData, paymentMethods }) {
-  return (
-    <BillingClient 
-      customerData={customerData}
-      pricingData={pricingData}
-      paymentMethods={paymentMethods}
-      apiUrl="https://api.yourdomain.com"
-      apiKey="your-api-key"
-    />
-  );
-}
+**Props:**
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `table` | `string` | Yes | Table name to query |
+| `baseUrl` | `string` | Yes | OmniKit API base URL (e.g., `http://localhost:3000/omnikit`) |
+| `apiKey` | `string` | No | API Key for authentication |
+| `jwt` | `string` | No | JWT token (alternative to apiKey) |
+| `columns` | `Column[]` | Yes | Columns to display |
+| `keyField` | `string` | No | Row key field (default: `'id'`) |
+| `filter` | `object` | No | Query filter |
+| `sort` | `string` | No | Sort order (e.g., `'name:asc'`) |
+| `limit` | `number` | No | Max records to fetch |
+| `offset` | `number` | No | Pagination offset |
+| `className` | `string` | No | Custom container class |
+| `emptyMessage` | `string` | No | Message when no data |
+| `errorMessage` | `string` | No | Error message |
+
+**Custom Columns:**
+
+```tsx
+<DataList
+  table="users"
+  baseUrl={baseUrl}
+  apiKey={apiKey}
+  columns={[
+    'name',
+    'email',
+    {
+      key: 'created_at',
+      label: 'Joined',
+      render: (value) => new Date(value).toLocaleDateString(),
+    },
+    {
+      key: 'active',
+      label: 'Status',
+      render: (value) => value ? '✓ Active' : '✗ Inactive',
+    },
+  ]}
+/>
 ```
 
-## Resolving Style Conflicts
-
-If you experience style conflicts, especially with progress bars or grid layouts:
+## API Client
 
-### Progress Bar Color Conflicts
+Use the OmniKit client for custom data fetching:
 
-Override the progress bar styles in your global CSS:
+```tsx
+import { createOmniKitClient } from '@omnikit-js/ui'
 
-```css
-/* Force specific progress bar colors */
-.omnikit-progress-fill {
-  background-color: #3b82f6 !important;
-}
+const client = createOmniKitClient({
+  baseUrl: 'http://localhost:3000/omnikit',
+  apiKey: 'your-api-key',
+})
 
-/* Or for dark mode */
-@media (prefers-color-scheme: dark) {
-  .omnikit-progress-fill {
-    background-color: #60a5fa !important;
-  }
-}
-```
+// Query data
+const users = await client.query('users', {
+  filter: { active: true },
+  sort: 'name:asc',
+  limit: 10,
+})
 
-### Grid Layout Conflicts
+// Find by ID
+const user = await client.findById('users', '123')
 
-Wrap the component in a scoped container to isolate styles:
-
-```css
-/* Create an isolation container */
-.billing-wrapper {
-  /* Reset conflicting styles */
-  all: initial;
-  font-family: inherit;
-  color: inherit;
-}
-
-.billing-wrapper * {
-  box-sizing: border-box;
-}
+// Insert
+await client.insert('users', { name: 'John', email: 'john@example.com' })
 
-/* Fix specific grid issues */
-.billing-wrapper .omnikit-pricing-grid {
-  display: grid !important;
-  gap: 1rem !important;
-}
-```
+// Update
+await client.update('users', '123', { name: 'Jane' })
 
-```javascript
-<div className="billing-wrapper">
-  <Billing userId="user_123" />
-</div>
+// Delete
+await client.delete('users', '123')
 ```
 
-## Component Props
-
-### Billing (Server Component)
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| userId | string | required | The user ID to fetch billing data for |
-| apiUrl | string | `process.env.NEXT_PUBLIC_API_URL` | The API base URL |
-| apiKey | string | `process.env.API_KEY` | The API key for authentication |
-| projectId | string | `process.env.NEXT_PUBLIC_API_PROJECT` | The project ID for multi-tenant support |
-
-### BillingClient (Client Component)
+## Development
 
-| Prop | Type | Description |
-|------|------|-------------|
-| customerData | object | Customer data including subscriptions and usage |
-| pricingData | object | Available pricing plans and products |
-| paymentMethods | object | User's payment methods |
-| apiUrl | string | The API base URL |
-| apiKey | string | The API key for authentication |
+### Quick Start
 
-## Environment Variables
+Run library watch build + demo app:
 
-Create a `.env.local` file in your Next.js project:
-
-```env
-# API Configuration
-NEXT_PUBLIC_API_URL=http://localhost:3000
-API_KEY=your-secret-api-key
-
-# Stripe Configuration
-NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_your_publishable_key
-
-# Project Configuration (optional)
-NEXT_PUBLIC_API_PROJECT=1
+```bash
+cd /Users/marcoschwartz/Documents/code/frontends/omnikit/omnikit-ui
+./dev.sh
 ```
 
-## API Endpoints
+Visit: **http://localhost:3060**
 
-The component expects the following API endpoints:
+See [QUICKSTART.md](QUICKSTART.md) for detailed instructions.
 
-- `GET /billing/customers/:userId` - Fetch customer data
-- `GET /billing/prices?project_id=:projectId` - Fetch pricing plans
-- `GET /billing/payment-methods?user_id=:userId` - Fetch payment methods
-- `POST /billing/setup-intent` - Create Stripe setup intent
-- `POST /billing/subscriptions` - Create subscription
-- `DELETE /billing/subscriptions/:id` - Cancel subscription
-- `POST /billing/payment-methods/:id/default` - Set default payment method
-- `DELETE /billing/payment-methods/:id` - Delete payment method
+### Tech Stack
 
-## Troubleshooting
-
-### Common Issues and Solutions
-
-1. **Progress bar showing wrong color**
-   - Use the prefixed CSS version
-   - Override `.omnikit-progress-fill` with `!important`
-
-2. **Grid layout breaking on pricing page**
-   - Check for global grid styles in your app
-   - Use the isolation container approach shown above
-   - Ensure no conflicting CSS Grid properties
-
-3. **Modal z-index conflicts**
-   - Component modals use `z-50` (z-index: 50)
-   - Adjust your app's z-index scale if needed
-
-4. **Font inconsistencies**
-   - The component inherits font-family
-   - Set font on a parent element
-
-5. **Styles not loading**
-   - Ensure you're importing the CSS file
-   - Check the correct path: `@omnikit-js/ui/dist/styles.css` or `@omnikit-js/ui/dist/styles.isolated.css`
-   - For apps with style conflicts, use the isolated version
-
-## Version History
-
-- **0.5.3** - Added isolated CSS option for better style conflict resolution
-- **0.5.2** - Fixed CSS exports in package.json
-- **0.5.1** - Tailwind CSS v4 support with prefix option
-- **0.3.5** - Previous version with Tailwind CSS v3
-
-## Browser Support
-
-Requires modern browsers:
-- Safari 16.4+
-- Chrome 111+
-- Firefox 128+
-
-For older browser support, use version 0.3.5.
-
-## TypeScript
-
-The package includes TypeScript definitions. No additional setup required.
+- **React 18/19** - Peer dependency
+- **TypeScript** - Full type safety
+- **Tailwind CSS v4** - Styling (requires Tailwind in your project)
+- **tsup** - Build tooling
 
 ## License
 
 MIT
-
-## Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.
-
-## Support
-
-For issues and feature requests, please use the [GitHub issue tracker](https://github.com/omnikit-ui/billing/issues).

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

@@ -0,0 +1,7 @@
+/**
+ * Client Components
+ * These components run on the client side
+ */
+declare const OMNIKIT_CLIENT_VERSION = "0.1.0";
+
+export { OMNIKIT_CLIENT_VERSION };

package/dist/components/client/index.mjs

@@ -0,0 +1,6 @@
+// src/components/client/index.ts
+var OMNIKIT_CLIENT_VERSION = "0.1.0";
+
+export { OMNIKIT_CLIENT_VERSION };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +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"]}

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

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

package/dist/components/server/index.mjs

@@ -0,0 +1,201 @@
+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 };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +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"]}