sheer-ui 0.0.0

package/src/lib/components/range-calendar/types.ts

@@ -0,0 +1,258 @@
+import type { DateValue } from "@internationalized/date";
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { DateMatcher, DateRange, Month } from "../../internal/index.js";
+import type { BitsPrimitiveDivAttributes } from "../../internal/attribute-types.js";
+
+export type RangeCalendarRootSnippetProps = {
+	months: Month<DateValue>[];
+	weekdays: string[];
+};
+
+export type RangeCalendarRootPropsWithoutHTML = WithChild<
+	{
+		/**
+		 * The value of the selected date range.
+		 * @bindable
+		 */
+		value?: DateRange;
+
+		/**
+		 * A callback function called when the value changes.
+		 */
+		onValueChange?: OnChangeFn<DateRange>;
+
+		/**
+		 * The placeholder date, used to control the view of the
+		 * calendar when no value is present.
+		 *
+		 * @default the current date
+		 */
+		placeholder?: DateValue;
+
+		/**
+		 * A callback function called when the placeholder value
+		 * changes.
+		 */
+		onPlaceholderChange?: OnChangeFn<DateValue>;
+
+		/**
+		 * The minimum number of days that can be selected in a range.
+		 *
+		 * @default undefined
+		 */
+		minDays?: number;
+
+		/**
+		 * The maximum number of days that can be selected in a range.
+		 *
+		 * @default undefined
+		 */
+		maxDays?: number;
+
+		/**
+		 * Whether or not users can deselect a date once selected
+		 * without selecting another date.
+		 *
+		 * @default false
+		 */
+		preventDeselect?: boolean;
+
+		/**
+		 * The minimum date that can be selected in the calendar.
+		 */
+		minValue?: DateValue;
+
+		/**
+		 * The maximum date that can be selected in the calendar.
+		 */
+		maxValue?: DateValue;
+
+		/**
+		 * Whether or not the calendar is disabled.
+		 *
+		 * @default false
+		 */
+		disabled?: boolean;
+
+		/**
+		 * Applicable only when `numberOfMonths` is greater than 1.
+		 *
+		 * Controls whether to use paged navigation for the next and previous buttons in the
+		 * date picker. With paged navigation set to `true`, clicking the next/prev buttons
+		 * changes all months in view. When set to `false`, it shifts the view by a single month.
+		 *
+		 * For example, with `pagedNavigation` set to `true` and 2 months displayed (January and
+		 * February), clicking the next button changes the view to March and April. If `pagedNavigation`
+		 * is `false`, the view shifts to February and March.
+		 *
+		 * @default false
+		 */
+		pagedNavigation?: boolean;
+
+		/**
+		 * The day of the week to start the calendar on, which must
+		 * be a number between 0 and 6, where 0 is Sunday and 6 is
+		 * Saturday.
+		 *
+		 * @default 0 (Sunday)
+		 */
+		weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+		/**
+		 * How the string representation of the weekdays provided via the `weekdays` state store
+		 * should be formatted.
+		 *
+		 * ```md
+		 * - "long": "Sunday", "Monday", "Tuesday", etc.
+		 * - "short": "Sun", "Mon", "Tue", etc.
+		 * - "narrow": "S", "M", "T", etc.
+		 *```
+		 *
+		 * @default "narrow"
+		 *
+		 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#weekday
+		 */
+		weekdayFormat?: Intl.DateTimeFormatOptions["weekday"];
+
+		/**
+		 * A function that receives a date and returns `true` or `false` to indicate whether
+		 * the date is disabled.
+		 *
+		 * @remarks
+		 * Disabled dates cannot be focused or selected. Additionally, they are tagged
+		 * with a data attribute to enable custom styling.
+		 *
+		 * `[data-disabled]` - applied to disabled dates
+		 *
+		 */
+		isDateDisabled?: DateMatcher;
+
+		/**
+		 * Dates matching the provided matchers are marked as "unavailable." Unlike disabled dates,
+		 * users can still focus and select unavailable dates. However, selecting an unavailable date
+		 * renders the date picker as invalid.
+		 *
+		 * For example, in a calendar for booking appointments, you might mark already booked dates as
+		 * unavailable. These dates could become available again before the appointment date, allowing
+		 * users to select them to learn more about the appointment.
+		 *
+		 * `[data-unavailable]` - applied to unavailable dates
+		 *
+		 */
+		isDateUnavailable?: DateMatcher;
+
+		/**
+		 * Display 6 weeks per month, regardless the month's number of weeks.
+		 * This is useful for displaying a consistent calendar, where the size
+		 * of the calendar doesn't change month to month.
+		 *
+		 * To display 6 weeks per month, you will need to render out the previous
+		 * and next month's dates in the calendar as well.
+		 *
+		 * @default false
+		 */
+		fixedWeeks?: boolean;
+
+		/**
+		 * Determines the number of months to display on the calendar simultaneously.
+		 * For navigation between months, refer to the `pagedNavigation` prop.
+		 *
+		 * @default 1
+		 */
+		numberOfMonths?: number;
+
+		/**
+		 * This label is exclusively used for accessibility, remaining hidden from the page.
+		 * It's read by screen readers when the calendar is opened. The current month and year
+		 * are automatically appended to the label, so you only need to provide the base label.
+		 *
+		 * For instance:
+		 * - 'Date of birth' will be read as 'Date of birth, January 2021' if the current month is January 2021.
+		 * - 'Appointment date' will be read as 'Appointment date, January 2021' if the current month is January 2021.
+		 * - 'Booking date' will be read as 'Booking date, January 2021' if the current month is January 2021.
+		 */
+		calendarLabel?: string;
+
+		/**
+		 * The default locale setting.
+		 *
+		 * @default 'en'
+		 */
+		locale?: string;
+
+		/**
+		 * Whether the calendar is readonly. When true, the user will be able
+		 * to focus and navigate the calendar, but will not be able to select
+		 * dates. @see disabled for a similar prop that prevents focusing
+		 * and selecting dates.
+		 *
+		 * @default false
+		 */
+		readonly?: boolean;
+
+		/**
+		 * Whether to disable the selection of days outside the current month. By default,
+		 * days outside the current month are rendered to fill the calendar grid, but they
+		 * are not selectable. Setting this prop to `true` will disable this behavior.
+		 *
+		 * @default false
+		 */
+		disableDaysOutsideMonth?: boolean;
+
+		/**
+		 * Whether to automatically reset the range if any date within the selected range
+		 * becomes disabled. When true, the entire range will be cleared if a disabled
+		 * date is found between the start and end dates.
+		 *
+		 * @default false
+		 */
+		excludeDisabled?: boolean;
+
+		/**
+		 * The format of the month names in the calendar.
+		 *
+		 * @default "long"
+		 */
+		monthFormat?: Intl.DateTimeFormatOptions["month"] | ((month: number) => string);
+
+		/**
+		 * The format of the year names in the calendar.
+		 *
+		 * @default "numeric"
+		 */
+		yearFormat?: Intl.DateTimeFormatOptions["year"] | ((year: number) => string);
+	},
+	RangeCalendarRootSnippetProps
+>;
+
+export type RangeCalendarRootProps = RangeCalendarRootPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, RangeCalendarRootPropsWithoutHTML>;
+
+export type {
+	CalendarPrevButtonProps as RangeCalendarPrevButtonProps,
+	CalendarPrevButtonPropsWithoutHTML as RangeCalendarPrevButtonPropsWithoutHTML,
+	CalendarNextButtonProps as RangeCalendarNextButtonProps,
+	CalendarNextButtonPropsWithoutHTML as RangeCalendarNextButtonPropsWithoutHTML,
+	CalendarHeadingProps as RangeCalendarHeadingProps,
+	CalendarHeadingPropsWithoutHTML as RangeCalendarHeadingPropsWithoutHTML,
+	CalendarGridProps as RangeCalendarGridProps,
+	CalendarGridPropsWithoutHTML as RangeCalendarGridPropsWithoutHTML,
+	CalendarCellProps as RangeCalendarCellProps,
+	CalendarCellPropsWithoutHTML as RangeCalendarCellPropsWithoutHTML,
+	CalendarDayProps as RangeCalendarDayProps,
+	CalendarDayPropsWithoutHTML as RangeCalendarDayPropsWithoutHTML,
+	CalendarGridBodyProps as RangeCalendarGridBodyProps,
+	CalendarGridBodyPropsWithoutHTML as RangeCalendarGridBodyPropsWithoutHTML,
+	CalendarGridHeadProps as RangeCalendarGridHeadProps,
+	CalendarGridHeadPropsWithoutHTML as RangeCalendarGridHeadPropsWithoutHTML,
+	CalendarGridRowProps as RangeCalendarGridRowProps,
+	CalendarGridRowPropsWithoutHTML as RangeCalendarGridRowPropsWithoutHTML,
+	CalendarHeadCellProps as RangeCalendarHeadCellProps,
+	CalendarHeadCellPropsWithoutHTML as RangeCalendarHeadCellPropsWithoutHTML,
+	CalendarHeaderProps as RangeCalendarHeaderProps,
+	CalendarHeaderPropsWithoutHTML as RangeCalendarHeaderPropsWithoutHTML,
+	CalendarMonthSelectProps as RangeCalendarMonthSelectProps,
+	CalendarMonthSelectPropsWithoutHTML as RangeCalendarMonthSelectPropsWithoutHTML,
+	CalendarYearSelectProps as RangeCalendarYearSelectProps,
+	CalendarYearSelectPropsWithoutHTML as RangeCalendarYearSelectPropsWithoutHTML,
+} from "../calendar/types.js";

