twintrinsic 0.0.1

package/dist/components/Form/Textarea.svelte

@@ -0,0 +1,207 @@
+<!--
+@component
+Textarea - A styled textarea component for multi-line text input.
+Provides consistent styling, accessibility features, and integration with the Form component.
+
+Usage:
+```svelte
+<Textarea 
+  name="description"
+  placeholder="Enter description"
+  rows={4}
+/>
+
+<FormField label="Message">
+  <Textarea name="message" required />
+</FormField>
+```
+-->
+<script>
+import { getContext } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id,
+
+  /** @type {string} - Textarea name */
+  name,
+
+  /** @type {string} - Textarea placeholder */
+  placeholder = "",
+
+  /** @type {string} - Textarea value */
+  value = "",
+
+  /** @type {number} - Number of rows */
+  rows = 3,
+
+  /** @type {boolean} - Whether the textarea is required */
+  required = false,
+
+  /** @type {boolean} - Whether the textarea is disabled */
+  disabled = false,
+
+  /** @type {boolean} - Whether the textarea is readonly */
+  readonly = false,
+
+  /** @type {string} - Minimum length */
+  minlength,
+
+  /** @type {string} - Maximum length */
+  maxlength,
+
+  /** @type {string} - Autocomplete attribute */
+  autocomplete,
+
+  /** @type {boolean} - Whether to auto-resize based on content */
+  autoResize = false,
+
+  /** @type {string} - ARIA label for accessibility */
+  ariaLabel,
+  /** @type {(event: CustomEvent) => void} - Input event handler */
+  oninput,
+  /** @type {(event: CustomEvent) => void} - Change event handler */
+  onchange,
+  /** @type {(event: Event) => void} - Focus event handler */
+  onfocus,
+  /** @type {(event: Event) => void} - Blur event handler */
+  onblur,
+  /** @type {object} - Additional props to pass to the input element */
+  ...restProps
+} = $props()
+
+// Get form context if available
+const formContext = getContext("form")
+
+// Generate unique ID if not provided
+const textareaId = id || `textarea-${crypto.randomUUID()}`
+
+// Textarea state
+let textareaValue = $state(value)
+let isFocused = $state(false)
+let textareaEl = $state()
+let fieldApi = $state()
+
+// Register with form if available
+$effect(() => {
+  if (formContext && name) {
+    fieldApi = formContext.registerField(name, value)
+  }
+})
+
+// Update value when form field changes
+$effect(() => {
+  if (fieldApi) {
+    const formValue = fieldApi.getValue()
+    if (formValue !== undefined && formValue !== textareaValue) {
+      textareaValue = formValue
+    }
+  }
+})
+
+// Update textarea value when prop changes
+$effect(() => {
+  textareaValue = value
+})
+
+/**
+ * Handles textarea input
+ * @param {Event} event - Input event
+ */
+function handleInput(event) {
+  const newValue = event.target.value
+  textareaValue = newValue
+
+  // Update form field if available
+  if (fieldApi) {
+    fieldApi.setValue(newValue)
+  }
+
+  // Auto-resize if enabled
+  if (autoResize && textareaEl) {
+    resizeTextarea()
+  }
+
+  oninput?.(new CustomEvent("input", { detail: { value: newValue } }))
+  onchange?.(new CustomEvent("change", { detail: { value: newValue } }))
+}
+
+/**
+ * Handles focus events
+ */
+function handleFocus(event) {
+  isFocused = true
+  onfocus?.(event)
+}
+
+/**
+ * Handles blur events
+ */
+function handleBlur(event) {
+  isFocused = false
+  onblur?.(event)
+}
+
+/**
+ * Resizes the textarea based on content
+ */
+function resizeTextarea() {
+  if (!textareaEl) return
+
+  // Reset height to calculate scroll height
+  textareaEl.style.height = "auto"
+
+  // Set height to scroll height
+  textareaEl.style.height = `${textareaEl.scrollHeight}px`
+}
+
+// Initialize auto-resize
+$effect(() => {
+  if (autoResize && textareaEl) {
+    // Use setTimeout to ensure content is rendered
+    setTimeout(resizeTextarea, 0)
+  }
+})
+</script>
+
+<div class="textarea-wrapper {className}">
+  <textarea
+    id={textareaId}
+    {name}
+    {placeholder}
+    value={textareaValue}
+    {rows}
+    {required}
+    disabled={disabled || (fieldApi && fieldApi.isDisabled())}
+    {readonly}
+    {minlength}
+    {maxlength}
+    {autocomplete}
+    aria-label={ariaLabel}
+    class="textarea {isFocused ? 'is-focused' : ''}"
+    oninput={handleInput}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    bind:this={textareaEl}
+    {...restProps}
+  ></textarea>
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .textarea-wrapper {
+    @apply w-full;
+  }
+  
+  .textarea {
+    @apply w-full rounded-md border-border dark:border-border bg-background dark:bg-background text-text dark:text-text;
+    @apply border focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:border-primary-500 dark:focus:border-primary-400;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-surface dark:disabled:bg-surface;
+    @apply placeholder:text-muted dark:placeholder:text-muted;
+    @apply p-3 resize-y;
+  }
+</style>

