@johly/bits-ui 2.18.1

package/dist/bits/rating-group/rating-group.svelte.js

@@ -0,0 +1,320 @@
+import { attachRef, DOMContext, } from "svelte-toolbelt";
+import { Context } from "runed";
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef } from "../../internal/attrs.js";
+import { kbd } from "../../internal/kbd.js";
+const ratingGroupAttrs = createBitsAttrs({
+    component: "rating-group",
+    parts: ["root", "item"],
+});
+const RatingGroupRootContext = new Context("RatingGroup.Root");
+export class RatingGroupRootState {
+    static create(opts) {
+        return RatingGroupRootContext.set(new RatingGroupRootState(opts));
+    }
+    opts;
+    attachment;
+    #hoverValue = $state(null);
+    #keySequence = $state("");
+    #keySequenceTimeout = null;
+    domContext;
+    hasValue = $derived.by(() => this.opts.value.current > 0);
+    valueToUse = $derived.by(() => this.#hoverValue ?? this.opts.value.current);
+    isRTL = $derived.by(() => {
+        const element = this.opts.ref.current;
+        if (!element)
+            return false;
+        const style = getComputedStyle(element);
+        return style.direction === "rtl";
+    });
+    ariaValuetext = $derived.by(() => {
+        return typeof this.opts.ariaValuetext.current === "function"
+            ? this.opts.ariaValuetext.current(this.opts.value.current, this.opts.max.current)
+            : this.opts.ariaValuetext.current;
+    });
+    items = $derived.by(() => {
+        const value = this.valueToUse;
+        return Array.from({ length: this.opts.max.current }, (_, i) => {
+            const itemValue = i + 1;
+            const halfValue = itemValue - 0.5;
+            const state = value >= itemValue
+                ? "active"
+                : this.opts.allowHalf.current && value >= halfValue
+                    ? "partial"
+                    : "inactive";
+            return { index: i, state };
+        });
+    });
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onpointerleave = this.onpointerleave.bind(this);
+        this.domContext = new DOMContext(this.opts.ref);
+    }
+    isActive(itemIndex) {
+        return this.valueToUse >= itemIndex + 1;
+    }
+    isPartial(itemIndex) {
+        if (!this.opts.allowHalf.current)
+            return false;
+        const itemValue = itemIndex + 1;
+        return this.valueToUse >= itemValue - 0.5 && this.valueToUse < itemValue;
+    }
+    setHoverValue(value) {
+        if (this.opts.readonly.current ||
+            this.opts.disabled.current ||
+            !this.opts.hoverPreview.current)
+            return;
+        this.#hoverValue =
+            value === null
+                ? null
+                : Math.max(this.opts.min.current, Math.min(this.opts.max.current, value));
+    }
+    setValue(value) {
+        if (this.opts.readonly.current || this.opts.disabled.current)
+            return;
+        this.opts.value.current = Math.max(this.opts.min.current, Math.min(this.opts.max.current, value));
+    }
+    calculateRatingFromPointer(itemIndex, event) {
+        const ratingValue = itemIndex + 1;
+        if (!this.opts.allowHalf.current)
+            return ratingValue;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const style = getComputedStyle(event.currentTarget);
+        const isHorizontal = this.opts.orientation.current === "horizontal";
+        const position = isHorizontal
+            ? (event.clientX - rect.left) / rect.width
+            : (event.clientY - rect.top) / rect.height;
+        const normalizedPosition = style.direction === "rtl" ? 1 - position : position;
+        return normalizedPosition < 0.5 ? ratingValue - 0.5 : ratingValue;
+    }
+    onpointerleave() {
+        this.setHoverValue(null);
+    }
+    handlers = {
+        [kbd.ARROW_UP]: () => {
+            this.setHoverValue(null);
+            this.#adjustValue(this.opts.allowHalf.current ? 0.5 : 1);
+        },
+        [kbd.ARROW_RIGHT]: () => {
+            this.setHoverValue(null);
+            const increment = this.opts.allowHalf.current ? 0.5 : 1;
+            // in RTL mode, right arrow should decrement
+            this.#adjustValue(this.isRTL ? -increment : increment);
+        },
+        [kbd.ARROW_DOWN]: () => {
+            this.setHoverValue(null);
+            this.#adjustValue(this.opts.allowHalf.current ? -0.5 : -1);
+        },
+        [kbd.ARROW_LEFT]: () => {
+            this.setHoverValue(null);
+            const increment = this.opts.allowHalf.current ? 0.5 : 1;
+            // in RTL mode, left arrow should increment
+            this.#adjustValue(this.isRTL ? increment : -increment);
+        },
+        [kbd.HOME]: () => {
+            this.setHoverValue(null);
+            this.setValue(this.opts.min.current);
+        },
+        [kbd.END]: () => {
+            this.setHoverValue(null);
+            this.setValue(this.opts.max.current);
+        },
+        [kbd.PAGE_UP]: () => {
+            this.setHoverValue(null);
+            this.#adjustValue(1);
+        },
+        [kbd.PAGE_DOWN]: () => {
+            this.setHoverValue(null);
+            this.#adjustValue(-1);
+        },
+    };
+    onkeydown(e) {
+        if (this.opts.disabled.current || this.opts.readonly.current)
+            return;
+        if (this.handlers[e.key]) {
+            e.preventDefault();
+            this.#clearKeySequence();
+            this.handlers[e.key]?.();
+            return;
+        }
+        if (this.opts.allowHalf.current && this.#handleDecimalInput(e))
+            return;
+        // handle direct number input
+        const num = parseInt(e.key || "");
+        if (!isNaN(num) && e.key) {
+            e.preventDefault();
+            if (num >= this.opts.min.current && num <= this.opts.max.current) {
+                this.setValue(num);
+                if (this.opts.allowHalf.current) {
+                    this.#startDecimalListening(num);
+                }
+            }
+            return;
+        }
+        this.#clearKeySequence();
+    }
+    #adjustValue(delta) {
+        this.setValue(this.opts.value.current + delta);
+    }
+    #handleDecimalInput(e) {
+        if (!e.key)
+            return false;
+        if (e.key === ".") {
+            e.preventDefault();
+            this.#keySequence += e.key;
+            return true;
+        }
+        if (e.key === "5" && this.#keySequence.match(/^\d+\.$/)) {
+            e.preventDefault();
+            this.#keySequence += e.key;
+            const match = this.#keySequence.match(/^(\d+)\.5$/);
+            if (match?.[1]) {
+                const value = parseFloat(this.#keySequence);
+                if (value >= this.opts.min.current && value <= this.opts.max.current) {
+                    this.setValue(value);
+                    this.#clearKeySequence();
+                }
+            }
+            return true;
+        }
+        return false;
+    }
+    #startDecimalListening(baseValue) {
+        this.#keySequence = baseValue.toString();
+        if (this.#keySequenceTimeout) {
+            this.domContext.clearTimeout(this.#keySequenceTimeout);
+        }
+        this.#keySequenceTimeout = this.domContext.setTimeout(() => this.#clearKeySequence(), 1000);
+    }
+    #clearKeySequence() {
+        this.#keySequence = "";
+        if (this.#keySequenceTimeout) {
+            this.domContext.clearTimeout(this.#keySequenceTimeout);
+            this.#keySequenceTimeout = null;
+        }
+    }
+    snippetProps = $derived.by(() => ({
+        items: this.items,
+        value: this.opts.value.current,
+        max: this.opts.max.current,
+    }));
+    props = $derived.by(() => {
+        return {
+            id: this.opts.id.current,
+            role: "slider",
+            "aria-valuenow": this.opts.value.current,
+            "aria-valuemin": this.opts.min.current,
+            "aria-valuemax": this.opts.max.current,
+            "aria-valuetext": this.ariaValuetext,
+            "aria-orientation": this.opts.orientation.current,
+            "aria-required": boolToStr(this.opts.required.current),
+            "aria-disabled": this.opts.disabled.current ? "true" : undefined,
+            "aria-label": "Rating",
+            "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+            "data-readonly": this.opts.readonly.current ? "" : undefined,
+            "data-orientation": this.opts.orientation.current,
+            tabindex: this.opts.disabled.current ? -1 : 0,
+            [ratingGroupAttrs.root]: "",
+            onkeydown: this.onkeydown,
+            onpointerleave: this.onpointerleave,
+            ...this.attachment,
+        };
+    });
+}
+export class RatingGroupItemState {
+    static create(opts) {
+        return new RatingGroupItemState(opts, RatingGroupRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
+    #isActive = $derived.by(() => this.root.isActive(this.opts.index.current));
+    #isPartial = $derived.by(() => this.root.isPartial(this.opts.index.current));
+    #state = $derived.by(() => {
+        if (this.#isActive)
+            return "active";
+        if (this.#isPartial)
+            return "partial";
+        return "inactive";
+    });
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(opts.ref);
+        this.onclick = this.onclick.bind(this);
+        this.onpointermove = this.onpointermove.bind(this);
+    }
+    onclick(e) {
+        if (this.#isDisabled || this.root.opts.readonly.current)
+            return;
+        // handle clearing when clicking on first item (index 0) that's already
+        // active and min is 0
+        if (this.opts.index.current === 0 &&
+            this.root.opts.min.current === 0 &&
+            this.root.opts.value.current > 0) {
+            const newValue = this.root.calculateRatingFromPointer(this.opts.index.current, e);
+            const currentValue = this.root.opts.value.current;
+            // only clear if the calculated rating exactly matches current value
+            if (newValue === currentValue) {
+                this.root.setValue(0);
+                if (this.root.opts.ref.current) {
+                    this.root.opts.ref.current.focus();
+                }
+                return;
+            }
+        }
+        const newValue = this.root.calculateRatingFromPointer(this.opts.index.current, e);
+        this.root.setValue(newValue);
+        if (this.root.opts.ref.current) {
+            this.root.opts.ref.current.focus();
+        }
+    }
+    onpointermove(e) {
+        if (this.#isDisabled ||
+            this.root.opts.readonly.current ||
+            !this.root.opts.hoverPreview.current)
+            return;
+        // skip hover preview for touch devices
+        if (e.pointerType === "touch")
+            return;
+        const hoverValue = this.root.calculateRatingFromPointer(this.opts.index.current, e);
+        this.root.setHoverValue(hoverValue);
+    }
+    snippetProps = $derived.by(() => {
+        return {
+            state: this.#state,
+        };
+    });
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: "presentation",
+        "data-value": this.opts.index.current + 1,
+        "data-orientation": this.root.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
+        "data-readonly": this.root.opts.readonly.current ? "" : undefined,
+        "data-state": this.#state,
+        [ratingGroupAttrs.item]: "",
+        //
+        onclick: this.onclick,
+        onpointermove: this.onpointermove,
+        ...this.attachment,
+    }));
+}
+export class RatingGroupHiddenInputState {
+    static create() {
+        return new RatingGroupHiddenInputState(RatingGroupRootContext.get());
+    }
+    root;
+    shouldRender = $derived.by(() => this.root.opts.name.current !== undefined);
+    props = $derived.by(() => ({
+        name: this.root.opts.name.current,
+        value: this.root.opts.value.current,
+        required: this.root.opts.required.current,
+        disabled: this.root.opts.disabled.current,
+    }));
+    constructor(root) {
+        this.root = root;
+    }
+}

