@epilot/volt-ui-experimental-griffel 0.2.0 → 0.2.3

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

@@ -1 +1 @@
-{"version":3,"file":"date-time-picker-panel.js","sources":["../../../src/components/date-time-picker/date-time-picker-panel.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { Button } from \"../button/button\"\nimport { PopoverContent, PopoverPortal } from \"../popover/popover\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nimport { Calendar } from \"./calendar\"\nimport { TimePicker } from \"./time-picker\"\nimport { useDateTimePickerContext } from \"./date-time-picker-context\"\n\nexport type DateTimePickerPanelProps = {\n  showTimePicker?: boolean\n  timePickerPosition?: \"bottom\" | \"side\"\n  okLabel?: string\n  cancelLabel?: string\n  previousMonthLabel?: string\n  nextMonthLabel?: string\n  showTodayButton?: boolean\n  todayLabel?: string\n  showWeekNumbers?: boolean\n  className?: string\n  minuteStep?: number\n}\n\nconst useStyles = makeVoltStyles({\n  content: {\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n  },\n  contentNarrow: {\n    width: \"300px\",\n  },\n  panelContent: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingGroup2),\n    ...shorthands.padding(tokens.spacingElement3),\n  },\n  body: {\n    display: \"flex\",\n  },\n  bodyBottom: {\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingGroup1),\n  },\n  bodySide: {\n    flexDirection: \"row\",\n    ...shorthands.gap(tokens.spacingGroup1),\n    position: \"relative\",\n  },\n  dateSection: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    minWidth: \"0\",\n  },\n  timeSpacer: {\n    width: \"9rem\",\n    flexShrink: 0,\n  },\n  timeSection: {\n    position: \"absolute\",\n    top: 0,\n    bottom: 0,\n    right: 0,\n    width: \"9rem\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    display: \"flex\",\n    alignItems: \"stretch\",\n  },\n  footer: {\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    ...shorthands.gap(tokens.spacingElement2),\n  },\n})\n\nexport const DateTimePickerPanel = React.forwardRef<\n  HTMLDivElement,\n  DateTimePickerPanelProps\n>(function DateTimePickerPanel(\n  {\n    showTimePicker = true,\n    timePickerPosition = \"bottom\",\n    okLabel = \"Apply\",\n    cancelLabel = \"Cancel\",\n    previousMonthLabel = \"Previous month\",\n    nextMonthLabel = \"Next month\",\n    showTodayButton = false,\n    todayLabel = \"Today\",\n    showWeekNumbers = false,\n    className,\n    minuteStep = 1,\n  },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    tempValue,\n    isOpen,\n    locale,\n    disablePast,\n    currentTimeInTimezone,\n    handleDateChange,\n    confirm,\n    cancel,\n  } = useDateTimePickerContext()\n\n  // Responsive: fall back to bottom layout on narrow viewports.\n  const [isWideEnough, setIsWideEnough] = React.useState(true)\n\n  React.useEffect(() => {\n    if (timePickerPosition !== \"side\") return\n\n    const update = () => setIsWideEnough(window.innerWidth >= 480)\n\n    update()\n    window.addEventListener(\"resize\", update)\n\n    return () => window.removeEventListener(\"resize\", update)\n  }, [timePickerPosition])\n\n  // Fix viewport overflow: Floating UI's shift middleware may not work in all\n  // environments (e.g. microfrontend hosts). Manually detect overflow and\n  // adjust the popper wrapper's transform to keep the popover within viewport.\n  const contentRef = React.useRef<HTMLDivElement>(null)\n\n  React.useLayoutEffect(() => {\n    if (!isOpen) return\n\n    const adjustPosition = () => {\n      const el = contentRef.current\n      if (!el) return\n\n      // Lock popover width on first open to prevent resizing on calendar view changes\n      if (!el.dataset.widthLocked) {\n        el.style.width = `${el.offsetWidth}px`\n        el.dataset.widthLocked = \"true\"\n      }\n\n      const wrapper = el.closest(\n        \"[data-radix-popper-content-wrapper]\"\n      ) as HTMLElement | null\n      if (!wrapper) return\n\n      // Reset previous constraints so we measure natural size\n      const body = el.querySelector(\n        `[${SLOT_ATTR}=\"datetimepicker-body\"]`\n      ) as HTMLElement | null\n      if (body) {\n        body.style.maxHeight = \"\"\n        body.style.overflowY = \"\"\n      }\n\n      const rect = wrapper.getBoundingClientRect()\n      const vh = window.innerHeight\n      const vw = window.innerWidth\n      const pad = 8\n      const maxH = vh - 2 * pad\n\n      let matrix = { m41: 0, m42: 0 }\n      try {\n        const computedTransform = getComputedStyle(wrapper).transform\n        if (\n          typeof DOMMatrixReadOnly !== \"undefined\" &&\n          computedTransform &&\n          computedTransform !== \"none\"\n        ) {\n          matrix = new DOMMatrixReadOnly(computedTransform)\n        }\n      } catch {\n        // Fallback if transform cannot be parsed\n      }\n      let dy = 0\n      let dx = 0\n\n      if (rect.height > maxH) {\n        // Popover is taller than viewport — constrain the body area\n        // (keep footer visible) and pin to top padding\n        if (body) {\n          const footer = el.querySelector(\n            `[${SLOT_ATTR}=\"datetimepicker-footer\"]`\n          ) as HTMLElement | null\n          const footerH = footer ? footer.getBoundingClientRect().height : 0\n          body.style.maxHeight = `${maxH - footerH}px`\n          body.style.overflowY = \"auto\"\n        }\n        dy = pad - rect.top\n      } else {\n        // Fits in viewport — just shift to stay within bounds\n        if (rect.bottom > vh - pad) {\n          dy = vh - pad - rect.bottom\n        }\n        if (rect.top + dy < pad) {\n          dy = pad - rect.top\n        }\n      }\n\n      // Keep the popover on-screen horizontally\n      if (rect.right > vw - pad) {\n        dx = vw - pad - rect.right\n      }\n      if (rect.left + dx < pad) {\n        dx = pad - rect.left\n      }\n\n      if (dx !== 0 || dy !== 0) {\n        wrapper.style.transform = `translate(${matrix.m41 + dx}px, ${matrix.m42 + dy}px)`\n      }\n    }\n\n    // Wait for Floating UI to finish positioning\n    const raf = requestAnimationFrame(() => {\n      requestAnimationFrame(adjustPosition)\n    })\n\n    let resizeRaf = 0\n    const onResize = () => {\n      const el = contentRef.current\n      if (el) {\n        el.style.width = \"\"\n        delete el.dataset.widthLocked\n      }\n      cancelAnimationFrame(resizeRaf)\n      resizeRaf = requestAnimationFrame(() => {\n        resizeRaf = requestAnimationFrame(adjustPosition)\n      })\n    }\n    window.addEventListener(\"resize\", onResize)\n\n    const el = contentRef.current\n\n    return () => {\n      cancelAnimationFrame(raf)\n      cancelAnimationFrame(resizeRaf)\n      window.removeEventListener(\"resize\", onResize)\n      // Reset locked width on close so next open re-measures\n      if (el) {\n        el.style.width = \"\"\n        delete el.dataset.widthLocked\n      }\n    }\n  }, [isOpen])\n\n  const isSideLayout =\n    showTimePicker && timePickerPosition === \"side\" && isWideEnough\n\n  return (\n    <PopoverPortal>\n      <PopoverContent\n        align=\"start\"\n        className={mergeClasses(\n          styles.content,\n          !isSideLayout && styles.contentNarrow,\n          className\n        )}\n        collisionPadding={8}\n        flush\n        ref={ref}\n        side=\"bottom\"\n        sideOffset={4}\n        sticky=\"always\"\n      >\n        <div\n          className={styles.panelContent}\n          data-slot=\"datetimepicker-content\"\n          {...{ [SLOT_ATTR]: \"datetimepicker-content\" }}\n          ref={contentRef}\n        >\n          <div\n            className={mergeClasses(\n              styles.body,\n              isSideLayout ? styles.bodySide : styles.bodyBottom\n            )}\n            data-slot=\"datetimepicker-body\"\n            {...{ [SLOT_ATTR]: \"datetimepicker-body\" }}\n          >\n            {isSideLayout && showTimePicker ? (\n              <div\n                className={styles.dateSection}\n                data-slot=\"datetimepicker-date-section\"\n                {...{ [SLOT_ATTR]: \"datetimepicker-date-section\" }}\n              >\n                <Calendar\n                  currentTimeInTimezone={currentTimeInTimezone}\n                  disablePast={disablePast}\n                  locale={locale}\n                  nextMonthLabel={nextMonthLabel}\n                  onChange={handleDateChange}\n                  previousMonthLabel={previousMonthLabel}\n                  showTodayButton={showTodayButton}\n                  showWeekNumbers={showWeekNumbers}\n                  todayLabel={todayLabel}\n                  value={tempValue}\n                />\n              </div>\n            ) : (\n              <Calendar\n                currentTimeInTimezone={currentTimeInTimezone}\n                disablePast={disablePast}\n                locale={locale}\n                nextMonthLabel={nextMonthLabel}\n                onChange={handleDateChange}\n                previousMonthLabel={previousMonthLabel}\n                showTodayButton={showTodayButton}\n                showWeekNumbers={showWeekNumbers}\n                todayLabel={todayLabel}\n                value={tempValue}\n              />\n            )}\n            {showTimePicker && (\n              <>\n                {isSideLayout ? (\n                  <>\n                    <div\n                      className={styles.timeSpacer}\n                      data-slot=\"datetimepicker-time-spacer\"\n                      {...{ [SLOT_ATTR]: \"datetimepicker-time-spacer\" }}\n                    />\n                    <div\n                      className={styles.timeSection}\n                      data-slot=\"datetimepicker-time-section\"\n                      {...{ [SLOT_ATTR]: \"datetimepicker-time-section\" }}\n                    >\n                      <TimePicker\n                        currentTimeInTimezone={currentTimeInTimezone}\n                        disablePast={disablePast}\n                        fillHeight\n                        minuteStep={minuteStep}\n                        onChange={handleDateChange}\n                        value={tempValue}\n                      />\n                    </div>\n                  </>\n                ) : (\n                  <TimePicker\n                    currentTimeInTimezone={currentTimeInTimezone}\n                    disablePast={disablePast}\n                    minuteStep={minuteStep}\n                    onChange={handleDateChange}\n                    value={tempValue}\n                  />\n                )}\n              </>\n            )}\n          </div>\n          <div\n            className={styles.footer}\n            data-slot=\"datetimepicker-footer\"\n            {...{ [SLOT_ATTR]: \"datetimepicker-footer\" }}\n          >\n            <Button onClick={cancel} size=\"sm\" variant=\"secondary\">\n              {cancelLabel}\n            </Button>\n            <Button onClick={confirm} size=\"sm\" variant=\"primary\">\n              {okLabel}\n            </Button>\n          </div>\n        </div>\n      </PopoverContent>\n    </PopoverPortal>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.spacingGroup2","tokens.spacingElement3","tokens.spacingGroup1","tokens.spacingElement2","DateTimePickerPanel","React","showTimePicker","timePickerPosition","okLabel","cancelLabel","previousMonthLabel","nextMonthLabel","showTodayButton","todayLabel","showWeekNumbers","className","minuteStep","ref","styles","tempValue","isOpen","locale","disablePast","currentTimeInTimezone","handleDateChange","confirm","cancel","useDateTimePickerContext","isWideEnough","setIsWideEnough","update","contentRef","adjustPosition","el","wrapper","body","SLOT_ATTR","rect","vh","vw","pad","maxH","matrix","computedTransform","dy","dx","footer","footerH","raf","resizeRaf","onResize","isSideLayout","PopoverPortal","jsx","PopoverContent","mergeClasses","jsxs","Calendar","Fragment","TimePicker","Button"],"mappings":"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"}
+{"version":3,"file":"date-time-picker-panel.js","sources":["../../../src/components/date-time-picker/date-time-picker-panel.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { Button } from \"../button/button\"\nimport { PopoverContent, PopoverPortal } from \"../popover/popover\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nimport { Calendar } from \"./calendar\"\nimport { TimePicker } from \"./time-picker\"\nimport { useDateTimePickerContext } from \"./date-time-picker-context\"\n\nexport type DateTimePickerPanelProps = {\n  showTimePicker?: boolean\n  timePickerPosition?: \"bottom\" | \"side\"\n  okLabel?: string\n  cancelLabel?: string\n  previousMonthLabel?: string\n  nextMonthLabel?: string\n  hoursLabel?: string\n  minutesLabel?: string\n  showTodayButton?: boolean\n  todayLabel?: string\n  showWeekNumbers?: boolean\n  className?: string\n  minuteStep?: number\n}\n\nconst useStyles = makeVoltStyles({\n  content: {\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n  },\n  contentNarrow: {\n    width: \"300px\",\n  },\n  panelContent: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingGroup2),\n    ...shorthands.padding(tokens.spacingElement3),\n  },\n  body: {\n    display: \"flex\",\n  },\n  bodyBottom: {\n    flexDirection: \"column\",\n    ...shorthands.gap(tokens.spacingGroup1),\n  },\n  bodySide: {\n    flexDirection: \"row\",\n    ...shorthands.gap(tokens.spacingGroup1),\n    position: \"relative\",\n  },\n  dateSection: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    minWidth: \"0\",\n  },\n  timeSpacer: {\n    width: \"9rem\",\n    flexShrink: 0,\n  },\n  timeSection: {\n    position: \"absolute\",\n    top: 0,\n    bottom: 0,\n    right: 0,\n    width: \"9rem\",\n    overflowX: \"hidden\",\n    overflowY: \"hidden\",\n    display: \"flex\",\n    alignItems: \"stretch\",\n  },\n  footer: {\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    ...shorthands.gap(tokens.spacingElement2),\n  },\n})\n\nexport const DateTimePickerPanel = React.forwardRef<\n  HTMLDivElement,\n  DateTimePickerPanelProps\n>(function DateTimePickerPanel(\n  {\n    showTimePicker = true,\n    timePickerPosition = \"bottom\",\n    okLabel = \"Apply\",\n    cancelLabel = \"Cancel\",\n    previousMonthLabel = \"Previous month\",\n    nextMonthLabel = \"Next month\",\n    hoursLabel,\n    minutesLabel,\n    showTodayButton = false,\n    todayLabel = \"Today\",\n    showWeekNumbers = false,\n    className,\n    minuteStep = 1,\n  },\n  ref\n) {\n  const styles = useStyles()\n  const {\n    tempValue,\n    isOpen,\n    locale,\n    disablePast,\n    currentTimeInTimezone,\n    handleDateChange,\n    confirm,\n    cancel,\n  } = useDateTimePickerContext()\n\n  // Responsive: fall back to bottom layout on narrow viewports.\n  const [isWideEnough, setIsWideEnough] = React.useState(true)\n\n  React.useEffect(() => {\n    if (timePickerPosition !== \"side\") return\n\n    const update = () => setIsWideEnough(window.innerWidth >= 480)\n\n    update()\n    window.addEventListener(\"resize\", update)\n\n    return () => window.removeEventListener(\"resize\", update)\n  }, [timePickerPosition])\n\n  // Fix viewport overflow: Floating UI's shift middleware may not work in all\n  // environments (e.g. microfrontend hosts). Manually detect overflow and\n  // adjust the popper wrapper's transform to keep the popover within viewport.\n  const contentRef = React.useRef<HTMLDivElement>(null)\n\n  React.useLayoutEffect(() => {\n    if (!isOpen) return\n\n    const adjustPosition = () => {\n      const el = contentRef.current\n      if (!el) return\n\n      // Lock popover width on first open to prevent resizing on calendar view changes\n      if (!el.dataset.widthLocked) {\n        el.style.width = `${el.offsetWidth}px`\n        el.dataset.widthLocked = \"true\"\n      }\n\n      const wrapper = el.closest(\n        \"[data-radix-popper-content-wrapper]\"\n      ) as HTMLElement | null\n      if (!wrapper) return\n\n      // Reset previous constraints so we measure natural size\n      const body = el.querySelector(\n        `[${SLOT_ATTR}=\"datetimepicker-body\"]`\n      ) as HTMLElement | null\n      if (body) {\n        body.style.maxHeight = \"\"\n        body.style.overflowY = \"\"\n      }\n\n      const rect = wrapper.getBoundingClientRect()\n      const vh = window.innerHeight\n      const vw = window.innerWidth\n      const pad = 8\n      const maxH = vh - 2 * pad\n\n      let matrix = { m41: 0, m42: 0 }\n      try {\n        const computedTransform = getComputedStyle(wrapper).transform\n        if (\n          typeof DOMMatrixReadOnly !== \"undefined\" &&\n          computedTransform &&\n          computedTransform !== \"none\"\n        ) {\n          matrix = new DOMMatrixReadOnly(computedTransform)\n        }\n      } catch {\n        // Fallback if transform cannot be parsed\n      }\n      let dy = 0\n      let dx = 0\n\n      if (rect.height > maxH) {\n        // Popover is taller than viewport — constrain the body area\n        // (keep footer visible) and pin to top padding\n        if (body) {\n          const footer = el.querySelector(\n            `[${SLOT_ATTR}=\"datetimepicker-footer\"]`\n          ) as HTMLElement | null\n          const footerH = footer ? footer.getBoundingClientRect().height : 0\n          body.style.maxHeight = `${maxH - footerH}px`\n          body.style.overflowY = \"auto\"\n        }\n        dy = pad - rect.top\n      } else {\n        // Fits in viewport — just shift to stay within bounds\n        if (rect.bottom > vh - pad) {\n          dy = vh - pad - rect.bottom\n        }\n        if (rect.top + dy < pad) {\n          dy = pad - rect.top\n        }\n      }\n\n      // Keep the popover on-screen horizontally\n      if (rect.right > vw - pad) {\n        dx = vw - pad - rect.right\n      }\n      if (rect.left + dx < pad) {\n        dx = pad - rect.left\n      }\n\n      if (dx !== 0 || dy !== 0) {\n        wrapper.style.transform = `translate(${matrix.m41 + dx}px, ${matrix.m42 + dy}px)`\n      }\n    }\n\n    // Wait for Floating UI to finish positioning\n    const raf = requestAnimationFrame(() => {\n      requestAnimationFrame(adjustPosition)\n    })\n\n    let resizeRaf = 0\n    const onResize = () => {\n      const el = contentRef.current\n      if (el) {\n        el.style.width = \"\"\n        delete el.dataset.widthLocked\n      }\n      cancelAnimationFrame(resizeRaf)\n      resizeRaf = requestAnimationFrame(() => {\n        resizeRaf = requestAnimationFrame(adjustPosition)\n      })\n    }\n    window.addEventListener(\"resize\", onResize)\n\n    const el = contentRef.current\n\n    return () => {\n      cancelAnimationFrame(raf)\n      cancelAnimationFrame(resizeRaf)\n      window.removeEventListener(\"resize\", onResize)\n      // Reset locked width on close so next open re-measures\n      if (el) {\n        el.style.width = \"\"\n        delete el.dataset.widthLocked\n      }\n    }\n  }, [isOpen])\n\n  const isSideLayout =\n    showTimePicker && timePickerPosition === \"side\" && isWideEnough\n\n  return (\n    <PopoverPortal>\n      <PopoverContent\n        align=\"start\"\n        className={mergeClasses(\n          styles.content,\n          !isSideLayout && styles.contentNarrow,\n          className\n        )}\n        collisionPadding={8}\n        flush\n        ref={ref}\n        side=\"bottom\"\n        sideOffset={4}\n        sticky=\"always\"\n      >\n        <div\n          className={styles.panelContent}\n          data-slot=\"datetimepicker-content\"\n          {...{ [SLOT_ATTR]: \"datetimepicker-content\" }}\n          ref={contentRef}\n        >\n          <div\n            className={mergeClasses(\n              styles.body,\n              isSideLayout ? styles.bodySide : styles.bodyBottom\n            )}\n            data-slot=\"datetimepicker-body\"\n            {...{ [SLOT_ATTR]: \"datetimepicker-body\" }}\n          >\n            {isSideLayout && showTimePicker ? (\n              <div\n                className={styles.dateSection}\n                data-slot=\"datetimepicker-date-section\"\n                {...{ [SLOT_ATTR]: \"datetimepicker-date-section\" }}\n              >\n                <Calendar\n                  currentTimeInTimezone={currentTimeInTimezone}\n                  disablePast={disablePast}\n                  locale={locale}\n                  nextMonthLabel={nextMonthLabel}\n                  onChange={handleDateChange}\n                  previousMonthLabel={previousMonthLabel}\n                  showTodayButton={showTodayButton}\n                  showWeekNumbers={showWeekNumbers}\n                  todayLabel={todayLabel}\n                  value={tempValue}\n                />\n              </div>\n            ) : (\n              <Calendar\n                currentTimeInTimezone={currentTimeInTimezone}\n                disablePast={disablePast}\n                locale={locale}\n                nextMonthLabel={nextMonthLabel}\n                onChange={handleDateChange}\n                previousMonthLabel={previousMonthLabel}\n                showTodayButton={showTodayButton}\n                showWeekNumbers={showWeekNumbers}\n                todayLabel={todayLabel}\n                value={tempValue}\n              />\n            )}\n            {showTimePicker && (\n              <>\n                {isSideLayout ? (\n                  <>\n                    <div\n                      className={styles.timeSpacer}\n                      data-slot=\"datetimepicker-time-spacer\"\n                      {...{ [SLOT_ATTR]: \"datetimepicker-time-spacer\" }}\n                    />\n                    <div\n                      className={styles.timeSection}\n                      data-slot=\"datetimepicker-time-section\"\n                      {...{ [SLOT_ATTR]: \"datetimepicker-time-section\" }}\n                    >\n                      <TimePicker\n                        currentTimeInTimezone={currentTimeInTimezone}\n                        disablePast={disablePast}\n                        fillHeight\n                        hoursLabel={hoursLabel}\n                        minuteStep={minuteStep}\n                        minutesLabel={minutesLabel}\n                        onChange={handleDateChange}\n                        value={tempValue}\n                      />\n                    </div>\n                  </>\n                ) : (\n                  <TimePicker\n                    currentTimeInTimezone={currentTimeInTimezone}\n                    disablePast={disablePast}\n                    hoursLabel={hoursLabel}\n                    minuteStep={minuteStep}\n                    minutesLabel={minutesLabel}\n                    onChange={handleDateChange}\n                    value={tempValue}\n                  />\n                )}\n              </>\n            )}\n          </div>\n          <div\n            className={styles.footer}\n            data-slot=\"datetimepicker-footer\"\n            {...{ [SLOT_ATTR]: \"datetimepicker-footer\" }}\n          >\n            <Button onClick={cancel} size=\"sm\" variant=\"secondary\">\n              {cancelLabel}\n            </Button>\n            <Button onClick={confirm} size=\"sm\" variant=\"primary\">\n              {okLabel}\n            </Button>\n          </div>\n        </div>\n      </PopoverContent>\n    </PopoverPortal>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.spacingGroup2","tokens.spacingElement3","tokens.spacingGroup1","tokens.spacingElement2","DateTimePickerPanel","React","showTimePicker","timePickerPosition","okLabel","cancelLabel","previousMonthLabel","nextMonthLabel","hoursLabel","minutesLabel","showTodayButton","todayLabel","showWeekNumbers","className","minuteStep","ref","styles","tempValue","isOpen","locale","disablePast","currentTimeInTimezone","handleDateChange","confirm","cancel","useDateTimePickerContext","isWideEnough","setIsWideEnough","update","contentRef","adjustPosition","el","wrapper","body","SLOT_ATTR","rect","vh","vw","pad","maxH","matrix","computedTransform","dy","dx","footer","footerH","raf","resizeRaf","onResize","isSideLayout","PopoverPortal","jsx","PopoverContent","mergeClasses","jsxs","Calendar","Fragment","TimePicker","Button"],"mappings":"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"}

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

