bits-ui 0.9.9 → 0.10.0

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

@@ -0,0 +1,28 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCtx, getPopoverAttrs } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
+export let asChild = false;
+const {
+  elements: { close }
+} = getCtx();
+const dispatch = createDispatcher();
+const attrs = getPopoverAttrs("close");
+$:
+  builder = $close;
+$:
+  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-close.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { CloseProps, CloseEvents } from "../types.js";
+declare const __propDef: {
+    props: CloseProps;
+    slots: {
+        default: {
+            builder: {
+                readonly type: "button";
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">;
+            };
+        };
+    };
+    events: CloseEvents;
+};
+export type DatePickerCloseProps = typeof __propDef.props;
+export type DatePickerCloseEvents = typeof __propDef.events;
+export type DatePickerCloseSlots = typeof __propDef.slots;
+export default class DatePickerClose extends SvelteComponent<DatePickerCloseProps, DatePickerCloseEvents, DatePickerCloseSlots> {
+}
+export {};

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

@@ -0,0 +1,87 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCtx, getPopoverAttrs, updatePositioning } from "../ctx.js";
+export let transition = void 0;
+export let transitionConfig = void 0;
+export let inTransition = void 0;
+export let inTransitionConfig = void 0;
+export let outTransition = void 0;
+export let outTransitionConfig = void 0;
+export let asChild = false;
+export let id = void 0;
+export let side = "bottom";
+export let align = "center";
+export let sideOffset = 0;
+export let alignOffset = 0;
+export let collisionPadding = 8;
+export let avoidCollisions = true;
+export let collisionBoundary = void 0;
+export let sameWidth = false;
+export let fitViewport = false;
+export let strategy = "absolute";
+export let overlap = false;
+const {
+  elements: { content },
+  states: { open },
+  ids
+} = getCtx();
+const attrs = getPopoverAttrs("content");
+$:
+  if (id) {
+    ids.popover.content.set(id);
+  }
+$:
+  builder = $content;
+$:
+  Object.assign(builder, attrs);
+$:
+  updatePositioning({
+    side,
+    align,
+    sideOffset,
+    alignOffset,
+    collisionPadding,
+    avoidCollisions,
+    collisionBoundary,
+    sameWidth,
+    fitViewport,
+    strategy,
+    overlap
+  });
+</script>
+
+{#if asChild && $open}
+	<slot {builder} />
+{:else if transition && $open}
+	<div
+		transition:transition={transitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+	>
+		<slot {builder} />
+	</div>
+{:else if inTransition && outTransition && $open}
+	<div
+		in:inTransition={inTransitionConfig}
+		out:outTransition={outTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+	>
+		<slot {builder} />
+	</div>
+{:else if inTransition && $open}
+	<div in:inTransition={inTransitionConfig} {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
+{:else if outTransition && $open}
+	<div
+		out:outTransition={outTransitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+	>
+		<slot {builder} />
+	</div>
+{:else if $open}
+	<div {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
+{/if}

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

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import type { Transition } from "../../../internal/index.js";
+import type { ContentProps } from "../types.js";
+declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
+    props(): ContentProps<T, In, Out>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            builder: {
+                hidden: boolean | undefined;
+                tabindex: number;
+                style: string;
+                id: string;
+                'data-state': string;
+                'data-portal': string | undefined;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: <Node_1 extends unknown>(node: HTMLElement) => {
+                    destroy(): void;
+                };
+            };
+        };
+    };
+}
+export type DatePickerContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type DatePickerContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type DatePickerContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class DatePickerContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<DatePickerContentProps<T, In, Out>, DatePickerContentEvents<T, In, Out>, DatePickerContentSlots<T, In, Out>> {
+}
+export {};

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

@@ -0,0 +1,34 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCtx, getCalendarAttrs } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
+export let date;
+export let month;
+export let asChild = false;
+const {
+  elements: { cell },
+  helpers: { isDateDisabled, isDateUnavailable, isDateSelected }
+} = getCtx();
+const attrs = getCalendarAttrs("date");
+const dispatch = createDispatcher();
+$:
+  builder = $cell(date, month);
+$:
+  Object.assign(builder, attrs);
+$:
+  slotProps = {
+    builder,
+    disabled: $isDateDisabled(date),
+    unavailable: $isDateUnavailable(date),
+    selected: $isDateSelected(date)
+  };
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div {...builder} use:builder.action {...$$restProps} on:m-click={dispatch}>
+		<slot {...slotProps}>
+			{date.day}
+		</slot>
+	</div>
+{/if}

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

@@ -0,0 +1,38 @@
+import { SvelteComponent } from "svelte";
+import type { DateEvents, DateProps } from "../types.js";
+declare const __propDef: {
+    props: DateProps;
+    slots: {
+        default: {
+            builder: ((cellValue: import("@internationalized/date").DateValue, monthValue: import("@internationalized/date").DateValue) => {
+                readonly role: "button";
+                readonly 'aria-label': string;
+                readonly 'aria-selected': true | undefined;
+                readonly 'aria-disabled': true | undefined;
+                readonly 'data-selected': true | undefined;
+                readonly 'data-value': string;
+                readonly 'data-disabled': "" | undefined;
+                readonly 'data-unavailable': "" | undefined;
+                readonly 'data-today': "" | undefined;
+                readonly 'data-outside-month': "" | undefined;
+                readonly 'data-outside-visible-months': "" | undefined;
+                readonly 'data-focused': "" | undefined;
+                readonly tabindex: 0 | -1 | undefined;
+            }) & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click">;
+            };
+            disabled: boolean;
+            unavailable: boolean | undefined;
+            selected: boolean;
+        };
+    };
+    events: DateEvents;
+};
+export type DatePickerDateProps = typeof __propDef.props;
+export type DatePickerDateEvents = typeof __propDef.events;
+export type DatePickerDateSlots = typeof __propDef.slots;
+export default class DatePickerDate extends SvelteComponent<DatePickerDateProps, DatePickerDateEvents, DatePickerDateSlots> {
+}
+export {};

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

@@ -0,0 +1,133 @@
+<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;
+const {
+  states: {
+    value: localValue,
+    placeholder: localPlaceholder,
+    isInvalid: localIsInvalid
+  },
+  updateOption,
+  ids
+} = setCtx({
+  defaultValue: value,
+  defaultPlaceholder: placeholder,
+  disabled,
+  granularity,
+  hideTimeZone,
+  hourCycle,
+  locale,
+  maxValue,
+  minValue,
+  readonly,
+  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
+  ],
+  ([
+    $dayId,
+    $descriptionId,
+    $dayPeriodId,
+    $fieldId,
+    $hourId,
+    $minuteId,
+    $monthId,
+    $secondId,
+    $yearId,
+    $validationId,
+    $labelId,
+    $timeZoneNameId
+  ]) => ({
+    day: $dayId,
+    description: $descriptionId,
+    dayPeriod: $dayPeriodId,
+    field: $fieldId,
+    hour: $hourId,
+    minute: $minuteId,
+    month: $monthId,
+    second: $secondId,
+    year: $yearId,
+    validation: $validationId,
+    label: $labelId,
+    timeZoneName: $timeZoneNameId
+  })
+);
+$:
+  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);
+$:
+  slotProps = {
+    isInvalid: $localIsInvalid,
+    ids: $idValues
+  };
+</script>
+
+<slot {...slotProps} />

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

