bits-ui 0.10.3 → 0.11.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.
Files changed (38) hide show
  1. package/dist/bits/calendar/_export.types.d.ts +1 -1
  2. package/dist/bits/calendar/_types.d.ts +4 -4
  3. package/dist/bits/calendar/components/{calendar-date.svelte → calendar-day.svelte} +2 -2
  4. package/dist/bits/calendar/components/{calendar-date.svelte.d.ts → calendar-day.svelte.d.ts} +7 -7
  5. package/dist/bits/calendar/ctx.d.ts +1 -1
  6. package/dist/bits/calendar/ctx.js +1 -1
  7. package/dist/bits/calendar/index.d.ts +1 -1
  8. package/dist/bits/calendar/index.js +1 -1
  9. package/dist/bits/calendar/types.d.ts +3 -3
  10. package/dist/bits/date-picker/_export.types.d.ts +1 -1
  11. package/dist/bits/date-picker/components/{date-picker-date.svelte → date-picker-day.svelte} +1 -1
  12. package/dist/bits/date-picker/components/{date-picker-date.svelte.d.ts → date-picker-day.svelte.d.ts} +7 -7
  13. package/dist/bits/date-picker/index.d.ts +1 -1
  14. package/dist/bits/date-picker/index.js +1 -1
  15. package/dist/bits/date-picker/types.d.ts +2 -2
  16. package/dist/bits/date-range-picker/_export.types.d.ts +1 -1
  17. package/dist/bits/date-range-picker/_types.d.ts +17 -0
  18. package/dist/bits/date-range-picker/components/{date-range-picker-date.svelte → date-range-picker-day.svelte} +1 -1
  19. package/dist/bits/date-range-picker/components/{date-range-picker-date.svelte.d.ts → date-range-picker-day.svelte.d.ts} +6 -6
  20. package/dist/bits/date-range-picker/components/date-range-picker-field.svelte.d.ts +1 -0
  21. package/dist/bits/date-range-picker/components/date-range-picker.svelte +9 -2
  22. package/dist/bits/date-range-picker/components/date-range-picker.svelte.d.ts +3 -0
  23. package/dist/bits/date-range-picker/ctx.d.ts +4 -0
  24. package/dist/bits/date-range-picker/index.d.ts +1 -1
  25. package/dist/bits/date-range-picker/index.js +1 -1
  26. package/dist/bits/date-range-picker/types.d.ts +2 -2
  27. package/dist/bits/range-calendar/_export.types.d.ts +1 -1
  28. package/dist/bits/range-calendar/_types.d.ts +21 -4
  29. package/dist/bits/range-calendar/components/{range-calendar-date.svelte → range-calendar-day.svelte} +1 -1
  30. package/dist/bits/range-calendar/components/{range-calendar-date.svelte.d.ts → range-calendar-day.svelte.d.ts} +7 -7
  31. package/dist/bits/range-calendar/components/range-calendar.svelte +9 -2
  32. package/dist/bits/range-calendar/components/range-calendar.svelte.d.ts +2 -0
  33. package/dist/bits/range-calendar/ctx.d.ts +5 -1
  34. package/dist/bits/range-calendar/ctx.js +1 -1
  35. package/dist/bits/range-calendar/index.d.ts +1 -1
  36. package/dist/bits/range-calendar/index.js +1 -1
  37. package/dist/bits/range-calendar/types.d.ts +3 -3
  38. package/package.json +2 -2
@@ -1 +1 @@
1
- export type { Props as CalendarProps, PrevButtonProps as CalendarPrevButtonProps, NextButtonProps as CalendarNextButtonProps, HeadingProps as CalendarHeadingProps, GridProps as CalendarGridProps, CellProps as CalendarCellProps, GridRowProps as CalendarGridRowProps, GridBodyProps as CalendarGridBodyProps, HeadCellProps as CalendarHeadCellProps, GridHeadProps as CalendarGridHeadProps, HeaderProps as CalendarHeaderProps, DateProps as CalendarDateProps, Events as CalendarEvents, PrevButtonEvents as CalendarPrevButtonEvents, NextButtonEvents as CalendarNextButtonEvents, DateEvents as CalendarDateEvents } from "./types.js";
1
+ export type { Props as CalendarProps, PrevButtonProps as CalendarPrevButtonProps, NextButtonProps as CalendarNextButtonProps, HeadingProps as CalendarHeadingProps, GridProps as CalendarGridProps, CellProps as CalendarCellProps, GridRowProps as CalendarGridRowProps, GridBodyProps as CalendarGridBodyProps, HeadCellProps as CalendarHeadCellProps, GridHeadProps as CalendarGridHeadProps, HeaderProps as CalendarHeaderProps, DayProps as CalendarDayProps, Events as CalendarEvents, PrevButtonEvents as CalendarPrevButtonEvents, NextButtonEvents as CalendarNextButtonEvents, DayEvents as CalendarDayEvents } from "./types.js";
@@ -51,7 +51,7 @@ type HeadCellProps = AsChild;
51
51
  type GridProps = AsChild;
52
52
  type GridBodyProps = AsChild;
53
53
  type GridRowProps = AsChild;
54
- type BaseDateProps = Expand<{
54
+ type BaseDayProps = Expand<{
55
55
  /**
56
56
  * The date value of the cell.
57
57
  */
@@ -61,6 +61,6 @@ type BaseDateProps = Expand<{
61
61
  */
62
62
  month: DateValue;
63
63
  } & AsChild>;
64
- type CellProps = Expand<Omit<BaseDateProps, "month">>;
65
- type DateProps = Expand<BaseDateProps>;
66
- export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, HeaderProps, GridProps, GridHeadProps, HeadCellProps, GridBodyProps, GridRowProps, CellProps, DateProps };
64
+ type CellProps = Expand<Omit<BaseDayProps, "month">>;
65
+ type DayProps = Expand<BaseDayProps>;
66
+ export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, HeaderProps, GridProps, GridHeadProps, HeadCellProps, GridBodyProps, GridRowProps, CellProps, DayProps };
@@ -8,12 +8,12 @@ const {
8
8
  elements: { cell },
9
9
  helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
10
10
  } = getCtx();
