@scaleflex/ui-tw 0.0.1

package/theme/theme-provider/theme-provider.context.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import type { ThemeProviderProps } from './theme-provider.props';
+declare const ThemeProvider: FC<ThemeProviderProps>;
+export default ThemeProvider;

package/theme/theme-provider/theme-provider.context.js

@@ -0,0 +1,48 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import merge from 'lodash.merge';
+import React, { useMemo } from 'react';
+import { ThemeProvider as SCThemeProvider } from 'styled-components';
+import { applyPolymorphicFunctionProp } from '../../utils/functions';
+import { BorderRadiusSize } from '../../utils/types/shape';
+import { CommonStyles, Typography } from '../roots';
+import createBreakpoints from '../roots/breakpoints/entity/create-breakpoints';
+import { defaultPalette } from '../roots/palette';
+import { defaultShadows } from '../roots/shadows';
+import { getDefaultTypography } from '../roots/typography';
+var defaultShape = {
+  borderRadius: _defineProperty(_defineProperty(_defineProperty({}, BorderRadiusSize.Sm, '2px'), BorderRadiusSize.Md, '4px'), BorderRadiusSize.Lg, '8px')
+};
+var ThemeProvider = function ThemeProvider(_ref) {
+  var children = _ref.children,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? {} : _ref$theme;
+  var _theme$palette = theme.palette,
+    paletteOverride = _theme$palette === void 0 ? {} : _theme$palette,
+    _theme$breakpoints = theme.breakpoints,
+    breakpointsOverride = _theme$breakpoints === void 0 ? {} : _theme$breakpoints,
+    _theme$typography = theme.typography,
+    typographyOverride = _theme$typography === void 0 ? {} : _theme$typography,
+    _theme$shape = theme.shape,
+    shapeOverride = _theme$shape === void 0 ? {} : _theme$shape,
+    _theme$shadows = theme.shadows,
+    shadowsOverride = _theme$shadows === void 0 ? {} : _theme$shadows;
+  var finalTheme = useMemo(function () {
+    var palette = _objectSpread(_objectSpread({}, defaultPalette), paletteOverride);
+    var breakpoints = createBreakpoints(breakpointsOverride);
+    var shadows = _objectSpread(_objectSpread({}, defaultShadows), shadowsOverride);
+    return {
+      palette: palette,
+      breakpoints: breakpoints,
+      typography: getDefaultTypography(typographyOverride),
+      shape: _objectSpread({}, merge(_objectSpread({}, defaultShape), _objectSpread({}, shapeOverride))),
+      shadows: shadows
+    };
+  }, [JSON.stringify(theme)]);
+  var renderedChildren = applyPolymorphicFunctionProp(children, finalTheme);
+  return /*#__PURE__*/React.createElement(SCThemeProvider, {
+    theme: finalTheme
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, renderedChildren, /*#__PURE__*/React.createElement(CommonStyles, null), /*#__PURE__*/React.createElement(Typography, null)));
+};
+export default ThemeProvider;

package/theme/theme-provider/theme-provider.props.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import type { Theme, ThemeOverride } from '../entity';
+export interface ThemeProviderProps {
+    children: ((theme: Theme) => ReactNode) | ReactNode;
+    theme?: ThemeOverride;
+}

package/theme/theme-provider/theme-provider.props.js

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

package/theme/theme.css

