@idealyst/components 1.0.82 → 1.0.84

package/src/examples/TableExamples.tsx

@@ -0,0 +1,280 @@
+import React from 'react';
+import { Screen, View, Text, Badge, Button } from '@idealyst/components';
+import Table from '../Table';
+import type { TableColumn } from '../Table/types';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  status: 'active' | 'inactive';
+}
+
+interface Product {
+  id: number;
+  name: string;
+  category: string;
+  price: number;
+  stock: number;
+}
+
+export const TableExamples: React.FC = () => {
+  const users: User[] = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active' },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'inactive' },
+    { id: 4, name: 'Alice Williams', email: 'alice@example.com', role: 'Manager', status: 'active' },
+  ];
+
+  const products: Product[] = [
+    { id: 1, name: 'Laptop', category: 'Electronics', price: 999.99, stock: 15 },
+    { id: 2, name: 'Mouse', category: 'Electronics', price: 29.99, stock: 150 },
+    { id: 3, name: 'Keyboard', category: 'Electronics', price: 79.99, stock: 75 },
+    { id: 4, name: 'Monitor', category: 'Electronics', price: 299.99, stock: 30 },
+    { id: 5, name: 'Desk', category: 'Furniture', price: 399.99, stock: 10 },
+  ];
+
+  const userColumns: TableColumn<User>[] = [
+    {
+      key: 'name',
+      title: 'Name',
+      dataIndex: 'name',
+      width: '200px',
+    },
+    {
+      key: 'email',
+      title: 'Email',
+      dataIndex: 'email',
+    },
+    {
+      key: 'role',
+      title: 'Role',
+      dataIndex: 'role',
+      width: '120px',
+    },
+    {
+      key: 'status',
+      title: 'Status',
+      dataIndex: 'status',
+      width: '100px',
+      render: (status: string) => (
+        <Badge
+          type="filled"
+          color={status === 'active' ? 'green' : 'gray'}
+        >
+          {status}
+        </Badge>
+      ),
+    },
+  ];
+
+  const productColumns: TableColumn<Product>[] = [
+    {
+      key: 'name',
+      title: 'Product',
+      dataIndex: 'name',
+    },
+    {
+      key: 'category',
+      title: 'Category',
+      dataIndex: 'category',
+      width: '150px',
+    },
+    {
+      key: 'price',
+      title: 'Price',
+      dataIndex: 'price',
+      width: '120px',
+      align: 'right',
+      render: (price: number) => `$${price.toFixed(2)}`,
+    },
+    {
+      key: 'stock',
+      title: 'Stock',
+      dataIndex: 'stock',
+      width: '100px',
+      align: 'center',
+      render: (stock: number) => (
+        <Badge
+          type="filled"
+          color={stock > 50 ? 'green' : stock > 20 ? 'yellow' : 'red'}
+        >
+          {stock}
+        </Badge>
+      ),
+    },
+  ];
+
+  const actionColumns: TableColumn<User>[] = [
+    {
+      key: 'name',
+      title: 'Name',
+      dataIndex: 'name',
+    },
+    {
+      key: 'email',
+      title: 'Email',
+      dataIndex: 'email',
+    },
+    {
+      key: 'actions',
+      title: 'Actions',
+      width: '200px',
+      render: (_, user) => (
+        <View style={{ flexDirection: 'row', gap: 8 }}>
+          <Button size="sm" type="outlined" onPress={() => console.log('Edit', user.id)}>
+            Edit
+          </Button>
+          <Button size="sm" type="outlined" intent="error" onPress={() => console.log('Delete', user.id)}>
+            Delete
+          </Button>
+        </View>
+      ),
+    },
+  ];
+
+  return (
+    <Screen background="primary" padding="lg">
+    <View spacing="lg">
+      <Text size="xl" weight="bold">Table Examples</Text>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic Table</Text>
+        <Table columns={userColumns} data={users} />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Variants</Text>
+        <View spacing="sm">
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Default</Text>
+            <Table
+              columns={userColumns}
+              data={users}
+              type="standard"
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Bordered</Text>
+            <Table
+              columns={userColumns}
+              data={users}
+              type="bordered"
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Striped</Text>
+            <Table
+              columns={userColumns}
+              data={users}
+              type="striped"
+            />
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Sizes</Text>
+        <View spacing="sm">
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Small</Text>
+            <Table
+              columns={userColumns}
+              data={users.slice(0, 2)}
+              size="sm"
+              type="bordered"
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Medium (default)</Text>
+            <Table
+              columns={userColumns}
+              data={users.slice(0, 2)}
+              size="md"
+              type="bordered"
+            />
+          </View>
+          <View spacing="xs">
+            <Text size="sm" weight="medium">Large</Text>
+            <Table
+              columns={userColumns}
+              data={users.slice(0, 2)}
+              size="lg"
+              type="bordered"
+            />
+          </View>
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Custom Rendering</Text>
+        <Table columns={productColumns} data={products} type="striped" />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Clickable Rows</Text>
+        <Table
+          columns={userColumns}
+          data={users}
+          type="bordered"
+          onRowPress={(user) => console.log('Clicked user:', user)}
+        />
+        <Text size="sm" color="secondary">
+          Click any row to see console output
+        </Text>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Actions</Text>
+        <Table
+          columns={actionColumns}
+          data={users}
+          type="bordered"
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Column Alignment</Text>
+        <Table
+          columns={[
+            { key: 'name', title: 'Product', dataIndex: 'name', align: 'left' },
+            { key: 'category', title: 'Category', dataIndex: 'category', align: 'center', width: '150px' },
+            { key: 'price', title: 'Price', dataIndex: 'price', align: 'right', width: '120px', render: (price: number) => `$${price.toFixed(2)}` },
+          ]}
+          data={products.slice(0, 3)}
+          type="bordered"
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Fixed Column Widths</Text>
+        <Table
+          columns={[
+            { key: 'id', title: 'ID', dataIndex: 'id', width: '60px' },
+            { key: 'name', title: 'Name', dataIndex: 'name', width: '200px' },
+            { key: 'email', title: 'Email', dataIndex: 'email' },
+            { key: 'role', title: 'Role', dataIndex: 'role', width: '120px' },
+          ]}
+          data={users}
+          type="bordered"
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Empty Table</Text>
+        <Table
+          columns={userColumns}
+          data={[]}
+          type="bordered"
+        />
+        <Text size="sm" color="secondary">
+          No data to display
+        </Text>
+      </View>
+    </View>
+    </Screen>
+  );
+};
+
+export default TableExamples;

