@ui-sdk/vue 0.0.0-stage → 0.1.0-beta.1

package/dist/date-picker.d.ts

@@ -0,0 +1,328 @@
+import type { Anchor, ChangeDetails, DismissAttemptDetails, Side } from "@ui-sdk/core";
+import type { DateMatchers, ISOMonth } from "@ui-sdk/core/calendar";
+import { type DatePickerContentProps, type DatePickerController, type DatePickerDismissReason, type DatePickerMode, type DatePickerMonthChangeReason, type DatePickerOpenChangeReason, type DatePickerValue, type DatePickerValueChangeReason } from "@ui-sdk/core/date-picker";
+import { type PropType } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+/**
+ * The root, and the hidden inputs that submit ISO dates. Without content it
+ * renders an input, or two in range mode, the trigger and the popup.
+ * @stable
+ */
+declare const DatePicker: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    mode: PropType<DatePickerMode>;
+    value: {
+        type: PropType<DatePickerValue>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<DatePickerValue>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<DatePickerValue>;
+        default: undefined;
+    };
+    month: PropType<ISOMonth>;
+    defaultMonth: PropType<ISOMonth>;
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    closeOnSelect: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    presentation: PropType<"auto" | "popover" | "sheet">;
+    dismissible: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    min: StringConstructor;
+    max: StringConstructor;
+    unavailable: PropType<DateMatchers>;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    months: NumberConstructor;
+    pageBy: PropType<"month" | "page">;
+    locale: StringConstructor;
+    weekStartsOn: NumberConstructor;
+    weekdayFormat: PropType<"narrow" | "short" | "long">;
+    monthFormat: PropType<"narrow" | "short" | "long">;
+    fixedWeeks: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    showOutsideDays: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    today: StringConstructor;
+    timeZone: StringConstructor;
+    minDays: NumberConstructor;
+    maxDays: NumberConstructor;
+    allowUnavailable: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    startName: StringConstructor;
+    endName: StringConstructor;
+    form: StringConstructor;
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: PropType<Element | DocumentFragment | null>;
+    controller: PropType<DatePickerController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/date-picker").DatePickerState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: DatePickerValue) => true;
+    "update:modelValue": (_value: DatePickerValue) => true;
+    valueChange: (_value: DatePickerValue, _details: ChangeDetails<DatePickerValueChangeReason>) => true;
+    "update:month": (_month: ISOMonth) => true;
+    monthChange: (_month: ISOMonth, _details: ChangeDetails<DatePickerMonthChangeReason>) => true;
+    "update:open": (_open: boolean) => true;
+    openChange: (_open: boolean, _details: ChangeDetails<DatePickerOpenChangeReason>) => true;
+    openChangeComplete: (_open: boolean) => true;
+    dismissAttempt: (_details: DismissAttemptDetails<DatePickerDismissReason>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    mode: PropType<DatePickerMode>;
+    value: {
+        type: PropType<DatePickerValue>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<DatePickerValue>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<DatePickerValue>;
+        default: undefined;
+    };
+    month: PropType<ISOMonth>;
+    defaultMonth: PropType<ISOMonth>;
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    closeOnSelect: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    presentation: PropType<"auto" | "popover" | "sheet">;
+    dismissible: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    min: StringConstructor;
+    max: StringConstructor;
+    unavailable: PropType<DateMatchers>;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    months: NumberConstructor;
+    pageBy: PropType<"month" | "page">;
+    locale: StringConstructor;
+    weekStartsOn: NumberConstructor;
+    weekdayFormat: PropType<"narrow" | "short" | "long">;
+    monthFormat: PropType<"narrow" | "short" | "long">;
+    fixedWeeks: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    showOutsideDays: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    today: StringConstructor;
+    timeZone: StringConstructor;
+    minDays: NumberConstructor;
+    maxDays: NumberConstructor;
+    allowUnavailable: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    startName: StringConstructor;
+    endName: StringConstructor;
+    form: StringConstructor;
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: PropType<Element | DocumentFragment | null>;
+    controller: PropType<DatePickerController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: DatePickerValue) => any) | undefined;
+    "onUpdate:open"?: ((_open: boolean) => any) | undefined;
+    onOpenChange?: ((_open: boolean, _details: ChangeDetails<DatePickerOpenChangeReason>) => any) | undefined;
+    onOpenChangeComplete?: ((_open: boolean) => any) | undefined;
+    onDismissAttempt?: ((_details: DismissAttemptDetails<DatePickerDismissReason>) => any) | undefined;
+    "onUpdate:value"?: ((_value: DatePickerValue) => any) | undefined;
+    onValueChange?: ((_value: DatePickerValue, _details: ChangeDetails<DatePickerValueChangeReason>) => any) | undefined;
+    "onUpdate:month"?: ((_month: string) => any) | undefined;
+    onMonthChange?: ((_month: string, _details: ChangeDetails<DatePickerMonthChangeReason>) => any) | undefined;
+}>, {
+    value: DatePickerValue;
+    disabled: boolean;
+    open: boolean;
+    debug: boolean;
+    defaultValue: DatePickerValue;
+    required: boolean;
+    defaultOpen: boolean;
+    dismissible: boolean;
+    readOnly: boolean;
+    closeOnSelect: boolean;
+    modelValue: DatePickerValue;
+    fixedWeeks: boolean;
+    showOutsideDays: boolean;
+    allowUnavailable: boolean;
+}, PartSlots<import("@ui-sdk/core/date-picker").DatePickerPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * A text input that reads a date typed in the page's language on Enter or
+ * blur. `end` makes it a range's end.
+ * @stable
+ */
+declare const DatePickerInput: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    end: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/date-picker").DatePickerInputState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    end: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    end: boolean;
+}, PartSlots<import("@ui-sdk/core/date-picker").DatePickerPrimitive, "input">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "input">;
+/**
+ * Opens the calendar. Named "Choose date" and the date chosen; pass `aria-label` in another language.
+ * @stable
+ */
+declare const DatePickerTrigger: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/date-picker").DatePickerTriggerState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/date-picker").DatePickerPrimitive, "trigger">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "button">;
+/**
+ * The popup. Without content it renders Previous, the heading, Next and a
+ * grid for each month; every Calendar part works inside it.
+ * @stable
+ */
+declare const DatePickerContent: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    side: PropType<Side>;
+    align: PropType<"start" | "center" | "end">;
+    sideOffset: NumberConstructor;
+    alignOffset: NumberConstructor;
+    collisionPadding: NumberConstructor;
+    arrowPadding: NumberConstructor;
+    anchor: PropType<Anchor | string | null>;
+    finalFocus: PropType<DatePickerContentProps["finalFocus"]>;
+    keepMounted: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: PropType<Element | DocumentFragment | null>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    side: PropType<Side>;
+    align: PropType<"start" | "center" | "end">;
+    sideOffset: NumberConstructor;
+    alignOffset: NumberConstructor;
+    collisionPadding: NumberConstructor;
+    arrowPadding: NumberConstructor;
+    anchor: PropType<Anchor | string | null>;
+    finalFocus: PropType<DatePickerContentProps["finalFocus"]>;
+    keepMounted: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: PropType<Element | DocumentFragment | null>;
+}>> & Readonly<{}>, {
+    keepMounted: boolean;
+}, PartSlots<import("@ui-sdk/core/date-picker").DatePickerPrimitive, "content">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * The format to type, like "MM/DD/YYYY". The inputs are described by it.
+ * @stable
+ */
+declare const DatePickerHint: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/date-picker").DatePickerHintState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/date-picker").DatePickerPrimitive, "hint">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "span">;
+/**
+ * Clears the value and focuses the input.
+ * @stable
+ */
+declare const DatePickerClear: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/date-picker").DatePickerClearState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/date-picker").DatePickerClearState>>>, "button">;
+/**
+ * Selects the value it holds, like the last 7 days.
+ * @stable
+ */
+declare const DatePickerPreset: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<DatePickerValue>;
+        required: true;
+    };
+}>, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/date-picker").DatePickerPresetState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<DatePickerValue>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/date-picker").DatePickerPrimitive, "preset">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "button">;
+export { CalendarDay, CalendarGrid, CalendarHeading, CalendarMonthSelect, CalendarNext, CalendarPrevious, CalendarWeekday, CalendarWeekdays, CalendarWeeks, CalendarYearSelect, } from "./calendar.js";
+export { createDatePickerController } from "@ui-sdk/core/date-picker";
+export type { CalendarDayState, CalendarGridCell, CalendarGridState, CalendarHeadingState, CalendarSelectOption, CalendarSelectState, CalendarStepState, CalendarWeekdayState, DateMatcher, DateMatchers, DatePickerApi, DatePickerChangeOptions, DatePickerClearState, DatePickerContentProps, DatePickerContentState, DatePickerController, DatePickerDismissReason, DatePickerHintState, DatePickerInputProps, DatePickerInputState, DatePickerMode, DatePickerMonthChangeReason, DatePickerOpenChangeReason, DatePickerOptions, DatePickerPresetProps, DatePickerPresetState, DatePickerPrimitive, DatePickerState, DatePickerTriggerState, DatePickerValue, DatePickerValueChangeReason, ISOMonth, } from "@ui-sdk/core/date-picker";
+export { DatePicker, DatePickerClear, DatePickerContent, DatePickerHint, DatePickerInput, DatePickerPreset, DatePickerTrigger, };

