twintrinsic 0.0.1

package/dist/components/Tabs/Tabs.svelte

@@ -0,0 +1,287 @@
+<!--
+@component
+Tabs - A component for organizing content into tabbed sections.
+Provides accessible tab navigation with keyboard support and various styling options.
+
+Usage:
+```svelte
+<Tabs>
+  <TabList>
+    <Tab>First Tab</Tab>
+    <Tab>Second Tab</Tab>
+    <Tab>Third Tab</Tab>
+  </TabList>
+  
+  <TabPanel>First tab content</TabPanel>
+  <TabPanel>Second tab content</TabPanel>
+  <TabPanel>Third tab content</TabPanel>
+</Tabs>
+```
+-->
+<script>
+import { setContext } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {number} - Index of the initially selected tab */
+  defaultIndex = 0,
+
+  /** @type {string} - Tab variant (default, underline, pills, enclosed) */
+  variant = "default",
+
+  /** @type {string} - Tab size (sm, md, lg) */
+  size = "md",
+
+  /** @type {boolean} - Whether to make tabs take full width */
+  fullWidth = false,
+
+  /** @type {boolean} - Whether to center the tabs */
+  centered = false,
+
+  /** @type {boolean} - Whether tabs are disabled */
+  disabled = false,
+
+  /** @type {string} - ARIA label for the tablist */
+  ariaLabel = "Tabs",
+
+  /** @type {(event: CustomEvent) => void} - Change event handler */
+  onchange,
+
+  children,
+} = $props()
+
+// Tabs state
+let selectedIndex = $state(defaultIndex)
+let tabsCount = $state(0)
+let tabsRefs = $state([])
+let panelsRefs = $state([])
+
+// Sync selectedIndex when defaultIndex changes
+$effect(() => {
+  selectedIndex = defaultIndex
+})
+
+/**
+ * Selects a tab by index
+ * @param {number} index - Tab index to select
+ */
+function selectTab(index) {
+  if (index < 0 || index >= tabsCount || disabled) return
+
+  selectedIndex = index
+  onchange?.(new CustomEvent("change", { detail: { index, tab: tabsRefs[index], panel: panelsRefs[index] } }))
+}
+
+/**
+ * Handles keyboard navigation
+ * @param {KeyboardEvent} event - Keydown event
+ * @param {number} index - Current tab index
+ */
+function handleKeydown(event, index) {
+  if (disabled) return
+
+  let newIndex
+
+  switch (event.key) {
+    case "ArrowLeft":
+      event.preventDefault()
+      newIndex = index - 1
+      if (newIndex < 0) newIndex = tabsCount - 1 // Wrap to last tab
+      selectTab(newIndex)
+      tabsRefs[newIndex]?.focus()
+      break
+
+    case "ArrowRight":
+      event.preventDefault()
+      newIndex = index + 1
+      if (newIndex >= tabsCount) newIndex = 0 // Wrap to first tab
+      selectTab(newIndex)
+      tabsRefs[newIndex]?.focus()
+      break
+
+    case "Home":
+      event.preventDefault()
+      selectTab(0)
+      tabsRefs[0]?.focus()
+      break
+
+    case "End":
+      event.preventDefault()
+      newIndex = tabsCount - 1
+      selectTab(newIndex)
+      tabsRefs[newIndex]?.focus()
+      break
+  }
+}
+
+/**
+ * Registers a tab
+ * @param {HTMLElement} tabElement - Tab element reference
+ * @returns {number} - Tab index
+ */
+function registerTab(tabElement) {
+  const index = tabsRefs.length
+  tabsRefs = [...tabsRefs, tabElement]
+  tabsCount = tabsRefs.length
+  return index
+}
+
+/**
+ * Registers a panel
+ * @param {HTMLElement} panelElement - Panel element reference
+ * @returns {number} - Panel index
+ */
+function registerPanel(panelElement) {
+  const index = panelsRefs.length
+  panelsRefs = [...panelsRefs, panelElement]
+  return index
+}
+
+// Provide context for child components
+$effect(() => {
+  setContext("tabs", {
+    selectedIndex: () => selectedIndex,
+    registerTab,
+    registerPanel,
+    selectTab,
+    handleKeydown,
+    disabled: () => disabled,
+    variant,
+    size,
+    fullWidth,
+    centered,
+  })
+})
+
+// Determine variant classes
+const variantClasses = $derived(
+  {
+    default: "tabs-default",
+    underline: "tabs-underline",
+    pills: "tabs-pills",
+    enclosed: "tabs-enclosed",
+  }[variant] || "tabs-default"
+)
+
+// Determine size classes
+const sizeClasses = $derived(
+  {
+    sm: "tabs-sm",
+    md: "tabs-md",
+    lg: "tabs-lg",
+  }[size] || "tabs-md"
+)
+</script>
+
+<div 
+  {id}
+  class="
+    tabs
+    {variantClasses}
+    {sizeClasses}
+    {fullWidth ? 'tabs-full-width' : ''}
+    {centered ? 'tabs-centered' : ''}
+    {disabled ? 'tabs-disabled' : ''}
+    {className}
+  "
+>
+  {@render children?.()}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .tabs {
+    @apply w-full;
+  }
+  
+  .tabs-disabled {
+    @apply opacity-60 pointer-events-none;
+  }
+  
+  /* Size variants */
+  .tabs-sm :global(.tab) {
+    @apply text-sm py-1 px-2;
+  }
+  
+  .tabs-md :global(.tab) {
+    @apply text-base py-2 px-3;
+  }
+  
+  .tabs-lg :global(.tab) {
+    @apply text-lg py-3 px-4;
+  }
+  
+  /* Layout variants */
+  .tabs-full-width :global(.tab-list) {
+    @apply w-full;
+  }
+  
+  .tabs-full-width :global(.tab) {
+    @apply flex-1;
+  }
+  
+  .tabs-centered :global(.tab-list) {
+    @apply justify-center;
+  }
+  
+  /* Style variants */
+  .tabs-default :global(.tab) {
+    @apply border-b-2 border-transparent;
+    @apply hover:border-border dark:hover:border-border;
+    @apply hover:text-text dark:hover:text-text;
+  }
+  
+  .tabs-default :global(.tab[aria-selected="true"]) {
+    @apply border-b-2 border-primary-500 dark:border-primary-400;
+    @apply text-primary-700 dark:text-primary-300;
+  }
+  
+  .tabs-underline :global(.tab-list) {
+    @apply border-b border-border dark:border-border;
+  }
+  
+  .tabs-underline :global(.tab) {
+    @apply border-b-2 border-transparent -mb-px;
+    @apply hover:border-border dark:hover:border-border;
+    @apply hover:text-text dark:hover:text-text;
+  }
+  
+  .tabs-underline :global(.tab[aria-selected="true"]) {
+    @apply border-b-2 border-primary-500 dark:border-primary-400;
+    @apply text-primary-700 dark:text-primary-300;
+  }
+  
+  .tabs-pills :global(.tab) {
+    @apply rounded-md;
+    @apply hover:bg-hover dark:hover:bg-hover;
+    @apply hover:text-text dark:hover:text-text;
+  }
+  
+  .tabs-pills :global(.tab[aria-selected="true"]) {
+    @apply bg-primary-500 dark:bg-primary-500;
+    @apply text-white dark:text-white;
+  }
+  
+  .tabs-enclosed :global(.tab-list) {
+    @apply p-1 bg-surface dark:bg-surface rounded-md;
+    @apply border border-border dark:border-border;
+  }
+  
+  .tabs-enclosed :global(.tab) {
+    @apply rounded-md;
+    @apply hover:bg-hover dark:hover:bg-hover;
+    @apply hover:text-text dark:hover:text-text;
+  }
+  
+  .tabs-enclosed :global(.tab[aria-selected="true"]) {
+    @apply bg-background dark:bg-background;
+    @apply text-text dark:text-text;
+    @apply shadow-sm;
+  }
+</style>

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