package/dist/bits/rating-group/types.d.ts

@@ -0,0 +1,111 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { Orientation } from "../../index.js";
+import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+export type RatingGroupItemState = "active" | "partial" | "inactive";
+export type RatingGroupItemData = {
+    index: number;
+    state: RatingGroupItemState;
+};
+export type RatingGroupRootSnippetProps = {
+    items: RatingGroupItemData[];
+    value: number;
+    max: number;
+};
+export type RatingGroupAriaValuetext = BitsPrimitiveDivAttributes["aria-valuetext"] | ((value: number, max: number) => string);
+export type RatingGroupRootPropsWithoutHTML = WithChild<{
+    /**
+     * The orientation of the rating group. Used to determine
+     * how keyboard interactions work.
+     *
+     * @default "horizontal"
+     */
+    orientation?: Orientation;
+    /**
+     * The current rating value.
+     *
+     * @default 0
+     */
+    value?: number;
+    /**
+     * The callback to call when the rating value changes.
+     */
+    onValueChange?: OnChangeFn<number>;
+    /**
+     * The name to apply to the rating group's input element for
+     * form submission. If not provided, a hidden input will not
+     * be rendered and the rating group will not be part of a form.
+     *
+     * @default undefined
+     */
+    name?: string;
+    /**
+     * Whether the rating group is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the rating group is required for form submission.
+     * If `true`, ensure you provide a `name` prop so the hidden
+     * input is rendered.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The minimum rating value.
+     *
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum rating value (number of items).
+     *
+     * @default 5
+     */
+    max?: number;
+    /**
+     * Whether to allow half-star ratings.
+     *
+     * @default false
+     */
+    allowHalf?: boolean;
+    /**
+     * Whether the rating group is readonly.
+     *
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * Whether to show a preview when hovering over rating items.
+     * Touch events are ignored to prevent accidental previews.
+     *
+     * @default true
+     */
+    hoverPreview?: boolean;
+    /**
+     * An extended `aria-valuetext` property to use for the rating group.
+     * Can either be a string, or a function that receives the current value
+     * and max value and returns a string.
+     *
+     * @default ((value: number, max: number) => `${value} out of ${max}`)
+     */
+    "aria-valuetext"?: RatingGroupAriaValuetext;
+}, RatingGroupRootSnippetProps>;
+export type RatingGroupRootProps = RatingGroupRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, RatingGroupRootPropsWithoutHTML>;
+export type RatingGroupItemSnippetProps = {
+    state: RatingGroupItemState;
+};
+export type RatingGroupItemPropsWithoutHTML = WithChild<{
+    /**
+     * The index of the rating item (0-based index).
+     */
+    index: number;
+    /**
+     * Whether the rating item is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean | null | undefined;
+}, RatingGroupItemSnippetProps>;
+export type RatingGroupItemProps = RatingGroupItemPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, RatingGroupItemPropsWithoutHTML>;

package/dist/bits/rating-group/types.js

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

package/dist/bits/scroll-area/components/scroll-area-corner-impl.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { ScrollAreaCornerProps } from "../types.js";
+	import { ScrollAreaCornerImplState } from "../scroll-area.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		id,
+		children,
+		child,
+		...restProps
+	}: Omit<ScrollAreaCornerProps, "id"> & {
+		id: string;
+	} = $props();
+
+	const cornerState = ScrollAreaCornerImplState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, cornerState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/bits/scroll-area/components/scroll-area-corner-impl.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ScrollAreaCornerProps } from "../types.js";
+type $$ComponentProps = Omit<ScrollAreaCornerProps, "id"> & {
+    id: string;
+};
+declare const ScrollAreaCornerImpl: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ScrollAreaCornerImpl = ReturnType<typeof ScrollAreaCornerImpl>;
+export default ScrollAreaCornerImpl;

package/dist/bits/scroll-area/components/scroll-area-corner.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { ScrollAreaCornerProps } from "../types.js";
+	import { ScrollAreaRootContext } from "../scroll-area.svelte.js";
+	import ScrollAreaCornerImpl from "./scroll-area-corner-impl.svelte";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = createId(uid),
+		...restProps
+	}: ScrollAreaCornerProps = $props();
+
+	const scrollAreaState = ScrollAreaRootContext.get();
+
+	const hasBothScrollbarsVisible = $derived(
+		Boolean(scrollAreaState.scrollbarXNode && scrollAreaState.scrollbarYNode)
+	);
+	const hasCorner = $derived(
+		scrollAreaState.opts.type.current !== "scroll" && hasBothScrollbarsVisible
+	);
+</script>
+
+{#if hasCorner}
+	<ScrollAreaCornerImpl {...restProps} {id} bind:ref />
+{/if}

package/dist/bits/scroll-area/components/scroll-area-corner.svelte.d.ts

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

package/dist/bits/scroll-area/components/scroll-area-scrollbar-auto.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
+	import { ScrollAreaScrollbarAutoState } from "../scroll-area.svelte.js";
+	import type { _ScrollbarStubProps } from "../types.js";
+	import ScrollAreaScrollbarVisible from "./scroll-area-scrollbar-visible.svelte";
+	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
+
+	let { forceMount = false, ...restProps }: _ScrollbarStubProps = $props();
+
+	const scrollbarAutoState = ScrollAreaScrollbarAutoState.create();
+	const mergedProps = $derived(mergeProps(restProps, scrollbarAutoState.props));
+</script>
+
+<PresenceLayer
+	open={forceMount || scrollbarAutoState.isVisible}
+	ref={scrollbarAutoState.scrollbar.opts.ref}
+>
+	{#snippet presence()}
+		<ScrollAreaScrollbarVisible {...mergedProps} />
+	{/snippet}
+</PresenceLayer>

package/dist/bits/scroll-area/components/scroll-area-scrollbar-auto.svelte.d.ts

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

package/dist/bits/scroll-area/components/scroll-area-scrollbar-hover.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
+	import {
+		ScrollAreaScrollbarAutoState,
+		ScrollAreaScrollbarHoverState,
+	} from "../scroll-area.svelte.js";
+	import type { _ScrollbarStubProps } from "../types.js";
+	import ScrollAreaScrollbarVisible from "./scroll-area-scrollbar-visible.svelte";
+	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
+
+	let { forceMount = false, ...restProps }: _ScrollbarStubProps = $props();
+
+	const scrollbarHoverState = ScrollAreaScrollbarHoverState.create();
+	const scrollbarAutoState = ScrollAreaScrollbarAutoState.create();
+	const mergedProps = $derived(
+		mergeProps(restProps, scrollbarHoverState.props, scrollbarAutoState.props, {
+			"data-state": scrollbarHoverState.isVisible ? "visible" : "hidden",
+		})
+	);
+
+	const open = $derived(
+		forceMount || (scrollbarHoverState.isVisible && scrollbarAutoState.isVisible)
+	);
+</script>
+
+<PresenceLayer {open} ref={scrollbarAutoState.scrollbar.opts.ref}>
+	{#snippet presence()}
+		<ScrollAreaScrollbarVisible {...mergedProps} />
+	{/snippet}
+</PresenceLayer>

package/dist/bits/scroll-area/components/scroll-area-scrollbar-hover.svelte.d.ts

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

package/dist/bits/scroll-area/components/scroll-area-scrollbar-scroll.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
+	import { ScrollAreaScrollbarScrollState } from "../scroll-area.svelte.js";
+	import type { _ScrollbarStubProps } from "../types.js";
+	import ScrollAreaScrollbarVisible from "./scroll-area-scrollbar-visible.svelte";
+	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
+
+	let { forceMount = false, ...restProps }: _ScrollbarStubProps = $props();
+
+	const scrollbarScrollState = ScrollAreaScrollbarScrollState.create();
+
+	const mergedProps = $derived(mergeProps(restProps, scrollbarScrollState.props));
+</script>
+
+<PresenceLayer
+	{...mergedProps}
+	open={forceMount || !scrollbarScrollState.isHidden}
+	ref={scrollbarScrollState.scrollbar.opts.ref}
+>
+	{#snippet presence()}
+		<ScrollAreaScrollbarVisible {...mergedProps} />
+	{/snippet}
+</PresenceLayer>

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

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

package/dist/bits/scroll-area/components/scroll-area-scrollbar-shared.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { mergeProps } from "svelte-toolbelt";
+	import { ScrollAreaScrollbarSharedState } from "../scroll-area.svelte.js";
+	import type { _ScrollbarStubProps } from "../types.js";
+
+	let { child, children, ...restProps }: _ScrollbarStubProps = $props();
+
+	const scrollbarSharedState = ScrollAreaScrollbarSharedState.create();
+
+	const mergedProps = $derived(mergeProps(restProps, scrollbarSharedState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/bits/scroll-area/components/scroll-area-scrollbar-shared.svelte.d.ts

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

package/dist/bits/scroll-area/components/scroll-area-scrollbar-visible.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { ScrollAreaScrollbarVisibleState } from "../scroll-area.svelte.js";
+	import type { _ScrollbarStubProps } from "../types.js";
+	import ScrollAreaScrollbarX from "./scroll-area-scrollbar-x.svelte";
+	import ScrollAreaScrollbarY from "./scroll-area-scrollbar-y.svelte";
+
+	let { ...restProps }: Omit<_ScrollbarStubProps, "forceMount"> = $props();
+
+	const scrollbarVisibleState = ScrollAreaScrollbarVisibleState.create();
+</script>
+
+{#if scrollbarVisibleState.scrollbar.opts.orientation.current === "horizontal"}
+	<ScrollAreaScrollbarX {...restProps} />
+{:else}
+	<ScrollAreaScrollbarY {...restProps} />
+{/if}

package/dist/bits/scroll-area/components/scroll-area-scrollbar-visible.svelte.d.ts

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

package/dist/bits/scroll-area/components/scroll-area-scrollbar-x.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { IsMounted } from "runed";
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { ScrollAreaScrollbarXState } from "../scroll-area.svelte.js";
+	import type { _ScrollbarStubProps } from "../types.js";
+	import ScrollAreaScrollbarShared from "./scroll-area-scrollbar-shared.svelte";
+
+	let { ...restProps }: _ScrollbarStubProps = $props();
+
+	const isMounted = new IsMounted();
+
+	const scrollbarXState = ScrollAreaScrollbarXState.create({
+		mounted: boxWith(() => isMounted.current),
+	});
+	// oxlint-disable-next-line no-explicit-any
+	const mergedProps = $derived(mergeProps(restProps, scrollbarXState.props)) as any;
+</script>
+
+<ScrollAreaScrollbarShared {...mergedProps} />