cakeinpanic-ui 1.0.0

package/dist/cjs/button/ButtonStyles.js

@@ -0,0 +1,381 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styledComponentsWrapper = require('../utils/styled-components-wrapper.js');
+const Loader = require('../loaders/Loader.js');
+require('../loaders/InlineLoader.js');
+const _styled = require('styled-components');
+
+const sizes = {
+  xxs: _styled.css`
+    line-height: 1em;
+    font-size: ${_ref => {
+    let {
+      theme
+    } = _ref;
+    return theme.fontSizesMap.xxxs;
+  }}px;
+    border-radius: ${_ref2 => {
+    let {
+      theme
+    } = _ref2;
+    return theme.borderRadiusesMap.sm;
+  }}px;
+    padding: ${_ref3 => {
+    let {
+      $square
+    } = _ref3;
+    return $square ? '11px' : '11px 16px';
+  }};
+    min-width: ${_ref4 => {
+    let {
+      $square
+    } = _ref4;
+    return $square ? '0' : '50px';
+  }};
+  `,
+  xs: _styled.css`
+    line-height: 1em;
+    font-size: ${_ref5 => {
+    let {
+      theme
+    } = _ref5;
+    return theme.fontSizesMap.xxs;
+  }}px;
+    border-radius: ${_ref6 => {
+    let {
+      theme
+    } = _ref6;
+    return theme.borderRadiusesMap.sm;
+  }}px;
+    padding: ${_ref7 => {
+    let {
+      $square
+    } = _ref7;
+    return $square ? '10px' : '10px 16px';
+  }};
+    min-width: ${_ref8 => {
+    let {
+      $square
+    } = _ref8;
+    return $square ? '0' : '60px';
+  }};
+  `,
+  sm: _styled.css`
+    line-height: 1em;
+    font-size: ${_ref9 => {
+    let {
+      theme
+    } = _ref9;
+    return theme.fontSizesMap.xs;
+  }}px;
+    border-radius: ${_ref0 => {
+    let {
+      theme
+    } = _ref0;
+    return theme.borderRadiusesMap.sm;
+  }}px;
+    padding: ${_ref1 => {
+    let {
+      $square
+    } = _ref1;
+    return $square ? '16px' : '16px 24px';
+  }};
+    min-width: ${_ref10 => {
+    let {
+      $square
+    } = _ref10;
+    return $square ? '0' : '100px';
+  }};
+  `,
+  md: _styled.css`
+    line-height: 1em;
+    font-size: ${_ref11 => {
+    let {
+      theme
+    } = _ref11;
+    return theme.fontSizesMap.xs;
+  }}px;
+    border-radius: ${_ref12 => {
+    let {
+      theme
+    } = _ref12;
+    return theme.borderRadiusesMap.lg;
+  }}px;
+    padding: ${_ref13 => {
+    let {
+      $square
+    } = _ref13;
+    return $square ? '21px' : '21px 44px';
+  }};
+    min-width: ${_ref14 => {
+    let {
+      $square
+    } = _ref14;
+    return $square ? '0' : '120px';
+  }};
+  `,
+  lg: _styled.css`
+    line-height: 1em;
+    font-size: ${_ref15 => {
+    let {
+      theme
+    } = _ref15;
+    return theme.fontSizesMap.sm;
+  }}px;
+    border-radius: ${_ref16 => {
+    let {
+      theme
+    } = _ref16;
+    return theme.borderRadiusesMap.lg;
+  }}px;
+    box-shadow: ${_ref17 => {
+    let {
+      theme
+    } = _ref17;
+    return theme.boxShadows.md;
+  }}
+      var(--lido-color-shadowDark);
+    padding: ${_ref18 => {
+    let {
+      $square
+    } = _ref18;
+    return $square ? '24px' : '24px 64px';
+  }};
+    min-width: ${_ref19 => {
+    let {
+      $square
+    } = _ref19;
+    return $square ? '0' : '160px';
+  }};
+  `
+};
+const getMainColor = props => {
+  const colorsMap = {
+    primary: `var(--lido-color-primary)`,
+    secondary: `var(--lido-color-secondary)`,
+    warning: `var(--lido-color-warning)`,
+    error: `var(--lido-color-error)`,
+    success: `var(--lido-color-success)`
+  };
+  return colorsMap[props.$color];
+};
+const getContrastColor = props => {
+  const colorsMap = {
+    primary: `var(--lido-color-primaryContrast)`,
+    secondary: `var(--lido-color-secondaryContrast)`,
+    warning: `var(--lido-color-warningContrast)`,
+    error: `var(--lido-color-errorContrast)`,
+    success: `var(--lido-color-successContrast)`
+  };
+  return colorsMap[props.$color];
+};
+const getHoverColor = props => {
+  const colorsMap = {
+    primary: `var(--lido-color-primaryHover)`,
+    secondary: `var(--lido-color-secondaryHover)`,
+    warning: `var(--lido-color-warningHover)`,
+    error: `var(--lido-color-errorHover)`,
+    success: `var(--lido-color-successHover)`
+  };
+  return colorsMap[props.$color];
+};
+const variants = {
+  filled: _styled.css`
+    color: ${getContrastColor};
+    background-color: ${getMainColor};
+    transition: background-color ${_ref20 => {
+    let {
+      theme
+    } = _ref20;
+    return theme.duration.fast;
+  }} ease;
+
+    :not(:disabled):hover,
+    :focus-visible {
+      background-color: ${getHoverColor};
+    }
+  `,
+  outlined: _styled.css`
+    color: ${getMainColor};
+    transition:
+      background-color ${_ref21 => {
+    let {
+      theme
+    } = _ref21;
+    return theme.duration.fast;
+  }} ease,
+      color ${_ref22 => {
+    let {
+      theme
+    } = _ref22;
+    return theme.duration.fast;
+  }} ease;
+
+    ::before {
+      display: block;
+      border: 1px solid ${getMainColor};
+    }
+
+    :not(:disabled):hover,
+    :focus-visible {
+      background-color: ${getHoverColor};
+      color: ${getContrastColor};
+    }
+  `,
+  text: _styled.css`
+    color: ${getMainColor};
+    background-color: var(--lido-color-foreground);
+
+    ::before {
+      display: block;
+      background-color: ${getMainColor};
+      transition: opacity ${_ref23 => {
+    let {
+      theme
+    } = _ref23;
+    return theme.duration.fast;
+  }} ease;
+      opacity: 0;
+    }
+
+    :not(:disabled):hover,
+    :focus-visible {
+      /* stylelint-disable-next-line no-descending-specificity */
+      ::before {
+        opacity: 0.1;
+      }
+    }
+  `,
+  ghost: _styled.css`
+    color: ${getMainColor};
+
+    ::before {
+      display: block;
+      background-color: ${getMainColor};
+      transition: opacity ${_ref24 => {
+    let {
+      theme
+    } = _ref24;
+    return theme.duration.fast;
+  }} ease;
+      opacity: 0;
+    }
+
+    :not(:disabled):hover,
+    :focus-visible {
+      /* stylelint-disable-next-line no-descending-specificity */
+      ::before {
+        opacity: 0.1;
+      }
+    }
+  `,
+  translucent: _styled.css`
+    color: ${getMainColor};
+
+    ::before {
+      display: block;
+      background-color: ${getMainColor};
+      transition: opacity ${_ref25 => {
+    let {
+      theme
+    } = _ref25;
+    return theme.duration.fast;
+  }} ease;
+      opacity: 0.1;
+    }
+
+    :not(:disabled):hover,
+    :focus-visible {
+      /* stylelint-disable-next-line no-descending-specificity */
+      ::before {
+        opacity: 0.2;
+      }
+    }
+  `
+};
+const ButtonStyle = styledComponentsWrapper.default.button`
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+  background: transparent;
+  font-family: inherit;
+  font-weight: 700;
+  width: ${_ref26 => {
+  let {
+    $fullwidth
+  } = _ref26;
+  return $fullwidth ? ' 100%' : 'auto';
+}};
+  -webkit-tap-highlight-color: transparent;
+
+  ::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    display: none;
+  }
+
+  :not(:disabled) {
+    cursor: pointer;
+  }
+
+  :disabled {
+    opacity: ${_ref27 => {
+  let {
+    $loading
+  } = _ref27;
+  return $loading ? 1 : 0.5;
+}};
+  }
+
+  ${props => sizes[props.$size]}
+  ${props => variants[props.$variant]}
+`;
+const ripple = _styled.keyframes`
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+`;
+const ButtonRippleStyle = styledComponentsWrapper.default.span`
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  pointer-events: none;
+  animation: ${ripple} 0.8s linear;
+  background-color: currentcolor;
+  opacity: 0.4;
+`;
+const ButtonContentStyle = styledComponentsWrapper.default.span`
+  position: relative;
+  pointer-events: none;
+  visibility: ${_ref28 => {
+  let {
+    $hidden
+  } = _ref28;
+  return $hidden ? 'hidden' : 'visible';
+}};
+`;
+const ButtonLoaderStyle = styledComponentsWrapper.default(Loader.Loader)`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: currentcolor;
+  pointer-events: none;
+`;
+
+exports.ButtonContentStyle = ButtonContentStyle;
+exports.ButtonLoaderStyle = ButtonLoaderStyle;
+exports.ButtonRippleStyle = ButtonRippleStyle;
+exports.ButtonStyle = ButtonStyle;
+exports.ripple = ripple;
+//# sourceMappingURL=ButtonStyles.js.map

