twintrinsic 0.0.1

package/dist/components/Carousel/CarouselItem.svelte

@@ -0,0 +1,149 @@
+<!--
+@component
+CarouselItem - An individual slide within a Carousel component.
+Provides consistent styling, accessibility features, and transition effects.
+
+Usage:
+```svelte
+<CarouselItem>
+  <img src="/image1.jpg" alt="Image 1" />
+</CarouselItem>
+
+<CarouselItem>
+  <div class="p-4 text-center">
+    <h3>Slide Title</h3>
+    <p>Slide content goes here</p>
+  </div>
+</CarouselItem>
+```
+-->
+<script>
+import { getContext, onMount } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {boolean} - Whether the item is active */
+  active = false,
+
+  children,
+} = $props()
+
+// Get carousel context
+const carouselContext = getContext("carousel")
+
+// Component state
+let index = $state(-1)
+let isActive = $state(false)
+let isVisible = $state(false)
+let wasActive = $state(false)
+
+// Register with parent on mount
+onMount(() => {
+  if (carouselContext) {
+    index = carouselContext.registerItem()
+  }
+
+  return () => {
+    // Cleanup if needed
+  }
+})
+
+// Update active state when prop changes
+$effect(() => {
+  if (!carouselContext) {
+    isActive = active
+  }
+})
+
+// Update active state based on context
+$effect(() => {
+  if (carouselContext) {
+    const currentIndex = carouselContext.currentIndex
+    wasActive = isActive
+    isActive = index === currentIndex
+
+    // For fade transition, we need to keep the item visible for a bit after it becomes inactive
+    if (carouselContext.transition === "fade") {
+      if (isActive) {
+        isVisible = true
+      } else if (wasActive) {
+        // Keep visible during transition, then hide
+        isVisible = true
+        setTimeout(() => {
+          isVisible = false
+        }, carouselContext.transitionDuration)
+      }
+    }
+  }
+})
+
+// Determine transition styles based on context
+const transitionType = $derived(carouselContext?.transition || "slide")
+const transitionDuration = $derived(carouselContext?.transitionDuration || 300)
+const currentIndex = $derived(carouselContext?.currentIndex || 0)
+
+// Calculate transform for slide transition
+const transform = $derived(() => {
+  if (transitionType === "slide" && typeof index === "number" && typeof currentIndex === "number") {
+    const offset = (index - currentIndex) * 100
+    return `translateX(${offset}%)`
+  }
+  return ""
+})
+</script>
+
+<div
+  {id}
+  class="
+    carousel-item
+    carousel-item-{transitionType}
+    {isActive ? 'carousel-item-active' : ''}
+    {isVisible ? 'carousel-item-visible' : ''}
+    {className}
+  "
+  style="
+    --transition-duration: {transitionDuration}ms;
+    transform: {transform};
+  "
+  role="tabpanel"
+  aria-hidden={!isActive}
+  aria-roledescription="slide"
+>
+  {@render children?.()}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .carousel-item {
+    @apply w-full flex-shrink-0;
+  }
+  
+  /* Slide transition */
+  .carousel-item-slide {
+    @apply transition-transform ease-in-out;
+    transition-duration: var(--transition-duration);
+  }
+  
+  /* Fade transition */
+  .carousel-item-fade {
+    @apply absolute inset-0;
+    @apply opacity-0 invisible;
+    @apply transition-opacity ease-in-out;
+    transition-duration: var(--transition-duration);
+  }
+  
+  .carousel-item-fade.carousel-item-active,
+  .carousel-item-fade.carousel-item-visible {
+    @apply opacity-100 visible;
+  }
+  
+  .carousel-item-active {
+    @apply z-10;
+  }
+</style>

package/dist/components/Carousel/CarouselItem.svelte.d.ts

