kynjal-cli 2.0.6

package/dist/templates/demo/table/table-pagination.tsx

@@ -0,0 +1,114 @@
+import { Table, TableColumn } from '@/components/ui/table';
+import React from 'react';
+
+interface Order {
+  id: string;
+  customer: string;
+  product: string;
+  amount: number;
+  date: string;
+  status: 'Pending' | 'Completed' | 'Cancelled';
+}
+
+// Generate sample data
+const generateOrders = (count: number): Order[] => {
+  const customers = [
+    'John Doe',
+    'Jane Smith',
+    'Bob Johnson',
+    'Alice Brown',
+    'Charlie Wilson',
+    'Diana Ross',
+    'Frank Miller',
+    'Grace Lee',
+  ];
+  const products = [
+    'Laptop',
+    'Mouse',
+    'Keyboard',
+    'Monitor',
+    'Headphones',
+    'Webcam',
+    'Tablet',
+    'Phone',
+  ];
+  const statuses: Order['status'][] = ['Pending', 'Completed', 'Cancelled'];
+
+  return Array.from({ length: count }, (_, i) => ({
+    id: `ORD-${String(i + 1).padStart(4, '0')}`,
+    customer: customers[i % customers.length],
+    product: products[i % products.length],
+    amount: Math.floor(Math.random() * 1000) + 50,
+    date: new Date(Date.now() - Math.random() * 90 * 24 * 60 * 60 * 1000)
+      .toISOString()
+      .split('T')[0],
+    status: statuses[Math.floor(Math.random() * statuses.length)],
+  }));
+};
+
+const orders = generateOrders(50);
+
+const columns: TableColumn<Order>[] = [
+  {
+    id: 'id',
+    header: 'Order ID',
+    accessorKey: 'id',
+    sortable: true,
+    filterable: true,
+    minWidth: 120,
+  },
+  {
+    id: 'customer',
+    header: 'Customer',
+    accessorKey: 'customer',
+    sortable: true,
+    filterable: true,
+    minWidth: 150,
+  },
+  {
+    id: 'product',
+    header: 'Product',
+    accessorKey: 'product',
+    sortable: true,
+    filterable: true,
+    minWidth: 120,
+  },
+  {
+    id: 'amount',
+    header: 'Amount',
+    accessorKey: 'amount',
+    sortable: true,
+    align: 'right',
+    minWidth: 100,
+    cell: (value) => `$${value.toFixed(2)}`,
+  },
+  {
+    id: 'date',
+    header: 'Date',
+    accessorKey: 'date',
+    sortable: true,
+    align: 'center',
+    minWidth: 120,
+  },
+  {
+    id: 'status',
+    header: 'Status',
+    accessorKey: 'status',
+    sortable: true,
+    filterable: true,
+    align: 'center',
+    minWidth: 120,
+  },
+];
+
+export function TablePagination() {
+  return (
+    <Table
+      data={orders}
+      columns={columns}
+      pageSize={8}
+      searchPlaceholder='Search orders...'
+      pagination={true}
+    />
+  );
+}

package/dist/templates/demo/table/table-search.tsx

