bits-ui 0.11.3 → 0.11.4

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 (44) hide show
  1. package/dist/bits/accordion/components/accordion.svelte +9 -1
  2. package/dist/bits/calendar/components/calendar-day.svelte +7 -8
  3. package/dist/bits/calendar/components/calendar-heading.svelte +2 -7
  4. package/dist/bits/calendar/components/calendar.svelte +13 -9
  5. package/dist/bits/calendar/components/calendar.svelte.d.ts +2 -2
  6. package/dist/bits/checkbox/components/checkbox-indicator.svelte +2 -8
  7. package/dist/bits/checkbox/components/checkbox-indicator.svelte.d.ts +2 -2
  8. package/dist/bits/date-field/components/date-field-input.svelte +2 -7
  9. package/dist/bits/date-field/components/date-field.svelte +1 -6
  10. package/dist/bits/date-picker/components/date-picker-calendar.svelte +2 -8
  11. package/dist/bits/date-picker/components/date-picker-day.svelte +7 -8
  12. package/dist/bits/date-picker/components/date-picker-field.svelte +1 -6
  13. package/dist/bits/date-picker/components/date-picker-field.svelte.d.ts +1 -1
  14. package/dist/bits/date-picker/components/date-picker-heading.svelte +2 -7
  15. package/dist/bits/date-picker/components/date-picker-input.svelte +2 -7
  16. package/dist/bits/date-picker/components/date-picker-input.svelte.d.ts +0 -16
  17. package/dist/bits/date-picker/components/date-picker.svelte +1 -6
  18. package/dist/bits/date-picker/components/date-picker.svelte.d.ts +1 -1
  19. package/dist/bits/date-range-field/components/date-range-field-input.svelte +5 -8
  20. package/dist/bits/date-range-field/components/date-range-field.svelte +5 -8
  21. package/dist/bits/date-range-picker/components/date-range-picker-calendar.svelte +2 -8
  22. package/dist/bits/date-range-picker/components/date-range-picker-day.svelte +5 -7
  23. package/dist/bits/date-range-picker/components/date-range-picker-field.svelte +1 -5
  24. package/dist/bits/date-range-picker/components/date-range-picker-heading.svelte +2 -7
  25. package/dist/bits/date-range-picker/components/date-range-picker-input.svelte +2 -7
  26. package/dist/bits/date-range-picker/components/date-range-picker.svelte +6 -8
  27. package/dist/bits/date-range-picker/components/date-range-picker.svelte.d.ts +1 -1
  28. package/dist/bits/menu/components/menu-checkbox-indicator.svelte +2 -7
  29. package/dist/bits/menu/components/menu-radio-indicator.svelte +4 -7
  30. package/dist/bits/menu/components/menu-radio-indicator.svelte.d.ts +1 -1
  31. package/dist/bits/menubar/components/menubar.svelte +2 -7
  32. package/dist/bits/radio-group/components/radio-group-item-indicator.svelte +4 -7
  33. package/dist/bits/range-calendar/components/range-calendar-day.svelte +5 -7
  34. package/dist/bits/range-calendar/components/range-calendar-heading.svelte +2 -7
  35. package/dist/bits/range-calendar/components/range-calendar.svelte +14 -10
  36. package/dist/bits/select/components/select-item-indicator.svelte +2 -7
  37. package/dist/bits/select/components/select-item-indicator.svelte.d.ts +1 -1
  38. package/dist/bits/select/components/select-value.svelte +1 -3
  39. package/dist/bits/slider/components/slider.svelte +2 -4
  40. package/dist/bits/switch/components/switch-thumb.svelte +1 -3
  41. package/dist/bits/switch/components/switch-thumb.svelte.d.ts +1 -1
  42. package/dist/bits/tabs/components/tabs.svelte +2 -7
  43. package/dist/bits/toggle-group/components/toggle-group.svelte +5 -3
  44. package/package.json +1 -1
@@ -14,6 +14,13 @@ const {
14
14
  disabled,
15
15
  defaultValue: value,
16
16
  onValueChange: ({ next }) => {
17
+ if (Array.isArray(next)) {
18
+ if (JSON.stringify(next) !== JSON.stringify(value)) {
19
+ onValueChange?.(next);
20
+ value = next;
21
+ }
22
+ return next;
23
+ }
17
24
  if (value !== next) {
18
25
  onValueChange?.(next);
19
26
  value = next;
@@ -23,7 +30,8 @@ const {
23
30
  });
24
31
  const attrs = getAttrs("root");
25
32
  $:
26
- localValue.set(value);
33
+ value !== void 0 && // eslint-disable-next-line @typescript-eslint/no-explicit-any
34
+ localValue.set(Array.isArray(value) ? [...value] : value);
27
35
  $:
28
36
  updateOption("multiple", multiple);
29
37
  $:
@@ -15,19 +15,18 @@ $:
15
15
  $:
16
16
  Object.assign(builder, attrs);
17
17
  $:
18
- slotProps = {
19
- builder,
20
- disabled: $isDateDisabled(date),
21
- unavailable: $isDateUnavailable(date),
22
- selected: $isDateSelected(date)
23
- };
18
+ disabled = $isDateDisabled(date);
19
+ $:
20
+ unavailable = $isDateUnavailable(date);
21
+ $:
22
+ selected = $isDateSelected(date);
24
23
  </script>
25
24
 
26
25
  {#if asChild}
27
- <slot {...slotProps} />
26
+ <slot {builder} {disabled} {unavailable} {selected} />
28
27
  {:else}
29
28
  <div {...builder} use:builder.action {...$$restProps} on:m-click={dispatch}>
30
- <slot {...slotProps}>
29
+ <slot {builder} {disabled} {unavailable} {selected}>
31
30
  {date.day}
32
31
  </slot>
33
32
  </div>
@@ -10,18 +10,13 @@ $:
10
10
  builder = $heading;
11
11
  $:
12
12
  Object.assign(builder, attrs);
13
- $:
14
- slotProps = {
15
- builder,
16
- headingValue: $headingValue
17
- };
18
13
  </script>
19
14
 
20
15
  {#if asChild}
21
- <slot {...slotProps} />
16
+ <slot {builder} headingValue={$headingValue} />
22
17
  {:else}
23
18
  <div {...builder} use:builder.action {...$$restProps}>
24
- <slot {...slotProps}>
19
+ <slot {builder} headingValue={$headingValue}>
25
20
  {$headingValue}
26
21
  </slot>
27
22
  </div>
@@ -67,6 +67,13 @@ const {
67
67
  return next;
68
68
  },
69
69
  onValueChange: ({ next }) => {
70
+ if (Array.isArray(next)) {
71
+ if (JSON.stringify(next) !== JSON.stringify(value)) {
72
+ onValueChange?.(next);
73
+ value = next;
74
+ }
75
+ return next;
76
+ }
70
77
  if (value !== next) {
71
78
  onValueChange?.(next);
72
79
  value = next;
@@ -79,7 +86,10 @@ $:
79
86
  ids.calendar.set(id);
80
87
  }
81
88
  $:
82
- value !== void 0 && localValue.set(value);
89
+ value !== void 0 && localValue.set(
90
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
91
+ Array.isArray(value) ? [...value] : value
92
+ );
83
93
  $:
84
94
  placeholder !== void 0 && localPlaceholder.set(placeholder);
85
95
  $:
@@ -116,16 +126,10 @@ $:
116
126
  $:
117
127
  Object.assign(builder, attrs);
118
128
  const dispatch = createDispatcher();
119
- $:
120
- slotProps = {
121
- builder,
122
- months: $months,
123
- weekdays: $weekdays
124
- };
125
129
  </script>
126
130
 
127
131
  {#if asChild}
128
- <slot {...slotProps} />
132
+ <slot months={$months} weekdays={$weekdays} {builder} />
129
133
  {:else}
130
134
  <div
131
135
  {...builder} use:builder.action
@@ -133,6 +137,6 @@ $:
133
137
  on:m-keydown={dispatch}
134
138
  bind:this={el}
135
139
  >
136
- <slot {...slotProps} />
140
+ <slot months={$months} weekdays={$weekdays} {builder} />
137
141
  </div>
138
142
  {/if}
@@ -7,6 +7,8 @@ declare class __sveltets_Render<Multiple extends boolean> {
7
7
  };
8
8
  slots(): {
9
9
  default: {
10
+ months: import("@melt-ui/svelte/index.js").Month<import("@internationalized/date").DateValue>[];
11
+ weekdays: string[];
10
12
  builder: {
11
13
  id: string;
12
14
  role: string;
@@ -19,8 +21,6 @@ declare class __sveltets_Render<Multiple extends boolean> {
19
21
  } & {
20
22
  action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">;
21
23
  };
22
- months: import("@melt-ui/svelte/index.js").Month<import("@internationalized/date").DateValue>[];
23
- weekdays: string[];
24
24
  };
25
25
  };
26
26
  }
@@ -16,18 +16,12 @@ $:
16
16
  ...getAttrs("indicator"),
17
17
  "data-state": getStateAttr($checked)
18
18
  };
19
- $:
20
- slotProps = {
21
- isChecked: $isChecked,
22
- isIndeterminate: $isIndeterminate,
23
- attrs
24
- };
25
19
  </script>
26
20
 
27
21
  {#if asChild}
28
- <slot {...slotProps} />
22
+ <slot {attrs} isChecked={$isChecked} isIndeterminate={$isIndeterminate} />
29
23
  {:else}
30
24
  <div {...$$restProps} {...attrs}>
31
- <slot {...slotProps} />
25
+ <slot {attrs} isChecked={$isChecked} isIndeterminate={$isIndeterminate} />
32
26
  </div>
33
27
  {/if}
@@ -7,11 +7,11 @@ declare const __propDef: {
7
7
  };
8
8
  slots: {
9
9
  default: {
10
- isChecked: boolean;
11
- isIndeterminate: boolean;
12
10
  attrs: {
13
11
  "data-state": string;
14
12
  };
13
+ isChecked: boolean;
14
+ isIndeterminate: boolean;
15
15
  };
16
16
  };
17
17
  };
@@ -16,17 +16,12 @@ $:
16
16
  builder = $field;
17
17
  $:
18
18
  Object.assign(builder, attrs);
19
- $:
20
- slotProps = {
21
- builder,
22
- segments: $segmentContents
23
- };
24
19
  </script>
25
20
 
26
21
  {#if asChild}
27
- <slot {...slotProps} />
22
+ <slot {builder} segments={$segmentContents} />
28
23
  {:else}
29
24
  <div {...builder} use:builder.action {...$$restProps}>
30
- <slot {...slotProps} />
25
+ <slot {builder} segments={$segmentContents} />
31
26
  </div>
32
27
  {/if}
@@ -123,11 +123,6 @@ $:
123
123
  updateOption("minValue", minValue);
124
124
  $:
125
125
  updateOption("readonly", readonly);
126
- $:
127
- slotProps = {
128
- isInvalid: $localIsInvalid,
129
- ids: $idValues
130
- };
131
126
  </script>
132
127
 
133
- <slot {...slotProps} />
128
+ <slot isInvalid={$localIsInvalid} ids={$idValues} />
@@ -18,18 +18,12 @@ $:
18
18
  builder = $calendar;
19
19
  $:
20
20
  Object.assign(builder, attrs);
21
- $:
22
- slotProps = {
23
- builder,
24
- months: $months,
25
- weekdays: $weekdays
26
- };
27
21
  </script>
28
22
 
29
23
  {#if asChild}
30
- <slot {...slotProps} />
24
+ <slot {builder} months={$months} weekdays={$weekdays} />
31
25
  {:else}
32
26
  <div {...builder} use:builder.action {...$$restProps} on:m-keydown={dispatch}>
33
- <slot {...slotProps} />
27
+ <slot {builder} months={$months} weekdays={$weekdays} />
34
28
  </div>
35
29
  {/if}
@@ -15,19 +15,18 @@ $:
15
15
  $:
16
16
  Object.assign(builder, attrs);
17
17
  $:
18
- slotProps = {
19
- builder,
20
- disabled: $isDateDisabled(date),
21
- unavailable: $isDateUnavailable(date),
22
- selected: $isDateSelected(date)
23
- };
18
+ disabled = $isDateDisabled(date);
19
+ $:
20
+ unavailable = $isDateUnavailable(date);
21
+ $:
22
+ selected = $isDateSelected(date);
24
23
  </script>
25
24
 
26
25
  {#if asChild}
27
- <slot {...slotProps} />
26
+ <slot {builder} {disabled} {unavailable} {selected} />
28
27
  {:else}
29
28
  <div {...builder} use:builder.action {...$$restProps} on:m-click={dispatch}>
30
- <slot {...slotProps}>
29
+ <slot {builder} {disabled} {unavailable} {selected}>
31
30
  {date.day}
32
31
  </slot>
33
32
  </div>
@@ -123,11 +123,6 @@ $:
123
123
  updateOption("minValue", minValue);
124
124
  $:
125
125
  updateOption("readonly", readonly);
126
- $:
127
- slotProps = {
128
- isInvalid: $localIsInvalid,
129
- ids: $idValues
130
- };
131
126
  </script>
132
127
 
133
- <slot {...slotProps} />
128
+ <slot ids={$idValues} isInvalid={$localIsInvalid} />
@@ -41,7 +41,6 @@ declare const __propDef: {
41
41
  };
42
42
  slots: {
43
43
  default: {
44
- isInvalid: boolean;
45
44
  ids: {
46
45
  day: string;
47
46
  description: string;
@@ -56,6 +55,7 @@ declare const __propDef: {
56
55
  label: string;
57
56
  timeZoneName: string;
58
57
  };
58
+ isInvalid: boolean;
59
59
  };
60
60
  };
61
61
  };
@@ -10,18 +10,13 @@ $:
10
10
  builder = $heading;
11
11
  $:
12
12
  Object.assign(builder, attrs);
13
- $:
14
- slotProps = {
15
- builder,
16
- headingValue: $headingValue
17
- };
18
13
  </script>
19
14
 
20
15
  {#if asChild}
21
- <slot {...slotProps} />
16
+ <slot {builder} headingValue={$headingValue} />
22
17
  {:else}
23
18
  <div {...builder} use:builder.action {...$$restProps}>
24
- <slot {...slotProps}>
19
+ <slot {builder} headingValue={$headingValue}>
25
20
  {$headingValue}
26
21
  </slot>
27
22
  </div>
@@ -16,17 +16,12 @@ $:
16
16
  builder = $field;
17
17
  $:
18
18
  Object.assign(builder, attrs);
19
- $:
20
- slotProps = {
21
- builder,
22
- segments: $segmentContents
23
- };
24
19
  </script>
25
20
 
26
21
  {#if asChild}
27
- <slot {...slotProps} />
22
+ <slot builder segments={$segmentContents} />
28
23
  {:else}
29
24
  <div {...builder} use:builder.action {...$$restProps}>
30
- <slot {...slotProps} />
25
+ <slot builder segments={$segmentContents} />
31
26
  </div>
32
27
  {/if}
@@ -7,22 +7,6 @@ declare const __propDef: {
7
7
  };
8
8
  slots: {
9
9
  default: {
10
- builder: {
11
- role: string;
12
- id: string;
13
- 'aria-labelledby': string;
14
- 'aria-describedby': string;
15
- 'aria-disabled': string | undefined;
16
- 'aria-readonly': string | undefined;
17
- 'data-invalid': string | undefined;
18
- 'data-disabled': string | undefined;
19
- } & {
20
- [x: `data-melt-${string}`]: "";
21
- } & {
22
- action: <Node_2 extends unknown>() => {
23
- destroy(): void;
24
- };
25
- };
26
10
  segments: {
27
11
  part: import("@melt-ui/svelte/index.js").SegmentPart;
28
12
  value: string;
@@ -158,11 +158,6 @@ $:
158
158
  updateOption("calendarLabel", calendarLabel);
159
159
  $:
160
160
  updateOption("weekdayFormat", weekdayFormat);
161
- $:
162
- slotProps = {
163
- isInvalid: $localIsInvalid,
164
- ids: $idValues
165
- };
166
161
  </script>
167
162
 
168
- <slot {...slotProps} />
163
+ <slot ids={$idValues} isInvalid={$localIsInvalid} />
@@ -41,7 +41,6 @@ declare const __propDef: {
41
41
  };
42
42
  slots: {
43
43
  default: {
44
- isInvalid: boolean;
45
44
  ids: {
46
45
  day: string;
47
46
  description: string;
@@ -58,6 +57,7 @@ declare const __propDef: {
58
57
  calendar: string;
59
58
  content: string;
60
59
  };
60
+ isInvalid: boolean;
61
61
  };
62
62
  };
63
63
  };
@@ -17,19 +17,16 @@ $:
17
17
  $:
18
18
  Object.assign(builder, attrs);
19
19
  $:
20
- slotProps = {
21
- builder,
22
- segments: {
23
- start: $segmentContents.start,
24
- end: $segmentContents.end
25
- }
20
+ segments = {
21
+ start: $segmentContents.start,
22
+ end: $segmentContents.end
26
23
  };
27
24
  </script>
28
25
 
29
26
  {#if asChild}
30
- <slot {...slotProps} />
27
+ <slot {builder} {segments} />
31
28
  {:else}
32
29
  <div {...builder} use:builder.action {...$$restProps}>
33
- <slot {...slotProps} />
30
+ <slot {builder} {segments} />
34
31
  </div>
35
32
  {/if}
@@ -175,14 +175,11 @@ $:
175
175
  $:
176
176
  updateOption("readonly", readonly);
177
177
  $:
178
- slotProps = {
179
- isInvalid: $localIsInvalid,
180
- ids: {
181
- start: $startIdValues,
182
- end: $endIdValues,
183
- field: $fieldIdValues
184
- }
178
+ idSlotProp = {
179
+ start: $startIdValues,
180
+ end: $endIdValues,
181
+ field: $fieldIdValues
185
182
  };
186
183
  </script>
187
184
 
188
- <slot {...slotProps} />
185
+ <slot isInvalid={$localIsInvalid} ids={idSlotProp} />
@@ -16,18 +16,12 @@ $:
16
16
  builder = $calendar;
17
17
  $:
18
18
  Object.assign(builder, attrs);
19
- $:
20
- slotProps = {
21
- builder,
22
- months: $months,
23
- weekdays: $weekdays
24
- };
25
19
  </script>
26
20
 
27
21
  {#if asChild}
28
- <slot {...slotProps} />
22
+ <slot {builder} months={$months} weekdays={$weekdays} />
29
23
  {:else}
30
24
  <div {...builder} use:builder.action {...$$restProps}>
31
- <slot {...slotProps} />
25
+ <slot {builder} months={$months} weekdays={$weekdays} />
32
26
  </div>
33
27
  {/if}
@@ -13,18 +13,16 @@ $:
13
13
  $:
14
14
  Object.assign(builder, attrs);
15
15
  $:
16
- slotProps = {
17
- builder,
18
- disabled: $isDateDisabled(date),
19
- unavailable: $isDateUnavailable(date)
20
- };
16
+ disabled = $isDateDisabled(date);
17
+ $:
18
+ unavailable = $isDateUnavailable(date);
21
19
  </script>
22
20
 
23
21
  {#if asChild}
24
- <slot {...slotProps} />
22
+ <slot {builder} {disabled} {unavailable} />
25
23
  {:else}
26
24
  <div {...builder} use:builder.action {...$$restProps}>
27
- <slot {...slotProps}>
25
+ <slot {builder} {disabled} {unavailable}>
28
26
  {date.day}
29
27
  </slot>
30
28
  </div>
@@ -68,10 +68,6 @@ $:
68
68
  updateOption("minValue", minValue);
69
69
  $:
70
70
  updateOption("readonly", readonly);
71
- $:
72
- slotProps = {
73
- isInvalid: $localIsInvalid
74
- };
75
71
  </script>
76
72
 
77
- <slot {...slotProps} />
73
+ <slot isInvalid={$localIsInvalid} />
@@ -10,18 +10,13 @@ $:
10
10
  builder = $heading;
11
11
  $:
12
12
  Object.assign(builder, attrs);
13
- $:
14
- slotProps = {
15
- builder,
16
- headingValue: $headingValue
17
- };
18
13
  </script>
19
14
 
20
15
  {#if asChild}
21
- <slot {...slotProps} />
16
+ <slot {builder} headingValue={$headingValue} />
22
17
  {:else}
23
18
  <div {...builder} use:builder.action {...$$restProps}>
24
- <slot {...slotProps}>
19
+ <slot {builder} headingValue={$headingValue}>
25
20
  {$headingValue}
26
21
  </slot>
27
22
  </div>
@@ -16,17 +16,12 @@ $:
16
16
  builder = $field;
17
17
  $:
18
18
  Object.assign(builder, attrs);
19
- $:
20
- slotProps = {
21
- builder,
22
- segments: $segmentContents
23
- };
24
19
  </script>
25
20
 
26
21
  {#if asChild}
27
- <slot {...slotProps} />
22
+ <slot {builder} segments={$segmentContents} />
28
23
  {:else}
29
24
  <div {...builder} use:builder.action {...$$restProps}>
30
- <slot {...slotProps} />
25
+ <slot {builder} segments={$segmentContents} />
31
26
  </div>
32
27
  {/if}
@@ -211,13 +211,11 @@ $:
211
211
  updateOption("calendarLabel", calendarLabel);
212
212
  $:
213
213
  updateOption("weekdayFormat", weekdayFormat);
214
- $:
215
- slotProps = {
216
- isInvalid: $localIsInvalid,
217
- ids: $idValues,
218
- startValue: $localStartValue,
219
- endValue: $endValue
220
- };
221
214
  </script>
222
215
 
223
- <slot {...slotProps} />
216
+ <slot
217
+ ids={$idValues}
218
+ isInvalid={$localIsInvalid}
219
+ startValue={$localStartValue}
220
+ endValue={$endValue}
221
+ />
@@ -41,7 +41,6 @@ declare const __propDef: {
41
41
  };
42
42
  slots: {
43
43
  default: {
44
- isInvalid: boolean;
45
44
  ids: {
46
45
  field: string;
47
46
  description: string;
@@ -71,6 +70,7 @@ declare const __propDef: {
71
70
  timeZoneName: string;
72
71
  };
73
72
  };
73
+ isInvalid: boolean;
74
74
  startValue: import("@internationalized/date").DateValue | undefined;
75
75
  endValue: import("@internationalized/date").DateValue | undefined;
76
76
  };
@@ -2,19 +2,14 @@
2
2
  export let asChild = false;
3
3
  const checked = getCheckboxIndicator();
4
4
  const attrs = getAttrs("checkbox-indicator");
5
- $:
6
- slotProps = {
7
- attrs,
8
- checked: $checked
9
- };
10
5
  </script>
11
6
 
12
7
  {#if asChild}
13
- <slot {...slotProps} />
8
+ <slot {attrs} checked={$checked} />
14
9
  {:else}
15
10
  <div {...$$restProps} {...attrs}>
16
11
  {#if $checked}
17
- <slot {...slotProps} />
12
+ <slot {attrs} checked={$checked} />
18
13
  {/if}
19
14
  </div>
20
15
  {/if}
@@ -3,18 +3,15 @@ export let asChild = false;
3
3
  const { isChecked, value } = getRadioIndicator();
4
4
  const attrs = getAttrs("radio-indicator");
5
5
  $:
6
- slotProps = {
7
- checked: $isChecked(value),
8
- attrs
9
- };
6
+ checked = $isChecked(value);
10
7
  </script>
11
8
 
12
9
  {#if asChild}
13
- <slot {...slotProps} />
10
+ <slot {attrs} {checked} />
14
11
  {:else}
15
12
  <div {...$$restProps} {...attrs}>
16
- {#if $isChecked(value)}
17
- <slot {...slotProps} />
13
+ {#if checked}
14
+ <slot {attrs} {checked} />
18
15
  {/if}
19
16
  </div>
20
17
  {/if}
@@ -7,8 +7,8 @@ declare const __propDef: {
7
7
  };
8
8
  slots: {
9
9
  default: {
10
- checked: boolean;
11
10
  attrs: Record<string, string>;
11
+ checked: boolean;
12
12
  };
13
13
  };
14
14
  };
@@ -26,17 +26,12 @@ $:
26
26
  builder = $menubar;
27
27
  $:
28
28
  Object.assign(builder, attrs);
29
- $:
30
- slotProps = {
31
- builder,
32
- ids: $idValues
33
- };
34
29
  </script>
35
30
 
36
31
  {#if asChild}
37
- <slot {...slotProps} />
32
+ <slot {builder} ids={$idValues} />
38
33
  {:else}
39
34
  <div {...builder} use:builder.action {...$$restProps}>
40
- <slot {...slotProps} />
35
+ <slot {builder} ids={$idValues} />
41
36
  </div>
42
37
  {/if}
@@ -3,18 +3,15 @@ export let asChild = false;
3
3
  const { isChecked, value } = getRadioIndicator();
4
4
  const attrs = getAttrs("item-indicator");
5
5
  $:
6
- slotProps = {
7
- checked: $isChecked(value),
8
- attrs
9
- };
6
+ checked = $isChecked(value);
10
7
  </script>
11
8
 
12
9
  {#if asChild}
13
- <slot {...slotProps} />
10
+ <slot {checked} {attrs} />
14
11
  {:else}
15
12
  <div {...attrs} {...$$restProps}>
16
- {#if $isChecked(value)}
17
- <slot {...slotProps} />
13
+ {#if checked}
14
+ <slot {checked} {attrs} />
18
15
  {/if}
19
16
  </div>
20
17
  {/if}
@@ -15,15 +15,13 @@ $:
15
15
  $:
16
16
  Object.assign(builder, attrs);
17
17
  $:
18
- slotProps = {
19
- builder,
20
- disabled: $isDateDisabled(date),
21
- unavailable: $isDateUnavailable(date)
22
- };
18
+ disabled = $isDateDisabled(date);
19
+ $:
20
+ unavailable = $isDateUnavailable(date);
23
21
  </script>
24
22
 
25
23
  {#if asChild}
26
- <slot {...slotProps} />
24
+ <slot {builder} {disabled} {unavailable} />
27
25
  {:else}
28
26
  <div
29
27
  {...builder} use:builder.action
@@ -32,7 +30,7 @@ $:
32
30
  on:m-focusin={dispatch}
33
31
  on:m-mouseenter={dispatch}
34
32
  >
35
- <slot {...slotProps}>
33
+ <slot {builder} {disabled} {unavailable}>
36
34
  {date.day}
37
35
  </slot>
38
36
  </div>
@@ -10,18 +10,13 @@ $:
10
10
  builder = $heading;
11
11
  $:
12
12
  Object.assign(builder, attrs);
13
- $:
14
- slotProps = {
15
- builder,
16
- headingValue: $headingValue
17
- };
18
13
  </script>
19
14
 
20
15
  {#if asChild}
21
- <slot {...slotProps} />
16
+ <slot {builder} headingValue={$headingValue} />
22
17
  {:else}
23
18
  <div {...builder} use:builder.action {...$$restProps}>
24
- <slot {...slotProps}>
19
+ <slot {builder} headingValue={$headingValue}>
25
20
  {$headingValue}
26
21
  </slot>
27
22
  </div>
@@ -115,18 +115,16 @@ $:
115
115
  builder = $calendar;
116
116
  $:
117
117
  Object.assign(builder, attrs);
118
- $:
119
- slotProps = {
120
- builder,
121
- months: $months,
122
- weekdays: $weekdays,
123
- startValue: $localStartValue,
124
- endValue: $endValue
125
- };
126
118
  </script>
127
119
 
128
120
  {#if asChild}
129
- <slot {...slotProps} />
121
+ <slot
122
+ {builder}
123
+ months={$months}
124
+ weekdays={$weekdays}
125
+ startValue={$localStartValue}
126
+ endValue={$endValue}
127
+ />
130
128
  {:else}
131
129
  <div
132
130
  {...builder} use:builder.action
@@ -134,6 +132,12 @@ $:
134
132
  on:m-keydown={dispatch}
135
133
  bind:this={el}
136
134
  >
137
- <slot {...slotProps} />
135
+ <slot
136
+ {builder}
137
+ months={$months}
138
+ weekdays={$weekdays}
139
+ startValue={$localStartValue}
140
+ endValue={$endValue}
141
+ />
138
142
  </div>
139
143
  {/if}
@@ -2,19 +2,14 @@
2
2
  export let asChild = false;
3
3
  const { isSelected, value } = getItemIndicator();
4
4
  const attrs = getAttrs("indicator");
5
- $:
6
- slotProps = {
7
- isSelected: $isSelected(value),
8
- attrs
9
- };
10
5
  </script>
11
6
 
12
7
  {#if asChild}
13
- <slot {...slotProps} />
8
+ <slot {attrs} isSelected={$isSelected(value)} />
14
9
  {:else}
15
10
  <div {...$$restProps} {...attrs}>
16
11
  {#if $isSelected(value)}
17
- <slot {...slotProps} />
12
+ <slot {attrs} isSelected={$isSelected(value)} />
18
13
  {/if}
19
14
  </div>
20
15
  {/if}
@@ -7,8 +7,8 @@ declare const __propDef: {
7
7
  };
8
8
  slots: {
9
9
  default: {
10
- isSelected: boolean;
11
10
  attrs: Record<string, string>;
11
+ isSelected: boolean;
12
12
  };
13
13
  };
14
14
  };
@@ -7,12 +7,10 @@ const {
7
7
  const attrs = getAttrs("value");
8
8
  $:
9
9
  label = $selectedLabel;
10
- $:
11
- slotProps = { label, attrs };
12
10
  </script>
13
11
 
14
12
  {#if asChild}
15
- <slot {...slotProps} />
13
+ <slot {label} {attrs} />
16
14
  {:else}
17
15
  <span {...$$restProps} {...attrs}>
18
16
  {label ? label : placeholder}
@@ -44,14 +44,12 @@ $:
44
44
  builder = $root;
45
45
  $:
46
46
  Object.assign(builder, attrs);
47
- $:
48
- slotProps = { builder, ticks: $ticks };
49
47
  </script>
50
48
 
51
49
  {#if asChild}
52
- <slot {...slotProps} />
50
+ <slot {builder} ticks={$ticks} />
53
51
  {:else}
54
52
  <span {...builder} use:builder.action {...$$restProps}>
55
- <slot {...slotProps} />
53
+ <slot {builder} ticks={$ticks} />
56
54
  </span>
57
55
  {/if}
@@ -9,12 +9,10 @@ $:
9
9
  "data-state": $checked ? "checked" : "unchecked",
10
10
  "data-checked": $checked ? "" : void 0
11
11
  };
12
- $:
13
- slotProps = { checked: $checked, attrs };
14
12
  </script>
15
13
 
16
14
  {#if asChild}
17
- <slot {...slotProps} />
15
+ <slot {attrs} checked={$checked} />
18
16
  {:else}
19
17
  <span {...$$restProps} {...attrs} />
20
18
  {/if}
@@ -7,11 +7,11 @@ declare const __propDef: {
7
7
  };
8
8
  slots: {
9
9
  default: {
10
- checked: boolean;
11
10
  attrs: {
12
11
  "data-state": string;
13
12
  "data-checked": string | undefined;
14
13
  };
14
+ checked: boolean;
15
15
  };
16
16
  };
17
17
  };
@@ -40,17 +40,12 @@ $:
40
40
  builder = $root;
41
41
  $:
42
42
  Object.assign(builder, attrs);
43
- $:
44
- slotProps = {
45
- builder,
46
- value: $localValue
47
- };
48
43
  </script>
49
44
 
50
45
  {#if asChild}
51
- <slot {...slotProps} />
46
+ <slot {builder} value={$localValue} />
52
47
  {:else}
53
48
  <div {...builder} use:builder.action {...$$restProps}>
54
- <slot {...slotProps} />
49
+ <slot {builder} value={$localValue} />
55
50
  </div>
56
51
  {/if}
@@ -19,8 +19,10 @@ const {
19
19
  orientation,
20
20
  onValueChange: ({ next }) => {
21
21
  if (Array.isArray(next)) {
22
- onValueChange?.(next);
23
- value = next;
22
+ if (JSON.stringify(next) !== JSON.stringify(value)) {
23
+ onValueChange?.(next);
24
+ value = next;
25
+ }
24
26
  return next;
25
27
  }
26
28
  if (value !== next) {
@@ -32,7 +34,7 @@ const {
32
34
  });
33
35
  const attrs = getAttrs("root");
34
36
  $:
35
- value !== void 0 && localValue.set(value);
37
+ value !== void 0 && localValue.set(Array.isArray(value) ? [...value] : value);
36
38
  $:
37
39
  updateOption("disabled", disabled);
38
40
  $:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bits-ui",
3
- "version": "0.11.3",
3
+ "version": "0.11.4",
4
4
  "license": "MIT",
5
5
  "repository": "github:huntabyte/bits-ui",
6
6
  "exports": {