@@ -0,0 +1,100 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+:root {
+  --background: oklch(1 0 0); /* Background stateless #ffffff */
+  --foreground: oklch(0.3687 0.0313 264.55); /* Text Primary #37414B */
+  --card: oklch(1 0 0); /* Background hover F9FBFC */
+  --card-foreground: oklch(0.3687 0.0313 264.55); /* Text Primary #37414B */
+  --popover: oklch(1 0 0); /* Background stateless #ffffff */
+  --popover-foreground: oklch(0.3687 0.0313 264.55); /* Text Primary #37414B */
+  --primary: oklch(0.6662 0.2007 280.88); /* Accent Stateless #6879EB */
+  --primary-foreground: oklch(1 0 0); /* Text Button Primary #ffffff */
+  --secondary: oklch(98.16% 0.002 247.84); /* Background active #F8F9FA */
+  --secondary-foreground: oklch(53.03% 0.039 249.89);
+  --muted: oklch(0.95 0.01 285); /* Background active #F3F7FA */
+  --muted-foreground: oklch(68.54% 0.033 249.82);
+  --accent: oklch(0.9641 0.0065 231.29); /* Background active #F3F7FA */
+  --accent-foreground: oklch(0.3687 0.0313 264.55); /* Text Primary #37414B */
+  --success: oklch(0.7487 0.1799 154.83); /* #26C17A */
+  --success-foreground: oklch(0.4238 0.1235 165.45); /* #006D3B */
+  --destructive: oklch(0.6291 0.2616 26.16); /* #FB2C36 */
+  --destructive-foreground: oklch(0.3963 0.1994 27.40); /* #82181A */
+  --info: oklch(0.6632 0.1896 241.34); /* #0090E4 */
+  --info-foreground: oklch(0.3902 0.1177 248.61); /* #024A71 */
+  --warning: oklch(0.7963 0.2226 83.96); /* #F6A609 */
+  --warning-foreground: oklch(0.4429 0.1617 63.95); /* #733E0A */
+  --border: oklch(92.86% 0.009 247.92); /* Borders Secondary #E3E8ED */
+  --input: oklch(0.8625 0.0257 248.73); /* Border Primary Stateless #CCD6DE */
+  --ring: oklch(0.6662 0.2007 280.88); /* Borders Base #6879EB */
+  --shadow: oklch(26.18% 0.024 256.43 / 0.1);
+  --chart-1: oklch(0.646 0.222 41.116);   /* Chart 1 - Orange/Yellow Base - approx #DA9834 */
+  --chart-2: oklch(0.6 0.118 184.704);    /* Chart 2 - Teal/Greenish-Blue Base - approx #4BA3AD */
+  --chart-3: oklch(0.398 0.07 227.392);   /* Chart 3 - Muted Blue Base - approx #435C9A */
+  --chart-4: oklch(0.828 0.189 84.429);   /* Chart 4 - Bright Lime-Yellow Base - approx #E2E14D */
+  --chart-5: oklch(0.769 0.188 70.08);    /* Chart 5 - Golden-Yellow Base - approx #E3C442 */
+  --sidebar: oklch(1 0 0); /* Background stateless #ffffff */
+  --sidebar-foreground: oklch(0.3687 0.0313 264.55); /* Text Primary #37414B */
+  --sidebar-primary: oklch(0.6662 0.2007 280.88); /* Accent Stateless #6879EB */
+  --sidebar-primary-foreground: oklch(1 0 0); /* Text Button Primary #ffffff */
+  --sidebar-accent: oklch(0.9641 0.0065 231.29); /* Background active #F3F7FA */
+  --sidebar-accent-foreground: oklch(0.3687 0.0313 264.55); /* Text Primary #37414B */
+  --sidebar-border: oklch(0.9103 0.0177 246.73); /* Borders Secondary #DFE7ED */
+  --sidebar-ring: oklch(0.6662 0.2007 280.88); /* Borders Base #6879EB */
+  --panel: oklch(0.5202 0.2024 278.91); /* Background Accent Active #4958BC */
+  --panel-foreground: oklch(1 0 0); /* Text Button Primary #ffffff */
+  --panel-primary: oklch(0.5202 0.2024 278.91); /* Background Accent Active #4958BC */
+  --panel-primary-foreground: oklch(1 0 0); /* Text Button Primary #ffffff */
+  --panel-input: oklch(1 0 0); /* Background stateless #ffffff */
+  --panel-ring: oklch(0.6662 0.2007 280.88); /* Borders Base #6879EB */
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-shadow: var(--shadow);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  --color-panel: var(--panel);
+  --color-panel-foreground: var(--panel-foreground);
+  --color-panel-primary: var(--panel-primary);
+  --color-panel-primary-foreground: var(--panel-primary-foreground);
+  --color-panel-input: var(--panel-input);
+  --color-panel-ring: var(--panel-ring);
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "esnext",
+    "moduleResolution": "node",
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "jsx": "react",
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "allowSyntheticDefaultImports": true
+  }
+}

package/utils/README.md

@@ -0,0 +1,11 @@
+# @scaleflex/ui-tw/utils
+
+Utility functions and types for Scaleflex UI.
+
+---
+
+## Usage
+
+This package provides two parts: `functions` and `types`. The latter is intended to be used with TypeScript only, the former contains different utilities that are used under the hood of most of our packages.
+
+Using those consider their predisposition for internal usage in the Scaleflex UI ecosystem.

