@vitality-ds/components 5.5.0 → 5.6.0

package/dist/Button/constants.js

@@ -9,36 +9,43 @@ var APPEARANCES = exports.APPEARANCES = {
   standard: {
     color: "neutral",
     variant: "subtle",
-    spinnerColor: null
+    spinnerColor: null,
+    shortcutsVariant: "onUiElementBackground"
   },
   onSurface: {
     color: "neutral",
     variant: "onSurface",
-    spinnerColor: null
+    spinnerColor: null,
+    shortcutsVariant: "onSurfaceBackground"
   },
   primary: {
     color: "primary",
     variant: "solid",
-    spinnerColor: "primary"
+    spinnerColor: "primary",
+    shortcutsVariant: "onSolidBackground"
   },
   destructive: {
     color: "critical",
     variant: "solid",
-    spinnerColor: "critical"
+    spinnerColor: "critical",
+    shortcutsVariant: "onSolidBackground"
   },
   warning: {
     color: "warning",
     variant: "solid",
-    spinnerColor: "warning"
+    spinnerColor: "warning",
+    shortcutsVariant: "onSolidBackground"
   },
   ghost: {
     color: "neutral",
     variant: "ghost",
-    spinnerColor: null
+    spinnerColor: null,
+    shortcutsVariant: "ghost"
   },
   link: {
     color: "primary",
     variant: "link",
-    spinnerColor: null
+    spinnerColor: null,
+    shortcutsVariant: "link"
   }
 };

package/dist/Button/index.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _logic = require("./logic");
 var _primitives = _interopRequireDefault(require("./primitives"));
-var _excluded = ["appearance", "as", "children", "className", "css", "iconLeft", "iconRight", "size", "style", "variant", "isLoading"];
+var _excluded = ["appearance", "as", "children", "className", "css", "iconLeft", "iconRight", "size", "style", "variant", "isLoading", "shortcut"];
 var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? "standard" : _ref$appearance,
@@ -25,11 +25,13 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     style = _ref.style,
     ignoredVariant = _ref.variant,
     isLoading = _ref.isLoading,
+    shortcut = _ref.shortcut,
     restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var _getAppearance = (0, _logic.getAppearance)(appearance),
     color = _getAppearance.color,
     variant = _getAppearance.variant,
-    spinnerColor = _getAppearance.spinnerColor;
+    spinnerColor = _getAppearance.spinnerColor,
+    shortcutsVariant = _getAppearance.shortcutsVariant;
   return /*#__PURE__*/_react["default"].createElement(_primitives["default"], (0, _extends2["default"])({
     color: color,
     variant: variant,
@@ -38,7 +40,9 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     iconRight: iconRight,
     size: size,
     ref: ref,
-    isLoading: isLoading
+    isLoading: isLoading,
+    shortcut: shortcut,
+    shortcutsVariant: shortcutsVariant
   }, restProps), children);
 });
 Button.displayName = "Button";

package/dist/Button/logic.spec.js