@@ -1,18 +1,18 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import * as N from "react";
-import { SLOT_ATTR as O } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as _ } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { Field as b, FieldLabel as q, FieldError as w } from "../field/field.js";
-import { makeVoltStyles as z } from "../../styles/make-styles.js";
-import { DateTimePickerRoot as B } from "./date-time-picker-context.js";
-import { DateTimePickerInput as G } from "./date-time-picker-input.js";
-import { DateTimePickerPopover as H } from "./date-time-picker-popover.js";
-import { DateTimePickerPanel as J } from "./date-time-picker-panel.js";
-const K = z({
+import * as _ from "react";
+import { SLOT_ATTR as b } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as q } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { Field as w, FieldLabel as z, FieldError as B } from "../field/field.js";
+import { makeVoltStyles as G } from "../../styles/make-styles.js";
+import { DateTimePickerRoot as H } from "./date-time-picker-context.js";
+import { DateTimePickerInput as J } from "./date-time-picker-input.js";
+import { DateTimePickerPopover as K } from "./date-time-picker-popover.js";
+import { DateTimePickerPanel as Q } from "./date-time-picker-panel.js";
+const U = G({
   root: {
     width: "100%"
   }
-}), oe = N.forwardRef(
+}), ae = _.forwardRef(
   function({
     value: a,
     onChange: m,
@@ -32,69 +32,73 @@ const K = z({
     openPickerAriaLabel: P,
     previousMonthLabel: T,
     nextMonthLabel: u,
-    showTodayButton: D,
-    todayLabel: F,
-    showWeekNumbers: M,
-    testId: R,
-    currentTimeInTimezone: g,
-    timePickerPosition: x,
+    hoursLabel: D,
+    minutesLabel: F,
+    showTodayButton: M,
+    todayLabel: R,
+    showWeekNumbers: g,
+    testId: x,
+    currentTimeInTimezone: S,
+    timePickerPosition: j,
     showTimePicker: r = !0,
-    editable: S,
-    iconPosition: j,
-    minuteStep: L
-  }, V) {
-    const A = K(), C = t ? "destructive" : "highlight", E = n ?? (r ? void 0 : "dd/MM/yyyy"), I = c ?? (r ? void 0 : "dd/MM/yyyy");
+    editable: L,
+    iconPosition: V,
+    minuteStep: A
+  }, C) {
+    const E = U(), I = t ? "destructive" : "highlight", N = n ?? (r ? void 0 : "dd/MM/yyyy"), O = c ?? (r ? void 0 : "dd/MM/yyyy");
     return /* @__PURE__ */ e(
-      B,
+      H,
       {
-        currentTimeInTimezone: g,
+        currentTimeInTimezone: S,
         disabled: d,
         disablePast: l,
-        format: E,
+        format: N,
         locale: f,
         onBlur: s,
         onChange: m,
         value: a,
         children: /* @__PURE__ */ i(
-          b,
+          w,
           {
-            className: _(A.root, p),
+            className: q(E.root, p),
             "data-slot": "datetimepicker",
-            [O]: "datetimepicker",
-            ref: V,
-            variant: C,
+            [b]: "datetimepicker",
+            ref: C,
+            variant: I,
             children: [
-              o && /* @__PURE__ */ e(q, { children: o }),
-              /* @__PURE__ */ i(H, { children: [
+              o && /* @__PURE__ */ e(z, { children: o }),
+              /* @__PURE__ */ i(K, { children: [
                 /* @__PURE__ */ e(
-                  G,
+                  J,
                   {
-                    editable: S,
-                    iconPosition: j,
+                    editable: L,
+                    iconPosition: V,
                     inputAriaLabel: v,
                     keyboardIcon: y,
                     openPickerAriaLabel: P,
-                    placeholder: I,
-                    testId: R
+                    placeholder: O,
+                    testId: x
                   }
                 ),
                 /* @__PURE__ */ e(
-                  J,
+                  Q,
                   {
                     cancelLabel: k,
-                    minuteStep: L,
+                    hoursLabel: D,
+                    minuteStep: A,
+                    minutesLabel: F,
                     nextMonthLabel: u,
                     okLabel: h,
                     previousMonthLabel: T,
                     showTimePicker: r,
-                    showTodayButton: D,
-                    showWeekNumbers: M,
-                    timePickerPosition: x,
-                    todayLabel: F
+                    showTodayButton: M,
+                    showWeekNumbers: g,
+                    timePickerPosition: j,
+                    todayLabel: R
                   }
                 )
               ] }),
-              t && /* @__PURE__ */ e(w, { children: t })
+              t && /* @__PURE__ */ e(B, { children: t })
             ]
           }
         )
@@ -103,10 +107,10 @@ const K = z({
   }
 );
 export {
-  oe as DateTimePicker,
-  G as DateTimePickerInput,
-  J as DateTimePickerPanel,
-  H as DateTimePickerPopover,
-  B as DateTimePickerRoot
+  ae as DateTimePicker,
+  J as DateTimePickerInput,
+  Q as DateTimePickerPanel,
+  K as DateTimePickerPopover,
+  H as DateTimePickerRoot
 };
 //# sourceMappingURL=date-time-picker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"date-time-picker.js","sources":["../../../src/components/date-time-picker/date-time-picker.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses } from \"@epilot/volt-ui-runtime\"\n\nimport { Field, FieldError, FieldLabel } from \"../field/field\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\n\nimport { DateTimePickerRoot } from \"./date-time-picker-context\"\nimport type { DateTimePickerRootProps } from \"./date-time-picker-context\"\nimport { DateTimePickerInput } from \"./date-time-picker-input\"\nimport type { DateTimePickerInputProps } from \"./date-time-picker-input\"\nimport { DateTimePickerPopover } from \"./date-time-picker-popover\"\nimport type { DateTimePickerPopoverProps } from \"./date-time-picker-popover\"\nimport { DateTimePickerPanel } from \"./date-time-picker-panel\"\nimport type { DateTimePickerPanelProps } from \"./date-time-picker-panel\"\nimport { Calendar } from \"./calendar\"\nimport type { CalendarProps } from \"./calendar\"\nimport { TimePicker } from \"./time-picker\"\nimport type { TimePickerProps } from \"./time-picker\"\nimport type { DateTimePickerLocale } from \"./date-time-picker-utils\"\n\ntype DateTimePickerProps = {\n  value: Date | null\n  onChange: (date: Date | null) => void\n  onBlur?: () => void\n  disabled?: boolean\n  disablePast?: boolean\n  label?: string\n  error?: string\n  placeholder?: string\n  format?: string\n  locale?: DateTimePickerLocale\n  className?: string\n  keyboardIcon?: React.ReactNode\n  okLabel?: string\n  cancelLabel?: string\n  inputAriaLabel?: string\n  openPickerAriaLabel?: string\n  previousMonthLabel?: string\n  nextMonthLabel?: string\n  showTodayButton?: boolean\n  todayLabel?: string\n  showWeekNumbers?: boolean\n  testId?: string\n  currentTimeInTimezone?: Date\n  timePickerPosition?: \"bottom\" | \"side\"\n  showTimePicker?: boolean\n  editable?: boolean\n  iconPosition?: \"start\" | \"end\"\n  minuteStep?: number\n}\n\nconst useStyles = makeVoltStyles({\n  root: {\n    width: \"100%\",\n  },\n})\n\nconst DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(\n  function DateTimePicker(\n    {\n      value,\n      onChange,\n      onBlur,\n      disabled = false,\n      disablePast = false,\n      label,\n      error,\n      placeholder,\n      format,\n      locale,\n      className,\n      keyboardIcon,\n      okLabel,\n      cancelLabel,\n      inputAriaLabel,\n      openPickerAriaLabel,\n      previousMonthLabel,\n      nextMonthLabel,\n      showTodayButton,\n      todayLabel,\n      showWeekNumbers,\n      testId,\n      currentTimeInTimezone,\n      timePickerPosition,\n      showTimePicker = true,\n      editable,\n      iconPosition,\n      minuteStep,\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const fieldVariant = error ? \"destructive\" : \"highlight\"\n    const resolvedFormat = format ?? (showTimePicker ? undefined : \"dd/MM/yyyy\")\n    const resolvedPlaceholder =\n      placeholder ?? (showTimePicker ? undefined : \"dd/MM/yyyy\")\n\n    return (\n      <DateTimePickerRoot\n        currentTimeInTimezone={currentTimeInTimezone}\n        disabled={disabled}\n        disablePast={disablePast}\n        format={resolvedFormat}\n        locale={locale}\n        onBlur={onBlur}\n        onChange={onChange}\n        value={value}\n      >\n        <Field\n          className={mergeClasses(styles.root, className)}\n          data-slot=\"datetimepicker\"\n          {...{ [SLOT_ATTR]: \"datetimepicker\" }}\n          ref={ref}\n          variant={fieldVariant}\n        >\n          {label && <FieldLabel>{label}</FieldLabel>}\n          <DateTimePickerPopover>\n            <DateTimePickerInput\n              editable={editable}\n              iconPosition={iconPosition}\n              inputAriaLabel={inputAriaLabel}\n              keyboardIcon={keyboardIcon}\n              openPickerAriaLabel={openPickerAriaLabel}\n              placeholder={resolvedPlaceholder}\n              testId={testId}\n            />\n            <DateTimePickerPanel\n              cancelLabel={cancelLabel}\n              minuteStep={minuteStep}\n              nextMonthLabel={nextMonthLabel}\n              okLabel={okLabel}\n              previousMonthLabel={previousMonthLabel}\n              showTimePicker={showTimePicker}\n              showTodayButton={showTodayButton}\n              showWeekNumbers={showWeekNumbers}\n              timePickerPosition={timePickerPosition}\n              todayLabel={todayLabel}\n            />\n          </DateTimePickerPopover>\n          {error && <FieldError>{error}</FieldError>}\n        </Field>\n      </DateTimePickerRoot>\n    )\n  }\n)\n\nexport {\n  DateTimePicker,\n  DateTimePickerRoot,\n  DateTimePickerInput,\n  DateTimePickerPopover,\n  DateTimePickerPanel,\n  Calendar,\n  TimePicker,\n}\n\nexport type {\n  DateTimePickerProps,\n  DateTimePickerRootProps,\n  DateTimePickerInputProps,\n  DateTimePickerPopoverProps,\n  DateTimePickerPanelProps,\n  CalendarProps,\n  TimePickerProps,\n  DateTimePickerLocale,\n}\n"],"names":["useStyles","makeVoltStyles","DateTimePicker","React","value","onChange","onBlur","disabled","disablePast","label","error","placeholder","format","locale","className","keyboardIcon","okLabel","cancelLabel","inputAriaLabel","openPickerAriaLabel","previousMonthLabel","nextMonthLabel","showTodayButton","todayLabel","showWeekNumbers","testId","currentTimeInTimezone","timePickerPosition","showTimePicker","editable","iconPosition","minuteStep","ref","styles","fieldVariant","resolvedFormat","resolvedPlaceholder","jsx","DateTimePickerRoot","jsxs","Field","mergeClasses","SLOT_ATTR","FieldLabel","DateTimePickerPopover","DateTimePickerInput","DateTimePickerPanel","FieldError"],"mappings":";;;;;;;;;;AAoDA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,OAAO;AAAA,EAAA;AAEX,CAAC,GAEKC,KAAiBC,EAAM;AAAA,EAC3B,SACE;AAAA,IACE,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,aAAAC,IAAc;AAAA,IACd,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,GAEFC,GACA;AACA,UAAMC,IAASjC,EAAA,GACTkC,IAAexB,IAAQ,gBAAgB,aACvCyB,IAAiBvB,MAAWgB,IAAiB,SAAY,eACzDQ,IACJzB,MAAgBiB,IAAiB,SAAY;AAE/C,WACE,gBAAAS;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,uBAAAZ;AAAA,QACA,UAAAnB;AAAA,QACA,aAAAC;AAAA,QACA,QAAQ2B;AAAA,QACR,QAAAtB;AAAA,QACA,QAAAP;AAAA,QACA,UAAAD;AAAA,QACA,OAAAD;AAAA,QAEA,UAAA,gBAAAmC;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAaR,EAAO,MAAMnB,CAAS;AAAA,YAC9C,aAAU;AAAA,YACJ,CAAC4B,CAAS,GAAG;AAAA,YACnB,KAAAV;AAAA,YACA,SAASE;AAAA,YAER,UAAA;AAAA,cAAAzB,KAAS,gBAAA4B,EAACM,KAAY,UAAAlC,EAAA,CAAM;AAAA,gCAC5BmC,GAAA,EACC,UAAA;AAAA,gBAAA,gBAAAP;AAAA,kBAACQ;AAAA,kBAAA;AAAA,oBACC,UAAAhB;AAAA,oBACA,cAAAC;AAAA,oBACA,gBAAAZ;AAAA,oBACA,cAAAH;AAAA,oBACA,qBAAAI;AAAA,oBACA,aAAaiB;AAAA,oBACb,QAAAX;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEF,gBAAAY;AAAA,kBAACS;AAAA,kBAAA;AAAA,oBACC,aAAA7B;AAAA,oBACA,YAAAc;AAAA,oBACA,gBAAAV;AAAA,oBACA,SAAAL;AAAA,oBACA,oBAAAI;AAAA,oBACA,gBAAAQ;AAAA,oBACA,iBAAAN;AAAA,oBACA,iBAAAE;AAAA,oBACA,oBAAAG;AAAA,oBACA,YAAAJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF,GACF;AAAA,cACCb,KAAS,gBAAA2B,EAACU,GAAA,EAAY,UAAArC,EAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAC/B;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"date-time-picker.js","sources":["../../../src/components/date-time-picker/date-time-picker.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses } from \"@epilot/volt-ui-runtime\"\n\nimport { Field, FieldError, FieldLabel } from \"../field/field\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\n\nimport { DateTimePickerRoot } from \"./date-time-picker-context\"\nimport type { DateTimePickerRootProps } from \"./date-time-picker-context\"\nimport { DateTimePickerInput } from \"./date-time-picker-input\"\nimport type { DateTimePickerInputProps } from \"./date-time-picker-input\"\nimport { DateTimePickerPopover } from \"./date-time-picker-popover\"\nimport type { DateTimePickerPopoverProps } from \"./date-time-picker-popover\"\nimport { DateTimePickerPanel } from \"./date-time-picker-panel\"\nimport type { DateTimePickerPanelProps } from \"./date-time-picker-panel\"\nimport { Calendar } from \"./calendar\"\nimport type { CalendarProps } from \"./calendar\"\nimport { TimePicker } from \"./time-picker\"\nimport type { TimePickerProps } from \"./time-picker\"\nimport type { DateTimePickerLocale } from \"./date-time-picker-utils\"\n\ntype DateTimePickerProps = {\n  value: Date | null\n  onChange: (date: Date | null) => void\n  onBlur?: () => void\n  disabled?: boolean\n  disablePast?: boolean\n  label?: string\n  error?: string\n  placeholder?: string\n  format?: string\n  locale?: DateTimePickerLocale\n  className?: string\n  keyboardIcon?: React.ReactNode\n  okLabel?: string\n  cancelLabel?: string\n  inputAriaLabel?: string\n  openPickerAriaLabel?: string\n  previousMonthLabel?: string\n  nextMonthLabel?: string\n  hoursLabel?: string\n  minutesLabel?: string\n  showTodayButton?: boolean\n  todayLabel?: string\n  showWeekNumbers?: boolean\n  testId?: string\n  currentTimeInTimezone?: Date\n  timePickerPosition?: \"bottom\" | \"side\"\n  showTimePicker?: boolean\n  editable?: boolean\n  iconPosition?: \"start\" | \"end\"\n  minuteStep?: number\n}\n\nconst useStyles = makeVoltStyles({\n  root: {\n    width: \"100%\",\n  },\n})\n\nconst DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(\n  function DateTimePicker(\n    {\n      value,\n      onChange,\n      onBlur,\n      disabled = false,\n      disablePast = false,\n      label,\n      error,\n      placeholder,\n      format,\n      locale,\n      className,\n      keyboardIcon,\n      okLabel,\n      cancelLabel,\n      inputAriaLabel,\n      openPickerAriaLabel,\n      previousMonthLabel,\n      nextMonthLabel,\n      hoursLabel,\n      minutesLabel,\n      showTodayButton,\n      todayLabel,\n      showWeekNumbers,\n      testId,\n      currentTimeInTimezone,\n      timePickerPosition,\n      showTimePicker = true,\n      editable,\n      iconPosition,\n      minuteStep,\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const fieldVariant = error ? \"destructive\" : \"highlight\"\n    const resolvedFormat = format ?? (showTimePicker ? undefined : \"dd/MM/yyyy\")\n    const resolvedPlaceholder =\n      placeholder ?? (showTimePicker ? undefined : \"dd/MM/yyyy\")\n\n    return (\n      <DateTimePickerRoot\n        currentTimeInTimezone={currentTimeInTimezone}\n        disabled={disabled}\n        disablePast={disablePast}\n        format={resolvedFormat}\n        locale={locale}\n        onBlur={onBlur}\n        onChange={onChange}\n        value={value}\n      >\n        <Field\n          className={mergeClasses(styles.root, className)}\n          data-slot=\"datetimepicker\"\n          {...{ [SLOT_ATTR]: \"datetimepicker\" }}\n          ref={ref}\n          variant={fieldVariant}\n        >\n          {label && <FieldLabel>{label}</FieldLabel>}\n          <DateTimePickerPopover>\n            <DateTimePickerInput\n              editable={editable}\n              iconPosition={iconPosition}\n              inputAriaLabel={inputAriaLabel}\n              keyboardIcon={keyboardIcon}\n              openPickerAriaLabel={openPickerAriaLabel}\n              placeholder={resolvedPlaceholder}\n              testId={testId}\n            />\n            <DateTimePickerPanel\n              cancelLabel={cancelLabel}\n              hoursLabel={hoursLabel}\n              minuteStep={minuteStep}\n              minutesLabel={minutesLabel}\n              nextMonthLabel={nextMonthLabel}\n              okLabel={okLabel}\n              previousMonthLabel={previousMonthLabel}\n              showTimePicker={showTimePicker}\n              showTodayButton={showTodayButton}\n              showWeekNumbers={showWeekNumbers}\n              timePickerPosition={timePickerPosition}\n              todayLabel={todayLabel}\n            />\n          </DateTimePickerPopover>\n          {error && <FieldError>{error}</FieldError>}\n        </Field>\n      </DateTimePickerRoot>\n    )\n  }\n)\n\nexport {\n  DateTimePicker,\n  DateTimePickerRoot,\n  DateTimePickerInput,\n  DateTimePickerPopover,\n  DateTimePickerPanel,\n  Calendar,\n  TimePicker,\n}\n\nexport type {\n  DateTimePickerProps,\n  DateTimePickerRootProps,\n  DateTimePickerInputProps,\n  DateTimePickerPopoverProps,\n  DateTimePickerPanelProps,\n  CalendarProps,\n  TimePickerProps,\n  DateTimePickerLocale,\n}\n"],"names":["useStyles","makeVoltStyles","DateTimePicker","React","value","onChange","onBlur","disabled","disablePast","label","error","placeholder","format","locale","className","keyboardIcon","okLabel","cancelLabel","inputAriaLabel","openPickerAriaLabel","previousMonthLabel","nextMonthLabel","hoursLabel","minutesLabel","showTodayButton","todayLabel","showWeekNumbers","testId","currentTimeInTimezone","timePickerPosition","showTimePicker","editable","iconPosition","minuteStep","ref","styles","fieldVariant","resolvedFormat","resolvedPlaceholder","jsx","DateTimePickerRoot","jsxs","Field","mergeClasses","SLOT_ATTR","FieldLabel","DateTimePickerPopover","DateTimePickerInput","DateTimePickerPanel","FieldError"],"mappings":";;;;;;;;;;AAsDA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,MAAM;AAAA,IACJ,OAAO;AAAA,EAAA;AAEX,CAAC,GAEKC,KAAiBC,EAAM;AAAA,EAC3B,SACE;AAAA,IACE,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,aAAAC,IAAc;AAAA,IACd,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,GAEFC,GACA;AACA,UAAMC,IAASnC,EAAA,GACToC,IAAe1B,IAAQ,gBAAgB,aACvC2B,IAAiBzB,MAAWkB,IAAiB,SAAY,eACzDQ,IACJ3B,MAAgBmB,IAAiB,SAAY;AAE/C,WACE,gBAAAS;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,uBAAAZ;AAAA,QACA,UAAArB;AAAA,QACA,aAAAC;AAAA,QACA,QAAQ6B;AAAA,QACR,QAAAxB;AAAA,QACA,QAAAP;AAAA,QACA,UAAAD;AAAA,QACA,OAAAD;AAAA,QAEA,UAAA,gBAAAqC;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAaR,EAAO,MAAMrB,CAAS;AAAA,YAC9C,aAAU;AAAA,YACJ,CAAC8B,CAAS,GAAG;AAAA,YACnB,KAAAV;AAAA,YACA,SAASE;AAAA,YAER,UAAA;AAAA,cAAA3B,KAAS,gBAAA8B,EAACM,KAAY,UAAApC,EAAA,CAAM;AAAA,gCAC5BqC,GAAA,EACC,UAAA;AAAA,gBAAA,gBAAAP;AAAA,kBAACQ;AAAA,kBAAA;AAAA,oBACC,UAAAhB;AAAA,oBACA,cAAAC;AAAA,oBACA,gBAAAd;AAAA,oBACA,cAAAH;AAAA,oBACA,qBAAAI;AAAA,oBACA,aAAamB;AAAA,oBACb,QAAAX;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEF,gBAAAY;AAAA,kBAACS;AAAA,kBAAA;AAAA,oBACC,aAAA/B;AAAA,oBACA,YAAAK;AAAA,oBACA,YAAAW;AAAA,oBACA,cAAAV;AAAA,oBACA,gBAAAF;AAAA,oBACA,SAAAL;AAAA,oBACA,oBAAAI;AAAA,oBACA,gBAAAU;AAAA,oBACA,iBAAAN;AAAA,oBACA,iBAAAE;AAAA,oBACA,oBAAAG;AAAA,oBACA,YAAAJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF,GACF;AAAA,cACCf,KAAS,gBAAA6B,EAACU,GAAA,EAAY,UAAAvC,EAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAC/B;AAAA,IAAA;AAAA,EAGN;AACF;"}

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

@@ -1,18 +1,18 @@
-import { jsxs as $, jsx as u } from "react/jsx-runtime";
+import { jsxs as v, jsx as m } from "react/jsx-runtime";
 import * as n from "react";
 import { shorthands as y } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
 import { SLOT_ATTR as x } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as h } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as q } from "../../styles/make-styles.js";
-import { grayA5 as v, semAccentSolidHover as O, semAccentContrast as U, semAccentSolid as _, fontWeightSemibold as F, grayA4 as z, grayA11 as G, leadingSm as L, textSm as Q, grayA8 as X, leadingBase as J, textBase as K, grayA6 as P, radiusMd as A, spacingElement1 as Z } from "../../tokens/index.js";
-import { getHours as tt, getMinutes as et, updateTime as N, padNumber as rt } from "./date-time-picker-utils.js";
-const ot = Array.from({ length: 24 }, (H, e) => e), R = q({
+import { makeVoltStyles as O } from "../../styles/make-styles.js";
+import { radiusMd as F, grayA5 as U, spacingElement1 as _, semAccentSolidHover as z, semAccentContrast as G, semAccentSolid as L, fontWeightSemibold as A, grayA4 as Q, grayA11 as X, leadingSm as J, textSm as K, grayA8 as P, leadingBase as Z, textBase as tt, grayA6 as et } from "../../tokens/index.js";
+import { getHours as rt, getMinutes as ot, updateTime as N, padNumber as nt } from "./date-time-picker-utils.js";
+const lt = Array.from({ length: 24 }, (w, e) => e), R = O({
   root: {
     display: "flex",
     flexDirection: "row",
     alignItems: "stretch",
     justifyContent: "center",
-    ...y.gap(Z)
+    ...y.gap(_)
   },
   fillHeight: {
     height: "100%"
@@ -33,10 +33,10 @@ const ot = Array.from({ length: 24 }, (H, e) => e), R = q({
     overflowX: "hidden",
     width: "100%",
     alignItems: "center",
-    ...y.borderRadius(A),
-    ...y.border("1px", "solid", v),
+    ...y.borderRadius(F),
+    ...y.border("1px", "solid", U),
     scrollbarWidth: "thin",
-    scrollbarColor: `${P} transparent`
+    scrollbarColor: `${et} transparent`
   },
   scrollFixed: {
     height: "8rem"
@@ -51,18 +51,18 @@ const ot = Array.from({ length: 24 }, (H, e) => e), R = q({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: K,
-    lineHeight: J,
-    fontWeight: F,
-    color: X
+    fontSize: tt,
+    lineHeight: Z,
+    fontWeight: A,
+    color: P
   },
   timeBtn: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: Q,
-    lineHeight: L,
-    ...y.borderRadius(A),
+    fontSize: K,
+    lineHeight: J,
+    ...y.borderRadius(F),
     transitionProperty: "background-color, color",
     transitionDuration: "150ms",
     minHeight: "2rem",
@@ -73,17 +73,17 @@ const ot = Array.from({ length: 24 }, (H, e) => e), R = q({
   },
   timeBtnDefault: {
     backgroundColor: "transparent",
-    color: G,
+    color: X,
     ":hover": {
-      backgroundColor: z
+      backgroundColor: Q
     }
   },
   timeBtnSelected: {
-    fontWeight: F,
-    backgroundColor: _,
-    color: U,
+    fontWeight: A,
+    backgroundColor: L,
+    color: G,
     ":hover": {
-      backgroundColor: O
+      backgroundColor: z
     }
   },
   timeBtnDisabled: {
@@ -93,83 +93,85 @@ const ot = Array.from({ length: 24 }, (H, e) => e), R = q({
   timeBtnEnabled: {
     cursor: "pointer"
   }
-}), w = n.memo(function({
+}), H = n.memo(function({
   value: e,
-  isSelected: c,
+  isSelected: a,
   isDisabled: l,
   onClick: d
 }) {
-  const a = R(), f = n.useCallback(() => {
+  const c = R(), f = n.useCallback(() => {
     l || d(e);
   }, [d, e, l]);
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ m(
     "button",
     {
       "aria-disabled": l,
-      "aria-pressed": c,
+      "aria-pressed": a,
       className: h(
-        a.timeBtn,
-        !c && a.timeBtnDefault,
-        c && a.timeBtnSelected,
-        l ? a.timeBtnDisabled : a.timeBtnEnabled
+        c.timeBtn,
+        !a && c.timeBtnDefault,
+        a && c.timeBtnSelected,
+        l ? c.timeBtnDisabled : c.timeBtnEnabled
       ),
-      "data-selected": c,
+      "data-selected": a,
       "data-slot": "time-button",
       [x]: "time-button",
       "data-value": e,
       disabled: l,
       onClick: f,
       type: "button",
-      children: rt(e)
+      children: nt(e)
     }
   );
 });
-w.displayName = "TimeButton";
-const ut = n.forwardRef(
+H.displayName = "TimeButton";
+const ft = n.forwardRef(
   function({
     value: e,
-    onChange: c,
+    onChange: a,
     onTimeSelect: l,
     disablePast: d = !1,
-    currentTimeInTimezone: a,
+    currentTimeInTimezone: c,
     fillHeight: f = !1,
     minuteStep: I = 1,
-    className: j
-  }, W) {
+    className: j,
+    hoursLabel: W = "Hours",
+    minutesLabel: T = "Minutes"
+  }, E) {
     const r = R(), g = Math.max(1, Math.floor(I)), M = n.useMemo(() => {
       const t = [];
       for (let i = 0; i < 60; i += g) t.push(i);
       return t;
-    }, [g]), m = e !== null ? tt(e) : -1, S = e !== null ? et(e) : -1, p = e === null ? -1 : g === 1 ? S : Math.min(
+    }, [g]), u = e !== null ? rt(e) : -1, S = e !== null ? ot(e) : -1, p = e === null ? -1 : g === 1 ? S : Math.min(
       M[M.length - 1],
       Math.round(S / g) * g
     ), C = n.useRef(null), B = n.useRef(null), s = n.useMemo(
-      () => a || /* @__PURE__ */ new Date(),
-      [a]
-    ), k = n.useMemo(() => e ? e.getFullYear() === s.getFullYear() && e.getMonth() === s.getMonth() && e.getDate() === s.getDate() : !1, [e, s]), b = s.getHours(), D = s.getMinutes(), T = n.useCallback(
+      () => c || /* @__PURE__ */ new Date(),
+      [c]
+    ), k = n.useMemo(() => e ? e.getFullYear() === s.getFullYear() && e.getMonth() === s.getMonth() && e.getDate() === s.getDate() : !1, [e, s]), b = s.getHours(), D = s.getMinutes(), V = n.useCallback(
       (t) => !d || !k ? !1 : t < b,
       [d, k, b]
-    ), E = n.useCallback(
-      (t) => !d || !k ? !1 : m < b ? !0 : m === b ? t < D : !1,
-      [d, k, m, b, D]
-    ), V = n.useCallback(
+    ), Y = n.useCallback(
+      (t) => !d || !k ? !1 : u < b ? !0 : u === b ? t < D : !1,
+      [d, k, u, b, D]
+    ), $ = n.useCallback(
       (t) => {
         const i = e || s, o = p >= 0 ? p : 0;
-        c(N(i, t, o));
+        a(N(i, t, o));
       },
-      [c, e, s, p]
-    ), Y = n.useCallback(
+      [a, e, s, p]
+    ), q = n.useCallback(
       (t) => {
-        const i = e || s, o = m >= 0 ? m : 0;
-        c(N(i, o, t)), l == null || l();
+        const i = e || s, o = u >= 0 ? u : 0;
+        a(N(i, o, t)), l == null || l();
       },
-      [c, l, e, s, m]
+      [a, l, e, s, u]
     );
     return n.useEffect(() => {
       var t, i;
       if (C.current) {
         const o = C.current.querySelector(
-          `[data-value="${m}"]`
+          `[data-value="${u}"]`
         );
         o && ((t = o.scrollIntoView) == null || t.call(o, {
           block: "center",
@@ -185,10 +187,10 @@ const ut = n.forwardRef(
           behavior: "auto"
         }));
       }
-    }, []), /* @__PURE__ */ $(
+    }, []), /* @__PURE__ */ v(
       "div",
       {
-        ref: W,
+        ref: E,
         className: h(
           r.root,
           f && r.fillHeight,
@@ -197,29 +199,31 @@ const ut = n.forwardRef(
         "data-slot": "timepicker",
         [x]: "timepicker",
         children: [
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ m(
             "div",
             {
               className: h(
                 r.column,
                 f && r.columnFillHeight
               ),
-              children: /* @__PURE__ */ u(
+              children: /* @__PURE__ */ m(
                 "div",
                 {
                   className: h(
                     r.scroll,
                     f ? r.scrollFill : r.scrollFixed
                   ),
+                  "aria-label": W,
                   "data-slot": "timepicker-scroll",
+                  role: "group",
                   [x]: "timepicker-scroll",
                   ref: C,
-                  children: ot.map((t) => /* @__PURE__ */ u(
-                    w,
+                  children: lt.map((t) => /* @__PURE__ */ m(
+                    H,
                     {
-                      isDisabled: T(t),
-                      isSelected: t === m,
-                      onClick: V,
+                      isDisabled: V(t),
+                      isSelected: t === u,
+                      onClick: $,
                       value: t
                     },
                     t
@@ -228,30 +232,32 @@ const ut = n.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ u("div", { className: r.separator, children: ":" }),
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ m("div", { className: r.separator, children: ":" }),
+          /* @__PURE__ */ m(
             "div",
             {
               className: h(
                 r.column,
                 f && r.columnFillHeight
               ),
-              children: /* @__PURE__ */ u(
+              children: /* @__PURE__ */ m(
                 "div",
                 {
                   className: h(
                     r.scroll,
                     f ? r.scrollFill : r.scrollFixed
                   ),
+                  "aria-label": T,
                   "data-slot": "timepicker-scroll",
+                  role: "group",
                   [x]: "timepicker-scroll",
                   ref: B,
-                  children: M.map((t) => /* @__PURE__ */ u(
-                    w,
+                  children: M.map((t) => /* @__PURE__ */ m(
+                    H,
                     {
-                      isDisabled: E(t),
+                      isDisabled: Y(t),
                       isSelected: t === p,
-                      onClick: Y,
+                      onClick: q,
                       value: t
                     },
                     t
@@ -266,6 +272,6 @@ const ut = n.forwardRef(
   }
 );
 export {
-  ut as TimePicker
+  ft as TimePicker
 };
 //# sourceMappingURL=time-picker.js.map