package/utils/functions/apply-display-names.d.ts

@@ -0,0 +1,6 @@
+import { IStyledComponent } from 'styled-components';
+/**
+ * If you are using a namespace for your styled components, this can come in handy giving each
+ * styled component in this namespace a displayName which gives better debugging experience
+ */
+export declare function applyDisplayNames<S extends Record<string, IStyledComponent<any, any>>>(styledObject: S): S;

package/utils/functions/apply-display-names.js

@@ -0,0 +1,12 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * If you are using a namespace for your styled components, this can come in handy giving each
+ * styled component in this namespace a displayName which gives better debugging experience
+ */
+export function applyDisplayNames(styledObject) {
+  return Object.keys(styledObject).reduce(function (newStyledObject, styledComponentName) {
+    var styledComponent = styledObject[styledComponentName];
+    styledComponent.displayName = "".concat(styledComponentName);
+    return Object.assign(newStyledObject, _defineProperty({}, styledComponentName, styledComponent));
+  }, {});
+}

package/utils/functions/apply-polymorphic-function-prop.d.ts

@@ -0,0 +1,6 @@
+/**
+ * If your prop can be either a function or a plain value, this function handles
+ * its usage for you – just provide the reference for a 'maybe function' and the arguments
+ * to call it with
+ */
+export declare function applyPolymorphicFunctionProp<T, F extends (...args: any[]) => T>(prop: F | T | undefined, ...args: Parameters<F>): Exclude<typeof prop, F>;

package/utils/functions/apply-polymorphic-function-prop.js

@@ -0,0 +1,11 @@
+/**
+ * If your prop can be either a function or a plain value, this function handles
+ * its usage for you – just provide the reference for a 'maybe function' and the arguments
+ * to call it with
+ */
+export function applyPolymorphicFunctionProp(prop) {
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+  return typeof prop === 'function' ? prop.apply(void 0, args) : prop;
+}

package/utils/functions/color-picker/color-converters.d.ts

@@ -0,0 +1,11 @@
+export declare const rgbStringToArray: (rgbColorString: string) => number[];
+export declare const hexToRgb: (hexColor: string) => number[];
+export declare const rgbToHex: (...rgbColor: any) => string;
+export declare const hslToHex: (h: number, s: number, l: number) => string;
+export declare const rgbToHsl: (...rgbColor: any) => number[];
+export declare const colorToHsl: (color: string) => number[];
+export declare const colorToRgb: (color: string) => number[];
+export declare const colorToHex: (color: string) => string;
+export declare const hsvToHsl: (h: number, s: number, v: number) => number[];
+export declare const hslToHsv: (h: number, s: number, l: number) => Array<number>;
+export declare const validateHex: (color: string) => boolean;

package/utils/functions/color-picker/color-converters.js