package/dist/date-picker.js

@@ -0,0 +1,354 @@
+// src/date-picker.ts
+import {
+  datePicker as datePickerPrimitive
+} from "@ui-sdk/core/date-picker";
+import {
+  defineComponent,
+  Fragment,
+  h,
+  inject,
+  provide
+} from "vue";
+import {
+  CalendarGrid,
+  CalendarHeading,
+  CalendarNext,
+  CalendarPrevious
+} from "./calendar.js";
+import { CalendarKey } from "./calendar-context.js";
+import { slotContent } from "./children.js";
+import { useFieldControl } from "./field-context.js";
+import {
+  containerProp,
+  renderPopup,
+  sheetViewport,
+  usePopupContainer
+} from "./popup.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  orModel,
+  useHandle,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { readOnlyOf } from "./text-control.js";
+import {
+  CalendarDay,
+  CalendarGrid as CalendarGrid2,
+  CalendarHeading as CalendarHeading2,
+  CalendarMonthSelect,
+  CalendarNext as CalendarNext2,
+  CalendarPrevious as CalendarPrevious2,
+  CalendarWeekday,
+  CalendarWeekdays,
+  CalendarWeeks,
+  CalendarYearSelect
+} from "./calendar.js";
+import { createDatePickerController } from "@ui-sdk/core/date-picker";
+var ContainerKey = /* @__PURE__ */ Symbol(
+  "date-picker-container"
+);
+var useDatePicker = () => useHandle(datePickerPrimitive);
+var parts = createParts(datePickerPrimitive, { clear: "button" });
+var datePickerValue = {
+  type: null,
+  default: void 0
+};
+var DatePicker = withElement(
+  "div",
+  defineComponent({
+    name: "DatePicker",
+    inheritAttrs: false,
+    props: {
+      mode: String,
+      value: datePickerValue,
+      modelValue: datePickerValue,
+      defaultValue: datePickerValue,
+      month: String,
+      defaultMonth: String,
+      open: optionalBoolean,
+      defaultOpen: optionalBoolean,
+      closeOnSelect: optionalBoolean,
+      presentation: String,
+      dismissible: optionalBoolean,
+      min: String,
+      max: String,
+      unavailable: null,
+      disabled: optionalBoolean,
+      readOnly: optionalBoolean,
+      months: Number,
+      pageBy: String,
+      locale: String,
+      weekStartsOn: Number,
+      weekdayFormat: String,
+      monthFormat: String,
+      fixedWeeks: optionalBoolean,
+      showOutsideDays: optionalBoolean,
+      today: String,
+      timeZone: String,
+      minDays: Number,
+      maxDays: Number,
+      allowUnavailable: optionalBoolean,
+      name: String,
+      startName: String,
+      endName: String,
+      form: String,
+      required: optionalBoolean,
+      // Renders the popup into this element instead of in place.
+      container: containerProp,
+      controller: Object,
+      debug: optionalBoolean
+    },
+    emits: {
+      "update:value": (_value) => true,
+      "update:modelValue": (_value) => true,
+      valueChange: (_value, _details) => true,
+      "update:month": (_month) => true,
+      monthChange: (_month, _details) => true,
+      "update:open": (_open) => true,
+      openChange: (_open, _details) => true,
+      openChangeComplete: (_open) => true,
+      dismissAttempt: (_details) => true
+    },
+    slots: Object,
+    setup(props, { slots, attrs, emit }) {
+      const field = useFieldControl();
+      const picker = usePrimitive(datePickerPrimitive, () => ({
+        mode: props.mode,
+        value: orModel(props.value, props.modelValue),
+        defaultValue: props.defaultValue,
+        month: props.month,
+        defaultMonth: props.defaultMonth,
+        open: props.open,
+        defaultOpen: props.defaultOpen,
+        closeOnSelect: props.closeOnSelect,
+        presentation: props.presentation,
+        dismissible: props.dismissible,
+        min: props.min,
+        max: props.max,
+        unavailable: props.unavailable,
+        disabled: props.disabled || field?.disabled(),
+        readOnly: readOnlyOf(props, attrs),
+        months: props.months,
+        pageBy: props.pageBy,
+        locale: props.locale,
+        weekStartsOn: props.weekStartsOn,
+        weekdayFormat: props.weekdayFormat,
+        monthFormat: props.monthFormat,
+        fixedWeeks: props.fixedWeeks,
+        showOutsideDays: props.showOutsideDays,
+        today: props.today,
+        timeZone: props.timeZone,
+        minDays: props.minDays,
+        maxDays: props.maxDays,
+        allowUnavailable: props.allowUnavailable,
+        name: props.name ?? field?.name(),
+        startName: props.startName,
+        endName: props.endName,
+        form: props.form,
+        required: props.required,
+        controller: props.controller,
+        debug: props.debug,
+        // The change events run first, so canceling one also keeps v-model as it was.
+        onValueChange: (value, details) => {
+          emit("valueChange", value, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:value", value);
+          emit("update:modelValue", value);
+        },
+        onMonthChange: (month, details) => {
+          emit("monthChange", month, details);
+          if (!details.canceled) {
+            emit("update:month", month);
+          }
+        },
+        onOpenChange: (open, details) => {
+          emit("openChange", open, details);
+          if (!details.canceled) {
+            emit("update:open", open);
+          }
+        },
+        onOpenChangeComplete: (open) => emit("openChangeComplete", open),
+        onDismissAttempt: (details) => emit("dismissAttempt", details)
+      }));
+      provide(CalendarKey, picker);
+      provide(ContainerKey, () => props.container);
+      const defaultContent = () => [
+        h(DatePickerInput),
+        root.state.mode === "range" ? h(DatePickerInput, { end: true }) : null,
+        h(DatePickerTrigger),
+        h(DatePickerContent)
+      ];
+      const hiddenInputs = () => {
+        const fieldName = field?.name();
+        const range = root.state.mode === "range";
+        const submitsStart = range ? props.startName ?? props.name ?? fieldName : props.name ?? fieldName;
+        const submitsEnd = range && (props.endName ?? props.name ?? fieldName);
+        return h(Fragment, [
+          submitsStart ? h("input", picker.slot("hidden-input", { id: "start" })) : null,
+          submitsEnd ? h("input", picker.slot("hidden-input", { end: true, id: "end" })) : null
+        ]);
+      };
+      const root = usePart(picker, "root", void 0, void 0, {
+        tag: "div",
+        children: (state) => slotContent(slots.default, { state }) ?? defaultContent(),
+        hidden: hiddenInputs
+      });
+      return root;
+    }
+  })
+);
+var DatePickerInput = withElement(
+  "input",
+  defineComponent({
+    name: "DatePickerInput",
+    inheritAttrs: false,
+    props: { end: optionalBoolean },
+    slots: Object,
+    setup(props) {
+      const field = useFieldControl();
+      const part = () => ({ end: props.end, id: props.end ? "end" : "start" });
+      return usePart(datePickerPrimitive, "input", part, void 0, {
+        tag: "input",
+        // A field names and describes the start input.
+        extend: (input) => field && !props.end ? field.props(input) : input
+      });
+    }
+  })
+);
+var calendarIcon = () => h(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  },
+  [
+    h("rect", { x: "2", y: "3", width: "12", height: "11", rx: "1.5" }),
+    h("path", { d: "M2 6.5h12M5.5 1.5v3M10.5 1.5v3" })
+  ]
+);
+var DatePickerTrigger = withElement(
+  "button",
+  defineComponent({
+    name: "DatePickerTrigger",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      return usePart(datePickerPrimitive, "trigger", void 0, void 0, {
+        tag: "button",
+        children: (state) => slotContent(slots.default, { state }) ?? calendarIcon()
+      });
+    }
+  })
+);
+var DatePickerContent = withElement(
+  "div",
+  defineComponent({
+    name: "DatePickerContent",
+    inheritAttrs: false,
+    props: {
+      side: String,
+      align: String,
+      sideOffset: Number,
+      alignOffset: Number,
+      collisionPadding: Number,
+      arrowPadding: Number,
+      anchor: [Object, String],
+      finalFocus: [String, Object, Function],
+      keepMounted: optionalBoolean,
+      // Renders the popup into this element instead of in place.
+      container: containerProp
+    },
+    slots: Object,
+    setup(props, { slots }) {
+      const picker = useDatePicker();
+      const fromRoot = inject(ContainerKey, () => void 0);
+      const target = usePopupContainer(() => props.container ?? fromRoot());
+      const content = () => {
+        const { container, ...content2 } = props;
+        return content2;
+      };
+      const defaultContent = () => [
+        h("div", [h(CalendarPrevious), h(CalendarHeading), h(CalendarNext)]),
+        ...Array.from(
+          { length: picker.state.months },
+          (_, offset) => h(CalendarGrid, { key: offset, offset })
+        )
+      ];
+      const part = usePart(picker, "content", content, void 0, {
+        tag: "div",
+        children: (state) => slotContent(slots.default, { state }) ?? defaultContent()
+      });
+      return () => {
+        const element = part();
+        if (!element) {
+          return null;
+        }
+        return renderPopup(sheetViewport(picker, element), target());
+      };
+    }
+  })
+);
+var DatePickerHint = withElement(
+  "span",
+  defineComponent({
+    name: "DatePickerHint",
+    inheritAttrs: false,
+    slots: Object,
+    setup(_, { slots }) {
+      return usePart(datePickerPrimitive, "hint", void 0, void 0, {
+        tag: "span",
+        children: (state) => slotContent(slots.default, { state }) ?? state.placeholder
+      });
+    }
+  })
+);
+var DatePickerClear = parts.Clear;
+var DatePickerPreset = withElement(
+  "button",
+  defineComponent({
+    name: "DatePickerPreset",
+    inheritAttrs: false,
+    props: {
+      value: {
+        type: null,
+        required: true
+      }
+    },
+    slots: Object,
+    setup(props) {
+      const part = () => ({
+        value: props.value,
+        id: JSON.stringify(props.value)
+      });
+      return usePart(datePickerPrimitive, "preset", part, void 0, "button");
+    }
+  })
+);
+export {
+  CalendarDay,
+  CalendarGrid2 as CalendarGrid,
+  CalendarHeading2 as CalendarHeading,
+  CalendarMonthSelect,
+  CalendarNext2 as CalendarNext,
+  CalendarPrevious2 as CalendarPrevious,
+  CalendarWeekday,
+  CalendarWeekdays,
+  CalendarWeeks,
+  CalendarYearSelect,
+  DatePicker,
+  DatePickerClear,
+  DatePickerContent,
+  DatePickerHint,
+  DatePickerInput,
+  DatePickerPreset,
+  DatePickerTrigger,
+  createDatePickerController
+};

package/dist/date.d.ts

@@ -0,0 +1,2 @@
+export { addDays, addMonths, addYears, clampDate, dateFormatter, dateParts, datePattern, daysBetween, daysInMonth, endOfMonth, endOfWeek, firstDayOfWeek, formatDate, formatDateRange, formatDateToParts, isISODate, isSameMonth, isoDate, monthGrid, monthNames, parseDate, startOfMonth, startOfWeek, toISODate, todayDate, weekday, weekdayNames, } from "@ui-sdk/core/date";
+export type { DateField, DateParts, DatePattern, ISODate, } from "@ui-sdk/core/date";