@decisiv/ui-components 2.0.1-alpha.16 → 2.0.1-alpha.161

package/lib/utils/commonUIColors.d.ts

@@ -11,11 +11,359 @@ export declare type CommonUIColorKeys = StatusColorsKeys | VIColorsKeys;
 export declare type CommonUIColors = {
     [K in CommonUIColorKeys]: Color;
 };
-export declare const viColorKeys: import("@decisiv/design-tokens/lib/color/visual-interest").VisualInterestColorName[];
+export declare const viColorKeys: ("berryCrisp" | "koolaidCake" | "cookieMonster" | "cottonCandy" | "fizzyLime" | "mamboMango" | "carrotCake" | "roseGummy" | "licoriceMousse")[];
 export declare const statusColorKeys: ("information" | "success" | "warning" | "danger")[];
 export declare const viColors: VIColors;
 export declare const statusColors: StatusColors;
 export declare const commonUIColorKeys: CommonUIColorKeys[];
 export declare const commonUIColors: CommonUIColors;
+export declare const commonUIThreeShadeColors: {
+    readonly berryCrisp: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly koolaidCake: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly cookieMonster: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly cottonCandy: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly fizzyLime: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly mamboMango: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly carrotCake: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly roseGummy: {
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly licoriceMousse: {
+        dark: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        medium: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+        light: {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+            readonly alpha: number;
+        } | {
+            readonly fg: Color;
+            readonly red: number;
+            readonly green: number;
+            readonly blue: number;
+        };
+    };
+    readonly information: import("@decisiv/design-tokens/lib/color").ThreeShadeColor;
+    readonly success: import("@decisiv/design-tokens/lib/color").ThreeShadeColor;
+    readonly warning: import("@decisiv/design-tokens/lib/color").ThreeShadeColor;
+    readonly danger: import("@decisiv/design-tokens/lib/color").ThreeShadeColor;
+};
 export {};
 //# sourceMappingURL=commonUIColors.d.ts.map

package/lib/utils/commonUIColors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"commonUIColors.d.ts","sourceRoot":"","sources":["../../src/utils/commonUIColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAIhE,oBAAY,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC,cAAc,CAAC;AAC7D,oBAAY,gBAAgB,GAAG,MAAM,OAAO,KAAK,CAAC,MAAM,CAAC;AAEzD,aAAK,QAAQ,GAAG;KAAG,CAAC,IAAI,YAAY,GAAG,KAAK;CAAE,CAAC;AAC/C,aAAK,YAAY,GAAG;KAAG,CAAC,IAAI,gBAAgB,GAAG,KAAK;CAAE,CAAC;AAEvD,oBAAY,iBAAiB,GAAG,gBAAgB,GAAG,YAAY,CAAC;AAChE,oBAAY,cAAc,GAAG;KAAG,CAAC,IAAI,iBAAiB,GAAG,KAAK;CAAE,CAAC;AAEjE,eAAO,MAAM,WAAW,sFAAgD,CAAC;AACzE,eAAO,MAAM,eAAe,sDAA4C,CAAC;AAEzE,eAAO,MAAM,QAAQ,UAMR,CAAC;AAEd,eAAO,MAAM,YAAY,cAGR,CAAC;AAElB,eAAO,MAAM,iBAAiB,qBAAuC,CAAC;AAEtE,eAAO,MAAM,cAAc,EAAE,cAG5B,CAAC"}
+{"version":3,"file":"commonUIColors.d.ts","sourceRoot":"","sources":["../../src/utils/commonUIColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AAIhE,oBAAY,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC,cAAc,CAAC;AAC7D,oBAAY,gBAAgB,GAAG,MAAM,OAAO,KAAK,CAAC,MAAM,CAAC;AAEzD,aAAK,QAAQ,GAAG;KAAG,CAAC,IAAI,YAAY,GAAG,KAAK;CAAE,CAAC;AAC/C,aAAK,YAAY,GAAG;KAAG,CAAC,IAAI,gBAAgB,GAAG,KAAK;CAAE,CAAC;AAEvD,oBAAY,iBAAiB,GAAG,gBAAgB,GAAG,YAAY,CAAC;AAChE,oBAAY,cAAc,GAAG;KAAG,CAAC,IAAI,iBAAiB,GAAG,KAAK;CAAE,CAAC;AAEjE,eAAO,MAAM,WAAW,iJAAgD,CAAC;AACzE,eAAO,MAAM,eAAe,sDAA4C,CAAC;AAEzE,eAAO,MAAM,QAAQ,UAMR,CAAC;AAEd,eAAO,MAAM,YAAY,cAGR,CAAC;AAElB,eAAO,MAAM,iBAAiB,qBAAuC,CAAC;AAEtE,eAAO,MAAM,cAAc,EAAE,cAG5B,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAG3B,CAAC"}

package/lib/utils/commonUIColors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.commonUIColors = exports.commonUIColorKeys = exports.statusColors = exports.viColors = exports.statusColorKeys = exports.viColorKeys = void 0;
+exports.commonUIThreeShadeColors = exports.commonUIColors = exports.commonUIColorKeys = exports.statusColors = exports.viColors = exports.statusColorKeys = exports.viColorKeys = void 0;
 
 var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
 
@@ -42,4 +42,8 @@ exports.commonUIColorKeys = commonUIColorKeys;
 
 var commonUIColors = _objectSpread({}, statusColors, {}, viColors);
 
-exports.commonUIColors = commonUIColors;
+exports.commonUIColors = commonUIColors;
+
+var commonUIThreeShadeColors = _objectSpread({}, status, {}, visualInterest);
+
+exports.commonUIThreeShadeColors = commonUIThreeShadeColors;

package/lib/utils/joinClassnames.d.ts

@@ -0,0 +1,3 @@
+declare function joinClassNames(...classnames: (string | undefined)[]): string | undefined;
+export default joinClassNames;
+//# sourceMappingURL=joinClassnames.d.ts.map

package/lib/utils/joinClassnames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"joinClassnames.d.ts","sourceRoot":"","sources":["../../src/utils/joinClassnames.ts"],"names":[],"mappings":"AAMA,iBAAS,cAAc,CACrB,GAAG,UAAU,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GACpC,MAAM,GAAG,SAAS,CAIpB;AAED,eAAe,cAAc,CAAC"}

package/lib/utils/joinClassnames.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _compact = _interopRequireDefault(require("lodash/compact"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Join multiple classnames
+ * Returns a string of joined classnames omitting falsy values, undefined when resulting string is empty
+ */
+function joinClassNames() {
+  for (var _len = arguments.length, classnames = new Array(_len), _key = 0; _key < _len; _key++) {
+    classnames[_key] = arguments[_key];
+  }
+
+  var result = (0, _compact.default)(classnames).join(' ');
+  return result || undefined;
+}
+
+var _default = joinClassNames;
+exports.default = _default;

package/lib/utils/useFirstMount.d.ts

@@ -0,0 +1,2 @@
+export default function useFirstMountState(): boolean;
+//# sourceMappingURL=useFirstMount.d.ts.map

package/lib/utils/useFirstMount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFirstMount.d.ts","sourceRoot":"","sources":["../../src/utils/useFirstMount.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,kBAAkB,IAAI,OAAO,CAUpD"}

package/lib/utils/useFirstMount.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useFirstMountState;
+
+var _react = require("react");
+
+function useFirstMountState() {
+  var isFirst = (0, _react.useRef)(true);
+
+  if (isFirst.current) {
+    isFirst.current = false;
+    return true;
+  }
+
+  return isFirst.current;
+}

package/lib/utils/useUpdateEffect.d.ts

@@ -0,0 +1,4 @@
+import { useEffect } from 'react';
+declare const useUpdateEffect: typeof useEffect;
+export default useUpdateEffect;
+//# sourceMappingURL=useUpdateEffect.d.ts.map

package/lib/utils/useUpdateEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUpdateEffect.d.ts","sourceRoot":"","sources":["../../src/utils/useUpdateEffect.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAGlE,QAAA,MAAM,eAAe,EAAE,OAAO,SAY7B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/utils/useUpdateEffect.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _useFirstMount = _interopRequireDefault(require("./useFirstMount"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable react-hooks/exhaustive-deps */
+var useUpdateEffect = function useUpdateEffect(effect) {
+  var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var isFirstMount = (0, _useFirstMount.default)();
+  (0, _react.useEffect)(function () {
+    if (!isFirstMount) {
+      return effect();
+    }
+
+    return undefined;
+  }, deps);
+};
+
+var _default = useUpdateEffect;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.16+1d48464",
+  "version": "2.0.1-alpha.161+116541e",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "1d484643f59fe5d96bc8b1efe09a222171aff8ae"
+  "gitHead": "116541e753f0ccd418be6c9d42a335d698b59d38"
 }