carbon-react 125.7.0 → 125.9.0

package/lib/components/time/time.component.d.ts

@@ -0,0 +1,73 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationProps } from "../../__internal__/validations";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+import { Sizes } from "../../__internal__/input/input-presentation.component";
+import { ToggleDataProps } from "./__internal__/time-toggle";
+export declare type ToggleValue = "AM" | "PM";
+export declare type TimeValue = {
+    hours: string;
+    minutes: string;
+    period?: ToggleValue;
+};
+export interface TimeInputEvent {
+    target: {
+        name?: string;
+        id: string;
+        value: TimeValue;
+    };
+}
+interface TimeInputProps extends Omit<TagProps, "data-component">, Omit<ValidationProps, "info"> {
+    /** Set an id value on the input */
+    id?: string;
+    /** Override the default label text */
+    label?: string;
+    /** Override the default aria-label text */
+    "aria-label"?: string;
+}
+export interface TimeProps extends Omit<TagProps, "data-component">, MarginProps {
+    /** Label text for the component */
+    label?: string;
+    /** Sets the size of the inputs */
+    size?: Sizes;
+    /** Additional hint text rendered above the input elements */
+    inputHint?: string;
+    /**
+     * Set custom `data-` and `id` attributes on the input element.
+     * Set the `label` and `aria-label` values for the associated Label element.
+     * Set the `error` and `warning` states for the input
+     *  */
+    hoursInputProps?: TimeInputProps;
+    /**
+     * Set custom `data-` and `id` attributes on the input element.
+     * Set the `label` and `aria-label` values for the associated Label element.
+     * Set the `error` and `warning` states for the input
+     *  */
+    minutesInputProps?: TimeInputProps;
+    /** The value of the input elements */
+    value: TimeValue;
+    /** Callback to handle change events in input elements */
+    onChange: (ev: TimeInputEvent) => void;
+    /** Set a name value on the component */
+    name?: string;
+    /** Callback called when focus is lost on input elements */
+    onBlur?: (ev?: React.FocusEvent<HTMLInputElement>) => void;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
+    /** Flag to configure component as optional */
+    isOptional?: boolean;
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** If true, the component will be read-only */
+    readOnly?: boolean;
+    /** Set custom data- attributes on the toggle elements */
+    toggleProps?: ToggleDataProps;
+}
+export declare type TimeHandle = {
+    /** Programmatically focus the hours input. */
+    focusHoursInput: () => void;
+    /** Programmatically focus the minutes input. */
+    focusMinutesInput: () => void;
+} | null;
+declare const Time: React.ForwardRefExoticComponent<TimeProps & React.RefAttributes<TimeHandle>>;
+export default Time;

package/lib/components/time/time.component.js

