@impulse-ui-native/datetime 2.1.0 → 2.1.2

package/dist/components/date/date-range-picker.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { Control } from "@impulse-ui-native/primitives";
+import { useDatetimeRangePicker } from "../../hooks";
+import { DateControl } from "../common/date-control";
+import { DatePickerFlyout } from "./date-picker.flyout";
+const DateRangePicker = memo(function DateRangePicker2(props) {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    placeholder,
+    quickDateOptions,
+    ...rest
+  } = props;
+  const {
+    id,
+    isOpen,
+    visible,
+    tempRange,
+    selected,
+    setVisible,
+    close,
+    onPressOpen,
+    onPressApply,
+    onPressCancel,
+    onPressCalendarDay,
+    onPressClear,
+    onPressQuickDateOption,
+    syncState
+  } = useDatetimeRangePicker({ value, defaultValue, onChange });
+  return /* @__PURE__ */ jsxs(DateControl, { ...rest, onPress: onPressOpen, children: [
+    selected === null ? /* @__PURE__ */ jsx(Control.Placeholder, { children: placeholder }) : null,
+    selected !== null ? /* @__PURE__ */ jsxs(Control.Value, { children: [
+      selected.start?.toDateString(),
+      " - ",
+      selected.end?.toDateString()
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      DatePickerFlyout,
+      {
+        id,
+        title: "Datetime",
+        open: isOpen,
+        visible,
+        value: tempRange,
+        quickDateOptions,
+        onClose: close,
+        onCloseFinished: syncState,
+        onPressQuickDateOption,
+        onChangeVisible: setVisible,
+        onPressCalendarDay,
+        onPressApply,
+        onPressCancel,
+        onPressClear
+      }
+    )
+  ] });
+});
+export {
+  DateRangePicker
+};
+//# sourceMappingURL=date-range-picker.js.map

package/dist/components/date/date-range-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/date/date-range-picker.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Control } from \"@impulse-ui-native/primitives\";\n\nimport { useDatetimeRangePicker } from \"../../hooks\";\nimport { DatetimeRangePickerProps } from \"../../types\";\nimport { DateControl } from \"../common/date-control\";\nimport { DatePickerFlyout } from \"./date-picker.flyout\";\n\nexport const DateRangePicker = memo(function DateRangePicker(\n  props: DatetimeRangePickerProps,\n) {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    placeholder,\n    quickDateOptions,\n    ...rest\n  } = props;\n\n  const {\n    id,\n    isOpen,\n    visible,\n    tempRange,\n    selected,\n    setVisible,\n    close,\n    onPressOpen,\n    onPressApply,\n    onPressCancel,\n    onPressCalendarDay,\n    onPressClear,\n    onPressQuickDateOption,\n    syncState,\n  } = useDatetimeRangePicker({ value, defaultValue, onChange });\n\n  return (\n    <DateControl {...rest} onPress={onPressOpen}>\n      {selected === null ? (\n        <Control.Placeholder>{placeholder}</Control.Placeholder>\n      ) : null}\n\n      {selected !== null ? (\n        <Control.Value>\n          {selected.start?.toDateString()} - {selected.end?.toDateString()}\n        </Control.Value>\n      ) : null}\n\n      <DatePickerFlyout\n        id={id}\n        title=\"Datetime\"\n        open={isOpen}\n        visible={visible}\n        value={tempRange}\n        quickDateOptions={quickDateOptions}\n        onClose={close}\n        onCloseFinished={syncState}\n        onPressQuickDateOption={onPressQuickDateOption}\n        onChangeVisible={setVisible}\n        onPressCalendarDay={onPressCalendarDay}\n        onPressApply={onPressApply}\n        onPressCancel={onPressCancel}\n        onPressClear={onPressClear}\n      />\n    </DateControl>\n  );\n});\n"],"mappings":"AAyCQ,cAIA,YAJA;AAzCR,SAAS,YAAY;AAErB,SAAS,eAAe;AAExB,SAAS,8BAA8B;AAEvC,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAE1B,MAAM,kBAAkB,KAAK,SAASA,iBAC3C,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB,EAAE,OAAO,cAAc,SAAS,CAAC;AAE5D,SACE,qBAAC,eAAa,GAAG,MAAM,SAAS,aAC7B;AAAA,iBAAa,OACZ,oBAAC,QAAQ,aAAR,EAAqB,uBAAY,IAChC;AAAA,IAEH,aAAa,OACZ,qBAAC,QAAQ,OAAR,EACE;AAAA,eAAS,OAAO,aAAa;AAAA,MAAE;AAAA,MAAI,SAAS,KAAK,aAAa;AAAA,OACjE,IACE;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA,SAAS;AAAA,QACT,iBAAiB;AAAA,QACjB;AAAA,QACA,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;","names":["DateRangePicker"]}

