@kaizen/components 1.73.11 → 1.73.13

package/dist/cjs/TimeField/TimeField.cjs

@@ -84,7 +84,8 @@ var TimeFieldComponent = function (_a) {
     return React__default.default.createElement(TimeSegment.TimeSegment, {
       key: i,
       segment: segment,
-      state: state
+      state: state,
+      hasPadding: ![8294, 8297].includes(segment.text.charCodeAt(0))
     });
   }), React__default.default.createElement("div", {
     className: TimeField_module.focusRing

package/dist/cjs/TimeField/subcomponents/TimeSegment/TimeSegment.cjs

@@ -15,7 +15,9 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var TimeSegment = function (_a) {
   var segment = _a.segment,
-    state = _a.state;
+    state = _a.state,
+    _b = _a.hasPadding,
+    hasPadding = _b === void 0 ? true : _b;
   var ref = React__default.default.useRef(null);
   var segmentProps = datepicker.useDateSegment(segment, state, ref).segmentProps;
   // Chrome has a bug where `contenteditable` elements receive focus from external clicks.
@@ -26,7 +28,7 @@ var TimeSegment = function (_a) {
     className: TimeSegment_module.timeSegmentWrapper
   }, "\u200B", React__default.default.createElement("span", tslib.__assign({}, segmentProps, {
     ref: ref,
-    className: classnames__default.default(TimeSegment_module.timeSegment, segment.type === 'literal' && TimeSegment_module.literal, segment.isPlaceholder && TimeSegment_module.placeholder, segment.type === 'dayPeriod' && TimeSegment_module.dayPeriod)
+    className: classnames__default.default(TimeSegment_module.timeSegment, segment.type === 'literal' && TimeSegment_module.literal, segment.isPlaceholder && TimeSegment_module.placeholder, segment.type === 'dayPeriod' && TimeSegment_module.dayPeriod, hasPadding && TimeSegment_module.hasPadding)
   }), generateSegmentDisplayText.generateSegmentDisplayText(segment)), "\u200B");
 };
 TimeSegment.displayName = 'TimeSegment';

package/dist/cjs/TimeField/subcomponents/TimeSegment/TimeSegment.module.scss.cjs

@@ -3,6 +3,7 @@
 var styles = {
   "timeSegmentWrapper": "TimeSegment-module_timeSegmentWrapper__WYD6y",
   "timeSegment": "TimeSegment-module_timeSegment__eXb0c",
+  "hasPadding": "TimeSegment-module_hasPadding__9oYW3",
   "placeholder": "TimeSegment-module_placeholder__j1-gK",
   "literal": "TimeSegment-module_literal__mOkqz",
   "dayPeriod": "TimeSegment-module_dayPeriod__fzT5I"

package/dist/cjs/__next__/Button/Button.module.css.cjs

@@ -2,6 +2,7 @@
 
 var buttonStyles = {
   "button": "Button-module_button__Rz7PM",
+  "isDisabled": "Button-module_isDisabled__Q2KAS",
   "fullWidth": "Button-module_fullWidth__aMtlw",
   "small": "Button-module_small__nX-i2",
   "medium": "Button-module_medium__6gRIb",
@@ -10,7 +11,6 @@ var buttonStyles = {
   "mediumIconButton": "Button-module_mediumIconButton__PC35j",
   "largeIconButton": "Button-module_largeIconButton__VtPZf",
   "secondary": "Button-module_secondary__D42kZ",
-  "isDisabled": "Button-module_isDisabled__Q2KAS",
   "tertiary": "Button-module_tertiary__qL7wD",
   "primaryReversed": "Button-module_primaryReversed__Sa4YW",
   "secondaryReversed": "Button-module_secondaryReversed__u3qHz",

package/dist/esm/TimeField/TimeField.mjs

@@ -79,7 +79,8 @@ const TimeFieldComponent = /*#__PURE__*/function () {
       return /*#__PURE__*/React.createElement(TimeSegment, {
         key: i,
         segment: segment,
-        state: state
+        state: state,
+        hasPadding: ![8294, 8297].includes(segment.text.charCodeAt(0))
       });
     }), /*#__PURE__*/React.createElement("div", {
       className: styles.focusRing

package/dist/esm/TimeField/subcomponents/TimeSegment/TimeSegment.mjs

@@ -7,7 +7,9 @@ import styles from './TimeSegment.module.scss.mjs';
 const TimeSegment = /*#__PURE__*/function () {
   const TimeSegment = function (_a) {
     var segment = _a.segment,
-      state = _a.state;
+      state = _a.state,
+      _b = _a.hasPadding,
+      hasPadding = _b === void 0 ? true : _b;
     var ref = React.useRef(null);
     var segmentProps = useDateSegment(segment, state, ref).segmentProps;
     // Chrome has a bug where `contenteditable` elements receive focus from external clicks.
@@ -18,7 +20,7 @@ const TimeSegment = /*#__PURE__*/function () {
       className: styles.timeSegmentWrapper
     }, "\u200B", /*#__PURE__*/React.createElement("span", __assign({}, segmentProps, {
       ref: ref,
-      className: classnames(styles.timeSegment, segment.type === 'literal' && styles.literal, segment.isPlaceholder && styles.placeholder, segment.type === 'dayPeriod' && styles.dayPeriod)
+      className: classnames(styles.timeSegment, segment.type === 'literal' && styles.literal, segment.isPlaceholder && styles.placeholder, segment.type === 'dayPeriod' && styles.dayPeriod, hasPadding && styles.hasPadding)
     }), generateSegmentDisplayText(segment)), "\u200B");
   };
   TimeSegment.displayName = 'TimeSegment';

package/dist/esm/TimeField/subcomponents/TimeSegment/TimeSegment.module.scss.mjs

@@ -1,6 +1,7 @@
 var styles = {
   "timeSegmentWrapper": "TimeSegment-module_timeSegmentWrapper__WYD6y",
   "timeSegment": "TimeSegment-module_timeSegment__eXb0c",
+  "hasPadding": "TimeSegment-module_hasPadding__9oYW3",
   "placeholder": "TimeSegment-module_placeholder__j1-gK",
   "literal": "TimeSegment-module_literal__mOkqz",
   "dayPeriod": "TimeSegment-module_dayPeriod__fzT5I"

package/dist/esm/__next__/Button/Button.module.css.mjs

@@ -1,5 +1,6 @@
 var buttonStyles = {
   "button": "Button-module_button__Rz7PM",
+  "isDisabled": "Button-module_isDisabled__Q2KAS",
   "fullWidth": "Button-module_fullWidth__aMtlw",
   "small": "Button-module_small__nX-i2",
   "medium": "Button-module_medium__6gRIb",
@@ -8,7 +9,6 @@ var buttonStyles = {
   "mediumIconButton": "Button-module_mediumIconButton__PC35j",
   "largeIconButton": "Button-module_largeIconButton__VtPZf",
   "secondary": "Button-module_secondary__D42kZ",
-  "isDisabled": "Button-module_isDisabled__Q2KAS",
   "tertiary": "Button-module_tertiary__qL7wD",
   "primaryReversed": "Button-module_primaryReversed__Sa4YW",
   "secondaryReversed": "Button-module_secondaryReversed__u3qHz",

package/dist/styles.css

@@ -5117,6 +5117,12 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
     --button-border-color: var(--color-blue-700);
   }
 
+  &.Button-module_isDisabled__Q2KAS {
+    --button-bg-color: var(--color-gray-400);
+    --button-border-color: var(--color-gray-400);
+    --button-text-color: var(--color-white);
+  }
+
   &[data-focus-visible]::after {
     content: '';
     position: absolute;
@@ -10402,7 +10408,6 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 
 .TimeSegment-module_timeSegment__eXb0c {
   display: block;
-  padding: 0 4px;
   text-align: end;
   background-color: var(--color-gray-300, #eaeaec);
   border-radius: 3px;
@@ -10417,6 +10422,10 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
   outline: none;
 }
 
+.TimeSegment-module_hasPadding__9oYW3 {
+  padding: 0 4px;
+}
+
 .TimeSegment-module_placeholder__j1-gK {
   color: rgba(var(--color-purple-800-rgb, 47, 36, 56), 0.7);
 }

package/dist/types/TimeField/subcomponents/TimeSegment/TimeSegment.d.ts

@@ -2,8 +2,9 @@ import { type DateFieldState, type DateSegment } from '@react-stately/datepicker
 export type TimeSegmentProps = {
     segment: DateSegment;
     state: DateFieldState;
+    hasPadding?: boolean;
 };
 export declare const TimeSegment: {
-    ({ segment, state }: TimeSegmentProps): JSX.Element;
+    ({ segment, state, hasPadding, }: TimeSegmentProps): JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.73.11",
+  "version": "1.73.13",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/TimeField/TimeField.tsx

@@ -108,9 +108,17 @@ const TimeFieldComponent = ({
             state.validationState === 'invalid' && styles.error,
           )}
         >
-          {state.segments.map((segment, i) => (
-            <TimeSegment key={i} segment={segment} state={state} />
-          ))}
+          {state.segments.map((segment, i) => {
+            return (
+              <TimeSegment
+                key={i}
+                segment={segment}
+                state={state}
+                hasPadding={![8294, 8297].includes(segment.text.charCodeAt(0))}
+                // ^react-aria includes these characters to ensure correct RTL behaviour, but we want to avoid these adding random spacing
+              />
+            )
+          })}
           <div className={styles.focusRing} />
         </div>
       </div>

package/src/TimeField/subcomponents/TimeSegment/TimeSegment.module.scss

@@ -10,7 +10,6 @@
 
 .timeSegment {
   display: block;
-  padding: 0 4px;
   text-align: end;
   background-color: $color-gray-300;
   border-radius: 3px;
@@ -27,6 +26,10 @@
   }
 }
 
+.hasPadding {
+  padding: 0 4px;
+}
+
 .placeholder {
   color: rgba($color-purple-800-rgb, 0.7);
 }

package/src/TimeField/subcomponents/TimeSegment/TimeSegment.tsx

@@ -8,9 +8,14 @@ import styles from './TimeSegment.module.scss'
 export type TimeSegmentProps = {
   segment: DateSegment
   state: DateFieldState
+  hasPadding?: boolean
 }
 
-export const TimeSegment = ({ segment, state }: TimeSegmentProps): JSX.Element => {
+export const TimeSegment = ({
+  segment,
+  state,
+  hasPadding = true,
+}: TimeSegmentProps): JSX.Element => {
   const ref = React.useRef<HTMLDivElement>(null)
   const { segmentProps } = useDateSegment(segment, state, ref)
 
@@ -29,6 +34,7 @@ export const TimeSegment = ({ segment, state }: TimeSegmentProps): JSX.Element =
           segment.type === 'literal' && styles.literal,
           segment.isPlaceholder && styles.placeholder,
           segment.type === 'dayPeriod' && styles.dayPeriod,
+          hasPadding && styles.hasPadding,
         )}
       >
         {generateSegmentDisplayText(segment)}

package/src/__next__/Button/Button.module.css

@@ -47,6 +47,12 @@
     --button-border-color: var(--color-blue-700);
   }
 
+  &.isDisabled {
+    --button-bg-color: var(--color-gray-400);
+    --button-border-color: var(--color-gray-400);
+    --button-text-color: var(--color-white);
+  }
+
   &[data-focus-visible]::after {
     content: '';
     position: absolute;