@@ -0,0 +1,168 @@
+import { Table, TableColumn } from '@/components/ui/table';
+import React from 'react';
+
+interface Book {
+  id: number;
+  title: string;
+  author: string;
+  genre: string;
+  year: number;
+  isbn: string;
+  pages: number;
+}
+
+const books: Book[] = [
+  {
+    id: 1,
+    title: 'The Great Gatsby',
+    author: 'F. Scott Fitzgerald',
+    genre: 'Fiction',
+    year: 1925,
+    isbn: '978-0-7432-7356-5',
+    pages: 180,
+  },
+  {
+    id: 2,
+    title: 'To Kill a Mockingbird',
+    author: 'Harper Lee',
+    genre: 'Fiction',
+    year: 1960,
+    isbn: '978-0-06-112008-4',
+    pages: 281,
+  },
+  {
+    id: 3,
+    title: '1984',
+    author: 'George Orwell',
+    genre: 'Dystopian',
+    year: 1949,
+    isbn: '978-0-452-28423-4',
+    pages: 328,
+  },
+  {
+    id: 4,
+    title: 'Pride and Prejudice',
+    author: 'Jane Austen',
+    genre: 'Romance',
+    year: 1813,
+    isbn: '978-0-14-143951-8',
+    pages: 432,
+  },
+  {
+    id: 5,
+    title: 'The Catcher in the Rye',
+    author: 'J.D. Salinger',
+    genre: 'Fiction',
+    year: 1951,
+    isbn: '978-0-316-76948-0',
+    pages: 277,
+  },
+  {
+    id: 6,
+    title: 'Lord of the Flies',
+    author: 'William Golding',
+    genre: 'Fiction',
+    year: 1954,
+    isbn: '978-0-571-05686-2',
+    pages: 224,
+  },
+  {
+    id: 7,
+    title: 'The Hobbit',
+    author: 'J.R.R. Tolkien',
+    genre: 'Fantasy',
+    year: 1937,
+    isbn: '978-0-547-92822-7',
+    pages: 366,
+  },
+  {
+    id: 8,
+    title: "Harry Potter and the Sorcerer's Stone",
+    author: 'J.K. Rowling',
+    genre: 'Fantasy',
+    year: 1997,
+    isbn: '978-0-439-70818-8',
+    pages: 309,
+  },
+  {
+    id: 9,
+    title: 'The Da Vinci Code',
+    author: 'Dan Brown',
+    genre: 'Mystery',
+    year: 2003,
+    isbn: '978-0-307-47427-5',
+    pages: 689,
+  },
+  {
+    id: 10,
+    title: 'Brave New World',
+    author: 'Aldous Huxley',
+    genre: 'Science Fiction',
+    year: 1932,
+    isbn: '978-0-06-085052-4',
+    pages: 268,
+  },
+];
+
+const columns: TableColumn<Book>[] = [
+  {
+    id: 'title',
+    header: 'Title',
+    accessorKey: 'title',
+    sortable: true,
+    filterable: true,
+    minWidth: 200,
+  },
+  {
+    id: 'author',
+    header: 'Author',
+    accessorKey: 'author',
+    sortable: true,
+    filterable: true,
+    minWidth: 150,
+  },
+  {
+    id: 'genre',
+    header: 'Genre',
+    accessorKey: 'genre',
+    sortable: true,
+    filterable: true,
+    minWidth: 120,
+  },
+  {
+    id: 'year',
+    header: 'Year',
+    accessorKey: 'year',
+    sortable: true,
+    align: 'center',
+    minWidth: 80,
+  },
+  {
+    id: 'isbn',
+    header: 'ISBN',
+    accessorKey: 'isbn',
+    filterable: true,
+    minWidth: 150,
+  },
+  {
+    id: 'pages',
+    header: 'Pages',
+    accessorKey: 'pages',
+    sortable: true,
+    align: 'right',
+    minWidth: 80,
+  },
+];
+
+export function TableSearch() {
+  return (
+    <Table
+      data={books}
+      columns={columns}
+      pageSize={6}
+      searchPlaceholder='Search books by title, author, genre, or ISBN...'
+      searchable={true}
+      filterable={true}
+    />
+  );
+}

package/dist/templates/demo/table/table-sortable.tsx

