@veeqo/ui 9.6.5 → 9.7.1

package/dist/components/ThemeInjector/ThemeInjector.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../theme/index.cjs');
+var utils = require('./utils.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ThemeInjector = React__default.default.memo(({ theme = index.theme }) => {
+    const themeStyle = utils.buildThemeVariables(theme);
+    return (React__default.default.createElement("style", null, `:root {${Object.entries(themeStyle)
+        .map(([key, value]) => `${key}: ${value};`)
+        .join('')}}`));
+});
+
+exports.ThemeInjector = ThemeInjector;
+//# sourceMappingURL=ThemeInjector.cjs.map

package/dist/components/ThemeInjector/ThemeInjector.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeInjector.cjs","sources":["../../../src/components/ThemeInjector/ThemeInjector.tsx"],"sourcesContent":["import React from 'react';\n\nimport { theme as VeeqoTheme } from 'Theme';\nimport { buildThemeVariables } from './utils';\n\n/**\n * Component that injects a theme into the DOM as CSS variables. Only one instance per page is necessary\n *\n * The theme variables are mapped from dot-notation with camelCase property names, into kebab-case CSS variables.\n *\n * For example, `theme.text.headingLarge.fontSize` can be accessed as `var(--text-heading-large-font-size)`.\n */\ntype ThemeInjectorProps = {\n  theme?: typeof VeeqoTheme;\n};\n\nexport const ThemeInjector = React.memo(({ theme = VeeqoTheme }: ThemeInjectorProps) => {\n  const themeStyle = buildThemeVariables(theme);\n\n  return (\n    <style>\n      {`:root {${Object.entries(themeStyle)\n        .map(([key, value]) => `${key}: ${value};`)\n        .join('')}}`}\n    </style>\n  );\n});\n"],"names":["React","VeeqoTheme","buildThemeVariables"],"mappings":";;;;;;;;;;AAgBO,MAAM,aAAa,GAAGA,sBAAK,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,GAAGC,WAAU,EAAsB,KAAI;AACrF,IAAA,MAAM,UAAU,GAAGC,yBAAmB,CAAC,KAAK,CAAC;IAE7C,QACEF,oDACG,CAAU,OAAA,EAAA,MAAM,CAAC,OAAO,CAAC,UAAU;AACjC,SAAA,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAG,EAAA,GAAG,CAAK,EAAA,EAAA,KAAK,GAAG;AACzC,SAAA,IAAI,CAAC,EAAE,CAAC,CAAG,CAAA,CAAA,CACR;AAEZ,CAAC;;;;"}

package/dist/components/ThemeInjector/ThemeInjector.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { theme as VeeqoTheme } from 'Theme';
+/**
+ * Component that injects a theme into the DOM as CSS variables. Only one instance per page is necessary
+ *
+ * The theme variables are mapped from dot-notation with camelCase property names, into kebab-case CSS variables.
+ *
+ * For example, `theme.text.headingLarge.fontSize` can be accessed as `var(--text-heading-large-font-size)`.
+ */
+type ThemeInjectorProps = {
+    theme?: typeof VeeqoTheme;
+};
+export declare const ThemeInjector: React.MemoExoticComponent<({ theme }: ThemeInjectorProps) => React.JSX.Element>;
+export {};

package/dist/components/ThemeInjector/ThemeInjector.js

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { theme } from '../../theme/index.js';
+import { buildThemeVariables } from './utils.js';
+
+const ThemeInjector = React__default.memo(({ theme: theme$1 = theme }) => {
+    const themeStyle = buildThemeVariables(theme$1);
+    return (React__default.createElement("style", null, `:root {${Object.entries(themeStyle)
+        .map(([key, value]) => `${key}: ${value};`)
+        .join('')}}`));
+});
+
+export { ThemeInjector };
+//# sourceMappingURL=ThemeInjector.js.map

