@chrissnell/chonky-ui 0.1.7

package/dist/components/RangeCalendar/RangeCalendarCell.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { RangeCalendar as BitsRangeCalendar } from 'bits-ui';
+  import type { DateValue } from '@internationalized/date';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../internal/utils.js';
+
+  export interface Props {
+    date: DateValue;
+    month: DateValue;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { date, month, class: className, children, ...restProps }: Props = $props();
+</script>
+
+<BitsRangeCalendar.Cell {date} {month} class={cn(className)} {...restProps}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <BitsRangeCalendar.Day />
+  {/if}
+</BitsRangeCalendar.Cell>

package/dist/components/RangeCalendar/RangeCalendarCell.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { DateValue } from '@internationalized/date';
+import type { Snippet } from 'svelte';
+export interface Props {
+    date: DateValue;
+    month: DateValue;
+    class?: string;
+    children?: Snippet;
+}
+declare const RangeCalendarCell: import("svelte").Component<Props, {}, "">;
+type RangeCalendarCell = ReturnType<typeof RangeCalendarCell>;
+export default RangeCalendarCell;

package/dist/components/RangeCalendar/RangeCalendarDay.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { RangeCalendar as BitsRangeCalendar } from 'bits-ui';
+  import { cn } from '../../internal/utils.js';
+
+  export interface Props {
+    class?: string;
+  }
+
+  let { class: className, ...restProps }: Props = $props();
+</script>
+
+<BitsRangeCalendar.Day class={cn(className)} {...restProps} />

package/dist/components/RangeCalendar/RangeCalendarDay.svelte.d.ts

@@ -0,0 +1,6 @@
+export interface Props {
+    class?: string;
+}
+declare const RangeCalendarDay: import("svelte").Component<Props, {}, "">;
+type RangeCalendarDay = ReturnType<typeof RangeCalendarDay>;
+export default RangeCalendarDay;

package/dist/components/RangeCalendar/RangeCalendarGrid.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { RangeCalendar as BitsRangeCalendar } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../internal/utils.js';
+
+  export interface Props {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<BitsRangeCalendar.Grid class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsRangeCalendar.Grid>

package/dist/components/RangeCalendar/RangeCalendarGrid.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const RangeCalendarGrid: import("svelte").Component<Props, {}, "">;
+type RangeCalendarGrid = ReturnType<typeof RangeCalendarGrid>;
+export default RangeCalendarGrid;

package/dist/components/RangeCalendar/RangeCalendarGridBody.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { RangeCalendar as BitsRangeCalendar } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../internal/utils.js';
+
+  export interface Props {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<BitsRangeCalendar.GridBody class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsRangeCalendar.GridBody>

package/dist/components/RangeCalendar/RangeCalendarGridBody.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const RangeCalendarGridBody: import("svelte").Component<Props, {}, "">;
+type RangeCalendarGridBody = ReturnType<typeof RangeCalendarGridBody>;
+export default RangeCalendarGridBody;

package/dist/components/RangeCalendar/RangeCalendarGridHead.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { RangeCalendar as BitsRangeCalendar } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../internal/utils.js';
+
+  export interface Props {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<BitsRangeCalendar.GridHead class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsRangeCalendar.GridHead>

package/dist/components/RangeCalendar/RangeCalendarGridHead.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const RangeCalendarGridHead: import("svelte").Component<Props, {}, "">;
+type RangeCalendarGridHead = ReturnType<typeof RangeCalendarGridHead>;
+export default RangeCalendarGridHead;

package/dist/components/RangeCalendar/RangeCalendarGridRow.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { RangeCalendar as BitsRangeCalendar } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../internal/utils.js';
+
+  export interface Props {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<BitsRangeCalendar.GridRow class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsRangeCalendar.GridRow>

package/dist/components/RangeCalendar/RangeCalendarGridRow.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const RangeCalendarGridRow: import("svelte").Component<Props, {}, "">;
+type RangeCalendarGridRow = ReturnType<typeof RangeCalendarGridRow>;
+export default RangeCalendarGridRow;

package/dist/components/RangeCalendar/RangeCalendarHeadCell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { RangeCalendar as BitsRangeCalendar } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../internal/utils.js';
+
+  export interface Props {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<BitsRangeCalendar.HeadCell class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsRangeCalendar.HeadCell>

package/dist/components/RangeCalendar/RangeCalendarHeadCell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const RangeCalendarHeadCell: import("svelte").Component<Props, {}, "">;
+type RangeCalendarHeadCell = ReturnType<typeof RangeCalendarHeadCell>;
+export default RangeCalendarHeadCell;

package/dist/components/RangeCalendar/RangeCalendarHeader.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { RangeCalendar as BitsRangeCalendar } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../internal/utils.js';
+
+  export interface Props {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<BitsRangeCalendar.Header class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsRangeCalendar.Header>

package/dist/components/RangeCalendar/RangeCalendarHeader.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const RangeCalendarHeader: import("svelte").Component<Props, {}, "">;
+type RangeCalendarHeader = ReturnType<typeof RangeCalendarHeader>;
+export default RangeCalendarHeader;

package/dist/components/RangeCalendar/RangeCalendarHeading.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { RangeCalendar as BitsRangeCalendar } from 'bits-ui';
+  import { cn } from '../../internal/utils.js';
+
+  export interface Props {
+    class?: string;
+  }
+
+  let { class: className, ...restProps }: Props = $props();
+</script>
+
+<BitsRangeCalendar.Heading class={cn(className)} {...restProps} />

package/dist/components/RangeCalendar/RangeCalendarHeading.svelte.d.ts

@@ -0,0 +1,6 @@
+export interface Props {
+    class?: string;
+}
+declare const RangeCalendarHeading: import("svelte").Component<Props, {}, "">;
+type RangeCalendarHeading = ReturnType<typeof RangeCalendarHeading>;
+export default RangeCalendarHeading;

package/dist/components/RangeCalendar/RangeCalendarNextButton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { RangeCalendar as BitsRangeCalendar } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../internal/utils.js';
+
+  export interface Props {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<BitsRangeCalendar.NextButton class={cn(className)} {...restProps}>
+  {#if children}
+    {@render children()}
+  {:else}
+    &rarr;
+  {/if}
+</BitsRangeCalendar.NextButton>

package/dist/components/RangeCalendar/RangeCalendarNextButton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const RangeCalendarNextButton: import("svelte").Component<Props, {}, "">;
+type RangeCalendarNextButton = ReturnType<typeof RangeCalendarNextButton>;
+export default RangeCalendarNextButton;

package/dist/components/RangeCalendar/RangeCalendarPrevButton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { RangeCalendar as BitsRangeCalendar } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../internal/utils.js';
+
+  export interface Props {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className, children, ...restProps }: Props = $props();
+</script>
+
+<BitsRangeCalendar.PrevButton class={cn(className)} {...restProps}>
+  {#if children}
+    {@render children()}
+  {:else}
+    &larr;
+  {/if}
+</BitsRangeCalendar.PrevButton>

package/dist/components/RangeCalendar/RangeCalendarPrevButton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const RangeCalendarPrevButton: import("svelte").Component<Props, {}, "">;
+type RangeCalendarPrevButton = ReturnType<typeof RangeCalendarPrevButton>;
+export default RangeCalendarPrevButton;

package/dist/components/RangeCalendar/RangeCalendarRoot.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import { RangeCalendar as BitsRangeCalendar } from 'bits-ui';
+  import type { DateValue } from '@internationalized/date';
+  import type { Snippet } from 'svelte';
+  import type { DateMatcher } from 'bits-ui';
+  import { cn } from '../../internal/utils.js';
+
+  type DateRange = { start: DateValue; end: DateValue };
+
+  type RangeCalendarChildrenSnippetProps = {
+    months: Array<{ value: DateValue; dates: DateValue[]; weeks: DateValue[][] }>;
+    weekdays: string[];
+  };
+
+  export interface RangeCalendarRootProps {
+    value?: DateRange;
+    onValueChange?: (value: DateRange | undefined) => void;
+    placeholder?: DateValue;
+    onPlaceholderChange?: (value: DateValue) => void;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    disabled?: boolean;
+    readonly?: boolean;
+    preventDeselect?: boolean;
+    numberOfMonths?: number;
+    pagedNavigation?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    weekdayFormat?: 'long' | 'short' | 'narrow';
+    isDateDisabled?: DateMatcher;
+    isDateUnavailable?: DateMatcher;
+    fixedWeeks?: boolean;
+    disableDaysOutsideMonth?: boolean;
+    minDays?: number;
+    maxDays?: number;
+    locale?: string;
+    calendarLabel?: string;
+    class?: string;
+    children?: Snippet<[RangeCalendarChildrenSnippetProps]>;
+  }
+
+  let {
+    value = $bindable(),
+    onValueChange,
+    placeholder = $bindable(),
+    onPlaceholderChange,
+    minValue,
+    maxValue,
+    disabled = false,
+    readonly: readonlyProp = false,
+    preventDeselect = false,
+    numberOfMonths = 1,
+    pagedNavigation = false,
+    weekStartsOn = 0,
+    weekdayFormat = 'narrow',
+    isDateDisabled,
+    isDateUnavailable,
+    fixedWeeks = false,
+    disableDaysOutsideMonth = false,
+    minDays,
+    maxDays,
+    locale = 'en',
+    calendarLabel,
+    class: className,
+    children: childrenProp,
+    ...restProps
+  }: RangeCalendarRootProps = $props();
+</script>
+
+<BitsRangeCalendar.Root
+  bind:value
+  onValueChange={(v) => onValueChange?.(v)}
+  bind:placeholder
+  {onPlaceholderChange}
+  {minValue}
+  {maxValue}
+  {disabled}
+  readonly={readonlyProp}
+  {preventDeselect}
+  {numberOfMonths}
+  {pagedNavigation}
+  {weekStartsOn}
+  {weekdayFormat}
+  {isDateDisabled}
+  {isDateUnavailable}
+  {fixedWeeks}
+  {disableDaysOutsideMonth}
+  {minDays}
+  {maxDays}
+  {locale}
+  {calendarLabel}
+  class={cn(className)}
+  {...restProps}
+>
+  {#snippet children({ months, weekdays })}
+    {@render childrenProp?.({ months, weekdays } as RangeCalendarChildrenSnippetProps)}
+  {/snippet}
+</BitsRangeCalendar.Root>

package/dist/components/RangeCalendar/RangeCalendarRoot.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { DateValue } from '@internationalized/date';
+import type { Snippet } from 'svelte';
+import type { DateMatcher } from 'bits-ui';
+type DateRange = {
+    start: DateValue;
+    end: DateValue;
+};
+type RangeCalendarChildrenSnippetProps = {
+    months: Array<{
+        value: DateValue;
+        dates: DateValue[];
+        weeks: DateValue[][];
+    }>;
+    weekdays: string[];
+};
+export interface RangeCalendarRootProps {
+    value?: DateRange;
+    onValueChange?: (value: DateRange | undefined) => void;
+    placeholder?: DateValue;
+    onPlaceholderChange?: (value: DateValue) => void;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    disabled?: boolean;
+    readonly?: boolean;
+    preventDeselect?: boolean;
+    numberOfMonths?: number;
+    pagedNavigation?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    weekdayFormat?: 'long' | 'short' | 'narrow';
+    isDateDisabled?: DateMatcher;
+    isDateUnavailable?: DateMatcher;
+    fixedWeeks?: boolean;
+    disableDaysOutsideMonth?: boolean;
+    minDays?: number;
+    maxDays?: number;
+    locale?: string;
+    calendarLabel?: string;
+    class?: string;
+    children?: Snippet<[RangeCalendarChildrenSnippetProps]>;
+}
+declare const RangeCalendarRoot: import("svelte").Component<RangeCalendarRootProps, {}, "value" | "placeholder">;
+type RangeCalendarRoot = ReturnType<typeof RangeCalendarRoot>;
+export default RangeCalendarRoot;

package/dist/components/RangeCalendar/index.d.ts

@@ -0,0 +1,16 @@
+export type { RangeCalendarRootProps } from './RangeCalendarRoot.svelte';
+declare const RangeCalendar: import("svelte").Component<import("./RangeCalendarRoot.svelte").RangeCalendarRootProps, {}, "value" | "placeholder"> & {
+    Root: import("svelte").Component<import("./RangeCalendarRoot.svelte").RangeCalendarRootProps, {}, "value" | "placeholder">;
+    Header: import("svelte").Component<import("./RangeCalendarHeader.svelte").Props, {}, "">;
+    Heading: import("svelte").Component<import("./RangeCalendarHeading.svelte").Props, {}, "">;
+    Grid: import("svelte").Component<import("./RangeCalendarGrid.svelte").Props, {}, "">;
+    GridHead: import("svelte").Component<import("./RangeCalendarGridHead.svelte").Props, {}, "">;
+    HeadCell: import("svelte").Component<import("./RangeCalendarHeadCell.svelte").Props, {}, "">;
+    GridBody: import("svelte").Component<import("./RangeCalendarGridBody.svelte").Props, {}, "">;
+    GridRow: import("svelte").Component<import("./RangeCalendarGridRow.svelte").Props, {}, "">;
+    Cell: import("svelte").Component<import("./RangeCalendarCell.svelte").Props, {}, "">;
+    Day: import("svelte").Component<import("./RangeCalendarDay.svelte").Props, {}, "">;
+    PrevButton: import("svelte").Component<import("./RangeCalendarPrevButton.svelte").Props, {}, "">;
+    NextButton: import("svelte").Component<import("./RangeCalendarNextButton.svelte").Props, {}, "">;
+};
+export { RangeCalendar };

package/dist/components/RangeCalendar/index.js

@@ -0,0 +1,14 @@
+import Root from './RangeCalendarRoot.svelte';
+import Header from './RangeCalendarHeader.svelte';
+import Heading from './RangeCalendarHeading.svelte';
+import Grid from './RangeCalendarGrid.svelte';
+import GridHead from './RangeCalendarGridHead.svelte';
+import HeadCell from './RangeCalendarHeadCell.svelte';
+import GridBody from './RangeCalendarGridBody.svelte';
+import GridRow from './RangeCalendarGridRow.svelte';
+import Cell from './RangeCalendarCell.svelte';
+import Day from './RangeCalendarDay.svelte';
+import PrevButton from './RangeCalendarPrevButton.svelte';
+import NextButton from './RangeCalendarNextButton.svelte';
+const RangeCalendar = Object.assign(Root, { Root, Header, Heading, Grid, GridHead, HeadCell, GridBody, GridRow, Cell, Day, PrevButton, NextButton });
+export { RangeCalendar };

package/dist/components/RatingGroup/RatingGroup.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { RatingGroup as BitsRatingGroup } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface RatingGroupProps extends HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    onValueChange?: (value: number) => void;
+    max?: number;
+    disabled?: boolean;
+    class?: string;
+  }
+
+  let {
+    value = $bindable(0),
+    onValueChange,
+    max = 5,
+    disabled = false,
+    class: className,
+    ...restProps
+  }: RatingGroupProps = $props();
+</script>
+
+<BitsRatingGroup.Root
+  bind:value
+  onValueChange={(v) => onValueChange?.(v)}
+  {max}
+  {disabled}
+  class={cn('chonky-rating-group', className)}
+  {...restProps}
+>
+  {#each { length: max } as _, i}
+    <BitsRatingGroup.Item index={i} class="chonky-rating-group-item">
+      {#snippet children({ state })}
+        <span class="star" class:highlighted={state === 'active'}>{state === 'active' ? '★' : '☆'}</span>
+      {/snippet}
+    </BitsRatingGroup.Item>
+  {/each}
+</BitsRatingGroup.Root>
+
+<style>
+  :global(.chonky-rating-group) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  :global(.chonky-rating-group-item) {
+    background: transparent;
+    border: none;
+    padding: 0.125rem;
+    cursor: pointer;
+    color: var(--color-fg-muted, #888);
+    font-size: 1.8rem;
+    line-height: 1;
+    transition: color 0.15s ease, transform 0.1s ease;
+  }
+
+  :global(.chonky-rating-group-item:hover:not([data-disabled])) {
+    transform: scale(1.1);
+  }
+
+  :global(.chonky-rating-group-item:focus-visible) {
+    outline: 2px solid var(--chonky-color-primary, #ffaa00);
+    outline-offset: 2px;
+  }
+
+  :global(.chonky-rating-group-item[data-disabled]) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .star {
+    display: inline-block;
+  }
+
+  .star.highlighted {
+    color: var(--chonky-color-primary, #ffaa00);
+  }
+</style>

package/dist/components/RatingGroup/RatingGroup.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface RatingGroupProps extends HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    onValueChange?: (value: number) => void;
+    max?: number;
+    disabled?: boolean;
+    class?: string;
+}
+declare const RatingGroup: import("svelte").Component<RatingGroupProps, {}, "value">;
+type RatingGroup = ReturnType<typeof RatingGroup>;
+export default RatingGroup;

package/dist/components/RatingGroup/index.d.ts

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

package/dist/components/RatingGroup/index.js

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

package/dist/components/ScrollArea/ScrollAreaRoot.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { ScrollArea as BitsScrollArea } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface ScrollAreaRootProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    class: className,
+    children,
+    ...restProps
+  }: ScrollAreaRootProps = $props();
+</script>
+
+<BitsScrollArea.Root class={cn(className)} {...restProps}>
+  {@render children()}
+</BitsScrollArea.Root>

package/dist/components/ScrollArea/ScrollAreaRoot.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface ScrollAreaRootProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+}
+declare const ScrollAreaRoot: import("svelte").Component<ScrollAreaRootProps, {}, "">;
+type ScrollAreaRoot = ReturnType<typeof ScrollAreaRoot>;
+export default ScrollAreaRoot;

package/dist/components/ScrollArea/ScrollAreaScrollbar.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { ScrollArea as BitsScrollArea } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '../../internal/utils.js';
+
+  export interface ScrollAreaScrollbarProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: 'vertical' | 'horizontal';
+    class?: string;
+  }
+
+  let {
+    orientation = 'vertical',
+    class: className,
+    ...restProps
+  }: ScrollAreaScrollbarProps = $props();
+</script>
+
+<BitsScrollArea.Scrollbar {orientation} class={cn(className)} {...restProps}>
+  <BitsScrollArea.Thumb />
+</BitsScrollArea.Scrollbar>

package/dist/components/ScrollArea/ScrollAreaScrollbar.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface ScrollAreaScrollbarProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: 'vertical' | 'horizontal';
+    class?: string;
+}
+declare const ScrollAreaScrollbar: import("svelte").Component<ScrollAreaScrollbarProps, {}, "">;
+type ScrollAreaScrollbar = ReturnType<typeof ScrollAreaScrollbar>;
+export default ScrollAreaScrollbar;