@@ -0,0 +1,437 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
+var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility"));
+var _fieldset = _interopRequireDefault(require("../../__internal__/fieldset"));
+var _box = _interopRequireDefault(require("../box"));
+var _textbox = require("../textbox/textbox.style");
+var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message"));
+var _number = _interopRequireDefault(require("../number"));
+var _typography = _interopRequireDefault(require("../typography"));
+var _time = require("./time.style");
+var _timeToggle = require("./__internal__/time-toggle");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const Time = /*#__PURE__*/_react.default.forwardRef(({
+  label,
+  size = "medium",
+  inputHint,
+  hoursInputProps = {},
+  minutesInputProps = {},
+  value,
+  name,
+  onChange,
+  onBlur,
+  required,
+  isOptional,
+  disabled,
+  readOnly,
+  toggleProps = {},
+  ...rest
+}, ref) => {
+  const {
+    id: hoursInputId,
+    label: hoursLabel,
+    "aria-label": hoursAriaLabel,
+    error: hoursError,
+    warning: hoursWarning
+  } = hoursInputProps;
+  const {
+    id: minutesInputId,
+    label: minutesLabel,
+    "aria-label": minutesAriaLabel,
+    error: minutesError,
+    warning: minutesWarning
+  } = minutesInputProps;
+  const internalHrsId = (0, _react.useRef)(hoursInputId || (0, _guid.default)());
+  const internalMinsId = (0, _react.useRef)(minutesInputId || (0, _guid.default)());
+  const inputHintId = (0, _react.useRef)((0, _guid.default)());
+  const internalId = (0, _react.useRef)(`${internalHrsId.current} ${internalMinsId.current}`);
+  const {
+    hours: hourValue,
+    minutes: minuteValue,
+    period: toggleValue
+  } = value;
+  const [inputValues, setInputValues] = (0, _react.useState)([hourValue, minuteValue]);
+  const locale = (0, _useLocale.default)();
+  const showToggle = toggleValue !== undefined;
+  const [period, setPeriod] = (0, _react.useState)(toggleValue);
+  const hrsLabel = hoursLabel || locale.time.hoursLabelText();
+  const minsLabel = minutesLabel || locale.time.minutesLabelText();
+  const hrsAriaLabel = hoursAriaLabel || locale.time.hoursAriaLabelText();
+  const minsAriaLabel = minutesAriaLabel || locale.time.minutesAriaLabelText();
+  const hoursRef = (0, _react.useRef)(null);
+  const minsRef = (0, _react.useRef)(null);
+  const computedValidations = (hrs, mins) => {
+    const hoursIsString = typeof hrs === "string";
+    const minutesIsString = typeof mins === "string";
+    if (!hoursIsString && !minutesIsString) {
+      return hrs || mins;
+    }
+    if (hoursIsString && !minutesIsString) {
+      return hrs;
+    }
+    if (minutesIsString && !hoursIsString) {
+      return mins;
+    }
+    return `${hrs} ${mins}`;
+  };
+  const error = computedValidations(hoursError, minutesError);
+  const warning = computedValidations(hoursWarning, minutesWarning);
+  const hasValidationFailure = !!(error || warning);
+  const {
+    validationId,
+    ariaDescribedBy
+  } = (0, _useInputAccessibility.default)({
+    id: internalId.current,
+    validationRedesignOptIn: true,
+    error,
+    warning
+  });
+  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId.current].filter(Boolean).join(" ");
+  (0, _react.useImperativeHandle)(ref, () => ({
+    focusHoursInput() {
+      hoursRef.current?.focus();
+    },
+    focusMinutesInput() {
+      minsRef.current?.focus();
+    }
+  }), []);
+  const handleChange = (ev, inputName) => {
+    const hours = inputName === "hrs" ? ev.target.value : inputValues[0];
+    const minutes = inputName === "mins" ? ev.target.value : inputValues[1];
+    setInputValues([hours, minutes]);
+    onChange({
+      target: {
+        name,
+        id: internalId.current,
+        value: {
+          hours,
+          minutes,
+          period
+        }
+      }
+    });
+  };
+  const handlePeriodChange = periodName => {
+    const [hours, minutes] = inputValues;
+    setPeriod(periodName);
+    onChange({
+      target: {
+        name,
+        id: internalId.current,
+        value: {
+          hours,
+          minutes,
+          period: periodName
+        }
+      }
+    });
+  };
+  const handleBlur = (0, _react.useCallback)(ev => {
+    setTimeout(() => {
+      if (hoursRef.current !== document.activeElement && minsRef.current !== document.activeElement) {
+        onBlur?.(ev);
+      }
+    });
+  }, [onBlur]);
+  return /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
+    legend: label,
+    legendMargin: {
+      mb: 0
+    },
+    width: "min-content",
+    isRequired: required,
+    isOptional: isOptional,
+    isDisabled: disabled,
+    name: name,
+    id: internalId.current
+  }, rest, (0, _tags.default)("time", rest), {
+    "aria-describedby": combinedAriaDescribedBy
+  }), inputHint && /*#__PURE__*/_react.default.createElement(_time.StyledHintText, {
+    id: inputHintId.current,
+    isDisabled: disabled
+  }, inputHint), /*#__PURE__*/_react.default.createElement(_box.default, {
+    position: "relative"
+  }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
+    validationId: validationId,
+    error: error,
+    warning: warning
+  }), hasValidationFailure && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+    warning: !!(!error && warning)
+  }), /*#__PURE__*/_react.default.createElement(_box.default, {
+    display: "flex"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_time.StyledLabel, {
+    "aria-label": hrsAriaLabel,
+    htmlFor: internalHrsId.current,
+    disabled: disabled
+  }, hrsLabel), /*#__PURE__*/_react.default.createElement(_number.default, _extends({}, hoursInputProps, {
+    label: undefined,
+    "data-component": "hours",
+    ref: hoursRef,
+    value: hourValue,
+    onChange: ev => handleChange(ev, "hrs"),
+    onBlur: handleBlur,
+    id: internalHrsId.current,
+    size: size,
+    error: !!hoursError,
+    warning: !!hoursWarning,
+    disabled: disabled,
+    readOnly: readOnly
+  }))), /*#__PURE__*/_react.default.createElement(_box.default, {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    mx: 1,
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "\xA0"), /*#__PURE__*/_react.default.createElement(_typography.default, {
+    isDisabled: disabled,
+    variant: "span",
+    mb: "-4px"
+  }, ":")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_time.StyledLabel, {
+    "aria-label": minsAriaLabel,
+    htmlFor: internalMinsId.current,
+    disabled: disabled
+  }, minsLabel), /*#__PURE__*/_react.default.createElement(_number.default, _extends({}, minutesInputProps, {
+    label: undefined,
+    "data-component": "minutes",
+    ref: minsRef,
+    value: minuteValue,
+    onChange: ev => handleChange(ev, "mins"),
+    onBlur: handleBlur,
+    id: internalMinsId.current,
+    size: size,
+    error: !!minutesError,
+    warning: !!minutesWarning,
+    disabled: disabled,
+    readOnly: readOnly
+  }))), showToggle && /*#__PURE__*/_react.default.createElement(_box.default, {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "flex-end"
+  }, /*#__PURE__*/_react.default.createElement(_timeToggle.TimeToggle, {
+    toggleProps: toggleProps,
+    size: size,
+    onChange: handlePeriodChange,
+    toggleValue: toggleValue,
+    disabled: disabled || readOnly
+  })))));
+});
+Time.propTypes = {
+  "children": _propTypes.default.node,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "disabled": _propTypes.default.bool,
+  "hoursInputProps": _propTypes.default.shape({
+    "aria-label": _propTypes.default.string,
+    "data-element": _propTypes.default.string,
+    "data-role": _propTypes.default.string,
+    "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+    "id": _propTypes.default.string,
+    "label": _propTypes.default.string,
+    "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
+  }),
+  "inputHint": _propTypes.default.string,
+  "isOptional": _propTypes.default.bool,
+  "label": _propTypes.default.string,
+  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "minutesInputProps": _propTypes.default.shape({
+    "aria-label": _propTypes.default.string,
+    "data-element": _propTypes.default.string,
+    "data-role": _propTypes.default.string,
+    "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+    "id": _propTypes.default.string,
+    "label": _propTypes.default.string,
+    "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
+  }),
+  "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "name": _propTypes.default.string,
+  "onBlur": _propTypes.default.func,
+  "onChange": _propTypes.default.func.isRequired,
+  "readOnly": _propTypes.default.bool,
+  "required": _propTypes.default.bool,
+  "size": _propTypes.default.oneOf(["large", "medium", "small"]),
+  "toggleProps": _propTypes.default.shape({
+    "amToggleProps": _propTypes.default.shape({
+      "data-element": _propTypes.default.string,
+      "data-role": _propTypes.default.string
+    }),
+    "pmToggleProps": _propTypes.default.shape({
+      "data-element": _propTypes.default.string,
+      "data-role": _propTypes.default.string
+    }),
+    "wrapperProps": _propTypes.default.shape({
+      "data-element": _propTypes.default.string,
+      "data-role": _propTypes.default.string
+    })
+  }),
+  "value": _propTypes.default.shape({
+    "hours": _propTypes.default.string.isRequired,
+    "minutes": _propTypes.default.string.isRequired,
+    "period": _propTypes.default.oneOf(["AM", "PM"])
+  }).isRequired
+};
+Time.displayName = "Time";
+var _default = exports.default = Time;