package/dist/components/datetime/datetime-picker.d.mts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DatetimePickerProps } from '../../types/datetime-picker.types.mjs';
+import '../../types/common.types.mjs';
+import '@impulse-ui-native/flyout';
+import '@impulse-ui-native/primitives';
+
+declare const DatetimePicker: react.MemoExoticComponent<(props: DatetimePickerProps) => react_jsx_runtime.JSX.Element>;
+
+export { DatetimePicker };

package/dist/components/datetime/datetime-picker.flyout.d.mts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DatetimePickerFlyoutCommonProps, TimePickerValue } from '../../types/common.types.mjs';
+import '@impulse-ui-native/flyout';
+import '@impulse-ui-native/primitives';
+
+interface DatetimePickerFlyoutProps extends DatetimePickerFlyoutCommonProps {
+    value: Date | null | undefined;
+    onChangeTime?: (value: TimePickerValue | null) => void;
+}
+declare const DatetimePickerFlyout: react.MemoExoticComponent<(props: DatetimePickerFlyoutProps) => react_jsx_runtime.JSX.Element>;
+
+export { DatetimePickerFlyout, type DatetimePickerFlyoutProps };

package/dist/components/datetime/datetime-picker.flyout.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { Flyout } from "@impulse-ui-native/flyout";
+import { Portal } from "@impulse-ui-native/portal";
+import { View } from "@impulse-ui-native/primitives";
+import { useComponentsTokens } from "@impulse-ui-native/theme";
+import { Calendar } from "../common/calendar";
+import { DatetimePickerFlyoutActions } from "../common/datetime-picker-flyout-actions";
+import { QuickDateOptions } from "../common/quick-date-options";
+import { VisibleDateSelect } from "../common/visible-date-select";
+import { TimePicker } from "../time/time-picker";
+const DatetimePickerFlyout = memo(function DateRangePickerFlyout(props) {
+  const {
+    visible,
+    value,
+    clearable,
+    quickDateOptions,
+    onPressQuickDateOption,
+    onChangeVisible,
+    onPressCalendarDay,
+    onChangeTime,
+    onPressClear,
+    onPressCancel,
+    onPressApply,
+    ...rest
+  } = props;
+  const tokens = useComponentsTokens();
+  const datetimePickerTokens = tokens.datetimePicker.datetimePickerFlyout;
+  const timeValue = useMemo(() => {
+    if (value) {
+      return {
+        hours: value.getHours(),
+        minutes: value.getMinutes(),
+        seconds: value.getSeconds()
+      };
+    }
+    return null;
+  }, [value]);
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Flyout, { ...rest, children: /* @__PURE__ */ jsxs(View, { gap: datetimePickerTokens.gap, children: [
+    /* @__PURE__ */ jsx(VisibleDateSelect, { value: visible, onChange: onChangeVisible }),
+    /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        value,
+        visible,
+        onPress: onPressCalendarDay
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TimePicker,
+      {
+        value: timeValue,
+        clearable: false,
+        defaultValue: timeValue,
+        onChange: onChangeTime,
+        placeholder: "00:00:00"
+      }
+    ),
+    quickDateOptions && quickDateOptions.length > 0 ? /* @__PURE__ */ jsx(
+      QuickDateOptions,
+      {
+        options: quickDateOptions,
+        onPress: onPressQuickDateOption
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      DatetimePickerFlyoutActions,
+      {
+        canClear: Boolean(value && clearable),
+        onPressApply,
+        onPressCancel,
+        onPressClear
+      }
+    )
+  ] }) }) });
+});
+export {
+  DatetimePickerFlyout
+};
+//# sourceMappingURL=datetime-picker.flyout.js.map

