@impulse-ui-native/datetime 2.1.0 → 2.1.1

package/dist/components/time/picker-column.js

@@ -0,0 +1,177 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import {
+  FlatList,
+  StyleSheet
+} from "react-native";
+import { Pressable, Typography, View } from "@impulse-ui-native/primitives";
+import {
+  useComponentsTokens
+} from "@impulse-ui-native/theme";
+import { getClosestIndexByValue } from "../../utils";
+const PickerColumn = memo(function PickerColumn2(props) {
+  const { data, label, value, initialScrollIndex = 0, onChange } = props;
+  const tokens = useComponentsTokens();
+  const columnTokens = tokens.timePicker.column;
+  const listRef = useRef(null);
+  const currentIndexRef = useRef(initialScrollIndex);
+  const pressableStyle = useMemo(
+    () => [
+      styles.pressableStyle,
+      {
+        width: columnTokens.listWidth,
+        height: columnTokens.itemHeight
+      }
+    ],
+    [columnTokens.listWidth, columnTokens.itemHeight]
+  );
+  const contentContainerStyle = useMemo(
+    () => [
+      styles.contentContainerStyle,
+      {
+        paddingVertical: columnTokens.verticalPadding
+      }
+    ],
+    [columnTokens.verticalPadding]
+  );
+  const keyExtractor = useCallback((item, index) => {
+    return `${item}-${index}`;
+  }, []);
+  const getItemLayout = useCallback(
+    (_, index) => {
+      return {
+        length: columnTokens.itemHeight,
+        offset: columnTokens.itemHeight * index,
+        index
+      };
+    },
+    [columnTokens.itemHeight]
+  );
+  const scrollToIndex = useCallback((index, animated) => {
+    currentIndexRef.current = index;
+    listRef.current?.scrollToIndex({
+      index,
+      animated
+    });
+  }, []);
+  const renderItem = useCallback(
+    ({ item }) => {
+      const selected = item === value;
+      const fontWeight = selected ? columnTokens.selectedFontWeight : columnTokens.fontWeight;
+      return /* @__PURE__ */ jsx(Pressable, { style: pressableStyle, children: /* @__PURE__ */ jsx(
+        Typography.Master,
+        {
+          fontSize: columnTokens.fontSize,
+          color: selected ? columnTokens.selectedColor : columnTokens.color,
+          textAlign: "center",
+          numberOfLines: 1,
+          fontWeight,
+          numeric: true,
+          children: String(item).padStart(2, "0")
+        }
+      ) });
+    },
+    [
+      columnTokens.color,
+      columnTokens.fontSize,
+      columnTokens.fontWeight,
+      columnTokens.selectedColor,
+      columnTokens.selectedFontWeight,
+      pressableStyle,
+      value
+    ]
+  );
+  const onMomentumScrollEnd = useCallback(
+    (event) => {
+      const offset = event.nativeEvent.contentOffset.y;
+      const index = Math.round(offset / columnTokens.itemHeight);
+      const newValue = data[index];
+      if (newValue === value) {
+        return;
+      }
+      currentIndexRef.current = index;
+      if (newValue !== void 0) {
+        onChange?.(newValue);
+      }
+    },
+    [columnTokens.itemHeight, data, onChange, value]
+  );
+  const onScrollToIndexFailed = useCallback(() => {
+    requestAnimationFrame(() => {
+      listRef.current?.scrollToOffset({
+        offset: initialScrollIndex * columnTokens.itemHeight,
+        animated: false
+      });
+    });
+  }, [columnTokens.itemHeight, initialScrollIndex]);
+  useEffect(() => {
+    if (value === void 0) {
+      return;
+    }
+    const closestIndex = getClosestIndexByValue(
+      data,
+      value,
+      currentIndexRef.current
+    );
+    if (closestIndex === -1 || closestIndex === currentIndexRef.current) {
+      return;
+    }
+    scrollToIndex(closestIndex, true);
+  }, [data, scrollToIndex, value]);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      width: columnTokens.width,
+      height: columnTokens.height,
+      flexDirection: "row",
+      justifyContent: "center",
+      gap: columnTokens.gap,
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            width: columnTokens.listWidth,
+            height: columnTokens.height,
+            overflow: "hidden",
+            children: /* @__PURE__ */ jsx(
+              FlatList,
+              {
+                ref: listRef,
+                data,
+                renderItem,
+                keyExtractor,
+                getItemLayout,
+                snapToInterval: columnTokens.itemHeight,
+                snapToAlignment: "start",
+                decelerationRate: "fast",
+                initialScrollIndex,
+                showsVerticalScrollIndicator: false,
+                contentContainerStyle,
+                onMomentumScrollEnd,
+                onScrollToIndexFailed,
+                removeClippedSubviews: true,
+                windowSize: 3,
+                initialNumToRender: 7,
+                maxToRenderPerBatch: 7,
+                updateCellsBatchingPeriod: 50,
+                scrollEventThrottle: 16
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography.Body, { alignSelf: "center", children: label })
+      ]
+    }
+  );
+});
+const styles = StyleSheet.create({
+  pressableStyle: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  contentContainerStyle: {}
+});
+export {
+  PickerColumn
+};
+//# sourceMappingURL=picker-column.js.map