@@ -0,0 +1,119 @@
+import { Table, TableColumn } from '@/components/ui/table';
+import React from 'react';
+
+interface Product {
+  id: number;
+  name: string;
+  price: number;
+  category: string;
+  inStock: boolean;
+  rating: number;
+}
+
+const products: Product[] = [
+  {
+    id: 1,
+    name: 'Laptop Pro',
+    price: 1299.99,
+    category: 'Electronics',
+    inStock: true,
+    rating: 4.5,
+  },
+  {
+    id: 2,
+    name: 'Wireless Mouse',
+    price: 29.99,
+    category: 'Electronics',
+    inStock: true,
+    rating: 4.2,
+  },
+  {
+    id: 3,
+    name: 'Coffee Mug',
+    price: 12.99,
+    category: 'Kitchen',
+    inStock: false,
+    rating: 4.0,
+  },
+  {
+    id: 4,
+    name: 'Desk Chair',
+    price: 199.99,
+    category: 'Furniture',
+    inStock: true,
+    rating: 4.7,
+  },
+  {
+    id: 5,
+    name: 'Notebook',
+    price: 5.99,
+    category: 'Office',
+    inStock: true,
+    rating: 3.8,
+  },
+  {
+    id: 6,
+    name: 'Smartphone',
+    price: 699.99,
+    category: 'Electronics',
+    inStock: true,
+    rating: 4.3,
+  },
+];
+
+const columns: TableColumn<Product>[] = [
+  {
+    id: 'name',
+    header: 'Product Name',
+    accessorKey: 'name',
+    sortable: true,
+    filterable: true,
+    minWidth: 150,
+  },
+  {
+    id: 'price',
+    header: 'Price',
+    accessorKey: 'price',
+    sortable: true,
+    align: 'right',
+    cell: (value) => `$${value.toFixed(2)}`,
+    minWidth: 100,
+  },
+  {
+    id: 'category',
+    header: 'Category',
+    accessorKey: 'category',
+    sortable: true,
+    filterable: true,
+    minWidth: 120,
+  },
+  {
+    id: 'inStock',
+    header: 'In Stock',
+    accessorKey: 'inStock',
+    sortable: true,
+    align: 'center',
+    cell: (value) => (value ? '✅' : '❌'),
+    minWidth: 100,
+  },
+  {
+    id: 'rating',
+    header: 'Rating',
+    accessorKey: 'rating',
+    sortable: true,
+    align: 'center',
+    cell: (value) => `⭐ ${value}`,
+    minWidth: 100,
+  },
+];
+
+export function TableSortable() {
+  return (
+    <Table
+      data={products}
+      columns={columns}
+      pageSize={4}
+      searchPlaceholder='Search products...'
+    />
+  );
+}

package/dist/templates/demo/tabs/tabs-demo.tsx

@@ -0,0 +1,85 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function TabsDemo() {
+  return (
+    <Tabs defaultValue='account' style={{ width: 400 }}>
+      <TabsList>
+        <TabsTrigger value='account'>Account</TabsTrigger>
+        <TabsTrigger value='followers'>Followers</TabsTrigger>
+        <TabsTrigger value='following'>Following</TabsTrigger>
+        <TabsTrigger value='password'>Password</TabsTrigger>
+        <TabsTrigger value='settings'>Settings</TabsTrigger>
+        <TabsTrigger value='more'>More</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value='account'>
+        <View style={{ paddingHorizontal: 16 }}>
+          <Text variant='title' style={{ marginBottom: 8 }}>
+            Account Settings
+          </Text>
+          <Text variant='body'>
+            Manage your account information and preferences here.
+          </Text>
+        </View>
+      </TabsContent>
+
+      <TabsContent value='followers'>
+        <View style={{ paddingHorizontal: 16 }}>
+          <Text variant='title' style={{ marginBottom: 8 }}>
+            Followers
+          </Text>
+          <Text variant='body'>
+            Manage your followers information and preferences here.
+          </Text>
+        </View>
+      </TabsContent>
+
+      <TabsContent value='following'>
+        <View style={{ paddingHorizontal: 16 }}>
+          <Text variant='title' style={{ marginBottom: 8 }}>
+            Following
+          </Text>
+          <Text variant='body'>
+            Manage your following information and preferences here.
+          </Text>
+        </View>
+      </TabsContent>
+
+      <TabsContent value='password'>
+        <View style={{ paddingHorizontal: 16 }}>
+          <Text variant='title' style={{ marginBottom: 8 }}>
+            Password Settings
+          </Text>
+          <Text variant='body'>
+            Change your password and security settings preferences here.
+          </Text>
+        </View>
+      </TabsContent>
+
+      <TabsContent value='settings'>
+        <View style={{ paddingHorizontal: 16 }}>
+          <Text variant='title' style={{ marginBottom: 8 }}>
+            General Settings
+          </Text>
+          <Text variant='body'>
+            Configure your application preferences and options.
+          </Text>
+        </View>
+      </TabsContent>
+
+      <TabsContent value='more'>
+        <View style={{ paddingHorizontal: 16 }}>
+          <Text variant='title' style={{ marginBottom: 8 }}>
+            More
+          </Text>
+          <Text variant='body'>
+            Configure your application preferences and options.
+          </Text>
+        </View>
+      </TabsContent>
+    </Tabs>
+  );
+}

package/dist/templates/demo/tabs/tabs-disabled.tsx

