@plexui/vue 0.0.0-stage → 0.1.1

package/dist/es/components/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,167 @@
+import { computed, defineComponent, h, provide, toRaw } from "vue";
+import { isAfter } from "../../lib/dateUtils.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popover/index.js";
+import { DateRangeCalendar, DateRangeShortcuts } from "./Calendar.js";
+import { DateRangeContextKey } from "./context.js";
+import { DateRangeTrigger } from "./Trigger.js";
+import {} from "./types.js";
+// Vue port of packages/ui/src/components/DateRangePicker/DateRangePicker.tsx.
+// - `value` + `update:value` (`v-model:value`), plus `change`, which also
+//   carries the selected shortcut like React's `onChange(range, shortcut)`.
+//   Like React the picker is controlled: a parent that does not update
+//   `value` keeps the shown range.
+// - DateTime values are read unwrapped (`toRaw`), so a `ref()` holding a
+//   range (a deep reactive proxy) works like a plain value.
+const DateRangePickerComponent = defineComponent({
+    name: "DateRangePicker",
+    inheritAttrs: false,
+    props: {
+        /** The selected date range value (`v-model:value`). */
+        value: { type: Array, default: null },
+        /** Defines the earliest selectable date (inclusive). */
+        min: Object,
+        /** Defines the latest selectable date (inclusive). */
+        max: Object,
+        /** Maximum length of the selectable range in days (inclusive). */
+        maxRangeDays: Number,
+        /** Date range shortcuts for quick selection, shown to the left of the calendar. */
+        shortcuts: Array,
+        /** The preferred side of the trigger to render against when open. @default "bottom" */
+        side: { type: String, default: "bottom" },
+        /** The distance in pixels from the trigger. @default 8 */
+        sideOffset: { type: Number, default: 8 },
+        /** The preferred alignment against the trigger. @default "center" */
+        align: { type: String, default: "center" },
+        /** An offset in pixels from the "start" or "end" alignment options. @default 0 */
+        alignOffset: Number,
+        /** Disables the select visually and from interactions. @default false */
+        disabled: { type: Boolean, default: false },
+        /** Placeholder text for the select. @default "Select date range..." */
+        placeholder: { type: String, default: "Select date range..." },
+        /** Style variant for the select trigger. @default "outline" */
+        variant: { type: String, default: "outline" },
+        /** Determines if the select trigger should be a fully rounded pill shape. @default true */
+        pill: { type: Boolean, default: true },
+        /** Size of the control: `3xs` 22px up to `3xl` 48px. @default "md" */
+        size: { type: String, default: "md" },
+        /** Icon displayed in the far right of the select trigger. @default "dropdown" */
+        dropdownIconType: String,
+        /** Custom class applied to the select trigger */
+        triggerClassName: String,
+        /** Display calendar icon at the start of the trigger. @default true */
+        triggerShowIcon: { type: Boolean, default: true },
+        /** Shows a stepper in the trigger when the selected range matches the unit ('month'). */
+        triggerStepperUnit: String,
+        /** Format of dates displayed in the trigger. @default "MM/dd/yy" */
+        triggerDateFormat: { type: String, default: "MM/dd/yy" },
+        /** Display a clear action that allows the select to be unset. @default false */
+        clearable: { type: Boolean, default: false },
+        /** Extends select to 100% of available width. @default false */
+        block: { type: Boolean, default: false },
+    },
+    emits: {
+        "update:value": (_nextValue) => true,
+        "change": (_nextValue, _shortcut) => true,
+    },
+    setup(props, { emit }) {
+        const unwrap = (value) => (value ? toRaw(value) : value);
+        // A new range only when `value` or one of its endpoints changes, as the
+        // identity React's effects see. The endpoints are read through the array
+        // so that `range.value[0] = date` on a `ref()` range is tracked.
+        const value = computed(() => {
+            const range = props.value;
+            if (!range)
+                return null;
+            return [toRaw(range[0]), toRaw(range[1])];
+        });
+        const store = {
+            get value() {
+                return value.value;
+            },
+            get min() {
+                return unwrap(props.min);
+            },
+            get max() {
+                return unwrap(props.max);
+            },
+            get maxRangeDays() {
+                return props.maxRangeDays;
+            },
+            get triggerStepperUnit() {
+                return props.triggerStepperUnit;
+            },
+            get triggerClassName() {
+                return props.triggerClassName;
+            },
+            get triggerShowIcon() {
+                return props.triggerShowIcon;
+            },
+            get triggerDateFormat() {
+                return props.triggerDateFormat;
+            },
+            get disabled() {
+                return props.disabled;
+            },
+            get variant() {
+                return props.variant;
+            },
+            get pill() {
+                return props.pill;
+            },
+            get block() {
+                return props.block;
+            },
+            get size() {
+                return props.size;
+            },
+            get dropdownIconType() {
+                return props.dropdownIconType;
+            },
+            get clearable() {
+                return props.clearable;
+            },
+            get placeholder() {
+                return props.placeholder;
+            },
+            get shortcuts() {
+                return props.shortcuts;
+            },
+            onChange: (nextValue, shortcut) => {
+                emit("update:value", nextValue);
+                emit("change", nextValue, shortcut);
+            },
+        };
+        provide(DateRangeContextKey, store);
+        return () => {
+            const { min, max } = store;
+            const { align } = props;
+            // min and max are inclusive, so equal bounds allow one date
+            if (min && max && isAfter(min, max)) {
+                throw new Error("DateRangePicker error: `min` date must not be after the `max` date");
+            }
+            return h(Popover, null, {
+                default: () => [
+                    h(PopoverTrigger, null, { default: () => [h(DateRangeTrigger)] }),
+                    h(PopoverContent, {
+                        minWidth: 230,
+                        side: props.side,
+                        sideOffset: props.sideOffset,
+                        align,
+                        alignOffset: props.alignOffset ?? (align === "center" ? 0 : -5),
+                    }, {
+                        default: () => [
+                            h("div", { class: "flex" }, [h(DateRangeShortcuts, { shortcuts: props.shortcuts }), h(DateRangeCalendar)]),
+                        ],
+                    }),
+                ],
+            });
+        };
+    },
+});
+/**
+ * A date range picker: a SelectControl trigger (or a month stepper) opening
+ * two calendars and optional shortcuts in a popover. Bind the range
+ * (`[start, end]` luxon `DateTime`s) with `v-model:value`.
+ */
+export const DateRangePicker = DateRangePickerComponent;
+//# sourceMappingURL=DateRangePicker.js.map

