@profidev/pleiades 1.7.0

package/dist/components/ui-extra/stepper/stepper-nav.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils';
+  import { useStepperNav } from './stepper.svelte.js';
+  import type { StepperNavProps } from './types';
+  import { box } from 'svelte-toolbelt';
+
+  let {
+    orientation = 'horizontal',
+    class: className,
+    children,
+    ...rest
+  }: StepperNavProps = $props();
+
+  const stepperNavState = useStepperNav({
+    orientation: box.with(() => orientation)
+  });
+</script>
+
+<div
+  data-slot="stepper-nav"
+  class={cn(
+    'group/stepper-nav flex',
+    {
+      'flex-row justify-between': orientation === 'horizontal',
+      'flex-col gap-2': orientation === 'vertical'
+    },
+    className
+  )}
+  {...stepperNavState.props}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui-extra/stepper/stepper-nav.svelte.d.ts

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

package/dist/components/ui-extra/stepper/stepper-next.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import { useStepperStepButton } from './stepper.svelte.js';
+  import type { StepperNextButtonProps } from './types';
+  import { Button } from '../button';
+
+  let {
+    disabled = false,
+    child,
+    children,
+    variant = 'default',
+    size = 'default',
+    ...rest
+  }: StepperNextButtonProps = $props();
+
+  const buttonState = useStepperStepButton({
+    type: box.with(() => 'next'),
+    disabled: box.with(() => disabled)
+  });
+
+  const mergedProps = $derived(
+    mergeProps(buttonState.props, rest, {
+      variant,
+      size,
+      'data-slot': 'stepper-next'
+    })
+  );
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <Button {...mergedProps}>
+    {@render children?.()}
+  </Button>
+{/if}

package/dist/components/ui-extra/stepper/stepper-next.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const StepperNext: import("svelte").Component<import("./types").StepperButtonPropsWithoutHTML, {}, "">;
+type StepperNext = ReturnType<typeof StepperNext>;
+export default StepperNext;

package/dist/components/ui-extra/stepper/stepper-previous.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import { useStepperStepButton } from './stepper.svelte.js';
+  import type { StepperPreviousButtonProps } from './types';
+  import { Button } from '../button';
+
+  let {
+    disabled = false,
+    child,
+    children,
+    variant = 'outline',
+    size = 'default',
+    ...rest
+  }: StepperPreviousButtonProps = $props();
+
+  const buttonState = useStepperStepButton({
+    type: box.with(() => 'previous'),
+    disabled: box.with(() => disabled)
+  });
+
+  const mergedProps = $derived(
+    mergeProps(buttonState.props, rest, {
+      variant,
+      size,
+      'data-slot': 'stepper-previous'
+    })
+  );
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <Button {...mergedProps}>
+    {@render children?.()}
+  </Button>
+{/if}

package/dist/components/ui-extra/stepper/stepper-previous.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const StepperPrevious: import("svelte").Component<import("./types").StepperButtonPropsWithoutHTML, {}, "">;
+type StepperPrevious = ReturnType<typeof StepperPrevious>;
+export default StepperPrevious;

package/dist/components/ui-extra/stepper/stepper-separator.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { useStepperSeparator } from './stepper.svelte.js';
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> = $props();
+
+  const separatorState = useStepperSeparator();
+</script>
+
+<div
+  data-slot="stepper-separator"
+  class={cn(
+    'bg-muted data-[state=completed]:bg-primary absolute shrink-0 transition-colors',
+    'group-data-[orientation=horizontal]/stepper-nav:top-[12px] group-data-[orientation=horizontal]/stepper-nav:h-1 group-data-[orientation=horizontal]/stepper-nav:w-full',
+    'group-data-[orientation=vertical]/stepper-nav:top-[28px] group-data-[orientation=vertical]/stepper-nav:left-[12px] group-data-[orientation=vertical]/stepper-nav:h-full group-data-[orientation=vertical]/stepper-nav:w-1',
+    {
+      hidden: separatorState.itemState.isLast
+    },
+    className
+  )}
+  {...separatorState.props}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui-extra/stepper/stepper-separator.svelte.d.ts

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