package/dist/cjs/button/ButtonStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonStyles.js","sources":["../../../src/button/ButtonStyles.tsx"],"sourcesContent":["import styled, { css, keyframes } from '../utils/styled-components-wrapper.js'\nimport { Theme } from '../theme/index.js'\nimport { Loader } from '../loaders/index.js'\nimport { ButtonColors, ButtonSizes, ButtonVariants } from './types.js'\n\ntype InjectedProps = {\n  $color: ButtonColors\n  $size: ButtonSizes\n  $variant: ButtonVariants\n  $fullwidth: boolean\n  $square: boolean\n  $loading: boolean\n  $active: boolean\n  theme: Theme\n}\n\nconst sizes = {\n  xxs: css<InjectedProps>`\n    line-height: 1em;\n    font-size: ${({ theme }) => theme.fontSizesMap.xxxs}px;\n    border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;\n    padding: ${({ $square }) => ($square ? '11px' : '11px 16px')};\n    min-width: ${({ $square }) => ($square ? '0' : '50px')};\n  `,\n  xs: css<InjectedProps>`\n    line-height: 1em;\n    font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n    border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;\n    padding: ${({ $square }) => ($square ? '10px' : '10px 16px')};\n    min-width: ${({ $square }) => ($square ? '0' : '60px')};\n  `,\n  sm: css<InjectedProps>`\n    line-height: 1em;\n    font-size: ${({ theme }) => theme.fontSizesMap.xs}px;\n    border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;\n    padding: ${({ $square }) => ($square ? '16px' : '16px 24px')};\n    min-width: ${({ $square }) => ($square ? '0' : '100px')};\n  `,\n  md: css<InjectedProps>`\n    line-height: 1em;\n    font-size: ${({ theme }) => theme.fontSizesMap.xs}px;\n    border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;\n    padding: ${({ $square }) => ($square ? '21px' : '21px 44px')};\n    min-width: ${({ $square }) => ($square ? '0' : '120px')};\n  `,\n  lg: css<InjectedProps>`\n    line-height: 1em;\n    font-size: ${({ theme }) => theme.fontSizesMap.sm}px;\n    border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;\n    box-shadow: ${({ theme }) => theme.boxShadows.md}\n      var(--lido-color-shadowDark);\n    padding: ${({ $square }) => ($square ? '24px' : '24px 64px')};\n    min-width: ${({ $square }) => ($square ? '0' : '160px')};\n  `,\n}\n\nconst getMainColor = (props: InjectedProps) => {\n  const colorsMap = {\n    primary: `var(--lido-color-primary)`,\n    secondary: `var(--lido-color-secondary)`,\n    warning: `var(--lido-color-warning)`,\n    error: `var(--lido-color-error)`,\n    success: `var(--lido-color-success)`,\n  }\n  return colorsMap[props.$color]\n}\n\nconst getContrastColor = (props: InjectedProps) => {\n  const colorsMap = {\n    primary: `var(--lido-color-primaryContrast)`,\n    secondary: `var(--lido-color-secondaryContrast)`,\n    warning: `var(--lido-color-warningContrast)`,\n    error: `var(--lido-color-errorContrast)`,\n    success: `var(--lido-color-successContrast)`,\n  }\n  return colorsMap[props.$color]\n}\n\nconst getHoverColor = (props: InjectedProps) => {\n  const colorsMap = {\n    primary: `var(--lido-color-primaryHover)`,\n    secondary: `var(--lido-color-secondaryHover)`,\n    warning: `var(--lido-color-warningHover)`,\n    error: `var(--lido-color-errorHover)`,\n    success: `var(--lido-color-successHover)`,\n  }\n  return colorsMap[props.$color]\n}\n\nconst variants = {\n  filled: css`\n    color: ${getContrastColor};\n    background-color: ${getMainColor};\n    transition: background-color ${({ theme }) => theme.duration.fast} ease;\n\n    :not(:disabled):hover,\n    :focus-visible {\n      background-color: ${getHoverColor};\n    }\n  `,\n  outlined: css`\n    color: ${getMainColor};\n    transition:\n      background-color ${({ theme }) => theme.duration.fast} ease,\n      color ${({ theme }) => theme.duration.fast} ease;\n\n    ::before {\n      display: block;\n      border: 1px solid ${getMainColor};\n    }\n\n    :not(:disabled):hover,\n    :focus-visible {\n      background-color: ${getHoverColor};\n      color: ${getContrastColor};\n    }\n  `,\n  text: css`\n    color: ${getMainColor};\n    background-color: var(--lido-color-foreground);\n\n    ::before {\n      display: block;\n      background-color: ${getMainColor};\n      transition: opacity ${({ theme }) => theme.duration.fast} ease;\n      opacity: 0;\n    }\n\n    :not(:disabled):hover,\n    :focus-visible {\n      /* stylelint-disable-next-line no-descending-specificity */\n      ::before {\n        opacity: 0.1;\n      }\n    }\n  `,\n  ghost: css`\n    color: ${getMainColor};\n\n    ::before {\n      display: block;\n      background-color: ${getMainColor};\n      transition: opacity ${({ theme }) => theme.duration.fast} ease;\n      opacity: 0;\n    }\n\n    :not(:disabled):hover,\n    :focus-visible {\n      /* stylelint-disable-next-line no-descending-specificity */\n      ::before {\n        opacity: 0.1;\n      }\n    }\n  `,\n  translucent: css`\n    color: ${getMainColor};\n\n    ::before {\n      display: block;\n      background-color: ${getMainColor};\n      transition: opacity ${({ theme }) => theme.duration.fast} ease;\n      opacity: 0.1;\n    }\n\n    :not(:disabled):hover,\n    :focus-visible {\n      /* stylelint-disable-next-line no-descending-specificity */\n      ::before {\n        opacity: 0.2;\n      }\n    }\n  `,\n}\n\nexport const ButtonStyle = styled.button<InjectedProps>`\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  white-space: nowrap;\n  overflow: hidden;\n  position: relative;\n  background: transparent;\n  font-family: inherit;\n  font-weight: 700;\n  width: ${({ $fullwidth }) => ($fullwidth ? ' 100%' : 'auto')};\n  -webkit-tap-highlight-color: transparent;\n\n  ::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    border-radius: inherit;\n    display: none;\n  }\n\n  :not(:disabled) {\n    cursor: pointer;\n  }\n\n  :disabled {\n    opacity: ${({ $loading }) => ($loading ? 1 : 0.5)};\n  }\n\n  ${(props) => sizes[props.$size]}\n  ${(props) => variants[props.$variant]}\n`\n\nexport const ripple = keyframes`\n  to {\n    transform: scale(4);\n    opacity: 0;\n  }\n`\n\nexport const ButtonRippleStyle = styled.span`\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  pointer-events: none;\n  animation: ${ripple} 0.8s linear;\n  background-color: currentcolor;\n  opacity: 0.4;\n`\n\nexport const ButtonContentStyle = styled.span<{ $hidden: boolean }>`\n  position: relative;\n  pointer-events: none;\n  visibility: ${({ $hidden }) => ($hidden ? 'hidden' : 'visible')};\n`\n\nexport const ButtonLoaderStyle = styled(Loader)`\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: currentcolor;\n  pointer-events: none;\n`\n"],"names":["sizes","xxs","css","_ref","theme","fontSizesMap","xxxs","_ref2","borderRadiusesMap","sm","_ref3","$square","_ref4","xs","_ref5","_ref6","_ref7","_ref8","_ref9","_ref0","_ref1","_ref10","md","_ref11","_ref12","lg","_ref13","_ref14","_ref15","_ref16","_ref17","boxShadows","_ref18","_ref19","getMainColor","props","colorsMap","primary","secondary","warning","error","success","$color","getContrastColor","getHoverColor","variants","filled","_ref20","duration","fast","outlined","_ref21","_ref22","text","_ref23","ghost","_ref24","translucent","_ref25","ButtonStyle","styled","button","_ref26","$fullwidth","_ref27","$loading","$size","$variant","ripple","keyframes","ButtonRippleStyle","span","ButtonContentStyle","_ref28","$hidden","ButtonLoaderStyle","Loader"],"mappings":"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"}

