twintrinsic 0.0.1

package/dist/components/Badge/Badge.svelte

@@ -0,0 +1,186 @@
+<!--
+@component
+Badge - A component for displaying small counts, status indicators, or labels.
+Provides consistent styling, accessibility features, and various display options.
+
+Usage:
+```svelte
+<Badge>New</Badge>
+
+<Badge variant="primary" size="lg">42</Badge>
+
+<Badge variant="success" dot>Online</Badge>
+
+<Button>
+  Notifications
+  <Badge variant="error">5</Badge>
+</Button>
+```
+-->
+<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 badge (sm, md, lg) */
+  size = "md",
+
+  /** @type {boolean} - Whether to show as a dot indicator */
+  dot = false,
+
+  /** @type {boolean} - Whether to show as a pill shape */
+  pill = false,
+
+  /** @type {boolean} - Whether to show as an outline */
+  outline = false,
+
+  /** @type {boolean} - Whether to add a subtle pulse animation */
+  pulse = false,
+
+  /** @type {boolean} - Whether to hide when content is empty */
+  hideEmpty = false,
+
+  /** @type {boolean} - Whether to position as an absolute overlay */
+  overlay = false,
+
+  /** @type {string} - Position when used as overlay (top-right, top-left, etc.) */
+  position = "top-right",
+
+  children,
+} = $props()
+
+// Determine if badge should be hidden
+const isEmpty = $derived(!children || children().toString().trim() === "")
+const isHidden = $derived(hideEmpty && isEmpty)
+
+// Determine variant classes
+const variantClasses = $derived(
+  {
+    default: "bg-muted/20 text-muted dark:bg-muted/20 dark:text-muted",
+    primary: "bg-primary-500 text-white dark:bg-primary-500 dark:text-white",
+    secondary: "bg-secondary-500 text-white dark:bg-secondary-500 dark:text-white",
+    success: "bg-success-500 text-white dark:bg-success-500 dark:text-white",
+    warning: "bg-warning-500 text-white dark:bg-warning-500 dark:text-white",
+    error: "bg-error-500 text-white dark:bg-error-500 dark:text-white",
+    info: "bg-info-500 text-white dark:bg-info-500 dark:text-white",
+  }[variant] || "bg-muted/20 text-muted dark:bg-muted/20 dark:text-muted"
+)
+
+// Determine outline variant classes
+const outlineClasses = $derived(
+  outline
+    ? {
+        default: "bg-transparent border border-muted text-muted dark:border-muted dark:text-muted",
+        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]
+    : ""
+)
+
+// Determine size classes
+const sizeClasses = $derived(
+  {
+    sm: "text-xs px-1.5 py-0.5 min-w-4 h-4",
+    md: "text-xs px-2 py-0.5 min-w-5 h-5",
+    lg: "text-sm px-2.5 py-0.5 min-w-6 h-6",
+  }[size] || "text-xs px-2 py-0.5 min-w-5 h-5"
+)
+
+// Determine dot size classes
+const dotSizeClasses = $derived(
+  {
+    sm: "w-2 h-2",
+    md: "w-2.5 h-2.5",
+    lg: "w-3 h-3",
+  }[size] || "w-2.5 h-2.5"
+)
+
+// Determine position classes for overlay
+const positionClasses = $derived(
+  overlay
+    ? {
+        "top-right": "absolute -top-1 -right-1",
+        "top-left": "absolute -top-1 -left-1",
+        "bottom-right": "absolute -bottom-1 -right-1",
+        "bottom-left": "absolute -bottom-1 -left-1",
+      }[position] || "absolute -top-1 -right-1"
+    : ""
+)
+</script>
+
+{#if !isHidden}
+  <span
+    {id}
+    class="
+      badge
+      {dot ? 'badge-dot' : ''}
+      {pill ? 'badge-pill' : ''}
+      {pulse ? 'badge-pulse' : ''}
+      {overlay ? 'badge-overlay' : ''}
+      {outline ? outlineClasses : variantClasses}
+      {dot ? dotSizeClasses : sizeClasses}
+      {positionClasses}
+      {className}
+    "
+    role={dot ? 'status' : 'status'}
+    aria-label={dot ? 'Status indicator' : undefined}
+  >
+    {#if !dot}
+      {@render children?.()}
+    {/if}
+  </span>
+{/if}
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .badge {
+    @apply inline-flex items-center justify-center;
+    @apply font-medium leading-none;
+    @apply rounded;
+  }
+  
+  .badge-pill {
+    @apply rounded-full;
+  }
+  
+  .badge-dot {
+    @apply rounded-full;
+    @apply flex-shrink-0;
+  }
+  
+  .badge-overlay {
+    @apply z-10;
+  }
+  
+  .badge-pulse {
+    animation: badge-pulse 1.5s infinite;
+  }
+  
+  @keyframes badge-pulse {
+    0% {
+      box-shadow: 0 0 0 0 rgba(var(--color-primary-500-rgb), 0.4);
+    }
+    70% {
+      box-shadow: 0 0 0 6px rgba(var(--color-primary-500-rgb), 0);
+    }
+    100% {
+      box-shadow: 0 0 0 0 rgba(var(--color-primary-500-rgb), 0);
+    }
+  }
+</style>

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

@@ -0,0 +1,51 @@
+export default Badge;
+type Badge = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Badge - A component for displaying small counts, status indicators, or labels.
+ * Provides consistent styling, accessibility features, and various display options.
+ *
+ * Usage:
+ * ```svelte
+ * <Badge>New</Badge>
+ *
+ * <Badge variant="primary" size="lg">42</Badge>
+ *
+ * <Badge variant="success" dot>Online</Badge>
+ *
+ * <Button>
+ * Notifications
+ * <Badge variant="error">5</Badge>
+ * </Button>
+ * ```
+ */
+declare const Badge: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    variant?: string;
+    size?: string;
+    dot?: boolean;
+    pill?: boolean;
+    outline?: boolean;
+    pulse?: boolean;
+    hideEmpty?: boolean;
+    overlay?: boolean;
+    position?: string;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    variant?: string;
+    size?: string;
+    dot?: boolean;
+    pill?: boolean;
+    outline?: boolean;
+    pulse?: boolean;
+    hideEmpty?: boolean;
+    overlay?: boolean;
+    position?: string;
+    children: any;
+};

package/dist/components/BottomBar/BottomBar.svelte

@@ -0,0 +1,146 @@
+<!--
+@component
+BottomBar - A collapsible bottom panel that attaches to its parent container.
+Built on top of the Panel component with additional positioning and animation features.
+
+Usage:
+```svelte
+<BottomBar>
+  <svelte:fragment slot="header">Details</svelte:fragment>
+  Content here
+</BottomBar>
+
+<BottomBar expanded={false} height="20rem">
+  <svelte:fragment slot="header">Console</svelte:fragment>
+  Console output here
+</BottomBar>
+```
+-->
+<script lang="ts">
+import { slide } from "svelte/transition"
+import Panel from "../Panel/Panel.svelte"
+
+type BottomBarProps = {
+  expanded?: boolean
+  class?: string
+  height?: string
+  id?: string
+  ariaLabel?: string
+  disabled?: boolean
+  floatOnMobile?: boolean
+  docked?: boolean
+  ontoggle?: (payload: { expanded: boolean }) => void
+}
+
+const {
+  expanded = true,
+  class: className = "",
+  height = "16rem",
+  id = crypto.randomUUID(),
+  ariaLabel,
+  disabled = false,
+  floatOnMobile = true,
+  docked = false,
+  ontoggle,
+} = $props() satisfies BottomBarProps
+
+let isExpanded = $state(false)
+let bottomBarElement = $state()
+
+// Initialize and sync expanded state when prop changes
+$effect(() => {
+  isExpanded = expanded
+})
+
+// Handle toggle from Panel
+function handleToggle(payload: { expanded: boolean }) {
+  isExpanded = payload.expanded
+  ontoggle?.({ expanded: isExpanded })
+}
+
+// Handle escape key
+function handleKeydown(event: KeyboardEvent) {
+  if (!disabled && event.key === "Escape" && isExpanded) {
+    isExpanded = false
+    ontoggle?.({ expanded: isExpanded })
+  }
+}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div
+  class="
+    bottombar-container
+    {docked ? 'bottombar-docked' : ''}
+    {floatOnMobile ? 'bottombar-float-mobile' : ''}
+    {className}
+  "
+  style="--bottombar-height: {height}"
+  {id}
+  role="complementary"
+  aria-label={ariaLabel}
+>
+  <div
+    class="
+      bottombar
+      {isExpanded ? 'bottombar-expanded' : 'bottombar-collapsed'}
+    "
+    role="region"
+    aria-labelledby="{id}-header"
+  >
+    <Panel
+      expanded={isExpanded}
+      {disabled}
+      bordered={false}
+      ontoggle={handleToggle}
+    >
+      <svelte:fragment slot="header">
+        <slot name="header" />
+      </svelte:fragment>
+      <slot />
+    </Panel>
+  </div>
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  .bottombar-container {
+    @apply relative w-full;
+  }
+
+  /* Base bottombar styles */
+  .bottombar {
+    @apply bg-background transition-[height,transform] duration-200 ease-in-out overflow-hidden;
+    height: var(--bottombar-height);
+  }
+
+  /* Collapsed state */
+  .bottombar-collapsed {
+    @apply translate-y-full;
+  }
+
+  /* Expanded state */
+  .bottombar-expanded {
+    @apply translate-y-0;
+  }
+
+  /* Docked styles */
+  .bottombar-docked {
+    @apply fixed bottom-0 left-0 right-0 z-50;
+  }
+
+  /* Mobile styles */
+  @media (max-width: 640px) {
+    .bottombar-float-mobile .bottombar {
+      @apply fixed bottom-0 left-0 right-0 z-50;
+    }
+  }
+
+  /* Non-floating mobile styles */
+  @media (max-width: 640px) {
+    .bottombar:not(.bottombar-float-mobile) {
+      @apply w-full;
+    }
+  }
+</style>

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

@@ -0,0 +1,38 @@
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * BottomBar - A collapsible bottom panel that attaches to its parent container.
+ * Built on top of the Panel component with additional positioning and animation features.
+ *
+ * Usage:
+ * ```svelte
+ * <BottomBar>
+ * <svelte:fragment slot="header">Details</svelte:fragment>
+ * Content here
+ * </BottomBar>
+ *
+ * <BottomBar expanded={false} height="20rem">
+ * <svelte:fragment slot="header">Console</svelte:fragment>
+ * Console output here
+ * </BottomBar>
+ * ```
+ */
+declare const BottomBar: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+}, {}, "">;
+type BottomBar = InstanceType<typeof BottomBar>;
+export default BottomBar;