package/dist/components/ui-extra/stepper/stepper-title.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    class: className,
+    children,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div
+  data-slot="stepper-title"
+  class={cn(
+    'text-lg font-medium',
+    'group-data-[orientation=vertical]/stepper-nav:text-left',
+    'group-data-[orientation=horizontal]/stepper-nav:text-center',
+    className
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui-extra/stepper/stepper-title.svelte.d.ts

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

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import { useStepperItemTrigger } from './stepper.svelte.js';
+  import { box, type WithElementRef } from 'svelte-toolbelt';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    disabled = false,
+    onclick,
+    onkeydown,
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLButtonAttributes, HTMLButtonElement> = $props();
+
+  const triggerState = useStepperItemTrigger({
+    ref: box.with(() => ref),
+    disabled: box.with(() => disabled ?? false),
+    onclick: box.with(() => onclick),
+    onkeydown: box.with(() => onkeydown)
+  });
+</script>
+
+<button
+  bind:this={ref}
+  data-slot="stepper-trigger"
+  class={cn(
+    'group/stepper-trigger z-1 flex',
+    'group-data-[orientation=horizontal]/stepper-nav:flex-col',
+    'group-data-[orientation=vertical]/stepper-nav:flex-row group-data-[orientation=vertical]/stepper-nav:gap-4',
+    className
+  )}
+  {...triggerState.props}
+  {...restProps}
+>
+  {@render children?.()}
+</button>

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

@@ -0,0 +1,5 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type WithElementRef } from 'svelte-toolbelt';
+declare const StepperTrigger: import("svelte").Component<WithElementRef<HTMLButtonAttributes, HTMLButtonElement>, {}, "ref">;
+type StepperTrigger = ReturnType<typeof StepperTrigger>;
+export default StepperTrigger;

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { useStepperRoot } from './stepper.svelte.js';
+  import type { StepperRootProps } from './types';
+  import { box } from 'svelte-toolbelt';
+
+  let { step = $bindable(1), children }: StepperRootProps = $props();
+
+  useStepperRoot({
+    step: box.with(
+      () => step,
+      (v) => (step = v)
+    )
+  });
+</script>
+
+{@render children?.()}

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

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

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

@@ -0,0 +1,207 @@
+import { Context, watch } from 'runed';
+class StepperRootState {
+    opts;
+    steps = $state([]);
+    constructor(opts) {
+        this.opts = opts;
+    }
+    registerStep(step) {
+        return this.steps.push({
+            id: step.opts.id,
+            triggerRef: () => step.getTriggerRef()
+        });
+    }
+    next() {
+        if (!this.canIncrement)
+            return;
+        this.opts.step.current++;
+    }
+    canIncrement = $derived.by(() => {
+        return this.steps.length > this.opts.step.current;
+    });
+    previous() {
+        if (!this.canDecrement)
+            return;
+        this.opts.step.current--;
+    }
+    canDecrement = $derived.by(() => {
+        return this.opts.step.current > 1;
+    });
+    selectStep(stepId) {
+        this.opts.step.current =
+            this.steps.findIndex((step) => step.id === stepId) + 1;
+    }
+    navigateNext() {
+        const nextStep = this.steps[this.opts.step.current];
+        if (!nextStep)
+            return;
+        const triggerRef = nextStep.triggerRef();
+        if (triggerRef?.disabled)
+            return;
+        this.opts.step.current++;
+        triggerRef?.focus();
+    }
+    navigatePrevious() {
+        const previousStep = this.steps[this.opts.step.current - 2];
+        if (!previousStep)
+            return;
+        const triggerRef = previousStep.triggerRef();
+        if (triggerRef?.disabled)
+            return;
+        this.opts.step.current--;
+        triggerRef?.focus();
+    }
+}
+class StepperNavState {
+    opts;
+    constructor(opts) {
+        this.opts = opts;
+    }
+    props = $derived.by(() => ({
+        'aria-orientation': this.opts.orientation.current,
+        'data-orientation': this.opts.orientation.current
+    }));
+}
+class StepperItemState {
+    opts;
+    navState;
+    rootState;
+    step;
+    triggerRef = $state(null);
+    constructor(opts, navState, rootState) {
+        this.opts = opts;
+        this.navState = navState;
+        this.rootState = rootState;
+        this.step = this.rootState.registerStep(this);
+    }
+    getTriggerRef() {
+        return this.triggerRef;
+    }
+    isLast = $derived.by(() => {
+        return this.step === this.rootState.steps.length;
+    });
+    isFirst = $derived.by(() => {
+        return this.step === 1;
+    });
+    state = $derived.by(() => {
+        if (this.step < this.rootState.opts.step.current)
+            return 'completed';
+        if (this.step === this.rootState.opts.step.current)
+            return 'active';
+        return 'inactive';
+    });
+    props = $derived.by(() => ({
+        id: this.opts.id,
+        'data-step': this.opts.id,
+        'data-state': this.state
+    }));
+}
+class StepperItemTriggerState {
+    opts;
+    itemState;
+    constructor(opts, itemState) {
+        this.opts = opts;
+        this.itemState = itemState;
+        watch(() => this.opts.ref.current, (ref) => {
+            this.itemState.triggerRef = ref;
+        });
+    }
+    _onclick(e) {
+        this.itemState.rootState.selectStep(this.itemState.opts.id);
+        this.opts.onclick.current?.(e);
+    }
+    _onkeydown(e) {
+        if (this.opts.disabled.current)
+            return;
+        switch (e.key) {
+            case 'ArrowRight':
+                if (this.itemState.navState.opts.orientation.current === 'vertical')
+                    return;
+                this.itemState.rootState.navigateNext();
+                break;
+            case 'ArrowLeft':
+                if (this.itemState.navState.opts.orientation.current === 'vertical')
+                    return;
+                this.itemState.rootState.navigatePrevious();
+                break;
+            case 'ArrowDown':
+                if (this.itemState.navState.opts.orientation.current === 'horizontal')
+                    return;
+                e.preventDefault(); // prevent default scroll behavior
+                this.itemState.rootState.navigateNext();
+                break;
+            case 'ArrowUp':
+                if (this.itemState.navState.opts.orientation.current === 'horizontal')
+                    return;
+                e.preventDefault(); // prevent default scroll behavior
+                this.itemState.rootState.navigatePrevious();
+                break;
+        }
+        this.opts.onkeydown.current?.(e);
+    }
+    props = $derived.by(() => ({
+        id: `${this.itemState.opts.id}-trigger`,
+        disabled: this.opts.disabled.current,
+        onclick: this._onclick.bind(this),
+        onkeydown: this._onkeydown.bind(this),
+        'data-state': this.itemState.state,
+        'aria-selected': this.itemState.state === 'active'
+    }));
+}
+class StepperSeparatorState {
+    itemState;
+    constructor(itemState) {
+        this.itemState = itemState;
+    }
+    props = $derived.by(() => ({
+        'data-state': this.itemState.state
+    }));
+}
+class StepperStepButtonState {
+    opts;
+    rootState;
+    constructor(opts, rootState) {
+        this.opts = opts;
+        this.rootState = rootState;
+    }
+    _disabled = $derived.by(() => {
+        if (this.opts.disabled.current)
+            return true;
+        if (this.opts.type.current === 'next') {
+            return !this.rootState.canIncrement;
+        }
+        return !this.rootState.canDecrement;
+    });
+    onclick() {
+        if (this.opts.type.current === 'next') {
+            this.rootState.next();
+            return;
+        }
+        this.rootState.previous();
+    }
+    props = $derived.by(() => ({
+        disabled: this._disabled,
+        onclick: this.onclick.bind(this)
+    }));
+}
+const StepperCtx = new Context('stepper-root-ctx');
+const StepperNavCtx = new Context('stepper-nav-ctx');
+const StepperItemCtx = new Context('stepper-item-ctx');
+export function useStepperRoot(props) {
+    return StepperCtx.set(new StepperRootState(props));
+}
+export function useStepperNav(props) {
+    return StepperNavCtx.set(new StepperNavState(props));
+}
+export function useStepperItem(props) {
+    return StepperItemCtx.set(new StepperItemState(props, StepperNavCtx.get(), StepperCtx.get()));
+}
+export function useStepperItemTrigger(props) {
+    return new StepperItemTriggerState(props, StepperItemCtx.get());
+}
+export function useStepperSeparator() {
+    return new StepperSeparatorState(StepperItemCtx.get());
+}
+export function useStepperStepButton(props) {
+    return new StepperStepButtonState(props, StepperCtx.get());
+}

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

@@ -0,0 +1,23 @@
+import type { WithChild } from 'svelte-toolbelt';
+import type { ButtonSize, ButtonVariant } from '../button';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+export type StepperRootProps = {
+    step?: number;
+    children?: Snippet;
+};
+export type StepperNavPropsWithoutHTML = {
+    orientation?: 'horizontal' | 'vertical';
+};
+export type StepperNavProps = StepperNavPropsWithoutHTML & HTMLAttributes<HTMLDivElement>;
+export type StepperItemPropsWithoutHTML = {
+    id?: string;
+};
+export type StepperItemProps = StepperItemPropsWithoutHTML & Omit<HTMLAttributes<HTMLDivElement>, 'id'>;
+export type StepperButtonPropsWithoutHTML = WithChild<{
+    disabled?: boolean;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}>;
+export type StepperNextButtonProps = StepperButtonPropsWithoutHTML;
+export type StepperPreviousButtonProps = StepperButtonPropsWithoutHTML;

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

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

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

@@ -0,0 +1,5 @@
+import Root from './tabs.svelte';
+import Content from './tabs-content.svelte';
+import List, { tabsListVariants, type TabsListVariant } from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+export { Root, Content, List, Trigger, tabsListVariants, type TabsListVariant, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger };

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

@@ -0,0 +1,7 @@
+import Root from './tabs.svelte';
+import Content from './tabs-content.svelte';
+import List, { tabsListVariants } from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+export { Root, Content, List, Trigger, tabsListVariants, 
+//
+Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger };

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+  bind:ref
+  data-slot="tabs-content"
+  class={cn('flex-1 text-sm outline-none', className)}
+  {...restProps}
+/>

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

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

package/dist/components/ui-extra/tabs/tabs-list.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  export const tabsListVariants = tv({
+    base: 'group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-[3px] group-data-horizontal/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none',
+    variants: {
+      variant: {
+        default: 'cn-tabs-list-variant-default bg-muted',
+        line: 'cn-tabs-list-variant-line gap-1 bg-transparent'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  });
+
+  export type TabsListVariant = VariantProps<
+    typeof tabsListVariants
+  >['variant'];
+</script>
+
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    variant = 'default',
+    class: className,
+    ...restProps
+  }: TabsPrimitive.ListProps & {
+    variant?: TabsListVariant;
+  } = $props();
+</script>
+
+<TabsPrimitive.List
+  bind:ref
+  data-slot="tabs-list"
+  data-variant={variant}
+  class={cn(tabsListVariants({ variant }), className)}
+  {...restProps}
+/>

package/dist/components/ui-extra/tabs/tabs-list.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const tabsListVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        line: string;
+    };
+}, undefined, "group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-[3px] group-data-horizontal/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none", {
+    variant: {
+        default: string;
+        line: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        line: string;
+    };
+}, undefined, "group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-[3px] group-data-horizontal/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none", unknown, unknown, undefined>>;
+export type TabsListVariant = VariantProps<typeof tabsListVariants>['variant'];
+import { Tabs as TabsPrimitive } from 'bits-ui';
+type $$ComponentProps = TabsPrimitive.ListProps & {
+    variant?: TabsListVariant;
+};
+declare const TabsList: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type TabsList = ReturnType<typeof TabsList>;
+export default TabsList;

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+  bind:ref
+  data-slot="tabs-trigger"
+  class={cn(
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+    'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',
+    'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+    className
+  )}
+  {...restProps}
+/>

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

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

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(''),
+    class: className,
+    ...restProps
+  }: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+  bind:ref
+  bind:value
+  data-slot="tabs"
+  class={cn(
+    'group/tabs flex gap-2 data-[orientation=horizontal]:flex-col',
+    className
+  )}
+  {...restProps}
+/>

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

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

package/dist/components/ui-extra/tags-input/index.d.ts

@@ -0,0 +1,3 @@
+import TagsInput from './tags-input.svelte';
+export { TagsInput };
+export type { TagsInputPropsWithoutHTML, TagsInputProps } from './types';