package/dist/es/components/DateRangePicker/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/DateRangePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import type { DateTime } from \"luxon\"\nimport { computed, defineComponent, h, provide, toRaw, type PropType } from \"vue\"\nimport type { ControlSize } from \"@plexui/styles/types\"\nimport { isAfter } from \"../../lib/dateUtils.js\"\nimport { Popover, PopoverContent, PopoverTrigger, type PopoverAlign, type PopoverSide } from \"../Popover/index.js\"\nimport type { DropdownIconType } from \"../SelectControl/index.js\"\nimport { DateRangeCalendar, DateRangeShortcuts } from \"./Calendar.js\"\nimport { DateRangeContextKey, type DateRangeContextValue } from \"./context.js\"\nimport { DateRangeTrigger } from \"./Trigger.js\"\nimport { type DateRange, type DateRangeShortcut } from \"./types.js\"\n\n// Vue port of packages/ui/src/components/DateRangePicker/DateRangePicker.tsx.\n// - `value` + `update:value` (`v-model:value`), plus `change`, which also\n//   carries the selected shortcut like React's `onChange(range, shortcut)`.\n//   Like React the picker is controlled: a parent that does not update\n//   `value` keeps the shown range.\n// - DateTime values are read unwrapped (`toRaw`), so a `ref()` holding a\n//   range (a deep reactive proxy) works like a plain value.\n\nconst DateRangePickerComponent = defineComponent({\n  name: \"DateRangePicker\",\n  inheritAttrs: false,\n  props: {\n    /** The selected date range value (`v-model:value`). */\n    value: { type: Array as unknown as PropType<DateRange | null>, default: null },\n    /** Defines the earliest selectable date (inclusive). */\n    min: Object as PropType<DateTime>,\n    /** Defines the latest selectable date (inclusive). */\n    max: Object as PropType<DateTime>,\n    /** Maximum length of the selectable range in days (inclusive). */\n    maxRangeDays: Number,\n    /** Date range shortcuts for quick selection, shown to the left of the calendar. */\n    shortcuts: Array as PropType<DateRangeShortcut[]>,\n    /** The preferred side of the trigger to render against when open. @default \"bottom\" */\n    side: { type: String as PropType<PopoverSide>, default: \"bottom\" },\n    /** The distance in pixels from the trigger. @default 8 */\n    sideOffset: { type: Number, default: 8 },\n    /** The preferred alignment against the trigger. @default \"center\" */\n    align: { type: String as PropType<PopoverAlign>, default: \"center\" },\n    /** An offset in pixels from the \"start\" or \"end\" alignment options. @default 0 */\n    alignOffset: Number,\n    /** Disables the select visually and from interactions. @default false */\n    disabled: { type: Boolean, default: false },\n    /** Placeholder text for the select. @default \"Select date range...\" */\n    placeholder: { type: String, default: \"Select date range...\" },\n    /** Style variant for the select trigger. @default \"outline\" */\n    variant: { type: String as PropType<\"soft\" | \"outline\" | \"ghost\">, default: \"outline\" },\n    /** Determines if the select trigger should be a fully rounded pill shape. @default true */\n    pill: { type: Boolean, default: true },\n    /** Size of the control: `3xs` 22px up to `3xl` 48px. @default \"md\" */\n    size: { type: String as PropType<ControlSize>, default: \"md\" },\n    /** Icon displayed in the far right of the select trigger. @default \"dropdown\" */\n    dropdownIconType: String as PropType<DropdownIconType>,\n    /** Custom class applied to the select trigger */\n    triggerClassName: String,\n    /** Display calendar icon at the start of the trigger. @default true */\n    triggerShowIcon: { type: Boolean, default: true },\n    /** Shows a stepper in the trigger when the selected range matches the unit ('month'). */\n    triggerStepperUnit: String as PropType<\"month\">,\n    /** Format of dates displayed in the trigger. @default \"MM/dd/yy\" */\n    triggerDateFormat: { type: String, default: \"MM/dd/yy\" },\n    /** Display a clear action that allows the select to be unset. @default false */\n    clearable: { type: Boolean, default: false },\n    /** Extends select to 100% of available width. @default false */\n    block: { type: Boolean, default: false },\n  },\n  emits: {\n    \"update:value\": (_nextValue: DateRange | null) => true,\n    \"change\": (_nextValue: DateRange | null, _shortcut?: DateRangeShortcut) => true,\n  },\n  setup(props, { emit }) {\n    const unwrap = <T>(value: T): T => (value ? toRaw(value) : value)\n\n    // A new range only when `value` or one of its endpoints changes, as the\n    // identity React's effects see. The endpoints are read through the array\n    // so that `range.value[0] = date` on a `ref()` range is tracked.\n    const value = computed<DateRange | null>(() => {\n      const range = props.value\n      if (!range) return null\n      return [toRaw(range[0]), toRaw(range[1])]\n    })\n\n    const store: DateRangeContextValue = {\n      get value() {\n        return value.value\n      },\n      get min() {\n        return unwrap(props.min)\n      },\n      get max() {\n        return unwrap(props.max)\n      },\n      get maxRangeDays() {\n        return props.maxRangeDays\n      },\n      get triggerStepperUnit() {\n        return props.triggerStepperUnit\n      },\n      get triggerClassName() {\n        return props.triggerClassName\n      },\n      get triggerShowIcon() {\n        return props.triggerShowIcon\n      },\n      get triggerDateFormat() {\n        return props.triggerDateFormat\n      },\n      get disabled() {\n        return props.disabled\n      },\n      get variant() {\n        return props.variant\n      },\n      get pill() {\n        return props.pill\n      },\n      get block() {\n        return props.block\n      },\n      get size() {\n        return props.size\n      },\n      get dropdownIconType() {\n        return props.dropdownIconType\n      },\n      get clearable() {\n        return props.clearable\n      },\n      get placeholder() {\n        return props.placeholder\n      },\n      get shortcuts() {\n        return props.shortcuts\n      },\n      onChange: (nextValue, shortcut) => {\n        emit(\"update:value\", nextValue)\n        emit(\"change\", nextValue, shortcut)\n      },\n    }\n    provide(DateRangeContextKey, store)\n\n    return () => {\n      const { min, max } = store\n      const { align } = props\n\n      // min and max are inclusive, so equal bounds allow one date\n      if (min && max && isAfter(min, max)) {\n        throw new Error(\"DateRangePicker error: `min` date must not be after the `max` date\")\n      }\n\n      return h(Popover, null, {\n        default: () => [\n          h(PopoverTrigger, null, { default: () => [h(DateRangeTrigger)] }),\n          h(\n            PopoverContent,\n            {\n              minWidth: 230,\n              side: props.side,\n              sideOffset: props.sideOffset,\n              align,\n              alignOffset: props.alignOffset ?? (align === \"center\" ? 0 : -5),\n            },\n            {\n              default: () => [\n                h(\"div\", { class: \"flex\" }, [h(DateRangeShortcuts, { shortcuts: props.shortcuts }), h(DateRangeCalendar)]),\n              ],\n            },\n          ),\n        ],\n      })\n    }\n  },\n})\n\nexport type DateRangePickerProps = InstanceType<typeof DateRangePickerComponent>[\"$props\"]\n\n/**\n * A date range picker: a SelectControl trigger (or a month stepper) opening\n * two calendars and optional shortcuts in a popover. Bind the range\n * (`[start, end]` luxon `DateTime`s) with `v-model:value`.\n */\nexport const DateRangePicker = DateRangePickerComponent\n"]}

