@hitachivantara/uikit-react-lab 2.6.18

package/dist/modern/Slider/styles.js

@@ -0,0 +1,99 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const styles = theme => ({
+  root: {
+    "& .rc-slider-handle": {
+      cursor: "pointer",
+      marginTop: "-8px",
+      "&:active": {
+        cursor: "grab"
+      }
+    },
+    zIndex: 0
+  },
+  dot: {
+    position: "absolute",
+    bottom: "-1px",
+    marginLeft: "0px",
+    width: "1px",
+    height: "4px",
+    border: "none",
+    borderRadius: "0%",
+    backgroundColor: theme.hv.palette.atmosphere.atmo7,
+    cursor: "pointer",
+    verticalAlign: "middle",
+    zIndex: "-3"
+  },
+  rail: {
+    backgroundColor: theme.hv.palette.atmosphere.atmo7,
+    height: "1px",
+    zIndex: "-3"
+  },
+  knobInner: {
+    borderColor: "transparent",
+    boxShadow: "none",
+    backgroundColor: theme.hv.palette.accent.acce1,
+    width: "16px",
+    height: "16px"
+  },
+  knobOuter: {
+    position: "relative",
+    borderColor: "transparent",
+    borderRadius: "50%",
+    boxShadow: "none",
+    backgroundColor: theme.hv.palette.atmosphere.atmo7,
+    width: "32px",
+    height: "32px",
+    top: "-80%",
+    left: "-80%",
+    zIndex: "-1"
+  },
+  knobHidden: {
+    display: "none"
+  },
+  knobHiddenLast: {
+    borderColor: "transparent",
+    height: "3px",
+    width: "2px",
+    marginLeft: "-1px",
+    border: "none",
+    borderRadius: "0",
+    marginTop: "0px",
+    left: "100%",
+    touchAction: "none",
+    cursor: "default"
+  },
+  track: {
+    backgroundColor: theme.hv.palette.accent.acce1,
+    height: "3px",
+    zIndex: "-1",
+    marginTop: "-1px"
+  },
+  mark: _objectSpread(_objectSpread({}, theme.hv.typography.vizText), {}, {
+    fontFamily: theme.hv.typography.fontFamily,
+    top: "-2px"
+  }),
+  sliderTooltip: {
+    "& .rc-slider-tooltip-inner": _objectSpread(_objectSpread({
+      background: theme.hv.palette.atmosphere.atmo1,
+      border: `solid 1px ${theme.hv.palette.atmosphere.atmo7} `,
+      borderRadius: 0,
+      maxWidth: "532px",
+      height: "100%",
+      padding: `${theme.hv.spacing.sm}px`
+    }, theme.hv.typography.infoText), {}, {
+      fontFamily: theme.hv.typography.fontFamily,
+      boxShadow: "none"
+    }),
+    "& .rc-slider-tooltip-arrow": {
+      visibility: "hidden"
+    }
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/Slider/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","theme","root","cursor","marginTop","zIndex","dot","position","bottom","marginLeft","width","height","border","borderRadius","backgroundColor","hv","palette","atmosphere","atmo7","verticalAlign","rail","knobInner","borderColor","boxShadow","accent","acce1","knobOuter","top","left","knobHidden","display","knobHiddenLast","touchAction","track","mark","typography","vizText","fontFamily","sliderTooltip","background","atmo1","maxWidth","padding","spacing","sm","infoText","visibility"],"sources":["../../../src/Slider/styles.js"],"sourcesContent":["const styles = (theme) => ({\n  root: {\n    \"& .rc-slider-handle\": {\n      cursor: \"pointer\",\n      marginTop: \"-8px\",\n      \"&:active\": {\n        cursor: \"grab\",\n      },\n    },\n    zIndex: 0,\n  },\n  dot: {\n    position: \"absolute\",\n    bottom: \"-1px\",\n    marginLeft: \"0px\",\n    width: \"1px\",\n    height: \"4px\",\n    border: \"none\",\n    borderRadius: \"0%\",\n    backgroundColor: theme.hv.palette.atmosphere.atmo7,\n    cursor: \"pointer\",\n    verticalAlign: \"middle\",\n    zIndex: \"-3\",\n  },\n  rail: {\n    backgroundColor: theme.hv.palette.atmosphere.atmo7,\n    height: \"1px\",\n    zIndex: \"-3\",\n  },\n  knobInner: {\n    borderColor: \"transparent\",\n    boxShadow: \"none\",\n    backgroundColor: theme.hv.palette.accent.acce1,\n    width: \"16px\",\n    height: \"16px\",\n  },\n  knobOuter: {\n    position: \"relative\",\n    borderColor: \"transparent\",\n    borderRadius: \"50%\",\n    boxShadow: \"none\",\n    backgroundColor: theme.hv.palette.atmosphere.atmo7,\n    width: \"32px\",\n    height: \"32px\",\n    top: \"-80%\",\n    left: \"-80%\",\n    zIndex: \"-1\",\n  },\n  knobHidden: {\n    display: \"none\",\n  },\n  knobHiddenLast: {\n    borderColor: \"transparent\",\n    height: \"3px\",\n    width: \"2px\",\n    marginLeft: \"-1px\",\n    border: \"none\",\n    borderRadius: \"0\",\n    marginTop: \"0px\",\n    left: \"100%\",\n    touchAction: \"none\",\n    cursor: \"default\",\n  },\n  track: {\n    backgroundColor: theme.hv.palette.accent.acce1,\n    height: \"3px\",\n    zIndex: \"-1\",\n    marginTop: \"-1px\",\n  },\n  mark: {\n    ...theme.hv.typography.vizText,\n    fontFamily: theme.hv.typography.fontFamily,\n    top: \"-2px\",\n  },\n  sliderTooltip: {\n    \"& .rc-slider-tooltip-inner\": {\n      background: theme.hv.palette.atmosphere.atmo1,\n      border: `solid 1px ${theme.hv.palette.atmosphere.atmo7} `,\n      borderRadius: 0,\n      maxWidth: \"532px\",\n      height: \"100%\",\n      padding: `${theme.hv.spacing.sm}px`,\n      ...theme.hv.typography.infoText,\n      fontFamily: theme.hv.typography.fontFamily,\n      boxShadow: \"none\",\n    },\n    \"& .rc-slider-tooltip-arrow\": {\n      visibility: \"hidden\",\n    },\n  },\n});\n\nexport default styles;\n"],"mappings":"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"}

package/dist/modern/TimePicker/PeriodPicker/PeriodPicker.js

@@ -0,0 +1,88 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from "react";
+import PropTypes from "prop-types";
+import { HvTypography } from "@hitachivantara/uikit-react-core";
+import { DropUpXS as UpIcon, DropDownXS as DownIcon } from "@hitachivantara/uikit-react-icons";
+import { getPeriodForDate } from "../timePickerUtils";
+import { PeriodPickerOptions } from "../enums";
+
+class PeriodPicker extends React.Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "handleChangePeriod", () => {
+      const {
+        onChangePeriod
+      } = this.props;
+      const period = this.selectDifferentPeriod();
+      this.setState({
+        currentPeriod: period
+      });
+      onChangePeriod(period);
+    });
+
+    _defineProperty(this, "selectDifferentPeriod", () => {
+      const {
+        currentPeriod
+      } = this.state;
+      return currentPeriod === PeriodPickerOptions.AM ? PeriodPickerOptions.PM : PeriodPickerOptions.AM;
+    });
+
+    this.state = {
+      currentPeriod: props.period
+    };
+  }
+  /**
+   * Handles the period change
+   * @memberof PeriodPicker
+   */
+
+
+  /**
+   * Renders the PeriodPicker
+   * @memberof UnitTimePicker
+   */
+  render() {
+    const {
+      classes
+    } = this.props;
+    const {
+      currentPeriod
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.periodContainer
+    }, /*#__PURE__*/React.createElement(UpIcon, {
+      className: classes.icon,
+      onClick: this.handleChangePeriod
+    }), /*#__PURE__*/React.createElement(HvTypography, {
+      variant: "highlightText",
+      className: classes.periodText
+    }, currentPeriod), /*#__PURE__*/React.createElement(DownIcon, {
+      className: classes.icon,
+      onClick: this.handleChangePeriod
+    }));
+  }
+
+}
+
+process.env.NODE_ENV !== "production" ? PeriodPicker.propTypes = {
+  /**
+   * A Jss Object used to override or extend the styles applied to the input/popper
+   */
+  classes: PropTypes.instanceOf(Object).isRequired,
+
+  /**
+   * Callback function called when the period value changes
+   */
+  onChangePeriod: PropTypes.func.isRequired,
+
+  /**
+   * Default period value
+   */
+  period: PropTypes.oneOf([PeriodPickerOptions.AM, PeriodPickerOptions.PM])
+} : void 0;
+PeriodPicker.defaultProps = {
+  period: getPeriodForDate()
+};
+export default PeriodPicker;
+//# sourceMappingURL=PeriodPicker.js.map

