twintrinsic 0.0.1

package/dist/components/Table/TableRow.svelte

@@ -0,0 +1,99 @@
+<!--
+@component
+TableRow - A component for a row within a Table.
+Provides consistent styling for table rows with selection and hover states.
+
+Usage:
+```svelte
+<TableRow>
+  <TableCell>John Doe</TableCell>
+  <TableCell>john@example.com</TableCell>
+</TableRow>
+
+<TableRow selected>
+  <TableCell>Selected Row</TableCell>
+  <TableCell>Data</TableCell>
+</TableRow>
+```
+-->
+<script>
+import { getContext } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {boolean} - Whether the row is selected */
+  selected = false,
+
+  /** @type {boolean} - Whether the row is disabled */
+  disabled = false,
+
+  /** @type {boolean} - Whether the row is clickable */
+  clickable = false,
+
+  /** @type {any} - Data associated with the row */
+  data,
+
+  /** @type {(event: CustomEvent) => void} - Click event handler */
+  onclick,
+
+  children,
+
+  /** @type {object} - Additional props to pass to the input element */
+  ...restProps
+} = $props()
+
+// Get table context if available
+const tableContext = getContext("table")
+
+// Determine if table has hover effect
+const hoverable = tableContext?.hoverable || false
+
+/**
+ * Handles row click
+ * @param {MouseEvent} event - Click event
+ */
+function handleClick(event) {
+  if (disabled) return
+
+  onclick?.(new CustomEvent("click", { detail: { event, row: data } }))
+}
+</script>
+
+<tr
+  class="
+    table-row
+    {selected ? 'table-row-selected' : ''}
+    {disabled ? 'table-row-disabled' : ''}
+    {clickable || restProps?.onclick ? 'table-row-clickable' : ''}
+    {hoverable ? 'table-row-hoverable' : ''}
+    {className}
+  "
+  aria-selected={selected ? 'true' : undefined}
+  aria-disabled={disabled ? 'true' : undefined}
+  onclick={handleClick}
+  {...restProps}
+>
+  {@render children?.()}
+</tr>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .table-row-selected {
+    @apply bg-primary-50 dark:bg-primary-900/20;
+  }
+  
+  .table-row-disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+  
+  .table-row-clickable {
+    @apply cursor-pointer;
+  }
+  
+  .table-row-hoverable {
+    @apply hover:bg-hover dark:hover:bg-hover transition-colors duration-150;
+  }
+</style>

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

@@ -0,0 +1,40 @@
+export default TableRow;
+type TableRow = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * TableRow - A component for a row within a Table.
+ * Provides consistent styling for table rows with selection and hover states.
+ *
+ * Usage:
+ * ```svelte
+ * <TableRow>
+ * <TableCell>John Doe</TableCell>
+ * <TableCell>john@example.com</TableCell>
+ * </TableRow>
+ *
+ * <TableRow selected>
+ * <TableCell>Selected Row</TableCell>
+ * <TableCell>Data</TableCell>
+ * </TableRow>
+ * ```
+ */
+declare const TableRow: import("svelte").Component<{
+    class?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    clickable?: boolean;
+    data: any;
+    onclick: any;
+    children: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    clickable?: boolean;
+    data: any;
+    onclick: any;
+    children: any;
+} & Record<string, any>;

package/dist/components/Tabs/Tab.svelte