package/dist/cjs/button/types.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+let ButtonSize = /*#__PURE__*/function (ButtonSize) {
+  ButtonSize[ButtonSize["xxs"] = 0] = "xxs";
+  ButtonSize[ButtonSize["xs"] = 1] = "xs";
+  ButtonSize[ButtonSize["sm"] = 2] = "sm";
+  ButtonSize[ButtonSize["md"] = 3] = "md";
+  ButtonSize[ButtonSize["lg"] = 4] = "lg";
+  return ButtonSize;
+}({});
+let ButtonVariant = /*#__PURE__*/function (ButtonVariant) {
+  ButtonVariant[ButtonVariant["filled"] = 0] = "filled";
+  ButtonVariant[ButtonVariant["outlined"] = 1] = "outlined";
+  ButtonVariant[ButtonVariant["text"] = 2] = "text";
+  ButtonVariant[ButtonVariant["ghost"] = 3] = "ghost";
+  ButtonVariant[ButtonVariant["translucent"] = 4] = "translucent";
+  return ButtonVariant;
+}({});
+let ButtonColor = /*#__PURE__*/function (ButtonColor) {
+  ButtonColor[ButtonColor["primary"] = 0] = "primary";
+  ButtonColor[ButtonColor["secondary"] = 1] = "secondary";
+  ButtonColor[ButtonColor["warning"] = 2] = "warning";
+  ButtonColor[ButtonColor["error"] = 3] = "error";
+  ButtonColor[ButtonColor["success"] = 4] = "success";
+  return ButtonColor;
+}({});
+
+exports.ButtonColor = ButtonColor;
+exports.ButtonSize = ButtonSize;
+exports.ButtonVariant = ButtonVariant;
+//# sourceMappingURL=types.js.map