package/dist/components/ThemeInjector/ThemeInjector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeInjector.js","sources":["../../../src/components/ThemeInjector/ThemeInjector.tsx"],"sourcesContent":["import React from 'react';\n\nimport { theme as VeeqoTheme } from 'Theme';\nimport { buildThemeVariables } from './utils';\n\n/**\n * Component that injects a theme into the DOM as CSS variables. Only one instance per page is necessary\n *\n * The theme variables are mapped from dot-notation with camelCase property names, into kebab-case CSS variables.\n *\n * For example, `theme.text.headingLarge.fontSize` can be accessed as `var(--text-heading-large-font-size)`.\n */\ntype ThemeInjectorProps = {\n  theme?: typeof VeeqoTheme;\n};\n\nexport const ThemeInjector = React.memo(({ theme = VeeqoTheme }: ThemeInjectorProps) => {\n  const themeStyle = buildThemeVariables(theme);\n\n  return (\n    <style>\n      {`:root {${Object.entries(themeStyle)\n        .map(([key, value]) => `${key}: ${value};`)\n        .join('')}}`}\n    </style>\n  );\n});\n"],"names":["React","theme","VeeqoTheme"],"mappings":";;;;AAgBO,MAAM,aAAa,GAAGA,cAAK,CAAC,IAAI,CAAC,CAAC,SAAEC,OAAK,GAAGC,KAAU,EAAsB,KAAI;AACrF,IAAA,MAAM,UAAU,GAAG,mBAAmB,CAACD,OAAK,CAAC;IAE7C,QACED,4CACG,CAAU,OAAA,EAAA,MAAM,CAAC,OAAO,CAAC,UAAU;AACjC,SAAA,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAG,EAAA,GAAG,CAAK,EAAA,EAAA,KAAK,GAAG;AACzC,SAAA,IAAI,CAAC,EAAE,CAAC,CAAG,CAAA,CAAA,CACR;AAEZ,CAAC;;;;"}

package/dist/components/ThemeInjector/index.d.ts

@@ -0,0 +1 @@
+export { ThemeInjector } from './ThemeInjector';

package/dist/components/ThemeInjector/utils.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+/**
+ * Converts a camelCase string into kebab-case.
+ */
+const camelToKebab = (str) => {
+    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+};
+/**
+ * Builds CSS variables by traversing the theme object. Variable names are built by taken the path to the value, and joining it with '-' characters.
+ * @param themeObj The theme object to convert to CSS variables.
+ * @param prefix The current prefix.
+ * @returns A record, mapping from variable name to value.
+ */
+const buildThemeVariables = (themeObj, prefix = '') => {
+    return Object.entries(themeObj).reduce((acc, [key, value]) => {
+        const kebabKey = camelToKebab(key);
+        const varPrefix = prefix === '' ? '' : `${prefix}-`;
+        if (typeof value === 'object') {
+            return { ...acc, ...buildThemeVariables(value, `${varPrefix}${kebabKey}`) };
+        }
+        return {
+            ...acc,
+            [`--${varPrefix}${kebabKey}`]: value,
+        };
+    }, {});
+};
+
+exports.buildThemeVariables = buildThemeVariables;
+exports.camelToKebab = camelToKebab;
+//# sourceMappingURL=utils.cjs.map