@@ -0,0 +1,67 @@
+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;
+            };
+        };
+    };
+};
+export type DatePickerFieldProps = typeof __propDef.props;
+export type DatePickerFieldEvents = typeof __propDef.events;
+export type DatePickerFieldSlots = typeof __propDef.slots;
+export default class DatePickerField extends SvelteComponent<DatePickerFieldProps, DatePickerFieldEvents, DatePickerFieldSlots> {
+}
+export {};

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

@@ -0,0 +1,20 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCalendarAttrs, getCtx } from "../ctx.js";
+export let asChild = false;
+const {
+  elements: { grid }
+} = getCtx();
+const attrs = getCalendarAttrs("grid");
+$:
+  builder = $grid;
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<table {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</table>
+{/if}

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

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import type { GridProps } from "../types.js";
+declare const __propDef: {
+    props: GridProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            builder: {
+                tabindex: number;
+                role: string;
+                'aria-readonly': string | undefined;
+                'aria-disabled': string | undefined;
+                'data-readonly': string | undefined;
+                'data-disabled': string | undefined;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: import("svelte/action").Action<any, any, Record<never, any>>;
+            };
+        };
+    };
+};
+export type DatePickerGridProps = typeof __propDef.props;
+export type DatePickerGridEvents = typeof __propDef.events;
+export type DatePickerGridSlots = typeof __propDef.slots;
+export default class DatePickerGrid extends SvelteComponent<DatePickerGridProps, DatePickerGridEvents, DatePickerGridSlots> {
+}
+export {};

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