package/dist/cjs/button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/button/types.tsx"],"sourcesContent":["import { LidoComponentProps } from '../utils/index.js'\nexport type { Theme } from '../theme/index.js'\n\nexport enum ButtonSize {\n  xxs,\n  xs,\n  sm,\n  md,\n  lg,\n}\nexport type ButtonSizes = keyof typeof ButtonSize\n\nexport enum ButtonVariant {\n  filled,\n  outlined,\n  text,\n  ghost,\n  translucent,\n}\nexport type ButtonVariants = keyof typeof ButtonVariant\n\nexport enum ButtonColor {\n  primary,\n  secondary,\n  warning,\n  error,\n  success,\n}\nexport type ButtonColors = keyof typeof ButtonColor\n\nexport type ButtonProps = LidoComponentProps<\n  'button',\n  {\n    size?: ButtonSizes\n    variant?: ButtonVariants\n    color?: ButtonColors\n    fullwidth?: boolean\n    square?: boolean\n    loading?: boolean\n    active?: boolean\n    as?: never\n  }\n>\n\nexport type ButtonIconProps = {\n  icon: JSX.Element\n} & ButtonProps\n"],"names":["ButtonSize","ButtonVariant","ButtonColor"],"mappings":";;;;AAGYA,IAAAA,UAAU,0BAAVA,UAAU,EAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,KAAA,CAAA,GAAA,CAAA,CAAA,GAAA,KAAA,CAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA;AAAA,EAAA,OAAVA,UAAU,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AASVC,IAAAA,aAAa,0BAAbA,aAAa,EAAA;AAAbA,EAAAA,aAAa,CAAbA,aAAa,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,GAAA,QAAA,CAAA;AAAbA,EAAAA,aAAa,CAAbA,aAAa,CAAA,UAAA,CAAA,GAAA,CAAA,CAAA,GAAA,UAAA,CAAA;AAAbA,EAAAA,aAAa,CAAbA,aAAa,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA,CAAA;AAAbA,EAAAA,aAAa,CAAbA,aAAa,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA,CAAA;AAAbA,EAAAA,aAAa,CAAbA,aAAa,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,GAAA,aAAA,CAAA;AAAA,EAAA,OAAbA,aAAa,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AASbC,IAAAA,WAAW,0BAAXA,WAAW,EAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,SAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,WAAA,CAAA,GAAA,CAAA,CAAA,GAAA,WAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,SAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,SAAA,CAAA;AAAA,EAAA,OAAXA,WAAW,CAAA;AAAA,CAAA,CAAA,EAAA;;;;;;"}