package/dist/components/datetime/datetime-picker.flyout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/datetime/datetime-picker.flyout.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport { Flyout } from \"@impulse-ui-native/flyout\";\nimport { Portal } from \"@impulse-ui-native/portal\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { DatetimePickerFlyoutCommonProps, TimePickerValue } from \"../../types\";\nimport { Calendar } from \"../common/calendar\";\nimport { DatetimePickerFlyoutActions } from \"../common/datetime-picker-flyout-actions\";\nimport { QuickDateOptions } from \"../common/quick-date-options\";\nimport { VisibleDateSelect } from \"../common/visible-date-select\";\nimport { TimePicker } from \"../time/time-picker\";\n\nexport interface DatetimePickerFlyoutProps extends DatetimePickerFlyoutCommonProps {\n  value: Date | null | undefined;\n  onChangeTime?: (value: TimePickerValue | null) => void;\n}\n\nexport const DatetimePickerFlyout = memo(function DateRangePickerFlyout(\n  props: DatetimePickerFlyoutProps,\n) {\n  const {\n    visible,\n    value,\n    clearable,\n    quickDateOptions,\n    onPressQuickDateOption,\n    onChangeVisible,\n    onPressCalendarDay,\n    onChangeTime,\n    onPressClear,\n    onPressCancel,\n    onPressApply,\n    ...rest\n  } = props;\n\n  const tokens = useComponentsTokens();\n  const datetimePickerTokens = tokens.datetimePicker.datetimePickerFlyout;\n\n  const timeValue = useMemo<TimePickerValue | null>(() => {\n    if (value) {\n      return {\n        hours: value.getHours(),\n        minutes: value.getMinutes(),\n        seconds: value.getSeconds(),\n      };\n    }\n\n    return null;\n  }, [value]);\n\n  return (\n    <Portal>\n      <Flyout {...rest}>\n        <View gap={datetimePickerTokens.gap}>\n          <VisibleDateSelect value={visible} onChange={onChangeVisible} />\n          <Calendar\n            value={value}\n            visible={visible}\n            onPress={onPressCalendarDay}\n          />\n          <TimePicker\n            value={timeValue}\n            clearable={false}\n            defaultValue={timeValue}\n            onChange={onChangeTime}\n            placeholder=\"00:00:00\"\n          />\n          {quickDateOptions && quickDateOptions.length > 0 ? (\n            <QuickDateOptions\n              options={quickDateOptions}\n              onPress={onPressQuickDateOption}\n            />\n          ) : null}\n          <DatetimePickerFlyoutActions\n            canClear={Boolean(value && clearable)}\n            onPressApply={onPressApply}\n            onPressCancel={onPressCancel}\n            onPressClear={onPressClear}\n          />\n        </View>\n      </Flyout>\n    </Portal>\n  );\n});\n"],"mappings":"AAuDQ,SACE,KADF;AAvDR,SAAS,MAAM,eAAe;AAE9B,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAGpC,SAAS,gBAAgB;AACzB,SAAS,mCAAmC;AAC5C,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAOpB,MAAM,uBAAuB,KAAK,SAAS,sBAChD,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,SAAS,oBAAoB;AACnC,QAAM,uBAAuB,OAAO,eAAe;AAEnD,QAAM,YAAY,QAAgC,MAAM;AACtD,QAAI,OAAO;AACT,aAAO;AAAA,QACL,OAAO,MAAM,SAAS;AAAA,QACtB,SAAS,MAAM,WAAW;AAAA,QAC1B,SAAS,MAAM,WAAW;AAAA,MAC5B;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,KAAK,CAAC;AAEV,SACE,oBAAC,UACC,8BAAC,UAAQ,GAAG,MACV,+BAAC,QAAK,KAAK,qBAAqB,KAC9B;AAAA,wBAAC,qBAAkB,OAAO,SAAS,UAAU,iBAAiB;AAAA,IAC9D;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA;AAAA,IACX;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,WAAW;AAAA,QACX,cAAc;AAAA,QACd,UAAU;AAAA,QACV,aAAY;AAAA;AAAA,IACd;AAAA,IACC,oBAAoB,iBAAiB,SAAS,IAC7C;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,SAAS;AAAA;AAAA,IACX,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,QAAQ,SAAS,SAAS;AAAA,QACpC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF,GACF,GACF;AAEJ,CAAC;","names":[]}

package/dist/components/datetime/datetime-picker.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { Control } from "@impulse-ui-native/primitives";
+import { useDatetimePicker } from "../../hooks";
+import { DateControl } from "../common/date-control";
+import { DatetimePickerFlyout } from "./datetime-picker.flyout";
+const DatetimePicker = memo(function DatetimePicker2(props) {
+  const {
+    value,
+    defaultValue,
+    clearable = true,
+    onChange,
+    placeholder,
+    quickDateOptions,
+    ...rest
+  } = props;
+  const {
+    id,
+    isOpen,
+    visible,
+    tempDate,
+    selected,
+    setVisible,
+    close,
+    onPressOpen,
+    onPressApply,
+    onPressCancel,
+    onPressCalendarDay,
+    onChangeTime,
+    onPressClear,
+    onPressQuickDateOption,
+    syncState
+  } = useDatetimePicker({ value, defaultValue, onChange });
+  return /* @__PURE__ */ jsxs(DateControl, { ...rest, onPress: onPressOpen, children: [
+    selected === null ? /* @__PURE__ */ jsx(Control.Placeholder, { children: placeholder }) : null,
+    selected !== null ? /* @__PURE__ */ jsx(Control.Value, { children: selected.toLocaleString() }) : null,
+    /* @__PURE__ */ jsx(
+      DatetimePickerFlyout,
+      {
+        id,
+        open: isOpen,
+        title: "Date",
+        visible,
+        value: tempDate,
+        clearable,
+        quickDateOptions,
+        onClose: close,
+        onCloseFinished: syncState,
+        onPressQuickDateOption,
+        onChangeVisible: setVisible,
+        onPressCalendarDay,
+        onChangeTime,
+        onPressApply,
+        onPressCancel,
+        onPressClear
+      }
+    )
+  ] });
+});
+export {
+  DatetimePicker
+};
+//# sourceMappingURL=datetime-picker.js.map