@@ -0,0 +1,28 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCalendarAttrs, getCtx } from "../ctx.js";
+export let asChild = false;
+const {
+  elements: { heading },
+  states: { headingValue }
+} = getCtx();
+const attrs = getCalendarAttrs("heading");
+$:
+  builder = $heading;
+$:
+  Object.assign(builder, attrs);
+$:
+  slotProps = {
+    builder,
+    headingValue: $headingValue
+  };
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div {...builder} use:builder.action {...$$restProps}>
+		<slot {...slotProps}>
+			{$headingValue}
+		</slot>
+	</div>
+{/if}

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

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import type { HeadingProps } from "../types.js";
+declare const __propDef: {
+    props: HeadingProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            builder: {
+                'aria-hidden': boolean;
+                'data-disabled': string | undefined;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: import("svelte/action").Action<any, any, Record<never, any>>;
+            };
+            headingValue: string;
+        };
+    };
+};
+export type DatePickerHeadingProps = typeof __propDef.props;
+export type DatePickerHeadingEvents = typeof __propDef.events;
+export type DatePickerHeadingSlots = typeof __propDef.slots;
+export default class DatePickerHeading extends SvelteComponent<DatePickerHeadingProps, DatePickerHeadingEvents, DatePickerHeadingSlots> {
+}
+export {};

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

@@ -0,0 +1,32 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCtx, getFieldAttrs } from "../ctx.js";
+export let asChild = false;
+export let id = void 0;
+const {
+  elements: { field },
+  states: { segmentContents },
+  ids
+} = getCtx();
+$:
+  if (id) {
+    ids.dateField.field.set(id);
+  }
+const attrs = getFieldAttrs("input");
+$:
+  builder = $field;
+$:
+  Object.assign(builder, attrs);
+$:
+  slotProps = {
+    builder,
+    segments: $segmentContents
+  };
+</script>
+
+{#if asChild}
+	<slot {...slotProps} />
+{:else}
+	<div {...builder} use:builder.action {...$$restProps}>
+		<slot {...slotProps} />
+	</div>
+{/if}

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

@@ -0,0 +1,38 @@
+import { SvelteComponent } from "svelte";
+import type { InputProps } from "../types.js";
+declare const __propDef: {
+    props: InputProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            builder: {
+                role: string;
+                id: string;
+                'aria-labelledby': string;
+                'aria-describedby': string;
+                'aria-disabled': string | undefined;
+                'aria-readonly': string | undefined;
+                'data-invalid': string | undefined;
+                'data-disabled': string | undefined;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: <Node_2 extends unknown>() => {
+                    destroy(): void;
+                };
+            };
+            segments: {
+                part: import("@melt-ui/svelte/index.js").SegmentPart;
+                value: string;
+            }[];
+        };
+    };
+};
+export type DatePickerInputProps = typeof __propDef.props;
+export type DatePickerInputEvents = typeof __propDef.events;
+export type DatePickerInputSlots = typeof __propDef.slots;
+export default class DatePickerInput extends SvelteComponent<DatePickerInputProps, DatePickerInputEvents, DatePickerInputSlots> {
+}
+export {};

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

@@ -0,0 +1,25 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getCtx, getFieldAttrs } from "../ctx.js";
+export let asChild = false;
+export let id = void 0;
+const {
+  elements: { label },
+  ids
+} = getCtx();
+if (id) {
+  ids.dateField.label.set(id);
+}
+const attrs = getFieldAttrs("label");
+$:
+  builder = $label;
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<span {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</span>
+{/if}

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

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { LabelProps } from "../types.js";
+declare const __propDef: {
+    props: LabelProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            builder: {
+                id: string;
+                'data-invalid': string | undefined;
+                'data-disabled': string | undefined;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => {
+                    destroy: () => void;
+                };
+            };
+        };
+    };
+};
+export type DatePickerLabelProps = typeof __propDef.props;
+export type DatePickerLabelEvents = typeof __propDef.events;
+export type DatePickerLabelSlots = typeof __propDef.slots;
+export default class DatePickerLabel extends SvelteComponent<DatePickerLabelProps, DatePickerLabelEvents, DatePickerLabelSlots> {
+}
+export {};