@@ -7,7 +7,8 @@ describe("getAppearance", function () {
     expect(appearance).toEqual({
       color: "primary",
       variant: "solid",
-      spinnerColor: "primary"
+      spinnerColor: "primary",
+      shortcutsVariant: "onSolidBackground"
     });
   });
   it("should return the correct appearance object when given a valid key (destructive)", function () {
@@ -15,7 +16,8 @@ describe("getAppearance", function () {
     expect(appearance).toEqual({
       color: "critical",
       variant: "solid",
-      spinnerColor: "critical"
+      spinnerColor: "critical",
+      shortcutsVariant: "onSolidBackground"
     });
   });
   it("should return the correct appearance object when given a valid key (standard)", function () {
@@ -23,7 +25,8 @@ describe("getAppearance", function () {
     expect(appearance).toEqual({
       color: "neutral",
       variant: "subtle",
-      spinnerColor: null
+      spinnerColor: null,
+      shortcutsVariant: "onUiElementBackground"
     });
   });
   it("should return the correct appearance object when given a valid key (warning)", function () {
@@ -31,7 +34,8 @@ describe("getAppearance", function () {
     expect(appearance).toEqual({
       color: "warning",
       variant: "solid",
-      spinnerColor: "warning"
+      spinnerColor: "warning",
+      shortcutsVariant: "onSolidBackground"
     });
   });
   it("should return the correct appearance object when given a valid key (ghost)", function () {
@@ -39,7 +43,8 @@ describe("getAppearance", function () {
     expect(appearance).toEqual({
       color: "neutral",
       variant: "ghost",
-      spinnerColor: null
+      spinnerColor: null,
+      shortcutsVariant: "ghost"
     });
   });
   it("should return the correct appearance object when given a valid key (link)", function () {
@@ -47,7 +52,8 @@ describe("getAppearance", function () {
     expect(appearance).toEqual({
       color: "primary",
       variant: "link",
-      spinnerColor: null
+      spinnerColor: null,
+      shortcutsVariant: "link"
     });
   });
 });

package/dist/Button/primitives/index.js

@@ -8,10 +8,11 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _Shortcuts = _interopRequireDefault(require("../../Shortcuts"));
 var _Spinner = _interopRequireDefault(require("../../Spinner"));
 var _ButtonIcon = require("../components/ButtonIcon");
 var _styled = require("./styled");
-var _excluded = ["as", "children", "className", "css", "iconLeft", "iconRight", "size", "style", "variant", "isLoading", "color", "spinnerColor"];
+var _excluded = ["as", "children", "className", "css", "iconLeft", "iconRight", "size", "style", "variant", "isLoading", "color", "spinnerColor", "shortcut", "shortcutsVariant"];
 var ButtonPrimitive = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var as = _ref.as,
     children = _ref.children,
@@ -26,19 +27,27 @@ var ButtonPrimitive = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     isLoading = _ref.isLoading,
     color = _ref.color,
     spinnerColor = _ref.spinnerColor,
+    shortcut = _ref.shortcut,
+    shortcutsVariant = _ref.shortcutsVariant,
     restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseButton, (0, _extends2["default"])({
     ref: ref,
     size: size,
     isLoading: isLoading,
     color: color,
-    variant: variant
+    variant: variant,
+    hasShortcut: !!shortcut
   }, restProps), /*#__PURE__*/_react["default"].createElement(_styled.BaseContentContainer, {
     isLoading: isLoading
   }, iconLeft && /*#__PURE__*/_react["default"].createElement(_ButtonIcon.ButtonIcon, {
     spacing: "end",
     size: size
-  }, iconLeft), children, iconRight && /*#__PURE__*/_react["default"].createElement(_ButtonIcon.ButtonIcon, {
+  }, iconLeft), children, shortcut && /*#__PURE__*/_react["default"].createElement(_Shortcuts["default"], {
+    keys: shortcut,
+    variant: shortcutsVariant,
+    color: color,
+    combineKeys: true
+  }), iconRight && /*#__PURE__*/_react["default"].createElement(_ButtonIcon.ButtonIcon, {
     spacing: "start",
     size: size
   }, iconRight)), isLoading && /*#__PURE__*/_react["default"].createElement(_styled.BaseLoadingContainer, {

package/dist/Button/primitives/styles/BaseButton.styles.js

@@ -7,14 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _system = require("@vitality-ds/system");
-var _constants = require("../constants");
 var _helpers = require("./helpers");
 var text = _system.colorUseCases.text;
 var _default = exports["default"] = (0, _system.css)({
   fontFamily: "$button",
   fontSize: "$button",
   fontWeight: "$button",
-  lineHeight: "calc($button * 1em - (".concat(_constants.BUTTON_BORDER_WIDTH, " * 2))"),
+  lineHeight: "$button",
   letterSpacing: "$button",
   borderRadius: "$default",
   border: "none",
@@ -79,6 +78,11 @@ var _default = exports["default"] = (0, _system.css)({
       "true": {
         pointerEvents: "none"
       }
+    },
+    hasShortcut: {
+      "true": {
+        paddingInlineEnd: "$md"
+      }
     }
   },
   compoundVariants: [

package/dist/Button/primitives/styles/BaseContentContainer.styles.js

@@ -8,6 +8,9 @@ var _system = require("@vitality-ds/system");
 var _default = exports["default"] = (0, _system.css)({
   transition: "opacity 300ms",
   opacity: 1,
+  display: "flex",
+  gap: "$sm",
+  alignItems: "baseline",
   variants: {
     isLoading: {
       "true": {

package/dist/DropdownMenu/components/DropdownMenuItem/styles/BaseItem.styles.js

@@ -30,10 +30,13 @@ var _default = exports["default"] = (0, _system.css)((0, _defineProperty2["defau
 }), "&[aria-disabled='true']", (0, _defineProperty2["default"])({}, "&, ".concat(_styled2.BaseDropdownMenuItemIcon, ", ").concat(_styled.BaseShortcut), {
   color: (0, _system.getColorScaleValueByUseCase)("neutral", text.disabled),
   pointerEvents: "none"
-})), "&:hover:not([aria-disabled='true']), &:focus", (0, _defineProperty2["default"])((0, _defineProperty2["default"])({
-  backgroundColor: (0, _system.getColorScaleValueByUseCase)("primary", backgrounds.uiElementSolid)
-}, "&, ".concat(_styled2.BaseDropdownMenuItemIcon, ", ").concat(_styled.BaseShortcut), {
+})), "&:hover:not([aria-disabled='true']), &:focus", (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
+  backgroundColor: (0, _system.getColorScaleValueByUseCase)("primary", backgrounds.uiElementSolid),
   color: (0, _system.getColorScaleValueByUseCase)("primary", text.onSolidBackgrounds)
+}, "".concat(_styled2.BaseDropdownMenuItemIcon, ", ").concat(_styled.BaseShortcut), {
+  color: (0, _system.getColorScaleValueByUseCase)("primary", text.hiContrastOnSolidBackgrounds)
+}), "".concat(_styled.BaseShortcut), {
+  backgroundColor: (0, _system.getColorScaleValueByUseCase)("primary", backgrounds.uiElementSolid_selected)
 }), "outline", "none")), "&:active:not([aria-disabled='true'])", {
   backgroundColor: (0, _system.getColorScaleValueByUseCase)("primary", backgrounds.uiElementSolid_active)
 }), "&[data-state='open']", {

package/dist/Form/CheckboxList/index.js

@@ -21,7 +21,8 @@ function CheckboxList(_ref) {
     direction = _ref.direction,
     value = _ref.value,
     checkboxListName = _ref.name,
-    ariaLabelledBy = _ref.ariaLabelledBy;
+    ariaLabelledBy = _ref.ariaLabelledBy,
+    disabled = _ref.disabled;
   var _useCheckedItems = (0, _useCheckedItems2["default"])(value),
     checkedItems = _useCheckedItems.checkedItems,
     setCheckedItems = _useCheckedItems.setCheckedItems;
@@ -37,11 +38,11 @@ function CheckboxList(_ref) {
     var label = _ref2.label,
       id = _ref2.id,
       optionValue = _ref2.value,
-      disabled = _ref2.disabled,
-      name = _ref2.name;
+      name = _ref2.name,
+      optionDisabled = _ref2.disabled;
     return /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
       key: optionValue,
-      disabled: disabled,
+      disabled: disabled || optionDisabled,
       label: label,
       id: id,
       value: optionValue,

package/dist/Form/CheckboxList/index.spec.js

@@ -79,4 +79,74 @@ describe("CheckboxList", function () {
     expect(checkbox.at(1).prop("checked")).toEqual(false);
     expect(checkbox.at(1).prop("disabled")).toBeFalsy();
   });
+  it("should disable all checkboxes when disabled prop is true", function () {
+    var wrapper = mount({
+      disabled: true
+    });
+    var checkbox = wrapper.find(_Checkbox["default"]);
+    expect(checkbox).toHaveLength(2);
+    expect(checkbox.at(0).prop("disabled")).toBe(true);
+    expect(checkbox.at(1).prop("disabled")).toBe(true);
+  });
+  it("should disable individual checkboxes via options", function () {
+    var customOptions = [{
+      label: "foo",
+      value: "foo",
+      id: "foo",
+      name: "foo",
+      onChange: function onChange() {
+        return "";
+      },
+      checked: false,
+      disabled: true
+    }, {
+      label: "bar",
+      value: "bar",
+      id: "bar",
+      name: "bar",
+      onChange: function onChange() {
+        return "";
+      },
+      checked: false,
+      disabled: false
+    }];
+    var wrapper = mount({
+      options: customOptions
+    });
+    var checkbox = wrapper.find(_Checkbox["default"]);
+    expect(checkbox).toHaveLength(2);
+    expect(checkbox.at(0).prop("disabled")).toBe(true);
+    expect(checkbox.at(1).prop("disabled")).toBe(false);
+  });
+  it("should disable all checkboxes when both disabled prop and individual option disabled are set", function () {
+    var customOptions = [{
+      label: "foo",
+      value: "foo",
+      id: "foo",
+      name: "foo",
+      onChange: function onChange() {
+        return "";
+      },
+      checked: false,
+      disabled: true
+    }, {
+      label: "bar",
+      value: "bar",
+      id: "bar",
+      name: "bar",
+      onChange: function onChange() {
+        return "";
+      },
+      checked: false,
+      disabled: false
+    }];
+    var wrapper = mount({
+      disabled: true,
+      options: customOptions
+    });
+    var checkbox = wrapper.find(_Checkbox["default"]);
+    expect(checkbox).toHaveLength(2);
+    expect(checkbox.at(0).prop("disabled")).toBe(true);
+    expect(checkbox.at(1).prop("disabled")).toBe(true);
+  });
 });

package/dist/Input/Checkbox/styles/BaseCheckboxText.styles.js

@@ -15,7 +15,8 @@ var _default = exports["default"] = (0, _system.css)({
   variants: {
     disabled: {
       "true": {
-        color: (0, _system.getColorScaleValueByUseCase)("neutral", text.disabled)
+        color: (0, _system.getColorScaleValueByUseCase)("neutral", text.disabled),
+        cursor: "not-allowed"
       }
     }
   }

package/dist/Input/RadioButtons/components/RadioButton/styles/BaseRadioButton.styles.js

@@ -31,7 +31,8 @@ var _default = exports["default"] = (0, _system.css)({
     boxShadow: "0 0 0 2px ".concat((0, _system.getColorScaleValueByUseCase)("primary", borders.focusRing))
   },
   "&:disabled": {
-    borderColor: (0, _system.getColorScaleValueByUseCase)("neutral", borders.uiElement_disabled)
+    borderColor: (0, _system.getColorScaleValueByUseCase)("neutral", borders.uiElement_disabled),
+    cursor: "not-allowed"
   },
   "&[data-state='checked']": {
     borderColor: (0, _system.getColorScaleValueByUseCase)("primary", backgrounds.uiElementSolid),

package/dist/Input/RadioButtons/components/RadioButton/styles/BaseRadioLabel.styles.js

@@ -16,7 +16,8 @@ var _default = exports["default"] = (0, _system.css)({
   variants: {
     disabled: {
       "true": {
-        color: (0, _system.getColorScaleValueByUseCase)("neutral", text.disabled)
+        color: (0, _system.getColorScaleValueByUseCase)("neutral", text.disabled),
+        cursor: "not-allowed"
       }
     }
   }

package/dist/Input/RadioButtons/index.js

@@ -10,8 +10,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _RadioButton = _interopRequireDefault(require("./components/RadioButton"));
 var _styled = require("./styled");
-var _excluded = ["onChange", "options", "direction", "value", "name", "css", "asChild", "as", "style", "className"],
-  _excluded2 = ["id"];
+var _excluded = ["onChange", "options", "direction", "value", "name", "css", "asChild", "as", "style", "className", "disabled"],
+  _excluded2 = ["id", "disabled"];
 var RadioButtons = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
   var onChange = _ref.onChange,
     options = _ref.options,
@@ -24,19 +24,23 @@ var RadioButtons = /*#__PURE__*/_react["default"].forwardRef(function (_ref, for
     as = _ref.as,
     style = _ref.style,
     className = _ref.className,
+    disabled = _ref.disabled,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseRadioButtonsContainer, (0, _extends2["default"])({
     onValueChange: onChange,
     orientation: direction,
     value: value,
     name: name,
-    ref: forwardedRef
+    ref: forwardedRef,
+    disabled: disabled
   }, props), options === null || options === void 0 ? void 0 : options.map(function (_ref2) {
     var id = _ref2.id,
+      optionDisabled = _ref2.disabled,
       restProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
     return /*#__PURE__*/_react["default"].createElement(_RadioButton["default"], (0, _extends2["default"])({}, restProps, {
       key: id,
-      id: id
+      id: id,
+      disabled: disabled || optionDisabled
     }));
   }));
 });

package/dist/Input/RadioButtons/index.spec.js

@@ -110,4 +110,55 @@ describe("<RadioButtons />", function () {
     expect(radioTwo.getAttribute("aria-checked")).toBe("true");
     expect(radioThree.getAttribute("aria-checked")).toBe("false");
   });
+  it("should disable all radio buttons when disabled prop is true", function () {
+    (0, _react.render)(/*#__PURE__*/_react2["default"].createElement(_index["default"], (0, _extends2["default"])({
+      onChange: function onChange() {
+        return null;
+      }
+    }, mockProps, {
+      disabled: true
+    })));
+    var radioOne = _react.screen.getByLabelText("Radio One Label");
+    var radioTwo = _react.screen.getByLabelText("Radio Two Label");
+    var radioThree = _react.screen.getByLabelText("Radio Three Label");
+    expect(radioOne.getAttribute("data-disabled")).toBe("");
+    expect(radioTwo.getAttribute("data-disabled")).toBe("");
+    expect(radioThree.getAttribute("data-disabled")).toBe("");
+  });
+  it("should disable individual radio buttons via options", function () {
+    (0, _react.render)(/*#__PURE__*/_react2["default"].createElement(_index["default"], (0, _extends2["default"])({
+      onChange: function onChange() {
+        return null;
+      }
+    }, mockProps)));
+    var radioOne = _react.screen.getByLabelText("Radio One Label");
+    var radioTwo = _react.screen.getByLabelText("Radio Two Label");
+    var radioThree = _react.screen.getByLabelText("Radio Three Label");
+    expect(radioOne.getAttribute("data-disabled")).toBe(null);
+    expect(radioTwo.getAttribute("data-disabled")).toBe(null);
+    expect(radioThree.getAttribute("data-disabled")).toBe("");
+  });
+  it("should disable all radio buttons when both disabled prop and individual option disabled are set", function () {
+    (0, _react.render)(/*#__PURE__*/_react2["default"].createElement(_index["default"], (0, _extends2["default"])({
+      onChange: function onChange() {
+        return null;
+      }
+    }, mockProps, {
+      disabled: true
+    })));
+    var radioOne = _react.screen.getByLabelText("Radio One Label");
+    var radioTwo = _react.screen.getByLabelText("Radio Two Label");
+    var radioThree = _react.screen.getByLabelText("Radio Three Label");
+    expect(radioOne.getAttribute("data-disabled")).toBe("");
+    expect(radioTwo.getAttribute("data-disabled")).toBe("");
+    expect(radioThree.getAttribute("data-disabled")).toBe("");
+    var mockOnChange = jest.fn();
+    (0, _react.render)(/*#__PURE__*/_react2["default"].createElement(_index["default"], (0, _extends2["default"])({
+      onChange: mockOnChange
+    }, mockProps, {
+      disabled: true
+    })));
+    _react.fireEvent.click(_react.screen.getByLabelText("Radio One Label"));
+    expect(mockOnChange).not.toHaveBeenCalled();
+  });
 });

package/dist/Input/TextInput/components/ShortcutAdornment/index.js

@@ -8,9 +8,14 @@ exports["default"] = ShortcutAdornment;
 var _react = _interopRequireDefault(require("react"));
 var _Shortcuts = _interopRequireDefault(require("../../../../Shortcuts"));
 function ShortcutAdornment(_ref) {
-  var keys = _ref.keys;
+  var keys = _ref.keys,
+    combineKeys = _ref.combineKeys,
+    color = _ref.color,
+    variant = _ref.variant;
   return /*#__PURE__*/_react["default"].createElement(_Shortcuts["default"], {
-    variant: "stylized",
-    keys: keys
+    keys: keys,
+    combineKeys: combineKeys,
+    color: color,
+    variant: variant
   });
 }

package/dist/Shortcuts/constants.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WINDOWS_KEY_MAP = exports.MAC_KEY_MAP = void 0;
+/**
+ * Key mappings for platform-specific modifier keys.
+ * Mac uses symbols, Windows/Linux uses text labels.
+ */
+var MAC_KEY_MAP = exports.MAC_KEY_MAP = {
+  cmd: "⌘",
+  command: "⌘",
+  ctrl: "⌃",
+  control: "⌃",
+  alt: "⌥",
+  option: "⌥",
+  opt: "⌥",
+  shift: "⇧",
+  meta: "⌘",
+  enter: "⏎",
+  "return": "⏎"
+};
+var WINDOWS_KEY_MAP = exports.WINDOWS_KEY_MAP = {
+  cmd: "Ctrl",
+  command: "Ctrl",
+  ctrl: "Ctrl",
+  control: "Ctrl",
+  alt: "Alt",
+  option: "Alt",
+  opt: "Alt",
+  shift: "Shift",
+  meta: "Win",
+  enter: "Enter",
+  "return": "Enter"
+};

package/dist/Shortcuts/hooks/useOS.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _logic = require("../logic");
+/**
+ * Hook to detect the user's operating system.
+ * Uses the modern User-Agent Client Hints API (navigator.userAgentData).
+ *
+ * @returns The detected operating system: "mac" | "windows" | "linux" | "unknown"
+ *
+ * @example
+ * const os = useOS();
+ * const modifierKey = os === "mac" ? "⌘" : "Ctrl";
+ */
+var useOS = function useOS() {
+  var _useState = (0, _react.useState)("unknown"),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    os = _useState2[0],
+    setOS = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setOS((0, _logic.getOS)());
+  }, []);
+  return os;
+};
+var _default = exports["default"] = useOS;

package/dist/Shortcuts/index.js

@@ -6,14 +6,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = Shortcuts;
 var _react = _interopRequireDefault(require("react"));
+var _useOS = _interopRequireDefault(require("./hooks/useOS"));
+var _logic = require("./logic");
 var _styled = require("./styled");
 function Shortcuts(_ref) {
-  var variant = _ref.variant,
-    keys = _ref.keys;
-  return /*#__PURE__*/_react["default"].createElement(_styled.BaseShortcutGroup, null, keys === null || keys === void 0 ? void 0 : keys.map(function (key) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "uiElement" : _ref$variant,
+    keys = _ref.keys,
+    combineKeys = _ref.combineKeys,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "neutral" : _ref$color;
+  var os = (0, _useOS["default"])();
+  var transformedKeys = (0, _logic.transformKeys)(keys !== null && keys !== void 0 ? keys : [], os);
+  if (combineKeys) {
+    var keyOccurrences = {};
+    return /*#__PURE__*/_react["default"].createElement(_styled.BaseShortcut, {
+      separateCombinedKeys: true,
+      as: "span",
+      variant: variant,
+      color: color
+    }, transformedKeys === null || transformedKeys === void 0 ? void 0 : transformedKeys.map(function (key) {
+      var _keyOccurrences$key;
+      keyOccurrences[key] = ((_keyOccurrences$key = keyOccurrences[key]) !== null && _keyOccurrences$key !== void 0 ? _keyOccurrences$key : 0) + 1;
+      var reactKey = "".concat(key, "-").concat(keyOccurrences[key]);
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+        key: reactKey
+      }, /*#__PURE__*/_react["default"].createElement("kbd", null, key));
+    }));
+  }
+  return /*#__PURE__*/_react["default"].createElement(_styled.BaseShortcutGroup, null, transformedKeys === null || transformedKeys === void 0 ? void 0 : transformedKeys.map(function (key) {
     return /*#__PURE__*/_react["default"].createElement(_styled.BaseShortcut, {
       key: key,
-      variant: variant
+      variant: variant,
+      color: color
     }, key);
   }));
 }

package/dist/Shortcuts/logic.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformKeys = exports.transformKey = exports.getOS = void 0;
+var _constants = require("./constants");
+var getOS = exports.getOS = function getOS() {
+  var _navigator$userAgentD, _navigator$userAgentD2, _navigator$userAgentD3;
+  if (typeof navigator === "undefined") return null;
+  var platform = (_navigator$userAgentD = (_navigator$userAgentD2 = navigator.userAgentData) === null || _navigator$userAgentD2 === void 0 ? void 0 : (_navigator$userAgentD3 = _navigator$userAgentD2.platform) === null || _navigator$userAgentD3 === void 0 ? void 0 : _navigator$userAgentD3.toLowerCase()) !== null && _navigator$userAgentD !== void 0 ? _navigator$userAgentD : null;
+  if (platform !== null && platform !== void 0 && platform.includes("mac")) return "mac";
+  if (platform !== null && platform !== void 0 && platform.includes("win")) return "windows";
+  if (platform !== null && platform !== void 0 && platform.includes("linux")) return "linux";
+  return platform;
+};
+
+/**
+ * Transforms a key label to its platform-specific representation.
+ *
+ * @param key - The key to transform (e.g., "cmd", "ctrl", "shift")
+ * @param os - The target operating system
+ * @returns The platform-appropriate key label
+ */
+var transformKey = exports.transformKey = function transformKey(key, os) {
+  var _keyMap$normalizedKey;
+  var normalizedKey = key.toLowerCase().trim();
+  var keyMap = os === "mac" ? _constants.MAC_KEY_MAP : _constants.WINDOWS_KEY_MAP;
+  return (_keyMap$normalizedKey = keyMap[normalizedKey]) !== null && _keyMap$normalizedKey !== void 0 ? _keyMap$normalizedKey : key;
+};
+
+/**
+ * Transforms an array of keys to their platform-specific representations.
+ *
+ * @param keys - Array of key labels
+ * @param os - The target operating system
+ * @returns Array of platform-appropriate key labels
+ *
+ * @example
+ * transformKeys(["cmd", "shift", "P"], "mac") // ["⌘", "⇧", "P"]
+ * transformKeys(["cmd", "shift", "P"], "windows") // ["Ctrl", "Shift", "P"]
+ */
+var transformKeys = exports.transformKeys = function transformKeys(keys, os) {
+  return keys.map(function (key) {
+    return transformKey(key, os);
+  });
+};