twintrinsic 0.0.1

package/dist/components/Tag/TagGroup.svelte

@@ -0,0 +1,147 @@
+<!--
+@component
+TagGroup - A component for managing multiple Tag components.
+Provides consistent spacing, layout options, and accessibility features.
+
+Usage:
+```svelte
+<TagGroup>
+  <Tag>Tag 1</Tag>
+  <Tag>Tag 2</Tag>
+  <Tag>Tag 3</Tag>
+</TagGroup>
+
+<TagGroup variant="primary" size="lg">
+  <Tag>JavaScript</Tag>
+  <Tag>TypeScript</Tag>
+  <Tag>Svelte</Tag>
+</TagGroup>
+
+<TagGroup 
+  items={['Red', 'Green', 'Blue']} 
+  let:item 
+  ondismiss={(e) => handleDismiss(e.detail)}
+>
+  <Tag dismissible>{item}</Tag>
+</TagGroup>
+```
+-->
+<script>
+import { setContext } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - Visual style variant passed to all tags */
+  variant = "default",
+
+  /** @type {string} - Size passed to all tags (sm, md, lg) */
+  size = "md",
+
+  /** @type {boolean} - Whether all tags are dismissible */
+  dismissible = false,
+
+  /** @type {boolean} - Whether all tags are outlines */
+  outline = false,
+
+  /** @type {boolean} - Whether all tags are pills */
+  pill = false,
+
+  /** @type {boolean} - Whether all tags are clickable */
+  clickable = false,
+
+  /** @type {string} - Direction of the tag group (horizontal, vertical) */
+  direction = "horizontal",
+
+  /** @type {Array} - Items to render as tags */
+  items = [],
+
+  /** @type {string} - ARIA label for the tag group */
+  ariaLabel = "Tag group",
+
+  /** @type {(event: CustomEvent) => void} - Dismiss event handler */
+  ondismiss,
+
+  children,
+} = $props()
+
+// Provide context for child tags
+$effect(() => {
+  setContext("tagGroup", {
+    variant,
+    size,
+    dismissible,
+    outline,
+    pill,
+    clickable,
+  })
+})
+
+/**
+ * Handles removing a tag
+ * @param {number} index - Index of the tag to remove
+ */
+function handleDismiss(index) {
+  if (items.length > 0) {
+    const removedItem = items[index]
+    ondismiss?.(new CustomEvent("dismiss", { detail: { item: removedItem, index } }))
+  }
+}
+</script>
+
+<div
+  {id}
+  class="
+    tag-group
+    tag-group-{direction}
+    {className}
+  "
+  role="group"
+  aria-label={ariaLabel}
+>
+  {#if items.length > 0}
+    {#each items as item, index}
+      <div class="tag-group-item">
+        <svelte:component
+          this={children?.item}
+          {item}
+          {index}
+          variant={variant}
+          size={size}
+          dismissible={dismissible}
+          outline={outline}
+          pill={pill}
+          clickable={clickable}
+          ondismiss={() => handleDismiss(index)}
+        />
+      </div>
+    {/each}
+  {:else}
+    {@render children?.()}
+  {/if}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .tag-group {
+    @apply flex flex-wrap;
+    @apply gap-2;
+  }
+  
+  .tag-group-horizontal {
+    @apply flex-row;
+  }
+  
+  .tag-group-vertical {
+    @apply flex-col;
+  }
+  
+  .tag-group-item {
+    @apply flex-none;
+  }
+</style>

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

@@ -0,0 +1,62 @@
+export default TagGroup;
+type TagGroup = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * TagGroup - A component for managing multiple Tag components.
+ * Provides consistent spacing, layout options, and accessibility features.
+ *
+ * Usage:
+ * ```svelte
+ * <TagGroup>
+ * <Tag>Tag 1</Tag>
+ * <Tag>Tag 2</Tag>
+ * <Tag>Tag 3</Tag>
+ * </TagGroup>
+ *
+ * <TagGroup variant="primary" size="lg">
+ * <Tag>JavaScript</Tag>
+ * <Tag>TypeScript</Tag>
+ * <Tag>Svelte</Tag>
+ * </TagGroup>
+ *
+ * <TagGroup
+ * items={['Red', 'Green', 'Blue']}
+ * let:item
+ * ondismiss={(e) => handleDismiss(e.detail)}
+ * >
+ * <Tag dismissible>{item}</Tag>
+ * </TagGroup>
+ * ```
+ */
+declare const TagGroup: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    variant?: string;
+    size?: string;
+    dismissible?: boolean;
+    outline?: boolean;
+    pill?: boolean;
+    clickable?: boolean;
+    direction?: string;
+    items?: any[];
+    ariaLabel?: string;
+    ondismiss: any;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    variant?: string;
+    size?: string;
+    dismissible?: boolean;
+    outline?: boolean;
+    pill?: boolean;
+    clickable?: boolean;
+    direction?: string;
+    items?: any[];
+    ariaLabel?: string;
+    ondismiss: any;
+    children: any;
+};

package/dist/components/ThemeToggle/ThemeToggle.svelte

@@ -0,0 +1,93 @@
+<!--
+@component
+ThemeToggle - A toggle button for switching between light and dark themes.
+Supports keyboard interaction and ARIA labels.
+
+Usage:
+```svelte
+<ThemeToggle />
+```
+-->
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  let isDarkMode = $state(false);
+
+  onMount(() => {
+    // Initialize theme from localStorage or system preference
+    const savedTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    
+    isDarkMode = savedTheme ? savedTheme === 'dark' : prefersDark;
+    applyTheme(isDarkMode);
+  });
+
+  function applyTheme(dark: boolean) {
+    const root = document.documentElement;
+    if (dark) {
+      root.setAttribute('data-theme', 'dark');
+      root.classList.add('dark');
+    } else {
+      root.removeAttribute('data-theme');
+      root.classList.remove('dark');
+    }
+    localStorage.setItem('theme', dark ? 'dark' : 'light');
+  }
+</script>
+
+<label class="tw-theme-toggle" data-twintrinsic-theme-toggle aria-label="Toggle theme">
+  <input 
+    type="checkbox" 
+    class="tw-theme"
+    checked={isDarkMode}
+    onchange={(e) => {
+      isDarkMode = e.currentTarget.checked;
+      applyTheme(isDarkMode);
+    }}
+    aria-label={isDarkMode ? 'Switch to light theme' : 'Switch to dark theme'}
+  />
+  <span class="tw-theme-toggle-button" aria-hidden="true">
+    <svg class="tw-theme-toggle-icon tw-theme-toggle-icon-moon" 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+    </svg>
+    <svg class="tw-theme-toggle-icon tw-theme-toggle-icon-sun" 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="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+    </svg>
+  </span>
+</label>
+
+<style>
+  @reference '../../twintrinsic.css';
+
+  .tw-theme-toggle {
+    @apply inline-flex;
+  }
+
+  .tw-theme {
+    @apply sr-only;
+  }
+
+  .tw-theme-toggle-button {
+    @apply p-2 rounded-md text-muted hover:text-text hover:bg-hover focus:outline-none focus:ring-2 focus:ring-primary-500 transition-colors duration-200;
+  }
+
+  .tw-theme-toggle-icon {
+    @apply w-5 h-5;
+  }
+
+  .tw-theme-toggle-icon-sun {
+    @apply hidden;
+  }
+
+  .tw-theme:focus-visible + .tw-theme-toggle-button {
+    @apply ring-2 ring-primary-500;
+  }
+
+  .tw-theme:checked + .tw-theme-toggle-button .tw-theme-toggle-icon-moon {
+    @apply hidden;
+  }
+
+  .tw-theme:checked + .tw-theme-toggle-button .tw-theme-toggle-icon-sun {
+    @apply inline;
+  }
+</style>

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

@@ -0,0 +1,12 @@
+/**
+ * ThemeToggle - A toggle button for switching between light and dark themes.
+ * Supports keyboard interaction and ARIA labels.
+ *
+ * Usage:
+ * ```svelte
+ * <ThemeToggle />
+ * ```
+ */
+declare const ThemeToggle: import("svelte").Component<Record<string, never>, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/components/Timeline/Timeline.svelte

@@ -0,0 +1,144 @@
+<!--
+@component
+Timeline - A component for displaying chronological events or steps.
+Provides consistent styling, accessibility features, and various display options.
+
+Usage:
+```svelte
+<Timeline>
+  <TimelineItem title="Step 1">Content for step 1</TimelineItem>
+  <TimelineItem title="Step 2">Content for step 2</TimelineItem>
+  <TimelineItem title="Step 3">Content for step 3</TimelineItem>
+</Timeline>
+
+<Timeline variant="primary" position="alternate">
+  <TimelineItem title="Event 1" date="Jan 2023">Event details</TimelineItem>
+  <TimelineItem title="Event 2" date="Feb 2023" variant="success">Event details</TimelineItem>
+  <TimelineItem title="Event 3" date="Mar 2023" variant="error">Event details</TimelineItem>
+</Timeline>
+```
+-->
+<script>
+import { setContext } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - Visual style variant for all items */
+  variant = "primary",
+
+  /** @type {string} - Position of content relative to the line (left, right, alternate) */
+  position = "left",
+
+  /** @type {string} - Orientation of the timeline (vertical, horizontal) */
+  orientation = "vertical",
+
+  /** @type {boolean} - Whether to reverse the order of items */
+  reverse = false,
+
+  /** @type {boolean} - Whether to show connecting lines between items */
+  connected = true,
+
+  /** @type {boolean} - Whether to animate items when they enter the viewport */
+  animated = false,
+
+  /** @type {string} - ARIA label for the timeline */
+  ariaLabel = "Timeline",
+
+  children,
+} = $props()
+
+// Provide context for child components
+$effect(() => {
+  setContext("timeline", {
+    variant,
+    position,
+    orientation,
+    connected,
+    animated,
+  })
+})
+</script>
+
+<div
+  {id}
+  class="
+    timeline
+    timeline-{orientation}
+    timeline-position-{position}
+    {reverse ? 'timeline-reverse' : ''}
+    {connected ? 'timeline-connected' : ''}
+    {animated ? 'timeline-animated' : ''}
+    {className}
+  "
+  role="list"
+  aria-label={ariaLabel}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .timeline {
+    @apply relative w-full;
+  }
+  
+  .timeline-vertical {
+    @apply flex flex-col;
+  }
+  
+  .timeline-horizontal {
+    @apply flex flex-row;
+  }
+  
+  .timeline-reverse.timeline-vertical {
+    @apply flex-col-reverse;
+  }
+  
+  .timeline-reverse.timeline-horizontal {
+    @apply flex-row-reverse;
+  }
+  
+  /* Connected line for vertical timeline */
+  .timeline-vertical.timeline-connected::before {
+    content: '';
+    @apply absolute top-0 bottom-0 w-0.5;
+    @apply bg-border dark:bg-border;
+  }
+  
+  .timeline-vertical.timeline-position-left::before {
+    @apply left-6;
+  }
+  
+  .timeline-vertical.timeline-position-right::before {
+    @apply right-6;
+  }
+  
+  .timeline-vertical.timeline-position-alternate::before {
+    @apply left-1/2 -ml-px;
+  }
+  
+  /* Connected line for horizontal timeline */
+  .timeline-horizontal.timeline-connected::before {
+    content: '';
+    @apply absolute left-0 right-0 h-0.5;
+    @apply bg-border dark:bg-border;
+  }
+  
+  .timeline-horizontal.timeline-position-left::before {
+    @apply top-6;
+  }
+  
+  .timeline-horizontal.timeline-position-right::before {
+    @apply bottom-6;
+  }
+  
+  .timeline-horizontal.timeline-position-alternate::before {
+    @apply top-1/2 -mt-px;
+  }
+</style>

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

