@profidev/pleiades 1.7.0

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

@@ -0,0 +1,164 @@
+import { tick, untrack } from 'svelte';
+import { Context } from 'runed';
+class RenameProviderState {
+    inputState = $state(null);
+    constructor() { }
+    /** Allows us to call functions on the input state from the provider */
+    registerInputState(inputState) {
+        this.inputState = inputState;
+    }
+}
+class RenameEditState {
+    providerState;
+    constructor(providerState) {
+        this.providerState = providerState;
+        this.edit = this.edit.bind(this);
+    }
+    edit() {
+        this.providerState.inputState?.startEditing();
+    }
+}
+class RenameCancelState {
+    providerState;
+    constructor(providerState) {
+        this.providerState = providerState;
+        this.cancel = this.cancel.bind(this);
+    }
+    cancel() {
+        this.providerState.inputState?.cancel();
+    }
+}
+class RenameSaveState {
+    providerState;
+    constructor(providerState) {
+        this.providerState = providerState;
+        this.save = this.save.bind(this);
+    }
+    save() {
+        this.providerState.inputState?.save();
+    }
+}
+class RenameInputState {
+    opts;
+    providerState;
+    mode = $state('view');
+    editingValue = $state('');
+    invalid = $derived.by(() => !this.opts.validate(this.editingValue));
+    get blurBehavior() {
+        if (this.opts.blurBehavior !== undefined &&
+            this.opts.blurBehavior.current !== undefined)
+            return this.opts.blurBehavior.current;
+        // if the blur behavior is provided, use it
+        // otherwise if the provider state is provided we assume that the user does not want to blur when the input loses focus
+        return this.providerState ? 'none' : 'exit';
+    }
+    constructor(opts, providerState) {
+        this.opts = opts;
+        this.providerState = providerState;
+        this.mode = this.opts.mode.current;
+        this.editingValue = this.opts.value.current;
+        // function bindings
+        this.onInputKeydown = this.onInputKeydown.bind(this);
+        this.onInputBlur = this.onInputBlur.bind(this);
+        this.onTextClick = this.onTextClick.bind(this);
+        this.save = this.save.bind(this);
+        this.cancel = this.cancel.bind(this);
+        this.startEditing = this.startEditing.bind(this);
+        this.providerState?.registerInputState(this);
+        // we do this so that we can detect changes to the mode from the outside
+        // this allows consumers to start edit mode and ensures that the state if kept in sync
+        $effect(() => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            this.opts.mode.current;
+            untrack(() => {
+                if (this.mode !== this.opts.mode.current) {
+                    this.mode = this.opts.mode.current;
+                    if (this.mode === 'edit') {
+                        this.startEditing();
+                    }
+                    else {
+                        this.cancel();
+                    }
+                }
+            });
+        });
+        $effect(() => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            this.mode;
+            untrack(() => {
+                this.opts.mode.current = this.mode;
+            });
+        });
+    }
+    async startEditing(selection) {
+        this.mode = 'edit';
+        this.editingValue = this.opts.value.current;
+        await tick();
+        this.opts.inputRef.current?.focus();
+        if (selection !== undefined) {
+            this.opts.inputRef.current?.setSelectionRange(selection.start, selection.end ?? selection.start);
+        }
+        else {
+            if (this.opts.fallbackSelectionBehavior.current === 'start') {
+                this.opts.inputRef.current?.setSelectionRange(0, 0);
+            }
+            else if (this.opts.fallbackSelectionBehavior.current === 'end') {
+                this.opts.inputRef.current?.setSelectionRange(this.editingValue.length, this.editingValue.length);
+            }
+            else if (this.opts.fallbackSelectionBehavior.current === 'all') {
+                this.opts.inputRef.current?.setSelectionRange(0, this.editingValue.length);
+            }
+        }
+    }
+    async save() {
+        if (this.invalid)
+            return;
+        await this.opts.onSave?.(this.editingValue);
+        this.opts.value.current = this.editingValue;
+        this.mode = 'view';
+    }
+    cancel() {
+        this.mode = 'view';
+        this.opts.onCancel?.();
+        this.editingValue = this.opts.value.current;
+    }
+    async onInputKeydown(e) {
+        if (e.key === 'Enter') {
+            await this.save();
+        }
+        if (e.key === 'Escape') {
+            this.cancel();
+        }
+    }
+    onInputBlur() {
+        if (this.blurBehavior === 'none')
+            return;
+        this.cancel();
+    }
+    async onTextClick() {
+        // do nothing if the provider state is defined
+        if (this.providerState !== undefined)
+            return;
+        await new Promise((res) => setTimeout(res, 0));
+        // this is how we make sure the selection starts where the user clicked
+        const selected = window.getSelection();
+        const focusOffset = selected?.focusOffset;
+        await this.startEditing(focusOffset ? { start: focusOffset } : undefined);
+    }
+}
+const providerCtx = new Context('rename-provider-state');
+export function useRename() {
+    return providerCtx.set(new RenameProviderState());
+}
+export function useRenameEdit() {
+    return new RenameEditState(providerCtx.get());
+}
+export function useRenameCancel() {
+    return new RenameCancelState(providerCtx.get());
+}
+export function useRenameSave() {
+    return new RenameSaveState(providerCtx.get());
+}
+export function useRenameInput(opts) {
+    return new RenameInputState(opts, providerCtx.getOr(undefined));
+}

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