package/dist/cjs/button/useRipple.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+const ButtonStyles = require('./ButtonStyles.js');
+const jsxRuntime = require('react/jsx-runtime');
+
+const useRipple = _ref => {
+  let {
+    onClick
+  } = _ref;
+  const [ripple, setRipple] = React.useState(null);
+  const handleClick = React.useCallback(event => {
+    const button = event.currentTarget;
+    const rect = button.getBoundingClientRect();
+    const diameter = Math.max(button.clientWidth, button.clientHeight);
+    const radius = diameter / 2;
+    const isMouseClick = event.clientX > 0 && event.clientY > 0;
+    const x = isMouseClick ? event.clientX - rect.left : button.clientWidth / 2;
+    const y = isMouseClick ? event.clientY - rect.top : button.clientHeight / 2;
+    const style = {
+      width: diameter,
+      height: diameter,
+      left: x - radius,
+      top: y - radius
+    };
+    setRipple(/*#__PURE__*/jsxRuntime.jsx(ButtonStyles.ButtonRippleStyle, {
+      style: style
+    }, event.timeStamp));
+    onClick?.(event);
+  }, [onClick]);
+  return {
+    ripple,
+    handleClick
+  };
+};
+
+exports.useRipple = useRipple;
+//# sourceMappingURL=useRipple.js.map

