react95-native-rabbl 0.1.1

package/src/styles/themes/seawater.ts

@@ -0,0 +1,36 @@
+/* "Seawater" by tPenguinLTG
+ * https://www.deviantart.com/tpenguinltg/art/Seawater-736002425
+ */
+
+export default {
+  name: 'seawater',
+  anchor: 'rgb(0, 0, 128)',
+  anchorVisited: 'rgb(0, 0, 128)',
+  borderDark: 'rgb(167, 194, 224)',
+  borderDarkest: 'rgb(167, 194, 224)',
+  borderLight: 'rgb(167, 194, 224)',
+  borderLightest: 'rgb(167, 194, 224)',
+  canvas: 'rgb(255, 255, 255)',
+  canvasText: 'rgb(0, 0, 0)',
+  canvasTextDisabled: 'rgb(167, 194, 224)',
+  canvasTextDisabledShadow: 'rgb(167, 194, 224)',
+  canvasTextInvert: 'rgb(255, 255, 255)',
+  checkmark: 'rgb(0, 0, 0)',
+  checkmarkDisabled: 'rgb(47, 88, 134)',
+  flatDark: 'rgb(167, 194, 224)',
+  flatLight: 'rgb(167, 194, 224)',
+  focusSecondary: 'rgb(167, 194, 224)',
+  headerBackground: 'rgb(0, 0, 128)',
+  headerNotActiveBackground: 'rgb(0, 85, 170)',
+  headerNotActiveText: 'rgb(192, 192, 192)',
+  headerText: 'rgb(255, 255, 255)',
+  hoverBackground: 'rgb(0, 128, 128)',
+  material: 'rgb(79, 133, 193)',
+  materialDark: 'rgb(0, 85, 170)',
+  materialText: 'rgb(0, 0, 0)',
+  materialTextDisabled: 'rgb(167, 194, 224)',
+  materialTextDisabledShadow: 'rgb(167, 194, 224)',
+  materialTextInvert: 'rgb(255, 255, 255)',
+  progress: 'rgb(0, 128, 128)',
+  tooltip: 'rgb(255, 255, 225)',
+};

package/src/styles/themes/slate.ts

@@ -0,0 +1,33 @@
+export default {
+  name: 'slate',
+
+  anchor: '#1034a6',
+  anchorVisited: '#440381',
+  borderDark: '#446b7c',
+  borderDarkest: '#000814',
+  borderLight: '#adc8da',
+  borderLightest: '#c3d9e9',
+  canvas: '#f2ffff',
+  canvasText: '#00010f',
+  canvasTextDisabled: '#446b7c',
+  canvasTextDisabledShadow: '#c3d9e9',
+  canvasTextInvert: '#f2ffff',
+  checkmark: '#00010f',
+  checkmarkDisabled: '#446b7c',
+  flatDark: '#9e9e9e',
+  flatLight: '#d8d8d8',
+  focusSecondary: '#fefe03',
+  headerBackground: '#448199',
+  headerNotActiveBackground: '#807f80',
+  headerNotActiveText: '#c2c1c2',
+  headerText: '#f2ffff',
+  hoverBackground: '#448199',
+  material: '#97b9cb',
+  materialDark: '#9a9e9c',
+  materialText: '#00010f',
+  materialTextDisabled: '#446b7c',
+  materialTextDisabledShadow: '#c3d9e9',
+  materialTextInvert: '#f2ffff',
+  progress: '#448199',
+  tooltip: '#fefbcc'
+};

package/src/styles/themes/solarizedDark.ts