@@ -0,0 +1,159 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+export var rgbStringToArray = function rgbStringToArray(rgbColorString) {
+  return rgbColorString.replaceAll(/[^\d,]/gi, '').split(',').map(function (n) {
+    return +n;
+  });
+};
+export var hexToRgb = function hexToRgb(hexColor) {
+  // if (!hexColor) return { r: 0, g: 0, b: 0 };
+  if (!hexColor) return [0, 0, 0];
+  return [Number.parseInt(hexColor.slice(1, 3), 16), Number.parseInt(hexColor.slice(3, 5), 16), Number.parseInt(hexColor.slice(5, 7), 16)];
+};
+var rgbChannelToHex = function rgbChannelToHex(channel) {
+  return channel.toString(16).padStart(2, '0');
+};
+export var rgbToHex = function rgbToHex() {
+  for (var _len = arguments.length, rgbColor = new Array(_len), _key = 0; _key < _len; _key++) {
+    rgbColor[_key] = arguments[_key];
+  }
+  return "#".concat(rgbColor.map(rgbChannelToHex).join(''));
+};
+export var hslToHex = function hslToHex(h, s, l) {
+  var dividedL = l / 100;
+  var a = s * Math.min(dividedL, 1 - dividedL) / 100;
+  var f = function f(n) {
+    var k = (n + h / 30) % 12;
+    var color = dividedL - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return rgbChannelToHex(Math.round(255 * color));
+  };
+  return "#".concat(f(0)).concat(f(8)).concat(f(4));
+};
+export var rgbToHsl = function rgbToHsl() {
+  for (var _len2 = arguments.length, rgbColor = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    rgbColor[_key2] = arguments[_key2];
+  }
+  var r = rgbColor[0],
+    g = rgbColor[1],
+    b = rgbColor[2];
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  var min = Math.min(r, g, b);
+  var max = Math.max(r, g, b);
+  var h;
+  var s;
+  var l = (max + min) / 2;
+  if (max === min) {
+    h = 0;
+    s = 0;
+  } else {
+    var diff = max - min;
+    s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / diff + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / diff + 2;
+        break;
+      case b:
+        h = (r - g) / diff + 4;
+        break;
+      default:
+        h = 0;
+    }
+    h /= 6;
+  }
+
+  // * 360 for having the hue in degrees
+  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+};
+export var colorToHsl = function colorToHsl(color) {
+  if (color.startsWith('#')) {
+    var hex = color;
+    if (color.length === 4) {
+      hex = "#".concat(color[1]).concat(color[1]).concat(color[2]).concat(color[2]).concat(color[3]).concat(color[3]);
+    }
+    return rgbToHsl.apply(void 0, _toConsumableArray(hexToRgb(hex)));
+  }
+  if (color.startsWith('rgb')) {
+    var colorInRgb = rgbStringToArray(color);
+    return rgbToHsl.apply(void 0, _toConsumableArray(colorInRgb));
+  }
+
+  // if the color is in text and no one from previous then return the default color which is black
+  if (typeof color === 'string') {
+    return [0, 0, 0];
+  }
+  return color;
+};
+export var colorToRgb = function colorToRgb(color) {
+  // we are not handling (hsl/color name) here cause we are accepting only HEX and RGB colors as default colors from user.
+  if (color.startsWith('#')) {
+    return hexToRgb(color);
+  }
+  if (color.startsWith('rgb')) {
+    return rgbStringToArray(color);
+  }
+  if (typeof color === 'string') {
+    return [0, 0, 0];
+  }
+  return color;
+};
+export var colorToHex = function colorToHex(color) {
+  if (color.startsWith('#')) {
+    if (color.length === 7) {
+      return color;
+    }
+    return "#".concat(color[0]).concat(color[0]).concat(color[1]).concat(color[1]).concat(color[2]).concat(color[2]);
+  }
+  if (color.startsWith('rgb')) {
+    return rgbToHex.apply(void 0, _toConsumableArray(rgbStringToArray(color)));
+  }
+  if (typeof color === 'string') {
+    return '#000000';
+  }
+  return color;
+};
+var checkIsBlack = function checkIsBlack(s, l) {
+  return l === 0 && (s === 0 || s === 1);
+};
+var checkIsWhite = function checkIsWhite(s, l) {
+  return s === 0 && l === 1;
+};
+
+// both hsv and hsl values are in [0, 1] except h is in [0, 360]
+export var hsvToHsl = function hsvToHsl(h, s, v) {
+  var newS = s;
+  var l = (2 - s) * v / 2;
+  if (l !== 0) {
+    if (l === 1) {
+      newS = 0;
+    } else if (l < 0.5) {
+      newS = newS * v / (l * 2);
+    } else {
+      newS = newS * v / (2 - l * 2);
+    }
+  }
+  var isBlack = checkIsBlack(newS, l);
+  return [isBlack || checkIsWhite(newS, l) ? 0 : h, isBlack ? 0 : Math.round(newS * 100), Math.round(l * 100)];
+};
+
+// both hsv and hsl values are in [0, 1] except h is in [0, 360]
+export var hslToHsv = function hslToHsv(h, s, l) {
+  var newS = s;
+  var newL = l * 2;
+  newS *= newL <= 1 ? newL : 2 - newL;
+  var v = (newL + newS) / 2;
+  newS = 2 * newS / (newL + newS);
+
+  // return [h, newS, v];
+  var isBlack = checkIsBlack(newS, l);
+  return [isBlack || checkIsWhite(newS, l) ? 0 : h, isBlack ? 0 : Math.round(newS * 100), Math.round(v * 100)];
+};
+
+// TODO: validating 3 color code for Hex
+// /^#([\da-f]{3}){1,2}$/i.test(color)colorToHex
+export var validateHex = function validateHex(color) {
+  return /^#[\da-f]{6}$/i.test(color);
+};

package/utils/functions/color-picker/map-number.d.ts