package/dist/es/components/DateRangePicker/Trigger.js

@@ -0,0 +1,127 @@
+import clsx from "clsx";
+import { computed, defineComponent, h } from "vue";
+import { getMonthStartAndEnd, isBefore, isSameDay } from "../../lib/dateUtils.js";
+import { Button } from "../Button/index.js";
+import { Calendar, ChevronLeft, ChevronRight } from "../Icon/index.js";
+import { SelectControl } from "../SelectControl/index.js";
+import s from "@plexui/styles/components/DateRangePicker/Trigger.module.css";
+import { useDateRangeContext } from "./context.js";
+import {} from "./types.js";
+// Vue port of packages/ui/src/components/DateRangePicker/Trigger.tsx.
+// Attributes on the trigger (the popover trigger's props) land on the
+// SelectControl last, like React's `{...props}` spread.
+export const DateRangeTrigger = defineComponent({
+    name: "DateRangeTrigger",
+    inheritAttrs: false,
+    setup(_props, { attrs }) {
+        const context = useDateRangeContext();
+        const isStepperView = computed(() => rangeMatchesStepperUnit(context.value, context.triggerStepperUnit, {
+            min: context.min,
+            max: context.max,
+        }));
+        const activeShortcut = computed(() => {
+            const { value, shortcuts } = context;
+            if (!value || !shortcuts?.length) {
+                return undefined;
+            }
+            return shortcuts.find((sc) => {
+                const [start, end] = sc.getDateRange();
+                return isSameDay(start, value[0]) && isSameDay(end, value[1]);
+            });
+        });
+        const handleClearClick = () => {
+            context.onChange(null);
+        };
+        const renderStepperView = () => {
+            const { value, min, max, disabled, pill, onChange } = context;
+            if (!value) {
+                return null;
+            }
+            const [startDate, endDate] = value;
+            const canGoBack = !min || isBefore(min, startDate.startOf("month"));
+            const canGoForward = !max || isBefore(endDate.endOf("month"), max);
+            return h("span", { class: s.StepperContent }, [
+                h(Button, {
+                    "class": s.StepperPrevious,
+                    "color": "secondary",
+                    "variant": "ghost",
+                    "disabled": disabled || !canGoBack,
+                    "size": "3xs",
+                    "uniform": true,
+                    "pill": pill,
+                    "aria-label": "Previous month",
+                    // Stop the trigger from opening; the step itself runs on click so
+                    // Enter and Space work too
+                    "onPointerdown": (evt) => evt.stopPropagation(),
+                    "onClick": (evt) => {
+                        evt.stopPropagation();
+                        onChange(getMonthStartAndEnd(startDate.minus({ months: 1 }), { min, max }));
+                    },
+                }, { default: () => [h(ChevronLeft)] }),
+                h("span", { class: s.StepperText }, [startDate.monthLong, " ", String(startDate.year)]),
+                h(Button, {
+                    "class": s.StepperNext,
+                    "color": "secondary",
+                    "variant": "ghost",
+                    "disabled": disabled || !canGoForward,
+                    "size": "3xs",
+                    "uniform": true,
+                    "pill": pill,
+                    "aria-label": "Next month",
+                    "onPointerdown": (evt) => evt.stopPropagation(),
+                    "onClick": (evt) => {
+                        evt.stopPropagation();
+                        onChange(getMonthStartAndEnd(startDate.plus({ months: 1 }), { min, max }));
+                    },
+                }, { default: () => [h(ChevronRight)] }),
+            ]);
+        };
+        const renderDisplayView = () => {
+            const { placeholder, value, triggerDateFormat } = context;
+            const shortcut = activeShortcut.value;
+            if (shortcut) {
+                return h("span", { class: "inline-block" }, shortcut.label);
+            }
+            if (value && isSameDay(value[0], value[1])) {
+                return h("span", { class: "inline-block tabular-nums" }, value[0].toFormat(triggerDateFormat));
+            }
+            if (value) {
+                return h("span", { class: "inline-block tabular-nums" }, [
+                    value[0].toFormat(triggerDateFormat),
+                    h("span", { class: s.RangeTextSeparator }, "-"),
+                    value[1].toFormat(triggerDateFormat),
+                ]);
+            }
+            return placeholder;
+        };
+        return () => {
+            const stepper = isStepperView.value;
+            return h(SelectControl, {
+                class: clsx(stepper && s.StepperControl, context.triggerClassName),
+                selected: !!context.value,
+                variant: context.variant,
+                pill: context.pill,
+                block: context.block,
+                size: context.size,
+                disabled: context.disabled,
+                StartIcon: context.triggerShowIcon && !stepper ? Calendar : undefined,
+                dropdownIconType: !stepper ? context.dropdownIconType : "none",
+                onClearClick: context.clearable && !stepper ? handleClearClick : undefined,
+                ...attrs,
+            }, { default: () => [stepper ? renderStepperView() : renderDisplayView()] });
+        };
+    },
+});
+const rangeMatchesStepperUnit = (range, stepperUnit, { min, max } = {}) => {
+    // Allows method to be called lazily
+    if (!range || !stepperUnit) {
+        return false;
+    }
+    const [startDate, endDate] = range;
+    const [startDateCompare, endDateCompare] = getMonthStartAndEnd(startDate, {
+        min,
+        max,
+    });
+    return isSameDay(startDateCompare, startDate) && isSameDay(endDateCompare, endDate);
+};
+//# sourceMappingURL=Trigger.js.map

