@profidev/pleiades 1.7.0

package/dist/components/ui-extra/terminal/terminal.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { Window } from '../window';
+  import { cn } from '../../../blocks/utils.js';
+  import { useTerminalRoot } from './terminal.svelte.js';
+  import { onMount } from 'svelte';
+  import type { TerminalRootProps } from './types.js';
+  import { box } from 'svelte-toolbelt';
+
+  let {
+    delay = 0,
+    speed = 1,
+    onComplete = () => {},
+    children,
+    class: className
+  }: TerminalRootProps = $props();
+
+  const terminal = useTerminalRoot({
+    delay: box.with(() => delay),
+    speed: box.with(() => speed),
+    onComplete: box.with(() => onComplete)
+  });
+
+  onMount(() => {
+    // we play here so that we don't play before it is visible (on the server)
+    terminal.play();
+
+    return () => {
+      terminal.dispose();
+    };
+  });
+</script>
+
+<Window class={cn('font-mono text-sm font-light', className)}>
+  {@render children?.()}
+</Window>

package/dist/components/ui-extra/terminal/terminal.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TerminalRootProps } from './types.js';
+declare const Terminal: import("svelte").Component<TerminalRootProps, {}, "">;
+type Terminal = ReturnType<typeof Terminal>;
+export default Terminal;

package/dist/components/ui-extra/terminal/terminal.svelte.js

@@ -0,0 +1,74 @@
+import { Context } from 'runed';
+export class TerminalLoop {
+    opts;
+    constructor(opts) {
+        this.opts = opts;
+        this.onComplete = this.onComplete.bind(this);
+    }
+    onComplete() {
+        this.opts.onComplete();
+    }
+}
+export class TerminalSession {
+    opts;
+    loop;
+    #animations = $state([]);
+    #timeout;
+    constructor(opts, loop) {
+        this.opts = opts;
+        this.loop = loop;
+        this.onComplete = this.onComplete.bind(this);
+    }
+    play() {
+        this.#timeout = setTimeout(() => {
+            this.#animations.sort((a, b) => a.opts.delay.current - b.opts.delay.current);
+            for (let i = 0; i < this.#animations.length; i++) {
+                this.#animations[i].timeout = setTimeout(() => {
+                    this.#animations[i].play(this.opts.speed.current);
+                    // when the most delayed animation is complete call onComplete
+                    if (i === this.#animations.length - 1) {
+                        this.#animations[i].onComplete = this.onComplete;
+                    }
+                }, this.#animations[i].opts.delay.current);
+            }
+        }, this.opts.delay.current);
+    }
+    onComplete() {
+        this.opts.onComplete.current?.();
+        this.loop?.onComplete();
+    }
+    dispose() {
+        clearTimeout(this.#timeout);
+    }
+    registerAnimation(animation) {
+        this.#animations.push(animation);
+    }
+}
+export class AnimationState {
+    rootState;
+    opts;
+    timeout;
+    onComplete = $state();
+    constructor(rootState, opts) {
+        this.rootState = rootState;
+        this.opts = opts;
+        rootState.registerAnimation(this);
+    }
+    play(speed) {
+        this.opts.play(speed);
+    }
+    dispose() {
+        clearTimeout(this.timeout);
+    }
+}
+const TerminalLoopContext = new Context('Terminal.Loop');
+const TerminalRootContext = new Context('Terminal.Root');
+export const useTerminalLoop = (props) => {
+    return TerminalLoopContext.set(new TerminalLoop(props));
+};
+export const useTerminalRoot = (props) => {
+    return TerminalRootContext.set(new TerminalSession(props, TerminalLoopContext.getOr(undefined)));
+};
+export const useAnimation = (props) => {
+    return new AnimationState(TerminalRootContext.get(), props);
+};

package/dist/components/ui-extra/terminal/types.d.ts

@@ -0,0 +1,20 @@
+import type { WithChildren } from 'bits-ui';
+import type { Snippet } from 'svelte';
+export type TerminalRootProps = WithChildren<{
+    class?: string;
+    delay?: number;
+    speed?: number;
+    onComplete?: () => void;
+}>;
+export type TerminalLoopProps = WithChildren<{
+    delay?: number;
+}>;
+export type TerminalAnimationProps = WithChildren<{
+    delay?: number;
+    class?: string;
+}>;
+export type TerminalLoadingProps = Omit<TerminalAnimationProps, 'children'> & {
+    loadingMessage: Snippet<[]>;
+    completeMessage: Snippet<[]>;
+    duration?: number;
+};

package/dist/components/ui-extra/terminal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui-extra/textarea/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './textarea.svelte';
+export { Root, Root as Textarea };

package/dist/components/ui-extra/textarea/index.js

@@ -0,0 +1,4 @@
+import Root from './textarea.svelte';
+export { Root, 
+//
+Root as Textarea };