package/lib/components/time/time.style.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const StyledLabel: import("styled-components").StyledComponent<import("react").MemoExoticComponent<({ align, as, children, disabled, error, help, helpIcon, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, className, "aria-label": ariaLabel, }: import("../../__internal__/label").LabelProps) => import("react").JSX.Element>, any, {}, never>;
+export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {
+    isDisabled?: boolean | undefined;
+    hasError?: boolean | undefined;
+}, never>;

package/lib/components/time/time.style.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledLabel = exports.StyledHintText = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _label = _interopRequireDefault(require("../../__internal__/label"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledLabel = exports.StyledLabel = (0, _styledComponents.default)(_label.default)`
+  label {
+    font-weight: var(--fontWeights500);
+  }
+`;
+const StyledHintText = exports.StyledHintText = _styledComponents.default.div`
+  ::after {
+    content: " ";
+  }
+
+  margin-top: 0px;
+  margin-bottom: var(--spacing150);
+  color: ${({
+  isDisabled
+}) => isDisabled ? "var(--colorsUtilityYin030)" : "var(--colorsUtilityYin055)"};
+  font-size: 14px;
+`;

package/lib/components/typography/typography.component.d.ts

@@ -49,9 +49,15 @@ export interface TypographyProps extends SpaceProps, TagProps {
     /** Set whether it will be visually hidden
      * NOTE: This is for screen readers only and will make a lot of the other props redundant */
     screenReaderOnly?: boolean;
+    /**
+     * @private
+     * @ignore
+     * Override the default color of the rendered element to match disabled styling
+     * */
+    isDisabled?: boolean;
 }
 export declare const Typography: {
-    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, ...rest }: TypographyProps): React.JSX.Element;
+    ({ "data-component": dataComponent, variant, as, id, fontSize, fontWeight, textTransform, lineHeight, textDecoration, display, listStyleType, whiteSpace, wordWrap, textAlign, textOverflow, truncate, color, backgroundColor, bg, opacity, children, className, screenReaderOnly, isDisabled, ...rest }: TypographyProps): React.JSX.Element;
     displayName: string;
 };
 export default Typography;

