@razorpay/blade 12.53.1 → 12.54.0

package/build/lib/web/development/components/TimePicker/TimeInput.web.js

@@ -0,0 +1,256 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default, { useRef, useState } from 'react';
+import styled from 'styled-components';
+import { useLocale } from '@react-aria/i18n';
+import { useDateSegment, useTimeField } from '@react-aria/datepicker';
+import { useTimeFieldState } from '@react-stately/datepicker';
+import '../Box/BaseBox/index.js';
+import { BaseInput } from '../Input/BaseInput/BaseInput.js';
+import '../BladeProvider/index.js';
+import '../Icons/index.js';
+import '../../utils/assignWithoutSideEffects/index.js';
+import { mergeRefs } from '../../utils/useMergeRefs.js';
+import '../../tokens/global/index.js';
+import '../../utils/makeSpace/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
+import { spacing } from '../../tokens/global/spacing.js';
+import useTheme from '../BladeProvider/useTheme.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import ClockIcon from '../Icons/ClockIcon/ClockIcon.js';
+import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+
+var _excluded = ["timeValue", "internalTimeValue", "onChange", "onTimeValueChange", "label", "helpText", "errorText", "successText", "validationState", "isDisabled", "isRequired", "necessityIndicator", "autoFocus", "name", "placeholder", "size", "labelPosition", "labelSuffix", "labelTrailing", "timeFormat", "testID", "accessibilityLabel", "inputRef", "referenceProps", "createCompleteTime", "setIsDropdownOpen"],
+  _excluded2 = ["onKeyDown"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var StyledTimeSegment = /*#__PURE__*/styled.div.withConfig({
+  displayName: "TimeInputweb__StyledTimeSegment",
+  componentId: "kpey4b-0"
+})(["padding-left:", ";padding-right:", ";box-sizing:content-box;font-variant-numeric:tabular-nums;text-align:right;outline:none;border-radius:", ";&:focus{background-color:", " !important;color:#ffffff !important;span{color:#000000 !important;}}"], makeSpace(spacing[1]), makeSpace(spacing[1]), makeSpace(spacing[1]), function (_ref) {
+  var theme = _ref.theme;
+  return theme.colors.interactive.background.primary.faded;
+});
+
+/**
+ * TimeSegment Component
+ *
+ * Renders individual time segments (hour, minute, AM/PM) or literal text (separators like ":", " ").
+ *
+ * For EDITABLE segments (hour, minute, dayPeriod):
+ * - Uses React Aria's useDateSegment for full keyboard/accessibility support
+ * - Renders as contentEditable div that users can click and type in
+ * - Handles arrow keys, number input, focus management automatically
+ *
+ * For LITERAL segments (separators):
+ * - Just renders static text in a span
+ * - No interaction or focus behavior
+ */
+var TimeSegment = function TimeSegment(_ref2) {
+  var segment = _ref2.segment,
+    state = _ref2.state,
+    isDisabled = _ref2.isDisabled;
+  var ref = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var _useDateSegment = useDateSegment(segment, state, ref),
+    segmentProps = _useDateSegment.segmentProps;
+
+  // Filter out bi-directional text control characters (⁦⁩) that React Aria adds for RTL support but aren't needed for our UI - they appear as extra literal segments in some environments
+
+  if (segment.type === 'literal' && segment.text === '⁦' || segment.text === '⁩') {
+    return null;
+  }
+  // Calculate minWidth based on segment maxValue to prevent layout shifts
+  var minWidth = segment.maxValue != null ? "".concat(String(segment.maxValue).length, "ch") : 'auto';
+  return /*#__PURE__*/jsxs(StyledTimeSegment, _objectSpread(_objectSpread({
+    ref: ref,
+    theme: theme,
+    style: _objectSpread(_objectSpread({}, segmentProps.style), {}, {
+      minWidth: minWidth
+    }),
+    onFocus: function onFocus(e) {
+      var _segmentProps$onFocus;
+      setIsFocused(true);
+      (_segmentProps$onFocus = segmentProps.onFocus) === null || _segmentProps$onFocus === void 0 || _segmentProps$onFocus.call(segmentProps, e);
+    },
+    onBlur: function onBlur(e) {
+      var _segmentProps$onBlur;
+      setIsFocused(false);
+      (_segmentProps$onBlur = segmentProps.onBlur) === null || _segmentProps$onBlur === void 0 || _segmentProps$onBlur.call(segmentProps, e);
+    }
+  }, segmentProps), {}, {
+    children: [/*#__PURE__*/jsxs(BaseBox, {
+      as: "span",
+      display: "block",
+      width: "100%",
+      textAlign: "center",
+      visibility: segment.isPlaceholder ? undefined : 'hidden',
+      height: segment.isPlaceholder ? 'auto' : 'spacing.0',
+      pointerEvents: "none",
+      style: {
+        color: isFocused ? theme.colors.surface.text.gray.normal : theme.colors.surface.text.gray.disabled
+      },
+      children: [segment.placeholder, " "]
+    }), /*#__PURE__*/jsx(BaseBox, {
+      as: "span",
+      style: {
+        color: isDisabled ? theme.colors.surface.text.gray.disabled : theme.colors.surface.text.gray.normal
+      },
+      children: segment.isPlaceholder ? '' : segment.type === 'dayPeriod' ? segment.text.toUpperCase() : segment.text
+    })]
+  }));
+};
+
+/**
+ * TimeInput Component
+ *
+ * A complete time input field built with React Aria for accessibility and keyboard interaction.
+ *
+ * ARCHITECTURE:
+ * - Uses React Aria's useTimeFieldState for time value management & field-level behavior
+ * - Uses Blade's BaseInput (as="div") for styling and form integration
+ * - Renders multiple TimeSegment components for individual time parts
+ *
+ * USER INTERACTION:
+ * - Click on any segment (hour, minute, AM/PM) to focus and edit
+ * - Type numbers directly to change values
+ * - Use arrow keys to increment/decrement values
+ * - Tab between segments for navigation
+ * - Full keyboard accessibility support
+ */
+var _TimeInput = function _TimeInput(_ref3, ref) {
+  var timeValue = _ref3.timeValue,
+    internalTimeValue = _ref3.internalTimeValue,
+    onChange = _ref3.onChange,
+    onTimeValueChange = _ref3.onTimeValueChange,
+    label = _ref3.label,
+    helpText = _ref3.helpText,
+    errorText = _ref3.errorText,
+    successText = _ref3.successText,
+    validationState = _ref3.validationState,
+    isDisabled = _ref3.isDisabled,
+    isRequired = _ref3.isRequired,
+    necessityIndicator = _ref3.necessityIndicator,
+    autoFocus = _ref3.autoFocus,
+    name = _ref3.name,
+    placeholder = _ref3.placeholder,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 'medium' : _ref3$size,
+    labelPosition = _ref3.labelPosition,
+    labelSuffix = _ref3.labelSuffix,
+    labelTrailing = _ref3.labelTrailing,
+    timeFormat = _ref3.timeFormat,
+    testID = _ref3.testID,
+    accessibilityLabel = _ref3.accessibilityLabel,
+    inputRef = _ref3.inputRef,
+    referenceProps = _ref3.referenceProps,
+    createCompleteTime = _ref3.createCompleteTime,
+    setIsDropdownOpen = _ref3.setIsDropdownOpen,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  var currentTimeFormat = timeFormat !== null && timeFormat !== void 0 ? timeFormat : '12h';
+  var _useLocale = useLocale(),
+    locale = _useLocale.locale;
+  var state = useTimeFieldState({
+    label: label,
+    locale: locale,
+    hourCycle: currentTimeFormat === '12h' ? 12 : 24,
+    value: internalTimeValue,
+    // Use TimeValue directly from hook
+    onChange: onTimeValueChange,
+    // Use TimeValue onChange directly
+    isDisabled: isDisabled,
+    shouldForceLeadingZeros: true // Force leading zeros (01, 02, 03...)
+  });
+  var timeFieldRef = useRef(null);
+  var _useTimeField = useTimeField({
+      label: label
+    }, state, timeFieldRef),
+    fieldProps = _useTimeField.fieldProps;
+
+  // Extract onKeyDown from referenceProps to handle Enter key for dropdown opening
+  var _ref4 = referenceProps || {},
+    referenceOnKeyDown = _ref4.onKeyDown,
+    otherReferenceProps = _objectWithoutProperties(_ref4, _excluded2);
+
+  // Handle Enter key to open dropdown while preserving React Aria's keyboard navigation
+  var handleKeyDown = function handleKeyDown(event) {
+    var _fieldProps$onKeyDown;
+    if (event.key === 'Enter' && !isDisabled) {
+      // Trigger dropdown opening (same as clicking the input)
+      referenceOnKeyDown === null || referenceOnKeyDown === void 0 || referenceOnKeyDown(event);
+      return;
+    }
+
+    // Let React Aria handle all other keys for segment navigation
+    (_fieldProps$onKeyDown = fieldProps.onKeyDown) === null || _fieldProps$onKeyDown === void 0 || _fieldProps$onKeyDown.call(fieldProps, event);
+  };
+  var handleInputClick = React__default.useCallback(function (_e) {
+    if (isDisabled) return;
+    setIsDropdownOpen === null || setIsDropdownOpen === void 0 || setIsDropdownOpen(true);
+  }, [isDisabled, setIsDropdownOpen]);
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, fieldProps), {}, {
+    className: "timepicker-input",
+    onClick: handleInputClick,
+    onKeyDown: handleKeyDown,
+    ref: mergeRefs(timeFieldRef, ref),
+    children: /*#__PURE__*/jsx(BaseInput, _objectSpread(_objectSpread(_objectSpread({
+      ref: inputRef,
+      as: "div",
+      id: "timepicker",
+      label: label,
+      helpText: helpText,
+      errorText: errorText,
+      successText: successText,
+      validationState: validationState,
+      isDisabled: isDisabled,
+      isRequired: isRequired,
+      necessityIndicator: necessityIndicator,
+      autoFocus: autoFocus // eslint-disable-line jsx-a11y/no-autofocus
+      ,
+      name: name,
+      size: size,
+      labelPosition: labelPosition,
+      labelSuffix: labelSuffix,
+      labelTrailing: labelTrailing,
+      leadingIcon: ClockIcon,
+      popupId: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps['aria-controls'],
+      isPopupExpanded: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps['aria-expanded'],
+      hasPopup: referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps['aria-haspopup'],
+      testID: testID,
+      accessibilityLabel: accessibilityLabel || label || 'Time picker'
+    }, props), otherReferenceProps), {}, {
+      children: /*#__PURE__*/jsx(BaseBox, {
+        display: "flex",
+        children: state.segments.map(function (segment, i) {
+          return (
+            /*#__PURE__*/
+            // Fix for React Aria contentEditable focus issue
+            // Wrapping each segment in a div prevents unwanted focus when clicking outside
+            // See: https://github.com/adobe/react-spectrum/issues/3164
+            jsx(BaseBox, {
+              children: /*#__PURE__*/jsx(TimeSegment, {
+                segment: segment,
+                state: state,
+                isDisabled: isDisabled
+              })
+            }, i)
+          );
+        })
+      })
+    }))
+  }));
+};
+var TimeInput = /*#__PURE__*/assignWithoutSideEffects(/*#__PURE__*/React__default.forwardRef(_TimeInput), {
+  displayName: 'TimeInput',
+  componentId: 'TimeInput'
+});
+
+export { TimeInput };
+//# sourceMappingURL=TimeInput.web.js.map