package/dist/es/components/DateRangePicker/Trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trigger.js","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/Trigger.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx from \"clsx\"\nimport type { DateTime } from \"luxon\"\nimport { computed, defineComponent, h, type VNodeChild } from \"vue\"\nimport { getMonthStartAndEnd, isBefore, isSameDay } from \"../../lib/dateUtils.js\"\nimport { Button } from \"../Button/index.js\"\nimport { Calendar, ChevronLeft, ChevronRight } from \"../Icon/index.js\"\nimport { SelectControl } from \"../SelectControl/index.js\"\nimport s from \"@plexui/styles/components/DateRangePicker/Trigger.module.css\"\nimport { useDateRangeContext } from \"./context.js\"\nimport { type DateRange, type DateRangeShortcut } from \"./types.js\"\n\n// Vue port of packages/ui/src/components/DateRangePicker/Trigger.tsx.\n// Attributes on the trigger (the popover trigger's props) land on the\n// SelectControl last, like React's `{...props}` spread.\n\nexport const DateRangeTrigger = defineComponent({\n  name: \"DateRangeTrigger\",\n  inheritAttrs: false,\n  setup(_props, { attrs }) {\n    const context = useDateRangeContext()\n\n    const isStepperView = computed<boolean>(() =>\n      rangeMatchesStepperUnit(context.value, context.triggerStepperUnit, {\n        min: context.min,\n        max: context.max,\n      }),\n    )\n\n    const activeShortcut = computed<DateRangeShortcut | undefined>(() => {\n      const { value, shortcuts } = context\n      if (!value || !shortcuts?.length) {\n        return undefined\n      }\n\n      return shortcuts.find((sc) => {\n        const [start, end] = sc.getDateRange()\n        return isSameDay(start, value[0]) && isSameDay(end, value[1])\n      })\n    })\n\n    const handleClearClick = () => {\n      context.onChange(null)\n    }\n\n    const renderStepperView = (): VNodeChild => {\n      const { value, min, max, disabled, pill, onChange } = context\n\n      if (!value) {\n        return null\n      }\n\n      const [startDate, endDate] = value\n      const canGoBack = !min || isBefore(min, startDate.startOf(\"month\"))\n      const canGoForward = !max || isBefore(endDate.endOf(\"month\"), max)\n\n      return h(\"span\", { class: s.StepperContent }, [\n        h(\n          Button,\n          {\n            \"class\": s.StepperPrevious,\n            \"color\": \"secondary\",\n            \"variant\": \"ghost\",\n            \"disabled\": disabled || !canGoBack,\n            \"size\": \"3xs\",\n            \"uniform\": true,\n            \"pill\": pill,\n            \"aria-label\": \"Previous month\",\n            // Stop the trigger from opening; the step itself runs on click so\n            // Enter and Space work too\n            \"onPointerdown\": (evt: PointerEvent) => evt.stopPropagation(),\n            \"onClick\": (evt: MouseEvent) => {\n              evt.stopPropagation()\n              onChange(getMonthStartAndEnd(startDate.minus({ months: 1 }), { min, max }))\n            },\n          },\n          { default: () => [h(ChevronLeft)] },\n        ),\n        h(\"span\", { class: s.StepperText }, [startDate.monthLong, \" \", String(startDate.year)]),\n        h(\n          Button,\n          {\n            \"class\": s.StepperNext,\n            \"color\": \"secondary\",\n            \"variant\": \"ghost\",\n            \"disabled\": disabled || !canGoForward,\n            \"size\": \"3xs\",\n            \"uniform\": true,\n            \"pill\": pill,\n            \"aria-label\": \"Next month\",\n            \"onPointerdown\": (evt: PointerEvent) => evt.stopPropagation(),\n            \"onClick\": (evt: MouseEvent) => {\n              evt.stopPropagation()\n              onChange(getMonthStartAndEnd(startDate.plus({ months: 1 }), { min, max }))\n            },\n          },\n          { default: () => [h(ChevronRight)] },\n        ),\n      ])\n    }\n\n    const renderDisplayView = (): VNodeChild => {\n      const { placeholder, value, triggerDateFormat } = context\n      const shortcut = activeShortcut.value\n\n      if (shortcut) {\n        return h(\"span\", { class: \"inline-block\" }, shortcut.label)\n      }\n      if (value && isSameDay(value[0], value[1])) {\n        return h(\"span\", { class: \"inline-block tabular-nums\" }, value[0].toFormat(triggerDateFormat))\n      }\n      if (value) {\n        return h(\"span\", { class: \"inline-block tabular-nums\" }, [\n          value[0].toFormat(triggerDateFormat),\n          h(\"span\", { class: s.RangeTextSeparator }, \"-\"),\n          value[1].toFormat(triggerDateFormat),\n        ])\n      }\n      return placeholder\n    }\n\n    return () => {\n      const stepper = isStepperView.value\n\n      return h(\n        SelectControl,\n        {\n          class: clsx(stepper && s.StepperControl, context.triggerClassName),\n          selected: !!context.value,\n          variant: context.variant,\n          pill: context.pill,\n          block: context.block,\n          size: context.size,\n          disabled: context.disabled,\n          StartIcon: context.triggerShowIcon && !stepper ? Calendar : undefined,\n          dropdownIconType: !stepper ? context.dropdownIconType : \"none\",\n          onClearClick: context.clearable && !stepper ? handleClearClick : undefined,\n          ...attrs,\n        },\n        { default: () => [stepper ? renderStepperView() : renderDisplayView()] },\n      )\n    }\n  },\n})\n\nconst rangeMatchesStepperUnit = (\n  range: DateRange | null,\n  stepperUnit: \"month\" | undefined,\n  { min, max }: { min?: DateTime; max?: DateTime } = {},\n): boolean => {\n  // Allows method to be called lazily\n  if (!range || !stepperUnit) {\n    return false\n  }\n\n  const [startDate, endDate] = range\n  const [startDateCompare, endDateCompare] = getMonthStartAndEnd(startDate, {\n    min,\n    max,\n  })\n\n  return isSameDay(startDateCompare, startDate) && isSameDay(endDateCompare, endDate)\n}\n"]}