package/dist/components/ui-extra/textarea/textarea.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import {
+    cn,
+    type WithElementRef,
+    type WithoutChildren
+  } from '../../../blocks/utils.js';
+  import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    class: className,
+    'data-slot': dataSlot = 'textarea',
+    ...restProps
+  }: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+  bind:this={ref}
+  data-slot={dataSlot}
+  class={cn(
+    'border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
+    className
+  )}
+  bind:value
+  {...restProps}
+></textarea>

package/dist/components/ui-extra/textarea/textarea.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../blocks/utils.js';
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "value" | "ref">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/ui-extra/theme-selector/index.d.ts

@@ -0,0 +1,2 @@
+import ThemeSelector from './theme-selector.svelte';
+export { ThemeSelector };

package/dist/components/ui-extra/theme-selector/index.js

@@ -0,0 +1,2 @@
+import ThemeSelector from './theme-selector.svelte';
+export { ThemeSelector };

package/dist/components/ui-extra/theme-selector/theme-selector.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+  import type { Size } from '../../../blocks/button.svelte';
+
+  export type ThemeSelectorProps = {
+    variant?: 'outline' | 'ghost';
+    size?: Size;
+  };
+</script>
+
+<script lang="ts">
+  import SunIcon from '@lucide/svelte/icons/sun';
+  import MoonIcon from '@lucide/svelte/icons/moon';
+  import { resetMode, setMode } from 'mode-watcher';
+  import * as DropdownMenu from '../dropdown-menu/index.js';
+  import { buttonVariants } from '../button/index.js';
+
+  let { variant = 'outline' }: ThemeSelectorProps = $props();
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger class={buttonVariants({ variant, size: 'icon' })}>
+    <SunIcon
+      class="scale-100 rotate-0 !transition-all dark:scale-0 dark:-rotate-90"
+    />
+    <MoonIcon
+      class="absolute scale-0 rotate-90 !transition-all dark:scale-100 dark:rotate-0"
+    />
+    <span class="sr-only">Toggle theme</span>
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content align="end">
+    <DropdownMenu.Item onclick={() => setMode('light')}>Light</DropdownMenu.Item
+    >
+    <DropdownMenu.Item onclick={() => setMode('dark')}>Dark</DropdownMenu.Item>
+    <DropdownMenu.Item onclick={() => resetMode()}>System</DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/components/ui-extra/theme-selector/theme-selector.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Size } from '../../../blocks/button.svelte';
+export type ThemeSelectorProps = {
+    variant?: 'outline' | 'ghost';
+    size?: Size;
+};
+declare const ThemeSelector: import("svelte").Component<ThemeSelectorProps, {}, "">;
+type ThemeSelector = ReturnType<typeof ThemeSelector>;
+export default ThemeSelector;

package/dist/components/ui-extra/toc/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './toc.svelte';
+export { Root };

package/dist/components/ui-extra/toc/index.js

@@ -0,0 +1,2 @@
+import Root from './toc.svelte';
+export { Root };

package/dist/components/ui-extra/toc/toc.svelte