package/src/examples/TextAreaExamples.tsx

@@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+import { Screen, View, Text } from '@idealyst/components';
+import TextArea from '../TextArea';
+
+export const TextAreaExamples: React.FC = () => {
+  const [basicValue, setBasicValue] = useState('');
+  const [limitedValue, setLimitedValue] = useState('');
+  const [errorValue, setErrorValue] = useState('');
+  const [autoGrowValue, setAutoGrowValue] = useState('');
+
+  return (
+    <Screen background="primary" padding="lg">
+    <View spacing="lg">
+      <Text size="xl" weight="bold">TextArea Examples</Text>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Basic TextArea</Text>
+        <TextArea
+          value={basicValue}
+          onChange={setBasicValue}
+          placeholder="Enter your text here..."
+          rows={4}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Auto-Growing TextArea</Text>
+        <TextArea
+          label="Auto-grow with min/max height"
+          value={autoGrowValue}
+          onChange={setAutoGrowValue}
+          placeholder="Type multiple lines to see auto-grow in action..."
+          autoGrow
+          minHeight={60}
+          maxHeight={200}
+          helperText="This textarea grows as you type, up to 200px"
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Label</Text>
+        <TextArea
+          label="Description"
+          value={basicValue}
+          onChange={setBasicValue}
+          placeholder="Enter description..."
+          helperText="Provide a detailed description"
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Sizes</Text>
+        <View spacing="sm">
+          <TextArea
+            size="sm"
+            placeholder="Small textarea"
+            rows={3}
+          />
+          <TextArea
+            size="md"
+            placeholder="Medium textarea (default)"
+            rows={3}
+          />
+          <TextArea
+            size="lg"
+            placeholder="Large textarea"
+            rows={3}
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Intent Colors</Text>
+        <View spacing="sm">
+          <TextArea
+            intent="primary"
+            placeholder="Primary intent"
+            rows={2}
+          />
+          <TextArea
+            intent="success"
+            placeholder="Success intent"
+            rows={2}
+          />
+          <TextArea
+            intent="warning"
+            placeholder="Warning intent"
+            rows={2}
+          />
+          <TextArea
+            intent="neutral"
+            placeholder="Neutral intent"
+            rows={2}
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">With Character Limit</Text>
+        <TextArea
+          label="Limited Input"
+          value={limitedValue}
+          onChange={setLimitedValue}
+          placeholder="Maximum 100 characters"
+          maxLength={100}
+          showCharacterCount
+          rows={3}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Error State</Text>
+        <TextArea
+          label="Required Field"
+          value={errorValue}
+          onChange={setErrorValue}
+          placeholder="This field is required"
+          error="This field cannot be empty"
+          rows={3}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Resize Options</Text>
+        <View spacing="sm">
+          <TextArea
+            placeholder="Resize: none"
+            resize="none"
+            rows={2}
+          />
+          <TextArea
+            placeholder="Resize: vertical"
+            resize="vertical"
+            rows={2}
+          />
+          <TextArea
+            placeholder="Resize: horizontal"
+            resize="horizontal"
+            rows={2}
+          />
+          <TextArea
+            placeholder="Resize: both"
+            resize="both"
+            rows={2}
+          />
+        </View>
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Custom Styling</Text>
+        <TextArea
+          label="Monospace Font"
+          placeholder="Code or monospace text..."
+          textareaStyle={{ fontFamily: 'monospace' }}
+          rows={4}
+        />
+      </View>
+
+      <View spacing="md">
+        <Text size="lg" weight="semibold">Disabled State</Text>
+        <TextArea
+          label="Disabled"
+          value="This textarea is disabled"
+          disabled
+          rows={3}
+        />
+      </View>
+    </View>
+    </Screen>
+  );
+};
+
+export default TextAreaExamples;

