bits-ui 0.13.6 → 0.14.0

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.
Files changed (29) hide show
  1. package/dist/bits/accordion/components/accordion.svelte +4 -2
  2. package/dist/bits/alert-dialog/ctx.js +2 -1
  3. package/dist/bits/calendar/components/calendar.svelte +4 -2
  4. package/dist/bits/date-field/components/date-field-segment.svelte.d.ts +1 -1
  5. package/dist/bits/date-field/components/date-field.svelte +4 -0
  6. package/dist/bits/date-field/components/date-field.svelte.d.ts +1 -0
  7. package/dist/bits/date-field/ctx.d.ts +4 -3
  8. package/dist/bits/date-picker/components/date-picker-segment.svelte.d.ts +1 -1
  9. package/dist/bits/date-picker/ctx.d.ts +8 -6
  10. package/dist/bits/date-range-field/_types.d.ts +3 -2
  11. package/dist/bits/date-range-field/components/date-range-field.svelte +4 -0
  12. package/dist/bits/date-range-field/components/date-range-field.svelte.d.ts +4 -0
  13. package/dist/bits/date-range-field/ctx.d.ts +10 -6
  14. package/dist/bits/date-range-picker/ctx.d.ts +20 -12
  15. package/dist/bits/menubar/components/menubar-menu.svelte +0 -4
  16. package/dist/bits/menubar/components/menubar.svelte +4 -1
  17. package/dist/bits/menubar/ctx.d.ts +28 -29
  18. package/dist/bits/progress/_types.d.ts +2 -2
  19. package/dist/bits/progress/components/progress.svelte.d.ts +3 -3
  20. package/dist/bits/progress/ctx.d.ts +13 -13
  21. package/dist/bits/select/components/select.svelte +4 -2
  22. package/dist/bits/toggle-group/components/toggle-group.svelte +4 -2
  23. package/dist/bits/tooltip/components/tooltip-content.svelte.d.ts +1 -0
  24. package/dist/bits/tooltip/components/tooltip-trigger.svelte.d.ts +1 -0
  25. package/dist/bits/tooltip/ctx.d.ts +12 -2
  26. package/dist/internal/arrays.d.ts +1 -0
  27. package/dist/internal/arrays.js +6 -0
  28. package/dist/shared/index.d.ts +2 -2
  29. package/package.json +2 -2
package/dist/bits/accordion/components/accordion.svelte CHANGED
@@ -1,4 +1,5 @@
1
- <script>import { melt } from "@melt-ui/svelte";
1
+ <script>import { arraysAreEqual } from "../../../internal/arrays.js";
2
+ import { melt } from "@melt-ui/svelte";
2
3
  import { setCtx } from "../ctx.js";
3
4
  export let multiple = false;
4
5
  export let value = void 0;