package/dist/components/Form/Textarea.svelte.d.ts

@@ -0,0 +1,62 @@
+export default Textarea;
+type Textarea = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Textarea - A styled textarea component for multi-line text input.
+ * Provides consistent styling, accessibility features, and integration with the Form component.
+ *
+ * Usage:
+ * ```svelte
+ * <Textarea
+ * name="description"
+ * placeholder="Enter description"
+ * rows={4}
+ * />
+ *
+ * <FormField label="Message">
+ * <Textarea name="message" required />
+ * </FormField>
+ * ```
+ */
+declare const Textarea: import("svelte").Component<{
+    class?: string;
+    id: any;
+    name: any;
+    placeholder?: string;
+    value?: string;
+    rows?: number;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    minlength: any;
+    maxlength: any;
+    autocomplete: any;
+    autoResize?: boolean;
+    ariaLabel: any;
+    oninput: any;
+    onchange: any;
+    onfocus: any;
+    onblur: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id: any;
+    name: any;
+    placeholder?: string;
+    value?: string;
+    rows?: number;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    minlength: any;
+    maxlength: any;
+    autocomplete: any;
+    autoResize?: boolean;
+    ariaLabel: any;
+    oninput: any;
+    onchange: any;
+    onfocus: any;
+    onblur: any;
+} & Record<string, any>;

package/dist/components/Icon/Icon.svelte

@@ -0,0 +1,140 @@
+<!--
+@component
+Icon - A component for displaying SVG icons with consistent styling.
+
+Usage:
+```svelte
+<Icon name="check" />
+<Icon name="arrow-right" size="lg" />
+<Icon name="close" class="text-error" />
+```
+-->
+<script>
+const {
+  /** @type {string} - Name of the icon to display */
+  name = "",
+  /** @type {'sm' | 'md' | 'lg' | 'xl'} - Size of the icon */
+  size = "md",
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+} = $props()
+
+// Icon size mappings
+const sizes = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32,
+}
+
+// Icon paths mapping
+const icons = {
+  // Interface
+  check: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z",
+  close:
+    "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
+  plus: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z",
+  minus: "M19 13H5v-2h14v2z",
+  search:
+    "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z",
+  settings:
+    "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z",
+  menu: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z",
+  more: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z",
+
+  // Navigation
+  "arrow-left": "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z",
+  "arrow-right": "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z",
+  "arrow-up": "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z",
+  "arrow-down": "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z",
+  "chevron-left": "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z",
+  "chevron-right": "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z",
+  "chevron-up": "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z",
+  "chevron-down": "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z",
+
+  // Actions
+  edit: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z",
+  delete: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z",
+  save: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z",
+  refresh:
+    "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z",
+  download: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z",
+  upload: "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z",
+  copy: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z",
+
+  // Forms
+  calendar:
+    "M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z",
+  eye: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z",
+  "eye-off":
+    "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z",
+  lock: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z",
+  unlock:
+    "M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10z",
+
+  // Media
+  play: "M8 5v14l11-7z",
+  pause: "M6 19h4V5H6v14zm8-14v14h4V5h-4z",
+  stop: "M6 6h12v12H6z",
+  "volume-up":
+    "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z",
+  "volume-down":
+    "M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z",
+  "volume-mute": "M7 9v6h4l5 5V4l-5 5H7z",
+  "volume-off":
+    "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z",
+
+  // Status
+  info: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",
+  warning: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z",
+  error:
+    "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z",
+  success:
+    "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",
+  help: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z",
+}
+
+// Get icon path
+const path = $derived(icons[name] || "")
+const pixelSize = $derived(sizes[size] || sizes.md)
+</script>
+
+<svg
+  class="icon {className}"
+  class:icon-sm={size === 'sm'}
+  class:icon-md={size === 'md'}
+  class:icon-lg={size === 'lg'}
+  class:icon-xl={size === 'xl'}
+  viewBox="0 0 24 24"
+  width={pixelSize}
+  height={pixelSize}
+  fill="currentColor"
+  aria-hidden="true"
+>
+  <path d={path} />
+</svg>
+
+<style>
+  @reference '../../twintrinsic.css';
+
+  .icon {
+    @apply inline-block align-middle;
+    @apply transition-colors duration-150;
+  }
+
+  .icon-sm {
+    @apply w-4 h-4;
+  }
+
+  .icon-md {
+    @apply w-5 h-5;
+  }
+
+  .icon-lg {
+    @apply w-6 h-6;
+  }
+
+  .icon-xl {
+    @apply w-8 h-8;
+  }
+</style>

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

@@ -0,0 +1,25 @@
+export default Icon;
+type Icon = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Icon - A component for displaying SVG icons with consistent styling.
+ *
+ * Usage:
+ * ```svelte
+ * <Icon name="check" />
+ * <Icon name="arrow-right" size="lg" />
+ * <Icon name="close" class="text-error" />
+ * ```
+ */
+declare const Icon: import("svelte").Component<{
+    name?: string;
+    size?: string;
+    class?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    name?: string;
+    size?: string;
+    class?: string;
+};