package/dist/components/datetime/datetime-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/datetime/datetime-picker.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Control } from \"@impulse-ui-native/primitives\";\n\nimport { useDatetimePicker } from \"../../hooks\";\nimport { DatetimePickerProps } from \"../../types\";\nimport { DateControl } from \"../common/date-control\";\nimport { DatetimePickerFlyout } from \"./datetime-picker.flyout\";\n\nexport const DatetimePicker = memo(function DatetimePicker(\n  props: DatetimePickerProps,\n) {\n  const {\n    value,\n    defaultValue,\n    clearable = true,\n    onChange,\n    placeholder,\n    quickDateOptions,\n    ...rest\n  } = props;\n\n  const {\n    id,\n    isOpen,\n    visible,\n    tempDate,\n    selected,\n    setVisible,\n    close,\n    onPressOpen,\n    onPressApply,\n    onPressCancel,\n    onPressCalendarDay,\n    onChangeTime,\n    onPressClear,\n    onPressQuickDateOption,\n    syncState,\n  } = useDatetimePicker({ value, defaultValue, onChange });\n\n  return (\n    <DateControl {...rest} onPress={onPressOpen}>\n      {selected === null ? (\n        <Control.Placeholder>{placeholder}</Control.Placeholder>\n      ) : null}\n\n      {selected !== null ? (\n        <Control.Value>{selected.toLocaleString()}</Control.Value>\n      ) : null}\n\n      <DatetimePickerFlyout\n        id={id}\n        open={isOpen}\n        title=\"Date\"\n        visible={visible}\n        value={tempDate}\n        clearable={clearable}\n        quickDateOptions={quickDateOptions}\n        onClose={close}\n        onCloseFinished={syncState}\n        onPressQuickDateOption={onPressQuickDateOption}\n        onChangeVisible={setVisible}\n        onPressCalendarDay={onPressCalendarDay}\n        onChangeTime={onChangeTime}\n        onPressApply={onPressApply}\n        onPressCancel={onPressCancel}\n        onPressClear={onPressClear}\n      />\n    </DateControl>\n  );\n});\n"],"mappings":"AAyCI,SAEI,KAFJ;AAzCJ,SAAS,YAAY;AAErB,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAElC,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AAE9B,MAAM,iBAAiB,KAAK,SAASA,gBAC1C,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB,EAAE,OAAO,cAAc,SAAS,CAAC;AAEvD,SACE,qBAAC,eAAa,GAAG,MAAM,SAAS,aAC7B;AAAA,iBAAa,OACZ,oBAAC,QAAQ,aAAR,EAAqB,uBAAY,IAChC;AAAA,IAEH,aAAa,OACZ,oBAAC,QAAQ,OAAR,EAAe,mBAAS,eAAe,GAAE,IACxC;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN,OAAM;AAAA,QACN;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,iBAAiB;AAAA,QACjB;AAAA,QACA,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;","names":["DatetimePicker"]}

package/dist/components/datetime/datetime-range-picker.d.mts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DatetimeRangePickerProps } from '../../types/datetime-range-picker.types.mjs';
+import '../../types/common.types.mjs';
+import '@impulse-ui-native/flyout';
+import '@impulse-ui-native/primitives';
+
+declare const DatetimeRangePicker: react.MemoExoticComponent<(props: DatetimeRangePickerProps) => react_jsx_runtime.JSX.Element>;
+
+export { DatetimeRangePicker };