@@ -17,9 +18,10 @@ const {
17
18
  defaultValue: value,
18
19
  onValueChange: ({ next }) => {
19
20
  if (Array.isArray(next)) {
20
- if (JSON.stringify(next) !== JSON.stringify(value)) {
21
+ if (!Array.isArray(value) || !arraysAreEqual(value, next)) {
21
22
  onValueChange?.(next);
22
23
  value = next;
24
+ return next;
23
25
  }
24
26
  return next;
25
27
  }
package/dist/bits/alert-dialog/ctx.js CHANGED
@@ -20,7 +20,8 @@ export function setCtx(props) {
20
20
  const getAttrs = createBitAttrs(NAME, PARTS);
21
21
  const initAlertDialog = createDialog({
22
22
  ...removeUndefined(props),
23
- role: "alertdialog"
23
+ role: "alertdialog",
24
+ forceVisible: true
24
25
  });
25
26
  const alertDialog = {
26
27
  ...initAlertDialog,
package/dist/bits/calendar/components/calendar.svelte CHANGED
@@ -1,4 +1,5 @@
1
- <script>import { handleCalendarInitialFocus } from "../../../internal/focus.js";
1
+ <script>import { arraysAreEqual } from "../../../internal/arrays.js";
2
+ import { handleCalendarInitialFocus } from "../../../internal/focus.js";
2
3
  import { createDispatcher } from "../../../internal/events.js";
3
4
  import { melt } from "@melt-ui/svelte";
4
5
  import { onMount } from "svelte";
@@ -69,9 +70,10 @@ const {
69
70
  },
70
71
  onValueChange: ({ next }) => {
71
72
  if (Array.isArray(next)) {
72
- if (JSON.stringify(next) !== JSON.stringify(value)) {
73
+ if (!Array.isArray(value) || !arraysAreEqual(value, next)) {
73
74
  onValueChange?.(next);
74
75
  value = next;
76
+ return next;
75
77
  }
76
78
  return next;
77
79
  }
package/dist/bits/date-field/components/date-field-segment.svelte.d.ts CHANGED
@@ -14,7 +14,7 @@ declare const __propDef: {
14
14
  } | {
15
15
  id: string;
16
16
  'aria-labelledby': string;
17
- contentEditable: boolean;
17
+ contenteditable: boolean;
18
18
  'aria-describedby': string | undefined;
19
19
  tabindex: number | undefined;
20
20
  'aria-invalid': "true" | undefined;
package/dist/bits/date-field/components/date-field.svelte CHANGED
@@ -15,6 +15,7 @@ export let minValue = void 0;
15
15
  export let readonly = void 0;
16
16
  export let validationId = void 0;
17
17
  export let descriptionId = void 0;
18
+ export let readonlySegments = void 0;
18
19
  const {
19
20
  states: {
20
21
  value: localValue,
@@ -34,6 +35,7 @@ const {
34
35
  maxValue,
35
36
  minValue,
36
37
  readonly,
38
+ readonlySegments,
37
39
  isDateUnavailable,
38
40
  onValueChange: ({ next }) => {
39
41
  if (value !== next) {
@@ -123,6 +125,8 @@ $:
123
125
  updateOption("minValue", minValue);
124
126
  $:
125
127
  updateOption("readonly", readonly);
128
+ $:
129
+ updateOption("readonlySegments", readonlySegments);
126
130
  </script>
127
131
 
128
132
  <slot isInvalid={$localIsInvalid} ids={$idValues} />
package/dist/bits/date-field/components/date-field.svelte.d.ts CHANGED
@@ -7,6 +7,7 @@ declare const __propDef: {
7
7
  isDateUnavailable?: import("@melt-ui/svelte/index.js").Matcher | undefined;
8
8
  locale?: string | undefined;
9
9
  readonly?: boolean | undefined;
10
+ readonlySegments?: ("month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod")[] | undefined;
10
11
  hourCycle?: 12 | 24 | undefined;
11
12
  granularity?: import("@melt-ui/svelte/index.js").Granularity | undefined;
12
13
  hideTimeZone?: boolean | undefined;
package/dist/bits/date-field/ctx.d.ts CHANGED
@@ -54,7 +54,7 @@ export declare function setCtx(props: CreateDateFieldProps): {
54
54
  update: (updater: import("svelte/store").Updater<import("@internationalized/date").DateValue | undefined>, sideEffect?: ((newValue: import("@internationalized/date").DateValue | undefined) => void) | undefined) => void;
55
55
  set: (this: void, value: import("@internationalized/date").DateValue | undefined) => void;
56
56
  subscribe(this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue | undefined>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue | undefined> | undefined): import("svelte/store").Unsubscriber;
57
- }, import("svelte/store").Readable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Readable<{
57
+ }, import("svelte/store").Readable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Readable<Set<import("@melt-ui/svelte").SegmentPart>>, import("svelte/store").Readable<{
58
58
  field: string;
59
59
  label: string;
60
60
  description: string;
@@ -67,7 +67,7 @@ export declare function setCtx(props: CreateDateFieldProps): {
67
67
  second: string;
68
68
  dayPeriod: string;
69
69
  timeZoneName: string;
70
- }>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, {
70
+ }>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $readonlySegmentsSet, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, Set<import("@melt-ui/svelte").SegmentPart>, {
71
71
  field: string;
72
72
  label: string;
73
73
  description: string;
@@ -90,7 +90,7 @@ export declare function setCtx(props: CreateDateFieldProps): {
90
90
  } | {
91
91
  id: string;
92
92
  'aria-labelledby': string;
93
- contentEditable: boolean;
93
+ contenteditable: boolean;
94
94
  'aria-describedby': string | undefined;
95
95
  tabindex: number | undefined;
96
96
  'aria-invalid': "true" | undefined;
@@ -161,6 +161,7 @@ export declare function setCtx(props: CreateDateFieldProps): {
161
161
  maxValue: import("@internationalized/date").DateValue | undefined;
162
162
  disabled: boolean;
163
163
  readonly: boolean;
164
+ readonlySegments: ("month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod")[] | undefined;
164
165
  hourCycle: 12 | 24 | undefined;
165
166
  locale: string;
166
167
  granularity: import("@melt-ui/svelte").Granularity | undefined;
package/dist/bits/date-picker/components/date-picker-segment.svelte.d.ts CHANGED
@@ -14,7 +14,7 @@ declare const __propDef: {
14
14
  } | {
15
15
  id: string;
16
16
  'aria-labelledby': string;
17
- contentEditable: boolean;
17
+ contenteditable: boolean;
18
18
  'aria-describedby': string | undefined;
19
19
  tabindex: number | undefined;
20
20
  'aria-invalid': "true" | undefined;
package/dist/bits/date-picker/ctx.d.ts CHANGED
@@ -102,7 +102,7 @@ export declare function setCtx(props: CreateDatePickerProps): {
102
102
  update: (updater: import("svelte/store").Updater<import("@internationalized/date").DateValue | undefined>, sideEffect?: ((newValue: import("@internationalized/date").DateValue | undefined) => void) | undefined) => void;
103
103
  set: (this: void, value: import("@internationalized/date").DateValue | undefined) => void;
104
104
  subscribe(this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue | undefined>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue | undefined> | undefined): import("svelte/store").Unsubscriber;
105
- }, import("svelte/store").Readable<boolean>, Writable<boolean>, Writable<boolean>, import("svelte/store").Readable<{
105
+ }, import("svelte/store").Readable<boolean>, Writable<boolean>, Writable<boolean>, import("svelte/store").Readable<Set<import("@melt-ui/svelte").SegmentPart>>, import("svelte/store").Readable<{
106
106
  field: string;
107
107
  label: string;
108
108
  description: string;
@@ -115,7 +115,7 @@ export declare function setCtx(props: CreateDatePickerProps): {
115
115
  second: string;
116
116
  dayPeriod: string;
117
117
  timeZoneName: string;
118
- }>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, {
118
+ }>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $readonlySegmentsSet, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, Set<import("@melt-ui/svelte").SegmentPart>, {
119
119
  field: string;
120
120
  label: string;
121
121
  description: string;
@@ -138,7 +138,7 @@ export declare function setCtx(props: CreateDatePickerProps): {
138
138
  } | {
139
139
  id: string;
140
140
  'aria-labelledby': string;
141
- contentEditable: boolean;
141
+ contenteditable: boolean;
142
142
  'aria-describedby': string | undefined;
143
143
  tabindex: number | undefined;
144
144
  'aria-invalid': "true" | undefined;
@@ -340,6 +340,7 @@ export declare function setCtx(props: CreateDatePickerProps): {
340
340
  content: string;
341
341
  trigger: string;
342
342
  }> | undefined> | undefined;
343
+ readonlySegments: Writable<("month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod")[] | undefined>;
343
344
  };
344
345
  ids: {
345
346
  dateField: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
@@ -466,7 +467,7 @@ export declare function getCtx(): {
466
467
  update: (updater: import("svelte/store").Updater<import("@internationalized/date").DateValue | undefined>, sideEffect?: ((newValue: import("@internationalized/date").DateValue | undefined) => void) | undefined) => void;
467
468
  set: (this: void, value: import("@internationalized/date").DateValue | undefined) => void;
468
469
  subscribe(this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue | undefined>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue | undefined> | undefined): import("svelte/store").Unsubscriber;
469
- }, import("svelte/store").Readable<boolean>, Writable<boolean>, Writable<boolean>, import("svelte/store").Readable<{
470
+ }, import("svelte/store").Readable<boolean>, Writable<boolean>, Writable<boolean>, import("svelte/store").Readable<Set<import("@melt-ui/svelte").SegmentPart>>, import("svelte/store").Readable<{
470
471
  field: string;
471
472
  label: string;
472
473
  description: string;
@@ -479,7 +480,7 @@ export declare function getCtx(): {
479
480
  second: string;
480
481
  dayPeriod: string;
481
482
  timeZoneName: string;
482
- }>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, {
483
+ }>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $readonlySegmentsSet, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, Set<import("@melt-ui/svelte").SegmentPart>, {
483
484
  field: string;
484
485
  label: string;
485
486
  description: string;
@@ -502,7 +503,7 @@ export declare function getCtx(): {
502
503
  } | {
503
504
  id: string;
504
505
  'aria-labelledby': string;
505
- contentEditable: boolean;
506
+ contenteditable: boolean;
506
507
  'aria-describedby': string | undefined;
507
508
  tabindex: number | undefined;
508
509
  'aria-invalid': "true" | undefined;
@@ -704,6 +705,7 @@ export declare function getCtx(): {
704
705
  content: string;
705
706
  trigger: string;
706
707
  }> | undefined> | undefined;
708
+ readonlySegments: Writable<("month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod")[] | undefined>;
707
709
  };
708
710
  ids: {
709
711
  dateField: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
package/dist/bits/date-range-field/_types.d.ts CHANGED
@@ -6,8 +6,9 @@
6
6
  import type { Expand, OnChangeFn, OmitDates, DOMElement } from "../../internal/index.js";
7
7
  import type { DateRange, SegmentPart } from "../../shared/index.js";
8
8
  import type { DateValue } from "@internationalized/date";
9
- import type { CreateDateFieldProps } from "@melt-ui/svelte";
10
- type Props = Expand<Omit<OmitDates<CreateDateFieldProps>, "required" | "name"> & {
9
+ import type { CreateDateRangeFieldProps as ICreateDateRangeFieldProps } from "@melt-ui/svelte";
10
+ type CreateDateRangeFieldProps = Omit<OmitDates<ICreateDateRangeFieldProps>, "required" | "name" | "startIds" | "endIds" | "startName" | "endName">;
11
+ type Props = Expand<Omit<OmitDates<CreateDateRangeFieldProps>, "required" | "name" | "startIds" | "endIds" | "startName" | "endName"> & {
11
12
  /**
12
13
  * The value of the date field.
13
14
  * You can bind this to a `DateValue` object to programmatically control the value.
package/dist/bits/date-range-field/components/date-range-field.svelte CHANGED
@@ -15,6 +15,7 @@ export let minValue = void 0;
15
15
  export let readonly = void 0;
16
16
  export let validationId = void 0;
17
17
  export let descriptionId = void 0;
18
+ export let readonlySegments = void 0;
18
19
  const {
19
20
  states: {
20
21
  value: localValue,
@@ -35,6 +36,7 @@ const {
35
36
  minValue,
36
37
  readonly,
37
38
  isDateUnavailable,
39
+ readonlySegments,
38
40
  onValueChange: ({ next }) => {
39
41
  if (value !== next) {
40
42
  onValueChange?.(next);
@@ -174,6 +176,8 @@ $:
174
176
  updateOption("minValue", minValue);
175
177
  $:
176
178
  updateOption("readonly", readonly);
179
+ $:
180
+ updateOption("readonlySegments", readonlySegments);
177
181
  $:
178
182
  idSlotProp = {
179
183
  start: $startIdValues,
package/dist/bits/date-range-field/components/date-range-field.svelte.d.ts CHANGED
@@ -7,6 +7,10 @@ declare const __propDef: {
7
7
  isDateUnavailable?: import("@melt-ui/svelte/index.js").Matcher | undefined;
8
8
  locale?: string | undefined;
9
9
  readonly?: boolean | undefined;
10
+ readonlySegments?: {
11
+ start: ("month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod")[];
12
+ end: ("month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod")[];
13
+ } | undefined;
10
14
  hourCycle?: 12 | 24 | undefined;
11
15
  granularity?: import("@melt-ui/svelte/index.js").Granularity | undefined;
12
16
  hideTimeZone?: boolean | undefined;
package/dist/bits/date-range-field/ctx.d.ts CHANGED
@@ -50,7 +50,7 @@ export declare function setCtx(props: CreateDateRangeFieldProps): {
50
50
  update: (updater: import("svelte/store").Updater<import("@internationalized/date").DateValue | undefined>, sideEffect?: ((newValue: import("@internationalized/date").DateValue | undefined) => void) | undefined) => void;
51
51
  set: (this: void, value: import("@internationalized/date").DateValue | undefined) => void;
52
52
  subscribe(this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue | undefined>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue | undefined> | undefined): import("svelte/store").Unsubscriber;
53
- }, import("svelte/store").Readable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Readable<{
53
+ }, import("svelte/store").Readable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Readable<Set<import("@melt-ui/svelte").SegmentPart>>, import("svelte/store").Readable<{
54
54
  field: string;
55
55
  label: string;
56
56
  description: string;
@@ -63,7 +63,7 @@ export declare function setCtx(props: CreateDateRangeFieldProps): {
63
63
  second: string;
64
64
  dayPeriod: string;
65
65
  timeZoneName: string;
66
- }>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, {
66
+ }>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $readonlySegmentsSet, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, Set<import("@melt-ui/svelte").SegmentPart>, {
67
67
  field: string;
68
68
  label: string;
69
69
  description: string;
@@ -86,7 +86,7 @@ export declare function setCtx(props: CreateDateRangeFieldProps): {
86
86
  } | {
87
87
  id: string;
88
88
  'aria-labelledby': string;
89
- contentEditable: boolean;
89
+ contenteditable: boolean;
90
90
  'aria-describedby': string | undefined;
91
91
  tabindex: number | undefined;
92
92
  'aria-invalid': "true" | undefined;
@@ -115,7 +115,7 @@ export declare function setCtx(props: CreateDateRangeFieldProps): {
115
115
  update: (updater: import("svelte/store").Updater<import("@internationalized/date").DateValue | undefined>, sideEffect?: ((newValue: import("@internationalized/date").DateValue | undefined) => void) | undefined) => void;
116
116
  set: (this: void, value: import("@internationalized/date").DateValue | undefined) => void;
117
117
  subscribe(this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue | undefined>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue | undefined> | undefined): import("svelte/store").Unsubscriber;
118
- }, import("svelte/store").Readable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Readable<{
118
+ }, import("svelte/store").Readable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Readable<Set<import("@melt-ui/svelte").SegmentPart>>, import("svelte/store").Readable<{
119
119
  field: string;
120
120
  label: string;
121
121
  description: string;
@@ -128,7 +128,7 @@ export declare function setCtx(props: CreateDateRangeFieldProps): {
128
128
  second: string;
129
129
  dayPeriod: string;
130
130
  timeZoneName: string;
131
- }>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, {
131
+ }>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $readonlySegmentsSet, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, Set<import("@melt-ui/svelte").SegmentPart>, {
132
132
  field: string;
133
133
  label: string;
134
134
  description: string;
@@ -151,7 +151,7 @@ export declare function setCtx(props: CreateDateRangeFieldProps): {
151
151
  } | {
152
152
  id: string;
153
153
  'aria-labelledby': string;
154
- contentEditable: boolean;
154
+ contenteditable: boolean;
155
155
  'aria-describedby': string | undefined;
156
156
  tabindex: number | undefined;
157
157
  'aria-invalid': "true" | undefined;
@@ -241,6 +241,10 @@ export declare function setCtx(props: CreateDateRangeFieldProps): {
241
241
  locale: import("svelte/store").Writable<string>;
242
242
  readonly: import("svelte/store").Writable<boolean>;
243
243
  granularity: import("svelte/store").Writable<import("@melt-ui/svelte").Granularity | undefined>;
244
+ readonlySegments: import("svelte/store").Writable<{
245
+ start: ("month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod")[];
246
+ end: ("month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod")[];
247
+ } | undefined>;
244
248
  hourCycle: import("svelte/store").Writable<12 | 24 | undefined>;
245
249
  hideTimeZone: import("svelte/store").Writable<boolean>;
246
250
  startIds?: import("svelte/store").Writable<Partial<{
package/dist/bits/date-range-picker/ctx.d.ts CHANGED
@@ -102,7 +102,7 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
102
102
  update: (updater: import("svelte/store").Updater<import("@internationalized/date").DateValue | undefined>, sideEffect?: ((newValue: import("@internationalized/date").DateValue | undefined) => void) | undefined) => void;
103
103
  set: (this: void, value: import("@internationalized/date").DateValue | undefined) => void;
104
104
  subscribe(this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue | undefined>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue | undefined> | undefined): import("svelte/store").Unsubscriber;
105
- }, import("svelte/store").Readable<boolean>, Writable<boolean>, Writable<boolean>, import("svelte/store").Readable<{
105
+ }, import("svelte/store").Readable<boolean>, Writable<boolean>, Writable<boolean>, import("svelte/store").Readable<Set<import("@melt-ui/svelte").SegmentPart>>, import("svelte/store").Readable<{
106
106
  field: string;
107
107
  label: string;
108
108
  description: string;
@@ -115,7 +115,7 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
115
115
  second: string;
116
116
  dayPeriod: string;
117
117
  timeZoneName: string;
118
- }>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, {
118
+ }>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $readonlySegmentsSet, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, Set<import("@melt-ui/svelte").SegmentPart>, {
119
119
  field: string;
120
120
  label: string;
121
121
  description: string;
@@ -138,7 +138,7 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
138
138
  } | {
139
139
  id: string;
140
140
  'aria-labelledby': string;
141
- contentEditable: boolean;
141
+ contenteditable: boolean;
142
142
  'aria-describedby': string | undefined;
143
143
  tabindex: number | undefined;
144
144
  'aria-invalid': "true" | undefined;
@@ -167,7 +167,7 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
167
167
  update: (updater: import("svelte/store").Updater<import("@internationalized/date").DateValue | undefined>, sideEffect?: ((newValue: import("@internationalized/date").DateValue | undefined) => void) | undefined) => void;
168
168
  set: (this: void, value: import("@internationalized/date").DateValue | undefined) => void;
169
169
  subscribe(this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue | undefined>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue | undefined> | undefined): import("svelte/store").Unsubscriber;
170
- }, import("svelte/store").Readable<boolean>, Writable<boolean>, Writable<boolean>, import("svelte/store").Readable<{
170
+ }, import("svelte/store").Readable<boolean>, Writable<boolean>, Writable<boolean>, import("svelte/store").Readable<Set<import("@melt-ui/svelte").SegmentPart>>, import("svelte/store").Readable<{
171
171
  field: string;
172
172
  label: string;
173
173
  description: string;
@@ -180,7 +180,7 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
180
180
  second: string;
181
181
  dayPeriod: string;
182
182
  timeZoneName: string;
183
- }>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, {
183
+ }>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $readonlySegmentsSet, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, Set<import("@melt-ui/svelte").SegmentPart>, {
184
184
  field: string;
185
185
  label: string;
186
186
  description: string;
@@ -203,7 +203,7 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
203
203
  } | {
204
204
  id: string;
205
205
  'aria-labelledby': string;
206
- contentEditable: boolean;
206
+ contenteditable: boolean;
207
207
  'aria-describedby': string | undefined;
208
208
  tabindex: number | undefined;
209
209
  'aria-invalid': "true" | undefined;
@@ -457,6 +457,10 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
457
457
  field: string;
458
458
  validation: string;
459
459
  }> | undefined> | undefined;
460
+ readonlySegments: Writable<{
461
+ start: ("month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod")[];
462
+ end: ("month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod")[];
463
+ } | undefined>;
460
464
  };
461
465
  ids: {
462
466
  rangeField: {
@@ -605,7 +609,7 @@ export declare function getCtx(): {
605
609
  update: (updater: import("svelte/store").Updater<import("@internationalized/date").DateValue | undefined>, sideEffect?: ((newValue: import("@internationalized/date").DateValue | undefined) => void) | undefined) => void;
606
610
  set: (this: void, value: import("@internationalized/date").DateValue | undefined) => void;
607
611
  subscribe(this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue | undefined>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue | undefined> | undefined): import("svelte/store").Unsubscriber;
608
- }, import("svelte/store").Readable<boolean>, Writable<boolean>, Writable<boolean>, import("svelte/store").Readable<{
612
+ }, import("svelte/store").Readable<boolean>, Writable<boolean>, Writable<boolean>, import("svelte/store").Readable<Set<import("@melt-ui/svelte").SegmentPart>>, import("svelte/store").Readable<{
609
613
  field: string;
610
614
  label: string;
611
615
  description: string;
@@ -618,7 +622,7 @@ export declare function getCtx(): {
618
622
  second: string;
619
623
  dayPeriod: string;
620
624
  timeZoneName: string;
621
- }>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, {
625
+ }>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $readonlySegmentsSet, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, Set<import("@melt-ui/svelte").SegmentPart>, {
622
626
  field: string;
623
627
  label: string;
624
628
  description: string;
@@ -641,7 +645,7 @@ export declare function getCtx(): {
641
645
  } | {
642
646
  id: string;
643
647
  'aria-labelledby': string;
644
- contentEditable: boolean;
648
+ contenteditable: boolean;
645
649
  'aria-describedby': string | undefined;
646
650
  tabindex: number | undefined;
647
651
  'aria-invalid': "true" | undefined;
@@ -670,7 +674,7 @@ export declare function getCtx(): {
670
674
  update: (updater: import("svelte/store").Updater<import("@internationalized/date").DateValue | undefined>, sideEffect?: ((newValue: import("@internationalized/date").DateValue | undefined) => void) | undefined) => void;
671
675
  set: (this: void, value: import("@internationalized/date").DateValue | undefined) => void;
672
676
  subscribe(this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue | undefined>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue | undefined> | undefined): import("svelte/store").Unsubscriber;
673
- }, import("svelte/store").Readable<boolean>, Writable<boolean>, Writable<boolean>, import("svelte/store").Readable<{
677
+ }, import("svelte/store").Readable<boolean>, Writable<boolean>, Writable<boolean>, import("svelte/store").Readable<Set<import("@melt-ui/svelte").SegmentPart>>, import("svelte/store").Readable<{
674
678
  field: string;
675
679
  label: string;
676
680
  description: string;
@@ -683,7 +687,7 @@ export declare function getCtx(): {
683
687
  second: string;
684
688
  dayPeriod: string;
685
689
  timeZoneName: string;
686
- }>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, {
690
+ }>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $readonlySegmentsSet, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, Set<import("@melt-ui/svelte").SegmentPart>, {
687
691
  field: string;
688
692
  label: string;
689
693
  description: string;
@@ -706,7 +710,7 @@ export declare function getCtx(): {
706
710
  } | {
707
711
  id: string;
708
712
  'aria-labelledby': string;
709
- contentEditable: boolean;
713
+ contenteditable: boolean;
710
714
  'aria-describedby': string | undefined;
711
715
  tabindex: number | undefined;
712
716
  'aria-invalid': "true" | undefined;
@@ -960,6 +964,10 @@ export declare function getCtx(): {
960
964
  field: string;
961
965
  validation: string;
962
966
  }> | undefined> | undefined;
967
+ readonlySegments: Writable<{
968
+ start: ("month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod")[];
969
+ end: ("month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod")[];
970
+ } | undefined>;
963
971
  };
964
972
  ids: {
965
973
  rangeField: {
package/dist/bits/menubar/components/menubar-menu.svelte CHANGED
@@ -5,7 +5,6 @@ export let closeOnEscape = void 0;
5
5
  export let portal = void 0;
6
6
  export let open = void 0;
7
7
  export let onOpenChange = void 0;
8
- export let preventScroll = void 0;
9
8
  export let loop = void 0;
10
9
  export let dir = void 0;
11
10
  export let typeahead = void 0;
@@ -21,7 +20,6 @@ const {
21
20
  closeOnOutsideClick,
22
21
  closeOnEscape,
23
22
  portal,
24
- preventScroll,
25
23
  loop,
26
24
  dir,
27
25
  typeahead,
@@ -52,8 +50,6 @@ $:
52
50
  updateOption("closeOnEscape", closeOnEscape);
53
51
  $:
54
52
  updateOption("portal", portal);
55
- $:
56
- updateOption("preventScroll", preventScroll);
57
53
  $:
58
54
  updateOption("loop", loop);
59
55
  $:
package/dist/bits/menubar/components/menubar.svelte CHANGED
@@ -5,13 +5,14 @@ export let loop = true;
5
5
  export let closeOnEscape = true;
6
6
  export let asChild = false;
7
7
  export let id = void 0;
8
+ export let preventScroll = void 0;
8
9
  export let el = void 0;
9
10
  const {
10
11
  elements: { menubar },
11
12
  updateOption,
12
13
  ids,
13
14
  getMenubarAttrs
14
- } = setCtx({ loop, closeOnEscape });
15
+ } = setCtx({ loop, closeOnEscape, preventScroll });
15
16
  const idValues = derived([ids.menubar], ([$menubarId]) => ({
16
17
  menubar: $menubarId
17
18
  }));
@@ -24,6 +25,8 @@ $:
24
25
  updateOption("loop", loop);
25
26
  $:
26
27
  updateOption("closeOnEscape", closeOnEscape);
28
+ $:
29
+ updateOption("preventScroll", preventScroll);
27
30
  $:
28
31
  builder = $menubar;
29
32
  $:
package/dist/bits/menubar/ctx.d.ts CHANGED
@@ -25,7 +25,7 @@ export declare function setCtx(props: MenubarProps): {
25
25
  }, string>;
26
26
  };
27
27
  builders: {
28
- createMenu: (props?: import("@melt-ui/svelte/dist/builders/menu/types.js")._CreateMenuProps | undefined) => {
28
+ createMenu: (props?: CreateMenubarMenuProps | undefined) => {
29
29
  ids: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
30
30
  menu: string;
31
31
  trigger: string;
@@ -208,35 +208,35 @@ export declare function setCtx(props: MenubarProps): {
208
208
  open: Writable<boolean>;
209
209
  };
210
210
  options: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
211
+ dir: import("@melt-ui/svelte/internal/types").TextDirection;
212
+ open?: Writable<boolean> | undefined;
213
+ forceVisible: boolean;
214
+ ids?: Partial<{
215
+ menu: string;
216
+ trigger: string;
217
+ }> | undefined;
218
+ defaultOpen: boolean;
219
+ onOpenChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<boolean> | undefined;
220
+ portal: string | HTMLElement | null | undefined;
211
221
  positioning: import("@melt-ui/svelte/internal/actions").FloatingConfig | {
212
222
  placement: "bottom-start";
213
223
  };
214
224
  arrowSize: number;
215
- dir: import("@melt-ui/svelte/internal/types").TextDirection;
216
- preventScroll: boolean;
217
- closeOnEscape: boolean;
218
- closeOnItemClick: boolean;
219
- portal: string | HTMLElement | null | undefined;
225
+ loop: boolean;
220
226
  closeOnOutsideClick: boolean;
227
+ closeOnEscape: boolean;
221
228
  onOutsideClick: ((event: PointerEvent) => void) | undefined;
222
- loop: boolean;
223
- defaultOpen: boolean;
224
- open?: Writable<boolean> | undefined;
225
- onOpenChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<boolean> | undefined;
226
- forceVisible: boolean;
227
229
  typeahead: boolean;
230
+ closeOnItemClick: boolean;
228
231
  closeFocus: import("@melt-ui/svelte/index.js").FocusProp | undefined;
229
232
  disableFocusFirstItem: boolean;
230
- ids?: Partial<{
231
- menu: string;
232
- trigger: string;
233
- }> | undefined;
234
233
  }>;
235
234
  };
236
235
  };
237
236
  options: import("@melt-ui/svelte/internal/helpers").ToWritableStores<Omit<{
238
237
  loop: boolean;
239
238
  closeOnEscape: boolean;
239
+ preventScroll: boolean;
240
240
  ids?: Partial<{
241
241
  menubar: string;
242
242
  }> | undefined;
@@ -428,29 +428,28 @@ export declare function setMenuCtx(props: CreateMenubarMenuProps): {
428
428
  open: Writable<boolean>;
429
429
  };
430
430
  options: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
431
+ dir: import("@melt-ui/svelte/internal/types").TextDirection;
432
+ open?: Writable<boolean> | undefined;
433
+ forceVisible: boolean;
434
+ ids?: Partial<{
435
+ menu: string;
436
+ trigger: string;
437
+ }> | undefined;
438
+ defaultOpen: boolean;
439
+ onOpenChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<boolean> | undefined;
440
+ portal: string | HTMLElement | null | undefined;
431
441
  positioning: import("@melt-ui/svelte/internal/actions").FloatingConfig | {
432
442
  placement: "bottom-start";
433
443
  };
434
444
  arrowSize: number;
435
- dir: import("@melt-ui/svelte/internal/types").TextDirection;
436
- preventScroll: boolean;
437
- closeOnEscape: boolean;
438
- closeOnItemClick: boolean;
439
- portal: string | HTMLElement | null | undefined;
445
+ loop: boolean;
440
446
  closeOnOutsideClick: boolean;
447
+ closeOnEscape: boolean;
441
448
  onOutsideClick: ((event: PointerEvent) => void) | undefined;
442
- loop: boolean;
443
- defaultOpen: boolean;
444
- open?: Writable<boolean> | undefined;
445
- onOpenChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<boolean> | undefined;
446
- forceVisible: boolean;
447
449
  typeahead: boolean;
450
+ closeOnItemClick: boolean;
448
451
  closeFocus: import("@melt-ui/svelte/index.js").FocusProp | undefined;
449
452
  disableFocusFirstItem: boolean;
450
- ids?: Partial<{
451
- menu: string;
452
- trigger: string;
453
- }> | undefined;
454
453
  }>;
455
454
  };
456
455
  export declare function getMenuCtx(): GetMenuReturn;
package/dist/bits/progress/_types.d.ts CHANGED
@@ -10,10 +10,10 @@ type Props = Expand<OmitValue<CreateProgressProps> & {
10
10
  * The value of the progress bar.
11
11
  * You can bind this to a number value to programmatically control the value.
12
12
  */
13
- value?: CreateProgressProps["defaultValue"] & {};
13
+ value?: CreateProgressProps["defaultValue"];
14
14
  /**
15
15
  * A callback function called when the value changes.
16
16
  */
17
- onValueChange?: OnChangeFn<number>;
17
+ onValueChange?: OnChangeFn<number | null>;
18
18
  } & DOMElement>;
19
19
  export type { Props };
package/dist/bits/progress/components/progress.svelte.d.ts CHANGED
@@ -8,13 +8,13 @@ declare const __propDef: {
8
8
  slots: {
9
9
  default: {
10
10
  builder: {
11
- value: number;
11
+ value: number | null;
12
12
  max: number;
13
13
  role: string;
14
14
  'aria-valuemin': number;
15
15
  'aria-valuemax': number;
16
- 'aria-valuenow': number;
17
- 'data-value': number;
16
+ 'aria-valuenow': number | null;
17
+ 'data-value': number | null;
18
18
  'data-state': string;
19
19
  'data-max': number;
20
20
  } & {
package/dist/bits/progress/ctx.d.ts CHANGED
@@ -5,32 +5,32 @@ export declare function setCtx(props: CreateProgressProps): {
5
5
  getAttrs: (part: "root") => Record<string, string>;
6
6
  elements: {
7
7
  root: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
8
- update: (updater: import("svelte/store").Updater<number>, sideEffect?: ((newValue: number) => void) | undefined) => void;
9
- set: (this: void, value: number) => void;
10
- subscribe(this: void, run: import("svelte/store").Subscriber<number>, invalidate?: import("svelte/store").Invalidator<number> | undefined): import("svelte/store").Unsubscriber;
11
- }, import("svelte/store").Writable<number>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $max]: [number, number]) => {
12
- value: number;
8
+ update: (updater: import("svelte/store").Updater<number | null>, sideEffect?: ((newValue: number | null) => void) | undefined) => void;
9
+ set: (this: void, value: number | null) => void;
10
+ subscribe(this: void, run: import("svelte/store").Subscriber<number | null>, invalidate?: import("svelte/store").Invalidator<number | null> | undefined): import("svelte/store").Unsubscriber;
11
+ }, import("svelte/store").Writable<number>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $max]: [number | null, number]) => {
12
+ value: number | null;
13
13
  max: number;
14
14
  role: string;
15
15
  'aria-valuemin': number;
16
16
  'aria-valuemax': number;
17
- 'aria-valuenow': number;
18
- 'data-value': number;
17
+ 'aria-valuenow': number | null;
18
+ 'data-value': number | null;
19
19
  'data-state': string;
20
20
  'data-max': number;
21
21
  }, string>;
22
22
  };
23
23
  states: {
24
24
  value: {
25
- update: (updater: import("svelte/store").Updater<number>, sideEffect?: ((newValue: number) => void) | undefined) => void;
26
- set: (this: void, value: number) => void;
27
- subscribe(this: void, run: import("svelte/store").Subscriber<number>, invalidate?: import("svelte/store").Invalidator<number> | undefined): import("svelte/store").Unsubscriber;
25
+ update: (updater: import("svelte/store").Updater<number | null>, sideEffect?: ((newValue: number | null) => void) | undefined) => void;
26
+ set: (this: void, value: number | null) => void;
27
+ subscribe(this: void, run: import("svelte/store").Subscriber<number | null>, invalidate?: import("svelte/store").Invalidator<number | null> | undefined): import("svelte/store").Unsubscriber;
28
28
  };
29
29
  };
30
30
  options: import("@melt-ui/svelte/internal/helpers").ToWritableStores<Omit<{
31
- defaultValue: number;
32
- value?: import("svelte/store").Writable<number> | undefined;
33
- onValueChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<number> | undefined;
31
+ defaultValue: number | null;
32
+ value?: import("svelte/store").Writable<number | null> | undefined;
33
+ onValueChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<number | null> | undefined;
34
34
  max: number;
35
35
  }, "value">>;
36
36
  };
package/dist/bits/select/components/select.svelte CHANGED
@@ -1,6 +1,7 @@
1
1
  <script context="module"></script>
2
2
 
3
- <script generics="T, Multiple extends boolean = false">import { derived } from "svelte/store";
3
+ <script generics="T, Multiple extends boolean = false">import { arraysAreEqual } from "../../../internal/arrays.js";
4
+ import { derived } from "svelte/store";
4
5
  import { setCtx } from "../ctx.js";
5
6
  export let required = void 0;
6
7
  export let disabled = void 0;
@@ -40,9 +41,10 @@ const {
40
41
  defaultOpen: open,
41
42
  onSelectedChange: ({ next }) => {
42
43
  if (Array.isArray(next)) {
43
- if (JSON.stringify(next) !== JSON.stringify(selected)) {
44
+ if (!Array.isArray(selected) || !arraysAreEqual(selected, next)) {
44
45
  onSelectedChange?.(next);
45
46
  selected = next;
47
+ return next;
46
48
  }
47
49
  return next;
48
50
  }
package/dist/bits/toggle-group/components/toggle-group.svelte CHANGED
@@ -1,4 +1,5 @@
1
- <script>import { melt } from "@melt-ui/svelte";
1
+ <script>import { arraysAreEqual } from "../../../internal/arrays.js";
2
+ import { melt } from "@melt-ui/svelte";
2
3
  import { setCtx } from "../ctx.js";
3
4
  export let type = "single";
4
5
  export let disabled = void 0;
@@ -21,9 +22,10 @@ const {
21
22
  orientation,
22
23
  onValueChange: ({ next }) => {
23
24
  if (Array.isArray(next)) {
24
- if (JSON.stringify(next) !== JSON.stringify(value)) {
25
+ if (!Array.isArray(value) || !arraysAreEqual(value, next)) {
25
26
  onValueChange?.(next);
26
27
  value = next;
28
+ return next;
27
29
  }
28
30
  return next;
29
31
  }
package/dist/bits/tooltip/components/tooltip-content.svelte.d.ts CHANGED
@@ -13,6 +13,7 @@ declare class __sveltets_Render<T extends Transition, In extends Transition, Out
13
13
  style: string;
14
14
  id: string;
15
15
  'data-portal': string | undefined;
16
+ 'data-state': string;
16
17
  } & {
17
18
  [x: `data-melt-${string}`]: "";
18
19
  } & {
package/dist/bits/tooltip/components/tooltip-trigger.svelte.d.ts CHANGED
@@ -7,6 +7,7 @@ declare const __propDef: {
7
7
  builder: {
8
8
  'aria-describedby': string;
9
9
  id: string;
10
+ 'data-state': string;
10
11
  } & {
11
12
  [x: `data-melt-${string}`]: "";
12
13
  } & {
package/dist/bits/tooltip/ctx.d.ts CHANGED
@@ -11,17 +11,27 @@ export declare function setCtx(props: CreateTooltipProps): {
11
11
  trigger: string;
12
12
  }>;
13
13
  elements: {
14
- trigger: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[Writable<string>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "blur" | "focus" | "pointerdown" | "pointerenter" | "pointerleave">, ([$contentId, $triggerId]: [string, string]) => {
14
+ trigger: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[Writable<string>, Writable<string>, {
15
+ update: (updater: import("svelte/store").Updater<boolean>, sideEffect?: ((newValue: boolean) => void) | undefined) => void;
16
+ set: (this: void, value: boolean) => void;
17
+ subscribe(this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean> | undefined): import("svelte/store").Unsubscriber;
18
+ }], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "blur" | "focus" | "pointerdown" | "pointerenter" | "pointerleave">, ([$contentId, $triggerId, $open]: [string, string, boolean]) => {
15
19
  'aria-describedby': string;
16
20
  id: string;
21
+ 'data-state': string;
17
22
  }, string>;
18
- content: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>, Writable<string | HTMLElement | null>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"pointerdown" | "pointerenter">, ([$isVisible, $portal, $contentId]: [boolean, string | HTMLElement | null, string]) => {
23
+ content: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>, {
24
+ update: (updater: import("svelte/store").Updater<boolean>, sideEffect?: ((newValue: boolean) => void) | undefined) => void;
25
+ set: (this: void, value: boolean) => void;
26
+ subscribe(this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean> | undefined): import("svelte/store").Unsubscriber;
27
+ }, Writable<string | HTMLElement | null>, Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"pointerdown" | "pointerenter">, ([$isVisible, $open, $portal, $contentId]: [boolean, boolean, string | HTMLElement | null, string]) => {
19
28
  role: string;
20
29
  hidden: boolean | undefined;
21
30
  tabindex: number;
22
31
  style: string;
23
32
  id: string;
24
33
  'data-portal': string | undefined;
34
+ 'data-state': string;
25
35
  }, string>;
26
36
  arrow: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<Writable<number>, import("svelte/action").Action<any, any, Record<never, any>>, ($arrowSize: number) => {
27
37
  'data-arrow': boolean;
package/dist/internal/arrays.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare function arraysAreEqual<T extends Array<unknown>>(arr1: T, arr2: T): boolean;
package/dist/internal/arrays.js ADDED
@@ -0,0 +1,6 @@
1
+ export function arraysAreEqual(arr1, arr2) {
2
+ if (arr1.length !== arr2.length) {
3
+ return false;
4
+ }
5
+ return arr1.every((value, index) => value === arr2[index]);
6
+ }
package/dist/shared/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { DateValue } from "@internationalized/date";
2
- import type { Month, Page, PageItem, Ellipsis } from "@melt-ui/svelte";
2
+ import type { Month, Page, PageItem, Ellipsis, EditableSegmentPart } from "@melt-ui/svelte";
3
3
  export type Selected<Value> = {
4
4
  value: Value;
5
5
  label?: string;
@@ -11,4 +11,4 @@ export type DateRange = {
11
11
  export type SegmentPart = "month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod" | "timeZoneName" | "literal";
12
12
  export type FocusTarget = string | HTMLElement | SVGElement | null;
13
13
  export type FocusProp = FocusTarget | ((defaultEl?: HTMLElement | null) => FocusTarget);
14
- export type { Month, Page, PageItem, Ellipsis };
14
+ export type { Month, Page, PageItem, Ellipsis, EditableSegmentPart };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bits-ui",
3
- "version": "0.13.6",
3
+ "version": "0.14.0",
4
4
  "license": "MIT",
5
5
  "repository": "github:huntabyte/bits-ui",
6
6
  "exports": {
@@ -74,7 +74,7 @@
74
74
  "type": "module",
75
75
  "dependencies": {
76
76
  "@internationalized/date": "^3.5.1",
77
- "@melt-ui/svelte": "0.67.0",
77
+ "@melt-ui/svelte": "0.68.0",
78
78
  "nanoid": "^5.0.4"
79
79
  },
80
80
  "peerDependencies": {