@@ -0,0 +1,37 @@
+<script lang="ts" module>
+  export type TocProps = {
+    toc: Heading[];
+    class?: string;
+    /** Indicates whether this is a child component or root component */
+    isChild?: boolean;
+  };
+</script>
+
+<script lang="ts">
+  import type { Heading } from '../../../blocks/use-toc.svelte';
+  import { cn } from '../../../blocks/utils.js';
+  import Self from './toc.svelte';
+
+  let { toc, isChild = false, class: className }: TocProps = $props();
+</script>
+
+<ul class={cn('m-0 list-none text-sm font-medium', { 'pl-4': isChild })}>
+  {#each toc as heading, i (i)}
+    <li
+      class={cn('text-muted-foreground mt-0 pt-2 transition-all', {
+        'text-foreground': heading.active
+      })}
+    >
+      {#if heading.id}
+        <a href="#{heading.id}" class="hover:text-foreground block">
+          {heading.label}
+        </a>
+      {:else}
+        {heading.label}
+      {/if}
+    </li>
+    {#if heading.children.length > 0}
+      <Self class={className} toc={heading.children} isChild={true} />
+    {/if}
+  {/each}
+</ul>

package/dist/components/ui-extra/toc/toc.svelte.d.ts

@@ -0,0 +1,10 @@
+export type TocProps = {
+    toc: Heading[];
+    class?: string;
+    /** Indicates whether this is a child component or root component */
+    isChild?: boolean;
+};
+import type { Heading } from '../../../blocks/use-toc.svelte';
+declare const Toc: import("svelte").Component<TocProps, {}, "">;
+type Toc = ReturnType<typeof Toc>;
+export default Toc;

package/dist/components/ui-extra/toggle/index.d.ts

@@ -0,0 +1,3 @@
+import Root from './toggle.svelte';
+export { toggleVariants, type ToggleSize, type ToggleVariant, type ToggleVariants } from './toggle.svelte';
+export { Root, Root as Toggle };

package/dist/components/ui-extra/toggle/index.js

@@ -0,0 +1,5 @@
+import Root from './toggle.svelte';
+export { toggleVariants } from './toggle.svelte';
+export { Root, 
+//
+Root as Toggle };

package/dist/components/ui-extra/toggle/toggle.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+  import { type VariantProps, tv } from 'tailwind-variants';
+
+  export const toggleVariants = tv({
+    base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/toggle hover:bg-muted inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border-input hover:bg-muted border bg-transparent shadow-xs'
+      },
+      size: {
+        default:
+          'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        sm: 'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',
+        lg: 'h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  });
+
+  export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
+  export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
+  export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+  import { Toggle as TogglePrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    pressed = $bindable(false),
+    class: className,
+    size = 'default',
+    variant = 'default',
+    ...restProps
+  }: TogglePrimitive.RootProps & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+  } = $props();
+</script>
+
+<TogglePrimitive.Root
+  bind:ref
+  bind:pressed
+  data-slot="toggle"
+  class={cn(toggleVariants({ variant, size }), className)}
+  {...restProps}
+/>

package/dist/components/ui-extra/toggle/toggle.svelte.d.ts

@@ -0,0 +1,43 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/toggle hover:bg-muted inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/toggle hover:bg-muted inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
+export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
+export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
+export type ToggleVariants = VariantProps<typeof toggleVariants>;
+import { Toggle as TogglePrimitive } from 'bits-ui';
+type $$ComponentProps = TogglePrimitive.RootProps & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "ref" | "pressed">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/components/ui-extra/tooltip/index.d.ts

@@ -0,0 +1,6 @@
+import Root from './tooltip.svelte';
+import Trigger from './tooltip-trigger.svelte';
+import Content from './tooltip-content.svelte';
+import Provider from './tooltip-provider.svelte';
+import Portal from './tooltip-portal.svelte';
+export { Root, Trigger, Content, Provider, Portal, Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, Portal as TooltipPortal };

package/dist/components/ui-extra/tooltip/index.js

@@ -0,0 +1,8 @@
+import Root from './tooltip.svelte';
+import Trigger from './tooltip-trigger.svelte';
+import Content from './tooltip-content.svelte';
+import Provider from './tooltip-provider.svelte';
+import Portal from './tooltip-portal.svelte';
+export { Root, Trigger, Content, Provider, Portal, 
+//
+Root as Tooltip, Content as TooltipContent, Trigger as TooltipTrigger, Provider as TooltipProvider, Portal as TooltipPortal };

package/dist/components/ui-extra/tooltip/tooltip-content.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+  import TooltipPortal from './tooltip-portal.svelte';
+  import type { ComponentProps } from 'svelte';
+  import type { WithoutChildrenOrChild } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 0,
+    side = 'top',
+    children,
+    arrowClasses,
+    portalProps,
+    ...restProps
+  }: TooltipPrimitive.ContentProps & {
+    arrowClasses?: string;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+  } = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+  <TooltipPrimitive.Content
+    bind:ref
+    data-slot="tooltip-content"
+    {sideOffset}
+    {side}
+    class={cn(
+      'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-foreground text-background z-50 inline-flex w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin) items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm',
+      className
+    )}
+    {...restProps}
+  >
+    {@render children?.()}
+    <TooltipPrimitive.Arrow>
+      {#snippet child({ props })}
+        <div
+          class={cn(
+            'bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]',
+            'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]',
+            'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]',
+            'data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2',
+            'data-[side=left]:-translate-y-[calc(50%-3px)]',
+            arrowClasses
+          )}
+          {...props}
+        ></div>
+      {/snippet}
+    </TooltipPrimitive.Arrow>
+  </TooltipPrimitive.Content>
+</TooltipPortal>

package/dist/components/ui-extra/tooltip/tooltip-content.svelte.d.ts

@@ -0,0 +1,11 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import TooltipPortal from './tooltip-portal.svelte';
+import type { ComponentProps } from 'svelte';
+import type { WithoutChildrenOrChild } from '../../../blocks/utils.js';
+type $$ComponentProps = TooltipPrimitive.ContentProps & {
+    arrowClasses?: string;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+};
+declare const TooltipContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type TooltipContent = ReturnType<typeof TooltipContent>;
+export default TooltipContent;

package/dist/components/ui-extra/tooltip/tooltip-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+  let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />

package/dist/components/ui-extra/tooltip/tooltip-portal.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const TooltipPortal: import("svelte").Component<TooltipPrimitive.PortalProps, {}, "">;
+type TooltipPortal = ReturnType<typeof TooltipPortal>;
+export default TooltipPortal;

package/dist/components/ui-extra/tooltip/tooltip-provider.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+  let { delayDuration = 0, ...restProps }: TooltipPrimitive.ProviderProps =
+    $props();
+</script>
+
+<TooltipPrimitive.Provider {delayDuration} {...restProps} />

package/dist/components/ui-extra/tooltip/tooltip-provider.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const TooltipProvider: import("svelte").Component<TooltipPrimitive.ProviderProps, {}, "">;
+type TooltipProvider = ReturnType<typeof TooltipProvider>;
+export default TooltipProvider;

package/dist/components/ui-extra/tooltip/tooltip-trigger.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+  let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps =
+    $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

package/dist/components/ui-extra/tooltip/tooltip-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const TooltipTrigger: import("svelte").Component<TooltipPrimitive.TriggerProps, {}, "ref">;
+type TooltipTrigger = ReturnType<typeof TooltipTrigger>;
+export default TooltipTrigger;

package/dist/components/ui-extra/tooltip/tooltip.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+  import TooltipProvider from './tooltip-provider.svelte';
+
+  let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps =
+    $props();
+</script>
+
+<TooltipProvider>
+  <TooltipPrimitive.Root bind:open {...restProps} />
+</TooltipProvider>

package/dist/components/ui-extra/tooltip/tooltip.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const Tooltip: import("svelte").Component<TooltipPrimitive.RootProps, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/ui-extra/tree-view/index.d.ts

@@ -0,0 +1,4 @@
+import TreeView from './tree-view.svelte';
+import TreeViewFile from './tree-view-file.svelte';
+import TreeViewFolder from './tree-view-folder.svelte';
+export { TreeView, TreeViewFile, TreeViewFolder, TreeView as Root, TreeViewFile as File, TreeViewFolder as Folder };

package/dist/components/ui-extra/tree-view/index.js

@@ -0,0 +1,6 @@
+import TreeView from './tree-view.svelte';
+import TreeViewFile from './tree-view-file.svelte';
+import TreeViewFolder from './tree-view-folder.svelte';
+export { TreeView, TreeViewFile, TreeViewFolder, 
+// ...
+TreeView as Root, TreeViewFile as File, TreeViewFolder as Folder };

package/dist/components/ui-extra/tree-view/tree-view-file.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import FileIcon from '@lucide/svelte/icons/file';
+  import { cn } from '../../../blocks/utils.js';
+  import type { TreeViewFileProps } from './types';
+
+  let {
+    name,
+    icon,
+    type = 'button',
+    class: className,
+    ...rest
+  }: TreeViewFileProps = $props();
+</script>
+
+<button
+  {type}
+  class={cn('flex place-items-center gap-1 pl-[3px]', className)}
+  {...rest}
+>
+  {#if icon}
+    {@render icon({ name })}
+  {:else}
+    <FileIcon class="size-4" />
+  {/if}
+  <span>{name}</span>
+</button>

package/dist/components/ui-extra/tree-view/tree-view-file.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TreeViewFileProps } from './types';
+declare const TreeViewFile: import("svelte").Component<TreeViewFileProps, {}, "">;
+type TreeViewFile = ReturnType<typeof TreeViewFile>;
+export default TreeViewFile;

package/dist/components/ui-extra/tree-view/tree-view-folder.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import * as Collapsible from '../collapsible/index.js';
+  import FolderIcon from '@lucide/svelte/icons/folder';
+  import FolderOpenIcon from '@lucide/svelte/icons/folder-open';
+  import { cn } from '../../../blocks/utils.js';
+  import type { TreeViewFolderProps } from './types';
+
+  let {
+    name,
+    open = $bindable(true),
+    class: className,
+    icon,
+    children
+  }: TreeViewFolderProps = $props();
+</script>
+
+<Collapsible.Root bind:open>
+  <Collapsible.Trigger class={cn('flex place-items-center gap-1', className)}>
+    {#if icon}
+      {@render icon({ name, open })}
+    {:else if open}
+      <FolderOpenIcon class="size-4" />
+    {:else}
+      <FolderIcon class="size-4" />
+    {/if}
+    <span>{name}</span>
+  </Collapsible.Trigger>
+  <Collapsible.Content class="ml-2 border-l">
+    <div class="relative flex place-items-start">
+      <div class="bg-border mx-2 h-full w-px"></div>
+      <div class="flex flex-1 flex-col">
+        {@render children?.()}
+      </div>
+    </div>
+  </Collapsible.Content>
+</Collapsible.Root>

package/dist/components/ui-extra/tree-view/tree-view-folder.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TreeViewFolderProps } from './types';
+declare const TreeViewFolder: import("svelte").Component<TreeViewFolderProps, {}, "open">;
+type TreeViewFolder = ReturnType<typeof TreeViewFolder>;
+export default TreeViewFolder;