package/dist/components/Breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,77 @@
+<!--
+@component
+Breadcrumb - A navigation component that helps users understand their location in a website or application.
+Provides a hierarchical trail of links with proper accessibility features.
+
+Usage:
+```svelte
+<Breadcrumb>
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbItem href="/products">Products</BreadcrumbItem>
+  <BreadcrumbItem>Current Page</BreadcrumbItem>
+</Breadcrumb>
+
+<Breadcrumb separator="/">
+  <BreadcrumbItem href="/">Home</BreadcrumbItem>
+  <BreadcrumbItem href="/docs">Documentation</BreadcrumbItem>
+  <BreadcrumbItem>Components</BreadcrumbItem>
+</Breadcrumb>
+```
+-->
+<script>
+import { setContext } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - Separator character or HTML between items */
+  separator = "/",
+
+  /** @type {string} - ARIA label for the breadcrumb */
+  ariaLabel = "Breadcrumb",
+
+  /** @type {boolean} - Whether to collapse long breadcrumbs with ellipsis */
+  collapsible = false,
+
+  /** @type {number} - Maximum visible items when collapsed (excluding first and last) */
+  maxVisibleItems = 1,
+
+  children,
+} = $props()
+
+// Provide context for child components
+$effect(() => {
+  const breadcrumbContext = {
+    separator,
+    collapsible,
+    maxVisibleItems,
+  }
+  setContext("breadcrumb", breadcrumbContext)
+})
+</script>
+
+<nav
+  {id}
+  class="breadcrumb {className}"
+  aria-label={ariaLabel}
+>
+  <ol class="breadcrumb-list">
+    {@render children?.()}
+  </ol>
+</nav>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .breadcrumb {
+    @apply w-full;
+  }
+  
+  .breadcrumb-list {
+    @apply flex flex-wrap items-center;
+  }
+</style>

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