@@ -0,0 +1,36 @@
+/* "Solarized Dark" by tPenguinLTG
+ * https://www.deviantart.com/tpenguinltg/art/Solarized-Dark-592122068
+ */
+
+export default {
+  name: 'solarizedDark',
+  anchor: 'rgb(38, 139, 210)',
+  anchorVisited: 'rgb(38, 139, 210)',
+  borderDark: 'rgb(0, 43, 54)',
+  borderDarkest: 'rgb(0, 43, 54)',
+  borderLight: 'rgb(0, 43, 54)',
+  borderLightest: 'rgb(0, 43, 54)',
+  canvas: 'rgb(0, 43, 54)',
+  canvasText: 'rgb(131, 148, 150)',
+  canvasTextDisabled: 'rgb(0, 43, 54)',
+  canvasTextDisabledShadow: 'rgb(0, 43, 54)',
+  canvasTextInvert: 'rgb(238, 232, 213)',
+  checkmark: 'rgb(131, 148, 150)',
+  checkmarkDisabled: 'rgb(88, 110, 117)',
+  flatDark: 'rgb(0, 43, 54)',
+  flatLight: 'rgb(0, 43, 54)',
+  focusSecondary: 'rgb(0, 43, 54)',
+  headerBackground: 'rgb(0, 43, 54)',
+  headerNotActiveBackground: 'rgb(7, 54, 66)',
+  headerNotActiveText: 'rgb(131, 148, 150)',
+  headerText: 'rgb(108, 113, 196)',
+  hoverBackground: 'rgb(211, 54, 130)',
+  material: 'rgb(7, 54, 66)',
+  materialDark: 'rgb(7, 54, 66)',
+  materialText: 'rgb(131, 148, 150)',
+  materialTextDisabled: 'rgb(0, 43, 54)',
+  materialTextDisabledShadow: 'rgb(0, 43, 54)',
+  materialTextInvert: 'rgb(238, 232, 213)',
+  progress: 'rgb(211, 54, 130)',
+  tooltip: 'rgb(253, 246, 227)',
+};

package/src/styles/themes/solarizedLight.ts

@@ -0,0 +1,36 @@
+/* "Solarized Light" by tPenguinLTG
+ * https://www.deviantart.com/tpenguinltg/art/Solarized-Light-592124935
+ */
+
+export default {
+  name: 'solarizedLight',
+  anchor: 'rgb(38, 139, 210)',
+  anchorVisited: 'rgb(38, 139, 210)',
+  borderDark: 'rgb(253, 246, 227)',
+  borderDarkest: 'rgb(253, 246, 227)',
+  borderLight: 'rgb(253, 246, 227)',
+  borderLightest: 'rgb(253, 246, 227)',
+  canvas: 'rgb(253, 246, 227)',
+  canvasText: 'rgb(101, 123, 131)',
+  canvasTextDisabled: 'rgb(253, 246, 227)',
+  canvasTextDisabledShadow: 'rgb(253, 246, 227)',
+  canvasTextInvert: 'rgb(238, 232, 213)',
+  checkmark: 'rgb(101, 123, 131)',
+  checkmarkDisabled: 'rgb(88, 110, 117)',
+  flatDark: 'rgb(253, 246, 227)',
+  flatLight: 'rgb(253, 246, 227)',
+  focusSecondary: 'rgb(253, 246, 227)',
+  headerBackground: 'rgb(253, 246, 227)',
+  headerNotActiveBackground: 'rgb(238, 232, 213)',
+  headerNotActiveText: 'rgb(101, 123, 131)',
+  headerText: 'rgb(108, 113, 196)',
+  hoverBackground: 'rgb(211, 54, 130)',
+  material: 'rgb(238, 232, 213)',
+  materialDark: 'rgb(238, 232, 213)',
+  materialText: 'rgb(101, 123, 131)',
+  materialTextDisabled: 'rgb(253, 246, 227)',
+  materialTextDisabledShadow: 'rgb(253, 246, 227)',
+  materialTextInvert: 'rgb(238, 232, 213)',
+  progress: 'rgb(211, 54, 130)',
+  tooltip: 'rgb(253, 246, 227)',
+};

package/src/styles/themes/spruce.ts

