fannypack-v5
Version:
An accessible, composable, and friendly React UI Kit
198 lines (165 loc) • 7.13 kB
JavaScript
import 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import { css } from 'emotion';
import { css as css$1, keyframes } from '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import '../utils/useTheme.js';
import { a as _taggedTemplateLiteralLoose } from '../chunk-0c448560.js';
import 'lodash/kebabCase';
import 'tinycolor2';
import '../utils/isFunction.js';
import '../utils/get.js';
import { theme, palette } from '../utils/theme.js';
import '../utils/omit.js';
import '../utils/pick.js';
import '../utils/cssProps.js';
import '../utils/useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import '../utils/useColorMode.js';
import '../utils/useStyle.js';
import '../utils/omitBy.js';
import '../utils/useDefaultProps.js';
import '../utils/useDebounce.js';
import 'lodash/uniq';
import '../utils/useClassName.js';
import '../utils/useBreakpoint.js';
import '../utils/uniqueId.js';
import '../utils/times.js';
import '../utils/parseIcons.js';
import { tint } from '../utils/colors.js';
import '../utils/palette.js';
import '../utils/mergeRefs.js';
import 'deepmerge';
import 'lodash/set';
import '../utils/applyTheme.js';
import '../utils/bindFns.js';
import '../utils/createComponent.js';
import '../utils/createElement.js';
import '../utils/createHook.js';
import '../utils/forwardRefWithUse.js';
import '../utils/fieldAdaptors.js';
import '@emotion/is-prop-valid';
import '../utils/htmlProps.js';
import '../utils/OutsideClickHandler.js';
function _templateObject10() {
var data = _taggedTemplateLiteralLoose(["\n animation: ", " ", " infinite linear;\n"]);
_templateObject10 = function _templateObject10() {
return data;
};
return data;
}
function _templateObject9() {
var data = _taggedTemplateLiteralLoose(["\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n"]);
_templateObject9 = function _templateObject9() {
return data;
};
return data;
}
function _templateObject8() {
var data = _taggedTemplateLiteralLoose(["\n & svg {\n font-size: 36px;\n }\n & {\n ", ";\n }\n "]);
_templateObject8 = function _templateObject8() {
return data;
};
return data;
}
function _templateObject7() {
var data = _taggedTemplateLiteralLoose(["\n & svg {\n font-size: 28px;\n }\n & {\n ", ";\n }\n "]);
_templateObject7 = function _templateObject7() {
return data;
};
return data;
}
function _templateObject6() {
var data = _taggedTemplateLiteralLoose(["\n & {\n ", ";\n }\n "]);
_templateObject6 = function _templateObject6() {
return data;
};
return data;
}
function _templateObject5() {
var data = _taggedTemplateLiteralLoose(["\n & svg {\n font-size: 14px;\n border-width: 2px;\n }\n\n & {\n ", ";\n }\n "]);
_templateObject5 = function _templateObject5() {
return data;
};
return data;
}
function _templateObject4() {
var data = _taggedTemplateLiteralLoose(["\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n stroke: ", ";\n transition: stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n & {\n ", ";\n }\n"]);
_templateObject4 = function _templateObject4() {
return data;
};
return data;
}
function _templateObject3() {
var data = _taggedTemplateLiteralLoose(["\n stroke: ", ";\n\n & {\n ", ";\n }\n"]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2() {
var data = _taggedTemplateLiteralLoose(["\n width: 1em;\n height: 1em;\n transform: rotate(-90deg);\n\n ", ";\n\n & {\n ", ";\n }\n"]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = _taggedTemplateLiteralLoose(["\n line-height: 1rem;\n font-size: 20px;\n\n ", ";\n\n & {\n ", ";\n }\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
var defaultDashArrayValueMax = 325;
var defaultDashOffset = 200;
var progressDashArrayValue = 126;
var progressDashOffset = 60;
var SpinnerWrapper = function SpinnerWrapper(styleProps) {
return css(_templateObject(), styleProps.size && getSizeProperties(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var Spinner = function Spinner(styleProps) {
return css(_templateObject2(), typeof styleProps.value === 'undefined' && getSpinnerAnimation(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var TrackCircle = function TrackCircle(styleProps) {
return css(_templateObject3(), palette(styleProps.trackColor || styleProps.color + "100", styleProps.trackColor || tint(0.9, styleProps.color)(styleProps))(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var LoaderCircle = function LoaderCircle(styleProps) {
return css(_templateObject4(), typeof styleProps.value === 'number' ? progressDashArrayValue : getDashArrayValue(styleProps), typeof styleProps.value === 'number' ? progressDashArrayValue - styleProps.value / 100 * progressDashArrayValue + "px" : defaultDashOffset + "px", palette(styleProps.color, styleProps.color)(styleProps), theme(styleProps.themeKey, "css.root")(styleProps));
};
var getDashArrayValue = function getDashArrayValue(styleProps) {
var percentageString = styleProps.perimeter.split('%')[0];
var percentage = parseFloat(percentageString);
var scalar = percentage / 100;
return defaultDashOffset + scalar * (defaultDashArrayValueMax - defaultDashOffset);
};
var getSizeProperties = function getSizeProperties(styleProps) {
var sizeProperties = {
small: css$1(_templateObject5(), theme(styleProps.themeKey, "css.sizes.small")(styleProps)),
default: css$1(_templateObject6(), theme(styleProps.themeKey, "css.sizes.default")(styleProps)),
medium: css$1(_templateObject7(), theme(styleProps.themeKey, "css.sizes.medium")(styleProps)),
large: css$1(_templateObject8(), theme(styleProps.themeKey, "css.sizes.large")(styleProps))
};
return sizeProperties[styleProps.size];
};
var rotate = keyframes(_templateObject9());
var getSpinnerAnimation = function getSpinnerAnimation(styleProps) {
return css$1(_templateObject10(), rotate, styleProps.duration);
};
var styles = /*#__PURE__*/Object.freeze({
defaultDashArrayValueMax: defaultDashArrayValueMax,
defaultDashOffset: defaultDashOffset,
progressDashArrayValue: progressDashArrayValue,
progressDashOffset: progressDashOffset,
SpinnerWrapper: SpinnerWrapper,
Spinner: Spinner,
TrackCircle: TrackCircle,
LoaderCircle: LoaderCircle,
getDashArrayValue: getDashArrayValue,
getSizeProperties: getSizeProperties,
rotate: rotate,
getSpinnerAnimation: getSpinnerAnimation
});
export { LoaderCircle as L, SpinnerWrapper as S, TrackCircle as T, defaultDashOffset as a, progressDashOffset as b, Spinner as c, defaultDashArrayValueMax as d, getSizeProperties as e, getSpinnerAnimation as f, getDashArrayValue as g, progressDashArrayValue as p, rotate as r, styles as s };