package/dist/es/components/DateRangePicker/context.js

@@ -0,0 +1,10 @@
+import { inject } from "vue";
+export const DateRangeContextKey = Symbol("PlexUIDateRangePicker");
+export const useDateRangeContext = () => {
+    const context = inject(DateRangeContextKey, null);
+    if (!context) {
+        throw new Error("DateRange components must be wrapped in <DateRangePicker />");
+    }
+    return context;
+};
+//# sourceMappingURL=context.js.map

package/dist/es/components/DateRangePicker/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAqB,MAAM,KAAK,CAAA;AA+B/C,MAAM,CAAC,MAAM,mBAAmB,GAAwC,MAAM,CAAC,uBAAuB,CAAC,CAAA;AAEvG,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,OAAO,GAAG,MAAM,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAA;IAEjD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,6DAA6D,CAAC,CAAA;IAChF,CAAC;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA","sourcesContent":["import type { DateTime } from \"luxon\"\nimport { inject, type InjectionKey } from \"vue\"\nimport type { ControlSize } from \"@plexui/styles/types\"\nimport type { DropdownIconType } from \"../SelectControl/index.js\"\nimport type { DateRange, DateRangeShortcut } from \"./types.js\"\n\n// Vue port of packages/ui/src/components/DateRangePicker/context.tsx. The\n// values are getters over DateRangePicker's props (read them in render,\n// computed or watch to track them); React's `onChangeRef` is a plain\n// function here, as Vue props and emits are always current.\n\nexport type DateRangeContextValue = {\n  readonly value: DateRange | null\n  readonly min?: DateTime\n  readonly max?: DateTime\n  readonly maxRangeDays?: number\n  readonly triggerStepperUnit?: \"month\"\n  readonly triggerClassName?: string\n  readonly triggerShowIcon?: boolean\n  readonly triggerDateFormat: string\n  readonly disabled: boolean\n  readonly variant?: \"soft\" | \"outline\" | \"ghost\"\n  readonly pill: boolean\n  readonly block: boolean\n  readonly size?: ControlSize\n  readonly dropdownIconType?: DropdownIconType\n  readonly clearable: boolean\n  readonly placeholder: string\n  readonly shortcuts?: DateRangeShortcut[]\n  onChange: (nextValue: DateRange | null, shortcut?: DateRangeShortcut) => void\n}\n\nexport const DateRangeContextKey: InjectionKey<DateRangeContextValue> = Symbol(\"PlexUIDateRangePicker\")\n\nexport const useDateRangeContext = () => {\n  const context = inject(DateRangeContextKey, null)\n\n  if (!context) {\n    throw new Error(\"DateRange components must be wrapped in <DateRangePicker />\")\n  }\n\n  return context\n}\n"]}