@@ -0,0 +1,33 @@
+export default {
+  name: 'spruce',
+
+  anchor: '#1034a6',
+  anchorVisited: '#440381',
+  borderDark: '#477b5e',
+  borderDarkest: '#001004',
+  borderLight: '#b0d2bb',
+  borderLightest: '#cdead2',
+  canvas: '#fcfff6',
+  canvasText: '#050608',
+  canvasTextDisabled: '#3d5367',
+  canvasTextDisabledShadow: '#cdead2',
+  canvasTextInvert: '#fcfff6',
+  checkmark: '#050608',
+  checkmarkDisabled: '#477b5e',
+  flatDark: '#9e9e9e',
+  flatLight: '#d8d8d8',
+  focusSecondary: '#fefe03',
+  headerBackground: '#3d9961',
+  headerNotActiveBackground: '#807f80',
+  headerNotActiveText: '#d4deda',
+  headerText: '#fcfff6',
+  hoverBackground: '#3d9961',
+  material: '#99c9a8',
+  materialDark: '#9a9e9c',
+  materialText: '#050608',
+  materialTextDisabled: '#3d5367',
+  materialTextDisabledShadow: '#cdead2',
+  materialTextInvert: '#fcfff6',
+  progress: '#3d9961',
+  tooltip: '#fefbcc'
+};

package/src/styles/themes/stormClouds.ts

@@ -0,0 +1,36 @@
+/* "Storm Clouds" by tPenguinLTG
+ * https://www.deviantart.com/tpenguinltg/art/Storm-Clouds-613198674
+ */
+
+export default {
+  name: 'stormClouds',
+  anchor: 'rgb(64, 64, 255)',
+  anchorVisited: 'rgb(64, 64, 255)',
+  borderDark: 'rgb(47, 52, 53)',
+  borderDarkest: 'rgb(0, 0, 0)',
+  borderLight: 'rgb(70, 80, 81)',
+  borderLightest: 'rgb(159, 171, 172)',
+  canvas: 'rgb(47, 52, 53)',
+  canvasText: 'rgb(255, 255, 255)',
+  canvasTextDisabled: 'rgb(47, 52, 53)',
+  canvasTextDisabledShadow: 'rgb(159, 171, 172)',
+  canvasTextInvert: 'rgb(255, 255, 255)',
+  checkmark: 'rgb(255, 255, 255)',
+  checkmarkDisabled: 'rgb(128, 128, 128)',
+  flatDark: 'rgb(47, 52, 53)',
+  flatLight: 'rgb(70, 80, 81)',
+  focusSecondary: 'rgb(159, 171, 172)',
+  headerBackground: 'rgb(0, 0, 168)',
+  headerNotActiveBackground: 'rgb(47, 52, 53)',
+  headerNotActiveText: 'rgb(192, 199, 200)',
+  headerText: 'rgb(255, 255, 255)',
+  hoverBackground: 'rgb(128, 128, 0)',
+  material: 'rgb(70, 80, 81)',
+  materialDark: 'rgb(47, 52, 53)',
+  materialText: 'rgb(255, 255, 255)',
+  materialTextDisabled: 'rgb(47, 52, 53)',
+  materialTextDisabledShadow: 'rgb(159, 171, 172)',
+  materialTextInvert: 'rgb(255, 255, 255)',
+  progress: 'rgb(128, 128, 0)',
+  tooltip: 'rgb(48, 64, 80)',
+};

package/src/styles/themes/theSixtiesUSA.ts