@@ -0,0 +1 @@
+export declare function mapNumber(number: number, oldMin: number, oldMax: number, newMin: number, newMax: number): number;

package/utils/functions/color-picker/map-number.js

@@ -0,0 +1,3 @@
+export function mapNumber(number, oldMin, oldMax, newMin, newMax) {
+  return (number - oldMin) * (newMax - newMin) / (oldMax - oldMin) + newMin;
+}

package/utils/functions/color-picker/restrict-number.d.ts

@@ -0,0 +1 @@
+export declare function restrictNumber(number: number, min: number | undefined, max: number): number;

package/utils/functions/color-picker/restrict-number.js

@@ -0,0 +1,8 @@
+export function restrictNumber(number) {
+  var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var max = arguments.length > 2 ? arguments[2] : undefined;
+  // we are not assigning default value for it as if max was null it will override the default value.
+  var currentMax = max || 1000000;
+  var convertedNumber = +number;
+  return Math.min(Math.max(min, convertedNumber), currentMax);
+}

package/utils/functions/convert-to-string.d.ts

@@ -0,0 +1 @@
+export declare function convertToString(text: string): string;

package/utils/functions/convert-to-string.js

@@ -0,0 +1,3 @@
+export function convertToString(text) {
+  return String(text);
+}

package/utils/functions/escape-regexp.d.ts

@@ -0,0 +1 @@
+export declare function escapeRegExp(text: string): string;

package/utils/functions/escape-regexp.js