package/src/lib/components/resizable/index.ts

@@ -0,0 +1,15 @@
+import Handle from './resizable-handle.svelte';
+import PaneGroup from './resizable-pane-group.svelte';
+import { Pane } from '../../internal/paneforge/index.js';
+
+export {
+	PaneGroup,
+	Pane,
+	Handle,
+	//
+	PaneGroup as ResizablePaneGroup,
+	Pane as ResizablePane,
+	Handle as ResizableHandle,
+};
+
+export type { PaneGroupProps, PaneProps, PaneResizerProps } from '../../internal/paneforge/index.js';

package/src/lib/components/resizable/resizable-handle.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import GripVerticalIcon from '@lucide/svelte/icons/grip-vertical';
+	import * as ResizablePrimitive from '../../internal/paneforge/index.js';
+	import { join } from 'overrule';
+	import type { WithoutChildrenOrChild } from '../../internal/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		withHandle = false,
+		...restProps
+	}: WithoutChildrenOrChild<ResizablePrimitive.PaneResizerProps> & {
+		withHandle?: boolean;
+	} = $props();
+</script>
+
+<ResizablePrimitive.PaneResizer
+	bind:ref
+	data-slot="resizable-handle"
+	class={join(
+		'bg-border focus-visible:ring-ring relative grid w-px place-items-center after:absolute after:inset-y-0 after:inset-s-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:inset-s-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:translate-x-0 data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90',
+		className,
+	)}
+	{...restProps}>
+	{#if withHandle}
+		<div class="bg-border z-10 grid h-4 w-3 place-items-center rounded-xs border">
+			<GripVerticalIcon class="size-2.5" />
+		</div>
+	{/if}
+</ResizablePrimitive.PaneResizer>

package/src/lib/components/resizable/resizable-pane-group.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import * as ResizablePrimitive from '../../internal/paneforge/index.js';
+	import { join } from 'overrule';
+
+	let {
+		ref = $bindable(null),
+		this: paneGroup = $bindable(),
+		class: className,
+		...restProps
+	}: ResizablePrimitive.PaneGroupProps & {
+		this?: ResizablePrimitive.PaneGroup;
+	} = $props();
+</script>
+
+<ResizablePrimitive.PaneGroup
+	bind:this={paneGroup}
+	data-slot="resizable-pane-group"
+	class={join('flex h-full w-full data-[direction=vertical]:flex-col', className)}
+	{...restProps} />

package/src/lib/components/scroll-area/components/scroll-area-corner-impl.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	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/src/lib/components/scroll-area/components/scroll-area-corner.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { ScrollAreaCornerProps } from '../types.js';
+	import { getScrollAreaRoot } 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 = getScrollAreaRoot();
+
+	const hasBothScrollbarsVisible = $derived(Boolean(scrollAreaState.scrollbarXNode && scrollAreaState.scrollbarYNode));
+</script>
+
+{#if scrollAreaState.opts.type.current !== 'scroll' && hasBothScrollbarsVisible}
+	<ScrollAreaCornerImpl {...restProps} {id} bind:ref />
+{/if}

package/src/lib/components/scroll-area/components/scroll-area-scrollbar-auto.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { ScrollAreaScrollbarAutoState } from '../scroll-area.svelte.js';
+	import type { _ScrollbarStubProps } from '../types.js';
+	import ScrollAreaScrollbarVisible from './scroll-area-scrollbar-visible.svelte';
+
+	let { forceMount = false, ...restProps }: _ScrollbarStubProps = $props();
+
+	const scrollbarAutoState = ScrollAreaScrollbarAutoState.create();
+	const mergedProps = $derived(mergeProps(restProps, scrollbarAutoState.props));
+</script>
+
+{#if forceMount || scrollbarAutoState.isVisible}
+	<ScrollAreaScrollbarVisible {...mergedProps} />
+{/if}

package/src/lib/components/scroll-area/components/scroll-area-scrollbar-hover.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { ScrollAreaScrollbarAutoState, ScrollAreaScrollbarHoverState } from '../scroll-area.svelte.js';
+	import type { _ScrollbarStubProps } from '../types.js';
+	import ScrollAreaScrollbarVisible from './scroll-area-scrollbar-visible.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>
+
+{#if open}
+	<ScrollAreaScrollbarVisible {...mergedProps} />
+{/if}

package/src/lib/components/scroll-area/components/scroll-area-scrollbar-scroll.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { ScrollAreaScrollbarScrollState } from '../scroll-area.svelte.js';
+	import type { _ScrollbarStubProps } from '../types.js';
+	import ScrollAreaScrollbarVisible from './scroll-area-scrollbar-visible.svelte';
+
+	let { forceMount = false, ...restProps }: _ScrollbarStubProps = $props();
+
+	const scrollbarScrollState = ScrollAreaScrollbarScrollState.create();
+
+	const mergedProps = $derived(mergeProps(restProps, scrollbarScrollState.props));
+</script>
+
+{#if forceMount || !scrollbarScrollState.isHidden}
+	<ScrollAreaScrollbarVisible {...mergedProps} />
+{/if}

package/src/lib/components/scroll-area/components/scroll-area-scrollbar-shared.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { mergeProps } from '../../../internal/merge-props.js';
+	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/src/lib/components/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/src/lib/components/scroll-area/components/scroll-area-scrollbar-x.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	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();
+
+	let isMounted = $state(false);
+	onMount(() => {
+		isMounted = true;
+	});
+
+	const scrollbarXState = ScrollAreaScrollbarXState.create({
+		mounted: boxWith(() => isMounted),
+	});
+	// oxlint-disable-next-line no-explicit-any
+	const mergedProps = $derived(mergeProps(restProps, scrollbarXState.props)) as any;
+</script>
+
+<ScrollAreaScrollbarShared {...mergedProps} />

package/src/lib/components/scroll-area/components/scroll-area-scrollbar-y.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { ScrollAreaScrollbarYState } from '../scroll-area.svelte.js';
+	import type { _ScrollbarStubProps } from '../types.js';
+	import ScrollAreaScrollbarShared from './scroll-area-scrollbar-shared.svelte';
+
+	let { ...restProps }: _ScrollbarStubProps = $props();
+
+	let isMounted = $state(false);
+	onMount(() => {
+		isMounted = true;
+	});
+
+	const scrollbarYState = ScrollAreaScrollbarYState.create({
+		mounted: boxWith(() => isMounted),
+	});
+
+	// oxlint-disable-next-line no-explicit-any
+	const mergedProps = $derived(mergeProps(restProps, scrollbarYState.props)) as any;
+</script>
+
+<ScrollAreaScrollbarShared {...mergedProps} />

package/src/lib/components/scroll-area/components/scroll-area-scrollbar.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { ScrollAreaScrollbarProps } from '../types.js';
+	import { ScrollAreaScrollbarState } from '../scroll-area.svelte.js';
+	import ScrollAreaScrollbarAuto from './scroll-area-scrollbar-auto.svelte';
+	import ScrollAreaScrollbarScroll from './scroll-area-scrollbar-scroll.svelte';
+	import ScrollAreaScrollbarHover from './scroll-area-scrollbar-hover.svelte';
+	import ScrollAreaScrollbarVisible from './scroll-area-scrollbar-visible.svelte';
+	import Thumb from './scroll-area-thumb.svelte';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { ref = $bindable(null), id = createId(uid), orientation = 'vertical', children, ...restProps }: ScrollAreaScrollbarProps = $props();
+
+	const scrollbarState = ScrollAreaScrollbarState.create({
+		orientation: boxWith(() => orientation),
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const type = $derived(scrollbarState.root.opts.type.current);
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'scroll-area-scrollbar',
+				class: [
+					'flex touch-none p-px transition-colors select-none',
+					orientation === 'vertical' && 'h-full w-2.5 border-s border-s-transparent',
+					orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
+				],
+			},
+			restProps,
+		),
+	);
+</script>
+
+{#snippet scrollbarChildren()}
+	{@render children?.()}
+	<Thumb data-slot="scroll-area-thumb" class="bg-border relative flex-1 rounded-full" />
+{/snippet}
+
+{#if type === 'hover'}
+	<ScrollAreaScrollbarHover {...mergedProps} {id} children={scrollbarChildren} />
+{:else if type === 'scroll'}
+	<ScrollAreaScrollbarScroll {...mergedProps} {id} children={scrollbarChildren} />
+{:else if type === 'auto'}
+	<ScrollAreaScrollbarAuto {...mergedProps} {id} children={scrollbarChildren} />
+{:else if type === 'always'}
+	<ScrollAreaScrollbarVisible {...mergedProps} {id} children={scrollbarChildren} />
+{/if}

package/src/lib/components/scroll-area/components/scroll-area-thumb-impl.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { onMount } from 'svelte';
+	import type { ScrollAreaThumbProps } from '../types.js';
+	import { ScrollAreaThumbImplState } from '../scroll-area.svelte.js';
+
+	let {
+		ref = $bindable(null),
+		id,
+		child,
+		children,
+		present,
+		...restProps
+	}: Omit<ScrollAreaThumbProps, 'forceMount' | 'id'> & {
+		id: string;
+		present: boolean;
+	} = $props();
+
+	let isMounted = $state(false);
+	onMount(() => {
+		isMounted = true;
+	});
+
+	const thumbState = ScrollAreaThumbImplState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		mounted: boxWith(() => isMounted),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(restProps, thumbState.props, {
+			style: {
+				hidden: !present,
+			},
+		}),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/components/scroll-area/components/scroll-area-thumb.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { ScrollAreaThumbProps } from "../types.js";
+	import { getScrollAreaScrollbarVisible } from "../scroll-area.svelte.js";
+	import ScrollAreaThumbImpl from "./scroll-area-thumb-impl.svelte";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		forceMount = false,
+		...restProps
+	}: ScrollAreaThumbProps = $props();
+
+	const scrollbarState = getScrollAreaScrollbarVisible();
+</script>
+
+{#if forceMount || scrollbarState.hasThumb}
+	<ScrollAreaThumbImpl {...restProps} {id} bind:ref present={scrollbarState.hasThumb} />
+{/if}