@@ -0,0 +1,33 @@
+export default {
+  name: 'theSixtiesUSA',
+
+  anchor: '#1034a6',
+  anchorVisited: '#440381',
+  borderDark: '#6c1f71',
+  borderDarkest: '#010001',
+  borderLight: '#d982de',
+  borderLightest: '#df9be7',
+  canvas: '#ffffff',
+  canvasText: '#010001',
+  canvasTextDisabled: '#6c1f71',
+  canvasTextDisabledShadow: '#df9be7',
+  canvasTextInvert: '#010001',
+  checkmark: '#010001',
+  checkmarkDisabled: '#6c1f71',
+  flatDark: '#d067d7',
+  flatLight: '#df9be7',
+  focusSecondary: '#fefe03',
+  headerBackground: '#050080',
+  headerNotActiveBackground: '#a130a9',
+  headerNotActiveText: '#df9be7',
+  headerText: '#ffffff',
+  hoverBackground: '#0f0',
+  material: '#d067d7',
+  materialDark: '#9a9e9c',
+  materialText: '#010001',
+  materialTextDisabled: '#6c1f71',
+  materialTextDisabledShadow: '#df9be7',
+  materialTextInvert: '#010001',
+  progress: '#0f0',
+  tooltip: '#fefbcc'
+};

package/src/styles/themes/tokyoDark.ts

@@ -0,0 +1,33 @@
+export default {
+  name: 'tokyoDark',
+
+  anchor: '#1034a6',
+  anchorVisited: '#440381',
+  borderDark: '#1f2223',
+  borderDarkest: '#070809',
+  borderLight: '#5e696a',
+  borderLightest: '#93a0a1',
+  canvas: '#2f3435',
+  canvasText: '#F4F4ED',
+  canvasTextDisabled: '#1f2223',
+  canvasTextDisabledShadow: '#93a0a1',
+  canvasTextInvert: '#ffffff',
+  checkmark: '#F4F4ED',
+  checkmarkDisabled: '#1f2223',
+  flatDark: '#9e9e9e',
+  flatLight: '#d8d8d8',
+  focusSecondary: '#20FC8F',
+  headerBackground: '#1f2223',
+  headerNotActiveBackground: '#5e696a',
+  headerNotActiveText: '#F4F4ED',
+  headerText: '#F4F4ED',
+  hoverBackground: '#F61067',
+  material: '#465051',
+  materialDark: '#1f2223',
+  materialText: '#F4F4ED',
+  materialTextDisabled: '#1f2223',
+  materialTextDisabledShadow: '#93a0a1',
+  materialTextInvert: '#ffffff',
+  progress: '#F61067',
+  tooltip: '#fefbcc'
+};

package/src/styles/themes/tooSexy.ts

@@ -0,0 +1,33 @@
+export default {
+  name: 'tooSexy',
+
+  anchor: '#1034a6',
+  anchorVisited: '#440381',
+  borderDark: '#5a0302',
+  borderDarkest: '#000000',
+  borderLight: '#c81d19',
+  borderLightest: '#fe5757',
+  canvas: '#FFF1D0',
+  canvasText: '#000000',
+  canvasTextDisabled: '#5a0302',
+  canvasTextDisabledShadow: '#FFF1D0',
+  canvasTextInvert: '#ffffff',
+  checkmark: '#000000',
+  checkmarkDisabled: '#5a0302',
+  flatDark: '#9e9e9e',
+  flatLight: '#d8d8d8',
+  focusSecondary: '#fefe03',
+  headerBackground: '#161B33',
+  headerNotActiveBackground: '#5a0302',
+  headerNotActiveText: '#B80100',
+  headerText: '#FFF1D0',
+  hoverBackground: '#474973',
+  material: '#B80100',
+  materialDark: '#9a9e9c',
+  materialText: '#000000',
+  materialTextDisabled: '#5a0302',
+  materialTextDisabledShadow: '#fe5757',
+  materialTextInvert: '#ffffff',
+  progress: '#474973',
+  tooltip: '#fefbcc'
+};

package/src/styles/themes/travel.ts