package/dist/cjs/button/useRipple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRipple.js","sources":["../../../src/button/useRipple.tsx"],"sourcesContent":["import { MouseEvent, ReactNode, useCallback, useState } from 'react'\nimport { ButtonProps } from './types.js'\nimport { ButtonRippleStyle } from './ButtonStyles.js'\n\ntype UseRipple = (props: Pick<ButtonProps, 'onClick'>) => {\n  ripple: ReactNode\n  handleClick: (event: MouseEvent<HTMLButtonElement>) => void\n}\n\nexport const useRipple: UseRipple = ({ onClick }) => {\n  const [ripple, setRipple] = useState<ReactNode | null>(null)\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      const button = event.currentTarget\n      const rect = button.getBoundingClientRect()\n      const diameter = Math.max(button.clientWidth, button.clientHeight)\n      const radius = diameter / 2\n      const isMouseClick = event.clientX > 0 && event.clientY > 0\n\n      const x = isMouseClick\n        ? event.clientX - rect.left\n        : button.clientWidth / 2\n\n      const y = isMouseClick\n        ? event.clientY - rect.top\n        : button.clientHeight / 2\n\n      const style = {\n        width: diameter,\n        height: diameter,\n        left: x - radius,\n        top: y - radius,\n      }\n\n      setRipple(<ButtonRippleStyle style={style} key={event.timeStamp} />)\n      onClick?.(event)\n    },\n    [onClick],\n  )\n\n  return {\n    ripple,\n    handleClick,\n  }\n}\n"],"names":["useRipple","_ref","onClick","ripple","setRipple","useState","handleClick","useCallback","event","button","currentTarget","rect","getBoundingClientRect","diameter","Math","max","clientWidth","clientHeight","radius","isMouseClick","clientX","clientY","x","left","y","top","style","width","height","_jsx","ButtonRippleStyle","timeStamp"],"mappings":";;;;;;;;AASaA,MAAAA,SAAoB,GAAGC,IAAA,IAAiB;EAAA,IAAhB;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAAD,IAAA,CAAA;EAC9C,MAAM,CAACE,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAQ,CAAmB,IAAI,CAAC,CAAA;AAE5D,EAAA,MAAMC,WAAW,GAAGC,iBAAW,CAC5BC,KAAoC,IAAK;AACxC,IAAA,MAAMC,MAAM,GAAGD,KAAK,CAACE,aAAa,CAAA;AAClC,IAAA,MAAMC,IAAI,GAAGF,MAAM,CAACG,qBAAqB,EAAE,CAAA;AAC3C,IAAA,MAAMC,QAAQ,GAAGC,IAAI,CAACC,GAAG,CAACN,MAAM,CAACO,WAAW,EAAEP,MAAM,CAACQ,YAAY,CAAC,CAAA;AAClE,IAAA,MAAMC,MAAM,GAAGL,QAAQ,GAAG,CAAC,CAAA;AAC3B,IAAA,MAAMM,YAAY,GAAGX,KAAK,CAACY,OAAO,GAAG,CAAC,IAAIZ,KAAK,CAACa,OAAO,GAAG,CAAC,CAAA;AAE3D,IAAA,MAAMC,CAAC,GAAGH,YAAY,GAClBX,KAAK,CAACY,OAAO,GAAGT,IAAI,CAACY,IAAI,GACzBd,MAAM,CAACO,WAAW,GAAG,CAAC,CAAA;AAE1B,IAAA,MAAMQ,CAAC,GAAGL,YAAY,GAClBX,KAAK,CAACa,OAAO,GAAGV,IAAI,CAACc,GAAG,GACxBhB,MAAM,CAACQ,YAAY,GAAG,CAAC,CAAA;AAE3B,IAAA,MAAMS,KAAK,GAAG;AACZC,MAAAA,KAAK,EAAEd,QAAQ;AACfe,MAAAA,MAAM,EAAEf,QAAQ;MAChBU,IAAI,EAAED,CAAC,GAAGJ,MAAM;MAChBO,GAAG,EAAED,CAAC,GAAGN,MAAAA;KACV,CAAA;IAEDd,SAAS,cAACyB,cAAA,CAACC,8BAAiB,EAAA;AAACJ,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAA,EAAMlB,KAAK,CAACuB,SAAY,CAAC,CAAC,CAAA;IACpE7B,OAAO,GAAGM,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACN,OAAO,CACV,CAAC,CAAA;EAED,OAAO;IACLC,MAAM;AACNG,IAAAA,WAAAA;GACD,CAAA;AACH;;;;"}