package/dist/components/datetime/datetime-range-picker.flyout.d.mts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DatetimePickerFlyoutCommonProps, TimeRange, TimePickerValue } from '../../types/common.types.mjs';
+import '@impulse-ui-native/flyout';
+import '@impulse-ui-native/primitives';
+
+interface DatetimeRangePickerFlyoutProps extends DatetimePickerFlyoutCommonProps {
+    value: TimeRange | null | undefined;
+    onChangeStartTime?: (value: TimePickerValue | null) => void;
+    onChangeEndTime?: (value: TimePickerValue | null) => void;
+}
+declare const DatetimeRangePickerFlyout: react.MemoExoticComponent<(props: DatetimeRangePickerFlyoutProps) => react_jsx_runtime.JSX.Element>;
+
+export { DatetimeRangePickerFlyout, type DatetimeRangePickerFlyoutProps };

package/dist/components/datetime/datetime-range-picker.flyout.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { Flyout } from "@impulse-ui-native/flyout";
+import { Portal } from "@impulse-ui-native/portal";
+import { View } from "@impulse-ui-native/primitives";
+import { useComponentsTokens } from "@impulse-ui-native/theme";
+import { Calendar } from "../common/calendar";
+import { DatetimePickerFlyoutActions } from "../common/datetime-picker-flyout-actions";
+import { QuickDateOptions } from "../common/quick-date-options";
+import { VisibleDateSelect } from "../common/visible-date-select";
+import { TimePicker } from "../time/time-picker";
+const DatetimeRangePickerFlyout = memo(
+  function DatetimeRangePickerFlyout2(props) {
+    const {
+      visible,
+      value,
+      clearable,
+      quickDateOptions,
+      onPressQuickDateOption,
+      onChangeVisible,
+      onPressCalendarDay,
+      onChangeStartTime,
+      onChangeEndTime,
+      onPressClear,
+      onPressCancel,
+      onPressApply,
+      ...rest
+    } = props;
+    const tokens = useComponentsTokens();
+    const datetimeRangePickerTokens = tokens.datetimePicker.datetimeRangePickerFlyout;
+    const timeStartValue = useMemo(() => {
+      if (value?.start) {
+        return {
+          hours: value.start.getHours(),
+          minutes: value.start.getMinutes(),
+          seconds: value.start.getSeconds()
+        };
+      }
+      return null;
+    }, [value?.start]);
+    const timeEndValue = useMemo(() => {
+      if (value?.end) {
+        return {
+          hours: value.end.getHours(),
+          minutes: value.end.getMinutes(),
+          seconds: value.end.getSeconds()
+        };
+      }
+      return null;
+    }, [value?.end]);
+    return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Flyout, { ...rest, children: /* @__PURE__ */ jsxs(View, { gap: datetimeRangePickerTokens.gap, children: [
+      /* @__PURE__ */ jsx(VisibleDateSelect, { value: visible, onChange: onChangeVisible }),
+      /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          value,
+          visible,
+          onPress: onPressCalendarDay
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        View,
+        {
+          flexDirection: "row",
+          gap: datetimeRangePickerTokens.timeInputsGap,
+          children: [
+            /* @__PURE__ */ jsx(View, { flex: 1, children: /* @__PURE__ */ jsx(
+              TimePicker,
+              {
+                value: timeStartValue,
+                defaultValue: timeStartValue,
+                clearable: false,
+                onChange: onChangeStartTime,
+                label: "Start time",
+                placeholder: "00:00:00"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(View, { flex: 1, children: /* @__PURE__ */ jsx(
+              TimePicker,
+              {
+                value: timeEndValue,
+                defaultValue: timeEndValue,
+                clearable: false,
+                onChange: onChangeEndTime,
+                label: "End time",
+                placeholder: "00:00:00"
+              }
+            ) })
+          ]
+        }
+      ),
+      quickDateOptions && quickDateOptions.length > 0 ? /* @__PURE__ */ jsx(
+        QuickDateOptions,
+        {
+          options: quickDateOptions,
+          onPress: onPressQuickDateOption
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        DatetimePickerFlyoutActions,
+        {
+          canClear: Boolean(value && clearable),
+          onPressApply,
+          onPressCancel,
+          onPressClear
+        }
+      )
+    ] }) }) });
+  }
+);
+export {
+  DatetimeRangePickerFlyout
+};
+//# sourceMappingURL=datetime-range-picker.flyout.js.map

package/dist/components/datetime/datetime-range-picker.flyout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/datetime/datetime-range-picker.flyout.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport { Flyout } from \"@impulse-ui-native/flyout\";\nimport { Portal } from \"@impulse-ui-native/portal\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport {\n  DatetimePickerFlyoutCommonProps,\n  TimePickerValue,\n  TimeRange,\n} from \"../../types\";\nimport { Calendar } from \"../common/calendar\";\nimport { DatetimePickerFlyoutActions } from \"../common/datetime-picker-flyout-actions\";\nimport { QuickDateOptions } from \"../common/quick-date-options\";\nimport { VisibleDateSelect } from \"../common/visible-date-select\";\nimport { TimePicker } from \"../time/time-picker\";\n\nexport interface DatetimeRangePickerFlyoutProps extends DatetimePickerFlyoutCommonProps {\n  value: TimeRange | null | undefined;\n  onChangeStartTime?: (value: TimePickerValue | null) => void;\n  onChangeEndTime?: (value: TimePickerValue | null) => void;\n}\n\nexport const DatetimeRangePickerFlyout = memo(\n  function DatetimeRangePickerFlyout(props: DatetimeRangePickerFlyoutProps) {\n    const {\n      visible,\n      value,\n      clearable,\n      quickDateOptions,\n      onPressQuickDateOption,\n      onChangeVisible,\n      onPressCalendarDay,\n      onChangeStartTime,\n      onChangeEndTime,\n      onPressClear,\n      onPressCancel,\n      onPressApply,\n      ...rest\n    } = props;\n\n    const tokens = useComponentsTokens();\n    const datetimeRangePickerTokens =\n      tokens.datetimePicker.datetimeRangePickerFlyout;\n\n    const timeStartValue = useMemo<TimePickerValue | null>(() => {\n      if (value?.start) {\n        return {\n          hours: value.start.getHours(),\n          minutes: value.start.getMinutes(),\n          seconds: value.start.getSeconds(),\n        };\n      }\n\n      return null;\n    }, [value?.start]);\n\n    const timeEndValue = useMemo<TimePickerValue | null>(() => {\n      if (value?.end) {\n        return {\n          hours: value.end.getHours(),\n          minutes: value.end.getMinutes(),\n          seconds: value.end.getSeconds(),\n        };\n      }\n\n      return null;\n    }, [value?.end]);\n\n    return (\n      <Portal>\n        <Flyout {...rest}>\n          <View gap={datetimeRangePickerTokens.gap}>\n            <VisibleDateSelect value={visible} onChange={onChangeVisible} />\n            <Calendar\n              value={value}\n              visible={visible}\n              onPress={onPressCalendarDay}\n            />\n\n            <View\n              flexDirection=\"row\"\n              gap={datetimeRangePickerTokens.timeInputsGap}\n            >\n              <View flex={1}>\n                <TimePicker\n                  value={timeStartValue}\n                  defaultValue={timeStartValue}\n                  clearable={false}\n                  onChange={onChangeStartTime}\n                  label=\"Start time\"\n                  placeholder=\"00:00:00\"\n                />\n              </View>\n              <View flex={1}>\n                <TimePicker\n                  value={timeEndValue}\n                  defaultValue={timeEndValue}\n                  clearable={false}\n                  onChange={onChangeEndTime}\n                  label=\"End time\"\n                  placeholder=\"00:00:00\"\n                />\n              </View>\n            </View>\n\n            {quickDateOptions && quickDateOptions.length > 0 ? (\n              <QuickDateOptions\n                options={quickDateOptions}\n                onPress={onPressQuickDateOption}\n              />\n            ) : null}\n            <DatetimePickerFlyoutActions\n              canClear={Boolean(value && clearable)}\n              onPressApply={onPressApply}\n              onPressCancel={onPressCancel}\n              onPressClear={onPressClear}\n            />\n          </View>\n        </Flyout>\n      </Portal>\n    );\n  },\n);\n"],"mappings":"AA0EY,cAOA,YAPA;AA1EZ,SAAS,MAAM,eAAe;AAE9B,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAOpC,SAAS,gBAAgB;AACzB,SAAS,mCAAmC;AAC5C,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAQpB,MAAM,4BAA4B;AAAA,EACvC,SAASA,2BAA0B,OAAuC;AACxE,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,SAAS,oBAAoB;AACnC,UAAM,4BACJ,OAAO,eAAe;AAExB,UAAM,iBAAiB,QAAgC,MAAM;AAC3D,UAAI,OAAO,OAAO;AAChB,eAAO;AAAA,UACL,OAAO,MAAM,MAAM,SAAS;AAAA,UAC5B,SAAS,MAAM,MAAM,WAAW;AAAA,UAChC,SAAS,MAAM,MAAM,WAAW;AAAA,QAClC;AAAA,MACF;AAEA,aAAO;AAAA,IACT,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,UAAM,eAAe,QAAgC,MAAM;AACzD,UAAI,OAAO,KAAK;AACd,eAAO;AAAA,UACL,OAAO,MAAM,IAAI,SAAS;AAAA,UAC1B,SAAS,MAAM,IAAI,WAAW;AAAA,UAC9B,SAAS,MAAM,IAAI,WAAW;AAAA,QAChC;AAAA,MACF;AAEA,aAAO;AAAA,IACT,GAAG,CAAC,OAAO,GAAG,CAAC;AAEf,WACE,oBAAC,UACC,8BAAC,UAAQ,GAAG,MACV,+BAAC,QAAK,KAAK,0BAA0B,KACnC;AAAA,0BAAC,qBAAkB,OAAO,SAAS,UAAU,iBAAiB;AAAA,MAC9D;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,SAAS;AAAA;AAAA,MACX;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,eAAc;AAAA,UACd,KAAK,0BAA0B;AAAA,UAE/B;AAAA,gCAAC,QAAK,MAAM,GACV;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,cAAc;AAAA,gBACd,WAAW;AAAA,gBACX,UAAU;AAAA,gBACV,OAAM;AAAA,gBACN,aAAY;AAAA;AAAA,YACd,GACF;AAAA,YACA,oBAAC,QAAK,MAAM,GACV;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,cAAc;AAAA,gBACd,WAAW;AAAA,gBACX,UAAU;AAAA,gBACV,OAAM;AAAA,gBACN,aAAY;AAAA;AAAA,YACd,GACF;AAAA;AAAA;AAAA,MACF;AAAA,MAEC,oBAAoB,iBAAiB,SAAS,IAC7C;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,SAAS;AAAA;AAAA,MACX,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC,UAAU,QAAQ,SAAS,SAAS;AAAA,UACpC;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,OACF,GACF,GACF;AAAA,EAEJ;AACF;","names":["DatetimeRangePickerFlyout"]}