@@ -0,0 +1,33 @@
+export default {
+  name: 'travel',
+
+  anchor: '#1034a6',
+  anchorVisited: '#440381',
+  borderDark: '#695f50',
+  borderDarkest: '#28251e',
+  borderLight: '#9d8f80',
+  borderLightest: '#baae9f',
+  canvas: '#d8d0c8',
+  canvasText: '#28251e',
+  canvasTextDisabled: '#695f50',
+  canvasTextDisabledShadow: '#baae9f',
+  canvasTextInvert: '#ffffff',
+  checkmark: '#28251e',
+  checkmarkDisabled: '#695f50',
+  flatDark: '#695f50',
+  flatLight: '#9d8f80',
+  focusSecondary: '#fefe03',
+  headerBackground: '#404878',
+  headerNotActiveBackground: '#605848',
+  headerNotActiveText: '#908070',
+  headerText: '#d8d0c8',
+  hoverBackground: '#48604f',
+  material: '#908070',
+  materialDark: '#9a9e9c',
+  materialText: '#28251e',
+  materialTextDisabled: '#695f50',
+  materialTextDisabledShadow: '#baae9f',
+  materialTextInvert: '#ffffff',
+  progress: '#48604f',
+  tooltip: '#fefbcc'
+};

package/src/styles/themes/vaporTeal.ts

@@ -0,0 +1,33 @@
+export default {
+  name: 'vaporTeal',
+
+  anchor: '#1034a6',
+  anchorVisited: '#440381',
+  borderDark: '#00706f',
+  borderDarkest: '#000000',
+  borderLight: '#2fcecd',
+  borderLightest: '#58ffff',
+  canvas: '#98DFEA',
+  canvasText: '#000000',
+  canvasTextDisabled: '#00706f',
+  canvasTextDisabledShadow: '#58ffff',
+  canvasTextInvert: '#000000',
+  checkmark: '#000000',
+  checkmarkDisabled: '#00706f',
+  flatDark: '#9e9e9e',
+  flatLight: '#d8d8d8',
+  focusSecondary: '#FCF6BD',
+  headerBackground: '#246A73',
+  headerNotActiveBackground: '#2fcecd',
+  headerNotActiveText: '#246A73',
+  headerText: '#58ffff',
+  hoverBackground: '#FF99C8',
+  material: '#01a8a8',
+  materialDark: '#246A73',
+  materialText: '#000000',
+  materialTextDisabled: '#00706f',
+  materialTextDisabledShadow: '#58ffff',
+  materialTextInvert: '#000000',
+  progress: '#FF99C8',
+  tooltip: '#fefbcc'
+};

package/src/styles/themes/vermillion.ts

@@ -0,0 +1,33 @@
+export default {
+  name: 'vermillion',
+
+  anchor: '#1034a6',
+  anchorVisited: '#440381',
+  borderDark: '#7f2120',
+  borderDarkest: '#130405',
+  borderLight: '#d25051',
+  borderLightest: '#e59697',
+  canvas: '#EFE9F4',
+  canvasText: '#130405',
+  canvasTextDisabled: '#7f2120',
+  canvasTextDisabledShadow: '#e59697',
+  canvasTextInvert: '#EFE9F4',
+  checkmark: '#130405',
+  checkmarkDisabled: '#7f2120',
+  flatDark: '#9e9e9e',
+  flatLight: '#d8d8d8',
+  focusSecondary: '#fefe03',
+  headerBackground: '#000103',
+  headerNotActiveBackground: '#7f2120',
+  headerNotActiveText: '#EFE9F4',
+  headerText: '#EFE9F4',
+  hoverBackground: '#000103',
+  material: '#cf4545',
+  materialDark: '#7f2120',
+  materialText: '#130405',
+  materialTextDisabled: '#7f2120',
+  materialTextDisabledShadow: '#e59697',
+  materialTextInvert: '#EFE9F4',
+  progress: '#000103',
+  tooltip: '#fefbcc'
+};

package/src/styles/themes/violetDark.ts