@@ -0,0 +1,3 @@
+export function escapeRegExp(text) {
+  return text.replace(/[\s#$()*+,.?[\\\]^{|}-]/g, '\\$&');
+}

package/utils/functions/generate-class-names.d.ts

@@ -0,0 +1 @@
+export declare function generateClassNames(componentName: string, subClassNames?: string | string[]): string;

package/utils/functions/generate-class-names.js

@@ -0,0 +1,22 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+export function generateClassNames(componentName, subClassNames) {
+  var generateClassName = function generateClassName(subClassName) {
+    return "Sfx".concat(componentName).concat(subClassName ? "-".concat(subClassName) : '');
+  };
+  var classNameArray = [];
+  if (subClassNames) {
+    if (Array.isArray(subClassNames)) {
+      classNameArray.push.apply(classNameArray, _toConsumableArray(subClassNames.filter(function (subClassName) {
+        return typeof subClassName === 'string';
+      }).map(function (subClassName) {
+        return generateClassName(subClassName);
+      })));
+    } else if (typeof subClassNames === 'string') {
+      classNameArray.push(generateClassName(subClassNames));
+    }
+  }
+  if (classNameArray.length === 0) {
+    classNameArray.push(generateClassName());
+  }
+  return classNameArray.join(' ');
+}

package/utils/functions/get-elem-document-coords.d.ts

@@ -0,0 +1,6 @@
+export declare function getElemDocumentCoords(elem: Element | undefined): {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+} | null;

package/utils/functions/get-elem-document-coords.js

@@ -0,0 +1,21 @@
+export function getElemDocumentCoords(elem) {
+  if (!elem) {
+    return null;
+  }
+  var box = elem.getBoundingClientRect();
+  var _document = document,
+    body = _document.body;
+  var docEl = document.documentElement;
+  var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
+  var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+  var clientTop = docEl.clientTop || body.clientTop || 0;
+  var clientLeft = docEl.clientLeft || body.clientLeft || 0;
+  var top = box.top + scrollTop - clientTop;
+  var left = box.left + scrollLeft - clientLeft;
+  return {
+    top: Math.round(top),
+    left: Math.round(left),
+    width: box.width,
+    height: box.height
+  };
+}

package/utils/functions/ignore-event.d.ts

@@ -0,0 +1 @@
+export declare const ignoreEvent: (event: any) => void;

package/utils/functions/ignore-event.js

@@ -0,0 +1,9 @@
+export var ignoreEvent = function ignoreEvent(event) {
+  var tagName = event.target.tagName;
+  if (tagName === 'INPUT' || tagName === 'TEXTAREA') {
+    event.stopPropagation();
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+};

package/utils/functions/index.d.ts

@@ -0,0 +1,14 @@
+export * from './generate-class-names';
+export * from './object-keys';
+export * from './object-values';
+export * from './apply-polymorphic-function-prop';
+export * from './apply-display-names';
+export * from './use-fork-ref';
+export * from './color-picker/restrict-number';
+export * from './color-picker/map-number';
+export * from './color-picker/color-converters';
+export * from './get-elem-document-coords';
+export * from './slider/utils';
+export * from './scrollbar';
+export * from './escape-regexp';
+export * from './ignore-event';

package/utils/functions/index.js

@@ -0,0 +1,15 @@
+export * from './generate-class-names';
+// export * from './intrinsic-component';
+export * from './object-keys';
+export * from './object-values';
+export * from './apply-polymorphic-function-prop';
+export * from './apply-display-names';
+export * from './use-fork-ref';
+export * from './color-picker/restrict-number';
+export * from './color-picker/map-number';
+export * from './color-picker/color-converters';
+export * from './get-elem-document-coords';
+export * from './slider/utils';
+export * from './scrollbar';
+export * from './escape-regexp';
+export * from './ignore-event';

package/utils/functions/intrinsic-component.js

@@ -0,0 +1,28 @@
+// DEPRECATED after React upgrade to v19
+// import {
+//   forwardRef,
+//   ForwardRefExoticComponent,
+//   ForwardRefRenderFunction,
+//   MutableRefObject,
+//   PropsWithoutRef,
+//   ReactElement,
+//   RefAttributes,
+// } from 'react';
+
+// interface RenderFunction<P, E>
+//   extends Pick<ForwardRefRenderFunction<E, P>, 'defaultProps' | 'displayName' | 'propTypes'> {
+//   (props: P, ref: ((instance: E | null) => void) | MutableRefObject<E | null> | null): ReactElement | null;
+// }
+
+// /**
+//  * Wrapper around React's `forwardRef` function, which adds a `displayName` to each component
+//  * created using it
+//  */
+// export function intrinsicComponent<P = Record<string, unknown>, E = HTMLElement>(
+//   render: RenderFunction<P, E>,
+//   displayName?: string
+// ): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<E>> {
+//   const component = forwardRef<E, P>(render);
+//   component.displayName = displayName || render.name;
+//   return component;
+// }

package/utils/functions/object-keys.d.ts

@@ -0,0 +1,6 @@
+type Keys<O> = (keyof O)[];
+/**
+ * Type-safe Object.keys
+ */
+export declare function objectKeys<O extends object>(object: O): Keys<O>;
+export {};

package/utils/functions/object-keys.js

@@ -0,0 +1,6 @@
+/**
+ * Type-safe Object.keys
+ */
+export function objectKeys(object) {
+  return Object.keys(object);
+}

package/utils/functions/object-values.d.ts

@@ -0,0 +1,7 @@
+import type { Values } from '../types';
+/**
+ * Type-safe Object.values
+ */
+export declare function objectValues<O extends {
+    [s: string]: Values<O>;
+}>(object: O): Values<O>[];

package/utils/functions/object-values.js

@@ -0,0 +1,6 @@
+/**
+ * Type-safe Object.values
+ */
+export function objectValues(object) {
+  return Object.values(object);
+}

package/utils/functions/on-click-by-mouse-down.d.ts

@@ -0,0 +1,2 @@
+import { type MouseEvent } from 'react';
+export declare const onClickByMouseDown: (event: MouseEvent, callback: (event: MouseEvent) => void) => void;

package/utils/functions/on-click-by-mouse-down.js

@@ -0,0 +1,9 @@
+export var onClickByMouseDown = function onClickByMouseDown(event, callback) {
+  event.preventDefault();
+  if (event.button !== 0) {
+    return;
+  }
+  if (callback) {
+    callback(event);
+  }
+};

package/utils/functions/scrollbar.d.ts

@@ -0,0 +1,2 @@
+import type { WithTheme } from '../../theme/entity';
+export declare const scrollBar: ({ theme: { palette } }: WithTheme) => import("styled-components").RuleSet<object>;

package/utils/functions/scrollbar.js

@@ -0,0 +1,6 @@
+import { css } from 'styled-components';
+import { Color as PaletteColor } from '../types/palette';
+export var scrollBar = function scrollBar(_ref) {
+  var palette = _ref.theme.palette;
+  return css(["&::-webkit-scrollbar{width:12px;}&::-webkit-scrollbar-thumb{background:", ";border:4px solid ", ";border-radius:99px;height:92px;padding:4px 6px;}"], palette[PaletteColor.BorderPrimaryStateless], palette[PaletteColor.ActiveSecondary]);
+};