package/build/lib/web/development/components/TimePicker/TimeInput.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.web.js","sources":["../../../../../../src/components/TimePicker/TimeInput.web.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { useLocale } from '@react-aria/i18n';\nimport { useTimeField, useDateSegment } from '@react-aria/datepicker';\nimport { useTimeFieldState } from '@react-stately/datepicker';\nimport type { TimePickerInputProps, TimeSegmentProps } from './types';\nimport type { BladeElementRef } from '~utils/types';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { BaseInput } from '~components/Input/BaseInput/BaseInput';\nimport { useTheme } from '~components/BladeProvider';\nimport { ClockIcon } from '~components/Icons';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { mergeRefs } from '~utils/useMergeRefs';\nimport { spacing } from '~tokens/global';\nimport { makeSpace } from '~utils/makeSpace';\n\nconst StyledTimeSegment = styled.div`\n  padding-left: ${makeSpace(spacing[1])};\n  padding-right: ${makeSpace(spacing[1])};\n  box-sizing: content-box;\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n  outline: none;\n  border-radius: ${makeSpace(spacing[1])};\n\n  &:focus {\n    background-color: ${({ theme }) =>\n      theme.colors.interactive.background.primary.faded} !important;\n    color: #ffffff !important;\n\n    span {\n      color: #000000 !important;\n    }\n  }\n`;\n\n/**\n * TimeSegment Component\n *\n * Renders individual time segments (hour, minute, AM/PM) or literal text (separators like \":\", \" \").\n *\n * For EDITABLE segments (hour, minute, dayPeriod):\n * - Uses React Aria's useDateSegment for full keyboard/accessibility support\n * - Renders as contentEditable div that users can click and type in\n * - Handles arrow keys, number input, focus management automatically\n *\n * For LITERAL segments (separators):\n * - Just renders static text in a span\n * - No interaction or focus behavior\n */\nconst TimeSegment: React.ForwardRefRenderFunction<BladeElementRef, TimeSegmentProps> = ({\n  segment,\n  state,\n  isDisabled,\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [isFocused, setIsFocused] = useState(false);\n  const { theme } = useTheme();\n  const { segmentProps } = useDateSegment(segment, state, ref);\n\n  // Filter out bi-directional text control characters (⁦⁩) that React Aria adds for RTL support but aren't needed for our UI - they appear as extra literal segments in some environments\n\n  if ((segment.type === 'literal' && segment.text === '⁦') || segment.text === '⁩') {\n    return null;\n  }\n  // Calculate minWidth based on segment maxValue to prevent layout shifts\n  const minWidth = segment.maxValue != null ? `${String(segment.maxValue).length}ch` : 'auto';\n\n  return (\n    <StyledTimeSegment\n      ref={ref}\n      theme={theme}\n      style={{ ...segmentProps.style, minWidth }}\n      onFocus={(e: React.FocusEvent<HTMLDivElement>) => {\n        setIsFocused(true);\n        segmentProps.onFocus?.(e);\n      }}\n      onBlur={(e: React.FocusEvent<HTMLDivElement>) => {\n        setIsFocused(false);\n        segmentProps.onBlur?.(e);\n      }}\n      {...segmentProps}\n    >\n      {/* Always reserve space for the placeholder, to prevent layout shift when editing. */}\n      <BaseBox\n        as=\"span\"\n        display=\"block\"\n        width=\"100%\"\n        textAlign=\"center\"\n        visibility={segment.isPlaceholder ? undefined : 'hidden'}\n        height={segment.isPlaceholder ? 'auto' : 'spacing.0'}\n        pointerEvents=\"none\"\n        style={{\n          color: isFocused\n            ? theme.colors.surface.text.gray.normal\n            : theme.colors.surface.text.gray.disabled,\n        }}\n      >\n        {segment.placeholder} {/* Placeholder text like \"––\" or \":\" */}\n      </BaseBox>\n      {/* Show actual value when not placeholder, empty string when placeholder */}\n      <BaseBox\n        as=\"span\"\n        style={{\n          color: isDisabled\n            ? theme.colors.surface.text.gray.disabled\n            : theme.colors.surface.text.gray.normal,\n        }}\n      >\n        {segment.isPlaceholder\n          ? ''\n          : segment.type === 'dayPeriod'\n          ? segment.text.toUpperCase()\n          : segment.text}\n      </BaseBox>\n    </StyledTimeSegment>\n  );\n};\n\n/**\n * TimeInput Component\n *\n * A complete time input field built with React Aria for accessibility and keyboard interaction.\n *\n * ARCHITECTURE:\n * - Uses React Aria's useTimeFieldState for time value management & field-level behavior\n * - Uses Blade's BaseInput (as=\"div\") for styling and form integration\n * - Renders multiple TimeSegment components for individual time parts\n *\n * USER INTERACTION:\n * - Click on any segment (hour, minute, AM/PM) to focus and edit\n * - Type numbers directly to change values\n * - Use arrow keys to increment/decrement values\n * - Tab between segments for navigation\n * - Full keyboard accessibility support\n */\nconst _TimeInput: React.ForwardRefRenderFunction<BladeElementRef, TimePickerInputProps> = (\n  {\n    timeValue,\n    internalTimeValue,\n    onChange,\n    onTimeValueChange,\n    label,\n    helpText,\n    errorText,\n    successText,\n    validationState,\n    isDisabled,\n    isRequired,\n    necessityIndicator,\n    autoFocus,\n    name,\n    placeholder,\n    size = 'medium',\n    labelPosition,\n    labelSuffix,\n    labelTrailing,\n    timeFormat,\n    testID,\n    accessibilityLabel,\n    inputRef,\n    referenceProps,\n    createCompleteTime,\n    setIsDropdownOpen,\n    ...props\n  },\n  ref: React.ForwardedRef<BladeElementRef>,\n) => {\n  const currentTimeFormat = timeFormat ?? '12h';\n  const { locale } = useLocale();\n\n  const state = useTimeFieldState({\n    label,\n    locale,\n    hourCycle: currentTimeFormat === '12h' ? 12 : 24,\n    value: internalTimeValue, // Use TimeValue directly from hook\n    onChange: onTimeValueChange, // Use TimeValue onChange directly\n    isDisabled,\n    shouldForceLeadingZeros: true, // Force leading zeros (01, 02, 03...)\n  });\n\n  const timeFieldRef = useRef<HTMLDivElement>(null);\n  const { fieldProps } = useTimeField(\n    {\n      label,\n    },\n    state,\n    timeFieldRef,\n  );\n\n  // Extract onKeyDown from referenceProps to handle Enter key for dropdown opening\n  const { onKeyDown: referenceOnKeyDown, ...otherReferenceProps } = referenceProps || {};\n\n  // Handle Enter key to open dropdown while preserving React Aria's keyboard navigation\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (event.key === 'Enter' && !isDisabled) {\n      // Trigger dropdown opening (same as clicking the input)\n      referenceOnKeyDown?.(event);\n      return;\n    }\n\n    // Let React Aria handle all other keys for segment navigation\n    fieldProps.onKeyDown?.(event);\n  };\n\n  const handleInputClick = React.useCallback(\n    (_e: React.MouseEvent): void => {\n      if (isDisabled) return;\n\n      setIsDropdownOpen?.(true);\n    },\n    [isDisabled, setIsDropdownOpen],\n  );\n\n  return (\n    <BaseBox\n      {...fieldProps}\n      className=\"timepicker-input\"\n      onClick={handleInputClick}\n      onKeyDown={handleKeyDown}\n      ref={mergeRefs(timeFieldRef, ref as React.Ref<HTMLDivElement>)}\n    >\n      <BaseInput\n        ref={inputRef}\n        as=\"div\"\n        id=\"timepicker\"\n        label={label}\n        helpText={helpText}\n        errorText={errorText}\n        successText={successText}\n        validationState={validationState}\n        isDisabled={isDisabled}\n        isRequired={isRequired}\n        necessityIndicator={necessityIndicator}\n        autoFocus={autoFocus} // eslint-disable-line jsx-a11y/no-autofocus\n        name={name}\n        size={size}\n        labelPosition={labelPosition}\n        labelSuffix={labelSuffix}\n        labelTrailing={labelTrailing}\n        leadingIcon={ClockIcon}\n        popupId={referenceProps?.['aria-controls']}\n        isPopupExpanded={referenceProps?.['aria-expanded']}\n        hasPopup={referenceProps?.['aria-haspopup']}\n        testID={testID}\n        accessibilityLabel={accessibilityLabel || label || 'Time picker'}\n        {...props}\n        {...otherReferenceProps}\n      >\n        <BaseBox display=\"flex\">\n          {state.segments.map((segment, i) => {\n            return (\n              // Fix for React Aria contentEditable focus issue\n              // Wrapping each segment in a div prevents unwanted focus when clicking outside\n              // See: https://github.com/adobe/react-spectrum/issues/3164\n              <BaseBox key={i}>\n                <TimeSegment segment={segment} state={state} isDisabled={isDisabled} />\n              </BaseBox>\n            );\n          })}\n        </BaseBox>\n      </BaseInput>\n    </BaseBox>\n  );\n};\n\nconst TimeInput = assignWithoutSideEffects(React.forwardRef(_TimeInput), {\n  displayName: 'TimeInput',\n  componentId: 'TimeInput',\n});\nexport { TimeInput };\n"],"names":["StyledTimeSegment","styled","div","withConfig","displayName","componentId","makeSpace","spacing","_ref","theme","colors","interactive","background","primary","faded","TimeSegment","_ref2","segment","state","isDisabled","ref","useRef","_useState","useState","_useState2","_slicedToArray","isFocused","setIsFocused","_useTheme","useTheme","_useDateSegment","useDateSegment","segmentProps","type","text","minWidth","maxValue","concat","String","length","_jsxs","_objectSpread","style","onFocus","e","_segmentProps$onFocus","call","onBlur","_segmentProps$onBlur","children","BaseBox","as","display","width","textAlign","visibility","isPlaceholder","undefined","height","pointerEvents","color","surface","gray","normal","disabled","placeholder","_jsx","toUpperCase","_TimeInput","_ref3","timeValue","internalTimeValue","onChange","onTimeValueChange","label","helpText","errorText","successText","validationState","isRequired","necessityIndicator","autoFocus","name","_ref3$size","size","labelPosition","labelSuffix","labelTrailing","timeFormat","testID","accessibilityLabel","inputRef","referenceProps","createCompleteTime","setIsDropdownOpen","props","_objectWithoutProperties","_excluded","currentTimeFormat","_useLocale","useLocale","locale","useTimeFieldState","hourCycle","value","shouldForceLeadingZeros","timeFieldRef","_useTimeField","useTimeField","fieldProps","_ref4","referenceOnKeyDown","onKeyDown","otherReferenceProps","_excluded2","handleKeyDown","event","_fieldProps$onKeyDown","key","handleInputClick","React","useCallback","_e","className","onClick","mergeRefs","BaseInput","id","leadingIcon","ClockIcon","popupId","isPopupExpanded","hasPopup","segments","map","i","TimeInput","assignWithoutSideEffects","forwardRef"],"mappings":"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"}

package/build/lib/web/development/components/TimePicker/TimePicker.web.js

@@ -0,0 +1,13 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import 'react';
+import { BaseTimePicker } from './BaseTimePicker.web.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TimePicker = function TimePicker(props) {
+  return /*#__PURE__*/jsx(BaseTimePicker, _objectSpread({}, props));
+};
+
+export { TimePicker };
+//# sourceMappingURL=TimePicker.web.js.map

package/build/lib/web/development/components/TimePicker/TimePicker.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.web.js","sources":["../../../../../../src/components/TimePicker/TimePicker.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { TimePickerProps } from './types';\nimport { BaseTimePicker } from './BaseTimePicker.web';\n\nconst TimePicker = (props: TimePickerProps): React.ReactElement => {\n  return <BaseTimePicker {...props} />;\n};\n\nexport { TimePicker };\n"],"names":["TimePicker","props","_jsx","BaseTimePicker","_objectSpread"],"mappings":";;;;;;;AAIA,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAIC,KAAsB,EAAyB;EACjE,oBAAOC,GAAA,CAACC,cAAc,EAAAC,aAAA,CAAKH,EAAAA,EAAAA,KAAK,CAAG,CAAC,CAAA;AACtC;;;;"}

package/build/lib/web/development/components/TimePicker/TimePickerContent.web.js

@@ -0,0 +1,200 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import React__default from 'react';
+import styled from 'styled-components';
+import { SpinWheel } from './SpinWheel.web.js';
+import { TimePickerFooter } from './TimePickerFooter.web.js';
+import { getNearestStepValue, createDateFromSelection } from './utils.js';
+import '../Divider/index.js';
+import '../BladeProvider/index.js';
+import '../Box/BaseBox/index.js';
+import { useIsMobile } from '../../utils/useIsMobile.js';
+import '../../tokens/global/index.js';
+import '../../utils/makeSize/index.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import useTheme from '../BladeProvider/useTheme.js';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { size } from '../../tokens/global/size.js';
+import { Divider } from '../Divider/Divider.js';
+
+var StyledFadeContainer = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "TimePickerContentweb__StyledFadeContainer",
+  componentId: "sc-1c0gid8-0"
+})(["position:relative;&::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient( to bottom,", " 0px,transparent 48px,transparent calc(100% - 48px),", " 100% );pointer-events:none;z-index:10;}"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.colors.surface.background.gray.intense;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.surface.background.gray.intense;
+});
+
+/**
+ * Content component for TimePicker dropdown
+ * Contains the time selection wheels and footer
+ */
+var TimePickerContent = function TimePickerContent(_ref3) {
+  var setSelectedTime = _ref3.setSelectedTime,
+    selectedHour = _ref3.selectedHour,
+    selectedMinute = _ref3.selectedMinute,
+    selectedPeriod = _ref3.selectedPeriod,
+    timeFormat = _ref3.timeFormat,
+    minuteStep = _ref3.minuteStep,
+    showFooterActions = _ref3.showFooterActions,
+    onApply = _ref3.onApply,
+    onCancel = _ref3.onCancel;
+  var isMobile = useIsMobile();
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var currentHour = selectedHour;
+  var currentMinute = selectedMinute;
+  var currentPeriod = selectedPeriod;
+  var is12HourFormat = timeFormat === '12h';
+
+  // Roving tabindex + focus management across wheels
+  var _React$useState = React__default.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    activeWheelIndex = _React$useState2[0],
+    setActiveWheelIndex = _React$useState2[1];
+  var hourRef = React__default.useRef(null);
+  var minuteRef = React__default.useRef(null);
+  var periodRef = React__default.useRef(null);
+  var wheelRefs = is12HourFormat ? [hourRef, minuteRef, periodRef] : [hourRef, minuteRef];
+  var focusWheel = function focusWheel(index) {
+    setActiveWheelIndex(index);
+    // ensure tabindex update applies before focusing
+    requestAnimationFrame(function () {
+      var _wheelRefs$index;
+      (_wheelRefs$index = wheelRefs[index]) === null || _wheelRefs$index === void 0 || (_wheelRefs$index = _wheelRefs$index.current) === null || _wheelRefs$index === void 0 || _wheelRefs$index.focus();
+    });
+  };
+  var handleContainerKeyDown = function handleContainerKeyDown(e) {
+    // Up/Down should be handled by individual wheels; Left/Right move to next wheel
+    if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      var next = Math.min(activeWheelIndex + 1, wheelRefs.length - 1);
+      if (next !== activeWheelIndex) focusWheel(next);
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      var prev = Math.max(activeWheelIndex - 1, 0);
+      if (prev !== activeWheelIndex) focusWheel(prev);
+    }
+  };
+  var handleContainerFocus = function handleContainerFocus(e) {
+    var target = e.target;
+    var idx = wheelRefs.findIndex(function (ref) {
+      return ref.current === target;
+    });
+    if (idx !== -1 && idx !== activeWheelIndex) {
+      setActiveWheelIndex(idx);
+    }
+  };
+
+  // Generate values for each wheel with leading zeros
+  var hourValues = is12HourFormat ? Array.from({
+    length: 12
+  }, function (_, i) {
+    return String(i + 1).padStart(2, '0');
+  }) : Array.from({
+    length: 24
+  }, function (_, i) {
+    return String(i).padStart(2, '0');
+  });
+  var minuteValues = Array.from({
+    length: 60 / minuteStep
+  }, function (_, i) {
+    return String(i * minuteStep).padStart(2, '0');
+  });
+  var periodValues = ['AM', 'PM'];
+
+  // Calculate display value for minute wheel positioning when minuteStep > 1
+  // This allows typed values like "03" to position at nearest step "00" while preserving actual value
+  var displayMinute = minuteStep > 1 ? getNearestStepValue(currentMinute, minuteStep) : undefined;
+
+  // Handle value changes - directly update selectedTime
+  var handleHourChange = function handleHourChange(value) {
+    var hour = Number(value);
+    var newDate = createDateFromSelection(currentHour, currentMinute, currentPeriod, timeFormat, hour);
+    setSelectedTime(newDate);
+  };
+  var handleMinuteChange = function handleMinuteChange(value) {
+    var minute = Number(value);
+    var newDate = createDateFromSelection(currentHour, currentMinute, currentPeriod, timeFormat, undefined, minute);
+    setSelectedTime(newDate);
+  };
+  var handlePeriodChange = function handlePeriodChange(value) {
+    var period = value;
+    var newDate = createDateFromSelection(currentHour, currentMinute, currentPeriod, timeFormat, undefined, undefined, period);
+    setSelectedTime(newDate);
+  };
+  var handleApply = function handleApply() {
+    var newDate = createDateFromSelection(currentHour, currentMinute, currentPeriod, timeFormat);
+    setSelectedTime(newDate);
+    onApply();
+  };
+  return /*#__PURE__*/jsxs(BaseBox, {
+    display: "flex",
+    className: "timepicker-content",
+    flexDirection: "column",
+    height: showFooterActions ? makeSize(size[250]) : makeSize(size[196]),
+    width: isMobile ? '100%' : makeSize(size[198]),
+    "data-allow-scroll": "true",
+    children: [/*#__PURE__*/jsxs(StyledFadeContainer, {
+      theme: theme,
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "flex-start",
+      margin: ['spacing.4', 'spacing.0'],
+      onKeyDown: handleContainerKeyDown,
+      onFocus: handleContainerFocus,
+      children: [/*#__PURE__*/jsx(BaseBox, {
+        position: "absolute",
+        top: "50%",
+        left: "spacing.0",
+        right: "spacing.0",
+        height: "36px",
+        transform: "translateY(-50%)",
+        backgroundColor: "interactive.background.gray.faded",
+        pointerEvents: "none",
+        zIndex: 1
+      }), /*#__PURE__*/jsx(SpinWheel, {
+        className: "timepicker-hour-wheel",
+        label: "Hour",
+        values: hourValues,
+        selectedValue: String(currentHour).padStart(2, '0'),
+        onChange: handleHourChange,
+        scrollContainerRef: hourRef,
+        tabIndex: activeWheelIndex === 0 ? 0 : -1
+      }), /*#__PURE__*/jsx(Divider, {
+        orientation: "vertical"
+      }), /*#__PURE__*/jsx(SpinWheel, {
+        className: "timepicker-minute-wheel",
+        label: "Min",
+        values: minuteValues,
+        selectedValue: String(currentMinute).padStart(2, '0'),
+        displayValue: displayMinute ? String(displayMinute).padStart(2, '0') : undefined,
+        onChange: handleMinuteChange,
+        scrollContainerRef: minuteRef,
+        tabIndex: activeWheelIndex === 1 ? 0 : -1
+      }), is12HourFormat && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Divider, {
+          orientation: "vertical"
+        }), /*#__PURE__*/jsx(SpinWheel, {
+          className: "timepicker-period-wheel",
+          label: "Period",
+          values: periodValues,
+          selectedValue: currentPeriod,
+          onChange: handlePeriodChange,
+          scrollContainerRef: periodRef,
+          tabIndex: activeWheelIndex === 2 ? 0 : -1
+        })]
+      })]
+    }), showFooterActions && /*#__PURE__*/jsx(TimePickerFooter, {
+      onApply: handleApply,
+      onCancel: onCancel
+    })]
+  });
+};
+
+export { TimePickerContent };
+//# sourceMappingURL=TimePickerContent.web.js.map