@@ -0,0 +1,33 @@
+export default {
+  name: 'violetDark',
+
+  anchor: '#1034a6',
+  anchorVisited: '#440381',
+  borderDark: '#3c1f3e',
+  borderDarkest: '#18051a',
+  borderLight: '#945b9b',
+  borderLightest: '#c47bcc',
+  canvas: '#c47bcc',
+  canvasText: '#18051a',
+  canvasTextDisabled: '#000000',
+  canvasTextDisabledShadow: '#000000',
+  canvasTextInvert: '#c57ece',
+  checkmark: '#000000',
+  checkmarkDisabled: '#3c1f3e',
+  flatDark: '#3c1f3e',
+  flatLight: '#945b9b',
+  focusSecondary: '#fefe03',
+  headerBackground: '#1034a6',
+  headerNotActiveBackground: '#210e23',
+  headerNotActiveText: '#652a6d',
+  headerText: '#010601',
+  hoverBackground: '#512155',
+  material: '#652a6d',
+  materialDark: '#210e23',
+  materialText: '#c57ece',
+  materialTextDisabled: '#3c1f3e',
+  materialTextDisabledShadow: '#c47bcc',
+  materialTextInvert: '#c47bcc',
+  progress: '#000080',
+  tooltip: '#fefbcc'
+};

package/src/styles/themes/water.ts

@@ -0,0 +1,33 @@
+export default {
+  name: 'water',
+
+  anchor: '#72b3b4',
+  anchorVisited: '#440381',
+  borderDark: '#888c8f',
+  borderDarkest: '#050608',
+  borderLight: '#dfe0e3',
+  borderLightest: '#ffffff',
+  canvas: '#ffffff',
+  canvasText: '#050608',
+  canvasTextDisabled: '#888c8f',
+  canvasTextDisabledShadow: '#ffffff',
+  canvasTextInvert: '#ffffff',
+  checkmark: '#050608',
+  checkmarkDisabled: '#888c8f',
+  flatDark: '#9e9e9e',
+  flatLight: '#d8d8d8',
+  focusSecondary: '#fefe03',
+  headerBackground: '#72b3b4',
+  headerNotActiveBackground: '#9a9e9c',
+  headerNotActiveText: '#ced0cf',
+  headerText: '#ffffff',
+  hoverBackground: '#72b3b4',
+  material: '#ced0cf',
+  materialDark: '#9a9e9c',
+  materialText: '#050608',
+  materialTextDisabled: '#888c8f',
+  materialTextDisabledShadow: '#ffffff',
+  materialTextInvert: '#ffffff',
+  progress: '#72b3b4',
+  tooltip: '#fefbcc'
+};

package/src/styles/themes/wmii.ts

@@ -0,0 +1,36 @@
+/* "WMII" by tPenguinLTG
+ * https://www.deviantart.com/tpenguinltg/art/wmii-683233676
+ */
+
+export default {
+  name: 'wmii',
+  anchor: 'rgb(129, 101, 79)',
+  anchorVisited: 'rgb(129, 101, 79)',
+  borderDark: 'rgb(145, 148, 75)',
+  borderDarkest: 'rgb(64, 64, 64)',
+  borderLight: 'rgb(193, 196, 139)',
+  borderLightest: 'rgb(224, 225, 198)',
+  canvas: 'rgb(255, 255, 255)',
+  canvasText: 'rgb(0, 0, 0)',
+  canvasTextDisabled: 'rgb(145, 148, 75)',
+  canvasTextDisabledShadow: 'rgb(224, 225, 198)',
+  canvasTextInvert: 'rgb(255, 255, 255)',
+  checkmark: 'rgb(0, 0, 0)',
+  checkmarkDisabled: 'rgb(145, 148, 75)',
+  flatDark: 'rgb(145, 148, 75)',
+  flatLight: 'rgb(193, 196, 139)',
+  focusSecondary: 'rgb(224, 225, 198)',
+  headerBackground: 'rgb(129, 101, 79)',
+  headerNotActiveBackground: 'rgb(145, 148, 75)',
+  headerNotActiveText: 'rgb(193, 196, 139)',
+  headerText: 'rgb(255, 255, 255)',
+  hoverBackground: 'rgb(0, 0, 0)',
+  material: 'rgb(193, 196, 139)',
+  materialDark: 'rgb(145, 148, 75)',
+  materialText: 'rgb(0, 0, 0)',
+  materialTextDisabled: 'rgb(145, 148, 75)',
+  materialTextDisabledShadow: 'rgb(224, 225, 198)',
+  materialTextInvert: 'rgb(255, 255, 255)',
+  progress: 'rgb(0, 0, 0)',
+  tooltip: 'rgb(255, 255, 225)',
+};