package/dist/modern/TimePicker/PeriodPicker/PeriodPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeriodPicker.js","names":["React","PropTypes","HvTypography","DropUpXS","UpIcon","DropDownXS","DownIcon","getPeriodForDate","PeriodPickerOptions","PeriodPicker","Component","constructor","props","onChangePeriod","period","selectDifferentPeriod","setState","currentPeriod","state","AM","PM","render","classes","periodContainer","icon","handleChangePeriod","periodText","propTypes","instanceOf","Object","isRequired","func","oneOf","defaultProps"],"sources":["../../../../src/TimePicker/PeriodPicker/PeriodPicker.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { DropUpXS as UpIcon, DropDownXS as DownIcon } from \"@hitachivantara/uikit-react-icons\";\nimport { getPeriodForDate } from \"../timePickerUtils\";\nimport { PeriodPickerOptions } from \"../enums\";\n\nclass PeriodPicker extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      currentPeriod: props.period,\n    };\n  }\n\n  /**\n   * Handles the period change\n   * @memberof PeriodPicker\n   */\n  handleChangePeriod = () => {\n    const { onChangePeriod } = this.props;\n    const period = this.selectDifferentPeriod();\n    this.setState({\n      currentPeriod: period,\n    });\n    onChangePeriod(period);\n  };\n\n  /**\n   * Gets the new value for the period\n   * @returns the new value for the period\n   * @memberof UnitTimePicker\n   */\n  selectDifferentPeriod = () => {\n    const { currentPeriod } = this.state;\n    return currentPeriod === PeriodPickerOptions.AM\n      ? PeriodPickerOptions.PM\n      : PeriodPickerOptions.AM;\n  };\n\n  /**\n   * Renders the PeriodPicker\n   * @memberof UnitTimePicker\n   */\n  render() {\n    const { classes } = this.props;\n    const { currentPeriod } = this.state;\n\n    return (\n      <div className={classes.periodContainer}>\n        <UpIcon className={classes.icon} onClick={this.handleChangePeriod} />\n        <HvTypography variant=\"highlightText\" className={classes.periodText}>\n          {currentPeriod}\n        </HvTypography>\n        <DownIcon className={classes.icon} onClick={this.handleChangePeriod} />\n      </div>\n    );\n  }\n}\n\nPeriodPicker.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied to the input/popper\n   */\n  classes: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Callback function called when the period value changes\n   */\n  onChangePeriod: PropTypes.func.isRequired,\n  /**\n   * Default period value\n   */\n  period: PropTypes.oneOf([PeriodPickerOptions.AM, PeriodPickerOptions.PM]),\n};\n\nPeriodPicker.defaultProps = {\n  period: getPeriodForDate(),\n};\n\nexport default PeriodPicker;\n"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,YAAT,QAA6B,kCAA7B;AACA,SAASC,QAAQ,IAAIC,MAArB,EAA6BC,UAAU,IAAIC,QAA3C,QAA2D,mCAA3D;AACA,SAASC,gBAAT,QAAiC,oBAAjC;AACA,SAASC,mBAAT,QAAoC,UAApC;;AAEA,MAAMC,YAAN,SAA2BT,KAAK,CAACU,SAAjC,CAA2C;EACzCC,WAAW,CAACC,KAAD,EAAQ;IACjB,MAAMA,KAAN;;IADiB,4CAYE,MAAM;MACzB,MAAM;QAAEC;MAAF,IAAqB,KAAKD,KAAhC;MACA,MAAME,MAAM,GAAG,KAAKC,qBAAL,EAAf;MACA,KAAKC,QAAL,CAAc;QACZC,aAAa,EAAEH;MADH,CAAd;MAGAD,cAAc,CAACC,MAAD,CAAd;IACD,CAnBkB;;IAAA,+CA0BK,MAAM;MAC5B,MAAM;QAAEG;MAAF,IAAoB,KAAKC,KAA/B;MACA,OAAOD,aAAa,KAAKT,mBAAmB,CAACW,EAAtC,GACHX,mBAAmB,CAACY,EADjB,GAEHZ,mBAAmB,CAACW,EAFxB;IAGD,CA/BkB;;IAGjB,KAAKD,KAAL,GAAa;MACXD,aAAa,EAAEL,KAAK,CAACE;IADV,CAAb;EAGD;EAED;AACF;AACA;AACA;;;EAsBE;AACF;AACA;AACA;EACEO,MAAM,GAAG;IACP,MAAM;MAAEC;IAAF,IAAc,KAAKV,KAAzB;IACA,MAAM;MAAEK;IAAF,IAAoB,KAAKC,KAA/B;IAEA,oBACE;MAAK,SAAS,EAAEI,OAAO,CAACC;IAAxB,gBACE,oBAAC,MAAD;MAAQ,SAAS,EAAED,OAAO,CAACE,IAA3B;MAAiC,OAAO,EAAE,KAAKC;IAA/C,EADF,eAEE,oBAAC,YAAD;MAAc,OAAO,EAAC,eAAtB;MAAsC,SAAS,EAAEH,OAAO,CAACI;IAAzD,GACGT,aADH,CAFF,eAKE,oBAAC,QAAD;MAAU,SAAS,EAAEK,OAAO,CAACE,IAA7B;MAAmC,OAAO,EAAE,KAAKC;IAAjD,EALF,CADF;EASD;;AAnDwC;;AAsD3C,wCAAAhB,YAAY,CAACkB,SAAb,GAAyB;EACvB;AACF;AACA;EACEL,OAAO,EAAErB,SAAS,CAAC2B,UAAV,CAAqBC,MAArB,EAA6BC,UAJf;;EAKvB;AACF;AACA;EACEjB,cAAc,EAAEZ,SAAS,CAAC8B,IAAV,CAAeD,UARR;;EASvB;AACF;AACA;EACEhB,MAAM,EAAEb,SAAS,CAAC+B,KAAV,CAAgB,CAACxB,mBAAmB,CAACW,EAArB,EAAyBX,mBAAmB,CAACY,EAA7C,CAAhB;AAZe,CAAzB;AAeAX,YAAY,CAACwB,YAAb,GAA4B;EAC1BnB,MAAM,EAAEP,gBAAgB;AADE,CAA5B;AAIA,eAAeE,YAAf"}