@@ -0,0 +1,145 @@
+<!--
+@component
+Tab - An individual tab button within a TabList component.
+Provides the clickable interface for selecting tab panels.
+
+Usage:
+```svelte
+<Tab>Tab Label</Tab>
+
+<Tab disabled>Disabled Tab</Tab>
+
+<Tab icon="<svg>...</svg>">
+  Tab with Icon
+</Tab>
+```
+-->
+<script>
+import { getContext, onMount } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id,
+
+  /** @type {boolean} - Whether the tab is disabled */
+  disabled = false,
+
+  /** @type {string} - Icon to display (HTML or SVG string) */
+  icon,
+
+  /** @type {string} - Icon position (left or right) */
+  iconPosition = "left",
+
+  children,
+} = $props()
+
+// Get tabs context
+const tabsContext = getContext("tabs")
+
+if (!tabsContext) {
+  throw new Error("Tab must be used within a Tabs component")
+}
+
+// Tab state
+let tabElement
+let index = -1
+
+// Register tab on mount
+onMount(() => {
+  if (tabElement) {
+    index = tabsContext.registerTab(tabElement)
+  }
+
+  return () => {
+    // Cleanup if needed
+  }
+})
+
+// Determine if this tab is selected
+const isSelected = $derived(tabsContext.selectedIndex() === index)
+
+// Determine if tabs are disabled from parent
+const isDisabled = $derived(disabled || tabsContext.disabled())
+
+/**
+ * Handles tab click
+ */
+function handleClick() {
+  if (isDisabled) return
+
+  tabsContext.selectTab(index)
+}
+
+/**
+ * Handles tab keydown
+ * @param {KeyboardEvent} event - Keydown event
+ */
+function handleKeydown(event) {
+  if (isDisabled) return
+
+  tabsContext.handleKeydown(event, index)
+}
+
+// Generate unique ID if not provided
+const tabId = id || `tab-${crypto.randomUUID()}`
+
+// Panel ID for aria-controls
+const panelId = $derived(`panel-${tabId}`)
+</script>
+
+<button
+  id={tabId}
+  class="tab {className}"
+  role="tab"
+  aria-selected={isSelected}
+  aria-controls={panelId}
+  tabindex={isSelected ? 0 : -1}
+  {disabled}
+  onclick={handleClick}
+  onkeydown={handleKeydown}
+  bind:this={tabElement}
+>
+  {#if icon && iconPosition === 'left'}
+    <span class="tab-icon tab-icon-left" aria-hidden="true">
+      {@html icon}
+    </span>
+  {/if}
+  
+  <span class="tab-content">
+    {@render children?.()}
+  </span>
+  
+  {#if icon && iconPosition === 'right'}
+    <span class="tab-icon tab-icon-right" aria-hidden="true">
+      {@html icon}
+    </span>
+  {/if}
+</button>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .tab {
+    @apply inline-flex items-center justify-center;
+    @apply font-medium text-muted dark:text-muted;
+    @apply transition-colors duration-200;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed;
+    @apply whitespace-nowrap;
+  }
+  
+  .tab-content {
+    @apply flex-grow;
+  }
+  
+  .tab-icon-left {
+    @apply mr-2;
+  }
+  
+  .tab-icon-right {
+    @apply ml-2;
+  }
+</style>

package/dist/components/Tabs/Tab.svelte.d.ts

@@ -0,0 +1,36 @@
+export default Tab;
+type Tab = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Tab - An individual tab button within a TabList component.
+ * Provides the clickable interface for selecting tab panels.
+ *
+ * Usage:
+ * ```svelte
+ * <Tab>Tab Label</Tab>
+ *
+ * <Tab disabled>Disabled Tab</Tab>
+ *
+ * <Tab icon="<svg>...</svg>">
+ * Tab with Icon
+ * </Tab>
+ * ```
+ */
+declare const Tab: import("svelte").Component<{
+    class?: string;
+    id: any;
+    disabled?: boolean;
+    icon: any;
+    iconPosition?: string;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id: any;
+    disabled?: boolean;
+    icon: any;
+    iconPosition?: string;
+    children: any;
+};

package/dist/components/Tabs/TabList.svelte

@@ -0,0 +1,60 @@
+<!--
+@component
+TabList - A container for Tab components within a Tabs component.
+Provides the navigation interface for tab panels.
+
+Usage:
+```svelte
+<Tabs>
+  <TabList>
+    <Tab>First Tab</Tab>
+    <Tab>Second Tab</Tab>
+  </TabList>
+  
+  <TabPanel>First tab content</TabPanel>
+  <TabPanel>Second tab content</TabPanel>
+</Tabs>
+```
+-->
+<script>
+import { getContext } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - ARIA label for the tablist */
+  ariaLabel,
+
+  children,
+} = $props()
+
+// Get tabs context
+const tabsContext = getContext("tabs")
+
+// Get context values with defaults
+const centered = tabsContext?.centered || false
+const fullWidth = tabsContext?.fullWidth || false
+</script>
+
+<div
+  class="
+    tab-list
+    {fullWidth ? 'w-full' : ''}
+    {centered ? 'justify-center' : ''}
+    {className}
+  "
+  role="tablist"
+  aria-label={ariaLabel}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .tab-list {
+    @apply flex items-center;
+    @apply overflow-x-auto;
+  }
+</style>

package/dist/components/Tabs/TabList.svelte.d.ts

@@ -0,0 +1,32 @@
+export default TabList;
+type TabList = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * TabList - A container for Tab components within a Tabs component.
+ * Provides the navigation interface for tab panels.
+ *
+ * Usage:
+ * ```svelte
+ * <Tabs>
+ * <TabList>
+ *   <Tab>First Tab</Tab>
+ *   <Tab>Second Tab</Tab>
+ * </TabList>
+ *
+ * <TabPanel>First tab content</TabPanel>
+ * <TabPanel>Second tab content</TabPanel>
+ * </Tabs>
+ * ```
+ */
+declare const TabList: import("svelte").Component<{
+    class?: string;
+    ariaLabel: any;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    ariaLabel: any;
+    children: any;
+};

package/dist/components/Tabs/TabPanel.svelte

@@ -0,0 +1,118 @@
+<!--
+@component
+TabPanel - A container for tab content within a Tabs component.
+Displays content when its corresponding Tab is selected.
+
+Usage:
+```svelte
+<TabPanel>
+  Content for the first tab
+</TabPanel>
+
+<TabPanel lazy>
+  This content only renders when the tab is selected
+</TabPanel>
+```
+-->
+<script>
+import { getContext, onMount } from "svelte"
+import { fade } from "svelte/transition"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id,
+
+  /** @type {boolean} - Whether to lazy load panel content */
+  lazy = false,
+
+  /** @type {boolean} - Whether to keep content in DOM when not visible */
+  keepAlive = true,
+
+  /** @type {boolean} - Whether to animate panel transitions */
+  animated = true,
+
+  /** @type {number} - Animation duration in ms */
+  animationDuration = 200,
+
+  children,
+} = $props()
+
+// Get tabs context
+const tabsContext = getContext("tabs")
+
+if (!tabsContext) {
+  throw new Error("TabPanel must be used within a Tabs component")
+}
+
+// Panel state
+let panelElement
+let index = -1
+let hasBeenSelected = $state(false)
+
+// Register panel on mount
+onMount(() => {
+  if (panelElement) {
+    index = tabsContext.registerPanel(panelElement)
+  }
+
+  return () => {
+    // Cleanup if needed
+  }
+})
+
+// Determine if this panel is selected
+const isSelected = $derived(tabsContext.selectedIndex() === index)
+
+// Update hasBeenSelected when selected
+$effect(() => {
+  if (isSelected) {
+    hasBeenSelected = true
+  }
+})
+
+// Determine if content should be rendered
+const shouldRenderContent = $derived(isSelected || (keepAlive && hasBeenSelected) || !lazy)
+
+// Generate unique ID if not provided
+const panelId = id || `panel-${crypto.randomUUID()}`
+
+// Tab ID for aria-labelledby
+const tabId = $derived(`tab-${panelId.replace("panel-", "")}`)
+</script>
+
+<div
+  id={panelId}
+  class="tab-panel {className}"
+  role="tabpanel"
+  aria-labelledby={tabId}
+  tabindex="0"
+  hidden={!isSelected}
+  bind:this={panelElement}
+>
+  {#if shouldRenderContent}
+    {#if animated && isSelected}
+      <div transition:fade={{ duration: animationDuration }}>
+        {@render children?.()}
+      </div>
+    {:else}
+      <div>
+        {@render children?.()}
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .tab-panel {
+    @apply w-full py-4 focus:outline-none;
+  }
+  
+  .tab-panel[hidden] {
+    @apply hidden;
+  }
+</style>

package/dist/components/Tabs/TabPanel.svelte.d.ts

@@ -0,0 +1,38 @@
+export default TabPanel;
+type TabPanel = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * TabPanel - A container for tab content within a Tabs component.
+ * Displays content when its corresponding Tab is selected.
+ *
+ * Usage:
+ * ```svelte
+ * <TabPanel>
+ * Content for the first tab
+ * </TabPanel>
+ *
+ * <TabPanel lazy>
+ * This content only renders when the tab is selected
+ * </TabPanel>
+ * ```
+ */
+declare const TabPanel: import("svelte").Component<{
+    class?: string;
+    id: any;
+    lazy?: boolean;
+    keepAlive?: boolean;
+    animated?: boolean;
+    animationDuration?: number;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id: any;
+    lazy?: boolean;
+    keepAlive?: boolean;
+    animated?: boolean;
+    animationDuration?: number;
+    children: any;
+};