package/build/lib/web/development/components/TimePicker/TimePickerContent.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerContent.web.js","sources":["../../../../../../src/components/TimePicker/TimePickerContent.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { SpinWheel } from './SpinWheel';\nimport { TimePickerFooter } from './TimePickerFooter';\nimport type { TimePickerContentProps } from './types';\nimport { getNearestStepValue, createDateFromSelection } from './utils';\nimport { Divider } from '~components/Divider';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils/makeSize';\n\n// Styled container with fade overlay\nconst StyledFadeContainer = styled(BaseBox)`\n  position: relative;\n\n  /* Fade overlay that sits above content */\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(\n      to bottom,\n      ${({ theme }) => theme.colors.surface.background.gray.intense} 0px,\n      transparent 48px,\n      transparent calc(100% - 48px),\n      ${({ theme }) => theme.colors.surface.background.gray.intense} 100%\n    );\n    pointer-events: none;\n    z-index: 10;\n  }\n`;\n\n/**\n * Content component for TimePicker dropdown\n * Contains the time selection wheels and footer\n */\nconst TimePickerContent = ({\n  setSelectedTime,\n  selectedHour,\n  selectedMinute,\n  selectedPeriod,\n  timeFormat,\n  minuteStep,\n  showFooterActions,\n  onApply,\n  onCancel,\n}: TimePickerContentProps): React.ReactElement => {\n  const isMobile = useIsMobile();\n  const { theme } = useTheme();\n\n  const currentHour = selectedHour;\n  const currentMinute = selectedMinute;\n  const currentPeriod = selectedPeriod;\n  const is12HourFormat = timeFormat === '12h';\n\n  // Roving tabindex + focus management across wheels\n  const [activeWheelIndex, setActiveWheelIndex] = React.useState(0);\n  const hourRef = React.useRef<HTMLDivElement>(null);\n  const minuteRef = React.useRef<HTMLDivElement>(null);\n  const periodRef = React.useRef<HTMLDivElement>(null);\n\n  const wheelRefs = is12HourFormat ? [hourRef, minuteRef, periodRef] : [hourRef, minuteRef];\n\n  const focusWheel = (index: number): void => {\n    setActiveWheelIndex(index);\n    // ensure tabindex update applies before focusing\n    requestAnimationFrame(() => {\n      wheelRefs[index]?.current?.focus();\n    });\n  };\n\n  const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {\n    // Up/Down should be handled by individual wheels; Left/Right move to next wheel\n    if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      const next = Math.min(activeWheelIndex + 1, wheelRefs.length - 1);\n      if (next !== activeWheelIndex) focusWheel(next);\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault();\n      const prev = Math.max(activeWheelIndex - 1, 0);\n      if (prev !== activeWheelIndex) focusWheel(prev);\n    }\n  };\n\n  const handleContainerFocus = (e: React.FocusEvent<HTMLDivElement>): void => {\n    const target = e.target as HTMLElement;\n    const idx = wheelRefs.findIndex((ref) => ref.current === target);\n    if (idx !== -1 && idx !== activeWheelIndex) {\n      setActiveWheelIndex(idx);\n    }\n  };\n\n  // Generate values for each wheel with leading zeros\n  const hourValues = is12HourFormat\n    ? Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, '0'))\n    : Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));\n\n  const minuteValues = Array.from({ length: 60 / minuteStep }, (_, i) =>\n    String(i * minuteStep).padStart(2, '0'),\n  );\n  const periodValues: ('AM' | 'PM')[] = ['AM', 'PM'];\n\n  // Calculate display value for minute wheel positioning when minuteStep > 1\n  // This allows typed values like \"03\" to position at nearest step \"00\" while preserving actual value\n  const displayMinute = minuteStep > 1 ? getNearestStepValue(currentMinute, minuteStep) : undefined;\n\n  // Handle value changes - directly update selectedTime\n  const handleHourChange = (value: string | number): void => {\n    const hour = Number(value);\n    const newDate = createDateFromSelection(\n      currentHour,\n      currentMinute,\n      currentPeriod,\n      timeFormat,\n      hour,\n    );\n    setSelectedTime(newDate);\n  };\n\n  const handleMinuteChange = (value: string | number): void => {\n    const minute = Number(value);\n    const newDate = createDateFromSelection(\n      currentHour,\n      currentMinute,\n      currentPeriod,\n      timeFormat,\n      undefined,\n      minute,\n    );\n    setSelectedTime(newDate);\n  };\n\n  const handlePeriodChange = (value: string | number): void => {\n    const period = value as 'AM' | 'PM';\n    const newDate = createDateFromSelection(\n      currentHour,\n      currentMinute,\n      currentPeriod,\n      timeFormat,\n      undefined,\n      undefined,\n      period,\n    );\n    setSelectedTime(newDate);\n  };\n\n  const handleApply = (): void => {\n    const newDate = createDateFromSelection(currentHour, currentMinute, currentPeriod, timeFormat);\n    setSelectedTime(newDate);\n    onApply();\n  };\n\n  return (\n    <BaseBox\n      display=\"flex\"\n      className=\"timepicker-content\"\n      flexDirection=\"column\"\n      height={showFooterActions ? makeSize(size[250]) : makeSize(size[196])}\n      width={isMobile ? '100%' : makeSize(size[198])}\n      data-allow-scroll=\"true\"\n    >\n      {/* Time Selection Wheels */}\n      <StyledFadeContainer\n        theme={theme}\n        display=\"flex\"\n        flexDirection=\"row\"\n        justifyContent=\"center\"\n        alignItems=\"flex-start\"\n        margin={['spacing.4', 'spacing.0']}\n        onKeyDown={handleContainerKeyDown}\n        onFocus={handleContainerFocus}\n      >\n        {/* Center highlight area */}\n        <BaseBox\n          position=\"absolute\"\n          top=\"50%\"\n          left=\"spacing.0\"\n          right=\"spacing.0\"\n          height=\"36px\"\n          transform=\"translateY(-50%)\"\n          backgroundColor=\"interactive.background.gray.faded\"\n          pointerEvents=\"none\"\n          zIndex={1}\n        />\n\n        {/* Hour Wheel */}\n        <SpinWheel\n          className=\"timepicker-hour-wheel\"\n          label=\"Hour\"\n          values={hourValues}\n          selectedValue={String(currentHour).padStart(2, '0')}\n          onChange={handleHourChange}\n          scrollContainerRef={hourRef}\n          tabIndex={activeWheelIndex === 0 ? 0 : -1}\n        />\n        <Divider orientation=\"vertical\" />\n        {/* Minute Wheel */}\n        <SpinWheel\n          className=\"timepicker-minute-wheel\"\n          label=\"Min\"\n          values={minuteValues}\n          selectedValue={String(currentMinute).padStart(2, '0')}\n          displayValue={displayMinute ? String(displayMinute).padStart(2, '0') : undefined}\n          onChange={handleMinuteChange}\n          scrollContainerRef={minuteRef}\n          tabIndex={activeWheelIndex === 1 ? 0 : -1}\n        />\n        {/* Period Wheel (only for 12-hour format) */}\n\n        {is12HourFormat && (\n          <>\n            <Divider orientation=\"vertical\" />\n            <SpinWheel\n              className=\"timepicker-period-wheel\"\n              label=\"Period\"\n              values={periodValues}\n              selectedValue={currentPeriod}\n              onChange={handlePeriodChange}\n              scrollContainerRef={periodRef}\n              tabIndex={activeWheelIndex === 2 ? 0 : -1}\n            />\n          </>\n        )}\n      </StyledFadeContainer>\n\n      {/* Footer with Apply/Cancel buttons */}\n      {showFooterActions && <TimePickerFooter onApply={handleApply} onCancel={onCancel} />}\n    </BaseBox>\n  );\n};\n\nexport { TimePickerContent };\n"],"names":["StyledFadeContainer","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","colors","surface","background","gray","intense","_ref2","TimePickerContent","_ref3","setSelectedTime","selectedHour","selectedMinute","selectedPeriod","timeFormat","minuteStep","showFooterActions","onApply","onCancel","isMobile","useIsMobile","_useTheme","useTheme","currentHour","currentMinute","currentPeriod","is12HourFormat","_React$useState","React","useState","_React$useState2","_slicedToArray","activeWheelIndex","setActiveWheelIndex","hourRef","useRef","minuteRef","periodRef","wheelRefs","focusWheel","index","requestAnimationFrame","_wheelRefs$index","current","focus","handleContainerKeyDown","e","key","preventDefault","next","Math","min","length","prev","max","handleContainerFocus","target","idx","findIndex","ref","hourValues","Array","from","_","i","String","padStart","minuteValues","periodValues","displayMinute","getNearestStepValue","undefined","handleHourChange","value","hour","Number","newDate","createDateFromSelection","handleMinuteChange","minute","handlePeriodChange","period","handleApply","_jsxs","display","className","flexDirection","height","makeSize","size","width","children","justifyContent","alignItems","margin","onKeyDown","onFocus","_jsx","position","top","left","right","transform","backgroundColor","pointerEvents","zIndex","SpinWheel","label","values","selectedValue","onChange","scrollContainerRef","tabIndex","Divider","orientation","displayValue","_Fragment","TimePickerFooter"],"mappings":"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"}