package/dist/modern/TimePicker/PeriodPicker/index.js

@@ -0,0 +1,7 @@
+import withStyles from "@material-ui/core/styles/withStyles";
+import styles from "./styles";
+import PeriodPicker from "./PeriodPicker";
+export default withStyles(styles, {
+  name: "HvTimePickerPeriodPicker"
+})(PeriodPicker);
+//# sourceMappingURL=index.js.map

package/dist/modern/TimePicker/PeriodPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["withStyles","styles","PeriodPicker","name"],"sources":["../../../../src/TimePicker/PeriodPicker/index.js"],"sourcesContent":["import withStyles from \"@material-ui/core/styles/withStyles\";\nimport styles from \"./styles\";\nimport PeriodPicker from \"./PeriodPicker\";\n\nexport default withStyles(styles, { name: \"HvTimePickerPeriodPicker\" })(PeriodPicker);\n"],"mappings":"AAAA,OAAOA,UAAP,MAAuB,qCAAvB;AACA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,eAAeF,UAAU,CAACC,MAAD,EAAS;EAAEE,IAAI,EAAE;AAAR,CAAT,CAAV,CAAyDD,YAAzD,CAAf"}

package/dist/modern/TimePicker/PeriodPicker/styles.js

@@ -0,0 +1,37 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const icon = {
+  width: "32px",
+  height: "32px",
+  cursor: "pointer"
+};
+
+const styles = theme => ({
+  periodContainer: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    "&:first-child": {
+      marginTop: `${theme.hv.spacing.sm}px`
+    },
+    "&:last-child": {
+      marginBottom: `${theme.hv.spacing.sm}px`
+    }
+  },
+  periodText: _objectSpread(_objectSpread({}, theme.hv.typography.highlightText), {}, {
+    textAlign: "center",
+    height: "40px",
+    width: "40px",
+    paddingTop: `${theme.hv.spacing.xs}px`,
+    paddingBottom: `${theme.hv.spacing.xs}px`
+  }),
+  icon: _objectSpread({}, icon)
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/TimePicker/PeriodPicker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["icon","width","height","cursor","styles","theme","periodContainer","display","flexDirection","justifyContent","alignItems","marginTop","hv","spacing","sm","marginBottom","periodText","typography","highlightText","textAlign","paddingTop","xs","paddingBottom"],"sources":["../../../../src/TimePicker/PeriodPicker/styles.js"],"sourcesContent":["const icon = {\n  width: \"32px\",\n  height: \"32px\",\n  cursor: \"pointer\",\n};\n\nconst styles = (theme) => ({\n  periodContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    \"&:first-child\": { marginTop: `${theme.hv.spacing.sm}px` },\n    \"&:last-child\": { marginBottom: `${theme.hv.spacing.sm}px` },\n  },\n  periodText: {\n    ...theme.hv.typography.highlightText,\n    textAlign: \"center\",\n    height: \"40px\",\n    width: \"40px\",\n    paddingTop: `${theme.hv.spacing.xs}px`,\n    paddingBottom: `${theme.hv.spacing.xs}px`,\n  },\n  icon: {\n    ...icon,\n  },\n});\n\nexport default styles;\n"],"mappings":";;;;;;AAAA,MAAMA,IAAI,GAAG;EACXC,KAAK,EAAE,MADI;EAEXC,MAAM,EAAE,MAFG;EAGXC,MAAM,EAAE;AAHG,CAAb;;AAMA,MAAMC,MAAM,GAAIC,KAAD,KAAY;EACzBC,eAAe,EAAE;IACfC,OAAO,EAAE,MADM;IAEfC,aAAa,EAAE,QAFA;IAGfC,cAAc,EAAE,QAHD;IAIfC,UAAU,EAAE,QAJG;IAKf,iBAAiB;MAAEC,SAAS,EAAG,GAAEN,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiBC,EAAG;IAApC,CALF;IAMf,gBAAgB;MAAEC,YAAY,EAAG,GAAEV,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiBC,EAAG;IAAvC;EAND,CADQ;EASzBE,UAAU,kCACLX,KAAK,CAACO,EAAN,CAASK,UAAT,CAAoBC,aADf;IAERC,SAAS,EAAE,QAFH;IAGRjB,MAAM,EAAE,MAHA;IAIRD,KAAK,EAAE,MAJC;IAKRmB,UAAU,EAAG,GAAEf,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiBQ,EAAG,IAL3B;IAMRC,aAAa,EAAG,GAAEjB,KAAK,CAACO,EAAN,CAASC,OAAT,CAAiBQ,EAAG;EAN9B,EATe;EAiBzBrB,IAAI,oBACCA,IADD;AAjBqB,CAAZ,CAAf;;AAsBA,eAAeI,MAAf"}