package/dist/components/time/picker-column.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/time/picker-column.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport {\n  FlatList,\n  ListRenderItemInfo,\n  NativeScrollEvent,\n  NativeSyntheticEvent,\n  StyleSheet,\n} from \"react-native\";\n\nimport { Pressable, Typography, View } from \"@impulse-ui-native/primitives\";\nimport {\n  FontWeightValue,\n  useComponentsTokens,\n  useTheme,\n} from \"@impulse-ui-native/theme\";\n\nimport { getClosestIndexByValue } from \"../../utils\";\n\ninterface PickerColumnProps {\n  data: number[];\n  label: string;\n  type: \"hour\" | \"minute\" | \"second\";\n  format: \"12h\" | \"24h\";\n  value?: number;\n  initialScrollIndex?: number;\n  onChange?: (value: number) => void;\n}\n\nexport const PickerColumn = memo(function PickerColumn(\n  props: PickerColumnProps,\n) {\n  const { data, label, value, initialScrollIndex = 0, onChange } = props;\n\n  const tokens = useComponentsTokens();\n  const columnTokens = tokens.timePicker.column;\n\n  const listRef = useRef<FlatList<number>>(null);\n  const currentIndexRef = useRef(initialScrollIndex);\n\n  const pressableStyle = useMemo(\n    () => [\n      styles.pressableStyle,\n      {\n        width: columnTokens.listWidth,\n        height: columnTokens.itemHeight,\n      },\n    ],\n    [columnTokens.listWidth, columnTokens.itemHeight],\n  );\n\n  const contentContainerStyle = useMemo(\n    () => [\n      styles.contentContainerStyle,\n      {\n        paddingVertical: columnTokens.verticalPadding,\n      },\n    ],\n    [columnTokens.verticalPadding],\n  );\n\n  const keyExtractor = useCallback((item: number, index: number) => {\n    return `${item}-${index}`;\n  }, []);\n\n  const getItemLayout = useCallback(\n    (_: ArrayLike<number> | null | undefined, index: number) => {\n      return {\n        length: columnTokens.itemHeight,\n        offset: columnTokens.itemHeight * index,\n        index,\n      };\n    },\n    [columnTokens.itemHeight],\n  );\n\n  const scrollToIndex = useCallback((index: number, animated: boolean) => {\n    currentIndexRef.current = index;\n\n    listRef.current?.scrollToIndex({\n      index,\n      animated,\n    });\n  }, []);\n\n  const renderItem = useCallback(\n    ({ item }: ListRenderItemInfo<number>) => {\n      const selected = item === value;\n      const fontWeight: FontWeightValue = (\n        selected ? columnTokens.selectedFontWeight : columnTokens.fontWeight\n      ) as FontWeightValue;\n\n      return (\n        <Pressable style={pressableStyle}>\n          <Typography.Master\n            fontSize={columnTokens.fontSize}\n            color={selected ? columnTokens.selectedColor : columnTokens.color}\n            textAlign=\"center\"\n            numberOfLines={1}\n            fontWeight={fontWeight}\n            numeric\n          >\n            {String(item).padStart(2, \"0\")}\n          </Typography.Master>\n        </Pressable>\n      );\n    },\n    [\n      columnTokens.color,\n      columnTokens.fontSize,\n      columnTokens.fontWeight,\n      columnTokens.selectedColor,\n      columnTokens.selectedFontWeight,\n      pressableStyle,\n      value,\n    ],\n  );\n\n  const onMomentumScrollEnd = useCallback(\n    (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n      const offset = event.nativeEvent.contentOffset.y;\n      const index = Math.round(offset / columnTokens.itemHeight);\n      const newValue = data[index];\n\n      if (newValue === value) {\n        return;\n      }\n\n      currentIndexRef.current = index;\n\n      if (newValue !== undefined) {\n        onChange?.(newValue);\n      }\n    },\n    [columnTokens.itemHeight, data, onChange, value],\n  );\n\n  const onScrollToIndexFailed = useCallback(() => {\n    requestAnimationFrame(() => {\n      listRef.current?.scrollToOffset({\n        offset: initialScrollIndex * columnTokens.itemHeight,\n        animated: false,\n      });\n    });\n  }, [columnTokens.itemHeight, initialScrollIndex]);\n\n  useEffect(() => {\n    if (value === undefined) {\n      return;\n    }\n\n    const closestIndex = getClosestIndexByValue(\n      data,\n      value,\n      currentIndexRef.current,\n    );\n\n    if (closestIndex === -1 || closestIndex === currentIndexRef.current) {\n      return;\n    }\n\n    scrollToIndex(closestIndex, true);\n  }, [data, scrollToIndex, value]);\n\n  return (\n    <View\n      width={columnTokens.width}\n      height={columnTokens.height}\n      flexDirection=\"row\"\n      justifyContent=\"center\"\n      gap={columnTokens.gap}\n    >\n      <View\n        width={columnTokens.listWidth}\n        height={columnTokens.height}\n        overflow=\"hidden\"\n      >\n        <FlatList\n          ref={listRef}\n          data={data}\n          renderItem={renderItem}\n          keyExtractor={keyExtractor}\n          getItemLayout={getItemLayout}\n          snapToInterval={columnTokens.itemHeight}\n          snapToAlignment=\"start\"\n          decelerationRate=\"fast\"\n          initialScrollIndex={initialScrollIndex}\n          showsVerticalScrollIndicator={false}\n          contentContainerStyle={contentContainerStyle}\n          onMomentumScrollEnd={onMomentumScrollEnd}\n          onScrollToIndexFailed={onScrollToIndexFailed}\n          removeClippedSubviews\n          windowSize={3}\n          initialNumToRender={7}\n          maxToRenderPerBatch={7}\n          updateCellsBatchingPeriod={50}\n          scrollEventThrottle={16}\n        />\n      </View>\n\n      <Typography.Body alignSelf=\"center\">{label}</Typography.Body>\n    </View>\n  );\n});\n\nconst styles = StyleSheet.create({\n  pressableStyle: {\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  contentContainerStyle: {},\n});\n"],"mappings":"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","names":["PickerColumn"]}

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

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DatetimePickerCommonProps, TimePickerValue } from '../../types/common.types.mjs';
+import '@impulse-ui-native/flyout';
+import '@impulse-ui-native/primitives';
+
+interface TimePickerProps extends DatetimePickerCommonProps {
+    value?: TimePickerValue | null;
+    defaultValue?: TimePickerValue | null;
+    onChange?: (value: TimePickerValue | null) => void;
+}
+declare const TimePicker: react.MemoExoticComponent<(props: TimePickerProps) => react_jsx_runtime.JSX.Element>;
+
+export { TimePicker };

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

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FlyoutProps } from '@impulse-ui-native/flyout';
+import { PickerFlyoutActions, TimePickerValue } from '../../types/common.types.mjs';
+import '@impulse-ui-native/primitives';
+
+interface TimePickerFlyoutProps extends FlyoutProps, PickerFlyoutActions {
+    value: Partial<TimePickerValue> | null | undefined;
+    onChange: (value: TimePickerValue | null) => void;
+}
+declare const TimePickerFlyout: react.MemoExoticComponent<(props: TimePickerFlyoutProps) => react_jsx_runtime.JSX.Element>;
+
+export { TimePickerFlyout };

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

