twintrinsic 0.0.1

package/dist/components/Table/Table.svelte

@@ -0,0 +1,167 @@
+<!--
+@component
+Table - A component for displaying structured data in rows and columns.
+Provides accessible, responsive tables with sorting, selection, and pagination options.
+
+Usage:
+```svelte
+<Table>
+  <TableHead>
+    <TableRow>
+      <TableHeader>Name</TableHeader>
+      <TableHeader>Email</TableHeader>
+      <TableHeader>Role</TableHeader>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    <TableRow>
+      <TableCell>John Doe</TableCell>
+      <TableCell>john@example.com</TableCell>
+      <TableCell>Admin</TableCell>
+    </TableRow>
+    <!-- More rows --\>
+  </TableBody>
+</Table>
+```
+-->
+<script>
+import { setContext } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {boolean} - Whether the table has borders */
+  bordered = false,
+
+  /** @type {boolean} - Whether the table has striped rows */
+  striped = false,
+
+  /** @type {boolean} - Whether the table has hover effects on rows */
+  hoverable = false,
+
+  /** @type {boolean} - Whether the table is compact (less padding) */
+  compact = false,
+
+  /** @type {boolean} - Whether the table has a fixed layout */
+  fixed = false,
+
+  /** @type {boolean} - Whether the table is responsive (horizontal scrolling) */
+  responsive = true,
+
+  /** @type {string} - Caption for the table (for accessibility) */
+  caption,
+
+  /** @type {string} - ARIA description for the table */
+  ariaDescription,
+
+  children,
+} = $props()
+
+// Provide context for child components
+$effect(() => {
+  setContext("table", {
+    bordered,
+    striped,
+    hoverable,
+    compact,
+  })
+})
+</script>
+
+{#if responsive}
+  <div class="table-responsive">
+    <table
+      {id}
+      class="
+        table
+        {bordered ? 'table-bordered' : ''}
+        {striped ? 'table-striped' : ''}
+        {hoverable ? 'table-hoverable' : ''}
+        {compact ? 'table-compact' : ''}
+        {fixed ? 'table-fixed' : ''}
+        {className}
+      "
+      aria-describedby={ariaDescription ? `${id}-description` : undefined}
+    >
+      {#if caption}
+        <caption>{caption}</caption>
+      {/if}
+      
+      {@render children?.()}
+    </table>
+    
+    {#if ariaDescription}
+      <div id="{id}-description" class="sr-only">{ariaDescription}</div>
+    {/if}
+  </div>
+{:else}
+  <table
+    {id}
+    class="
+      table
+      {bordered ? 'table-bordered' : ''}
+      {striped ? 'table-striped' : ''}
+      {hoverable ? 'table-hoverable' : ''}
+      {compact ? 'table-compact' : ''}
+      {fixed ? 'table-fixed' : ''}
+      {className}
+    "
+    aria-describedby={ariaDescription ? `${id}-description` : undefined}
+  >
+    {#if caption}
+      <caption>{caption}</caption>
+    {/if}
+    
+    {@render children?.()}
+  </table>
+  
+  {#if ariaDescription}
+    <div id="{id}-description" class="sr-only">{ariaDescription}</div>
+  {/if}
+{/if}
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .table-responsive {
+    @apply w-full overflow-x-auto;
+  }
+  
+  .table {
+    @apply w-full border-collapse text-text dark:text-text;
+  }
+  
+  .table-fixed {
+    @apply table-fixed;
+  }
+  
+  .table-bordered {
+    @apply border border-border dark:border-border;
+  }
+  
+  .table-bordered :global(th),
+  .table-bordered :global(td) {
+    @apply border border-border dark:border-border;
+  }
+  
+  .table-striped :global(tbody tr:nth-child(odd)) {
+    @apply bg-surface dark:bg-surface;
+  }
+  
+  .table-hoverable :global(tbody tr) {
+    @apply hover:bg-hover dark:hover:bg-hover transition-colors duration-150;
+  }
+  
+  .table-compact :global(th),
+  .table-compact :global(td) {
+    @apply py-1 px-2;
+  }
+  
+  .table :global(caption) {
+    @apply caption-top text-muted dark:text-muted text-sm py-2;
+  }
+</style>

package/dist/components/Table/Table.svelte.d.ts

@@ -0,0 +1,56 @@
+export default Table;
+type Table = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Table - A component for displaying structured data in rows and columns.
+ * Provides accessible, responsive tables with sorting, selection, and pagination options.
+ *
+ * Usage:
+ * ```svelte
+ * <Table>
+ * <TableHead>
+ *   <TableRow>
+ *     <TableHeader>Name</TableHeader>
+ *     <TableHeader>Email</TableHeader>
+ *     <TableHeader>Role</TableHeader>
+ *   </TableRow>
+ * </TableHead>
+ * <TableBody>
+ *   <TableRow>
+ *     <TableCell>John Doe</TableCell>
+ *     <TableCell>john@example.com</TableCell>
+ *     <TableCell>Admin</TableCell>
+ *   </TableRow>
+ *   <!-- More rows --\>
+ * </TableBody>
+ * </Table>
+ * ```
+ */
+declare const Table: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    bordered?: boolean;
+    striped?: boolean;
+    hoverable?: boolean;
+    compact?: boolean;
+    fixed?: boolean;
+    responsive?: boolean;
+    caption: any;
+    ariaDescription: any;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    bordered?: boolean;
+    striped?: boolean;
+    hoverable?: boolean;
+    compact?: boolean;
+    fixed?: boolean;
+    responsive?: boolean;
+    caption: any;
+    ariaDescription: any;
+    children: any;
+};

package/dist/components/Table/TableBody.svelte

@@ -0,0 +1,41 @@
+<!--
+@component
+TableBody - A component for the body section of a Table.
+Provides consistent styling for the table body.
+
+Usage:
+```svelte
+<Table>
+  <TableHead>
+    <!-- Table header content --\>
+  </TableHead>
+  <TableBody>
+    <TableRow>
+      <TableCell>John Doe</TableCell>
+      <TableCell>john@example.com</TableCell>
+    </TableRow>
+    <!-- More rows --\>
+  </TableBody>
+</Table>
+```
+-->
+<script>
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  children,
+} = $props()
+</script>
+
+<tbody class="table-body {className}">
+  {@render children?.()}
+</tbody>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .table-body {
+    @apply bg-background dark:bg-background;
+  }
+</style>

package/dist/components/Table/TableBody.svelte.d.ts

@@ -0,0 +1,33 @@
+export default TableBody;
+type TableBody = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * TableBody - A component for the body section of a Table.
+ * Provides consistent styling for the table body.
+ *
+ * Usage:
+ * ```svelte
+ * <Table>
+ * <TableHead>
+ *   <!-- Table header content --\>
+ * </TableHead>
+ * <TableBody>
+ *   <TableRow>
+ *     <TableCell>John Doe</TableCell>
+ *     <TableCell>john@example.com</TableCell>
+ *   </TableRow>
+ *   <!-- More rows --\>
+ * </TableBody>
+ * </Table>
+ * ```
+ */
+declare const TableBody: import("svelte").Component<{
+    class?: string;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    children: any;
+};

package/dist/components/Table/TableCell.svelte

@@ -0,0 +1,76 @@
+<!--
+@component
+TableCell - A component for data cells within a Table.
+Provides consistent styling for table cells with alignment and truncation options.
+
+Usage:
+```svelte
+<TableCell>John Doe</TableCell>
+
+<TableCell align="right">$25.00</TableCell>
+
+<TableCell truncate>This is a very long text that will be truncated</TableCell>
+```
+-->
+<script>
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - Cell alignment (left, center, right) */
+  align = "left",
+
+  /** @type {boolean} - Whether to truncate overflowing text */
+  truncate = false,
+
+  /** @type {boolean} - Whether the cell contains numeric data */
+  numeric = false,
+
+  /** @type {number} - Number of columns this cell spans */
+  colspan,
+
+  /** @type {number} - Number of rows this cell spans */
+  rowspan,
+
+  children,
+
+  ...restProps
+} = $props()
+
+// Determine alignment classes
+const alignClasses = $derived(
+  {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+  }[align] || "text-left"
+)
+</script>
+
+<td
+  class="
+    table-cell
+    {alignClasses}
+    {truncate ? 'truncate' : ''}
+    {numeric ? 'font-mono tabular-nums' : ''}
+    {className}
+  "
+  colspan={colspan}
+  rowspan={rowspan}
+  {...restProps}
+>
+  {@render children?.()}
+</td>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .table-cell {
+    @apply py-3 px-4 text-text dark:text-text;
+    @apply border-t border-border dark:border-border;
+  }
+  
+  .truncate {
+    @apply max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap;
+  }
+</style>

package/dist/components/Table/TableCell.svelte.d.ts

@@ -0,0 +1,36 @@
+export default TableCell;
+type TableCell = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * TableCell - A component for data cells within a Table.
+ * Provides consistent styling for table cells with alignment and truncation options.
+ *
+ * Usage:
+ * ```svelte
+ * <TableCell>John Doe</TableCell>
+ *
+ * <TableCell align="right">$25.00</TableCell>
+ *
+ * <TableCell truncate>This is a very long text that will be truncated</TableCell>
+ * ```
+ */
+declare const TableCell: import("svelte").Component<{
+    class?: string;
+    align?: string;
+    truncate?: boolean;
+    numeric?: boolean;
+    colspan: any;
+    rowspan: any;
+    children: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    align?: string;
+    truncate?: boolean;
+    numeric?: boolean;
+    colspan: any;
+    rowspan: any;
+    children: any;
+} & Record<string, any>;

package/dist/components/Table/TableHead.svelte

@@ -0,0 +1,41 @@
+<!--
+@component
+TableHead - A component for the header section of a Table.
+Provides consistent styling for the table header.
+
+Usage:
+```svelte
+<Table>
+  <TableHead>
+    <TableRow>
+      <TableHeader>Name</TableHeader>
+      <TableHeader>Email</TableHeader>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    <!-- Table body content --\>
+  </TableBody>
+</Table>
+```
+-->
+<script>
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  children,
+} = $props()
+</script>
+
+<thead class="table-head {className}">
+  {@render children?.()}
+</thead>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .table-head {
+    @apply bg-surface dark:bg-surface text-text dark:text-text;
+    @apply border-b border-border dark:border-border;
+  }
+</style>

package/dist/components/Table/TableHead.svelte.d.ts

@@ -0,0 +1,32 @@
+export default TableHead;
+type TableHead = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * TableHead - A component for the header section of a Table.
+ * Provides consistent styling for the table header.
+ *
+ * Usage:
+ * ```svelte
+ * <Table>
+ * <TableHead>
+ *   <TableRow>
+ *     <TableHeader>Name</TableHeader>
+ *     <TableHeader>Email</TableHeader>
+ *   </TableRow>
+ * </TableHead>
+ * <TableBody>
+ *   <!-- Table body content --\>
+ * </TableBody>
+ * </Table>
+ * ```
+ */
+declare const TableHead: import("svelte").Component<{
+    class?: string;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    children: any;
+};

package/dist/components/Table/TableHeader.svelte

@@ -0,0 +1,148 @@
+<!--
+@component
+TableHeader - A component for header cells within a Table.
+Provides consistent styling for table headers with sorting capabilities.
+
+Usage:
+```svelte
+<TableHeader>Name</TableHeader>
+
+<TableHeader sortable sortDirection="asc" onsort={handleSort}>
+  Age
+</TableHeader>
+
+<TableHeader align="right">Actions</TableHeader>
+```
+-->
+<script>
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - Column alignment (left, center, right) */
+  align = "left",
+
+  /** @type {boolean} - Whether the column is sortable */
+  sortable = false,
+
+  /** @type {string} - Sort direction (asc, desc, none) */
+  sortDirection = "none",
+
+  /** @type {string} - Column scope (col, row) */
+  scope = "col",
+
+  /** @type {string} - Column width (e.g., '200px', '25%') */
+  width,
+
+  /** @type {boolean} - Whether to truncate overflowing text */
+  truncate = false,
+
+  /** @type {(event: CustomEvent) => void} - Sort event handler */
+  onsort,
+
+  children,
+  /** @type {object} - Additional props to pass to the input element */
+  ...restProps
+} = $props()
+
+/**
+ * Handles sort click
+ */
+function handleSort() {
+  if (!sortable) return
+
+  // Determine next sort direction
+  let nextDirection
+
+  switch (sortDirection) {
+    case "asc":
+      nextDirection = "desc"
+      break
+    case "desc":
+      nextDirection = "none"
+      break
+    default:
+      nextDirection = "asc"
+  }
+
+  onsort?.(new CustomEvent("sort", { detail: { direction: nextDirection } }))
+}
+
+// Determine alignment classes
+const alignClasses = $derived(
+  {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+  }[align] || "text-left"
+)
+</script>
+
+<th
+  class="
+    table-header
+    {alignClasses}
+    {sortable ? 'table-header-sortable' : ''}
+    {truncate ? 'truncate' : ''}
+    {className}
+  "
+  {scope}
+  style={width ? `width: ${width}` : undefined}
+  aria-sort={sortable ? (sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none') : undefined}
+  onclick={sortable ? handleSort : undefined}
+  {...restProps}
+>
+  <div class="table-header-content">
+    <span class="table-header-text">
+      {@render children?.()}
+    </span>
+    
+    {#if sortable}
+      <span class="table-sort-icon" aria-hidden="true">
+        {#if sortDirection === 'asc'}
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
+          </svg>
+        {:else if sortDirection === 'desc'}
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+          </svg>
+        {:else}
+          <svg class="w-4 h-4 opacity-0 hover:opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
+          </svg>
+        {/if}
+      </span>
+    {/if}
+  </div>
+</th>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .table-header {
+    @apply py-3 px-4 font-medium;
+    @apply bg-surface dark:bg-surface text-text dark:text-text;
+  }
+  
+  .table-header-content {
+    @apply flex items-center gap-1;
+  }
+  
+  .table-header-sortable {
+    @apply cursor-pointer select-none;
+    @apply hover:bg-hover dark:hover:bg-hover;
+  }
+  
+  .table-header-text {
+    @apply flex-grow;
+  }
+  
+  .table-sort-icon {
+    @apply flex-shrink-0;
+  }
+  
+  .truncate {
+    @apply max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap;
+  }
+</style>

package/dist/components/Table/TableHeader.svelte.d.ts

@@ -0,0 +1,42 @@
+export default TableHeader;
+type TableHeader = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * TableHeader - A component for header cells within a Table.
+ * Provides consistent styling for table headers with sorting capabilities.
+ *
+ * Usage:
+ * ```svelte
+ * <TableHeader>Name</TableHeader>
+ *
+ * <TableHeader sortable sortDirection="asc" onsort={handleSort}>
+ * Age
+ * </TableHeader>
+ *
+ * <TableHeader align="right">Actions</TableHeader>
+ * ```
+ */
+declare const TableHeader: import("svelte").Component<{
+    class?: string;
+    align?: string;
+    sortable?: boolean;
+    sortDirection?: string;
+    scope?: string;
+    width: any;
+    truncate?: boolean;
+    onsort: any;
+    children: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    align?: string;
+    sortable?: boolean;
+    sortDirection?: string;
+    scope?: string;
+    width: any;
+    truncate?: boolean;
+    onsort: any;
+    children: any;
+} & Record<string, any>;