@synerise/ds-short-cuts 1.0.40 → 1.0.42

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.42](https://github.com/Synerise/synerise-design/compare/@synerise/ds-short-cuts@1.0.41...@synerise/ds-short-cuts@1.0.42) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-short-cuts
+
+## [1.0.41](https://github.com/Synerise/synerise-design/compare/@synerise/ds-short-cuts@1.0.40...@synerise/ds-short-cuts@1.0.41) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-short-cuts
+
 ## [1.0.40](https://github.com/Synerise/synerise-design/compare/@synerise/ds-short-cuts@1.0.39...@synerise/ds-short-cuts@1.0.40) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-short-cuts

package/README.md

@@ -28,9 +28,10 @@ import ShortCuts from '@synerise/ds-short-cuts'
 
 ## API
 
-| Property | Description | Type | Default |
-| size | sizes of short cut | `S` , `L` | `L` |
-| children | content to display | ReactNode | - |
-| color | type of colors | string | - |
-| icon | icon to display | ReactNode | - |
-| autoWidth | auto width for more text | boolean | `false` |
+| Property  | Description                                                | Type                   | Default |
+| --------- | ---------------------------------------------------------- | ---------------------- | ------- |
+| size      | Size of the shortcut badge                                 | `'S'` \| `'L'`        | `L`     |
+| color     | Color variant                                              | `'light'` \| `'dark'` | -       |
+| children  | Text label to display (mutually exclusive with `icon`)     | ReactNode              | -       |
+| icon      | Icon to display (mutually exclusive with `children`)       | ReactNode              | -       |
+| autoWidth | When true, width is `auto`; when false, width equals height | boolean               | `false` |

package/dist/ShortCuts.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type ShortCutsProps } from './ShortCuts.types';
+import { default as React } from 'react';
+import { ShortCutsProps } from './ShortCuts.types';
 declare const ShortCuts: ({ size, children, color, icon, autoWidth, ...htmlAttributes }: ShortCutsProps) => React.JSX.Element;
 export default ShortCuts;

package/dist/ShortCuts.js