11
- const attrs = getAttrs("date");
11
+ const attrs = getAttrs("day");
12
+ const dispatch = createDispatcher();
12
13
  $:
13
14
  builder = $cell(date, month);
14
15
  $:
15
16
  Object.assign(builder, attrs);
16
- const dispatch = createDispatcher();
17
17
  $:
18
18
  slotProps = {
19
19
  builder,
@@ -1,7 +1,7 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import type { DateEvents, DateProps } from "../types.js";
2
+ import type { DayEvents, DayProps } from "../types.js";
3
3
  declare const __propDef: {
4
- props: DateProps;
4
+ props: DayProps;
5
5
  slots: {
6
6
  default: {
7
7
  builder: ((cellValue: import("@internationalized/date").DateValue, monthValue: import("@internationalized/date").DateValue) => {
@@ -28,11 +28,11 @@ declare const __propDef: {
28
28
  selected: boolean;
29
29
  };
30
30
  };
31
- events: DateEvents;
31
+ events: DayEvents;
32
32
  };
33
- export type CalendarDateProps = typeof __propDef.props;
34
- export type CalendarDateEvents = typeof __propDef.events;
35
- export type CalendarDateSlots = typeof __propDef.slots;
36
- export default class CalendarDate extends SvelteComponent<CalendarDateProps, CalendarDateEvents, CalendarDateSlots> {
33
+ export type CalendarDayProps = typeof __propDef.props;
34
+ export type CalendarDayEvents = typeof __propDef.events;
35
+ export type CalendarDaySlots = typeof __propDef.slots;
36
+ export default class CalendarDay extends SvelteComponent<CalendarDayProps, CalendarDayEvents, CalendarDaySlots> {
37
37
  }
38
38
  export {};
@@ -1,6 +1,6 @@
1
1
  /// <reference types="svelte" />
2
2
  import { type CreateCalendarProps } from "@melt-ui/svelte";
3
- export declare const getAttrs: (part: "date" | "header" | "root" | "cell" | "grid" | "heading" | "prev-button" | "next-button" | "grid-head" | "head-cell" | "grid-body" | "grid-row") => Record<string, string>;
3
+ export declare const getAttrs: (part: "day" | "header" | "root" | "cell" | "grid" | "heading" | "prev-button" | "next-button" | "grid-head" | "head-cell" | "grid-body" | "grid-row") => Record<string, string>;
4
4
  export declare function setCtx<Multiple extends boolean>(props: CreateCalendarProps<Multiple>): {
5
5
  updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
6
6
  elements: {
@@ -8,7 +8,7 @@ const PARTS = [
8
8
  "next-button",
9
9
  "heading",
10
10
  "grid",
11
- "date",
11
+ "day",
12
12
  "header",
13
13
  "grid-head",
14
14
  "head-cell",
@@ -1,5 +1,5 @@
1
1
  export { default as Root } from "./components/calendar.svelte";
2
- export { default as Date } from "./components/calendar-date.svelte";
2
+ export { default as Day } from "./components/calendar-day.svelte";
3
3
  export { default as Grid } from "./components/calendar-grid.svelte";
4
4
  export { default as GridBody } from "./components/calendar-grid-body.svelte";
5
5
  export { default as Cell } from "./components/calendar-cell.svelte";
@@ -1,5 +1,5 @@
1
1
  export { default as Root } from "./components/calendar.svelte";
2
- export { default as Date } from "./components/calendar-date.svelte";
2
+ export { default as Day } from "./components/calendar-day.svelte";
3
3
  export { default as Grid } from "./components/calendar-grid.svelte";
4
4
  export { default as GridBody } from "./components/calendar-grid-body.svelte";
5
5
  export { default as Cell } from "./components/calendar-cell.svelte";
@@ -13,7 +13,7 @@ type HeadCellProps = I.HeadCellProps & HTMLThAttributes;
13
13
  type GridBodyProps = I.GridBodyProps & HTMLAttributes<HTMLTableSectionElement>;
14
14
  type GridRowProps = I.GridRowProps & HTMLAttributes<HTMLTableRowElement>;
15
15
  type CellProps = I.CellProps & HTMLTdAttributes;
16
- type DateProps = I.DateProps & HTMLDivAttributes;
16
+ type DayProps = I.DayProps & HTMLDivAttributes;
17
17
  /**
18
18
  * Events
19
19
  */
@@ -22,10 +22,10 @@ type ButtonEvents = {
22
22
  };
23
23
  type PrevButtonEvents = ButtonEvents;
24
24
  type NextButtonEvents = ButtonEvents;
25
- type DateEvents = {
25
+ type DayEvents = {
26
26
  click: CustomEventHandler<MouseEvent, HTMLDivElement>;
27
27
  };
28
28
  type Events = {
29
29
  keydown: CustomEventHandler<KeyboardEvent, HTMLDivElement>;
30
30
  };
31
- export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, GridProps, CellProps, GridRowProps, GridBodyProps, HeadCellProps, GridHeadProps, HeaderProps, DateProps, Events, PrevButtonEvents, NextButtonEvents, DateEvents };
31
+ export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, GridProps, CellProps, GridRowProps, GridBodyProps, HeadCellProps, GridHeadProps, HeaderProps, DayProps, Events, PrevButtonEvents, NextButtonEvents, DayEvents };
@@ -1 +1 @@
1
- export type { Props as DatePickerProps, CalendarProps as DatePickerCalendarProps, LabelProps as DatePickerLabelProps, DescriptionProps as DatePickerDescriptionProps, InputProps as DatePickerInputProps, SegmentProps as DatePickerSegmentProps, CellProps as DatePickerCellProps, DateProps as DatePickerDateProps, GridBodyProps as DatePickerGridBodyProps, GridHeadProps as DatePickerGridHeadProps, GridRowProps as DatePickerGridRowProps, GridProps as DatePickerGridProps, HeadCellProps as DatePickerHeadCellProps, HeaderProps as DatePickerHeaderProps, HeadingProps as DatePickerHeadingProps, NextButtonProps as DatePickerNextButtonProps, PrevButtonProps as DatePickerPrevButtonProps, TriggerProps as DatePickerTriggerProps, ContentProps as DatePickerContentProps, ArrowProps as DatePickerArrowProps, CloseProps as DatePickerCloseProps, CloseEvents as DatePickerCloseEvents, TriggerEvents as DatePickerTriggerEvents, CalendarEvents as DatePickerCalendarEvents, DateEvents as DatePickerDateEvents, PrevButtonEvents as DatePickerPrevButtonEvents, NextButtonEvents as DatePickerNextButtonEvents, SegmentEvents as DatePickerSegmentEvents } from "./types.js";
1
+ export type { Props as DatePickerProps, CalendarProps as DatePickerCalendarProps, LabelProps as DatePickerLabelProps, DescriptionProps as DatePickerDescriptionProps, InputProps as DatePickerInputProps, SegmentProps as DatePickerSegmentProps, CellProps as DatePickerCellProps, DayProps as DatePickerDayProps, GridBodyProps as DatePickerGridBodyProps, GridHeadProps as DatePickerGridHeadProps, GridRowProps as DatePickerGridRowProps, GridProps as DatePickerGridProps, HeadCellProps as DatePickerHeadCellProps, HeaderProps as DatePickerHeaderProps, HeadingProps as DatePickerHeadingProps, NextButtonProps as DatePickerNextButtonProps, PrevButtonProps as DatePickerPrevButtonProps, TriggerProps as DatePickerTriggerProps, ContentProps as DatePickerContentProps, ArrowProps as DatePickerArrowProps, CloseProps as DatePickerCloseProps, CloseEvents as DatePickerCloseEvents, TriggerEvents as DatePickerTriggerEvents, CalendarEvents as DatePickerCalendarEvents, DayEvents as DatePickerDayEvents, PrevButtonEvents as DatePickerPrevButtonEvents, NextButtonEvents as DatePickerNextButtonEvents, SegmentEvents as DatePickerSegmentEvents } from "./types.js";
@@ -8,7 +8,7 @@ const {
8
8
  elements: { cell },
9
9
  helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
10
10
  } = getCtx();
11
- const attrs = getCalendarAttrs("date");
11
+ const attrs = getCalendarAttrs("day");
12
12
  const dispatch = createDispatcher();
13
13
  $:
14
14
  builder = $cell(date, month);
@@ -1,7 +1,7 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import type { DateEvents, DateProps } from "../types.js";
2
+ import type { DayEvents, DayProps } from "../types.js";
3
3
  declare const __propDef: {
4
- props: DateProps;
4
+ props: DayProps;
5
5
  slots: {
6
6
  default: {
7
7
  builder: ((cellValue: import("@internationalized/date").DateValue, monthValue: import("@internationalized/date").DateValue) => {
@@ -28,11 +28,11 @@ declare const __propDef: {
28
28
  selected: boolean;
29
29
  };
30
30
  };
31
- events: DateEvents;
31
+ events: DayEvents;
32
32
  };
33
- export type DatePickerDateProps = typeof __propDef.props;
34
- export type DatePickerDateEvents = typeof __propDef.events;
35
- export type DatePickerDateSlots = typeof __propDef.slots;
36
- export default class DatePickerDate extends SvelteComponent<DatePickerDateProps, DatePickerDateEvents, DatePickerDateSlots> {
33
+ export type DatePickerDayProps = typeof __propDef.props;
34
+ export type DatePickerDayEvents = typeof __propDef.events;
35
+ export type DatePickerDaySlots = typeof __propDef.slots;
36
+ export default class DatePickerDay extends SvelteComponent<DatePickerDayProps, DatePickerDayEvents, DatePickerDaySlots> {
37
37
  }
38
38
  export {};
@@ -14,7 +14,7 @@ export { default as GridRow } from "../calendar/components/calendar-grid-row.sve
14
14
  export { default as HeadCell } from "../calendar/components/calendar-head-cell.svelte";
15
15
  export { default as Header } from "../calendar/components/calendar-header.svelte";
16
16
  export { default as Cell } from "./components/date-picker-cell.svelte";
17
- export { default as Date } from "./components/date-picker-date.svelte";
17
+ export { default as Day } from "./components/date-picker-day.svelte";
18
18
  export { default as Grid } from "./components/date-picker-grid.svelte";
19
19
  export { default as Heading } from "./components/date-picker-heading.svelte";
20
20
  export { default as NextButton } from "./components/date-picker-next-button.svelte";
@@ -14,7 +14,7 @@ export { default as GridRow } from "../calendar/components/calendar-grid-row.sve
14
14
  export { default as HeadCell } from "../calendar/components/calendar-head-cell.svelte";
15
15
  export { default as Header } from "../calendar/components/calendar-header.svelte";
16
16
  export { default as Cell } from "./components/date-picker-cell.svelte";
17
- export { default as Date } from "./components/date-picker-date.svelte";
17
+ export { default as Day } from "./components/date-picker-day.svelte";
18
18
  export { default as Grid } from "./components/date-picker-grid.svelte";
19
19
  export { default as Heading } from "./components/date-picker-heading.svelte";
20
20
  export { default as NextButton } from "./components/date-picker-next-button.svelte";
@@ -1,6 +1,6 @@
1
1
  import type { HTMLDivAttributes, HTMLSpanAttributes } from "../../internal/index.js";
2
2
  import type * as I from "./_types.js";
3
- import type { CellProps, DateProps, GridBodyProps, GridHeadProps, GridRowProps, GridProps, HeadCellProps, HeaderProps, HeadingProps, NextButtonProps, PrevButtonProps, Events as CalendarEvents, DateEvents, PrevButtonEvents, NextButtonEvents } from "../calendar/types.js";
3
+ import type { CellProps, DayProps, GridBodyProps, GridHeadProps, GridRowProps, GridProps, HeadCellProps, HeaderProps, HeadingProps, NextButtonProps, PrevButtonProps, Events as CalendarEvents, DayEvents, PrevButtonEvents, NextButtonEvents } from "../calendar/types.js";
4
4
  import type { TriggerProps, ContentProps, ArrowProps, CloseProps, CloseEvents, TriggerEvents } from "../popover/types.js";
5
5
  import type { SegmentEvents } from "../date-field/types.js";
6
6
  type Props = I.Props;
@@ -9,4 +9,4 @@ type SegmentProps = I.SegmentProps & HTMLDivAttributes;
9
9
  type InputProps = I.InputProps & HTMLDivAttributes;
10
10
  type DescriptionProps = I.DescriptionProps & HTMLDivAttributes;
11
11
  type CalendarProps = I.CalendarProps & HTMLDivAttributes;
12
- export type { Props, CalendarProps, LabelProps, DescriptionProps, InputProps, SegmentProps, CellProps, DateProps, GridBodyProps, GridHeadProps, GridRowProps, GridProps, HeadCellProps, HeaderProps, HeadingProps, NextButtonProps, PrevButtonProps, TriggerProps, ContentProps, ArrowProps, CloseProps, CloseEvents, TriggerEvents, CalendarEvents, DateEvents, PrevButtonEvents, NextButtonEvents, SegmentEvents };
12
+ export type { Props, CalendarProps, LabelProps, DescriptionProps, InputProps, SegmentProps, CellProps, DayProps, GridBodyProps, GridHeadProps, GridRowProps, GridProps, HeadCellProps, HeaderProps, HeadingProps, NextButtonProps, PrevButtonProps, TriggerProps, ContentProps, ArrowProps, CloseProps, CloseEvents, TriggerEvents, CalendarEvents, DayEvents, PrevButtonEvents, NextButtonEvents, SegmentEvents };
@@ -1 +1 @@
1
- export type { Props as DateRangePickerProps, CalendarProps as DateRangePickerCalendarProps, LabelProps as DateRangePickerLabelProps, DescriptionProps as DateRangePickerDescriptionProps, InputProps as DateRangePickerInputProps, SegmentProps as DateRangePickerSegmentProps, CellProps as DateRangePickerCellProps, DateProps as DateRangePickerDateProps, GridBodyProps as DateRangePickerGridBodyProps, GridHeadProps as DateRangePickerGridHeadProps, GridRowProps as DateRangePickerGridRowProps, GridProps as DateRangePickerGridProps, HeadCellProps as DateRangePickerHeadCellProps, HeaderProps as DateRangePickerHeaderProps, HeadingProps as DateRangePickerHeadingProps, NextButtonProps as DateRangePickerNextButtonProps, PrevButtonProps as DateRangePickerPrevButtonProps, TriggerProps as DateRangePickerTriggerProps, ContentProps as DateRangePickerContentProps, ArrowProps as DateRangePickerArrowProps, CloseProps as DateRangePickerCloseProps, CloseEvents as DateRangePickerCloseEvents, TriggerEvents as DateRangePickerTriggerEvents, CalendarEvents as DateRangePickerCalendarEvents, DateEvents as DateRangePickerDateEvents, PrevButtonEvents as DateRangePickerPrevButtonEvents, NextButtonEvents as DateRangePickerNextButtonEvents, SegmentEvents as DateRangePickerSegmentEvents } from "./types.js";
1
+ export type { Props as DateRangePickerProps, CalendarProps as DateRangePickerCalendarProps, LabelProps as DateRangePickerLabelProps, DescriptionProps as DateRangePickerDescriptionProps, InputProps as DateRangePickerInputProps, SegmentProps as DateRangePickerSegmentProps, CellProps as DateRangePickerCellProps, DayProps as DateRangePickerDayProps, GridBodyProps as DateRangePickerGridBodyProps, GridHeadProps as DateRangePickerGridHeadProps, GridRowProps as DateRangePickerGridRowProps, GridProps as DateRangePickerGridProps, HeadCellProps as DateRangePickerHeadCellProps, HeaderProps as DateRangePickerHeaderProps, HeadingProps as DateRangePickerHeadingProps, NextButtonProps as DateRangePickerNextButtonProps, PrevButtonProps as DateRangePickerPrevButtonProps, TriggerProps as DateRangePickerTriggerProps, ContentProps as DateRangePickerContentProps, ArrowProps as DateRangePickerArrowProps, CloseProps as DateRangePickerCloseProps, CloseEvents as DateRangePickerCloseEvents, TriggerEvents as DateRangePickerTriggerEvents, CalendarEvents as DateRangePickerCalendarEvents, DayEvents as DateRangePickerDayEvents, PrevButtonEvents as DateRangePickerPrevButtonEvents, NextButtonEvents as DateRangePickerNextButtonEvents, SegmentEvents as DateRangePickerSegmentEvents } from "./types.js";
@@ -49,6 +49,23 @@ type Props = Expand<WithOmission<CreateDateRangePickerProps> & {
49
49
  * This is used to apply the appropriate `aria-describedby` attribute to the input.
50
50
  */
51
51
  descriptionId?: string;
52
+ /**
53
+ * The `start` value of the date range, which can exist prior
54
+ * to the `value` being set. The `value` is only set once a `start`
55
+ * and `end` value are selected.
56
+ *
57
+ * You can `bind:startValue` to a value to receive updates outside
58
+ * this component when the user selects a `start` value.
59
+ *
60
+ * Modifying this value outside the component will have no effect.
61
+ * To programmatically control the `start` value, use `bind:value`
62
+ * and update the `start` property of the `DateRange` object.
63
+ *
64
+ * This is provided as a convenience for use cases where you want
65
+ * to display the selected `start` value outside the component before
66
+ * the `value` is set.
67
+ */
68
+ startValue?: DateValue | undefined;
52
69
  } & AsChild>;
53
70
  type InputProps = AsChild;
54
71
  type DescriptionProps = AsChild;
@@ -7,7 +7,7 @@ const {
7
7
  elements: { cell },
8
8
  helpers: { isDateDisabled, isDateUnavailable }
9
9
  } = getCtx();
10
- const attrs = getCalendarAttrs("date");
10
+ const attrs = getCalendarAttrs("day");
11
11
  $:
12
12
  builder = $cell(date, month);
13
13
  $:
@@ -1,7 +1,7 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import type { DateProps } from "../types.js";
2
+ import type { DayProps } from "../types.js";
3
3
  declare const __propDef: {
4
- props: DateProps;
4
+ props: DayProps;
5
5
  events: {
6
6
  [evt: string]: CustomEvent<any>;
7
7
  };
@@ -34,9 +34,9 @@ declare const __propDef: {
34
34
  };
35
35
  };
36
36
  };
37
- export type DateRangePickerDateProps = typeof __propDef.props;
38
- export type DateRangePickerDateEvents = typeof __propDef.events;
39
- export type DateRangePickerDateSlots = typeof __propDef.slots;
40
- export default class DateRangePickerDate extends SvelteComponent<DateRangePickerDateProps, DateRangePickerDateEvents, DateRangePickerDateSlots> {
37
+ export type DateRangePickerDayProps = typeof __propDef.props;
38
+ export type DateRangePickerDayEvents = typeof __propDef.events;
39
+ export type DateRangePickerDaySlots = typeof __propDef.slots;
40
+ export default class DateRangePickerDay extends SvelteComponent<DateRangePickerDayProps, DateRangePickerDayEvents, DateRangePickerDaySlots> {
41
41
  }
42
42
  export {};
@@ -33,6 +33,7 @@ declare const __propDef: {
33
33
  onPlaceholderChange?: import("../../../internal/types.js").OnChangeFn<import("@internationalized/date").DateValue> | undefined;
34
34
  validationId?: string | undefined;
35
35
  descriptionId?: string | undefined;
36
+ startValue?: import("@internationalized/date").DateValue | undefined;
36
37
  asChild?: boolean | undefined;
37
38
  };
38
39
  events: {
@@ -22,11 +22,14 @@ export let isDateDisabled = void 0;
22
22
  export let fixedWeeks = void 0;
23
23
  export let calendarLabel = void 0;
24
24
  export let weekdayFormat = void 0;
25
+ export let startValue = void 0;
25
26
  const {
26
27
  states: {
27
28
  value: localValue,
28
29
  placeholder: localPlaceholder,
29
- isInvalid: localIsInvalid
30
+ isInvalid: localIsInvalid,
31
+ startValue: localStartValue,
32
+ endValue
30
33
  },
31
34
  updateOption,
32
35
  ids
@@ -170,6 +173,8 @@ $:
170
173
  if (descriptionId) {
171
174
  ids.rangeField.field.description.set(descriptionId);
172
175
  }
176
+ $:
177
+ startValue = $localStartValue;
173
178
  $:
174
179
  value !== void 0 && localValue.set(value);
175
180
  $:
@@ -209,7 +214,9 @@ $:
209
214
  $:
210
215
  slotProps = {
211
216
  isInvalid: $localIsInvalid,
212
- ids: $idValues
217
+ ids: $idValues,
218
+ startValue: $localStartValue,
219
+ endValue: $endValue
213
220
  };
214
221
  </script>
215
222
 
@@ -33,6 +33,7 @@ declare const __propDef: {
33
33
  onPlaceholderChange?: import("../../../internal/types.js").OnChangeFn<import("@internationalized/date").DateValue> | undefined;
34
34
  validationId?: string | undefined;
35
35
  descriptionId?: string | undefined;
36
+ startValue?: import("@internationalized/date").DateValue | undefined;
36
37
  asChild?: boolean | undefined;
37
38
  };
38
39
  events: {
@@ -70,6 +71,8 @@ declare const __propDef: {
70
71
  timeZoneName: string;
71
72
  };
72
73
  };
74
+ startValue: import("@internationalized/date").DateValue | undefined;
75
+ endValue: import("@internationalized/date").DateValue | undefined;
73
76
  };
74
77
  };
75
78
  };
@@ -340,6 +340,8 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
340
340
  months: Writable<import("@melt-ui/svelte").Month<import("@internationalized/date").DateValue>[]>;
341
341
  weekdays: import("svelte/store").Readable<string[]>;
342
342
  headingValue: import("svelte/store").Readable<string>;
343
+ startValue: Writable<import("@internationalized/date").DateValue | undefined>;
344
+ endValue: Writable<import("@internationalized/date").DateValue | undefined>;
343
345
  segmentContents: import("svelte/store").Readable<{
344
346
  start: {
345
347
  part: import("@melt-ui/svelte").SegmentPart;
@@ -837,6 +839,8 @@ export declare function getCtx(): {
837
839
  months: Writable<import("@melt-ui/svelte").Month<import("@internationalized/date").DateValue>[]>;
838
840
  weekdays: import("svelte/store").Readable<string[]>;
839
841
  headingValue: import("svelte/store").Readable<string>;
842
+ startValue: Writable<import("@internationalized/date").DateValue | undefined>;
843
+ endValue: Writable<import("@internationalized/date").DateValue | undefined>;
840
844
  segmentContents: import("svelte/store").Readable<{
841
845
  start: {
842
846
  part: import("@melt-ui/svelte").SegmentPart;
@@ -1,6 +1,6 @@
1
1
  export { default as Arrow } from "./components/date-range-picker-arrow.svelte";
2
2
  export { default as Cell } from "./components/date-range-picker-cell.svelte";
3
- export { default as Date } from "./components/date-range-picker-date.svelte";
3
+ export { default as Day } from "./components/date-range-picker-day.svelte";
4
4
  export { default as Heading } from "./components/date-range-picker-heading.svelte";
5
5
  export { default as NextButton } from "./components/date-range-picker-next-button.svelte";
6
6
  export { default as PrevButton } from "./components/date-range-picker-prev-button.svelte";
@@ -1,6 +1,6 @@
1
1
  export { default as Arrow } from "./components/date-range-picker-arrow.svelte";
2
2
  export { default as Cell } from "./components/date-range-picker-cell.svelte";
3
- export { default as Date } from "./components/date-range-picker-date.svelte";
3
+ export { default as Day } from "./components/date-range-picker-day.svelte";
4
4
  export { default as Heading } from "./components/date-range-picker-heading.svelte";
5
5
  export { default as NextButton } from "./components/date-range-picker-next-button.svelte";
6
6
  export { default as PrevButton } from "./components/date-range-picker-prev-button.svelte";
@@ -1,6 +1,6 @@
1
1
  import type { HTMLDivAttributes, HTMLSpanAttributes } from "../../internal/index.js";
2
2
  import type * as I from "./_types.js";
3
- import type { CellProps, DateProps, GridBodyProps, GridHeadProps, GridRowProps, GridProps, HeadCellProps, HeaderProps, HeadingProps, NextButtonProps, PrevButtonProps, NextButtonEvents, PrevButtonEvents, DateEvents, Events as CalendarEvents } from "../range-calendar/types.js";
3
+ import type { CellProps, DayProps, GridBodyProps, GridHeadProps, GridRowProps, GridProps, HeadCellProps, HeaderProps, HeadingProps, NextButtonProps, PrevButtonProps, NextButtonEvents, PrevButtonEvents, DayEvents, Events as CalendarEvents } from "../range-calendar/types.js";
4
4
  import type { TriggerProps, ContentProps, ArrowProps, CloseProps, CloseEvents, TriggerEvents } from "../popover/types.js";
5
5
  import type { SegmentEvents } from "../date-range-field/types.js";
6
6
  type Props = I.Props;
@@ -9,4 +9,4 @@ type SegmentProps = I.SegmentProps & HTMLDivAttributes;
9
9
  type InputProps = I.InputProps & HTMLDivAttributes;
10
10
  type DescriptionProps = I.DescriptionProps & HTMLDivAttributes;
11
11
  type CalendarProps = I.CalendarProps & HTMLDivAttributes;
12
- export type { Props, CalendarProps, LabelProps, DescriptionProps, InputProps, SegmentProps, CellProps, DateProps, GridBodyProps, GridHeadProps, GridRowProps, GridProps, HeadCellProps, HeaderProps, HeadingProps, NextButtonProps, PrevButtonProps, TriggerProps, ContentProps, ArrowProps, CloseProps, CloseEvents, TriggerEvents, NextButtonEvents, PrevButtonEvents, DateEvents, CalendarEvents, SegmentEvents };
12
+ export type { Props, CalendarProps, LabelProps, DescriptionProps, InputProps, SegmentProps, CellProps, DayProps, GridBodyProps, GridHeadProps, GridRowProps, GridProps, HeadCellProps, HeaderProps, HeadingProps, NextButtonProps, PrevButtonProps, TriggerProps, ContentProps, ArrowProps, CloseProps, CloseEvents, TriggerEvents, NextButtonEvents, PrevButtonEvents, DayEvents, CalendarEvents, SegmentEvents };
@@ -1 +1 @@
1
- export type { Props as RangeCalendarProps, PrevButtonProps as RangeCalendarPrevButtonProps, NextButtonProps as RangeCalendarNextButtonProps, HeadingProps as RangeCalendarHeadingProps, HeaderProps as RangeCalendarHeaderProps, GridProps as RangeCalendarGridProps, GridHeadProps as RangeCalendarGridHeadProps, HeadCellProps as RangeCalendarHeadCellProps, GridBodyProps as RangeCalendarGridBodyProps, CellProps as RangeCalendarCellProps, GridRowProps as RangeCalendarGridRowProps, DateProps as RangeCalendarDateProps, Events as RangeCalendarEvents, PrevButtonEvents as RangeCalendarPrevButtonEvents, NextButtonEvents as RangeCalendarNextButtonEvents, DateEvents as RangeCalendarDateEvents } from "./types.js";
1
+ export type { Props as RangeCalendarProps, PrevButtonProps as RangeCalendarPrevButtonProps, NextButtonProps as RangeCalendarNextButtonProps, HeadingProps as RangeCalendarHeadingProps, HeaderProps as RangeCalendarHeaderProps, GridProps as RangeCalendarGridProps, GridHeadProps as RangeCalendarGridHeadProps, HeadCellProps as RangeCalendarHeadCellProps, GridBodyProps as RangeCalendarGridBodyProps, CellProps as RangeCalendarCellProps, GridRowProps as RangeCalendarGridRowProps, DayProps as RangeCalendarDayProps, Events as RangeCalendarEvents, PrevButtonEvents as RangeCalendarPrevButtonEvents, NextButtonEvents as RangeCalendarNextButtonEvents, DayEvents as RangeCalendarDayEvents } from "./types.js";
@@ -41,6 +41,23 @@ type Props = Expand<Omit<CreateRangeCalendarProps, "placeholder" | "defaultPlace
41
41
  * @default false
42
42
  */
43
43
  initialFocus?: boolean;
44
+ /**
45
+ * The `start` value of the date range, which can exist prior
46
+ * to the `value` being set. The `value` is only set once a `start`
47
+ * and `end` value are selected.
48
+ *
49
+ * You can `bind:startValue` to a value to receive updates outside
50
+ * this component when the user selects a `start` value.
51
+ *
52
+ * Modifying this value outside the component will have no effect.
53
+ * To programmatically control the `start` value, use `bind:value`
54
+ * and update the `start` property of the `DateRange` object.
55
+ *
56
+ * This is provided as a convenience for use cases where you want
57
+ * to display the selected `start` value outside the component before
58
+ * the `value` is set.
59
+ */
60
+ startValue?: DateValue | undefined;
44
61
  } & AsChild>;
45
62
  type PrevButtonProps = AsChild;
46
63
  type NextButtonProps = AsChild;
@@ -51,7 +68,7 @@ type HeadCellProps = AsChild;
51
68
  type GridProps = AsChild;
52
69
  type GridBodyProps = AsChild;
53
70
  type GridRowProps = AsChild;
54
- type BaseDateProps = Expand<{
71
+ type BaseDayProps = Expand<{
55
72
  /**
56
73
  * The date value of the cell.
57
74
  */
@@ -61,6 +78,6 @@ type BaseDateProps = Expand<{
61
78
  */
62
79
  month: DateValue;
63
80
  } & AsChild>;
64
- type CellProps = Expand<Omit<BaseDateProps, "month">>;
65
- type DateProps = Expand<BaseDateProps>;
66
- export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, HeaderProps, GridProps, GridHeadProps, HeadCellProps, GridBodyProps, GridRowProps, CellProps, DateProps };
81
+ type CellProps = Expand<Omit<BaseDayProps, "month">>;
82
+ type DayProps = Expand<BaseDayProps>;
83
+ export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, HeaderProps, GridProps, GridHeadProps, HeadCellProps, GridBodyProps, GridRowProps, CellProps, DayProps };
@@ -8,7 +8,7 @@ const {
8
8
  elements: { cell },
9
9
  helpers: { isDateDisabled, isDateUnavailable }
10
10
  } = getCtx();
11
- const attrs = getAttrs("date");
11
+ const attrs = getAttrs("day");
12
12
  const dispatch = createDispatcher();
13
13
  $:
14
14
  builder = $cell(date, month);
@@ -1,7 +1,7 @@
1
1
  import { SvelteComponent } from "svelte";
2
- import type { DateEvents, DateProps } from "../types.js";
2
+ import type { DayEvents, DayProps } from "../types.js";
3
3
  declare const __propDef: {
4
- props: DateProps;
4
+ props: DayProps;
5
5
  slots: {
6
6
  default: {
7
7
  builder: ((cellValue: import("@internationalized/date").DateValue, monthValue: import("@internationalized/date").DateValue) => {
@@ -30,11 +30,11 @@ declare const __propDef: {
30
30
  unavailable: boolean;
31
31
  };
32
32
  };
33
- events: DateEvents;
33
+ events: DayEvents;
34
34
  };
35
- export type RangeCalendarDateProps = typeof __propDef.props;
36
- export type RangeCalendarDateEvents = typeof __propDef.events;
37
- export type RangeCalendarDateSlots = typeof __propDef.slots;
38
- export default class RangeCalendarDate extends SvelteComponent<RangeCalendarDateProps, RangeCalendarDateEvents, RangeCalendarDateSlots> {
35
+ export type RangeCalendarDayProps = typeof __propDef.props;
36
+ export type RangeCalendarDayEvents = typeof __propDef.events;
37
+ export type RangeCalendarDaySlots = typeof __propDef.slots;
38
+ export default class RangeCalendarDay extends SvelteComponent<RangeCalendarDayProps, RangeCalendarDayEvents, RangeCalendarDaySlots> {
39
39
  }
40
40
  export {};
@@ -23,6 +23,7 @@ export let asChild = false;
23
23
  export let id = void 0;
24
24
  export let weekdayFormat = void 0;
25
25
  export let initialFocus = false;
26
+ export let startValue = void 0;
26
27
  let el = void 0;
27
28
  onMount(() => {
28
29
  if (!initialFocus || !el)
@@ -35,7 +36,9 @@ const {
35
36
  value: localValue,
36
37
  placeholder: localPlaceholder,
37
38
  months,
38
- weekdays
39
+ weekdays,
40
+ startValue: localStartValue,
41
+ endValue
39
42
  },
40
43
  updateOption,
41
44
  ids
@@ -74,6 +77,8 @@ $:
74
77
  if (id) {
75
78
  ids.calendar.set(id);
76
79
  }
80
+ $:
81
+ startValue = $localStartValue;
77
82
  $:
78
83
  value !== void 0 && localValue.set(value);
79
84
  $:
@@ -114,7 +119,9 @@ $:
114
119
  slotProps = {
115
120
  builder,
116
121
  months: $months,
117
- weekdays: $weekdays
122
+ weekdays: $weekdays,
123
+ startValue: $localStartValue,
124
+ endValue: $endValue
118
125
  };
119
126
  </script>
120
127
 
@@ -18,6 +18,8 @@ declare const __propDef: {
18
18
  };
19
19
  months: import("@melt-ui/svelte/index.js").Month<import("@internationalized/date").DateValue>[];
20
20
  weekdays: string[];
21
+ startValue: import("@internationalized/date").DateValue | undefined;
22
+ endValue: import("@internationalized/date").DateValue | undefined;
21
23
  };
22
24
  };
23
25
  events: Events;
@@ -1,6 +1,6 @@
1
1
  /// <reference types="svelte" />
2
2
  import { type CreateRangeCalendarProps } from "@melt-ui/svelte";
3
- export declare const getAttrs: (part: "date" | "header" | "root" | "cell" | "grid" | "heading" | "prev-button" | "next-button" | "grid-head" | "head-cell" | "grid-body" | "grid-row") => Record<string, string>;
3
+ export declare const getAttrs: (part: "day" | "header" | "root" | "cell" | "grid" | "heading" | "prev-button" | "next-button" | "grid-head" | "head-cell" | "grid-body" | "grid-row") => Record<string, string>;
4
4
  export declare function setCtx(props: CreateRangeCalendarProps): {
5
5
  updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
6
6
  elements: {
@@ -92,6 +92,8 @@ export declare function setCtx(props: CreateRangeCalendarProps): {
92
92
  set: (this: void, value: import("@melt-ui/svelte").DateRange) => void;
93
93
  subscribe(this: void, run: import("svelte/store").Subscriber<import("@melt-ui/svelte").DateRange>, invalidate?: import("svelte/store").Invalidator<import("@melt-ui/svelte").DateRange> | undefined): import("svelte/store").Unsubscriber;
94
94
  };
95
+ startValue: import("svelte/store").Writable<import("@internationalized/date").DateValue | undefined>;
96
+ endValue: import("svelte/store").Writable<import("@internationalized/date").DateValue | undefined>;
95
97
  };
96
98
  helpers: {
97
99
  nextPage: () => void;
@@ -222,6 +224,8 @@ export declare function getCtx(): {
222
224
  set: (this: void, value: import("@melt-ui/svelte").DateRange) => void;
223
225
  subscribe(this: void, run: import("svelte/store").Subscriber<import("@melt-ui/svelte").DateRange>, invalidate?: import("svelte/store").Invalidator<import("@melt-ui/svelte").DateRange> | undefined): import("svelte/store").Unsubscriber;
224
226
  };
227
+ startValue: import("svelte/store").Writable<import("@internationalized/date").DateValue | undefined>;
228
+ endValue: import("svelte/store").Writable<import("@internationalized/date").DateValue | undefined>;
225
229
  };
226
230
  helpers: {
227
231
  nextPage: () => void;
@@ -8,7 +8,7 @@ const PARTS = [
8
8
  "next-button",
9
9
  "heading",
10
10
  "grid",
11
- "date",
11
+ "day",
12
12
  "header",
13
13
  "grid-head",
14
14
  "head-cell",
@@ -1,5 +1,5 @@
1
1
  export { default as Root } from "./components/range-calendar.svelte";
2
- export { default as Date } from "./components/range-calendar-date.svelte";
2
+ export { default as Day } from "./components/range-calendar-day.svelte";
3
3
  export { default as Grid } from "./components/range-calendar-grid.svelte";
4
4
  export { default as GridBody } from "./components/range-calendar-grid-body.svelte";
5
5
  export { default as Cell } from "./components/range-calendar-cell.svelte";
@@ -1,5 +1,5 @@
1
1
  export { default as Root } from "./components/range-calendar.svelte";
2
- export { default as Date } from "./components/range-calendar-date.svelte";
2
+ export { default as Day } from "./components/range-calendar-day.svelte";
3
3
  export { default as Grid } from "./components/range-calendar-grid.svelte";
4
4
  export { default as GridBody } from "./components/range-calendar-grid-body.svelte";
5
5
  export { default as Cell } from "./components/range-calendar-cell.svelte";
@@ -13,7 +13,7 @@ type HeadCellProps = I.HeadCellProps & HTMLThAttributes;
13
13
  type GridBodyProps = I.GridBodyProps & HTMLAttributes<HTMLTableSectionElement>;
14
14
  type GridRowProps = I.GridRowProps & HTMLAttributes<HTMLTableRowElement>;
15
15
  type CellProps = I.CellProps & HTMLTdAttributes;
16
- type DateProps = I.DateProps & HTMLDivAttributes;
16
+ type DayProps = I.DayProps & HTMLDivAttributes;
17
17
  /**
18
18
  * Events
19
19
  */
@@ -22,7 +22,7 @@ type ButtonEvents = {
22
22
  };
23
23
  type PrevButtonEvents = ButtonEvents;
24
24
  type NextButtonEvents = ButtonEvents;
25
- type DateEvents = {
25
+ type DayEvents = {
26
26
  click: CustomEventHandler<MouseEvent, HTMLDivElement>;
27
27
  focusin: CustomEventHandler<FocusEvent, HTMLDivElement>;
28
28
  mouseenter: CustomEventHandler<MouseEvent, HTMLDivElement>;
@@ -30,4 +30,4 @@ type DateEvents = {
30
30
  type Events = {
31
31
  keydown: CustomEventHandler<KeyboardEvent, HTMLDivElement>;
32
32
  };
33
- export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, GridProps, CellProps, GridRowProps, GridBodyProps, HeadCellProps, GridHeadProps, HeaderProps, DateProps, Events, PrevButtonEvents, NextButtonEvents, DateEvents };
33
+ export type { Props, PrevButtonProps, NextButtonProps, HeadingProps, GridProps, CellProps, GridRowProps, GridBodyProps, HeadCellProps, GridHeadProps, HeaderProps, DayProps, Events, PrevButtonEvents, NextButtonEvents, DayEvents };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bits-ui",
3
- "version": "0.10.3",
3
+ "version": "0.11.1",
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.0",
77
- "@melt-ui/svelte": "0.64.4",
77
+ "@melt-ui/svelte": "0.64.5",
78
78
  "nanoid": "^5.0.4"
79
79
  },
80
80
  "peerDependencies": {