@@ -0,0 +1,153 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, 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 { createInfiniteRange, getInfiniteRangeInitialIndex } from "../../utils";
+import { DatetimePickerFlyoutActions } from "../common/datetime-picker-flyout-actions";
+import { PickerColumn } from "./picker-column";
+const DefaultTimePickerValue = {
+  hours: 0,
+  minutes: 0,
+  seconds: 0
+};
+const TimePickerFlyout = memo(function TimePickerFlyout2(props) {
+  const {
+    value,
+    onChange,
+    onPressApply,
+    onPressCancel,
+    onPressClear,
+    clearable,
+    ...rest
+  } = props;
+  const tokens = useComponentsTokens();
+  const timePickerTokens = tokens.timePicker;
+  const selectedHours = value?.hours ?? DefaultTimePickerValue.hours;
+  const selectedMinutes = value?.minutes ?? DefaultTimePickerValue.minutes;
+  const selectedSeconds = value?.seconds ?? DefaultTimePickerValue.seconds;
+  const hours = useMemo(() => {
+    return createInfiniteRange(24, 4);
+  }, []);
+  const minutes = useMemo(() => {
+    return createInfiniteRange(60, 4);
+  }, []);
+  const seconds = useMemo(() => {
+    return createInfiniteRange(60, 4);
+  }, []);
+  const hoursInitialIndex = useMemo(() => {
+    return getInfiniteRangeInitialIndex(24, selectedHours, 4);
+  }, [selectedHours]);
+  const minutesInitialIndex = useMemo(() => {
+    return getInfiniteRangeInitialIndex(60, selectedMinutes, 4);
+  }, [selectedMinutes]);
+  const secondsInitialIndex = useMemo(() => {
+    return getInfiniteRangeInitialIndex(60, selectedSeconds, 4);
+  }, [selectedSeconds]);
+  const handleHoursChange = useCallback(
+    (hours2) => {
+      onChange({
+        hours: hours2,
+        minutes: selectedMinutes,
+        seconds: selectedSeconds
+      });
+    },
+    [onChange, selectedMinutes, selectedSeconds]
+  );
+  const handleMinutesChange = useCallback(
+    (minutes2) => {
+      onChange({
+        hours: selectedHours,
+        minutes: minutes2,
+        seconds: selectedSeconds
+      });
+    },
+    [onChange, selectedHours, selectedSeconds]
+  );
+  const handleSecondsChange = useCallback(
+    (seconds2) => {
+      onChange({
+        hours: selectedHours,
+        minutes: selectedMinutes,
+        seconds: seconds2
+      });
+    },
+    [onChange, selectedHours, selectedMinutes]
+  );
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Flyout, { ...rest, children: /* @__PURE__ */ jsxs(View, { gap: timePickerTokens.flyout.gap, children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        height: timePickerTokens.columns.height,
+        gap: timePickerTokens.columns.gap,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        children: [
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              pointerEvents: "none",
+              position: "absolute",
+              height: timePickerTokens.columns.indicatorHeight,
+              width: timePickerTokens.columns.indicatorWidth,
+              borderRadius: timePickerTokens.columns.indicatorBorderRadius,
+              backgroundColor: timePickerTokens.columns.indicatorBackgroundColor,
+              top: timePickerTokens.columns.indicatorTop
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PickerColumn,
+            {
+              data: hours,
+              label: "h",
+              format: "24h",
+              type: "hour",
+              value: selectedHours,
+              initialScrollIndex: hoursInitialIndex,
+              onChange: handleHoursChange
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PickerColumn,
+            {
+              data: minutes,
+              label: "m",
+              format: "24h",
+              type: "minute",
+              value: selectedMinutes,
+              initialScrollIndex: minutesInitialIndex,
+              onChange: handleMinutesChange
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PickerColumn,
+            {
+              data: seconds,
+              label: "s",
+              format: "24h",
+              type: "second",
+              value: selectedSeconds,
+              initialScrollIndex: secondsInitialIndex,
+              onChange: handleSecondsChange
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DatetimePickerFlyoutActions,
+      {
+        canClear: Boolean(value && clearable),
+        onPressApply,
+        onPressCancel,
+        onPressClear
+      }
+    )
+  ] }) }) });
+});
+export {
+  TimePickerFlyout
+};
+//# sourceMappingURL=time-picker.flyout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/time/time-picker.flyout.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from \"react\";\n\nimport { Flyout, FlyoutProps } from \"@impulse-ui-native/flyout\";\nimport { Portal } from \"@impulse-ui-native/portal\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens, useTheme } from \"@impulse-ui-native/theme\";\n\nimport { PickerFlyoutActions, TimePickerValue } from \"../../types\";\nimport { createInfiniteRange, getInfiniteRangeInitialIndex } from \"../../utils\";\nimport { DatetimePickerFlyoutActions } from \"../common/datetime-picker-flyout-actions\";\nimport { PickerColumn } from \"./picker-column\";\n\ninterface TimePickerFlyoutProps extends FlyoutProps, PickerFlyoutActions {\n  value: Partial<TimePickerValue> | null | undefined;\n  onChange: (value: TimePickerValue | null) => void;\n}\n\nconst DefaultTimePickerValue: TimePickerValue = {\n  hours: 0,\n  minutes: 0,\n  seconds: 0,\n};\n\nexport const TimePickerFlyout = memo(function TimePickerFlyout(\n  props: TimePickerFlyoutProps,\n) {\n  const {\n    value,\n    onChange,\n    onPressApply,\n    onPressCancel,\n    onPressClear,\n    clearable,\n    ...rest\n  } = props;\n\n  const tokens = useComponentsTokens();\n  const timePickerTokens = tokens.timePicker;\n\n  const selectedHours = value?.hours ?? DefaultTimePickerValue.hours;\n  const selectedMinutes = value?.minutes ?? DefaultTimePickerValue.minutes;\n  const selectedSeconds = value?.seconds ?? DefaultTimePickerValue.seconds;\n\n  const hours = useMemo(() => {\n    return createInfiniteRange(24, 4);\n  }, []);\n\n  const minutes = useMemo(() => {\n    return createInfiniteRange(60, 4);\n  }, []);\n\n  const seconds = useMemo(() => {\n    return createInfiniteRange(60, 4);\n  }, []);\n\n  const hoursInitialIndex = useMemo(() => {\n    return getInfiniteRangeInitialIndex(24, selectedHours, 4);\n  }, [selectedHours]);\n\n  const minutesInitialIndex = useMemo(() => {\n    return getInfiniteRangeInitialIndex(60, selectedMinutes, 4);\n  }, [selectedMinutes]);\n\n  const secondsInitialIndex = useMemo(() => {\n    return getInfiniteRangeInitialIndex(60, selectedSeconds, 4);\n  }, [selectedSeconds]);\n\n  const handleHoursChange = useCallback(\n    (hours: number) => {\n      onChange({\n        hours,\n        minutes: selectedMinutes,\n        seconds: selectedSeconds,\n      });\n    },\n    [onChange, selectedMinutes, selectedSeconds],\n  );\n\n  const handleMinutesChange = useCallback(\n    (minutes: number) => {\n      onChange({\n        hours: selectedHours,\n        minutes,\n        seconds: selectedSeconds,\n      });\n    },\n    [onChange, selectedHours, selectedSeconds],\n  );\n\n  const handleSecondsChange = useCallback(\n    (seconds: number) => {\n      onChange({\n        hours: selectedHours,\n        minutes: selectedMinutes,\n        seconds,\n      });\n    },\n    [onChange, selectedHours, selectedMinutes],\n  );\n\n  return (\n    <Portal>\n      <Flyout {...rest}>\n        <View gap={timePickerTokens.flyout.gap}>\n          <View\n            height={timePickerTokens.columns.height}\n            gap={timePickerTokens.columns.gap}\n            flexDirection=\"row\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n          >\n            <View\n              pointerEvents=\"none\"\n              position=\"absolute\"\n              height={timePickerTokens.columns.indicatorHeight}\n              width={timePickerTokens.columns.indicatorWidth}\n              borderRadius={timePickerTokens.columns.indicatorBorderRadius}\n              backgroundColor={\n                timePickerTokens.columns.indicatorBackgroundColor\n              }\n              top={timePickerTokens.columns.indicatorTop}\n            />\n\n            <PickerColumn\n              data={hours}\n              label=\"h\"\n              format=\"24h\"\n              type=\"hour\"\n              value={selectedHours}\n              initialScrollIndex={hoursInitialIndex}\n              onChange={handleHoursChange}\n            />\n\n            <PickerColumn\n              data={minutes}\n              label=\"m\"\n              format=\"24h\"\n              type=\"minute\"\n              value={selectedMinutes}\n              initialScrollIndex={minutesInitialIndex}\n              onChange={handleMinutesChange}\n            />\n\n            <PickerColumn\n              data={seconds}\n              label=\"s\"\n              format=\"24h\"\n              type=\"second\"\n              value={selectedSeconds}\n              initialScrollIndex={secondsInitialIndex}\n              onChange={handleSecondsChange}\n            />\n          </View>\n\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":"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","names":["TimePickerFlyout","hours","minutes","seconds"]}

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

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useId, useState } from "react";
+import { useControllableState, useIsOpen } from "@impulse-ui-native/core";
+import { ClockIcon } from "@impulse-ui-native/icon/icons/clock";
+import { Control, Pressable } from "@impulse-ui-native/primitives";
+import { formatTimepickerValue } from "../../utils";
+import { TimePickerFlyout } from "./time-picker.flyout";
+const TimePicker = memo(function TimePicker2(props) {
+  const {
+    value,
+    defaultValue,
+    placeholder,
+    clearable = true,
+    size = "medium",
+    onChange,
+    variant = "outlined",
+    label,
+    error,
+    disabled,
+    PrefixIcon = ClockIcon,
+    Prefix,
+    onPressPrefix: onPrefixPress,
+    SuffixIcon,
+    Suffix,
+    onPressSuffix: onSuffixPress
+  } = props;
+  const id = useId();
+  const { isOpen, isClosed, finishClose, open, close } = useIsOpen();
+  const [selected, setSelected] = useControllableState({
+    prop: value,
+    defaultProp: defaultValue ?? null,
+    onChange
+  });
+  const [tempTime, setTempTime] = useState(selected);
+  const onPressOpen = useCallback(() => {
+    setTempTime(selected);
+    open();
+  }, [open, selected]);
+  const onPressApply = useCallback(() => {
+    setSelected(tempTime);
+    close();
+  }, [tempTime, close]);
+  const onPressClear = useCallback(() => {
+    setTempTime(null);
+  }, []);
+  const syncState = useCallback(() => {
+    setTempTime(selected);
+  }, [selected]);
+  const onCloseFinished = useCallback(() => {
+    syncState();
+    finishClose();
+  }, [syncState, finishClose]);
+  useEffect(() => {
+    if (!isOpen && isClosed) {
+      setTempTime(selected);
+    }
+  }, [isOpen, selected, isClosed]);
+  return /* @__PURE__ */ jsx(
+    Control.Provider,
+    {
+      size,
+      variant,
+      error,
+      disabled,
+      children: /* @__PURE__ */ jsxs(Control.Root, { children: [
+        /* @__PURE__ */ jsx(Control.Label, { children: label }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: onPressOpen, children: /* @__PURE__ */ jsxs(Control.Container, { children: [
+          /* @__PURE__ */ jsx(
+            Control.Addon,
+            {
+              icon: PrefixIcon,
+              Content: Prefix,
+              onPress: onPrefixPress
+            }
+          ),
+          selected === null && placeholder ? /* @__PURE__ */ jsx(Control.Placeholder, { children: placeholder }) : null,
+          selected !== null ? /* @__PURE__ */ jsx(Control.Value, { children: formatTimepickerValue(selected) }) : null,
+          /* @__PURE__ */ jsx(
+            TimePickerFlyout,
+            {
+              id,
+              title: "Time",
+              open: isOpen,
+              value: tempTime,
+              clearable,
+              onClose: close,
+              onCloseFinished,
+              onChange: setTempTime,
+              onPressApply,
+              onPressClear,
+              onPressCancel: close
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Control.Addon,
+            {
+              icon: SuffixIcon,
+              Content: Suffix,
+              onPress: onSuffixPress
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(Control.Error, {})
+      ] })
+    }
+  );
+});
+export {
+  TimePicker
+};
+//# sourceMappingURL=time-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/time/time-picker.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useId, useState } from \"react\";\n\nimport { useControllableState, useIsOpen } from \"@impulse-ui-native/core\";\nimport { ClockIcon } from \"@impulse-ui-native/icon/icons/clock\";\nimport { Control, Pressable } from \"@impulse-ui-native/primitives\";\n\nimport { DatetimePickerCommonProps, TimePickerValue } from \"../../types\";\nimport { formatTimepickerValue } from \"../../utils\";\nimport { TimePickerFlyout } from \"./time-picker.flyout\";\n\ninterface TimePickerProps extends DatetimePickerCommonProps {\n  value?: TimePickerValue | null;\n  defaultValue?: TimePickerValue | null;\n  onChange?: (value: TimePickerValue | null) => void;\n}\n\nexport const TimePicker = memo(function TimePicker(props: TimePickerProps) {\n  const {\n    value,\n    defaultValue,\n    placeholder,\n    clearable = true,\n    size = \"medium\",\n    onChange,\n    variant = \"outlined\",\n    label,\n    error,\n    disabled,\n    PrefixIcon = ClockIcon,\n    Prefix,\n    onPressPrefix: onPrefixPress,\n    SuffixIcon,\n    Suffix,\n    onPressSuffix: onSuffixPress,\n  } = props;\n\n  const id = useId();\n  const { isOpen, isClosed, finishClose, open, close } = useIsOpen();\n\n  const [selected, setSelected] = useControllableState<TimePickerValue | null>({\n    prop: value,\n    defaultProp: defaultValue ?? null,\n    onChange,\n  });\n\n  const [tempTime, setTempTime] = useState<TimePickerValue | null>(selected);\n\n  const onPressOpen = useCallback(() => {\n    setTempTime(selected);\n    open();\n  }, [open, selected]);\n\n  const onPressApply = useCallback(() => {\n    setSelected(tempTime);\n    close();\n  }, [tempTime, close]);\n\n  const onPressClear = useCallback(() => {\n    setTempTime(null);\n  }, []);\n\n  const syncState = useCallback(() => {\n    setTempTime(selected);\n  }, [selected]);\n\n  const onCloseFinished = useCallback(() => {\n    syncState();\n    finishClose();\n  }, [syncState, finishClose]);\n\n  useEffect(() => {\n    if (!isOpen && isClosed) {\n      setTempTime(selected);\n    }\n  }, [isOpen, selected, isClosed]);\n\n  return (\n    <Control.Provider\n      size={size}\n      variant={variant}\n      error={error}\n      disabled={disabled}\n    >\n      <Control.Root>\n        <Control.Label>{label}</Control.Label>\n        <Pressable onPress={onPressOpen}>\n          <Control.Container>\n            <Control.Addon\n              icon={PrefixIcon}\n              Content={Prefix}\n              onPress={onPrefixPress}\n            />\n\n            {selected === null && placeholder ? (\n              <Control.Placeholder>{placeholder}</Control.Placeholder>\n            ) : null}\n\n            {selected !== null ? (\n              <Control.Value>{formatTimepickerValue(selected)}</Control.Value>\n            ) : null}\n\n            <TimePickerFlyout\n              id={id}\n              title=\"Time\"\n              open={isOpen}\n              value={tempTime}\n              clearable={clearable}\n              onClose={close}\n              onCloseFinished={onCloseFinished}\n              onChange={setTempTime}\n              onPressApply={onPressApply}\n              onPressClear={onPressClear}\n              onPressCancel={close}\n            />\n\n            <Control.Addon\n              icon={SuffixIcon}\n              Content={Suffix}\n              onPress={onSuffixPress}\n            />\n          </Control.Container>\n        </Pressable>\n        <Control.Error />\n      </Control.Root>\n    </Control.Provider>\n  );\n});\n"],"mappings":"AAoFQ,cAEE,YAFF;AApFR,SAAS,MAAM,aAAa,WAAW,OAAO,gBAAgB;AAE9D,SAAS,sBAAsB,iBAAiB;AAChD,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAiB;AAGnC,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AAQ1B,MAAM,aAAa,KAAK,SAASA,YAAW,OAAwB;AACzE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,OAAO;AAAA,IACP;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EACjB,IAAI;AAEJ,QAAM,KAAK,MAAM;AACjB,QAAM,EAAE,QAAQ,UAAU,aAAa,MAAM,MAAM,IAAI,UAAU;AAEjE,QAAM,CAAC,UAAU,WAAW,IAAI,qBAA6C;AAAA,IAC3E,MAAM;AAAA,IACN,aAAa,gBAAgB;AAAA,IAC7B;AAAA,EACF,CAAC;AAED,QAAM,CAAC,UAAU,WAAW,IAAI,SAAiC,QAAQ;AAEzE,QAAM,cAAc,YAAY,MAAM;AACpC,gBAAY,QAAQ;AACpB,SAAK;AAAA,EACP,GAAG,CAAC,MAAM,QAAQ,CAAC;AAEnB,QAAM,eAAe,YAAY,MAAM;AACrC,gBAAY,QAAQ;AACpB,UAAM;AAAA,EACR,GAAG,CAAC,UAAU,KAAK,CAAC;AAEpB,QAAM,eAAe,YAAY,MAAM;AACrC,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,YAAY,MAAM;AAClC,gBAAY,QAAQ;AAAA,EACtB,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,kBAAkB,YAAY,MAAM;AACxC,cAAU;AACV,gBAAY;AAAA,EACd,GAAG,CAAC,WAAW,WAAW,CAAC;AAE3B,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,UAAU;AACvB,kBAAY,QAAQ;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,UAAU,QAAQ,CAAC;AAE/B,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,+BAAC,QAAQ,MAAR,EACC;AAAA,4BAAC,QAAQ,OAAR,EAAe,iBAAM;AAAA,QACtB,oBAAC,aAAU,SAAS,aAClB,+BAAC,QAAQ,WAAR,EACC;AAAA;AAAA,YAAC,QAAQ;AAAA,YAAR;AAAA,cACC,MAAM;AAAA,cACN,SAAS;AAAA,cACT,SAAS;AAAA;AAAA,UACX;AAAA,UAEC,aAAa,QAAQ,cACpB,oBAAC,QAAQ,aAAR,EAAqB,uBAAY,IAChC;AAAA,UAEH,aAAa,OACZ,oBAAC,QAAQ,OAAR,EAAe,gCAAsB,QAAQ,GAAE,IAC9C;AAAA,UAEJ;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,OAAM;AAAA,cACN,MAAM;AAAA,cACN,OAAO;AAAA,cACP;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA,UAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA,eAAe;AAAA;AAAA,UACjB;AAAA,UAEA;AAAA,YAAC,QAAQ;AAAA,YAAR;AAAA,cACC,MAAM;AAAA,cACN,SAAS;AAAA,cACT,SAAS;AAAA;AAAA,UACX;AAAA,WACF,GACF;AAAA,QACA,oBAAC,QAAQ,OAAR,EAAc;AAAA,SACjB;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["TimePicker"]}

package/dist/constants/index.d.mts

@@ -0,0 +1 @@
+export { ColumnWidth, ContainerHeight, InitialScrollIndexConfiguration, ItemHeight, ListWidth, VerticalPadding, VisibleItems } from './picker.constants.mjs';

package/dist/constants/index.js

@@ -0,0 +1,2 @@
+export * from "./picker.constants";
+//# sourceMappingURL=index.js.map

package/dist/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants/index.ts"],"sourcesContent":["export * from \"./picker.constants\";\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/constants/picker.constants.d.mts

@@ -0,0 +1,11 @@
+declare const ItemHeight = 50;
+declare const VisibleItems = 5;
+declare const ContainerHeight: number;
+declare const VerticalPadding: number;
+declare const ColumnWidth = 70;
+declare const ListWidth = 30;
+declare const InitialScrollIndexConfiguration: {
+    viewOffset: number;
+};
+
+export { ColumnWidth, ContainerHeight, InitialScrollIndexConfiguration, ItemHeight, ListWidth, VerticalPadding, VisibleItems };

package/dist/constants/picker.constants.js

@@ -0,0 +1,17 @@
+const ItemHeight = 50;
+const VisibleItems = 5;
+const ContainerHeight = ItemHeight * VisibleItems;
+const VerticalPadding = ContainerHeight / 2 - ItemHeight / 2;
+const ColumnWidth = 70;
+const ListWidth = 30;
+const InitialScrollIndexConfiguration = { viewOffset: -VerticalPadding };
+export {
+  ColumnWidth,
+  ContainerHeight,
+  InitialScrollIndexConfiguration,
+  ItemHeight,
+  ListWidth,
+  VerticalPadding,
+  VisibleItems
+};
+//# sourceMappingURL=picker.constants.js.map

package/dist/constants/picker.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants/picker.constants.ts"],"sourcesContent":["export const ItemHeight = 50;\nexport const VisibleItems = 5;\nexport const ContainerHeight = ItemHeight * VisibleItems;\nexport const VerticalPadding = ContainerHeight / 2 - ItemHeight / 2;\nexport const ColumnWidth = 70;\nexport const ListWidth = 30;\nexport const InitialScrollIndexConfiguration = { viewOffset: -VerticalPadding };\n"],"mappings":"AAAO,MAAM,aAAa;AACnB,MAAM,eAAe;AACrB,MAAM,kBAAkB,aAAa;AACrC,MAAM,kBAAkB,kBAAkB,IAAI,aAAa;AAC3D,MAAM,cAAc;AACpB,MAAM,YAAY;AAClB,MAAM,kCAAkC,EAAE,YAAY,CAAC,gBAAgB;","names":[]}

package/dist/hooks/index.d.mts

@@ -0,0 +1,6 @@
+export { useDatetimePicker } from './use-datetime-picker.hook.mjs';
+export { useDatetimeRangePicker } from './use-datetime-range-picker.hook.mjs';
+import 'react';
+import '../types/common.types.mjs';
+import '@impulse-ui-native/flyout';
+import '@impulse-ui-native/primitives';

package/dist/hooks/index.js

@@ -0,0 +1,7 @@
+import { useDatetimePicker } from "./use-datetime-picker.hook";
+import { useDatetimeRangePicker } from "./use-datetime-range-picker.hook";
+export {
+  useDatetimePicker,
+  useDatetimeRangePicker
+};
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/index.ts"],"sourcesContent":["export { useDatetimePicker } from \"./use-datetime-picker.hook\";\nexport { useDatetimeRangePicker } from \"./use-datetime-range-picker.hook\";\n"],"mappings":"AAAA,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;","names":[]}

package/dist/hooks/use-datetime-picker.hook.d.mts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { TimePickerValue, TimeRange } from '../types/common.types.mjs';
+import '@impulse-ui-native/flyout';
+import '@impulse-ui-native/primitives';
+
+interface UseDatetimePickerStateOptions {
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (value: Date | null) => void;
+}
+declare function useDatetimePicker({ value, defaultValue, onChange, }: UseDatetimePickerStateOptions): {
+    id: string;
+    isOpen: boolean;
+    visible: Date;
+    tempDate: Date | null;
+    selected: Date | null;
+    setVisible: react.Dispatch<react.SetStateAction<Date>>;
+    setTempDate: react.Dispatch<react.SetStateAction<Date | null>>;
+    setSelected: (nextValue: react.SetStateAction<Date | null>) => void;
+    open: () => void;
+    close: () => void;
+    onPressOpen: () => void;
+    onPressApply: () => void;
+    onPressCancel: () => void;
+    onPressCalendarDay: (date: Date) => void;
+    onChangeTime: (time: TimePickerValue | null) => void;
+    onPressClear: () => void;
+    onPressQuickDateOption: (optionValue: Date | TimeRange) => void;
+    syncState: () => void;
+};
+
+export { useDatetimePicker };