package/build/lib/web/development/components/TimePicker/TimePickerFooter.web.js

@@ -0,0 +1,49 @@
+import 'react';
+import '../Box/index.js';
+import '../Button/index.js';
+import '../Divider/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box } from '../Box/Box.js';
+import { Divider } from '../Divider/Divider.js';
+import Button from '../Button/Button/Button.js';
+
+var TimePickerFooter = function TimePickerFooter(_ref) {
+  var onApply = _ref.onApply,
+    onCancel = _ref.onCancel,
+    _ref$isApplyDisabled = _ref.isApplyDisabled,
+    isApplyDisabled = _ref$isApplyDisabled === void 0 ? false : _ref$isApplyDisabled;
+  return /*#__PURE__*/jsxs(Box, {
+    display: "flex",
+    flexDirection: "column",
+    children: [/*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsxs(Box, {
+      width: "100%",
+      display: "flex",
+      flexDirection: "row",
+      gap: {
+        base: 'spacing.5',
+        m: 'spacing.3'
+      },
+      padding: {
+        base: 'spacing.5',
+        m: 'spacing.4'
+      },
+      children: [/*#__PURE__*/jsx(Button, {
+        isFullWidth: true,
+        variant: "tertiary",
+        size: "xsmall",
+        onClick: onCancel,
+        children: "Cancel"
+      }), /*#__PURE__*/jsx(Button, {
+        isDisabled: isApplyDisabled,
+        isFullWidth: true,
+        variant: "primary",
+        size: "xsmall",
+        onClick: onApply,
+        children: "Apply"
+      })]
+    })]
+  });
+};
+
+export { TimePickerFooter };
+//# sourceMappingURL=TimePickerFooter.web.js.map