package/dist/modern/TimePicker/TimePicker.d.ts

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+export interface TimePickerLabel {
+  /**
+   * Time picker label (appears above the input)
+   */
+  title: string;
+  /**
+   * Time picker placeholder (appears in the input)
+   */
+  placeholder: string;
+}
+
+export type HvTimePickerClassKey =
+  | "input"
+  | "inputPopperOpenedBelow"
+  | "inputPopperOpenedAbove"
+  | "inputPopperClosed"
+  | "inputContainer"
+  | "icon"
+  | "timePickerContainer"
+  | "label"
+  | "timePopperContainer"
+  | "popper"
+  | "popperBelow"
+  | "popperAbove"
+  | "separator"
+  | "periodContainer";
+
+export interface HvTimePickerProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvTimePickerClassKey> {
+  /**
+   * An Object containing the various text associated with the time picker.
+   */
+  labels?: TimePickerLabel;
+  /**
+   * If the time should be presented in 12 or 24 hour format.
+   * If undefined, the component will use a format according to the passed locale.
+   * If defined, it will "override" the default value given by the locale
+   */
+  timeFormat?: "12" | "24" | undefined;
+  /**
+   * Locale that will provide the time format(12 or 24 hour format)
+   * It is "overwritten" by the timeFormat prop
+   */
+  locale: string;
+  /**
+   * Default value for the hours picker
+   */
+  hours?: number;
+  /**
+   * Default value for the minutes picker
+   */
+  minutes?: number;
+  /**
+   * Default value for the seconds picker
+   */
+  seconds?: number;
+  /**
+   * Default value for the period picker
+   */
+  period?: string;
+  /**
+   * Callback function to be triggered when the input value is changed.
+   * It is invoked with a object param with the following props:
+   *  - hours (in a 24h format)
+   *  - minutes
+   *  - seconds
+   *  - period
+   *
+   * It is always invoked with the hours in a 24h format
+   */
+  onChange?: (timeIn24Format: object) => void;
+}
+
+export default function HvTimePicker(props: HvTimePickerProps): JSX.Element | null;