package/dist/components/datetime/datetime-range-picker.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { Control } from "@impulse-ui-native/primitives";
+import { useDatetimeRangePicker } from "../../hooks";
+import { DateControl } from "../common/date-control";
+import { DatetimeRangePickerFlyout } from "./datetime-range-picker.flyout";
+const DatetimeRangePicker = memo(function DatetimeRangePicker2(props) {
+  const {
+    value,
+    defaultValue,
+    clearable = true,
+    onChange,
+    placeholder,
+    quickDateOptions,
+    ...rest
+  } = props;
+  const {
+    id,
+    isOpen,
+    visible,
+    tempRange,
+    selected,
+    setVisible,
+    close,
+    onPressOpen,
+    onPressApply,
+    onPressCancel,
+    onPressCalendarDay,
+    onChangeStartTime,
+    onChangeEndTime,
+    onPressClear,
+    onPressQuickDateOption,
+    syncState
+  } = useDatetimeRangePicker({ value, defaultValue, onChange });
+  return /* @__PURE__ */ jsxs(DateControl, { ...rest, onPress: onPressOpen, children: [
+    selected === null ? /* @__PURE__ */ jsx(Control.Placeholder, { children: placeholder }) : null,
+    selected !== null ? /* @__PURE__ */ jsxs(Control.Value, { children: [
+      selected.start?.toLocaleString(),
+      " - ",
+      selected.end?.toLocaleString()
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      DatetimeRangePickerFlyout,
+      {
+        id,
+        open: isOpen,
+        title: "Date",
+        visible,
+        value: tempRange,
+        clearable,
+        quickDateOptions,
+        onClose: close,
+        onCloseFinished: syncState,
+        onPressQuickDateOption,
+        onChangeVisible: setVisible,
+        onPressCalendarDay,
+        onChangeStartTime,
+        onChangeEndTime,
+        onPressApply,
+        onPressCancel,
+        onPressClear
+      }
+    )
+  ] });
+});
+export {
+  DatetimeRangePicker
+};
+//# sourceMappingURL=datetime-range-picker.js.map

package/dist/components/datetime/datetime-range-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/datetime/datetime-range-picker.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Control } from \"@impulse-ui-native/primitives\";\n\nimport { useDatetimeRangePicker } from \"../../hooks\";\nimport { DatetimeRangePickerProps } from \"../../types\";\nimport { DateControl } from \"../common/date-control\";\nimport { DatetimeRangePickerFlyout } from \"./datetime-range-picker.flyout\";\n\nexport const DatetimeRangePicker = memo(function DatetimeRangePicker(\n  props: DatetimeRangePickerProps,\n) {\n  const {\n    value,\n    defaultValue,\n    clearable = true,\n    onChange,\n    placeholder,\n    quickDateOptions,\n    ...rest\n  } = props;\n\n  const {\n    id,\n    isOpen,\n    visible,\n    tempRange,\n    selected,\n    setVisible,\n    close,\n    onPressOpen,\n    onPressApply,\n    onPressCancel,\n    onPressCalendarDay,\n    onChangeStartTime,\n    onChangeEndTime,\n    onPressClear,\n    onPressQuickDateOption,\n    syncState,\n  } = useDatetimeRangePicker({ value, defaultValue, onChange });\n\n  return (\n    <DateControl {...rest} onPress={onPressOpen}>\n      {selected === null ? (\n        <Control.Placeholder>{placeholder}</Control.Placeholder>\n      ) : null}\n\n      {selected !== null ? (\n        <Control.Value>\n          {selected.start?.toLocaleString()} - {selected.end?.toLocaleString()}\n        </Control.Value>\n      ) : null}\n\n      <DatetimeRangePickerFlyout\n        id={id}\n        open={isOpen}\n        title=\"Date\"\n        visible={visible}\n        value={tempRange}\n        clearable={clearable}\n        quickDateOptions={quickDateOptions}\n        onClose={close}\n        onCloseFinished={syncState}\n        onPressQuickDateOption={onPressQuickDateOption}\n        onChangeVisible={setVisible}\n        onPressCalendarDay={onPressCalendarDay}\n        onChangeStartTime={onChangeStartTime}\n        onChangeEndTime={onChangeEndTime}\n        onPressApply={onPressApply}\n        onPressCancel={onPressCancel}\n        onPressClear={onPressClear}\n      />\n    </DateControl>\n  );\n});\n"],"mappings":"AA4CQ,cAIA,YAJA;AA5CR,SAAS,YAAY;AAErB,SAAS,eAAe;AAExB,SAAS,8BAA8B;AAEvC,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAEnC,MAAM,sBAAsB,KAAK,SAASA,qBAC/C,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB,EAAE,OAAO,cAAc,SAAS,CAAC;AAE5D,SACE,qBAAC,eAAa,GAAG,MAAM,SAAS,aAC7B;AAAA,iBAAa,OACZ,oBAAC,QAAQ,aAAR,EAAqB,uBAAY,IAChC;AAAA,IAEH,aAAa,OACZ,qBAAC,QAAQ,OAAR,EACE;AAAA,eAAS,OAAO,eAAe;AAAA,MAAE;AAAA,MAAI,SAAS,KAAK,eAAe;AAAA,OACrE,IACE;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN,OAAM;AAAA,QACN;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,iBAAiB;AAAA,QACjB;AAAA,QACA,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;","names":["DatetimeRangePicker"]}

