bits-ui 0.9.9 → 0.10.0

package/dist/bits/date-picker/components/date-picker-next-button.svelte

@@ -0,0 +1,27 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCalendarAttrs, getCtx } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
+export let asChild = false;
+const {
+  elements: { nextButton }
+} = getCtx();
+const attrs = getCalendarAttrs("next-button");
+const dispatch = createDispatcher();
+$:
+  builder = $nextButton;
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<button
+		{...builder} use:builder.action
+		type="button"
+		{...$$restProps}
+		on:m-click={dispatch}
+	>
+		<slot {builder} />
+	</button>
+{/if}

package/dist/bits/date-picker/components/date-picker-next-button.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { NextButtonProps } from "../types.js";
+declare const __propDef: {
+    props: NextButtonProps;
+    slots: {
+        default: {
+            builder: {
+                role: string;
+                'aria-label': string;
+                'aria-disabled': string | undefined;
+                'data-disabled': string | undefined;
+                disabled: boolean | undefined;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click">;
+            };
+        };
+    };
+    events: {
+        click: import("../../../index.js").CustomEventHandler<MouseEvent, HTMLButtonElement>;
+    };
+};
+export type DatePickerNextButtonProps = typeof __propDef.props;
+export type DatePickerNextButtonEvents = typeof __propDef.events;
+export type DatePickerNextButtonSlots = typeof __propDef.slots;
+export default class DatePickerNextButton extends SvelteComponent<DatePickerNextButtonProps, DatePickerNextButtonEvents, DatePickerNextButtonSlots> {
+}
+export {};

package/dist/bits/date-picker/components/date-picker-prev-button.svelte

@@ -0,0 +1,27 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCalendarAttrs, getCtx } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
+export let asChild = false;
+const {
+  elements: { prevButton }
+} = getCtx();
+const attrs = getCalendarAttrs("prev-button");
+const dispatch = createDispatcher();
+$:
+  builder = $prevButton;
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<button
+		{...builder} use:builder.action
+		type="button"
+		{...$$restProps}
+		on:m-click={dispatch}
+	>
+		<slot {builder} />
+	</button>
+{/if}

package/dist/bits/date-picker/components/date-picker-prev-button.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { PrevButtonProps } from "../types.js";
+declare const __propDef: {
+    props: PrevButtonProps;
+    slots: {
+        default: {
+            builder: {
+                role: string;
+                'aria-label': string;
+                'aria-disabled': string | undefined;
+                'data-disabled': string | undefined;
+                disabled: boolean | undefined;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click">;
+            };
+        };
+    };
+    events: {
+        click: import("../../../index.js").CustomEventHandler<MouseEvent, HTMLButtonElement>;
+    };
+};
+export type DatePickerPrevButtonProps = typeof __propDef.props;
+export type DatePickerPrevButtonEvents = typeof __propDef.events;
+export type DatePickerPrevButtonSlots = typeof __propDef.slots;
+export default class DatePickerPrevButton extends SvelteComponent<DatePickerPrevButtonProps, DatePickerPrevButtonEvents, DatePickerPrevButtonSlots> {
+}
+export {};

package/dist/bits/date-picker/components/date-picker-segment.svelte

@@ -0,0 +1,35 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCtx, getFieldAttrs } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
+export let asChild = false;
+export let id = void 0;
+export let part;
+const {
+  elements: { segment },
+  ids
+} = getCtx();
+$:
+  if (id && part !== "literal") {
+    ids.dateField[part].set(id);
+  }
+const attrs = getFieldAttrs("segment");
+const dispatch = createDispatcher();
+$:
+  builder = $segment(part);
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<div
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-click={dispatch}
+		on:m-focusout={dispatch}
+		on:m-focusout={dispatch}
+	>
+		<slot {builder} />
+	</div>
+{/if}

package/dist/bits/date-picker/components/date-picker-segment.svelte.d.ts

@@ -0,0 +1,40 @@
+import { SvelteComponent } from "svelte";
+import type { SegmentEvents, SegmentProps } from "../types.js";
+declare const __propDef: {
+    props: SegmentProps;
+    slots: {
+        default: {
+            builder: ((part: import("@melt-ui/svelte/index.js").SegmentPart) => {
+                'aria-invalid': string | undefined;
+                'aria-disabled': string | undefined;
+                'aria-readonly': string | undefined;
+                'data-invalid': string | undefined;
+                'data-disabled': string | undefined;
+                'data-segment': string;
+            } | {
+                id: string;
+                'aria-labelledby': string;
+                contentEditable: boolean;
+                'aria-describedby': string | undefined;
+                tabindex: number | undefined;
+                'aria-invalid': string | undefined;
+                'aria-disabled': string | undefined;
+                'aria-readonly': string | undefined;
+                'data-invalid': string | undefined;
+                'data-disabled': string | undefined;
+                'data-segment': string;
+            }) & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">;
+            };
+        };
+    };
+    events: SegmentEvents;
+};
+export type DatePickerSegmentProps = typeof __propDef.props;
+export type DatePickerSegmentEvents = typeof __propDef.events;
+export type DatePickerSegmentSlots = typeof __propDef.slots;
+export default class DatePickerSegment extends SvelteComponent<DatePickerSegmentProps, DatePickerSegmentEvents, DatePickerSegmentSlots> {
+}
+export {};