package/dist/es/components/DateRangePicker/index.js

@@ -0,0 +1,3 @@
+export { DateRangePicker } from "./DateRangePicker.js";
+export {} from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/DateRangePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA6B,MAAM,sBAAsB,CAAA;AAEjF,OAAO,EAA0C,MAAM,YAAY,CAAA","sourcesContent":["export { DateRangePicker, type DateRangePickerProps } from \"./DateRangePicker.js\"\n\nexport { type DateRange, type DateRangeShortcut } from \"./types.js\"\n"]}

package/dist/es/components/DateRangePicker/types.js

@@ -0,0 +1,2 @@
+import {} from "luxon";
+//# sourceMappingURL=types.js.map

package/dist/es/components/DateRangePicker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,MAAM,OAAO,CAAA","sourcesContent":["import { type DateTime } from \"luxon\"\n\nexport type DateRange = [DateTime, DateTime]\nexport type DateRangeShortcut = {\n  label: string\n  getDateRange: () => DateRange\n}\n"]}

package/dist/es/components/Dialog/Dialog.js

@@ -0,0 +1,231 @@
+import { cloneVNode, computed, createCommentVNode, defineComponent, h, inject, onBeforeUnmount, onMounted, provide, ref, watch, } from "vue";
+import { DialogContent as RekaDialogContent, DialogDescription as RekaDialogDescription, DialogOverlay as RekaDialogOverlay, DialogPortal as RekaDialogPortal, DialogRoot as RekaDialogRoot, DialogTitle as RekaDialogTitle, injectDialogRootContext, useForwardExpose, useId, } from "reka-ui";
+import { useEscCloseStack } from "../../composables/useEscCloseStack.js";
+import { preventDefaultHandler, toCssVariables } from "../../lib/helpers.js";
+import { dismissableSurfaces, useDeferredPointerDownOutside } from "../Popover/deferredPointerDownOutside.js";
+import { firstElementChild } from "../Tooltip/slot.js";
+import { TransitionGroup } from "../Transition/index.js";
+import s from "@plexui/styles/components/Dialog/Dialog.module.css";
+const DialogContextKey = Symbol("PlexUIDialog");
+const useDialogContext = () => {
+    const context = inject(DialogContextKey, null);
+    if (!context) {
+        throw new Error("Dialog compound components must be used inside <Dialog>");
+    }
+    return context;
+};
+/** Modal dialog root. Uncontrolled by default; bind `v-model:open` to control it. */
+export const Dialog = defineComponent({
+    name: "Dialog",
+    props: {
+        open: { type: Boolean, default: undefined },
+    },
+    emits: {
+        "update:open": (_open) => true,
+    },
+    setup(props, { slots, emit }) {
+        const internalOpen = ref(false);
+        const isOpen = computed(() => props.open ?? internalOpen.value);
+        const setOpen = (nextState) => {
+            emit("update:open", nextState);
+            internalOpen.value = nextState;
+        };
+        provide(DialogContextKey, { open: isOpen, setOpen, titleCount: ref(0), descriptionCount: ref(0) });
+        return () => h(RekaDialogRoot, { "open": isOpen.value, "onUpdate:open": setOpen }, { default: () => slots.default?.() });
+    },
+});
+// Trigger and Close render their child with the dialog wiring merged in,
+// like Reka's `asChild` parts, but run the dialog action after the child's
+// own click handlers and skip it when one called preventDefault() (Radix's
+// composeEventHandlers). Reka's parts run first and cannot be cancelled.
+// Attributes the child sets itself win, as with Radix and Reka slots. The
+// child is the first element, also through a forwarded `<slot />`.
+const withDialogProps = (child, props, onClick, ref) => {
+    if (!child)
+        return null;
+    const own = child.props ?? {};
+    const extra = Object.fromEntries(Object.entries(props).filter(([key]) => !(key in own)));
+    return cloneVNode(child, { ...extra, onClick, ...(ref ? { ref } : {}) }, true);
+};
+export const DialogTrigger = defineComponent({
+    name: "DialogTrigger",
+    setup(_props, { slots }) {
+        const rootContext = injectDialogRootContext();
+        const { forwardRef, currentElement } = useForwardExpose();
+        rootContext.contentId ||= useId(undefined, "reka-dialog-content");
+        // Focus returns here when the dialog closes
+        onMounted(() => {
+            rootContext.triggerElement.value = currentElement.value;
+        });
+        const onClick = (event) => {
+            if (!event.defaultPrevented)
+                rootContext.onOpenToggle();
+        };
+        return () => {
+            const open = rootContext.open.value;
+            return withDialogProps(firstElementChild(slots.default?.()), {
+                "type": "button",
+                "aria-haspopup": "dialog",
+                "aria-expanded": open || false,
+                "aria-controls": open ? rootContext.contentId : undefined,
+                "data-state": open ? "open" : "closed",
+            }, onClick, forwardRef);
+        };
+    },
+});
+const CloseIcon = () => h("svg", { "class": s.CloseIcon, "viewBox": "0 0 20 20", "width": "20", "height": "20", "aria-hidden": "true" }, [
+    h("path", {
+        fill: "currentColor",
+        d: "M5.22 5.22a.75.75 0 0 1 1.06 0L10 8.94l3.72-3.72a.75.75 0 1 1 1.06 1.06L11.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06L10 11.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06L8.94 10 5.22 6.28a.75.75 0 0 1 0-1.06",
+    }),
+]);
+/** Overlay and panel. `class` lands on the panel, like `className` in React. */
+export const DialogContent = defineComponent({
+    name: "DialogContent",
+    inheritAttrs: false,
+    props: {
+        /** Panel width; numbers are pixels. @default 480 */
+        width: { type: [Number, String], default: 480 },
+        /** Renders the close button in the top corner. @default true */
+        showClose: { type: Boolean, default: true },
+        /**
+         * Where the panel sits: centered, near the top, a sheet along the bottom,
+         * a full-height panel on the start or end side, or the whole screen.
+         * @default "center"
+         */
+        placement: { type: String, default: "center" },
+        /** Placement at 640px and below, such as a bottom sheet on phones. @default placement */
+        mobilePlacement: String,
+        /** Called when focus moves into the dialog on open; `event.preventDefault()` keeps it for you to place. */
+        onOpenAutoFocus: Function,
+        /** Called when focus returns on close; `event.preventDefault()` keeps it elsewhere. */
+        onCloseAutoFocus: Function,
+    },
+    setup(props, { slots, attrs }) {
+        const { open, setOpen, titleCount, descriptionCount } = useDialogContext();
+        // Radix's root makes the content id; Reka's trigger does, so a dialog
+        // without one would render `id=""`
+        injectDialogRootContext().contentId ||= useId(undefined, "reka-dialog-content");
+        // Escape goes through the shared stack, as in React, so the dialog
+        // closes before overlays opened earlier (a forced-open Tooltip)
+        useEscCloseStack(open, () => {
+            setOpen(false);
+        });
+        // Radix's modal content: a Ctrl+click (macOS right click) does not dismiss
+        const outsidePress = useDeferredPointerDownOutside((originalEvent) => {
+            if (!originalEvent.ctrlKey)
+                setOpen(false);
+        });
+        watch(open, (isOpen) => {
+            if (!isOpen)
+                outsidePress.reset();
+        });
+        let overlayElement;
+        const setOverlayRef = (instance) => {
+            const el = instance?.$el;
+            const element = el instanceof Element ? el : undefined;
+            if (element === overlayElement)
+                return;
+            if (overlayElement)
+                dismissableSurfaces.delete(overlayElement);
+            overlayElement = element;
+            if (element)
+                dismissableSurfaces.add(element);
+        };
+        const renderDialog = () => h("div", { key: "dialog" }, [
+            h(RekaDialogOverlay, { class: s.Overlay, ref: setOverlayRef }),
+            h(RekaDialogContent, {
+                "forceMount": true,
+                "class": s.Content,
+                "style": toCssVariables({ "dialog-width": props.width }),
+                "data-placement": props.placement === "center" ? undefined : props.placement,
+                "data-mobile-placement": props.mobilePlacement,
+                "onOpenAutoFocus": props.onOpenAutoFocus,
+                "onCloseAutoFocus": props.onCloseAutoFocus,
+                // Radix labels and describes the content only by mounted parts
+                ...(titleCount.value > 0 ? {} : { "aria-labelledby": undefined }),
+                ...(descriptionCount.value > 0 ? {} : { "aria-describedby": undefined }),
+                "onEscapeKeyDown": preventDefaultHandler,
+                "onPointerDownOutside": outsidePress.onPointerDownOutside,
+                "onFocusOutside": outsidePress.onFocusOutside,
+            }, {
+                default: () => [
+                    h("div", { class: [s.Panel, attrs.class] }, [
+                        props.showClose
+                            ? h(DialogClose, null, {
+                                default: () => [
+                                    h("button", { "type": "button", "class": s.CloseButton, "aria-label": "Close dialog" }, [
+                                        h(CloseIcon),
+                                    ]),
+                                ],
+                            })
+                            : null,
+                        slots.default?.(),
+                    ]),
+                ],
+            }),
+        ]);
+        return () => h(RekaDialogPortal, null, {
+            default: () => [
+                h(TransitionGroup, { class: s.Transition, enterDuration: 250, exitDuration: 150, disableAnimations: true }, 
+                // `open && <div>` in React: closed still renders the empty wrapper
+                { default: () => [open.value ? renderDialog() : createCommentVNode()] }),
+            ],
+        });
+    },
+});
+export const DialogHeader = defineComponent({
+    name: "DialogHeader",
+    setup(_props, { slots }) {
+        return () => h("div", { class: s.Header }, slots.default?.());
+    },
+});
+/** The scrolling part between DialogHeader and DialogFooter: with it, only the body scrolls. */
+export const DialogBody = defineComponent({
+    name: "DialogBody",
+    inheritAttrs: false,
+    setup(_props, { slots, attrs }) {
+        return () => h("div", { class: [s.Body, attrs.class] }, slots.default?.());
+    },
+});
+export const DialogFooter = defineComponent({
+    name: "DialogFooter",
+    setup(_props, { slots }) {
+        return () => h("div", { class: s.Footer }, slots.default?.());
+    },
+});
+/** Counts a mounted part, as Radix's title and description counts do. */
+const useMountedCount = (count) => {
+    onMounted(() => {
+        count.value++;
+    });
+    onBeforeUnmount(() => {
+        count.value--;
+    });
+};
+export const DialogTitle = defineComponent({
+    name: "DialogTitle",
+    setup(_props, { slots }) {
+        useMountedCount(useDialogContext().titleCount);
+        return () => h(RekaDialogTitle, { class: s.Title }, { default: () => slots.default?.() });
+    },
+});
+export const DialogDescription = defineComponent({
+    name: "DialogDescription",
+    setup(_props, { slots }) {
+        useMountedCount(useDialogContext().descriptionCount);
+        return () => h(RekaDialogDescription, { class: s.Description }, { default: () => slots.default?.() });
+    },
+});
+export const DialogClose = defineComponent({
+    name: "DialogClose",
+    setup(_props, { slots }) {
+        const rootContext = injectDialogRootContext();
+        const onClick = (event) => {
+            if (!event.defaultPrevented)
+                rootContext.onOpenChange(false);
+        };
+        return () => withDialogProps(firstElementChild(slots.default?.()), { type: "button" }, onClick);
+    },
+});
+//# sourceMappingURL=Dialog.js.map