twintrinsic 0.0.1

package/dist/components/Panel/Hero/Hero.svelte.d.ts

@@ -0,0 +1,32 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Hero: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    heading?: string | null | undefined;
+    type?: TypeLevel;
+    class?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Hero = InstanceType<typeof Hero>;
+export default Hero;

package/dist/components/Panel/LazyPanel.svelte

@@ -0,0 +1,110 @@
+<!--
+@component
+LazyPanel - A Panel component that only loads its content when it becomes visible in the viewport.
+Built on top of the Panel component with intersection observer for lazy loading.
+
+Usage:
+```svelte
+<LazyPanel>
+  <svelte:fragment slot="header">Lazy Content</svelte:fragment>
+  <svelte:fragment slot="loading">Loading...</svelte:fragment>
+  <ExpensiveComponent />
+</LazyPanel>
+```
+-->
+<script>
+import { onMount } from "svelte"
+import Panel from "./Panel.svelte"
+
+const {
+  /** @type {boolean} - Whether the panel is expanded */
+  expanded = true,
+
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - ARIA label */
+  ariaLabel,
+
+  /** @type {boolean} - Whether to disable the panel controls */
+  disabled = false,
+
+  /** @type {boolean} - Whether to show a border */
+  bordered = true,
+
+  /** @type {boolean} - Whether to show the expand/collapse icon */
+  showIcon = true,
+
+  /** @type {number} - Root margin for intersection observer */
+  rootMargin = "50px",
+
+  /** @type {number} - Threshold for intersection observer */
+  threshold = 0,
+
+  children,
+  header,
+  loading,
+} = $props()
+
+let isVisible = $state(false)
+let panelElement
+let observer
+
+onMount(() => {
+  observer = new IntersectionObserver(
+    (entries) => {
+      const [entry] = entries
+      if (entry.isIntersecting) {
+        isVisible = true
+        // Once visible, disconnect the observer
+        observer.disconnect()
+      }
+    },
+    {
+      rootMargin,
+      threshold,
+    }
+  )
+
+  if (panelElement) {
+    observer.observe(panelElement)
+  }
+
+  return () => {
+    if (observer) {
+      observer.disconnect()
+    }
+  }
+})
+</script>
+
+<div bind:this={panelElement}>
+  <Panel
+    {expanded}
+    class={className}
+    {id}
+    {ariaLabel}
+    {disabled}
+    {bordered}
+    {showIcon}
+  >
+    <svelte:fragment slot="header">
+      {@render header?.()}
+    </svelte:fragment>
+
+    {#if isVisible}
+      {@render children?.()}
+    {:else if loading}
+      {@render loading()}
+    {:else}
+      Loading...
+    {/if}
+  </Panel>
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+</style>

package/dist/components/Panel/LazyPanel.svelte.d.ts

@@ -0,0 +1,46 @@
+export default LazyPanel;
+type LazyPanel = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * LazyPanel - A Panel component that only loads its content when it becomes visible in the viewport.
+ * Built on top of the Panel component with intersection observer for lazy loading.
+ *
+ * Usage:
+ * ```svelte
+ * <LazyPanel>
+ * <svelte:fragment slot="header">Lazy Content</svelte:fragment>
+ * <svelte:fragment slot="loading">Loading...</svelte:fragment>
+ * <ExpensiveComponent />
+ * </LazyPanel>
+ * ```
+ */
+declare const LazyPanel: import("svelte").Component<{
+    expanded?: boolean;
+    class?: string;
+    id?: any;
+    ariaLabel: any;
+    disabled?: boolean;
+    bordered?: boolean;
+    showIcon?: boolean;
+    rootMargin?: string;
+    threshold?: number;
+    children: any;
+    header: any;
+    loading: any;
+}, {}, "">;
+type $$ComponentProps = {
+    expanded?: boolean;
+    class?: string;
+    id?: any;
+    ariaLabel: any;
+    disabled?: boolean;
+    bordered?: boolean;
+    showIcon?: boolean;
+    rootMargin?: string;
+    threshold?: number;
+    children: any;
+    header: any;
+    loading: any;
+};

package/dist/components/Panel/Panel.svelte

@@ -0,0 +1,205 @@
+<!--
+@component
+Panel - A collapsible container with header and content sections.
+Provides smooth animations and keyboard accessibility.
+
+Usage:
+```svelte
+<Panel>
+  <svelte:fragment slot="header">Panel Title</svelte:fragment>
+  Content goes here
+</Panel>
+
+<Panel expanded={false} class="custom-class">
+  <svelte:fragment slot="header">
+    <Icon name="settings" />
+    Settings
+  </svelte:fragment>
+  Settings content
+</Panel>
+```
+-->
+<script lang="ts">
+import { slide } from "svelte/transition"
+import type { Snippet } from "svelte"
+
+/**
+ * @slot header Renders custom header content for the panel button
+ * @slot default Provides the main panel body content
+ * @slot footer Displays supplemental content below the body (e.g., actions)
+ */
+type PanelProps = {
+  /** Whether the panel is expanded */
+  expanded?: boolean
+  /** Additional CSS classes */
+  class?: string
+  /** HTML id for accessibility */
+  id?: string
+  /** ARIA label for the header button */
+  ariaLabel?: string | null
+  /** Whether to disable the panel controls */
+  disabled?: boolean
+  /** Whether to show a border */
+  bordered?: boolean
+  /** Whether to show the expand/collapse icon */
+  showIcon?: boolean
+  /** Slot content for the panel body */
+  children?: Snippet | null
+  /** Slot content for the header */
+  header?: Snippet | null
+  /** Slot content rendered below the body */
+  footer?: Snippet | null
+  /** Callback invoked whenever the panel toggles expanded state */
+  ontoggle?: (payload: { expanded: boolean }) => void
+}
+
+const {
+  /** @type {boolean} - Whether the panel is expanded */
+  expanded = true,
+
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - ARIA label for the header button */
+  ariaLabel = null,
+
+  /** @type {boolean} - Whether to disable the panel controls */
+  disabled = false,
+
+  /** @type {boolean} - Whether to show a border */
+  bordered = true,
+
+  /** @type {boolean} - Whether to show the expand/collapse icon */
+  showIcon = true,
+
+  children = null,
+  header = null,
+  footer = null,
+} = $props() satisfies PanelProps
+
+let isExpanded = $state(true)
+
+// Internal state
+let headerEl = $state<HTMLButtonElement | null>(null)
+let contentEl = $state<HTMLDivElement | null>(null)
+
+// Update expanded state when prop changes
+$effect(() => {
+  isExpanded = expanded
+})
+
+// Handle toggle
+function handleToggle() {
+  if (disabled) return
+
+  isExpanded = !isExpanded
+  ontoggle?.({ expanded: isExpanded })
+}
+
+// Handle keyboard navigation
+function handleKeydown(event: KeyboardEvent) {
+  if (disabled) return
+
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault()
+    handleToggle()
+  }
+}
+</script>
+
+<div 
+  class="panel {bordered ? 'border border-border dark:border-border rounded-lg' : ''} {className}"
+  class:disabled
+>
+  <button
+    type="button"
+    id="{id}-header"
+    class="
+      w-full flex items-center justify-between
+      px-4 py-3
+      text-left
+      bg-surface dark:bg-surface
+      hover:bg-hover dark:hover:bg-hover
+      focus:outline-none focus:ring-2 focus:ring-focus-ring dark:focus:ring-focus-ring
+      disabled:opacity-50 disabled:cursor-not-allowed
+      text-text dark:text-text
+      {bordered ? 'rounded-t-lg' : 'rounded-lg'}
+    "
+    aria-expanded={isExpanded}
+    aria-controls="{id}-content"
+    aria-label={ariaLabel}
+    {disabled}
+    onclick={handleToggle}
+    onkeydown={handleKeydown}
+    bind:this={headerEl}
+  >
+    <div class="flex items-center gap-2">
+      {#if header}
+        {@render header()}
+      {:else}
+        Panel
+      {/if}
+    </div>
+
+    {#if showIcon}
+      <svg
+        class="w-5 h-5 transform transition-transform duration-200 text-muted dark:text-muted {isExpanded ? 'rotate-180' : ''}"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    {/if}
+  </button>
+
+  {#if isExpanded}
+    <div
+      id="{id}-content"
+      class="px-4 py-3 bg-background dark:bg-background text-text dark:text-text"
+      role="region"
+      aria-labelledby="{id}-header"
+      transition:slide={{ duration: 200 }}
+      bind:this={contentEl}
+      class:rounded-b-lg={!footer && bordered}
+    >
+      {@render children?.()}
+    </div>
+
+    {#if footer}
+      <div
+        class="px-4 py-3 bg-background dark:bg-background text-muted dark:text-muted"
+        class:border-t={bordered}
+        class:border-border={bordered}
+        class:rounded-b-lg={bordered}
+      >
+        {@render footer()}
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  /* Base styles that work with Tailwind */
+  .panel {
+    @apply overflow-hidden;
+  }
+
+  .panel.disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  /* Ensure the content area has proper spacing when collapsed */
+  .panel :global(.svelte-collapse-content) {
+    @apply overflow-hidden;
+  }
+</style>

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

@@ -0,0 +1,23 @@
+/**
+ * Panel - A collapsible container with header and content sections.
+ * Provides smooth animations and keyboard accessibility.
+ *
+ * Usage:
+ * ```svelte
+ * <Panel>
+ * <svelte:fragment slot="header">Panel Title</svelte:fragment>
+ * Content goes here
+ * </Panel>
+ *
+ * <Panel expanded={false} class="custom-class">
+ * <svelte:fragment slot="header">
+ *   <Icon name="settings" />
+ *   Settings
+ * </svelte:fragment>
+ * Settings content
+ * </Panel>
+ * ```
+ */
+declare const Panel: import("svelte").Component<Record<string, never>, {}, "">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;

package/dist/components/Progress/Progress.svelte

@@ -0,0 +1,220 @@
+<!--
+@component
+Progress - A component for displaying progress bars and indicators.
+Provides consistent styling, accessibility features, and various display options.
+
+Usage:
+```svelte
+<Progress value={75} />
+
+<Progress 
+  value={42} 
+  max={100} 
+  variant="primary" 
+  showValue 
+/>
+
+<Progress 
+  value={0.8} 
+  max={1} 
+  variant="success" 
+  size="lg" 
+  format={(v) => `${Math.round(v * 100)}%`} 
+/>
+```
+-->
+<script>
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {number} - Current value */
+  value = 0,
+
+  /** @type {number} - Maximum value */
+  max = 100,
+
+  /** @type {number} - Minimum value */
+  min = 0,
+
+  /** @type {string} - Visual style variant */
+  variant = "primary",
+
+  /** @type {string} - Size of the progress bar (sm, md, lg) */
+  size = "md",
+
+  /** @type {boolean} - Whether to show the value as text */
+  showValue = false,
+
+  /** @type {boolean} - Whether to show the value inside the progress bar */
+  valueInside = false,
+
+  /** @type {boolean} - Whether to show a striped pattern */
+  striped = false,
+
+  /** @type {boolean} - Whether to animate the striped pattern */
+  animated = false,
+
+  /** @type {boolean} - Whether to show an indeterminate loading animation */
+  indeterminate = false,
+
+  /** @type {Function} - Custom function to format the displayed value */
+  format,
+
+  /** @type {string} - ARIA label for accessibility */
+  ariaLabel,
+} = $props()
+
+// Calculate percentage for width
+const percentage = $derived(Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100)))
+
+// Format value for display
+const formattedValue = $derived(format ? format(value, min, max) : `${Math.round(percentage)}%`)
+
+// Determine size classes
+const sizeClasses = $derived(
+  {
+    sm: "h-1.5",
+    md: "h-2.5",
+    lg: "h-4",
+  }[size] || "h-2.5"
+)
+
+// Determine text size classes
+const textSizeClasses = $derived(
+  {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base",
+  }[size] || "text-sm"
+)
+
+// Determine variant classes
+const variantClasses = $derived(
+  {
+    default: "bg-muted/20 dark:bg-muted/20",
+    primary: "bg-primary-500 dark:bg-primary-500",
+    secondary: "bg-secondary-500 dark:bg-secondary-500",
+    success: "bg-success-500 dark:bg-success-500",
+    warning: "bg-warning-500 dark:bg-warning-500",
+    error: "bg-error-500 dark:bg-error-500",
+    info: "bg-info-500 dark:bg-info-500",
+  }[variant] || "bg-primary-500 dark:bg-primary-500"
+)
+
+// Determine track classes
+const trackClasses = $derived("bg-muted/10 dark:bg-muted/10")
+
+// Generate ARIA label
+const progressAriaLabel = $derived(ariaLabel || `Progress: ${formattedValue}`)
+</script>
+
+<div 
+  class="progress-container {className}"
+>
+  {#if showValue && !valueInside}
+    <div class="progress-label {textSizeClasses}">
+      {formattedValue}
+    </div>
+  {/if}
+  
+  <div
+    {id}
+    class="
+      progress
+      {sizeClasses}
+      {trackClasses}
+    "
+    role="progressbar"
+    aria-valuenow={indeterminate ? undefined : value}
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-label={progressAriaLabel}
+  >
+    <div
+      class="
+        progress-bar
+        {variantClasses}
+        {striped ? 'progress-striped' : ''}
+        {animated ? 'progress-animated' : ''}
+        {indeterminate ? 'progress-indeterminate' : ''}
+      "
+      style={indeterminate ? '' : `width: ${percentage}%`}
+    >
+      {#if showValue && valueInside}
+        <span class="progress-value {textSizeClasses}">
+          {formattedValue}
+        </span>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .progress-container {
+    @apply w-full;
+  }
+  
+  .progress-label {
+    @apply mb-1 font-medium text-text dark:text-text;
+  }
+  
+  .progress {
+    @apply w-full overflow-hidden rounded-full;
+  }
+  
+  .progress-bar {
+    @apply h-full rounded-full transition-all duration-300 ease-out;
+  }
+  
+  .progress-value {
+    @apply text-white dark:text-white font-medium px-2;
+    @apply flex items-center h-full;
+  }
+  
+  .progress-striped {
+    background-image: linear-gradient(
+      45deg,
+      rgba(255, 255, 255, 0.15) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, 0.15) 50%,
+      rgba(255, 255, 255, 0.15) 75%,
+      transparent 75%,
+      transparent
+    );
+    background-size: 1rem 1rem;
+  }
+  
+  .progress-animated {
+    animation: progress-stripes 1s linear infinite;
+  }
+  
+  .progress-indeterminate {
+    width: 50%;
+    animation: progress-indeterminate 1.5s ease-in-out infinite;
+  }
+  
+  @keyframes progress-stripes {
+    from {
+      background-position: 1rem 0;
+    }
+    to {
+      background-position: 0 0;
+    }
+  }
+  
+  @keyframes progress-indeterminate {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(200%);
+    }
+  }
+</style>

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

@@ -0,0 +1,61 @@
+export default Progress;
+type Progress = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Progress - A component for displaying progress bars and indicators.
+ * Provides consistent styling, accessibility features, and various display options.
+ *
+ * Usage:
+ * ```svelte
+ * <Progress value={75} />
+ *
+ * <Progress
+ * value={42}
+ * max={100}
+ * variant="primary"
+ * showValue
+ * />
+ *
+ * <Progress
+ * value={0.8}
+ * max={1}
+ * variant="success"
+ * size="lg"
+ * format={(v) => `${Math.round(v * 100)}%`}
+ * />
+ * ```
+ */
+declare const Progress: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    value?: number;
+    max?: number;
+    min?: number;
+    variant?: string;
+    size?: string;
+    showValue?: boolean;
+    valueInside?: boolean;
+    striped?: boolean;
+    animated?: boolean;
+    indeterminate?: boolean;
+    format: any;
+    ariaLabel: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    value?: number;
+    max?: number;
+    min?: number;
+    variant?: string;
+    size?: string;
+    showValue?: boolean;
+    valueInside?: boolean;
+    striped?: boolean;
+    animated?: boolean;
+    indeterminate?: boolean;
+    format: any;
+    ariaLabel: any;
+};