package/dist/bits/date-picker/components/date-picker-trigger.svelte

@@ -0,0 +1,34 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCtx, getPopoverAttrs } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
+export let asChild = false;
+export let id = void 0;
+const {
+  elements: { trigger },
+  ids
+} = getCtx();
+const dispatch = createDispatcher();
+const attrs = getPopoverAttrs("trigger");
+$:
+  if (id) {
+    ids.popover.trigger.set(id);
+  }
+$:
+  builder = $trigger;
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<button
+		{...builder} use:builder.action
+		type="button"
+		{...$$restProps}
+		on:m-click={dispatch}
+		on:m-keydown={dispatch}
+	>
+		<slot {builder} />
+	</button>
+{/if}

package/dist/bits/date-picker/components/date-picker-trigger.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import type { TriggerEvents, TriggerProps } from "../types.js";
+declare const __propDef: {
+    props: TriggerProps;
+    slots: {
+        default: {
+            builder: {
+                'aria-label': string;
+                'data-segment': string;
+                'data-state': "open" | "closed";
+                'aria-expanded': boolean;
+                'aria-controls': string;
+                role: "button";
+                id: string;
+                'aria-haspopup': "dialog";
+            } & {
+                "data-melt-popover-trigger": "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">;
+            };
+        };
+    };
+    events: TriggerEvents;
+};
+export type DatePickerTriggerProps = typeof __propDef.props;
+export type DatePickerTriggerEvents = typeof __propDef.events;
+export type DatePickerTriggerSlots = typeof __propDef.slots;
+export default class DatePickerTrigger extends SvelteComponent<DatePickerTriggerProps, DatePickerTriggerEvents, DatePickerTriggerSlots> {
+}
+export {};

package/dist/bits/date-picker/components/date-picker.svelte

@@ -0,0 +1,168 @@
+<script>import { derived } from "svelte/store";
+import { setCtx } from "../ctx.js";
+export let value = void 0;
+export let onValueChange = void 0;
+export let placeholder = void 0;
+export let onPlaceholderChange = void 0;
+export let disabled = void 0;
+export let isDateUnavailable = void 0;
+export let granularity = void 0;
+export let hideTimeZone = void 0;
+export let hourCycle = void 0;
+export let locale = void 0;
+export let maxValue = void 0;
+export let minValue = void 0;
+export let readonly = void 0;
+export let validationId = void 0;
+export let descriptionId = void 0;
+export let preventDeselect = void 0;
+export let pagedNavigation = void 0;
+export let weekStartsOn = void 0;
+export let isDateDisabled = void 0;
+export let fixedWeeks = void 0;
+export let calendarLabel = void 0;
+export let weekdayFormat = void 0;
+const {
+  states: {
+    value: localValue,
+    placeholder: localPlaceholder,
+    isInvalid: localIsInvalid
+  },
+  updateOption,
+  ids
+} = setCtx({
+  defaultValue: value,
+  defaultPlaceholder: placeholder,
+  preventDeselect,
+  pagedNavigation,
+  weekStartsOn,
+  isDateDisabled,
+  fixedWeeks,
+  calendarLabel,
+  disabled,
+  granularity,
+  hideTimeZone,
+  hourCycle,
+  locale,
+  maxValue,
+  minValue,
+  readonly,
+  weekdayFormat,
+  isDateUnavailable,
+  onValueChange: ({ next }) => {
+    if (value !== next) {
+      onValueChange?.(next);
+      value = next;
+    }
+    return next;
+  },
+  onPlaceholderChange: ({ next }) => {
+    if (placeholder !== next) {
+      onPlaceholderChange?.(next);
+      placeholder = next;
+    }
+    return next;
+  }
+});
+const idValues = derived(
+  [
+    ids.dateField.day,
+    ids.dateField.description,
+    ids.dateField.dayPeriod,
+    ids.dateField.field,
+    ids.dateField.hour,
+    ids.dateField.minute,
+    ids.dateField.month,
+    ids.dateField.second,
+    ids.dateField.year,
+    ids.dateField.validation,
+    ids.dateField.label,
+    ids.dateField.timeZoneName,
+    ids.calendar.calendar,
+    ids.popover.content,
+    ids.popover.trigger
+  ],
+  ([
+    $dayId,
+    $descriptionId,
+    $dayPeriodId,
+    $fieldId,
+    $hourId,
+    $minuteId,
+    $monthId,
+    $secondId,
+    $yearId,
+    $validationId,
+    $labelId,
+    $timeZoneNameId,
+    $calendarId,
+    $contentId
+  ]) => ({
+    day: $dayId,
+    description: $descriptionId,
+    dayPeriod: $dayPeriodId,
+    field: $fieldId,
+    hour: $hourId,
+    minute: $minuteId,
+    month: $monthId,
+    second: $secondId,
+    year: $yearId,
+    validation: $validationId,
+    label: $labelId,
+    timeZoneName: $timeZoneNameId,
+    calendar: $calendarId,
+    content: $contentId
+  })
+);
+$:
+  if (validationId) {
+    ids.dateField.validation.set(validationId);
+  }
+$:
+  if (descriptionId) {
+    ids.dateField.description.set(descriptionId);
+  }
+$:
+  value !== void 0 && localValue.set(value);
+$:
+  placeholder !== void 0 && localPlaceholder.set(placeholder);
+$:
+  updateOption("disabled", disabled);
+$:
+  updateOption("isDateUnavailable", isDateUnavailable);
+$:
+  updateOption("granularity", granularity);
+$:
+  updateOption("hideTimeZone", hideTimeZone);
+$:
+  updateOption("hourCycle", hourCycle);
+$:
+  updateOption("locale", locale);
+$:
+  updateOption("maxValue", maxValue);
+$:
+  updateOption("minValue", minValue);
+$:
+  updateOption("readonly", readonly);
+$:
+  updateOption("fixedWeeks", fixedWeeks);
+$:
+  updateOption("preventDeselect", preventDeselect);
+$:
+  updateOption("pagedNavigation", pagedNavigation);
+$:
+  updateOption("weekStartsOn", weekStartsOn);
+$:
+  updateOption("isDateDisabled", isDateDisabled);
+$:
+  updateOption("calendarLabel", calendarLabel);
+$:
+  updateOption("weekdayFormat", weekdayFormat);
+$:
+  slotProps = {
+    isInvalid: $localIsInvalid,
+    ids: $idValues
+  };
+</script>
+
+<slot {...slotProps} />