package/dist/components/Icon/index.d.ts

@@ -0,0 +1 @@
+export { default as Icon } from "./Icon.svelte";

package/dist/components/Icon/index.js

@@ -0,0 +1 @@
+export { default as Icon } from "./Icon.svelte";

package/dist/components/Lazy/Lazy.svelte

@@ -0,0 +1,158 @@
+<!--
+@component
+Lazy - A component that renders its content only when it becomes visible in the viewport.
+Useful for performance optimization by deferring the rendering of off-screen content.
+
+Usage:
+```svelte
+<Lazy>
+  <div>This content will only be rendered when visible</div>
+</Lazy>
+
+<Lazy placeholder={<div>Loading...</div>}>
+  <HeavyComponent />
+</Lazy>
+```
+-->
+<script>
+import { onMount } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {number} - Threshold for intersection (0-1), where 1 means fully visible */
+  threshold = 0.1,
+
+  /** @type {string} - Margin around the root element for intersection detection */
+  rootMargin = "0px",
+
+  /** @type {boolean} - Whether to keep content rendered after it's been visible once */
+  keepRendered = true,
+
+  /** @type {boolean} - Whether to show a loading indicator while content is loading */
+  showLoading = false,
+
+  /** @type {number} - Delay in ms before showing content after it becomes visible */
+  delay = 0,
+
+  children,
+  placeholder,
+} = $props()
+
+// State
+let isVisible = $state(false)
+let hasBeenVisible = $state(false)
+let shouldRender = $state(false)
+let element
+
+/**
+ * Handles intersection changes
+ * @param {IntersectionObserverEntry[]} entries - Intersection entries
+ */
+function handleIntersection(entries) {
+  const [entry] = entries
+
+  if (entry.isIntersecting) {
+    isVisible = true
+    hasBeenVisible = true
+
+    if (delay > 0) {
+      setTimeout(() => {
+        shouldRender = true
+      }, delay)
+    } else {
+      shouldRender = true
+    }
+
+    // If we only need to detect visibility once, disconnect the observer
+    if (keepRendered) {
+      observer?.disconnect()
+    }
+  } else {
+    isVisible = false
+
+    // If we're not keeping rendered content, unrender when not visible
+    if (!keepRendered) {
+      shouldRender = false
+    }
+  }
+}
+
+let observer
+
+onMount(() => {
+  // Check if IntersectionObserver is available
+  if ("IntersectionObserver" in window) {
+    observer = new IntersectionObserver(handleIntersection, {
+      root: null, // viewport
+      rootMargin,
+      threshold,
+    })
+
+    if (element) {
+      observer.observe(element)
+    }
+  } else {
+    // Fallback for browsers that don't support IntersectionObserver
+    shouldRender = true
+    isVisible = true
+    hasBeenVisible = true
+  }
+
+  return () => {
+    observer?.disconnect()
+  }
+})
+</script>
+
+<div 
+  {id}
+  class="lazy-container {className}"
+  bind:this={element}
+>
+  {#if shouldRender}
+    <div class="lazy-content">
+      {@render children?.()}
+    </div>
+  {:else if placeholder}
+    <div class="lazy-placeholder">
+      {@render placeholder()}
+    </div>
+  {:else if showLoading && hasBeenVisible}
+    <div class="lazy-loading" aria-live="polite" aria-busy="true">
+      <div class="loading-spinner" aria-hidden="true"></div>
+      <span class="sr-only">Loading content</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .lazy-container {
+    @apply min-h-[20px];
+  }
+  
+  .lazy-loading {
+    @apply flex items-center justify-center p-4;
+  }
+  
+  .loading-spinner {
+    @apply w-8 h-8 rounded-full border-4 border-primary-200 dark:border-primary-800;
+    @apply border-t-primary-500 dark:border-t-primary-400;
+    animation: spin 1s linear infinite;
+  }
+  
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>

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

@@ -0,0 +1,42 @@
+export default Lazy;
+type Lazy = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Lazy - A component that renders its content only when it becomes visible in the viewport.
+ * Useful for performance optimization by deferring the rendering of off-screen content.
+ *
+ * Usage:
+ * ```svelte
+ * <Lazy>
+ * <div>This content will only be rendered when visible</div>
+ * </Lazy>
+ *
+ * <Lazy placeholder={<div>Loading...</div>}>
+ * <HeavyComponent />
+ * </Lazy>
+ * ```
+ */
+declare const Lazy: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    threshold?: number;
+    rootMargin?: string;
+    keepRendered?: boolean;
+    showLoading?: boolean;
+    delay?: number;
+    children: any;
+    placeholder: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    threshold?: number;
+    rootMargin?: string;
+    keepRendered?: boolean;
+    showLoading?: boolean;
+    delay?: number;
+    children: any;
+    placeholder: any;
+};