package/src/types.tsx

@@ -0,0 +1,55 @@
+import type * as React from 'react';
+
+export type $Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type $RemoveChildren<T extends React.ComponentType<any>> = $Omit<
+  React.ComponentPropsWithoutRef<T>,
+  'children'
+>;
+
+// TODO: proper Color type
+export type Color = string;
+
+export type Sizes = 'sm' | 'md' | 'lg';
+
+export type Orientation = 'horizontal' | 'vertical';
+
+export type Direction = 'up' | 'down' | 'left' | 'right';
+
+export type DimensionValue = undefined | number | string;
+
+export type Theme = {
+  name: string;
+  anchor: string;
+  anchorVisited: string;
+  borderDark: string;
+  borderDarkest: string;
+  borderLight: string;
+  borderLightest: string;
+  canvas: string;
+  canvasText: string;
+  canvasTextDisabled: string;
+  canvasTextDisabledShadow: string;
+  canvasTextInvert: string;
+  checkmark: string;
+  checkmarkDisabled: string;
+  flatDark: string;
+  flatLight: string;
+  focusSecondary: string;
+  headerBackground: string;
+  headerNotActiveBackground: string;
+  headerNotActiveText: string;
+  headerText: string;
+  hoverBackground: string;
+  material: string;
+  materialDark: string;
+  materialText: string;
+  materialTextDisabled: string;
+  materialTextDisabledShadow: string;
+  materialTextInvert: string;
+  progress: string;
+  tooltip: string;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyValue = any;

package/src/utils/index.ts

@@ -0,0 +1,57 @@
+// TODO: write tests for utils
+type OptionalNumber = number | null;
+export function clamp(value: number, min: OptionalNumber, max: OptionalNumber) {
+  if (max !== null && value > max) {
+    return max;
+  }
+  if (min !== null && value < min) {
+    return min;
+  }
+  return value;
+}
+
+// helper functions below are from Material UI (https://github.com/mui-org/material-ui)
+export function getDecimalPrecision(num: number) {
+  if (Math.abs(num) < 1) {
+    const parts = num.toExponential().split('e-');
+    const matissaDecimalPart = parts[0].split('.')[1];
+    return (
+      (matissaDecimalPart ? matissaDecimalPart.length : 0) +
+      parseInt(parts[1], 10)
+    );
+  }
+
+  const decimalPart = num.toString().split('.')[1];
+  return decimalPart ? decimalPart.length : 0;
+}
+
+export function roundValueToStep(value: number, step: number, min: number) {
+  const nearest = Math.round((value - min) / step) * step + min;
+  return Number(nearest.toFixed(getDecimalPrecision(step)));
+}
+
+export function findClosest(values: number[], currentValue: number) {
+  const { index: closestIndex } = values.reduce(
+    (acc, value, index) => {
+      const distance = Math.abs(currentValue - value);
+
+      if (
+        acc === null ||
+        distance < acc.distance ||
+        distance === acc.distance
+      ) {
+        return {
+          distance,
+          index,
+        };
+      }
+
+      return acc;
+    },
+    {
+      index: -1,
+      distance: Infinity,
+    },
+  );
+  return closestIndex;
+}