package/dist/components/ThemeInjector/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../../src/components/ThemeInjector/utils.ts"],"sourcesContent":["/**\n * Converts a camelCase string into kebab-case.\n */\nexport const camelToKebab = (str: string) => {\n  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n};\n\n/**\n * Builds CSS variables by traversing the theme object. Variable names are built by taken the path to the value, and joining it with '-' characters.\n * @param themeObj The theme object to convert to CSS variables.\n * @param prefix The current prefix.\n * @returns A record, mapping from variable name to value.\n */\nexport const buildThemeVariables = (themeObj: Object, prefix: string = '') => {\n  return Object.entries(themeObj).reduce((acc, [key, value]): any => {\n    const kebabKey = camelToKebab(key);\n    const varPrefix = prefix === '' ? '' : `${prefix}-`;\n\n    if (typeof value === 'object') {\n      return { ...acc, ...buildThemeVariables(value, `${varPrefix}${kebabKey}`) };\n    }\n\n    return {\n      ...acc,\n      [`--${varPrefix}${kebabKey}`]: value,\n    };\n  }, {});\n};\n"],"names":[],"mappings":";;AAAA;;AAEG;AACU,MAAA,YAAY,GAAG,CAAC,GAAW,KAAI;IAC1C,OAAO,GAAG,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE;AACjE;AAEA;;;;;AAKG;AACU,MAAA,mBAAmB,GAAG,CAAC,QAAgB,EAAE,MAAA,GAAiB,EAAE,KAAI;AAC3E,IAAA,OAAO,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,KAAS;AAChE,QAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC;AAClC,QAAA,MAAM,SAAS,GAAG,MAAM,KAAK,EAAE,GAAG,EAAE,GAAG,CAAG,EAAA,MAAM,GAAG;AAEnD,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,YAAA,OAAO,EAAE,GAAG,GAAG,EAAE,GAAG,mBAAmB,CAAC,KAAK,EAAE,CAAA,EAAG,SAAS,CAAG,EAAA,QAAQ,CAAE,CAAA,CAAC,EAAE;AAC5E;QAED,OAAO;AACL,YAAA,GAAG,GAAG;AACN,YAAA,CAAC,KAAK,SAAS,CAAA,EAAG,QAAQ,CAAE,CAAA,GAAG,KAAK;SACrC;KACF,EAAE,EAAE,CAAC;AACR;;;;;"}

package/dist/components/ThemeInjector/utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Converts a camelCase string into kebab-case.
+ */
+export declare const camelToKebab: (str: string) => string;
+/**
+ * Builds CSS variables by traversing the theme object. Variable names are built by taken the path to the value, and joining it with '-' characters.
+ * @param themeObj The theme object to convert to CSS variables.
+ * @param prefix The current prefix.
+ * @returns A record, mapping from variable name to value.
+ */
+export declare const buildThemeVariables: (themeObj: Object, prefix?: string) => {};

package/dist/components/ThemeInjector/utils.js

@@ -0,0 +1,28 @@
+/**
+ * Converts a camelCase string into kebab-case.
+ */
+const camelToKebab = (str) => {
+    return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+};
+/**
+ * Builds CSS variables by traversing the theme object. Variable names are built by taken the path to the value, and joining it with '-' characters.
+ * @param themeObj The theme object to convert to CSS variables.
+ * @param prefix The current prefix.
+ * @returns A record, mapping from variable name to value.
+ */
+const buildThemeVariables = (themeObj, prefix = '') => {
+    return Object.entries(themeObj).reduce((acc, [key, value]) => {
+        const kebabKey = camelToKebab(key);
+        const varPrefix = prefix === '' ? '' : `${prefix}-`;
+        if (typeof value === 'object') {
+            return { ...acc, ...buildThemeVariables(value, `${varPrefix}${kebabKey}`) };
+        }
+        return {
+            ...acc,
+            [`--${varPrefix}${kebabKey}`]: value,
+        };
+    }, {});
+};
+
+export { buildThemeVariables, camelToKebab };
+//# sourceMappingURL=utils.js.map