@@ -0,0 +1 @@
+export type TextElementTagNames = 'a' | 'abbr' | 'address' | 'b' | 'bdi' | 'bdo' | 'blockquote' | 'cite' | 'code' | 'data' | 'dd' | 'del' | 'dfn' | 'dt' | 'em' | 'figcaption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'header' | 'hgroup' | 'i' | 'ins' | 'kbd' | 'label' | 'legend' | 'li' | 'main' | 'mark' | 'nav' | 'noscript' | 'p' | 'pre' | 'q' | 'rp' | 'rt' | 'ruby' | 's' | 'samp' | 'search' | 'section' | 'small' | 'span' | 'strong' | 'sub' | 'summary' | 'sup' | 'time' | 'title' | 'u' | 'var';

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

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

package/dist/components/ui-extra/scroll-area/index.d.ts

@@ -0,0 +1,3 @@
+import Scrollbar from './scroll-area-scrollbar.svelte';
+import Root from './scroll-area.svelte';
+export { Root, Scrollbar, Root as ScrollArea, Scrollbar as ScrollAreaScrollbar };

package/dist/components/ui-extra/scroll-area/index.js

@@ -0,0 +1,5 @@
+import Scrollbar from './scroll-area-scrollbar.svelte';
+import Root from './scroll-area.svelte';
+export { Root, Scrollbar, 
+//,
+Root as ScrollArea, Scrollbar as ScrollAreaScrollbar };

package/dist/components/ui-extra/scroll-area/scroll-area-scrollbar.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+  import { cn, type WithoutChild } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    orientation = 'vertical',
+    children,
+    ...restProps
+  }: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+  bind:ref
+  data-slot="scroll-area-scrollbar"
+  data-orientation={orientation}
+  {orientation}
+  class={cn(
+    'flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+  <ScrollAreaPrimitive.Thumb
+    data-slot="scroll-area-thumb"
+    class="bg-border relative flex-1 rounded-full"
+  />
+</ScrollAreaPrimitive.Scrollbar>

package/dist/components/ui-extra/scroll-area/scroll-area-scrollbar.svelte.d.ts

@@ -0,0 +1,4 @@
+import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+declare const ScrollAreaScrollbar: import("svelte").Component<Omit<ScrollAreaPrimitive.ScrollbarProps, "child">, {}, "ref">;
+type ScrollAreaScrollbar = ReturnType<typeof ScrollAreaScrollbar>;
+export default ScrollAreaScrollbar;

package/dist/components/ui-extra/scroll-area/scroll-area.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+  import { Scrollbar } from './index.js';
+  import { cn, type WithoutChild } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    viewportRef = $bindable(null),
+    class: className,
+    orientation = 'vertical',
+    scrollbarXClasses = '',
+    scrollbarYClasses = '',
+    children,
+    ...restProps
+  }: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+    orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
+    scrollbarXClasses?: string | undefined;
+    scrollbarYClasses?: string | undefined;
+    viewportRef?: HTMLElement | null;
+  } = $props();
+</script>
+
+<ScrollAreaPrimitive.Root
+  bind:ref
+  data-slot="scroll-area"
+  class={cn('relative', className)}
+  {...restProps}
+>
+  <ScrollAreaPrimitive.Viewport
+    bind:ref={viewportRef}
+    data-slot="scroll-area-viewport"
+    class="cn-scroll-area-viewport focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+  >
+    {@render children?.()}
+  </ScrollAreaPrimitive.Viewport>
+  {#if orientation === 'vertical' || orientation === 'both'}
+    <Scrollbar orientation="vertical" class={scrollbarYClasses} />
+  {/if}
+  {#if orientation === 'horizontal' || orientation === 'both'}
+    <Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+  {/if}
+  <ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>

package/dist/components/ui-extra/scroll-area/scroll-area.svelte.d.ts

@@ -0,0 +1,11 @@
+import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
+import { type WithoutChild } from '../../../blocks/utils.js';
+type $$ComponentProps = WithoutChild<ScrollAreaPrimitive.RootProps> & {
+    orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
+    scrollbarXClasses?: string | undefined;
+    scrollbarYClasses?: string | undefined;
+    viewportRef?: HTMLElement | null;
+};
+declare const ScrollArea: import("svelte").Component<$$ComponentProps, {}, "ref" | "viewportRef">;
+type ScrollArea = ReturnType<typeof ScrollArea>;
+export default ScrollArea;

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

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

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

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

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

@@ -0,0 +1,62 @@
+<script lang="ts" module>
+  import { cn } from '../../../blocks/utils.js';
+  import { tv, type VariantProps } from 'tailwind-variants';
+  import { CopyButton } from '../copy-button';
+  import type { UseClipboard } from '../../../blocks/use-clipboard.svelte';
+
+  const style = tv({
+    base: 'bg-background relative w-full max-w-full rounded-md border py-2.5 pr-12 pl-3',
+    variants: {
+      variant: {
+        default: 'border-border bg-card',
+        secondary: 'border-border bg-accent',
+        destructive: 'border-destructive bg-destructive',
+        primary: 'border-primary bg-primary text-primary-foreground'
+      }
+    }
+  });
+
+  type Variant = VariantProps<typeof style>['variant'];
+
+  export type SnippetProps = {
+    variant?: Variant;
+    text: string | string[];
+    class?: string;
+    onCopy?: (status: UseClipboard['status']) => void;
+  };
+</script>
+
+<script lang="ts">
+  let {
+    text,
+    variant = 'default',
+    onCopy,
+    class: className
+  }: SnippetProps = $props();
+</script>
+
+<div class={cn(style({ variant, className: className }))}>
+  {#if typeof text == 'string'}
+    <pre
+      class={cn(
+        'overflow-y-auto text-left font-mono text-sm font-light whitespace-nowrap'
+      )}>
+			{text}
+		</pre>
+  {:else}
+    {#each text as line, i (i)}
+      <pre
+        class={cn(
+          'overflow-y-auto text-left font-mono text-sm font-light whitespace-nowrap'
+        )}>
+			{line}
+		</pre>
+    {/each}
+  {/if}
+
+  <CopyButton
+    class="hover:text-opacity-80 absolute top-1/2 right-2 size-7 -translate-y-1/2 transition-opacity ease-in-out hover:bg-transparent dark:hover:bg-transparent"
+    text={typeof text === 'string' ? text : text.join('\n')}
+    {onCopy}
+  />
+</div>

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

@@ -0,0 +1,34 @@
+import { type VariantProps } from 'tailwind-variants';
+import type { UseClipboard } from '../../../blocks/use-clipboard.svelte';
+declare const style: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        primary: string;
+    };
+}, undefined, "bg-background relative w-full max-w-full rounded-md border py-2.5 pr-12 pl-3", {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        primary: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        primary: string;
+    };
+}, undefined, "bg-background relative w-full max-w-full rounded-md border py-2.5 pr-12 pl-3", unknown, unknown, undefined>>;
+type Variant = VariantProps<typeof style>['variant'];
+export type SnippetProps = {
+    variant?: Variant;
+    text: string | string[];
+    class?: string;
+    onCopy?: (status: UseClipboard['status']) => void;
+};
+declare const Snippet: import("svelte").Component<SnippetProps, {}, "">;
+type Snippet = ReturnType<typeof Snippet>;
+export default Snippet;

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

@@ -0,0 +1 @@
+export { default as Spinner } from './spinner.svelte';

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

@@ -0,0 +1 @@
+export { default as Spinner } from './spinner.svelte';

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import Loader2Icon from '@lucide/svelte/icons/loader-2';
+  import type { SVGAttributes } from 'svelte/elements';
+
+  let {
+    class: className,
+    role = 'status',
+    // we add name, color, and stroke for compatibility with different icon libraries props
+    name,
+    color,
+    stroke,
+    'aria-label': ariaLabel = 'Loading',
+    ...restProps
+  }: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Loader2Icon
+  {role}
+  name={name === null ? undefined : name}
+  color={color === null ? undefined : color}
+  stroke={stroke === null ? undefined : stroke}
+  aria-label={ariaLabel}
+  class={cn('size-4 animate-spin', className)}
+  {...restProps}
+/>

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

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

package/dist/components/ui-extra/star-rating/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from './star-rating.svelte';
+export { default as Star } from './star-rating-star.svelte';

package/dist/components/ui-extra/star-rating/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './star-rating.svelte';
+export { default as Star } from './star-rating-star.svelte';

package/dist/components/ui-extra/star-rating/star-rating-star.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import StarHalfIcon from '@lucide/svelte/icons/star-half';
+  import StarIcon from '@lucide/svelte/icons/star';
+  import { RatingGroup } from 'bits-ui';
+  import type { StarRatingStarProps } from './types';
+
+  let { index, state, class: className }: StarRatingStarProps = $props();
+</script>
+
+<RatingGroup.Item
+  {index}
+  class={cn(
+    'ring-ring text-primary ring-offset-background group/item size-5 rounded-md ring-offset-2 outline-hidden group-aria-disabled:opacity-50 focus-visible:ring-2',
+    className
+  )}
+>
+  <div class="relative size-full">
+    <StarIcon
+      class={cn('size-full fill-transparent transition-all', {
+        'fill-current': state === 'active'
+      })}
+    />
+    <StarHalfIcon
+      class={cn(
+        'absolute top-0 left-0 size-full fill-transparent transition-all group-data-[state=active]/item:fill-current',
+        {
+          'ltr:fill-current': state === 'partial'
+        }
+      )}
+    />
+    <StarHalfIcon
+      class={cn(
+        'absolute top-0 right-0 size-full scale-x-[-1] fill-transparent transition-all group-data-[state=active]/item:fill-current',
+        {
+          'rtl:fill-current': state === 'partial'
+        }
+      )}
+    />
+  </div>
+</RatingGroup.Item>

package/dist/components/ui-extra/star-rating/star-rating-star.svelte.d.ts

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

package/dist/components/ui-extra/star-rating/star-rating.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import { RatingGroup, type RatingGroupRootProps } from 'bits-ui';
+
+  let {
+    value = $bindable(0),
+    max = 5,
+    orientation = 'horizontal',
+    class: className,
+    ...rest
+  }: RatingGroupRootProps = $props();
+</script>
+
+<RatingGroup.Root
+  class={cn(
+    'group flex w-fit place-items-center gap-1 rounded-md outline-hidden',
+    className
+  )}
+  bind:value
+  {max}
+  {orientation}
+  {...rest}
+/>

package/dist/components/ui-extra/star-rating/star-rating.svelte.d.ts

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

package/dist/components/ui-extra/star-rating/types.d.ts

@@ -0,0 +1,5 @@
+export type StarRatingStarProps = {
+    index: number;
+    state: 'active' | 'partial' | 'inactive';
+    class?: string;
+};

package/dist/components/ui-extra/star-rating/types.js

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

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

@@ -0,0 +1,11 @@
+import Root from './stepper.svelte';
+import Nav from './stepper-nav.svelte';
+import Item from './stepper-item.svelte';
+import Trigger from './stepper-trigger.svelte';
+import Indicator from './stepper-indicator.svelte';
+import Separator from './stepper-separator.svelte';
+import Title from './stepper-title.svelte';
+import Description from './stepper-description.svelte';
+import Next from './stepper-next.svelte';
+import Previous from './stepper-previous.svelte';
+export { Root, Nav, Item, Trigger, Indicator, Separator, Title, Description, Next, Previous, Root as Stepper, Nav as StepperNav, Item as StepperItem, Trigger as StepperTrigger, Indicator as StepperIndicator, Separator as StepperSeparator, Title as StepperTitle, Description as StepperDescription, Next as StepperNext, Previous as StepperPrevious };

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

@@ -0,0 +1,13 @@
+import Root from './stepper.svelte';
+import Nav from './stepper-nav.svelte';
+import Item from './stepper-item.svelte';
+import Trigger from './stepper-trigger.svelte';
+import Indicator from './stepper-indicator.svelte';
+import Separator from './stepper-separator.svelte';
+import Title from './stepper-title.svelte';
+import Description from './stepper-description.svelte';
+import Next from './stepper-next.svelte';
+import Previous from './stepper-previous.svelte';
+export { Root, Nav, Item, Trigger, Indicator, Separator, Title, Description, Next, Previous, 
+//
+Root as Stepper, Nav as StepperNav, Item as StepperItem, Trigger as StepperTrigger, Indicator as StepperIndicator, Separator as StepperSeparator, Title as StepperTitle, Description as StepperDescription, Next as StepperNext, Previous as StepperPrevious };

package/dist/components/ui-extra/stepper/stepper-description.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-description"
+  class={cn(
+    'text-muted-foreground text-sm',
+    '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-description.svelte.d.ts

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

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

@@ -0,0 +1,22 @@
+<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-indicator"
+  class={cn(
+    'bg-primary text-primary-foreground z-1 flex size-7 shrink-0 items-center justify-center rounded-full ring-3 transition-colors select-none [&_svg]:size-4',
+    'group-data-[state=inactive]/stepper-trigger:text-muted-foreground group-data-[state=inactive]/stepper-trigger:bg-muted ring-background',
+    className
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils';
+  import { useStepperItem } from './stepper.svelte.js';
+  import type { StepperItemProps } from './types';
+
+  const uid = $props.id();
+
+  let {
+    id = uid,
+    class: className,
+    children,
+    ...rest
+  }: StepperItemProps = $props();
+
+  const stepperItemState = useStepperItem({ id });
+</script>
+
+<div
+  data-slot="stepper-item"
+  class={cn(
+    'group/stepper-item relative flex',
+    {
+      'flex-1': !stepperItemState.isLast
+    },
+    className
+  )}
+  {...stepperItemState.props}
+  {...rest}
+>
+  {@render children?.()}
+</div>

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

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