package/src/examples/TextExamples.tsx

@@ -1,28 +1,27 @@
-import React from 'react';
 import { Screen, View, Text } from '../index';
 
 export const TextExamples = () => {
   return (
     <Screen background="primary" padding="lg">
       <View spacing="none">
-      <Text size="large" weight="bold" align="center">
+      <Text size="lg" weight="bold" align="center">
         Text Examples
       </Text>
-      
+
       {/* Text Sizes */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Sizes</Text>
+        <Text size="md" weight="semibold">Sizes</Text>
         <View spacing="sm" style={{ gap: 10 }}>
-          <Text size="small">Small text - Lorem ipsum dolor sit amet</Text>
-          <Text size="medium">Medium text - Lorem ipsum dolor sit amet</Text>
-          <Text size="large">Large text - Lorem ipsum dolor sit amet</Text>
-          <Text size="xlarge">Extra large text - Lorem ipsum dolor sit amet</Text>
+          <Text size="sm">Small text - Lorem ipsum dolor sit amet</Text>
+          <Text size="md">Medium text - Lorem ipsum dolor sit amet</Text>
+          <Text size="lg">Large text - Lorem ipsum dolor sit amet</Text>
+          <Text size="xl">Extra large text - Lorem ipsum dolor sit amet</Text>
         </View>
       </View>
 
       {/* Text Weights */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Weights</Text>
+        <Text size="md" weight="semibold">Weights</Text>
         <View spacing="sm" style={{ gap: 10 }}>
           <Text weight="light">Light weight text</Text>
           <Text weight="normal">Normal weight text</Text>
@@ -32,35 +31,35 @@ export const TextExamples = () => {
         </View>
       </View>
 
-      {/* Text Colors */}
+      {/* Semantic Text Colors */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Color Variants</Text>
+        <Text size="md" weight="semibold">Semantic Text Colors</Text>
         <View spacing="sm" style={{ gap: 10 }}>
-          <Text color="primary">Primary color text</Text>
-          <Text color="secondary">Secondary color text</Text>
-          <Text color="blue">Blue color text</Text>
-          <Text color="green">Green color text</Text>
-          <Text color="red">Red color text</Text>
-          <Text color="orange">Orange color text</Text>
+          <Text color="primary">Primary text - Main text color</Text>
+          <Text color="secondary">Secondary text - Subdued text</Text>
+          <Text color="tertiary">Tertiary text - More subdued text</Text>
         </View>
       </View>
 
-      {/* Text Color Shades */}
+      {/* Inverse Text Colors */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Color Shades</Text>
+        <Text size="md" weight="semibold">Inverse Text Colors (on dark backgrounds)</Text>
         <View spacing="sm" style={{ gap: 10 }}>
-          <Text color="blue.300">Blue 300 text</Text>
-          <Text color="blue.500">Blue 500 text</Text>
-          <Text color="blue.700">Blue 700 text</Text>
-          <Text color="red.200">Red 200 text</Text>
-          <Text color="red.600">Red 600 text</Text>
-          <Text color="red.900">Red 900 text</Text>
+          <View background="inverse" spacing="sm" radius="sm">
+            <Text color="inverse">Inverse (of primary) - Light text on dark background</Text>
+          </View>
+          <View background="inverse" spacing="sm" radius="sm">
+            <Text color="inverse-secondary">Inverse secondary (90% opacity)</Text>
+          </View>
+          <View background="inverse" spacing="sm" radius="sm">
+            <Text color="inverse-tertiary">Inverse tertiary (70% opacity)</Text>
+          </View>
         </View>
       </View>
 
       {/* Text Alignment */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Alignment</Text>
+        <Text size="md" weight="semibold">Alignment</Text>
         <View spacing="sm" style={{ gap: 10 }}>
           <Text align="left">Left aligned text</Text>
           <Text align="center">Center aligned text</Text>
@@ -70,17 +69,14 @@ export const TextExamples = () => {
 
       {/* Combined Examples */}
       <View spacing="md">
-        <Text size="medium" weight="semibold">Combined Examples</Text>
+        <Text size="md" weight="semibold">Combined Examples</Text>
         <View spacing="sm" style={{ gap: 10 }}>
-          <Text size="large" weight="bold" color="primary" align="center">
+          <Text size="lg" weight="bold" color="primary" align="center">
             Large Bold Primary Centered
           </Text>
-          <Text size="small" weight="light" color="secondary" align="right">
+          <Text size="sm" weight="light" color="secondary" align="right">
             Small Light Secondary Right
           </Text>
-          <Text size="medium" weight="semibold" color="green">
-            Medium Semibold Green
-          </Text>
         </View>
       </View>
     </View>

package/src/examples/ThemeExtensionExamples.tsx

@@ -5,13 +5,13 @@ export const ThemeExtensionExamples = () => {
   return (
     <Screen background="primary" padding="lg">
       <View spacing="lg">
-        <Text size="large" weight="bold" align="center">
+        <Text size="lg" weight="bold" align="center">
           Extended Theme Test
         </Text>
         
         {/* Extended Colors */}
         <View spacing="md">
-          <Text size="medium" weight="semibold">Extended Colors</Text>
+          <Text size="md" weight="semibold">Extended Colors</Text>
                      <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
              <Badge color={"orange" as any}>Orange</Badge>
              <Badge color={"teal" as any}>Teal</Badge>
@@ -31,7 +31,7 @@ export const ThemeExtensionExamples = () => {
 
         {/* Extended Intents */}
                           <View spacing="md">
-           <Text size="medium" weight="semibold">Extended Intents</Text>
+           <Text size="md" weight="semibold">Extended Intents</Text>
            <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
              <Button intent={"accent" as any}>Accent Button</Button>
              <Button intent={"feature" as any}>Feature Button</Button>
@@ -39,21 +39,21 @@ export const ThemeExtensionExamples = () => {
            </View>
            
            <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-             <Button intent={"accent" as any} variant="outlined">Accent Outlined</Button>
-             <Button intent={"feature" as any} variant="outlined">Feature Outlined</Button>
-             <Button intent={"highlight" as any} variant="outlined">Highlight Outlined</Button>
+             <Button intent={"accent" as any} type="outlined">Accent Outlined</Button>
+             <Button intent={"feature" as any} type="outlined">Feature Outlined</Button>
+             <Button intent={"highlight" as any} type="outlined">Highlight Outlined</Button>
            </View>
          </View>
 
          {/* Mixed Usage */}
          <View spacing="md">
-           <Text size="medium" weight="semibold">Mixed Extended Usage</Text>
+           <Text size="md" weight="semibold">Mixed Extended Usage</Text>
            
            <Card>
              <View spacing="sm">
                <Text color={"orange" as any} weight="bold">Orange Card Header</Text>
                <Text color="secondary">This card uses extended orange color for the header</Text>
-               <Button intent={"accent" as any} size="small">Accent Action</Button>
+               <Button intent={"accent" as any} size="sm">Accent Action</Button>
              </View>
            </Card>
            
@@ -61,14 +61,14 @@ export const ThemeExtensionExamples = () => {
              <View spacing="sm">
                <Text color={"teal" as any} weight="bold">Teal Card Header</Text>
                <Text color="secondary">This card uses extended teal color for the header</Text>
-               <Button intent={"feature" as any} size="small">Feature Action</Button>
+               <Button intent={"feature" as any} size="sm">Feature Action</Button>
              </View>
            </Card>
          </View>
 
          {/* Form with Extended Colors */}
          <View spacing="md">
-           <Text size="medium" weight="semibold">Form with Extended Styling</Text>
+           <Text size="md" weight="semibold">Form with Extended Styling</Text>
            
            <Input 
              placeholder="Input with accent intent"