@@ -0,0 +1,35 @@
+export default CarouselItem;
+type CarouselItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * CarouselItem - An individual slide within a Carousel component.
+ * Provides consistent styling, accessibility features, and transition effects.
+ *
+ * Usage:
+ * ```svelte
+ * <CarouselItem>
+ * <img src="/image1.jpg" alt="Image 1" />
+ * </CarouselItem>
+ *
+ * <CarouselItem>
+ * <div class="p-4 text-center">
+ *   <h3>Slide Title</h3>
+ *   <p>Slide content goes here</p>
+ * </div>
+ * </CarouselItem>
+ * ```
+ */
+declare const CarouselItem: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    active?: boolean;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    active?: boolean;
+    children: any;
+};

package/dist/components/Chip/Chip.svelte

@@ -0,0 +1,288 @@
+<!--
+@component
+Chip - A compact element for representing an input, attribute, or action.
+Provides consistent styling, accessibility features, and interactive options.
+
+Usage:
+```svelte
+<Chip>Basic Chip</Chip>
+
+<Chip variant="primary" icon="<svg>...</svg>">
+  Primary Chip
+</Chip>
+
+<Chip 
+  variant="success" 
+  removable 
+  onremove={() => console.log('Chip removed')}
+>
+  Removable Chip
+</Chip>
+
+<Chip 
+  variant="warning" 
+  avatar="<img src='user.jpg' alt='User'>" 
+  clickable
+  onclick={() => console.log('Chip clicked')}
+>
+  User Name
+</Chip>
+```
+-->
+<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 chip (sm, md, lg) */
+  size = "md",
+
+  /** @type {string} - Icon to display (HTML or SVG string) */
+  icon,
+
+  /** @type {string} - Avatar to display (HTML or img tag) */
+  avatar,
+
+  /** @type {boolean} - Whether the chip is removable */
+  removable = false,
+
+  /** @type {boolean} - Whether the chip is clickable */
+  clickable = false,
+
+  /** @type {boolean} - Whether the chip is disabled */
+  disabled = false,
+
+  /** @type {boolean} - Whether the chip is selected */
+  selected = false,
+
+  /** @type {boolean} - Whether to show an outline style */
+  outline = false,
+
+  /** @type {string} - ARIA label for the remove button */
+  removeAriaLabel = "Remove",
+
+  /** @type {string} - Custom remove icon (HTML or SVG string) */
+  removeIcon,
+
+  /** @type {(event: CustomEvent) => void} - Remove event handler */
+  onremove,
+  /** @type {(event: CustomEvent) => void} - Click event handler */
+  onclick,
+
+  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 selected variant classes
+const selectedClasses = $derived(
+  selected
+    ? {
+        default: "bg-muted/20 dark:bg-muted/30",
+        primary: "bg-primary-200 dark:bg-primary-800",
+        secondary: "bg-secondary-200 dark:bg-secondary-800",
+        success: "bg-success-200 dark:bg-success-800",
+        warning: "bg-warning-200 dark:bg-warning-800",
+        error: "bg-error-200 dark:bg-error-800",
+        info: "bg-info-200 dark:bg-info-800",
+      }[variant]
+    : ""
+)
+
+// Determine size classes
+const sizeClasses = $derived(
+  {
+    sm: "text-xs px-2 py-0.5 h-6",
+    md: "text-sm px-2.5 py-1 h-8",
+    lg: "text-base px-3 py-1.5 h-10",
+  }[size] || "text-sm px-2.5 py-1 h-8"
+)
+
+// Determine icon size classes
+const iconSizeClasses = $derived(
+  {
+    sm: "w-3.5 h-3.5",
+    md: "w-4 h-4",
+    lg: "w-5 h-5",
+  }[size] || "w-4 h-4"
+)
+
+/**
+ * Handles click on the chip
+ * @param {MouseEvent} event - Click event
+ */
+function handleClick(event) {
+  if (disabled) {
+    event.preventDefault()
+    return
+  }
+
+  if (clickable) {
+    onclick?.(new CustomEvent("click", { detail: event }))
+  }
+}
+
+/**
+ * Handles remove button click
+ * @param {MouseEvent} event - Click event
+ */
+function handleRemove(event) {
+  if (disabled) {
+    event.preventDefault()
+    return
+  }
+
+  event.stopPropagation()
+  onremove?.(new CustomEvent("remove"))
+}
+
+/**
+ * Handles keydown events
+ * @param {KeyboardEvent} event - Keydown event
+ */
+function handleKeydown(event) {
+  if (disabled) return
+
+  if ((clickable && event.key === "Enter") || event.key === " ") {
+    event.preventDefault()
+    onclick?.(new CustomEvent("click", { detail: event }))
+  }
+}
+</script>
+
+<div
+  {id}
+  class="
+    chip
+    {variantClasses}
+    {selectedClasses}
+    {sizeClasses}
+    {clickable ? 'chip-clickable' : ''}
+    {disabled ? 'chip-disabled' : ''}
+    {selected ? 'chip-selected' : ''}
+    {className}
+  "
+  role={clickable ? 'button' : 'presentation'}
+  tabindex={clickable && !disabled ? 0 : undefined}
+  aria-disabled={disabled ? true : undefined}
+  onclick={handleClick}
+  onkeydown={handleKeydown}
+>
+  {#if avatar}
+    <span class="chip-avatar">
+      {@html avatar}
+    </span>
+  {/if}
+  
+  {#if icon}
+    <span class="chip-icon {iconSizeClasses}" aria-hidden="true">
+      {@html icon}
+    </span>
+  {/if}
+  
+  <span class="chip-content">
+    {@render children?.()}
+  </span>
+  
+  {#if removable && !disabled}
+    <button
+      type="button"
+      class="chip-remove"
+      aria-label={removeAriaLabel}
+      onclick={handleRemove}
+    >
+      {#if removeIcon}
+        <span class="chip-remove-icon {iconSizeClasses}">
+          {@html removeIcon}
+        </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}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .chip {
+    @apply inline-flex items-center;
+    @apply rounded-full;
+    @apply font-medium;
+    @apply transition-colors duration-150;
+    @apply max-w-full;
+  }
+  
+  .chip-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;
+  }
+  
+  .chip-disabled {
+    @apply opacity-50 cursor-not-allowed;
+    @apply pointer-events-none;
+  }
+  
+  .chip-avatar {
+    @apply -ml-1 mr-1;
+  }
+  
+  .chip-avatar :global(img),
+  .chip-avatar :global(svg) {
+    @apply w-6 h-6 rounded-full object-cover;
+  }
+  
+  .chip-icon {
+    @apply mr-1 flex-shrink-0;
+  }
+  
+  .chip-content {
+    @apply truncate;
+  }
+  
+  .chip-remove {
+    @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/Chip/Chip.svelte.d.ts

@@ -0,0 +1,71 @@
+export default Chip;
+type Chip = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Chip - A compact element for representing an input, attribute, or action.
+ * Provides consistent styling, accessibility features, and interactive options.
+ *
+ * Usage:
+ * ```svelte
+ * <Chip>Basic Chip</Chip>
+ *
+ * <Chip variant="primary" icon="<svg>...</svg>">
+ * Primary Chip
+ * </Chip>
+ *
+ * <Chip
+ * variant="success"
+ * removable
+ * onremove={() => console.log('Chip removed')}
+ * >
+ * Removable Chip
+ * </Chip>
+ *
+ * <Chip
+ * variant="warning"
+ * avatar="<img src='user.jpg' alt='User'>"
+ * clickable
+ * onclick={() => console.log('Chip clicked')}
+ * >
+ * User Name
+ * </Chip>
+ * ```
+ */
+declare const Chip: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    variant?: string;
+    size?: string;
+    icon: any;
+    avatar: any;
+    removable?: boolean;
+    clickable?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    outline?: boolean;
+    removeAriaLabel?: string;
+    removeIcon: any;
+    onremove: any;
+    onclick: any;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    variant?: string;
+    size?: string;
+    icon: any;
+    avatar: any;
+    removable?: boolean;
+    clickable?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    outline?: boolean;
+    removeAriaLabel?: string;
+    removeIcon: any;
+    onremove: any;
+    onclick: any;
+    children: any;
+};