package/build/lib/web/development/components/TimePicker/TimePickerFooter.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerFooter.web.js","sources":["../../../../../../src/components/TimePicker/TimePickerFooter.web.tsx"],"sourcesContent":["import React from 'react';\nimport type { TimePickerFooterProps } from './types';\nimport { Box } from '~components/Box';\nimport { Button } from '~components/Button';\nimport { Divider } from '~components/Divider';\n\n/**\n * Footer component for TimePicker with Apply/Cancel buttons\n */\nconst TimePickerFooter = ({\n  onApply,\n  onCancel,\n  isApplyDisabled = false,\n}: TimePickerFooterProps): React.ReactElement => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\">\n      <Divider />\n      <Box\n        width=\"100%\"\n        display=\"flex\"\n        flexDirection=\"row\"\n        gap={{ base: 'spacing.5', m: 'spacing.3' }}\n        padding={{ base: 'spacing.5', m: 'spacing.4' }}\n      >\n        <Button isFullWidth={true} variant=\"tertiary\" size=\"xsmall\" onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button\n          isDisabled={isApplyDisabled}\n          isFullWidth={true}\n          variant=\"primary\"\n          size=\"xsmall\"\n          onClick={onApply}\n        >\n          Apply\n        </Button>\n      </Box>\n    </Box>\n  );\n};\n\nexport { TimePickerFooter };\n"],"names":["TimePickerFooter","_ref","onApply","onCancel","_ref$isApplyDisabled","isApplyDisabled","_jsxs","Box","display","flexDirection","children","_jsx","Divider","width","gap","base","m","padding","Button","isFullWidth","variant","size","onClick","isDisabled"],"mappings":";;;;;;;;;AASA,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,EAI2B;AAAA,EAAA,IAH/CC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IACPC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,oBAAA,GAAAH,IAAA,CACRI,eAAe;AAAfA,IAAAA,eAAe,GAAAD,oBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,oBAAA,CAAA;EAEvB,oBACEE,IAAA,CAACC,GAAG,EAAA;AAACC,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,aAAa,EAAC,QAAQ;IAAAC,QAAA,EAAA,cACxCC,GAAA,CAACC,OAAO,IAAE,CAAC,eACXN,IAAA,CAACC,GAAG,EAAA;AACFM,MAAAA,KAAK,EAAC,MAAM;AACZL,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,aAAa,EAAC,KAAK;AACnBK,MAAAA,GAAG,EAAE;AAAEC,QAAAA,IAAI,EAAE,WAAW;AAAEC,QAAAA,CAAC,EAAE,WAAA;OAAc;AAC3CC,MAAAA,OAAO,EAAE;AAAEF,QAAAA,IAAI,EAAE,WAAW;AAAEC,QAAAA,CAAC,EAAE,WAAA;OAAc;MAAAN,QAAA,EAAA,cAE/CC,GAAA,CAACO,MAAM,EAAA;AAACC,QAAAA,WAAW,EAAE,IAAK;AAACC,QAAAA,OAAO,EAAC,UAAU;AAACC,QAAAA,IAAI,EAAC,QAAQ;AAACC,QAAAA,OAAO,EAAEnB,QAAS;AAAAO,QAAAA,QAAA,EAAC,QAAA;AAE/E,OAAQ,CAAC,eACTC,GAAA,CAACO,MAAM,EAAA;AACLK,QAAAA,UAAU,EAAElB,eAAgB;AAC5Bc,QAAAA,WAAW,EAAE,IAAK;AAClBC,QAAAA,OAAO,EAAC,SAAS;AACjBC,QAAAA,IAAI,EAAC,QAAQ;AACbC,QAAAA,OAAO,EAAEpB,OAAQ;AAAAQ,QAAAA,QAAA,EAClB,OAAA;AAED,OAAQ,CAAC,CAAA;AAAA,KACN,CAAC,CAAA;AAAA,GACH,CAAC,CAAA;AAEV;;;;"}

package/build/lib/web/development/components/TimePicker/index.js

@@ -0,0 +1,2 @@
+export { TimePicker } from './TimePicker.web.js';
+//# sourceMappingURL=index.js.map

package/build/lib/web/development/components/TimePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}