bits-ui 0.19.0 → 0.19.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- export type { Props as ScrollAreaProps, ViewportProps as ScrollAreaViewportProps, ContentProps as ScrollAreaContentProps, ScrollbarXProps as ScrollAreaScrollbarXProps, ScrollbarYProps as ScrollAreaScrollbarYProps, ThumbXProps as ScrollAreaThumbXProps, ThumbYProps as ScrollAreaThumbYProps, CornerProps as ScrollAreaCornerProps, } from "./types.js";
1
+ export type { Props as ScrollAreaProps, ViewportProps as ScrollAreaViewportProps, ContentProps as ScrollAreaContentProps, ScrollbarProps as ScrollAreaScrollbarProps, ThumbProps as ScrollAreaThumbProps, CornerProps as ScrollAreaCornerProps, } from "./types.js";
@@ -2,11 +2,11 @@ import type { Expand, DOMElement } from "../../internal/types.js";
2
2
  import type { CreateScrollAreaProps } from "../../../melt-ui/svelte";
3
3
  type Props = Expand<Omit<CreateScrollAreaProps, "ids">> & DOMElement<HTMLDivElement>;
4
4
  type BaseDivProps = DOMElement<HTMLDivElement>;
5
+ type ScrollbarProps = BaseDivProps & {
6
+ orientation: "horizontal" | "vertical";
7
+ };
8
+ type ThumbProps = BaseDivProps;
5
9
  type ViewportProps = BaseDivProps;
6
10
  type ContentProps = BaseDivProps;
7
- type ScrollbarXProps = BaseDivProps;
8
- type ScrollbarYProps = BaseDivProps;
9
- type ThumbXProps = BaseDivProps;
10
- type ThumbYProps = BaseDivProps;
11
11
  type CornerProps = BaseDivProps;