package/dist/components/ThemeInjector/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/ThemeInjector/utils.ts"],"sourcesContent":["/**\n * Converts a camelCase string into kebab-case.\n */\nexport const camelToKebab = (str: string) => {\n  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n};\n\n/**\n * Builds CSS variables by traversing the theme object. Variable names are built by taken the path to the value, and joining it with '-' characters.\n * @param themeObj The theme object to convert to CSS variables.\n * @param prefix The current prefix.\n * @returns A record, mapping from variable name to value.\n */\nexport const buildThemeVariables = (themeObj: Object, prefix: string = '') => {\n  return Object.entries(themeObj).reduce((acc, [key, value]): any => {\n    const kebabKey = camelToKebab(key);\n    const varPrefix = prefix === '' ? '' : `${prefix}-`;\n\n    if (typeof value === 'object') {\n      return { ...acc, ...buildThemeVariables(value, `${varPrefix}${kebabKey}`) };\n    }\n\n    return {\n      ...acc,\n      [`--${varPrefix}${kebabKey}`]: value,\n    };\n  }, {});\n};\n"],"names":[],"mappings":"AAAA;;AAEG;AACU,MAAA,YAAY,GAAG,CAAC,GAAW,KAAI;IAC1C,OAAO,GAAG,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE;AACjE;AAEA;;;;;AAKG;AACU,MAAA,mBAAmB,GAAG,CAAC,QAAgB,EAAE,MAAA,GAAiB,EAAE,KAAI;AAC3E,IAAA,OAAO,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,KAAS;AAChE,QAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC;AAClC,QAAA,MAAM,SAAS,GAAG,MAAM,KAAK,EAAE,GAAG,EAAE,GAAG,CAAG,EAAA,MAAM,GAAG;AAEnD,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,YAAA,OAAO,EAAE,GAAG,GAAG,EAAE,GAAG,mBAAmB,CAAC,KAAK,EAAE,CAAA,EAAG,SAAS,CAAG,EAAA,QAAQ,CAAE,CAAA,CAAC,EAAE;AAC5E;QAED,OAAO;AACL,YAAA,GAAG,GAAG;AACN,YAAA,CAAC,KAAK,SAAS,CAAA,EAAG,QAAQ,CAAE,CAAA,GAAG,KAAK;SACrC;KACF,EAAE,EAAE,CAAC;AACR;;;;"}

package/dist/components/index.d.ts

@@ -63,3 +63,4 @@ export { ViewsContainer } from './ViewsContainer';
 export { WeightInput } from './WeightInput';
 export { Indicator } from './Indicator';
 export { SelectDropdown } from './SelectDropdown';
+export { ThemeInjector } from './ThemeInjector';

package/dist/index.cjs

@@ -76,6 +76,7 @@ var ViewsContainer = require('./components/ViewsContainer/ViewsContainer.cjs');
 var index$5 = require('./components/WeightInput/index.cjs');
 var Indicator = require('./components/Indicator/Indicator.cjs');
 var index$6 = require('./components/SelectDropdown/index.cjs');
+var ThemeInjector = require('./components/ThemeInjector/ThemeInjector.cjs');
 var useClickOutside = require('./hooks/useClickOutside.cjs');
 var useDebounce = require('./hooks/useDebounce.cjs');
 var useDropdown = require('./hooks/useDropdown.cjs');
@@ -222,6 +223,7 @@ exports.ViewsContainer = ViewsContainer.ViewsContainer;
 exports.WeightInput = index$5.WeightInput;
 exports.Indicator = Indicator.Indicator;
 exports.SelectDropdown = index$6.SelectDropdown;
+exports.ThemeInjector = ThemeInjector.ThemeInjector;
 exports.useClickOutside = useClickOutside.useClickOutside;
 exports.useDebounce = useDebounce.useDebounce;
 exports.useDropdown = useDropdown.useDropdown;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -74,6 +74,7 @@ export { ViewsContainer } from './components/ViewsContainer/ViewsContainer.js';
 export { WeightInput } from './components/WeightInput/index.js';
 export { Indicator } from './components/Indicator/Indicator.js';
 export { SelectDropdown } from './components/SelectDropdown/index.js';
+export { ThemeInjector } from './components/ThemeInjector/ThemeInjector.js';
 export { useClickOutside } from './hooks/useClickOutside.js';
 export { useDebounce } from './hooks/useDebounce.js';
 export { useDropdown } from './hooks/useDropdown.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "9.6.5",
+  "version": "9.7.1",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",
@@ -77,6 +77,7 @@
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "auto-changelog": "^2.4.0",
+    "cssnano": "^7.0.6",
     "eslint": "^8.44.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
@@ -89,6 +90,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.8.0",
     "framer-motion": "^6.5.1",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "~29.0.3",
     "jest-axe": "~6.0.0",
     "jest-cli": "~29.0.3",
@@ -96,6 +98,8 @@
     "jest-styled-components": "~7.1.1",
     "lodash.throttle": "^4.1.1",
     "playroom": "^0.39.1",
+    "postcss": "^8.5.3",
+    "postcss-modules": "^6.0.1",
     "prettier": "^3.0.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",