@@ -0,0 +1,42 @@
+export default Breadcrumb;
+type Breadcrumb = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Breadcrumb - A navigation component that helps users understand their location in a website or application.
+ * Provides a hierarchical trail of links with proper accessibility features.
+ *
+ * Usage:
+ * ```svelte
+ * <Breadcrumb>
+ * <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ * <BreadcrumbItem href="/products">Products</BreadcrumbItem>
+ * <BreadcrumbItem>Current Page</BreadcrumbItem>
+ * </Breadcrumb>
+ *
+ * <Breadcrumb separator="/">
+ * <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ * <BreadcrumbItem href="/docs">Documentation</BreadcrumbItem>
+ * <BreadcrumbItem>Components</BreadcrumbItem>
+ * </Breadcrumb>
+ * ```
+ */
+declare const Breadcrumb: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    separator?: string;
+    ariaLabel?: string;
+    collapsible?: boolean;
+    maxVisibleItems?: number;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    separator?: string;
+    ariaLabel?: string;
+    collapsible?: boolean;
+    maxVisibleItems?: number;
+    children: any;
+};

package/dist/components/Breadcrumb/BreadcrumbItem.svelte

@@ -0,0 +1,171 @@
+<!--
+@component
+BreadcrumbItem - An individual item within a Breadcrumb component.
+Renders as a link when href is provided, otherwise as a span for the current page.
+
+Usage:
+```svelte
+<BreadcrumbItem href="/">Home</BreadcrumbItem>
+
+<BreadcrumbItem href="/products" icon="<svg>...</svg>">
+  Products
+</BreadcrumbItem>
+
+<BreadcrumbItem>Current Page</BreadcrumbItem>
+```
+-->
+<script>
+import { getContext, onMount } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - Link URL (if item is a link) */
+  href,
+
+  /** @type {string} - Link target (_blank, _self, etc.) */
+  target,
+
+  /** @type {string} - Icon to display (HTML or SVG string) */
+  icon,
+
+  /** @type {boolean} - Whether this is the current/active page */
+  current = false,
+
+  /** @type {boolean} - Whether this item should be hidden when collapsed */
+  collapsible = true,
+
+  children,
+} = $props()
+
+// Get breadcrumb context
+const breadcrumbContext = getContext("breadcrumb")
+
+// Get separator from context
+const separator = breadcrumbContext?.separator || "/"
+
+// Component state
+let itemElement
+let index = $state(-1)
+let isVisible = $state(true)
+
+// Register with parent on mount
+onMount(() => {
+  if (itemElement) {
+    // Find our index among siblings
+    const parent = itemElement.parentElement
+    if (parent) {
+      const items = Array.from(parent.children)
+      index = items.indexOf(itemElement)
+
+      // Check if we should be visible based on collapsible settings
+      if (breadcrumbContext?.collapsible && collapsible) {
+        const maxVisible = breadcrumbContext.maxVisibleItems || 1
+        const totalItems = items.length
+
+        // Always show first and last items
+        if (index === 0 || index === totalItems - 1) {
+          isVisible = true
+        } else {
+          // For middle items, only show up to maxVisible
+          const middleItems = totalItems - 2 // excluding first and last
+
+          if (middleItems <= maxVisible) {
+            // If we have fewer middle items than max, show all
+            isVisible = true
+          } else {
+            // Otherwise, only show the first maxVisible middle items
+            isVisible = index <= maxVisible
+          }
+        }
+      }
+    }
+  }
+})
+
+// Determine if this is the last item
+const isLast = $derived(index === -1 || !itemElement?.nextElementSibling)
+
+// Determine if this is the current page
+const isCurrent = $derived(current || isLast)
+</script>
+
+<li 
+  class="
+    breadcrumb-item
+    {isCurrent ? 'breadcrumb-item-current' : ''}
+    {isVisible ? '' : 'breadcrumb-item-hidden'}
+    {className}
+  "
+  aria-current={isCurrent ? 'page' : undefined}
+  bind:this={itemElement}
+>
+  {#if href && !isCurrent}
+    <a 
+      {href}
+      {target}
+      class="breadcrumb-link"
+    >
+      {#if icon}
+        <span class="breadcrumb-icon" aria-hidden="true">
+          {@html icon}
+        </span>
+      {/if}
+      <span class="breadcrumb-text">
+        {@render children?.()}
+      </span>
+    </a>
+  {:else}
+    <span class="breadcrumb-text">
+      {#if icon}
+        <span class="breadcrumb-icon" aria-hidden="true">
+          {@html icon}
+        </span>
+      {/if}
+      {@render children?.()}
+    </span>
+  {/if}
+  
+  {#if !isLast}
+    <span class="breadcrumb-separator" aria-hidden="true">
+      {@html separator}
+    </span>
+  {/if}
+</li>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .breadcrumb-item {
+    @apply flex items-center;
+  }
+  
+  .breadcrumb-item-hidden {
+    @apply hidden;
+  }
+  
+  .breadcrumb-link {
+    @apply inline-flex items-center;
+    @apply text-primary-600 dark:text-primary-400;
+    @apply hover:text-primary-700 dark:hover:text-primary-300 hover:underline;
+    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-2 rounded-sm;
+    @apply transition-colors duration-150;
+  }
+  
+  .breadcrumb-text {
+    @apply inline-flex items-center;
+  }
+  
+  .breadcrumb-item-current .breadcrumb-text {
+    @apply font-medium text-text dark:text-text;
+  }
+  
+  .breadcrumb-separator {
+    @apply mx-2 text-muted dark:text-muted;
+  }
+  
+  .breadcrumb-icon {
+    @apply mr-1 w-4 h-4;
+  }
+</style>