12
- export type { Props, ViewportProps, ContentProps, ScrollbarXProps, ScrollbarYProps, ThumbXProps, ThumbYProps, CornerProps, };
12
+ export type { Props, ViewportProps, ContentProps, ScrollbarProps, ThumbProps, CornerProps };
@@ -1,7 +1,7 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import type { ScrollbarXProps } from "../types.js";
2
+ import type { ScrollbarProps } from "../types.js";
3
3
  declare const __propDef: {
4
- props: ScrollbarXProps;
4
+ props: Omit<ScrollbarProps, "orientation">;
5
5
  events: {
6
6
  [evt: string]: CustomEvent<any>;
7
7
  };
@@ -1,7 +1,7 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import type { ScrollbarYProps } from "../types.js";
2
+ import type { ScrollbarProps } from "../types.js";
3
3
  declare const __propDef: {
4
- props: ScrollbarYProps;
4
+ props: Omit<ScrollbarProps, "orientation">;
5
5
  events: {
6
6
  [evt: string]: CustomEvent<any>;
7
7
  };
@@ -0,0 +1,20 @@
1
+ <script>import { setScrollbarOrientation } from "../ctx.js";
2
+ import { writable } from "svelte/store";
3
+ import ScrollAreaScrollbarY from "./scroll-area-scrollbar-y.svelte";
4
+ import ScrollAreaScrollbarX from "./scroll-area-scrollbar-x.svelte";
5
+ export let orientation;
6
+ const orientationStore = writable(orientation);
7
+ setScrollbarOrientation(orientationStore);
8
+ $:
9
+ orientationStore.set(orientation);
10
+ </script>
11
+
12
+ {#if $orientationStore === "vertical"}
13
+ <ScrollAreaScrollbarY {...$$restProps} let:builder>
14
+ <slot {builder} />
15
+ </ScrollAreaScrollbarY>
16
+ {:else}
17
+ <ScrollAreaScrollbarX {...$$restProps} let:builder>
18
+ <slot {builder} />
19
+ </ScrollAreaScrollbarX>
20
+ {/if}
@@ -0,0 +1,26 @@
1
+ import { SvelteComponent } from "svelte";
2
+ import type { ScrollbarProps } from "../types.js";
3
+ declare const __propDef: {
4
+ props: ScrollbarProps;
5
+ events: {
6
+ [evt: string]: CustomEvent<any>;
7
+ };
8
+ slots: {
9
+ default: {
10
+ builder: {
11
+ style: string;
12
+ 'data-state': string;
13
+ } & {
14
+ [x: `data-melt-${string}`]: "";
15
+ } & {
16
+ action: (node: HTMLElement) => import("../../../../melt-ui/svelte/internal/types").MeltActionReturn<"pointerdown" | "pointermove" | "pointerup">;
17
+ };
18
+ };
19
+ };
20
+ };
21
+ export type ScrollAreaScrollbarProps = typeof __propDef.props;
22
+ export type ScrollAreaScrollbarEvents = typeof __propDef.events;
23
+ export type ScrollAreaScrollbarSlots = typeof __propDef.slots;
24
+ export default class ScrollAreaScrollbar extends SvelteComponent<ScrollAreaScrollbarProps, ScrollAreaScrollbarEvents, ScrollAreaScrollbarSlots> {
25
+ }
26
+ export {};
@@ -1,7 +1,7 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import type { ThumbXProps } from "../types.js";
2
+ import type { ThumbProps } from "../types.js";
3
3
  declare const __propDef: {
4
- props: ThumbXProps;
4
+ props: ThumbProps;
5
5
  events: {
6
6
  [evt: string]: CustomEvent<any>;
7
7
  };
@@ -1,7 +1,7 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import type { ThumbYProps } from "../types.js";
2
+ import type { ThumbProps } from "../types.js";
3
3
  declare const __propDef: {
4
- props: ThumbYProps;
4
+ props: ThumbProps;
5
5
  events: {
6
6
  [evt: string]: CustomEvent<any>;
7
7
  };
@@ -0,0 +1,15 @@
1
+ <script>import { getScrollbarOrientation } from "../ctx.js";
2
+ import ScrollAreaThumbY from "./scroll-area-thumb-y.svelte";
3
+ import ScrollAreaThumbX from "./scroll-area-thumb-x.svelte";
4
+ const orientation = getScrollbarOrientation();
5
+ </script>
6
+
7
+ {#if $orientation === "vertical"}
8
+ <ScrollAreaThumbY {...$$restProps} let:builder>
9
+ <slot {builder} />
10
+ </ScrollAreaThumbY>
11
+ {:else}
12
+ <ScrollAreaThumbX {...$$restProps} let:builder>
13
+ <slot {builder} />
14
+ </ScrollAreaThumbX>
15
+ {/if}
@@ -0,0 +1,26 @@
1
+ import { SvelteComponent } from "svelte";
2
+ import type { ThumbProps } from "../types.js";
3
+ declare const __propDef: {
4
+ props: ThumbProps;
5
+ events: {
6
+ [evt: string]: CustomEvent<any>;
7
+ };
8
+ slots: {
9
+ default: {
10
+ builder: {
11
+ style: string;
12
+ 'data-state': string;
13
+ } & {
14
+ [x: `data-melt-${string}`]: "";
15
+ } & {
16
+ action: (node: HTMLElement) => import("../../../../melt-ui/svelte/internal/types").MeltActionReturn<"pointerdown" | "pointerup">;
17
+ };
18
+ };
19
+ };
20
+ };
21
+ export type ScrollAreaThumbProps = typeof __propDef.props;
22
+ export type ScrollAreaThumbEvents = typeof __propDef.events;
23
+ export type ScrollAreaThumbSlots = typeof __propDef.slots;
24
+ export default class ScrollAreaThumb extends SvelteComponent<ScrollAreaThumbProps, ScrollAreaThumbEvents, ScrollAreaThumbSlots> {
25
+ }
26
+ export {};
@@ -1,5 +1,6 @@
1
1
  /// <reference types="svelte" />
2
2
  import { type CreateScrollAreaProps } from "../../../melt-ui/svelte";
3
+ import type { Writable } from "svelte/store";
3
4
  type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
4
5
  export declare function setCtx(props: CreateScrollAreaProps): {
5
6
  updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
@@ -19,44 +20,46 @@ export declare function setCtx(props: CreateScrollAreaProps): {
19
20
  }> | undefined;
20
21
  }, "ids">>;
21
22
  elements: {
22
- root: import("../../../melt-ui/svelte/internal/helpers").MeltElement<[import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<number>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<number>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<string>>], <Node_1 extends unknown>(node: HTMLElement) => {
23
+ root: import("../../../melt-ui/svelte/internal/helpers").MeltElement<[import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<number>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<number>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<string>>], <Node_1 extends unknown>(node: HTMLElement) => {
23
24
  destroy(): void;
24
25
  }, ([$cornerWidth, $cornderHeight, $rootId]: [number, number, string]) => {
25
26
  style: string;
26
27
  id: string;
27
28
  }, string>;
28
- viewport: import("../../../melt-ui/svelte/internal/helpers").MeltElement<[import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<boolean>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<boolean>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<string>>], <Node_2 extends unknown>(node: HTMLElement) => {
29
+ viewport: import("../../../melt-ui/svelte/internal/helpers").MeltElement<[import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<boolean>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<boolean>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<string>>], <Node_2 extends unknown>(node: HTMLElement) => {
29
30
  destroy(): void;
30
31
  }, ([$scrollbarXEnabled, $scrollbarYEnabled, $viewportId]: [boolean, boolean, string]) => {
31
32
  style: string;
32
33
  id: string;
33
34
  }, string>;
34
- content: import("../../../melt-ui/svelte/internal/helpers").MeltElement<[import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<string>>], <Node_3 extends unknown>(node: HTMLElement) => {
35
+ content: import("../../../melt-ui/svelte/internal/helpers").MeltElement<[import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<string>>], <Node_3 extends unknown>(node: HTMLElement) => {
35
36
  destroy(): void;
36
37
  }, ([$contentId]: [string]) => {
37
38
  style: string;
38
39
  id: string;
39
40
  }, string>;
40
- corner: import("../../../melt-ui/svelte/internal/helpers").MeltElement<[import("svelte/store").Writable<number>, import("svelte/store").Writable<number>, import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<import("../../../melt-ui/svelte/internal/types").TextDirection>>, import("svelte/store").Readable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$width, $height, $dir, $shouldDisplay]: [number, number, import("../../../melt-ui/svelte/internal/types").TextDirection, boolean]) => {
41
+ corner: import("../../../melt-ui/svelte/internal/helpers").MeltElement<[Writable<number>, Writable<number>, import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<import("../../../melt-ui/svelte/internal/types").TextDirection>>, import("svelte/store").Readable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$width, $height, $dir, $shouldDisplay]: [number, number, import("../../../melt-ui/svelte/internal/types").TextDirection, boolean]) => {
41
42
  style: string;
42
43
  }, string>;
43
- scrollbarX: import("../../../melt-ui/svelte/internal/helpers").MeltElement<[import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<import("../../../melt-ui/svelte/dist/builders/scroll-area/helpers").Sizes>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<import("../../../melt-ui/svelte/internal/types").TextDirection>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<boolean>>], (node: HTMLElement) => import("../../../melt-ui/svelte/internal/types").MeltActionReturn<"pointerdown" | "pointermove" | "pointerup">, ([$sizes, $dir, $isVisible]: [import("../../../melt-ui/svelte/dist/builders/scroll-area/helpers").Sizes, import("../../../melt-ui/svelte/internal/types").TextDirection, boolean]) => {
44
+ scrollbarX: import("../../../melt-ui/svelte/internal/helpers").MeltElement<[import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<import("../../../melt-ui/svelte/dist/builders/scroll-area/helpers").Sizes>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<import("../../../melt-ui/svelte/internal/types").TextDirection>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<boolean>>], (node: HTMLElement) => import("../../../melt-ui/svelte/internal/types").MeltActionReturn<"pointerdown" | "pointermove" | "pointerup">, ([$sizes, $dir, $isVisible]: [import("../../../melt-ui/svelte/dist/builders/scroll-area/helpers").Sizes, import("../../../melt-ui/svelte/internal/types").TextDirection, boolean]) => {
44
45
  style: string;
45
46
  'data-state': string;
46
47
  }, string>;
47
- scrollbarY: import("../../../melt-ui/svelte/internal/helpers").MeltElement<[import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<import("../../../melt-ui/svelte/dist/builders/scroll-area/helpers").Sizes>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<import("../../../melt-ui/svelte/internal/types").TextDirection>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<boolean>>], (node: HTMLElement) => import("../../../melt-ui/svelte/internal/types").MeltActionReturn<"pointerdown" | "pointermove" | "pointerup">, ([$sizes, $dir, $isVisible]: [import("../../../melt-ui/svelte/dist/builders/scroll-area/helpers").Sizes, import("../../../melt-ui/svelte/internal/types").TextDirection, boolean]) => {
48
+ scrollbarY: import("../../../melt-ui/svelte/internal/helpers").MeltElement<[import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<import("../../../melt-ui/svelte/dist/builders/scroll-area/helpers").Sizes>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<import("../../../melt-ui/svelte/internal/types").TextDirection>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<boolean>>], (node: HTMLElement) => import("../../../melt-ui/svelte/internal/types").MeltActionReturn<"pointerdown" | "pointermove" | "pointerup">, ([$sizes, $dir, $isVisible]: [import("../../../melt-ui/svelte/dist/builders/scroll-area/helpers").Sizes, import("../../../melt-ui/svelte/internal/types").TextDirection, boolean]) => {
48
49
  style: string;
49
50
  'data-state': string;
50
51
  }, string>;
51
- thumbX: import("../../../melt-ui/svelte/internal/helpers").MeltElement<[import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Readable<boolean>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<boolean>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<number>>], (node: HTMLElement) => import("../../../melt-ui/svelte/internal/types").MeltActionReturn<"pointerdown" | "pointerup">, ([$hasThumb, $isHorizontal, $offset]: [boolean, boolean, number]) => {
52
+ thumbX: import("../../../melt-ui/svelte/internal/helpers").MeltElement<[import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Readable<boolean>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<boolean>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<number>>], (node: HTMLElement) => import("../../../melt-ui/svelte/internal/types").MeltActionReturn<"pointerdown" | "pointerup">, ([$hasThumb, $isHorizontal, $offset]: [boolean, boolean, number]) => {
52
53
  style: string;
53
54
  'data-state': string;
54
55
  }, string>;
55
- thumbY: import("../../../melt-ui/svelte/internal/helpers").MeltElement<[import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Readable<boolean>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<boolean>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Writable<number>>], (node: HTMLElement) => import("../../../melt-ui/svelte/internal/types").MeltActionReturn<"pointerdown" | "pointerup">, ([$hasThumb, $isHorizontal, $offset]: [boolean, boolean, number]) => {
56
+ thumbY: import("../../../melt-ui/svelte/internal/helpers").MeltElement<[import("../../../melt-ui/svelte/internal/helpers").WithGet<import("svelte/store").Readable<boolean>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<boolean>>, import("../../../melt-ui/svelte/internal/helpers").WithGet<Writable<number>>], (node: HTMLElement) => import("../../../melt-ui/svelte/internal/types").MeltActionReturn<"pointerdown" | "pointerup">, ([$hasThumb, $isHorizontal, $offset]: [boolean, boolean, number]) => {
56
57
  style: string;
57
58
  'data-state': string;
58
59
  }, string>;
59
60
  };
60
61
  };
61
62
  export declare function getCtx(): GetReturn;
63
+ export declare function setScrollbarOrientation(orientation: Writable<"horizontal" | "vertical">): Writable<"horizontal" | "vertical">;
64
+ export declare function getScrollbarOrientation(): Writable<"horizontal" | "vertical">;
62
65
  export {};
@@ -3,6 +3,7 @@ import { getContext, setContext } from "svelte";
3
3
  import { removeUndefined, getOptionUpdater, createBitAttrs } from "../../internal/index.js";
4
4
  function getScrollAreaData() {
5
5
  const NAME = "scroll-area";
6
+ const SCROLLBAR_NAME = "scrollbar";
6
7
  const PARTS = [
7
8
  "scrollbar-x",
8
9
  "scrollbar-y",
@@ -13,7 +14,7 @@ function getScrollAreaData() {
13
14
  "root",
14
15
  "corner",
15
16
  ];
16
- return { NAME, PARTS };
17
+ return { NAME, PARTS, SCROLLBAR_NAME };
17
18
  }
18
19
  export function setCtx(props) {
19
20
  const { NAME, PARTS } = getScrollAreaData();
@@ -29,3 +30,11 @@ export function getCtx() {
29
30
  const { NAME } = getScrollAreaData();
30
31
  return getContext(NAME);
31
32
  }
33
+ export function setScrollbarOrientation(orientation) {
34
+ const { SCROLLBAR_NAME } = getScrollAreaData();
35
+ return setContext(SCROLLBAR_NAME, orientation);
36
+ }
37
+ export function getScrollbarOrientation() {
38
+ const { SCROLLBAR_NAME } = getScrollAreaData();
39
+ return getContext(SCROLLBAR_NAME);
40
+ }
@@ -1,9 +1,7 @@
1
1
  export { default as Root } from "./components/scroll-area.svelte";
2
2
  export { default as Viewport } from "./components/scroll-area-viewport.svelte";
3
3
  export { default as Content } from "./components/scroll-area-content.svelte";
4
- export { default as ScrollbarX } from "./components/scroll-area-scrollbar-x.svelte";
5
- export { default as ScrollbarY } from "./components/scroll-area-scrollbar-y.svelte";
6
- export { default as ThumbX } from "./components/scroll-area-thumb-x.svelte";
7
- export { default as ThumbY } from "./components/scroll-area-thumb-y.svelte";
4
+ export { default as Scrollbar } from "./components/scroll-area-scrollbar.svelte";
5
+ export { default as Thumb } from "./components/scroll-area-thumb.svelte";
8
6
  export { default as Corner } from "./components/scroll-area-corner.svelte";
9
7
  export * from "./types.js";
@@ -1,9 +1,7 @@
1
1
  export { default as Root } from "./components/scroll-area.svelte";
2
2
  export { default as Viewport } from "./components/scroll-area-viewport.svelte";
3
3
  export { default as Content } from "./components/scroll-area-content.svelte";
4
- export { default as ScrollbarX } from "./components/scroll-area-scrollbar-x.svelte";
5
- export { default as ScrollbarY } from "./components/scroll-area-scrollbar-y.svelte";
6
- export { default as ThumbX } from "./components/scroll-area-thumb-x.svelte";
7
- export { default as ThumbY } from "./components/scroll-area-thumb-y.svelte";
4
+ export { default as Scrollbar } from "./components/scroll-area-scrollbar.svelte";
5
+ export { default as Thumb } from "./components/scroll-area-thumb.svelte";
8
6
  export { default as Corner } from "./components/scroll-area-corner.svelte";
9
7
  export * from "./types.js";
@@ -3,8 +3,6 @@ import * as I from "./_types.js";
3
3
  export type Props = I.Props & HTMLDivAttributes;
4
4
  export type ViewportProps = I.ViewportProps & HTMLDivAttributes;
5
5
  export type ContentProps = I.ContentProps & HTMLDivAttributes;
6
- export type ScrollbarXProps = I.ScrollbarXProps & HTMLDivAttributes;
7
- export type ScrollbarYProps = I.ScrollbarYProps & HTMLDivAttributes;
8
- export type ThumbXProps = I.ThumbXProps & HTMLDivAttributes;
9
- export type ThumbYProps = I.ThumbYProps & HTMLDivAttributes;
6
+ export type ScrollbarProps = I.ScrollbarProps & HTMLDivAttributes;
7
+ export type ThumbProps = I.ThumbProps & HTMLDivAttributes;
10
8
  export type CornerProps = I.CornerProps & HTMLDivAttributes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bits-ui",
3
- "version": "0.19.0",
3
+ "version": "0.19.1",
4
4
  "license": "MIT",
5
5
  "repository": "github:huntabyte/bits-ui",
6
6
  "exports": {
@@ -78,7 +78,7 @@
78
78
  "type": "module",
79
79
  "dependencies": {
80
80
  "@internationalized/date": "^3.5.1",
81
- "@melt-ui/svelte": "0.75.1",
81
+ "@melt-ui/svelte": "0.75.2",
82
82
  "nanoid": "^5.0.5"
83
83
  },
84
84
  "peerDependencies": {