@@ -0,0 +1,50 @@
+export default Tabs;
+type Tabs = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Tabs - A component for organizing content into tabbed sections.
+ * Provides accessible tab navigation with keyboard support and various styling options.
+ *
+ * Usage:
+ * ```svelte
+ * <Tabs>
+ * <TabList>
+ *   <Tab>First Tab</Tab>
+ *   <Tab>Second Tab</Tab>
+ *   <Tab>Third Tab</Tab>
+ * </TabList>
+ *
+ * <TabPanel>First tab content</TabPanel>
+ * <TabPanel>Second tab content</TabPanel>
+ * <TabPanel>Third tab content</TabPanel>
+ * </Tabs>
+ * ```
+ */
+declare const Tabs: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    defaultIndex?: number;
+    variant?: string;
+    size?: string;
+    fullWidth?: boolean;
+    centered?: boolean;
+    disabled?: boolean;
+    ariaLabel?: string;
+    onchange: any;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    defaultIndex?: number;
+    variant?: string;
+    size?: string;
+    fullWidth?: boolean;
+    centered?: boolean;
+    disabled?: boolean;
+    ariaLabel?: string;
+    onchange: any;
+    children: any;
+};

package/dist/components/Tag/Tag.svelte

@@ -0,0 +1,260 @@
+<!--
+@component
+Tag - A component for displaying tags, labels, or status indicators.
+Provides consistent styling, accessibility features, and various display options.
+
+Usage:
+```svelte
+<Tag>Default Tag</Tag>
+
+<Tag variant="primary" size="lg">Primary Tag</Tag>
+
+<Tag variant="success" icon="<svg>...</svg>">Success</Tag>
+
+<Tag variant="warning" dismissible ondismiss={() => handleDismiss()}>Warning</Tag>
+```
+-->
+<script>
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - Visual style variant */
+  variant = "default",
+
+  /** @type {string} - Size of the tag (sm, md, lg) */
+  size = "md",
+
+  /** @type {string} - Icon to display (HTML or SVG string) */
+  icon,
+
+  /** @type {boolean} - Whether the tag is dismissible */
+  dismissible = false,
+
+  /** @type {boolean} - Whether to show the tag as an outline */
+  outline = false,
+
+  /** @type {boolean} - Whether to show the tag as a pill */
+  pill = false,
+
+  /** @type {boolean} - Whether the tag is clickable */
+  clickable = false,
+
+  /** @type {string} - URL for the tag (makes it a link) */
+  href,
+
+  /** @type {string} - Link target (_blank, _self, etc.) */
+  target,
+
+  /** @type {string} - ARIA label for the dismiss button */
+  dismissAriaLabel = "Dismiss",
+
+  /** @type {string} - Custom dismiss icon (HTML or SVG string) */
+  dismissIcon,
+
+  /** @type {(event: CustomEvent) => void} - Dismiss event handler */
+  ondismiss,
+
+  children,
+} = $props()
+
+// Determine variant classes
+const variantClasses = $derived(
+  outline
+    ? {
+        default: "bg-transparent border border-muted text-text dark:border-muted dark:text-text",
+        primary:
+          "bg-transparent border border-primary-500 text-primary-500 dark:border-primary-500 dark:text-primary-500",
+        secondary:
+          "bg-transparent border border-secondary-500 text-secondary-500 dark:border-secondary-500 dark:text-secondary-500",
+        success:
+          "bg-transparent border border-success-500 text-success-500 dark:border-success-500 dark:text-success-500",
+        warning:
+          "bg-transparent border border-warning-500 text-warning-500 dark:border-warning-500 dark:text-warning-500",
+        error:
+          "bg-transparent border border-error-500 text-error-500 dark:border-error-500 dark:text-error-500",
+        info: "bg-transparent border border-info-500 text-info-500 dark:border-info-500 dark:text-info-500",
+      }[variant]
+    : {
+        default: "bg-muted/10 text-text dark:bg-muted/20 dark:text-text",
+        primary: "bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200",
+        secondary:
+          "bg-secondary-100 text-secondary-800 dark:bg-secondary-900 dark:text-secondary-200",
+        success: "bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-200",
+        warning: "bg-warning-100 text-warning-800 dark:bg-warning-900 dark:text-warning-200",
+        error: "bg-error-100 text-error-800 dark:bg-error-900 dark:text-error-200",
+        info: "bg-info-100 text-info-800 dark:bg-info-900 dark:text-info-200",
+      }[variant]
+)
+
+// Determine size classes
+const sizeClasses = $derived(
+  {
+    sm: "text-xs px-2 py-0.5 h-5",
+    md: "text-sm px-2.5 py-0.5 h-6",
+    lg: "text-base px-3 py-1 h-8",
+  }[size] || "text-sm px-2.5 py-0.5 h-6"
+)
+
+// Determine icon size classes
+const iconSizeClasses = $derived(
+  {
+    sm: "w-3 h-3",
+    md: "w-4 h-4",
+    lg: "w-5 h-5",
+  }[size] || "w-4 h-4"
+)
+
+/**
+ * Handles dismiss button click
+ * @param {MouseEvent} event - Click event
+ */
+function handleDismiss(event) {
+  event.stopPropagation()
+  ondismiss?.(new CustomEvent("dismiss"))
+}
+
+/**
+ * Handles click on the tag
+ * @param {MouseEvent} event - Click event
+ */
+function handleClick(event) {
+  if (clickable && !href) {
+    // Click events are handled by native browser behavior for links
+  }
+}
+</script>
+
+{#if href}
+  <a
+    {id}
+    href={href}
+    target={target}
+    class="
+      tag
+      {variantClasses}
+      {sizeClasses}
+      {pill ? 'tag-pill' : ''}
+      {clickable || href ? 'tag-clickable' : ''}
+      {className}
+    "
+    onclick={handleClick}
+  >
+    {#if icon}
+      <span class="tag-icon {iconSizeClasses}">
+        {@html icon}
+      </span>
+    {/if}
+    
+    <span class="tag-content">
+      {@render children?.()}
+    </span>
+    
+    {#if dismissible}
+      <button
+        type="button"
+        class="tag-dismiss"
+        aria-label={dismissAriaLabel}
+        onclick={handleDismiss}
+      >
+        {#if dismissIcon}
+          <span class="tag-dismiss-icon">
+            {@html dismissIcon}
+          </span>
+        {:else}
+          <svg class="{iconSizeClasses}" 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="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+        {/if}
+      </button>
+    {/if}
+  </a>
+{:else}
+  <span
+    {id}
+    class="
+      tag
+      {variantClasses}
+      {sizeClasses}
+      {pill ? 'tag-pill' : ''}
+      {clickable ? 'tag-clickable' : ''}
+      {className}
+    "
+    role={clickable ? 'button' : undefined}
+    tabindex={clickable ? 0 : undefined}
+    onclick={handleClick}
+    onkeydown={(e) => e.key === 'Enter' && clickable && handleClick(e)}
+  >
+    {#if icon}
+      <span class="tag-icon {iconSizeClasses}">
+        {@html icon}
+      </span>
+    {/if}
+    
+    <span class="tag-content">
+      {@render children?.()}
+    </span>
+    
+    {#if dismissible}
+      <button
+        type="button"
+        class="tag-dismiss"
+        aria-label={dismissAriaLabel}
+        onclick={handleDismiss}
+      >
+        {#if dismissIcon}
+          <span class="tag-dismiss-icon">
+            {@html dismissIcon}
+          </span>
+        {:else}
+          <svg class="{iconSizeClasses}" 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="M6 18L18 6M6 6l12 12"></path>
+          </svg>
+        {/if}
+      </button>
+    {/if}
+  </span>
+{/if}
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .tag {
+    @apply inline-flex items-center;
+    @apply rounded;
+    @apply font-medium;
+    @apply transition-colors duration-150;
+    @apply max-w-full;
+  }
+  
+  .tag-pill {
+    @apply rounded-full;
+  }
+  
+  .tag-clickable {
+    @apply cursor-pointer;
+    @apply hover:bg-inherit/80 dark:hover:bg-inherit/80;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-2;
+  }
+  
+  .tag-icon {
+    @apply mr-1 flex-shrink-0;
+  }
+  
+  .tag-content {
+    @apply truncate;
+  }
+  
+  .tag-dismiss {
+    @apply ml-1 -mr-1 p-0.5;
+    @apply rounded-full;
+    @apply flex items-center justify-center;
+    @apply text-current opacity-70;
+    @apply hover:opacity-100;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400;
+    @apply transition-opacity duration-150;
+  }
+</style>

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

@@ -0,0 +1,54 @@
+export default Tag;
+type Tag = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Tag - A component for displaying tags, labels, or status indicators.
+ * Provides consistent styling, accessibility features, and various display options.
+ *
+ * Usage:
+ * ```svelte
+ * <Tag>Default Tag</Tag>
+ *
+ * <Tag variant="primary" size="lg">Primary Tag</Tag>
+ *
+ * <Tag variant="success" icon="<svg>...</svg>">Success</Tag>
+ *
+ * <Tag variant="warning" dismissible ondismiss={() => handleDismiss()}>Warning</Tag>
+ * ```
+ */
+declare const Tag: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    variant?: string;
+    size?: string;
+    icon: any;
+    dismissible?: boolean;
+    outline?: boolean;
+    pill?: boolean;
+    clickable?: boolean;
+    href: any;
+    target: any;
+    dismissAriaLabel?: string;
+    dismissIcon: any;
+    ondismiss: any;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    variant?: string;
+    size?: string;
+    icon: any;
+    dismissible?: boolean;
+    outline?: boolean;
+    pill?: boolean;
+    clickable?: boolean;
+    href: any;
+    target: any;
+    dismissAriaLabel?: string;
+    dismissIcon: any;
+    ondismiss: any;
+    children: any;
+};