@@ -0,0 +1,48 @@
+export default Timeline;
+type Timeline = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Timeline - A component for displaying chronological events or steps.
+ * Provides consistent styling, accessibility features, and various display options.
+ *
+ * Usage:
+ * ```svelte
+ * <Timeline>
+ * <TimelineItem title="Step 1">Content for step 1</TimelineItem>
+ * <TimelineItem title="Step 2">Content for step 2</TimelineItem>
+ * <TimelineItem title="Step 3">Content for step 3</TimelineItem>
+ * </Timeline>
+ *
+ * <Timeline variant="primary" position="alternate">
+ * <TimelineItem title="Event 1" date="Jan 2023">Event details</TimelineItem>
+ * <TimelineItem title="Event 2" date="Feb 2023" variant="success">Event details</TimelineItem>
+ * <TimelineItem title="Event 3" date="Mar 2023" variant="error">Event details</TimelineItem>
+ * </Timeline>
+ * ```
+ */
+declare const Timeline: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    variant?: string;
+    position?: string;
+    orientation?: string;
+    reverse?: boolean;
+    connected?: boolean;
+    animated?: boolean;
+    ariaLabel?: string;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    variant?: string;
+    position?: string;
+    orientation?: string;
+    reverse?: boolean;
+    connected?: boolean;
+    animated?: boolean;
+    ariaLabel?: string;
+    children: any;
+};