twintrinsic 0.0.1

package/dist/components/Separator/Separator.svelte

@@ -0,0 +1,109 @@
+<!--
+@component
+Separator - A visual divider that can be horizontal or vertical with optional text/icon content.
+
+Usage:
+```svelte
+<Separator />
+<Separator>or</Separator>
+<Separator vertical />
+<Separator>
+  <Icon name="star" />
+  Featured Content
+</Separator>
+```
+-->
+<script>
+const {
+  /** @type {boolean} - Whether the separator should be vertical */
+  vertical = false,
+
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - ARIA label */
+  ariaLabel,
+
+  /** @type {string} - Color variant */
+  color = "default",
+
+  /** @type {"div" | "hr"} - HTML element to render */
+  as,
+
+  children,
+} = $props()
+
+// Color variants mapping
+const colorClasses = {
+  default: "border-border",
+  primary: "border-primary-200 dark:border-primary-800",
+  success: "border-success/30",
+  warning: "border-warning/30",
+  error: "border-error/30",
+}
+
+// Determine if we have content and element type
+const hasContent = $derived(children !== undefined)
+const element = $derived(as ?? (hasContent ? "div" : "hr"))
+</script>
+
+<svelte:element
+  this={element}
+  class="separator {colorClasses[color]} {vertical ? 'separator-vertical' : 'separator-horizontal'} {hasContent ? 'separator-with-content' : ''} {className}"
+  role={element === 'div' ? 'separator' : undefined}
+  aria-orientation={vertical ? 'vertical' : 'horizontal'}
+  aria-label={ariaLabel}
+>
+  {#if hasContent}
+  <div class="separator-content">
+      {@render children()}
+  </div>
+  {/if}
+</svelte:element>
+
+<style>
+  @reference "../../twintrinsic.css";
+  /* Base separator styles */
+  .separator {
+    @apply relative border-0;
+  }
+
+  /* Horizontal separator */
+  .separator-horizontal {
+    @apply w-full h-px mt-4 mb-4;
+  }
+
+  .separator-horizontal:not(.separator-with-content) {
+    @apply border-t;
+  }
+
+  .separator-horizontal.separator-with-content {
+    @apply flex items-center text-center before:content-[''] after:content-[''];
+    @apply before:flex-1 before:border-t;
+    @apply after:flex-1 after:border-t;
+  }
+
+  /* Vertical separator */
+  .separator-vertical {
+    @apply h-full w-px mx-4 inline-block align-middle;
+  }
+
+  .separator-vertical:not(.separator-with-content) {
+    @apply border-l;
+  }
+
+  .separator-vertical.separator-with-content {
+    @apply flex flex-col items-center text-center before:content-[''] after:content-[''];
+    @apply before:flex-1 before:border-l;
+    @apply after:flex-1 after:border-l;
+  }
+
+  /* Content styles */
+  .separator-content {
+    @apply flex items-center gap-2 px-3 text-muted;
+  }
+
+  .separator-vertical .separator-content {
+    @apply py-3 px-0 rotate-180 [writing-mode:vertical-lr];
+  }
+</style>

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

@@ -0,0 +1,35 @@
+export default Separator;
+type Separator = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Separator - A visual divider that can be horizontal or vertical with optional text/icon content.
+ *
+ * Usage:
+ * ```svelte
+ * <Separator />
+ * <Separator>or</Separator>
+ * <Separator vertical />
+ * <Separator>
+ * <Icon name="star" />
+ * Featured Content
+ * </Separator>
+ * ```
+ */
+declare const Separator: import("svelte").Component<{
+    vertical?: boolean;
+    class?: string;
+    ariaLabel: any;
+    color?: string;
+    as: any;
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    vertical?: boolean;
+    class?: string;
+    ariaLabel: any;
+    color?: string;
+    as: any;
+    children: any;
+};

package/dist/components/Sidebar/Sidebar.svelte

@@ -0,0 +1,213 @@
+<!--
+@component
+Sidebar - A collapsible side panel that attaches to its parent container.
+Built on top of the Panel component with additional positioning and animation features.
+
+## Props
+- `expanded` - Initial expanded state (default: true)
+- `position` - Sidebar position: "left" or "right" (default: "left")
+- `width` - Width of the sidebar when expanded (default: "16rem")
+- `floatOnMobile` - Float above content on mobile instead of taking full width (default: false)
+- `disabled` - Disable toggle functionality (default: false)
+- `hideBackdrop` - Hide the backdrop overlay when expanded (default: false)
+- `id` - Custom element ID (default: random UUID)
+- `ariaLabel` - Accessibility label for the sidebar
+- `docked` - Reserved for future use
+- `class` - Additional CSS classes
+- `ontoggle` - Callback when sidebar is toggled
+
+## Slots
+- `header` - Header content for the Panel
+- `default` - Main sidebar content
+
+## Usage
+```svelte
+<Sidebar>
+  <svelte:fragment slot="header">Navigation</svelte:fragment>
+  <nav>Menu items here</nav>
+</Sidebar>
+
+<Sidebar position="right" expanded={false}>
+  <svelte:fragment slot="header">Settings</svelte:fragment>
+  Settings content
+</Sidebar>
+
+<Sidebar floatOnMobile>
+  <svelte:fragment slot="header">Mobile Menu</svelte:fragment>
+  Content that floats on mobile
+</Sidebar>
+```
+-->
+<script lang="ts">
+import { slide } from "svelte/transition"
+import Panel from "../Panel/Panel.svelte"
+
+/** Sidebar component props configuration */
+type SidebarProps = {
+  /** Initial expanded state */
+  expanded?: boolean
+  /** Additional CSS classes */
+  class?: string
+  /** Sidebar position: left or right */
+  position?: "left" | "right"
+  /** Width of the sidebar when expanded */
+  width?: string
+  /** Custom element ID (auto-generated if not provided) */
+  id?: string
+  /** Accessibility label for the sidebar */
+  ariaLabel?: string
+  /** Disable toggle functionality */
+  disabled?: boolean
+  /** Hide the backdrop overlay when expanded */
+  hideBackdrop?: boolean
+  /** Float above content on mobile instead of taking full width */
+  floatOnMobile?: boolean
+  /** Reserved for future use */
+  docked?: boolean
+  /** Callback when sidebar is toggled */
+  ontoggle?: (payload: { expanded: boolean }) => void
+}
+
+const {
+  expanded = true,
+  class: className = "",
+  position = "left",
+  width = "16rem",
+  id = crypto.randomUUID(),
+  ariaLabel,
+  disabled = false,
+  hideBackdrop = false,
+  floatOnMobile = false,
+  docked = false,
+  ontoggle,
+} = $props() satisfies SidebarProps
+
+let isExpanded = $state(false)
+let sidebarElement = $state()
+
+// Initialize and sync expanded state when prop changes
+$effect(() => {
+  isExpanded = expanded
+})
+
+/** Handle toggle events from the Panel component */
+function handleToggle(payload: { expanded: boolean }): void {
+  isExpanded = payload.expanded
+  ontoggle?.({ expanded: isExpanded })
+}
+
+/** Handle backdrop click to collapse the sidebar */
+function handleBackdropClick(): void {
+  if (!disabled) {
+    isExpanded = false
+    ontoggle?.({ expanded: isExpanded })
+  }
+}
+
+/** Handle Escape key to collapse the sidebar */
+function handleKeydown(event: KeyboardEvent): void {
+  if (!disabled && event.key === "Escape" && isExpanded) {
+    isExpanded = false
+    ontoggle?.({ expanded: isExpanded })
+  }
+}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div
+  class="
+    sidebar-container
+    {position === 'right' ? 'sidebar-right' : 'sidebar-left'}
+    {floatOnMobile ? 'sidebar-float-mobile' : ''}
+    {className}
+  "
+  style="--sidebar-width: {width}"
+  {id}
+  role="complementary"
+  aria-label={ariaLabel}
+>
+  {#if !hideBackdrop && isExpanded}
+    <div
+      class="sidebar-backdrop"
+      onclick={handleBackdropClick}
+      transition:slide={{ duration: 200 }}
+      aria-hidden="true"
+    ></div>
+  {/if}
+
+  <div
+    class="
+      sidebar
+      {isExpanded ? 'sidebar-expanded' : 'sidebar-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";
+  .sidebar-container {
+    @apply relative;
+  }
+
+  /* Base sidebar styles */
+  .sidebar {
+    @apply h-full bg-background transition-[width,transform] duration-200 ease-in-out;
+    width: var(--sidebar-width);
+  }
+
+  /* Left position styles */
+  .sidebar-left .sidebar {
+    @apply left-0;
+  }
+
+  .sidebar-left .sidebar-collapsed {
+    @apply -translate-x-full;
+  }
+
+  /* Right position styles */
+  .sidebar-right .sidebar {
+    @apply right-0;
+  }
+
+  .sidebar-right .sidebar-collapsed {
+    @apply translate-x-full;
+  }
+
+  /* Backdrop styles */
+  .sidebar-backdrop {
+    @apply fixed inset-0 bg-black/20 backdrop-blur-sm z-40;
+  }
+
+  /* Mobile styles */
+  @media (max-width: 640px) {
+    .sidebar-float-mobile .sidebar {
+      @apply fixed top-0 bottom-0 z-50;
+    }
+
+    .sidebar-float-mobile .sidebar-backdrop {
+      @apply z-40;
+    }
+  }
+
+  /* Non-floating mobile styles */
+  @media (max-width: 640px) {
+    .sidebar:not(.sidebar-float-mobile) {
+      @apply w-full;
+    }
+  }
+</style>

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

@@ -0,0 +1,60 @@
+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;
+}
+/**
+ * Sidebar - A collapsible side panel that attaches to its parent container.
+ * Built on top of the Panel component with additional positioning and animation features.
+ *
+ * ## Props
+ * - `expanded` - Initial expanded state (default: true)
+ * - `position` - Sidebar position: "left" or "right" (default: "left")
+ * - `width` - Width of the sidebar when expanded (default: "16rem")
+ * - `floatOnMobile` - Float above content on mobile instead of taking full width (default: false)
+ * - `disabled` - Disable toggle functionality (default: false)
+ * - `hideBackdrop` - Hide the backdrop overlay when expanded (default: false)
+ * - `id` - Custom element ID (default: random UUID)
+ * - `ariaLabel` - Accessibility label for the sidebar
+ * - `docked` - Reserved for future use
+ * - `class` - Additional CSS classes
+ * - `ontoggle` - Callback when sidebar is toggled
+ *
+ * ## Slots
+ * - `header` - Header content for the Panel
+ * - `default` - Main sidebar content
+ *
+ * ## Usage
+ * ```svelte
+ * <Sidebar>
+ * <svelte:fragment slot="header">Navigation</svelte:fragment>
+ * <nav>Menu items here</nav>
+ * </Sidebar>
+ *
+ * <Sidebar position="right" expanded={false}>
+ * <svelte:fragment slot="header">Settings</svelte:fragment>
+ * Settings content
+ * </Sidebar>
+ *
+ * <Sidebar floatOnMobile>
+ * <svelte:fragment slot="header">Mobile Menu</svelte:fragment>
+ * Content that floats on mobile
+ * </Sidebar>
+ * ```
+ */
+declare const Sidebar: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+}, {}, "">;
+type Sidebar = InstanceType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/Skeleton/Skeleton.svelte

@@ -0,0 +1,170 @@
+<!--
+@component
+Skeleton - A component for displaying loading placeholders.
+Provides consistent styling, accessibility features, and various shapes for content loading states.
+
+Usage:
+```svelte
+<Skeleton width="100%" height="20px" />
+
+<Skeleton variant="circle" size="40px" />
+
+<Skeleton variant="text" lines={3} />
+
+<div class="flex gap-4">
+  <Skeleton variant="circle" size="48px" />
+  <div class="flex-1">
+    <Skeleton variant="text" width="60%" />
+    <Skeleton variant="text" width="80%" />
+  </div>
+</div>
+```
+-->
+<script>
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - Shape variant (text, rectangle, circle, rounded) */
+  variant = "rectangle",
+
+  /** @type {string|number} - Width of the skeleton */
+  width = "100%",
+
+  /** @type {string|number} - Height of the skeleton */
+  height,
+
+  /** @type {string|number} - Size for circle and square variants (sets both width and height) */
+  size,
+
+  /** @type {number} - Number of lines for text variant */
+  lines = 1,
+
+  /** @type {boolean} - Whether to show the animation */
+  animated = true,
+
+  /** @type {string} - ARIA label for accessibility */
+  ariaLabel = "Loading content",
+} = $props()
+
+// Determine height based on variant
+const computedHeight = $derived(
+  (() => {
+    if (height) return height
+    if (size) return size
+
+    return (
+      {
+        text: "1em",
+        rectangle: "100px",
+        circle: "40px",
+        rounded: "40px",
+      }[variant] || "100px"
+    )
+  })()
+)
+
+// Determine width based on variant
+const computedWidth = $derived(
+  (() => {
+    if (width) return width
+    if (size) return size
+    if (variant === "circle") return computedHeight
+
+    return "100%"
+  })()
+)
+
+// Determine border radius based on variant
+const borderRadius = $derived(
+  {
+    text: "4px",
+    rectangle: "0",
+    circle: "50%",
+    rounded: "8px",
+  }[variant] || "0"
+)
+
+// Generate array for multiple lines
+const lineArray = $derived(Array.from({ length: lines }))
+
+// Determine if we should render multiple lines
+const isMultiLine = $derived(variant === "text" && lines > 1)
+</script>
+
+{#if isMultiLine}
+  <div 
+    {id}
+    class="skeleton-group {className}"
+    role="status"
+    aria-label={ariaLabel}
+  >
+    {#each lineArray as _, i}
+      <div
+        class="
+          skeleton
+          skeleton-{variant}
+          {animated ? 'skeleton-animated' : ''}
+        "
+        style="
+          width: {i === lineArray.length - 1 && lineArray.length > 1 ? '80%' : computedWidth};
+          height: {computedHeight};
+          border-radius: {borderRadius};
+          margin-bottom: {i === lineArray.length - 1 ? '0' : '0.5rem'};
+        "
+        aria-hidden="true"
+      ></div>
+    {/each}
+    <span class="sr-only">{ariaLabel}</span>
+  </div>
+{:else}
+  <div
+    {id}
+    class="
+      skeleton
+      skeleton-{variant}
+      {animated ? 'skeleton-animated' : ''}
+      {className}
+    "
+    style="
+      width: {computedWidth};
+      height: {computedHeight};
+      border-radius: {borderRadius};
+    "
+    role="status"
+    aria-label={ariaLabel}
+  >
+    <span class="sr-only">{ariaLabel}</span>
+  </div>
+{/if}
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .skeleton {
+    @apply bg-muted/10 dark:bg-muted/10;
+    @apply inline-block;
+  }
+  
+  .skeleton-group {
+    @apply w-full;
+  }
+  
+  .skeleton-animated {
+    @apply relative overflow-hidden;
+    @apply before:absolute before:inset-0;
+    @apply before:translate-x-[-100%];
+    @apply before:animate-[skeleton-loading_1.5s_infinite];
+    @apply before:bg-gradient-to-r;
+    @apply before:from-transparent before:via-muted/20 before:to-transparent;
+  }
+  
+  @keyframes skeleton-loading {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+</style>

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

@@ -0,0 +1,48 @@
+export default Skeleton;
+type Skeleton = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Skeleton - A component for displaying loading placeholders.
+ * Provides consistent styling, accessibility features, and various shapes for content loading states.
+ *
+ * Usage:
+ * ```svelte
+ * <Skeleton width="100%" height="20px" />
+ *
+ * <Skeleton variant="circle" size="40px" />
+ *
+ * <Skeleton variant="text" lines={3} />
+ *
+ * <div class="flex gap-4">
+ * <Skeleton variant="circle" size="48px" />
+ * <div class="flex-1">
+ *   <Skeleton variant="text" width="60%" />
+ *   <Skeleton variant="text" width="80%" />
+ * </div>
+ * </div>
+ * ```
+ */
+declare const Skeleton: import("svelte").Component<{
+    class?: string;
+    id?: any;
+    variant?: string;
+    width?: string;
+    height: any;
+    size: any;
+    lines?: number;
+    animated?: boolean;
+    ariaLabel?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    id?: any;
+    variant?: string;
+    width?: string;
+    height: any;
+    size: any;
+    lines?: number;
+    animated?: boolean;
+    ariaLabel?: string;
+};