package/dist/components/index.d.mts

@@ -0,0 +1,12 @@
+export { DatePicker } from './date/date-picker.mjs';
+export { DateRangePicker } from './date/date-range-picker.mjs';
+export { DatetimePicker } from './datetime/datetime-picker.mjs';
+export { DatetimeRangePicker } from './datetime/datetime-range-picker.mjs';
+export { TimePicker } from './time/time-picker.mjs';
+import 'react';
+import 'react/jsx-runtime';
+import '../types/datetime-picker.types.mjs';
+import '../types/common.types.mjs';
+import '@impulse-ui-native/flyout';
+import '@impulse-ui-native/primitives';
+import '../types/datetime-range-picker.types.mjs';

package/dist/components/index.js

@@ -0,0 +1,13 @@
+import { DatePicker } from "./date/date-picker";
+import { DateRangePicker } from "./date/date-range-picker";
+import { DatetimePicker } from "./datetime/datetime-picker";
+import { DatetimeRangePicker } from "./datetime/datetime-range-picker";
+import { TimePicker } from "./time/time-picker";
+export {
+  DatePicker,
+  DateRangePicker,
+  DatetimePicker,
+  DatetimeRangePicker,
+  TimePicker
+};
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export { DatePicker } from \"./date/date-picker\";\nexport { DateRangePicker } from \"./date/date-range-picker\";\n\nexport { DatetimePicker } from \"./datetime/datetime-picker\";\nexport { DatetimeRangePicker } from \"./datetime/datetime-range-picker\";\n\nexport { TimePicker } from \"./time/time-picker\";\n"],"mappings":"AAAA,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAEhC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AAEpC,SAAS,kBAAkB;","names":[]}

package/dist/components/time/picker-column.d.mts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PickerColumnProps {
+    data: number[];
+    label: string;
+    type: "hour" | "minute" | "second";
+    format: "12h" | "24h";
+    value?: number;
+    initialScrollIndex?: number;
+    onChange?: (value: number) => void;
+}
+declare const PickerColumn: react.MemoExoticComponent<(props: PickerColumnProps) => react_jsx_runtime.JSX.Element>;
+
+export { PickerColumn };