@@ -0,0 +1,61 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function TabsDisabled() {
+  return (
+    <Tabs defaultValue='available' style={{ width: 400 }}>
+      <TabsList>
+        <TabsTrigger value='available'>Available</TabsTrigger>
+        <TabsTrigger value='pending'>Pending</TabsTrigger>
+        <TabsTrigger value='premium' disabled>
+          Premium
+        </TabsTrigger>
+        <TabsTrigger value='enterprise' disabled>
+          Enterprise
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent value='available'>
+        <View style={{ padding: 16 }}>
+          <Text variant='title' style={{ marginBottom: 8 }}>
+            Available Features
+          </Text>
+          <Text variant='body'>
+            These features are currently available to you.
+          </Text>
+        </View>
+      </TabsContent>
+
+      <TabsContent value='pending'>
+        <View style={{ padding: 16 }}>
+          <Text variant='title' style={{ marginBottom: 8 }}>
+            Pending Features
+          </Text>
+          <Text variant='body'>
+            These features are being processed and will be available soon.
+          </Text>
+        </View>
+      </TabsContent>
+
+      <TabsContent value='premium'>
+        <View style={{ padding: 16 }}>
+          <Text variant='title' style={{ marginBottom: 8 }}>
+            Premium Features
+          </Text>
+          <Text variant='body'>Upgrade to access premium features.</Text>
+        </View>
+      </TabsContent>
+
+      <TabsContent value='enterprise'>
+        <View style={{ padding: 16 }}>
+          <Text variant='title' style={{ marginBottom: 8 }}>
+            Enterprise Features
+          </Text>
+          <Text variant='body'>Contact sales for enterprise features.</Text>
+        </View>
+      </TabsContent>
+    </Tabs>
+  );
+}

package/dist/templates/demo/tabs/tabs-styled.tsx

@@ -0,0 +1,105 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useState } from 'react';
+
+export function TabsStyled() {
+  const [value, setValue] = useState('design');
+
+  return (
+    <Tabs value={value} onValueChange={setValue}>
+      <TabsList
+        style={{
+          backgroundColor:
+            value === 'design'
+              ? '#3b82f6'
+              : value === 'development'
+              ? '#10b981'
+              : '#f59e0b',
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.1,
+          shadowRadius: 4,
+          elevation: 3,
+          borderRadius: 8,
+        }}
+      >
+        <TabsTrigger
+          value='design'
+          style={{ borderRadius: 8 }}
+          textStyle={{ fontWeight: '600', color: '#3b82f6' }}
+        >
+          Design
+        </TabsTrigger>
+        <TabsTrigger
+          value='development'
+          style={{ borderRadius: 8 }}
+          textStyle={{ fontWeight: '600', color: '#10b981' }}
+        >
+          Development
+        </TabsTrigger>
+        <TabsTrigger
+          value='testing'
+          style={{ borderRadius: 8 }}
+          textStyle={{ fontWeight: '600', color: '#f59e0b' }}
+        >
+          Testing
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent value='design'>
+        <View
+          style={{
+            padding: 20,
+            backgroundColor: '#eff6ff',
+            borderRadius: 12,
+            marginTop: 8,
+          }}
+        >
+          <Text variant='title' style={{ color: '#1e40af', marginBottom: 8 }}>
+            Design Phase
+          </Text>
+          <Text variant='body' style={{ color: '#1e40af' }}>
+            Create wireframes, mockups, and design systems for your project.
+          </Text>
+        </View>
+      </TabsContent>
+
+      <TabsContent value='development'>
+        <View
+          style={{
+            padding: 20,
+            backgroundColor: '#ecfdf5',
+            borderRadius: 12,
+            marginTop: 8,
+          }}
+        >
+          <Text variant='title' style={{ color: '#047857', marginBottom: 8 }}>
+            Development Phase
+          </Text>
+          <Text variant='body' style={{ color: '#047857' }}>
+            Build and implement the features based on the design specifications.
+          </Text>
+        </View>
+      </TabsContent>
+
+      <TabsContent value='testing'>
+        <View
+          style={{
+            padding: 20,
+            backgroundColor: '#fffbeb',
+            borderRadius: 12,
+            marginTop: 8,
+          }}
+        >
+          <Text variant='title' style={{ color: '#92400e', marginBottom: 8 }}>
+            Testing Phase
+          </Text>
+          <Text variant='body' style={{ color: '#92400e' }}>
+            Perform quality assurance and user acceptance testing.
+          </Text>
+        </View>
+      </TabsContent>
+    </Tabs>
+  );
+}