package/dist/bits/date-picker/components/date-picker.svelte.d.ts

@@ -0,0 +1,69 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        multiple?: false | undefined;
+        disabled?: boolean | undefined;
+        preventScroll?: boolean | undefined;
+        closeOnEscape?: boolean | undefined;
+        closeOnOutsideClick?: boolean | undefined;
+        portal?: string | HTMLElement | null | undefined;
+        openFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
+        closeFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
+        preventDeselect?: boolean | undefined;
+        minValue?: import("@internationalized/date").DateValue | undefined;
+        maxValue?: import("@internationalized/date").DateValue | undefined;
+        pagedNavigation?: boolean | undefined;
+        weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+        weekdayFormat?: "narrow" | "short" | "long" | undefined;
+        isDateDisabled?: import("@melt-ui/svelte/index.js").Matcher | undefined;
+        isDateUnavailable?: import("@melt-ui/svelte/index.js").Matcher | undefined;
+        fixedWeeks?: boolean | undefined;
+        numberOfMonths?: number | undefined;
+        calendarLabel?: string | undefined;
+        locale?: string | undefined;
+        readonly?: boolean | undefined;
+        hourCycle?: 12 | 24 | undefined;
+        granularity?: import("@melt-ui/svelte/index.js").Granularity | undefined;
+        hideTimeZone?: boolean | undefined;
+        disableFocusTrap?: boolean | undefined;
+        open?: boolean | undefined;
+        onOpenChange?: import("../../../internal/types.js").OnChangeFn<boolean> | undefined;
+        value?: import("@internationalized/date").DateValue | undefined;
+        onValueChange?: import("../../../internal/types.js").OnChangeFn<import("@internationalized/date").DateValue | undefined> | undefined;
+        placeholder?: import("@internationalized/date").DateValue | undefined;
+        onPlaceholderChange?: import("../../../internal/types.js").OnChangeFn<import("@internationalized/date").DateValue> | undefined;
+        validationId?: string | undefined;
+        descriptionId?: string | undefined;
+        asChild?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            isInvalid: boolean;
+            ids: {
+                day: string;
+                description: string;
+                dayPeriod: string;
+                field: string;
+                hour: string;
+                minute: string;
+                month: string;
+                second: string;
+                year: string;
+                validation: string;
+                label: string;
+                timeZoneName: string;
+                calendar: string;
+                content: string;
+            };
+        };
+    };
+};
+export type DatePickerProps = typeof __propDef.props;
+export type DatePickerEvents = typeof __propDef.events;
+export type DatePickerSlots = typeof __propDef.slots;
+export default class DatePicker extends SvelteComponent<DatePickerProps, DatePickerEvents, DatePickerSlots> {
+}
+export {};