tonnam/feat(v2)/table component (#710)

* style(v2): add border color for header and row

* feat(v2): add storybook for table component

packages/ui/src/components/table/table-header.svelte

@@ -11,7 +11,7 @@
 
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <thead
-  class="{cn('[&_tr]:border-b bg-surface-container-lowest ', className)}"
+  class="{cn('[&_tr]:border-b-0  bg-surface-container-lowest ', className)}"
   {...$$restProps}
   on:click
   on:keydown

packages/ui/src/components/table/table-row.svelte

@@ -13,7 +13,7 @@
 
 <tr
   class="{cn(
-    'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors ',
+    'hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-b-surface-container-low transition-colors ',
     className,
   )}"
   {...$$restProps}

packages/ui/src/components/table/table.stories.svelte

@@ -0,0 +1,111 @@
+<script context="module" lang="ts">
+  import type { Meta } from '@storybook/svelte'
+
+  import * as Table from './index.js'
+
+  export const meta = {
+    title: 'Atom/Table',
+
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        description: {
+          component: `
+The **Table** component is used to render structured data in a tabular format.
+This example demonstrates the use of each sub-component:
+- **Table.Root**: The root container for the table.
+- **Table.Header**: The section for the table header, containing column labels.
+- **Table.Row**: Represents a row within either the header or the body.
+- **Table.Head**: Column headers, typically styled differently from body cells.
+- **Table.Body**: Contains the main content rows.
+- **Table.Cell**: Represents an individual data cell, with support for styling and spans.
+          `,
+        },
+      },
+    },
+    argTypes: {},
+  } satisfies Meta<Table.Root>
+</script>
+
+<script lang="ts">
+  import { Story } from '@storybook/addon-svelte-csf'
+</script>
+
+<!-- 👇 Each story then reuses that template -->
+<Story name="Normal Table">
+  <Table.Root>
+    <Table.Header>
+      <Table.Row>
+        <Table.Head>Invoice</Table.Head>
+        <Table.Head>Status</Table.Head>
+        <Table.Head>Method</Table.Head>
+        <Table.Head>Amount</Table.Head>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      <Table.Row class="border-b-0">
+        <Table.Cell rowspan="{2}">INV001</Table.Cell>
+        <Table.Cell>Paid</Table.Cell>
+        <Table.Cell>Credit Card</Table.Cell>
+        <Table.Cell>$250.00</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Unpaid</Table.Cell>
+        <Table.Cell>QR Code Promptpay</Table.Cell>
+        <Table.Cell>$1,250.00</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>INV002</Table.Cell>
+        <Table.Cell>Paid</Table.Cell>
+        <Table.Cell>Mobile Banking</Table.Cell>
+        <Table.Cell>$550.00</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table.Root>
+</Story>
+
+<Story name="Header">
+  <Table.Root>
+    <Table.Header>
+      <Table.Row>
+        <Table.Head>Invoice</Table.Head>
+        <Table.Head>Status</Table.Head>
+        <Table.Head>Method</Table.Head>
+        <Table.Head>Amount</Table.Head>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell></Table.Cell>
+        <Table.Cell></Table.Cell>
+        <Table.Cell></Table.Cell>
+        <Table.Cell></Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table.Root>
+</Story>
+
+<Story name="Body">
+  <Table.Root>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>INV001</Table.Cell>
+        <Table.Cell>Paid</Table.Cell>
+        <Table.Cell>Credit Card</Table.Cell>
+        <Table.Cell>$250.00</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>INV002</Table.Cell>
+        <Table.Cell>Unpaid</Table.Cell>
+        <Table.Cell>QR Code Promptpay</Table.Cell>
+        <Table.Cell>$1,250.00</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>INV003</Table.Cell>
+        <Table.Cell>Paid</Table.Cell>
+        <Table.Cell>Mobile Banking</Table.Cell>
+        <Table.Cell>$550.00</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table.Root>
+</Story>