fancy-ui-svelte 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 RamaHerbin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,198 @@
+# fancy-ui
+
+Beautiful animation and UI components for **Svelte 5**.
+
+![Svelte 5](https://img.shields.io/badge/Svelte-5-FF3E00?logo=svelte&logoColor=white)
+![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4-06B6D4?logo=tailwindcss&logoColor=white)
+![TypeScript](https://img.shields.io/badge/TypeScript-5-3178C6?logo=typescript&logoColor=white)
+![Components](https://img.shields.io/badge/Components-52-8B5CF6)
+![MIT License](https://img.shields.io/badge/License-MIT-green)
+
+<p align="center">
+  <a href="https://fancy-ui.rama.app">
+    <img src=".github/demo-gallery.png" alt="fancy-ui demo gallery" width="800" />
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://fancy-ui.rama.app"><strong>Live Demo</strong></a>
+</p>
+
+## Features
+
+- **Svelte 5 Runes** &mdash; Built with `$state`, `$derived`, `$effect`, and `$props`
+- **Tailwind CSS 4** &mdash; Utility-first styling with theme tokens
+- **TypeScript** &mdash; Fully typed props and events
+- **52 Components** &mdash; Buttons, text animations, backgrounds, effects, and more
+- **Dark Mode** &mdash; All components support light and dark themes
+- **Tested** &mdash; Component tests with Vitest and Testing Library
+
+## Components
+
+### Buttons
+
+| Component | Description | Demo |
+|-----------|-------------|------|
+| RainbowButton | Animated rainbow gradient border effect | [Demo](https://fancy-ui.rama.app/demo/rainbow-button) |
+| RippleButton | Ripple click effect | [Demo](https://fancy-ui.rama.app/demo/ripple-button) |
+| ShimmerButton | Rotating conic-gradient shimmer border | [Demo](https://fancy-ui.rama.app/demo/shimmer-button) |
+| GradientButton | Rotating conic-gradient rainbow border | [Demo](https://fancy-ui.rama.app/demo/gradient-button) |
+| InteractiveHoverButton | Hover effect revealing alternate content | [Demo](https://fancy-ui.rama.app/demo/interactive-hover-button) |
+
+### Cards
+
+| Component | Description | Demo |
+|-----------|-------------|------|
+| Card3D | 3D tilt card with mouse tracking | [Demo](https://fancy-ui.rama.app/demo/card-3d) |
+| CardSpotlight | Spotlight effect following mouse | [Demo](https://fancy-ui.rama.app/demo/card-spotlight) |
+| DirectionAwareHover | Overlay slides in from mouse entry direction | [Demo](https://fancy-ui.rama.app/demo/direction-aware-hover) |
+| FlipCard | Two-sided card with flip animation | [Demo](https://fancy-ui.rama.app/demo/flip-card) |
+| GlareCard | Glare reflection effect on hover | [Demo](https://fancy-ui.rama.app/demo/glare-card) |
+| TextRevealCard | Text reveal on hover | [Demo](https://fancy-ui.rama.app/demo/text-reveal-card) |
+
+### Text & Typography
+
+| Component | Description | Demo |
+|-----------|-------------|------|
+| BlurReveal | Scroll-triggered blur-to-clear reveal | [Demo](https://fancy-ui.rama.app/demo/blur-reveal) |
+| BoxReveal | Sliding colored box reveal animation | [Demo](https://fancy-ui.rama.app/demo/box-reveal) |
+| ColourfulText | Per-character color animation | [Demo](https://fancy-ui.rama.app/demo/colourful-text) |
+| ContainerTextFlip | Text flipping inside a container | [Demo](https://fancy-ui.rama.app/demo/container-text-flip) |
+| FlipWords | Cycling word animation with per-letter effects | [Demo](https://fancy-ui.rama.app/demo/flip-words) |
+| HyperText | Character scramble on hover | [Demo](https://fancy-ui.rama.app/demo/hyper-text) |
+| LetterPullup | Staggered letter pull-up animation | [Demo](https://fancy-ui.rama.app/demo/letter-pullup) |
+| LineShadowText | Text with animated line shadow | [Demo](https://fancy-ui.rama.app/demo/line-shadow-text) |
+| NumberTicker | Animated number counter with easing | [Demo](https://fancy-ui.rama.app/demo/number-ticker) |
+| SparklesText | Animated SVG sparkle stars overlay | [Demo](https://fancy-ui.rama.app/demo/sparkles-text) |
+| TextGenerateEffect | Word-by-word text generation effect | [Demo](https://fancy-ui.rama.app/demo/text-generate-effect) |
+
+### Backgrounds
+
+| Component | Description | Demo |
+|-----------|-------------|------|
+| FallingStarsBg | Canvas 3D starfield with motion trails | [Demo](https://fancy-ui.rama.app/demo/bg-falling-stars) |
+| FlickeringGrid | Canvas grid with flickering opacity | [Demo](https://fancy-ui.rama.app/demo/flickering-grid) |
+| InteractiveGridPattern | SVG grid with hover highlights | [Demo](https://fancy-ui.rama.app/demo/interactive-grid-pattern) |
+| StarsBackground | Starfield with parallax mouse tracking | [Demo](https://fancy-ui.rama.app/demo/bg-stars) |
+
+### Effects & Animations
+
+| Component | Description | Demo |
+|-----------|-------------|------|
+| AnimatedBeam | SVG beams connecting elements | [Demo](https://fancy-ui.rama.app/demo/animated-beam) |
+| BorderBeam | Beam effect traveling around borders | [Demo](https://fancy-ui.rama.app/demo/border-beam) |
+| Confetti | Configurable confetti burst | [Demo](https://fancy-ui.rama.app/demo/confetti) |
+| FluidCursor | WebGL fluid simulation following cursor | [Demo](https://fancy-ui.rama.app/demo/fluid-cursor) |
+| GlowBorder | Animated glowing border with gradients | [Demo](https://fancy-ui.rama.app/demo/glow-border) |
+| GlowingEffect | Glowing highlight on hover | [Demo](https://fancy-ui.rama.app/demo/glowing-effect) |
+| ImageTrailCursor | Cursor-following image trail (8 variants) | [Demo](https://fancy-ui.rama.app/demo/image-trail-cursor) |
+| LiquidGlass | Liquid glass morphism effect | [Demo](https://fancy-ui.rama.app/demo/liquid-glass) |
+| Meteors | Animated meteor shower effect | [Demo](https://fancy-ui.rama.app/demo/meteors) |
+| NeonBorder | Dual-color neon glow border | [Demo](https://fancy-ui.rama.app/demo/neon-border) |
+| Ripple | Expanding ripple rings | [Demo](https://fancy-ui.rama.app/demo/ripple) |
+| SmoothCursor | Smooth lagging cursor follower | [Demo](https://fancy-ui.rama.app/demo/smooth-cursor) |
+| Sparkles | Particle sparkle canvas | [Demo](https://fancy-ui.rama.app/demo/sparkles) |
+| TracingBeam | Scroll-driven tracing beam | [Demo](https://fancy-ui.rama.app/demo/tracing-beam) |
+
+### Layout
+
+| Component | Description | Demo |
+|-----------|-------------|------|
+| BentoGrid | Bento-style responsive grid layout | [Demo](https://fancy-ui.rama.app/demo/bento-grid) |
+| Book | 3D book flip animation | [Demo](https://fancy-ui.rama.app/demo/book) |
+| ContainerScroll | 3D scroll perspective container | [Demo](https://fancy-ui.rama.app/demo/container-scroll) |
+| Focus | Focus-expand card layout | [Demo](https://fancy-ui.rama.app/demo/focus) |
+| Marquee | Infinite scrolling for text, images, or cards | [Demo](https://fancy-ui.rama.app/demo/marquee) |
+
+### Navigation & Display
+
+| Component | Description | Demo |
+|-----------|-------------|------|
+| AnimatedTooltip | Avatar row with mouse-following tooltips | [Demo](https://fancy-ui.rama.app/demo/animated-tooltip) |
+| Compare | Before/after image comparison slider | [Demo](https://fancy-ui.rama.app/demo/compare) |
+| Dock | macOS-style dock with icon magnification | [Demo](https://fancy-ui.rama.app/demo/dock) |
+| LogoCloud | Marquee, grid, and icon logo layouts | [Demo](https://fancy-ui.rama.app/demo/logo-cloud) |
+| Timeline | Vertical timeline with scroll-driven progress | [Demo](https://fancy-ui.rama.app/demo/timeline) |
+
+## Quick Start
+
+> **Status:** Pre-release. No npm package yet — components are available via copy-paste
+> or by cloning the repo. A registry-based install (`npx shadcn-svelte@latest add`) is
+> planned for v0.2.
+
+**Browse and copy a component:**
+1. Find the component you need in the [live demo](https://fancy-ui.rama.app)
+2. Copy the source from `src/lib/fancy-ui/[component-name]/`
+3. Paste into your project
+
+**Or clone the full demo locally:**
+
+```bash
+git clone https://github.com/RamaHerbin/fancy-ui.git
+cd fancy-ui
+pnpm install
+pnpm dev
+```
+
+## Development
+
+```bash
+pnpm dev          # Start dev server
+pnpm check        # Run Svelte type checker
+pnpm test         # Run tests
+pnpm test:watch   # Run tests in watch mode
+pnpm build        # Production build
+```
+
+## Project Structure
+
+```
+src/
+├── lib/
+│   ├── fancy-ui/          # UI components (one folder per component)
+│   │   ├── rainbow-button/
+│   │   │   ├── RainbowButton.svelte
+│   │   │   ├── RainbowButton.test.ts
+│   │   │   ├── index.ts
+│   │   │   └── README.md
+│   │   ├── registry.ts    # Component registry & metadata
+│   │   └── index.ts       # Barrel exports
+│   └── components/ui/     # shadcn-svelte primitives
+├── routes/
+│   ├── +page.svelte       # Home page
+│   └── demo/              # Component demo pages
+│       └── [component]/+page.svelte
+└── tests/
+```
+
+## Contributing
+
+Contributions are welcome! 52 components and counting — PRs for new components, bug fixes, and improvements are appreciated.
+
+### Adding a new component
+
+1. Create the component folder under `src/lib/fancy-ui/`
+2. Implement the component in idiomatic Svelte 5
+3. Add a demo page at `src/routes/demo/[slug]/+page.svelte`
+4. Register it in `src/lib/fancy-ui/registry.ts`
+5. Export it from `src/lib/fancy-ui/index.ts`
+
+## Tech Stack
+
+| Technology | Version | Purpose |
+|------------|---------|---------|
+| [Svelte](https://svelte.dev) | 5 | UI framework |
+| [SvelteKit](https://svelte.dev/docs/kit) | 2 | App framework |
+| [Tailwind CSS](https://tailwindcss.com) | 4 | Styling |
+| [TypeScript](https://www.typescriptlang.org) | 5 | Type safety |
+| [Vitest](https://vitest.dev) | 4 | Testing |
+| [bits-ui](https://bits-ui.com) | 2 | Headless primitives |
+| [GSAP](https://gsap.com) | 3 | Advanced animations |
+
+## Credits
+
+Inspired by [Inspira UI](https://inspira-ui.com), [Aceternity UI](https://ui.aceternity.com) and [Magic UI](https://magicui.design).
+
+## License
+
+MIT

package/dist/fancy-ui/_template/Component.svelte

@@ -0,0 +1,110 @@
+<!--
+  TEMPLATE: Component.svelte
+
+  Instructions:
+  1. Copy this entire folder to src/lib/fancy-ui/[component-name]/
+  2. Rename this file to [ComponentName].svelte (PascalCase)
+  3. Replace all [ComponentName] placeholders with actual name
+  4. Replace all [component-name] placeholders with kebab-case name
+  5. Update props interface based on the reference design
+  6. Implement the component logic
+  7. Delete this comment block when done
+-->
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	/**
+	 * Props for [ComponentName]
+	 *
+	 * Update this interface based on the reference design's props.
+	 * Use JSDoc comments for each prop to enable IDE documentation.
+	 */
+	export interface ComponentNameProps {
+		/** Additional CSS classes */
+		class?: string;
+		/** Component content */
+		children?: Snippet;
+		// TODO: Add component-specific props here
+		// Example:
+		// /** Animation duration in seconds */
+		// duration?: number;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from "../../utils.js";
+
+	let {
+		class: className,
+		children,
+		// TODO: Destructure additional props with defaults
+		...restProps
+	}: ComponentNameProps = $props();
+
+	// ==========================================================================
+	// Reactive State
+	// Use $state() for mutable reactive values
+	// ==========================================================================
+	// let isActive = $state(false);
+
+	// ==========================================================================
+	// Derived Values
+	// Use $derived() for computed values that depend on props or state
+	// ==========================================================================
+	// const computedValue = $derived(someProp * 2);
+
+	// ==========================================================================
+	// Effects
+	// Use $effect() for side effects (DOM manipulation, subscriptions, etc.)
+	// ==========================================================================
+	// $effect(() => {
+	//   // Runs when dependencies change
+	//   return () => {
+	//     // Cleanup function (optional)
+	//   };
+	// });
+
+	// ==========================================================================
+	// Event Handlers
+	// Define handlers as functions, use onclick={handler} syntax in template
+	// ==========================================================================
+	// function handleClick(event: MouseEvent) {
+	//   event.preventDefault();
+	//   // Handle click
+	// }
+</script>
+
+<!--
+  Template Structure:
+  - Use semantic HTML elements
+  - Apply cn() for class merging with className prop
+  - Use {@render children?.()} for slot content
+  - Use Svelte 5 event syntax: onclick={handler}
+-->
+<div
+	class={cn(
+		// Base styles
+		"relative",
+		// TODO: Add component styles using Tailwind classes
+		// Prefer theme tokens: bg-background, text-foreground, border-border, etc.
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
+
+<style>
+	/*
+	 * Component-scoped styles
+	 *
+	 * Use this section for:
+	 * - CSS animations (@keyframes)
+	 * - CSS custom properties (--component-*)
+	 * - Complex selectors that can't be done with Tailwind
+	 *
+	 * Prefer Tailwind classes in the template when possible.
+	 * Use :global() sparingly for animation classes.
+	 */
+</style>

package/dist/fancy-ui/_template/Component.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+/**
+ * Props for [ComponentName]
+ *
+ * Update this interface based on the reference design's props.
+ * Use JSDoc comments for each prop to enable IDE documentation.
+ */
+export interface ComponentNameProps {
+    /** Additional CSS classes */
+    class?: string;
+    /** Component content */
+    children?: Snippet;
+}
+declare const Component: import("svelte").Component<ComponentNameProps, {}, "">;
+type Component = ReturnType<typeof Component>;
+export default Component;

package/dist/fancy-ui/_template/README.md

@@ -0,0 +1,279 @@
+# Component Template
+
+This template provides the starting point for implementing FancyUI components in Svelte.
+
+## Quick Start
+
+```bash
+# 1. Copy the template folder
+cp -r src/lib/fancy-ui/_template src/lib/fancy-ui/[component-name]
+
+# 2. Rename the component file
+mv src/lib/fancy-ui/[component-name]/Component.svelte \
+   src/lib/fancy-ui/[component-name]/[ComponentName].svelte
+
+# 3. Update index.ts imports and exports
+
+# 4. Add to src/lib/fancy-ui/index.ts
+```
+
+## File Structure
+
+```
+src/lib/fancy-ui/[component-name]/
+├── [ComponentName].svelte    # Main component
+├── types.ts                  # Component-specific types (optional)
+├── index.ts                  # Barrel exports
+└── README.md                 # Implementation notes
+```
+
+## Implementation Workflow
+
+### Step 1: Analyze the Reference Design
+
+1. Open the reference design
+2. Identify:
+   - **Props**: What configuration does it accept?
+   - **Slots**: What content areas does it have?
+   - **Events**: What events does it emit?
+   - **State**: What internal state does it manage?
+   - **Animations**: What CSS/JS animations does it use?
+
+### Step 2: Create the Svelte Component
+
+Use this mapping guide:
+
+| Vue Pattern | Svelte 5 Equivalent |
+|-------------|---------------------|
+| `defineProps<T>()` | `let { ... }: T = $props()` |
+| `ref(value)` | `let value = $state(initialValue)` |
+| `computed(() => ...)` | `const value = $derived(...)` |
+| `watch(dep, callback)` | `$effect(() => { ... })` |
+| `<slot />` | `{@render children?.()}` |
+| `<slot name="x" />` | `{@render slotName?.()}` |
+| `emit('event', data)` | Pass callback prop or use CustomEvent |
+| `:class="{ active }"` | `class:active` or `cn(..., { active })` |
+| `v-if` | `{#if condition}` |
+| `v-for` | `{#each items as item}` |
+| `@click` | `onclick={handler}` |
+| `@click.prevent` | `onclick={(e) => { e.preventDefault(); ... }}` |
+
+### Step 3: Handle Styling
+
+1. **Prefer Tailwind classes** in the template
+2. **Use theme tokens** for colors:
+   - `bg-background`, `bg-card`, `bg-primary`
+   - `text-foreground`, `text-muted-foreground`
+   - `border-border`, `ring-ring`
+3. **Use `cn()` utility** for class merging:
+   ```svelte
+   <div class={cn('base-styles', className)} />
+   ```
+4. **Scoped styles** for animations:
+   ```svelte
+   <style>
+     @keyframes custom {
+       from { opacity: 0; }
+       to { opacity: 1; }
+     }
+   </style>
+   ```
+
+### Step 4: Export the Component
+
+1. Update `index.ts`:
+   ```typescript
+   import ComponentName, { type ComponentNameProps } from './ComponentName.svelte';
+   export { ComponentName, type ComponentNameProps };
+   ```
+
+2. Add to `src/lib/fancy-ui/index.ts`:
+   ```typescript
+   export * from './component-name';
+   ```
+
+### Step 5: Create Demo Page
+
+Create `src/routes/demo/[component-name]/+page.svelte`:
+
+```svelte
+<script lang="ts">
+  import { ComponentName } from '$lib/fancy-ui/component-name';
+</script>
+
+<svelte:head>
+  <title>ComponentName - FancyUI</title>
+</svelte:head>
+
+<div class="container mx-auto max-w-4xl py-12 px-4">
+  <h1 class="text-3xl font-bold mb-2">ComponentName</h1>
+  <p class="text-muted-foreground mb-8">Description here.</p>
+
+  <section class="mb-12">
+    <h2 class="text-xl font-semibold mb-4">Basic Usage</h2>
+    <div class="rounded-lg border bg-card p-6">
+      <ComponentName />
+    </div>
+  </section>
+</div>
+```
+
+### Step 6: Update Demo Index
+
+Add to the components array in `src/routes/demo/+page.svelte`:
+
+```typescript
+{
+  name: 'ComponentName',
+  href: '/demo/component-name',
+  description: 'Brief description',
+  status: 'done'
+}
+```
+
+## Svelte 5 Patterns
+
+### Props with Defaults
+
+```svelte
+<script lang="ts">
+  interface Props {
+    duration?: number;
+    class?: string;
+  }
+
+  let {
+    duration = 1000,
+    class: className,
+    ...restProps
+  }: Props = $props();
+</script>
+```
+
+### Reactive State
+
+```svelte
+<script lang="ts">
+  let count = $state(0);
+  let items = $state<string[]>([]);
+
+  function increment() {
+    count++;
+  }
+</script>
+```
+
+### Derived Values
+
+```svelte
+<script lang="ts">
+  let { width, height } = $props();
+
+  const area = $derived(width * height);
+  const isLarge = $derived(area > 1000);
+</script>
+```
+
+### Effects with Cleanup
+
+```svelte
+<script lang="ts">
+  let element: HTMLElement;
+
+  $effect(() => {
+    const observer = new ResizeObserver(handleResize);
+    observer.observe(element);
+
+    return () => observer.disconnect();
+  });
+</script>
+```
+
+### Bindable Props
+
+```svelte
+<script lang="ts">
+  interface Props {
+    value?: number;
+  }
+
+  let { value = $bindable(0) }: Props = $props();
+</script>
+```
+
+### Event Handlers
+
+```svelte
+<script lang="ts">
+  interface Props {
+    onclick?: (event: MouseEvent) => void;
+  }
+
+  let { onclick }: Props = $props();
+
+  function handleClick(event: MouseEvent) {
+    // Internal logic
+    onclick?.(event);
+  }
+</script>
+
+<button onclick={handleClick}>Click me</button>
+```
+
+## Checklist
+
+Before marking a component as done:
+
+- [ ] All props from the reference design are supported
+- [ ] Slots/children render correctly
+- [ ] Events work as expected
+- [ ] Animations are smooth
+- [ ] Dark mode looks correct
+- [ ] Disabled states work
+- [ ] Keyboard navigation works (if applicable)
+- [ ] `pnpm check` passes
+- [ ] Demo page shows all variants
+- [ ] README.md documents any Svelte-specific differences
+
+## Common Issues
+
+### TypeScript Errors with Event Handlers
+
+Use explicit typing:
+```svelte
+<button onclick={(e: MouseEvent) => handleClick(e)}>
+```
+
+### Class Prop Conflicts
+
+Always rename `class` to `className`:
+```svelte
+let { class: className }: Props = $props();
+```
+
+### Animation Not Working
+
+Ensure keyframes are in `<style>` block and class is applied:
+```svelte
+<style>
+  @keyframes fade {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .animate-fade {
+    animation: fade 0.3s ease-out;
+  }
+</style>
+```
+
+### Reactive Value Not Updating
+
+Use `$state()` for mutable values, not `let`:
+```svelte
+// Wrong
+let count = 0;
+
+// Correct
+let count = $state(0);
+```

package/dist/fancy-ui/_template/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * TEMPLATE: index.ts
+ *
+ * Barrel file for component exports.
+ *
+ * Instructions:
+ * 1. Rename ComponentName to your actual component name
+ * 2. Update the import path to match your .svelte file
+ * 3. Export any additional types from types.ts that consumers need
+ * 4. Delete this comment block when done
+ */
+import ComponentName, { type ComponentNameProps } from "./Component.svelte";
+export { ComponentName, type ComponentNameProps };

package/dist/fancy-ui/_template/index.js

@@ -0,0 +1,27 @@
+/**
+ * TEMPLATE: index.ts
+ *
+ * Barrel file for component exports.
+ *
+ * Instructions:
+ * 1. Rename ComponentName to your actual component name
+ * 2. Update the import path to match your .svelte file
+ * 3. Export any additional types from types.ts that consumers need
+ * 4. Delete this comment block when done
+ */
+// =============================================================================
+// Main Component Export
+// =============================================================================
+import ComponentName, {} from "./Component.svelte";
+export { ComponentName };
+// =============================================================================
+// Type Exports (optional)
+// Only export types that consumers of the component might need
+// =============================================================================
+// export type { ComponentConfig, ComponentItem } from './types.js';
+// =============================================================================
+// Subcomponent Exports (if applicable)
+// Some components have multiple parts (e.g., Tabs, TabsList, TabsTrigger)
+// =============================================================================
+// export { ComponentNameItem } from './ComponentNameItem.svelte';
+// export { ComponentNameTrigger } from './ComponentNameTrigger.svelte';