package/dist/cjs/chart-line/ChartLine.js

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+require('../loaders/Loader.js');
+const InlineLoader = require('../loaders/InlineLoader.js');
+const ChartLineLabel = require('./ChartLineLabel.js');
+const getContainerSize = require('./utils/getContainerSize.js');
+const processData = require('./utils/processData.js');
+const ChartLineStyles = require('./ChartLineStyles.js');
+const jsxRuntime = require('react/jsx-runtime');
+
+const ChartLine = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    loading = false,
+    onClick,
+    children,
+    height,
+    border,
+    data,
+    showLabels,
+    maxValue,
+    thresholdType,
+    ...rest
+  } = props;
+  const [containerSize, setContainerSize] = React.useState(null);
+  const containerId = React.useId();
+  const {
+    data: processedData,
+    ids
+  } = React.useMemo(() => processData.processData(data, containerId, maxValue), [data, maxValue, containerId]);
+  const allPreviousIds = React.useMemo(() => ids.map((_, index) => ids.slice(0, index)), [ids]);
+  React.useLayoutEffect(() => {
+    if (!showLabels) {
+      setContainerSize(null);
+      return;
+    }
+    const containerSize = getContainerSize.getContainerSize(ids);
+    setContainerSize(containerSize);
+  }, [ids, showLabels]);
+  if (loading) {
+    return /*#__PURE__*/jsxRuntime.jsx(ChartLineStyles.WrapperStyle, {
+      $border: border,
+      $height: height,
+      ref: ref,
+      ...rest,
+      children: /*#__PURE__*/jsxRuntime.jsx(InlineLoader.InlineLoader, {})
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(ChartLineStyles.ContainerStyle, {
+    id: containerId,
+    $alignItems: containerSize?.isCenterAlign ? 'center' : 'flex-start',
+    $height: containerSize?.size ?? 0,
+    children: /*#__PURE__*/jsxRuntime.jsx(ChartLineStyles.WrapperStyle, {
+      $border: border,
+      $height: height,
+      ref: ref,
+      ...rest,
+      children: processedData.map((item, index) => {
+        const {
+          color,
+          id,
+          width
+        } = item;
+        const previousIds = allPreviousIds[index];
+        return /*#__PURE__*/jsxRuntime.jsx(ChartLineStyles.LineStyle, {
+          $width: `${width}%`,
+          $backgroundColor: color,
+          $zIndex: processedData.length - index,
+          $border: border,
+          $isFullWidth: width === 100,
+          children: /*#__PURE__*/jsxRuntime.jsx(ChartLineLabel.ChartLineLabel, {
+            zIndex: processedData.length - index,
+            show: showLabels,
+            previousIds: previousIds,
+            height: height,
+            thresholdType: thresholdType,
+            containerId: containerId,
+            ...item
+          })
+        }, id);
+      })
+    })
+  });
+});
+ChartLine.displayName = 'ChartLine';
+
+exports.ChartLine = ChartLine;
+//# sourceMappingURL=ChartLine.js.map

package/dist/cjs/chart-line/ChartLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLine.js","sources":["../../../src/chart-line/ChartLine.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  useMemo,\n  useLayoutEffect,\n  useState,\n  useId,\n} from 'react'\n\nimport { InlineLoader } from '../loaders/index.js'\n\nimport { ChartLineLabel } from './ChartLineLabel.js'\nimport { getContainerSize, processData } from './utils/index.js'\nimport { ContainerStyle, LineStyle, WrapperStyle } from './ChartLineStyles.js'\nimport { ChartLineProps } from './types.js'\n\nexport const ChartLine = forwardRef(\n  (props: ChartLineProps, ref?: ForwardedRef<HTMLDivElement>) => {\n    const {\n      loading = false,\n      onClick,\n      children,\n      height,\n      border,\n      data,\n      showLabels,\n      maxValue,\n      thresholdType,\n      ...rest\n    } = props\n\n    const [containerSize, setContainerSize] = useState<{\n      size: number\n      isCenterAlign: boolean\n    } | null>(null)\n    const containerId = useId()\n\n    const { data: processedData, ids } = useMemo(\n      () => processData(data, containerId, maxValue),\n      [data, maxValue, containerId],\n    )\n\n    const allPreviousIds = useMemo(\n      () => ids.map((_, index) => ids.slice(0, index)),\n      [ids],\n    )\n\n    useLayoutEffect(() => {\n      if (!showLabels) {\n        setContainerSize(null)\n        return\n      }\n      const containerSize = getContainerSize(ids)\n      setContainerSize(containerSize)\n    }, [ids, showLabels])\n\n    if (loading) {\n      return (\n        <WrapperStyle $border={border} $height={height} ref={ref} {...rest}>\n          <InlineLoader />\n        </WrapperStyle>\n      )\n    }\n\n    return (\n      <ContainerStyle\n        id={containerId}\n        $alignItems={containerSize?.isCenterAlign ? 'center' : 'flex-start'}\n        $height={containerSize?.size ?? 0}\n      >\n        <WrapperStyle $border={border} $height={height} ref={ref} {...rest}>\n          {processedData.map((item, index) => {\n            const { color, id, width } = item\n            const previousIds = allPreviousIds[index]\n\n            return (\n              <LineStyle\n                key={id}\n                $width={`${width}%`}\n                $backgroundColor={color}\n                $zIndex={processedData.length - index}\n                $border={border}\n                $isFullWidth={width === 100}\n              >\n                <ChartLineLabel\n                  zIndex={processedData.length - index}\n                  show={showLabels}\n                  previousIds={previousIds}\n                  height={height}\n                  thresholdType={thresholdType}\n                  containerId={containerId}\n                  {...item}\n                />\n              </LineStyle>\n            )\n          })}\n        </WrapperStyle>\n      </ContainerStyle>\n    )\n  },\n)\nChartLine.displayName = 'ChartLine'\n"],"names":["ChartLine","forwardRef","props","ref","loading","onClick","children","height","border","data","showLabels","maxValue","thresholdType","rest","containerSize","setContainerSize","useState","containerId","useId","processedData","ids","useMemo","processData","allPreviousIds","map","_","index","slice","useLayoutEffect","getContainerSize","_jsx","WrapperStyle","$border","$height","InlineLoader","ContainerStyle","id","$alignItems","isCenterAlign","size","item","color","width","previousIds","LineStyle","$width","$backgroundColor","$zIndex","length","$isFullWidth","ChartLineLabel","zIndex","show","displayName"],"mappings":"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"}

