@scaleflex/ui-tw 0.0.1 → 0.0.3

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

@@ -1,4 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

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

package/utils/README.md

@@ -1,11 +0,0 @@
-# @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

@@ -1,6 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,6 +0,0 @@
-/**
- * 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

@@ -1,11 +0,0 @@
-/**
- * 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

@@ -1,11 +0,0 @@
-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

@@ -1,159 +0,0 @@
-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

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

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

@@ -1,3 +0,0 @@
-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

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

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

@@ -1,8 +0,0 @@
-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

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

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

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

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

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

package/utils/functions/escape-regexp.js

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

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

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

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

@@ -1,22 +0,0 @@
-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

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

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

@@ -1,21 +0,0 @@
-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

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

package/utils/functions/ignore-event.js

@@ -1,9 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,28 +0,0 @@
-// 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

@@ -1,6 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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

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

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

@@ -1,2 +0,0 @@
-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

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

package/utils/functions/scrollbar.d.ts

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

package/utils/functions/scrollbar.js

@@ -1,6 +0,0 @@
-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]);
-};

package/utils/functions/set-ref.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-/**
- * passes {value} to {ref}
- * Useful if you want to expose the ref of an inner component to the public API
- * while still using it inside the component.
- * @param ref A ref callback or ref object. If anything falsy, this is a no-op.
- */
-export default function setRef<T>(ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined, value: T | null): void;

package/utils/functions/set-ref.js

@@ -1,13 +0,0 @@
-/**
- * passes {value} to {ref}
- * Useful if you want to expose the ref of an inner component to the public API
- * while still using it inside the component.
- * @param ref A ref callback or ref object. If anything falsy, this is a no-op.
- */
-export default function setRef(ref, value) {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref) {
-    ref.current = value;
-  }
-}

package/utils/functions/slider/utils.d.ts

@@ -1,47 +0,0 @@
-export declare function asc(a: number, b: number): number;
-export declare function valueToPercent(value: number, min: number, max: number): number;
-export declare function percentToValue(percent: number, min: number, max: number): number;
-export declare function roundValueToStep(value: number, step: number, min: number): number;
-export declare function setValueIndex({ values, newValue, index, }: {
-    values: number[];
-    newValue: number;
-    index: number;
-}): number | number[];
-export declare function findClosest(values: number[], currentValue: number): number;
-export declare function ownerDocument(node: Node | null | undefined): Document;
-export declare function clamp(value: number | null, min: number, max: number): number;
-export declare function trackFinger(event: any, touchId: any): {
-    x: number | null;
-    y: number | null;
-} | boolean;
-export declare const axisProps: {
-    horizontal: {
-        offset: (percent: number) => {
-            left: string;
-        };
-        leap: (percent: number) => {
-            width: string;
-        };
-    };
-    'horizontal-reverse': {
-        offset: (percent: number) => {
-            right: string;
-        };
-        leap: (percent: number) => {
-            width: string;
-        };
-    };
-    vertical: {
-        offset: (percent: number) => {
-            bottom: string;
-        };
-        leap: (percent: number) => {
-            height: string;
-        };
-    };
-};
-export declare function focusThumb({ sliderRef, activeIndex, setActive, }: {
-    sliderRef: any;
-    activeIndex: number;
-    setActive?: any;
-}): void;