package/lib/components/typography/typography.component.js

@@ -36,6 +36,7 @@ const Typography = ({
   children,
   className,
   screenReaderOnly,
+  isDisabled,
   ...rest
 }) => {
   return /*#__PURE__*/_react.default.createElement(_typography.default, _extends({
@@ -59,7 +60,8 @@ const Typography = ({
     bg: bg,
     opacity: opacity,
     className: className,
-    screenReaderOnly: screenReaderOnly
+    screenReaderOnly: screenReaderOnly,
+    isDisabled: isDisabled
   }, (0, _tags.default)(dataComponent, rest), (0, _utils.filterStyledSystemMarginProps)(rest), (0, _utils.filterStyledSystemPaddingProps)(rest)), children);
 };
 exports.Typography = Typography;

package/lib/components/typography/typography.style.js

@@ -199,6 +199,11 @@ const StyledTypography = _styledComponents.default.span.attrs(({
   backgroundColor,
   ...rest
 })}
+  ${({
+  isDisabled
+}) => isDisabled && (0, _styledComponents.css)`
+      color: var(--colorsUtilityYin030);
+    `}
 `;
 StyledTypography.defaultProps = {
   theme: _base.default

package/lib/locales/__internal__/pl-pl.js

@@ -205,6 +205,14 @@ const plPL = {
   tileSelect: {
     deselect: () => "Odznacz"
   },
+  time: {
+    amText: () => "AM",
+    pmText: () => "PM",
+    hoursLabelText: () => "Hrs.",
+    minutesLabelText: () => "Min.",
+    hoursAriaLabelText: () => "Godziny",
+    minutesAriaLabelText: () => "Minuty"
+  },
   toast: {
     ariaLabels: {
       close: () => "Zamknij"

package/lib/locales/en-gb.js

@@ -169,6 +169,14 @@ const enGB = {
   tileSelect: {
     deselect: () => "Deselect"
   },
+  time: {
+    amText: () => "AM",
+    pmText: () => "PM",
+    hoursLabelText: () => "Hrs.",
+    minutesLabelText: () => "Mins.",
+    hoursAriaLabelText: () => "Hours",
+    minutesAriaLabelText: () => "Minutes"
+  },
   toast: {
     ariaLabels: {
       close: () => "Close"

package/lib/locales/locale.d.ts

@@ -138,6 +138,14 @@ interface Locale {
     tileSelect: {
         deselect: () => string;
     };
+    time: {
+        amText: () => string;
+        pmText: () => string;
+        hoursLabelText: () => string;
+        minutesLabelText: () => string;
+        hoursAriaLabelText: () => string;
+        minutesAriaLabelText: () => string;
+    };
     toast: {
         ariaLabels: {
             close: () => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "125.7.0",
+  "version": "125.9.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",