package/dist/cjs/chart-line/ChartLineLabel.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+const types = require('./types.js');
+const ChartLineStyles = require('./ChartLineStyles.js');
+const handlePositioning = require('./utils/handlePositioning.js');
+const jsxRuntime = require('react/jsx-runtime');
+
+const ChartLineLabel = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    previousIds,
+    id,
+    color,
+    zIndex,
+    show,
+    labelPosition,
+    thresholdType,
+    height,
+    threshold,
+    containerId,
+    ...rest
+  } = props;
+  React.useLayoutEffect(() => {
+    if (!show) return;
+    if (thresholdType !== types.ChartLineThresholdType.flag) {
+      handlePositioning.handlePositioning({
+        previousIds,
+        id,
+        containerId,
+        reset: true
+      });
+    } else {
+      handlePositioning.handlePositioning({
+        previousIds,
+        id,
+        containerId
+      });
+    }
+  }, [previousIds, id, show, thresholdType, containerId]);
+  if (!show) return null;
+  const backgroundColor = threshold.color || color;
+  const content = threshold.descriptionElement || threshold.description;
+  return /*#__PURE__*/jsxRuntime.jsx(ChartLineStyles.ThresholdStyle, {
+    ref: ref,
+    id: id,
+    "data-label-position": labelPosition,
+    $labelPosition: labelPosition,
+    $thresholdType: thresholdType,
+    $height: height,
+    $backgroundColor: backgroundColor,
+    $zIndex: zIndex,
+    ...rest,
+    children: thresholdType === types.ChartLineThresholdType.flag && /*#__PURE__*/jsxRuntime.jsx(ChartLineStyles.ThresholdLabelStyle, {
+      style: {
+        backgroundColor
+      },
+      id: `${id}-description`,
+      $labelPosition: labelPosition,
+      children: content
+    })
+  });
+});
+ChartLineLabel.displayName = 'ChartLineLabel';
+
+exports.ChartLineLabel = ChartLineLabel;
+//# sourceMappingURL=ChartLineLabel.js.map