@@ -1,30 +1,18 @@
-var _excluded = ["size", "children", "color", "icon", "autoWidth"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from 'react';
-import { theme } from '@synerise/ds-core';
-import Icon from '@synerise/ds-icon';
-import { Text } from '@synerise/ds-typography';
-import * as S from './ShortCuts.style';
-var ShortCuts = function ShortCuts(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'L' : _ref$size,
-    children = _ref.children,
-    color = _ref.color,
-    icon = _ref.icon,
-    autoWidth = _ref.autoWidth,
-    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(S.Wrapper, _extends({
-    color: color,
-    size: size,
-    autoWidth: autoWidth,
-    isIcon: Boolean(icon)
-  }, htmlAttributes), icon ? /*#__PURE__*/React.createElement(Icon, {
-    color: color === 'dark' ? theme.palette.white : theme.palette['grey-600'],
-    component: icon,
-    size: 12
-  }) : /*#__PURE__*/React.createElement(Text, {
-    size: "xsmall"
-  }, children));
+import { jsx } from "react/jsx-runtime";
+import { theme } from "@synerise/ds-core";
+import Icon from "@synerise/ds-icon";
+import { Text } from "@synerise/ds-typography";
+import { Wrapper } from "./ShortCuts.style.js";
+const ShortCuts = ({
+  size = "L",
+  children,
+  color,
+  icon,
+  autoWidth,
+  ...htmlAttributes
+}) => {
+  return /* @__PURE__ */ jsx(Wrapper, { color, size, autoWidth, isIcon: Boolean(icon), ...htmlAttributes, children: icon ? /* @__PURE__ */ jsx(Icon, { color: color === "dark" ? theme.palette.white : theme.palette["grey-600"], component: icon, size: 12 }) : /* @__PURE__ */ jsx(Text, { size: "xsmall", children }) });
+};
+export {
+  ShortCuts as default
 };
-export default ShortCuts;

package/dist/ShortCuts.style.d.ts

@@ -1,4 +1,4 @@
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const Wrapper: import('styled-components').StyledComponent<"div", any, {
     size?: "S" | "L";
     color?: "dark" | "light";
     autoWidth?: boolean;

package/dist/ShortCuts.style.js

@@ -1,42 +1,31 @@
-import styled from 'styled-components';
-var getPadding = function getPadding(props) {
-  if (props.size === 'S') {
+import styled from "styled-components";
+const getPadding = (props) => {
+  if (props.size === "S") {
     if (props.isIcon) {
-      return '3px 3px 2px';
+      return "3px 3px 2px";
     }
-    return '1px 4px 0';
+    return "1px 4px 0";
   }
   if (props.isIcon) {
-    return '6px 6px 5px';
+    return "6px 6px 5px";
   }
-  return '4px 8px 3px';
+  return "4px 8px 3px";
 };
-var getWidth = function getWidth(props) {
+const getWidth = (props) => {
   if (!props.autoWidth) {
-    if (props.size === 'L') {
-      return '24px';
+    if (props.size === "L") {
+      return "24px";
     }
-    if (props.size === 'S') {
-      return '18px';
+    if (props.size === "S") {
+      return "18px";
     }
   }
-  return 'auto';
+  return "auto";
 };
-export var Wrapper = styled.div.withConfig({
+const Wrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ShortCutsstyle__Wrapper",
   componentId: "sc-vo5qxe-0"
-})(["box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:", ";width:", ";background-color:", ";border-bottom:1px solid ", ";border-radius:3px;color:", ";padding:", ";font-size:11px;box-shadow:0px 1px 8px 0px rgba( 35,41,54,", " );"], function (props) {
-  return props.size === 'S' ? '18px' : '24px';
-}, function (props) {
-  return getWidth(props);
-}, function (props) {
-  return props.color === 'dark' ? props.theme.palette['grey-600'] : props.theme.palette.white;
-}, function (props) {
-  return props.color === 'dark' ? props.theme.palette['grey-500'] : props.theme.palette['grey-300'];
-}, function (props) {
-  return props.color === 'dark' ? props.theme.palette.white : props.theme.palette['grey-600'];
-}, function (props) {
-  return getPadding(props);
-}, function (props) {
-  return props.color === 'dark' ? '0.5' : '0.08';
-});
+})(["box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:", ";width:", ";background-color:", ";border-bottom:1px solid ", ";border-radius:3px;color:", ";padding:", ";font-size:11px;box-shadow:0px 1px 8px 0px rgba( 35,41,54,", " );"], (props) => props.size === "S" ? "18px" : "24px", (props) => getWidth(props), (props) => props.color === "dark" ? props.theme.palette["grey-600"] : props.theme.palette.white, (props) => props.color === "dark" ? props.theme.palette["grey-500"] : props.theme.palette["grey-300"], (props) => props.color === "dark" ? props.theme.palette.white : props.theme.palette["grey-600"], (props) => getPadding(props), (props) => props.color === "dark" ? "0.5" : "0.08");
+export {
+  Wrapper
+};

package/dist/ShortCuts.types.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode } from 'react';
-import { type ExactlyOne, type WithHTMLAttributes } from '@synerise/ds-utils';
+import { ReactNode } from 'react';
+import { ExactlyOne, WithHTMLAttributes } from '@synerise/ds-utils';
 export type ShortCutsProps = WithHTMLAttributes<HTMLDivElement, {
     size?: 'S' | 'L';
     color?: 'light' | 'dark';

package/dist/ShortCuts.types.js

@@ -1 +1 @@
-export {};
+

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './ShortCuts';
+import { default as default2 } from "./ShortCuts.js";
+export {
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+import "@testing-library/jest-dom/extend-expect";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-short-cuts",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "description": "ShortCuts UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,15 +35,16 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.14.1",
-    "@synerise/ds-typography": "^1.1.11"
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-typography": "^1.1.13"
   },
   "devDependencies": {
-    "@synerise/ds-utils": "^1.6.0"
+    "@synerise/ds-utils": "^1.7.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "react": ">=16.9.0 <= 18.3.1"
+    "react": ">=16.9.0 <= 18.3.1",
+    "styled-components": "^5.3.3"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }