cakeinpanic-ui 1.0.0

package/dist/esm/input/InputStyles.mjs

@@ -0,0 +1,407 @@
+import styled from '../utils/styled-components-wrapper.mjs';
+import { InputLabelStyle, labelFocusCSS, labelErrorCSS, labelWarningCSS, labelEmptyValueCSS } from './LabelStyles.mjs';
+import { css } from 'styled-components';
+
+const statesCSS = css`
+  &:hover {
+    z-index: 1;
+  }
+
+  &:focus-within {
+    z-index: 2;
+    border-color: var(--lido-color-borderActive);
+
+    ${InputLabelStyle} {
+      ${labelFocusCSS}
+    }
+  }
+`;
+const activeCSS = css`
+  &,
+  &:hover,
+  &:focus-within {
+    z-index: 2;
+    border-color: var(--lido-color-borderActive);
+
+    ${InputLabelStyle} {
+      ${labelFocusCSS}
+    }
+  }
+`;
+const errorCSS = css`
+  &,
+  &:hover,
+  &:focus-within {
+    border-color: var(--lido-color-error);
+
+    ${InputLabelStyle} {
+      ${labelErrorCSS}
+    }
+  }
+`;
+const warningCSS = css`
+  &,
+  &:hover,
+  &:focus-within {
+    border-color: var(--lido-color-warning);
+
+    ${InputLabelStyle} {
+      ${labelWarningCSS}
+    }
+  }
+`;
+const wrapperColors = {
+  default: css`
+    background: var(--lido-color-controlBg);
+    border-color: var(--lido-color-border);
+    color: var(--lido-color-text);
+
+    ${_ref => {
+    let {
+      $disabled
+    } = _ref;
+    return $disabled ? `background: var(--lido-color-background);` : `
+          &:hover {
+            border-color: var(--lido-color-borderHover);
+          }
+    `;
+  }};
+  `,
+  accent: css`
+    background: var(--lido-color-accentControlBg);
+    border-color: var(--lido-color-accentBorder);
+    color: var(--lido-color-accentText);
+
+    ${_ref2 => {
+    let {
+      $disabled
+    } = _ref2;
+    return $disabled ? `background: var(--lido-color-controlBg);` : `
+          &:hover {
+            border-color: var(--lido-color-accentBorderHover);
+          }
+    `;
+  }};
+  `
+};
+const decoratorCSS = css`
+  flex-grow: 0;
+  flex-shrink: 0;
+  cursor: inherit;
+  display: flex;
+  align-items: center;
+`;
+const InputLeftDecoratorStyle = styled.span`
+  ${decoratorCSS}
+  padding-right: 16px;
+`;
+const InputRightDecoratorStyle = styled.span`
+  ${decoratorCSS}
+  padding-left: 16px;
+`;
+const InputWrapperStyle = styled.label`
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+  box-sizing: border-box;
+  cursor: ${_ref3 => {
+  let {
+    $disabled
+  } = _ref3;
+  return $disabled ? 'default' : 'text';
+}};
+  width: ${_ref4 => {
+  let {
+    $fullwidth
+  } = _ref4;
+  return $fullwidth ? '100%' : 'auto';
+}};
+`;
+const contentVariants = {
+  default: css`
+    padding-top: 17px;
+    padding-bottom: 17px;
+
+    & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} {
+      margin-top: -17px;
+      margin-bottom: -17px;
+    }
+  `,
+  small: css`
+    padding-top: 9px;
+    padding-bottom: 9px;
+
+    & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} {
+      padding-top: -9px;
+      padding-bottom: -9px;
+    }
+  `
+};
+const InputContentStyle = styled.span`
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+  padding-left: 15px;
+  padding-right: 15px;
+  font-weight: 400;
+  font-size: ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.fontSizesMap.xs;
+}}px;
+  border: 1px solid;
+  border-radius: ${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.borderRadiusesMap.lg;
+}}px;
+  transition: border-color ${_ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.duration.fast;
+}} ease;
+
+  ${_ref8 => {
+  let {
+    $variant
+  } = _ref8;
+  return contentVariants[$variant];
+}};
+  ${_ref9 => {
+  let {
+    $color
+  } = _ref9;
+  return wrapperColors[$color];
+}};
+  ${_ref0 => {
+  let {
+    $disabled
+  } = _ref0;
+  return $disabled ? '' : statesCSS;
+}};
+  ${_ref1 => {
+  let {
+    $active
+  } = _ref1;
+  return $active ? activeCSS : '';
+}};
+  ${_ref10 => {
+  let {
+    $warning
+  } = _ref10;
+  return $warning ? warningCSS : '';
+}};
+  ${_ref11 => {
+  let {
+    $error
+  } = _ref11;
+  return $error ? errorCSS : '';
+}};
+`;
+const InputControlWrapperStyle = styled.div`
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+`;
+const labeledCSS = css`
+  &:not(:focus):placeholder-shown {
+    & + ${InputLabelStyle} {
+      ${labelEmptyValueCSS}
+    }
+
+    &::placeholder {
+      opacity: 0;
+    }
+  }
+`;
+const inputColors = {
+  default: css`
+    color: var(--lido-color-text);
+
+    &:disabled {
+      color: var(--lido-color-textSecondary);
+    }
+
+    &::placeholder {
+      color: var(--lido-color-textSecondary);
+    }
+
+    &:-webkit-autofill {
+      box-shadow: 0 0 0 100px var(--lido-color-controlBg) inset !important;
+      color: var(--lido-color-text) !important;
+      -webkit-text-fill-color: var(--lido-color-text) !important;
+    }
+
+    &:-internal-autofill-selected {
+      color: var(--lido-color-text) !important;
+      -webkit-text-fill-color: var(--lido-color-text) !important;
+    }
+  `,
+  accent: css`
+    color: var(--lido-color-accentText);
+    opacity: 1;
+
+    &:disabled {
+      color: var(--lido-color-accentText);
+      opacity: 0.5;
+    }
+
+    &::placeholder {
+      color: var(--lido-color-accentText);
+      opacity: 0.5;
+    }
+
+    &:-webkit-autofill {
+      box-shadow: 0 0 0 100px var(--lido-color-accentControlBg) inset !important;
+      color: var(--lido-color-accentContrast) !important;
+      -webkit-text-fill-color: var(--lido-color-accentContrast) !important;
+    }
+
+    &:-internal-autofill-selected {
+      color: var(--lido-color-accentContrast) !important;
+      -webkit-text-fill-color: var(--lido-color-accentContrast) !important;
+    }
+  `
+};
+const InputStyle = styled.input`
+  width: 100%;
+  font-family: inherit;
+  font-weight: 400;
+  font-size: 1em;
+  line-height: 1.43em;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  outline: none;
+  position: relative;
+  top: ${_ref12 => {
+  let {
+    $labeled
+  } = _ref12;
+  return $labeled ? 8 : 0;
+}}px;
+
+  &::placeholder {
+    transition: opacity ${_ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.duration.fast;
+}} ease;
+  }
+
+  ${_ref14 => {
+  let {
+    $color
+  } = _ref14;
+  return inputColors[$color];
+}}
+  ${_ref15 => {
+  let {
+    $labeled
+  } = _ref15;
+  return $labeled ? labeledCSS : '';
+}}
+`;
+const TextareaStyle = styled(InputStyle).attrs({
+  as: 'textarea'
+})`
+  resize: none;
+`;
+const messageVariants = {
+  error: css`
+    background: var(--lido-color-error);
+    color: var(--lido-color-errorContrast);
+    box-shadow: ${_ref16 => {
+    let {
+      theme
+    } = _ref16;
+    return theme.boxShadows.sm;
+  }}
+      var(--lido-color-shadowLight);
+  `,
+  warning: css`
+    background: var(--lido-color-warning);
+    color: var(--lido-color-warningContrast);
+    box-shadow: ${_ref17 => {
+    let {
+      theme
+    } = _ref17;
+    return theme.boxShadows.sm;
+  }}
+      var(--lido-color-shadowLight);
+  `,
+  success: css`
+    background: var(--lido-color-success);
+    color: var(--lido-color-successContrast);
+    box-shadow: ${_ref18 => {
+    let {
+      theme
+    } = _ref18;
+    return theme.boxShadows.sm;
+  }}
+      var(--lido-color-shadowLight);
+  `
+};
+const InputMessageStyle = styled.span`
+  margin-top: ${_ref19 => {
+  let {
+    $bordered
+  } = _ref19;
+  return $bordered ? 5 : 6;
+}}px;
+  left: ${_ref20 => {
+  let {
+    $bordered
+  } = _ref20;
+  return $bordered ? -1 : 0;
+}}px;
+  position: absolute;
+  top: 100%;
+  line-height: 1.6em;
+  font-weight: 400;
+  font-size: ${_ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.fontSizesMap.xxs;
+}}px;
+  border-radius: ${_ref22 => {
+  let {
+    theme
+  } = _ref22;
+  return theme.borderRadiusesMap.sm;
+}}px;
+  padding: 6px 10px;
+  white-space: ${_ref23 => {
+  let {
+    $wrap
+  } = _ref23;
+  return $wrap ? 'wrap' : 'nowrap';
+}};
+  overflow: hidden;
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+  max-width: ${_ref24 => {
+  let {
+    $bordered
+  } = _ref24;
+  return $bordered ? 'calc(100% + 2px)' : '100%';
+}};
+  z-index: 3;
+
+  ${_ref25 => {
+  let {
+    $variant
+  } = _ref25;
+  return messageVariants[$variant];
+}}
+`;
+
+export { InputContentStyle, InputControlWrapperStyle, InputLeftDecoratorStyle, InputMessageStyle, InputRightDecoratorStyle, InputStyle, InputWrapperStyle, TextareaStyle };
+//# sourceMappingURL=InputStyles.mjs.map

package/dist/esm/input/InputStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputStyles.mjs","sources":["../../../src/input/InputStyles.ts"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\nimport { InputMessageVariants, InputVariants, InputColors } from './types.js'\nimport {\n  labelEmptyValueCSS,\n  labelFocusCSS,\n  labelErrorCSS,\n  InputLabelStyle,\n  labelWarningCSS,\n} from './LabelStyles.js'\n\nconst statesCSS = css`\n  &:hover {\n    z-index: 1;\n  }\n\n  &:focus-within {\n    z-index: 2;\n    border-color: var(--lido-color-borderActive);\n\n    ${InputLabelStyle} {\n      ${labelFocusCSS}\n    }\n  }\n`\n\nconst activeCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    z-index: 2;\n    border-color: var(--lido-color-borderActive);\n\n    ${InputLabelStyle} {\n      ${labelFocusCSS}\n    }\n  }\n`\n\nconst errorCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    border-color: var(--lido-color-error);\n\n    ${InputLabelStyle} {\n      ${labelErrorCSS}\n    }\n  }\n`\n\nconst warningCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    border-color: var(--lido-color-warning);\n\n    ${InputLabelStyle} {\n      ${labelWarningCSS}\n    }\n  }\n`\n\nconst wrapperColors = {\n  default: css<{ $disabled: boolean }>`\n    background: var(--lido-color-controlBg);\n    border-color: var(--lido-color-border);\n    color: var(--lido-color-text);\n\n    ${({ $disabled }) =>\n      $disabled\n        ? `background: var(--lido-color-background);`\n        : `\n          &:hover {\n            border-color: var(--lido-color-borderHover);\n          }\n    `};\n  `,\n  accent: css<{ $disabled: boolean }>`\n    background: var(--lido-color-accentControlBg);\n    border-color: var(--lido-color-accentBorder);\n    color: var(--lido-color-accentText);\n\n    ${({ $disabled }) =>\n      $disabled\n        ? `background: var(--lido-color-controlBg);`\n        : `\n          &:hover {\n            border-color: var(--lido-color-accentBorderHover);\n          }\n    `};\n  `,\n}\n\nconst decoratorCSS = css`\n  flex-grow: 0;\n  flex-shrink: 0;\n  cursor: inherit;\n  display: flex;\n  align-items: center;\n`\n\nexport const InputLeftDecoratorStyle = styled.span`\n  ${decoratorCSS}\n  padding-right: 16px;\n`\n\nexport const InputRightDecoratorStyle = styled.span`\n  ${decoratorCSS}\n  padding-left: 16px;\n`\n\nexport const InputWrapperStyle = styled.label<{\n  $fullwidth: boolean\n  $disabled: boolean\n}>`\n  position: relative;\n  display: inline-flex;\n  align-items: stretch;\n  box-sizing: border-box;\n  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'text')};\n  width: ${({ $fullwidth }) => ($fullwidth ? '100%' : 'auto')};\n`\n\nconst contentVariants = {\n  default: css`\n    padding-top: 17px;\n    padding-bottom: 17px;\n\n    & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} {\n      margin-top: -17px;\n      margin-bottom: -17px;\n    }\n  `,\n  small: css`\n    padding-top: 9px;\n    padding-bottom: 9px;\n\n    & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} {\n      padding-top: -9px;\n      padding-bottom: -9px;\n    }\n  `,\n}\n\nexport const InputContentStyle = styled.span<{\n  $error: boolean\n  $warning: boolean\n  $active: boolean\n  $disabled: boolean\n  $color: InputColors\n  $variant: InputVariants\n}>`\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-left: 15px;\n  padding-right: 15px;\n  font-weight: 400;\n  font-size: ${({ theme }) => theme.fontSizesMap.xs}px;\n  border: 1px solid;\n  border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;\n  transition: border-color ${({ theme }) => theme.duration.fast} ease;\n\n  ${({ $variant }) => contentVariants[$variant]};\n  ${({ $color }) => wrapperColors[$color]};\n  ${({ $disabled }) => ($disabled ? '' : statesCSS)};\n  ${({ $active }) => ($active ? activeCSS : '')};\n  ${({ $warning }) => ($warning ? warningCSS : '')};\n  ${({ $error }) => ($error ? errorCSS : '')};\n`\n\nexport const InputControlWrapperStyle = styled.div`\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n`\n\nconst labeledCSS = css`\n  &:not(:focus):placeholder-shown {\n    & + ${InputLabelStyle} {\n      ${labelEmptyValueCSS}\n    }\n\n    &::placeholder {\n      opacity: 0;\n    }\n  }\n`\n\nconst inputColors = {\n  default: css`\n    color: var(--lido-color-text);\n\n    &:disabled {\n      color: var(--lido-color-textSecondary);\n    }\n\n    &::placeholder {\n      color: var(--lido-color-textSecondary);\n    }\n\n    &:-webkit-autofill {\n      box-shadow: 0 0 0 100px var(--lido-color-controlBg) inset !important;\n      color: var(--lido-color-text) !important;\n      -webkit-text-fill-color: var(--lido-color-text) !important;\n    }\n\n    &:-internal-autofill-selected {\n      color: var(--lido-color-text) !important;\n      -webkit-text-fill-color: var(--lido-color-text) !important;\n    }\n  `,\n  accent: css`\n    color: var(--lido-color-accentText);\n    opacity: 1;\n\n    &:disabled {\n      color: var(--lido-color-accentText);\n      opacity: 0.5;\n    }\n\n    &::placeholder {\n      color: var(--lido-color-accentText);\n      opacity: 0.5;\n    }\n\n    &:-webkit-autofill {\n      box-shadow: 0 0 0 100px var(--lido-color-accentControlBg) inset !important;\n      color: var(--lido-color-accentContrast) !important;\n      -webkit-text-fill-color: var(--lido-color-accentContrast) !important;\n    }\n\n    &:-internal-autofill-selected {\n      color: var(--lido-color-accentContrast) !important;\n      -webkit-text-fill-color: var(--lido-color-accentContrast) !important;\n    }\n  `,\n}\n\nexport const InputStyle = styled.input<{\n  $labeled: boolean\n  $color: InputColors\n}>`\n  width: 100%;\n  font-family: inherit;\n  font-weight: 400;\n  font-size: 1em;\n  line-height: 1.43em;\n  padding: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  border: none;\n  outline: none;\n  position: relative;\n  top: ${({ $labeled }) => ($labeled ? 8 : 0)}px;\n\n  &::placeholder {\n    transition: opacity ${({ theme }) => theme.duration.fast} ease;\n  }\n\n  ${({ $color }) => inputColors[$color]}\n  ${({ $labeled }) => ($labeled ? labeledCSS : '')}\n`\n\nexport const TextareaStyle = styled(InputStyle).attrs({\n  as: 'textarea',\n})`\n  resize: none;\n`\n\nconst messageVariants = {\n  error: css`\n    background: var(--lido-color-error);\n    color: var(--lido-color-errorContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n  warning: css`\n    background: var(--lido-color-warning);\n    color: var(--lido-color-warningContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n  success: css`\n    background: var(--lido-color-success);\n    color: var(--lido-color-successContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n}\n\nexport const InputMessageStyle = styled.span<{\n  $variant: InputMessageVariants\n  $bordered?: boolean\n  $wrap?: boolean\n}>`\n  margin-top: ${({ $bordered }) => ($bordered ? 5 : 6)}px;\n  left: ${({ $bordered }) => ($bordered ? -1 : 0)}px;\n  position: absolute;\n  top: 100%;\n  line-height: 1.6em;\n  font-weight: 400;\n  font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n  border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;\n  padding: 6px 10px;\n  white-space: ${({ $wrap }) => ($wrap ? 'wrap' : 'nowrap')};\n  overflow: hidden;\n  box-sizing: border-box;\n  text-overflow: ellipsis;\n  max-width: ${({ $bordered }) => ($bordered ? 'calc(100% + 2px)' : '100%')};\n  z-index: 3;\n\n  ${({ $variant }) => messageVariants[$variant]}\n`\n"],"names":["statesCSS","css","InputLabelStyle","labelFocusCSS","activeCSS","errorCSS","labelErrorCSS","warningCSS","labelWarningCSS","wrapperColors","default","_ref","$disabled","accent","_ref2","decoratorCSS","InputLeftDecoratorStyle","styled","span","InputRightDecoratorStyle","InputWrapperStyle","label","_ref3","_ref4","$fullwidth","contentVariants","small","InputContentStyle","_ref5","theme","fontSizesMap","xs","_ref6","borderRadiusesMap","lg","_ref7","duration","fast","_ref8","$variant","_ref9","$color","_ref0","_ref1","$active","_ref10","$warning","_ref11","$error","InputControlWrapperStyle","div","labeledCSS","labelEmptyValueCSS","inputColors","InputStyle","input","_ref12","$labeled","_ref13","_ref14","_ref15","TextareaStyle","attrs","as","messageVariants","error","_ref16","boxShadows","sm","warning","_ref17","success","_ref18","InputMessageStyle","_ref19","$bordered","_ref20","_ref21","xxs","_ref22","_ref23","$wrap","_ref24","_ref25"],"mappings":"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"}

package/dist/esm/input/LabelStyles.mjs

@@ -0,0 +1,71 @@
+import styled from '../utils/styled-components-wrapper.mjs';
+import { css } from 'styled-components';
+
+const colors = {
+  default: css`
+    color: var(--lido-color-textSecondary);
+  `,
+  accent: css`
+    color: var(--lido-color-accentContrastSecondary);
+  `
+};
+const labelEmptyValueCSS = css`
+  ${_ref => {
+  let {
+    $color
+  } = _ref;
+  return colors[$color];
+}}
+
+  transform: scale(1);
+  opacity: 0.5;
+`;
+const labelFilledValueCSS = css`
+  ${_ref2 => {
+  let {
+    $color
+  } = _ref2;
+  return colors[$color];
+}}
+
+  transform: translateY(-14px) scale(0.75);
+  opacity: 1;
+`;
+const labelFocusCSS = css`
+  color: var(--lido-color-primary);
+  opacity: 1;
+`;
+const labelErrorCSS = css`
+  color: var(--lido-color-error);
+`;
+const labelWarningCSS = css`
+  color: var(--lido-color-warning);
+`;
+const InputLabelStyle = styled.span`
+  position: absolute;
+  left: 0;
+  top: 50%;
+  font-size: 1em;
+  line-height: 1.25em;
+  margin: -0.625em 0 0 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  color: inherit;
+  transform-origin: 0% 100%;
+  transition: transform ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.duration.fast;
+}} ease;
+  transition-property: transform, opacity, color;
+  ${labelFilledValueCSS};
+`;
+const TextareaLabelStyle = styled(InputLabelStyle)`
+  top: 10px;
+`;
+
+export { InputLabelStyle, TextareaLabelStyle, labelEmptyValueCSS, labelErrorCSS, labelFilledValueCSS, labelFocusCSS, labelWarningCSS };
+//# sourceMappingURL=LabelStyles.mjs.map

package/dist/esm/input/LabelStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelStyles.mjs","sources":["../../../src/input/LabelStyles.ts"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\nimport { InputColors } from './types.js'\n\nconst colors = {\n  default: css`\n    color: var(--lido-color-textSecondary);\n  `,\n  accent: css`\n    color: var(--lido-color-accentContrastSecondary);\n  `,\n}\n\nexport const labelEmptyValueCSS = css<{ $color: InputColors }>`\n  ${({ $color }) => colors[$color]}\n\n  transform: scale(1);\n  opacity: 0.5;\n`\n\nexport const labelFilledValueCSS = css<{ $color: InputColors }>`\n  ${({ $color }) => colors[$color]}\n\n  transform: translateY(-14px) scale(0.75);\n  opacity: 1;\n`\n\nexport const labelFocusCSS = css`\n  color: var(--lido-color-primary);\n  opacity: 1;\n`\n\nexport const labelErrorCSS = css`\n  color: var(--lido-color-error);\n`\n\nexport const labelWarningCSS = css`\n  color: var(--lido-color-warning);\n`\n\nexport const InputLabelStyle = styled.span`\n  position: absolute;\n  left: 0;\n  top: 50%;\n  font-size: 1em;\n  line-height: 1.25em;\n  margin: -0.625em 0 0 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  color: inherit;\n  transform-origin: 0% 100%;\n  transition: transform ${({ theme }) => theme.duration.fast} ease;\n  transition-property: transform, opacity, color;\n  ${labelFilledValueCSS};\n`\n\nexport const TextareaLabelStyle = styled(InputLabelStyle)`\n  top: 10px;\n`\n"],"names":["colors","default","css","accent","labelEmptyValueCSS","_ref","$color","labelFilledValueCSS","_ref2","labelFocusCSS","labelErrorCSS","labelWarningCSS","InputLabelStyle","styled","span","_ref3","theme","duration","fast","TextareaLabelStyle"],"mappings":";;;AAGA,MAAMA,MAAM,GAAG;AACbC,EAAAA,OAAO,EAAEC,GAAG,CAAA;AACd;AACA,EAAG,CAAA;AACDC,EAAAA,MAAM,EAAED,GAAG,CAAA;AACb;AACA,EAAA,CAAA;AACA,CAAC,CAAA;AAEM,MAAME,kBAAkB,GAAGF,GAA4B,CAAA;AAC9D,EAAA,EAAIG,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;EAAA,OAAKL,MAAM,CAACM,MAAM,CAAC,CAAA;AAAA,CAAA,CAAA;AAClC;AACA;AACA;AACA,EAAC;AAEM,MAAMC,mBAAmB,GAAGL,GAA4B,CAAA;AAC/D,EAAA,EAAIM,KAAA,IAAA;EAAA,IAAC;AAAEF,IAAAA,MAAAA;AAAO,GAAC,GAAAE,KAAA,CAAA;EAAA,OAAKR,MAAM,CAACM,MAAM,CAAC,CAAA;AAAA,CAAA,CAAA;AAClC;AACA;AACA;AACA,EAAC;AAEM,MAAMG,aAAa,GAAGP,GAAG,CAAA;AAChC;AACA;AACA,EAAC;AAEM,MAAMQ,aAAa,GAAGR,GAAG,CAAA;AAChC;AACA,EAAC;AAEM,MAAMS,eAAe,GAAGT,GAAG,CAAA;AAClC;AACA,EAAC;AAEYU,MAAAA,eAAe,GAAGC,MAAM,CAACC,IAAI,CAAA;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAA,EAA0BC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAKC,KAAK,CAACC,QAAQ,CAACC,IAAI,CAAA;AAAA,CAAA,CAAA;AAC5D;AACA,EAAA,EAAIX,mBAAmB,CAAA;AACvB,EAAC;MAEYY,kBAAkB,GAAGN,MAAM,CAACD,eAAe,CAAC,CAAA;AACzD;AACA;;;;"}

package/dist/esm/input/OptionsSlider.mjs

@@ -0,0 +1,46 @@
+import { SliderInput } from './SliderInput.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const OptionsSlider = _ref => {
+  let {
+    options,
+    value,
+    onChange,
+    ...rest
+  } = _ref;
+  let sliderIndex = options.findIndex(option => option.value === value);
+  if (sliderIndex === -1) {
+    sliderIndex = 0;
+  }
+  const max = options.length - 1;
+  const getLabel = optionIndex => {
+    return options[optionIndex].label;
+  };
+  const handleSliderChange = e => {
+    const optionIndex = Number(e.target.value);
+    onChange(options[optionIndex].value, optionIndex);
+  };
+  const labels = options.map((_ref2, index) => {
+    let {
+      label
+    } = _ref2;
+    return {
+      value: index,
+      label
+    };
+  });
+  return /*#__PURE__*/jsx(SliderInput, {
+    min: 0,
+    max: max,
+    value: sliderIndex,
+    onChange: handleSliderChange,
+    getLabel: getLabel,
+    labels: labels,
+    borderNone: true,
+    onLabelClick: optionIndex => onChange(options[optionIndex].value, optionIndex),
+    ...rest
+  });
+};
+
+export { OptionsSlider };
+//# sourceMappingURL=OptionsSlider.mjs.map

package/dist/esm/input/OptionsSlider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsSlider.mjs","sources":["../../../src/input/OptionsSlider.tsx"],"sourcesContent":["import { SliderInput } from './SliderInput.js'\nimport { OptionsSliderInputProps } from './types.js'\n\nexport const OptionsSlider = ({\n  options,\n  value,\n  onChange,\n  ...rest\n}: OptionsSliderInputProps) => {\n  let sliderIndex = options.findIndex((option) => option.value === value)\n\n  if (sliderIndex === -1) {\n    sliderIndex = 0\n  }\n\n  const max = options.length - 1\n\n  const getLabel = (optionIndex: number) => {\n    return options[optionIndex].label\n  }\n\n  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const optionIndex = Number(e.target.value)\n    onChange(options[optionIndex].value, optionIndex)\n  }\n\n  const labels = options.map(({ label }, index) => ({ value: index, label }))\n  return (\n    <SliderInput\n      min={0}\n      max={max}\n      value={sliderIndex}\n      onChange={handleSliderChange}\n      getLabel={getLabel}\n      labels={labels}\n      borderNone={true}\n      onLabelClick={(optionIndex) =>\n        onChange(options[optionIndex].value, optionIndex)\n      }\n      {...rest}\n    />\n  )\n}\n"],"names":["OptionsSlider","_ref","options","value","onChange","rest","sliderIndex","findIndex","option","max","length","getLabel","optionIndex","label","handleSliderChange","e","Number","target","labels","map","_ref2","index","_jsx","SliderInput","min","borderNone","onLabelClick"],"mappings":";;;AAGaA,MAAAA,aAAa,GAAGC,IAAA,IAKE;EAAA,IALD;IAC5BC,OAAO;IACPC,KAAK;IACLC,QAAQ;IACR,GAAGC,IAAAA;AACoB,GAAC,GAAAJ,IAAA,CAAA;AACxB,EAAA,IAAIK,WAAW,GAAGJ,OAAO,CAACK,SAAS,CAAEC,MAAM,IAAKA,MAAM,CAACL,KAAK,KAAKA,KAAK,CAAC,CAAA;AAEvE,EAAA,IAAIG,WAAW,KAAK,CAAC,CAAC,EAAE;AACtBA,IAAAA,WAAW,GAAG,CAAC,CAAA;AACjB,GAAA;AAEA,EAAA,MAAMG,GAAG,GAAGP,OAAO,CAACQ,MAAM,GAAG,CAAC,CAAA;EAE9B,MAAMC,QAAQ,GAAIC,WAAmB,IAAK;AACxC,IAAA,OAAOV,OAAO,CAACU,WAAW,CAAC,CAACC,KAAK,CAAA;GAClC,CAAA;EAED,MAAMC,kBAAkB,GAAIC,CAAsC,IAAK;IACrE,MAAMH,WAAW,GAAGI,MAAM,CAACD,CAAC,CAACE,MAAM,CAACd,KAAK,CAAC,CAAA;IAC1CC,QAAQ,CAACF,OAAO,CAACU,WAAW,CAAC,CAACT,KAAK,EAAES,WAAW,CAAC,CAAA;GAClD,CAAA;EAED,MAAMM,MAAM,GAAGhB,OAAO,CAACiB,GAAG,CAAC,CAAAC,KAAA,EAAYC,KAAK,KAAA;IAAA,IAAhB;AAAER,MAAAA,KAAAA;AAAM,KAAC,GAAAO,KAAA,CAAA;IAAA,OAAa;AAAEjB,MAAAA,KAAK,EAAEkB,KAAK;AAAER,MAAAA,KAAAA;KAAO,CAAA;AAAA,GAAC,CAAC,CAAA;EAC3E,oBACES,GAAA,CAACC,WAAW,EAAA;AACVC,IAAAA,GAAG,EAAE,CAAE;AACPf,IAAAA,GAAG,EAAEA,GAAI;AACTN,IAAAA,KAAK,EAAEG,WAAY;AACnBF,IAAAA,QAAQ,EAAEU,kBAAmB;AAC7BH,IAAAA,QAAQ,EAAEA,QAAS;AACnBO,IAAAA,MAAM,EAAEA,MAAO;AACfO,IAAAA,UAAU,EAAE,IAAK;AACjBC,IAAAA,YAAY,EAAGd,WAAW,IACxBR,QAAQ,CAACF,OAAO,CAACU,WAAW,CAAC,CAACT,KAAK,EAAES,WAAW,CACjD;IAAA,GACGP,IAAAA;AAAI,GACT,CAAC,CAAA;AAEN;;;;"}

package/dist/esm/input/SliderInput.mjs

@@ -0,0 +1,59 @@
+import { SliderWrapper, Slider, Track, RangeInputSlider, LabelContainer, LabelButton, Label } from './SliderInputStyles.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const SliderInput = _ref => {
+  let {
+    value,
+    onChange,
+    onLabelClick,
+    min = 0,
+    max = 100,
+    step = 1,
+    minLabel,
+    maxLabel,
+    getLabel = val => String(val),
+    borderNone,
+    labels,
+    ...rest
+  } = _ref;
+  const fillPercentage = (value - min) / (max - min) * 100;
+  const LabelComponent = onLabelClick ? LabelButton : Label;
+  const createClickHandler = value => () => onLabelClick?.(value);
+  return /*#__PURE__*/jsxs(SliderWrapper, {
+    children: [/*#__PURE__*/jsxs(Slider, {
+      borderNone: borderNone,
+      children: [getLabel(value), /*#__PURE__*/jsx(Track, {
+        fillPercentage: fillPercentage,
+        borderNone: borderNone
+      })]
+    }), /*#__PURE__*/jsx(RangeInputSlider, {
+      type: "range",
+      value: value,
+      step: step,
+      onChange: onChange,
+      min: min,
+      max: max,
+      ...rest
+    }), /*#__PURE__*/jsxs(LabelContainer, {
+      children: [minLabel && /*#__PURE__*/jsx(LabelComponent, {
+        onClick: createClickHandler(min),
+        children: minLabel
+      }), labels?.map(_ref2 => {
+        let {
+          value,
+          label
+        } = _ref2;
+        return /*#__PURE__*/jsx(LabelComponent, {
+          onClick: createClickHandler(value),
+          children: label
+        }, value);
+      }), maxLabel && /*#__PURE__*/jsx(LabelComponent, {
+        onClick: createClickHandler(max),
+        children: maxLabel
+      })]
+    })]
+  });
+};
+
+export { SliderInput };
+//# sourceMappingURL=SliderInput.mjs.map

package/dist/esm/input/SliderInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderInput.mjs","sources":["../../../src/input/SliderInput.tsx"],"sourcesContent":["import {\n  Label,\n  LabelButton,\n  LabelContainer,\n  RangeInputSlider,\n  Slider,\n  SliderWrapper,\n  Track,\n} from './SliderInputStyles.js'\nimport { SliderInputProps } from './types.js'\n\nexport const SliderInput = ({\n  value,\n  onChange,\n  onLabelClick,\n  min = 0,\n  max = 100,\n  step = 1,\n  minLabel,\n  maxLabel,\n  getLabel = (val) => String(val),\n  borderNone,\n  labels,\n  ...rest\n}: SliderInputProps) => {\n  const fillPercentage = ((value - min) / (max - min)) * 100\n  const LabelComponent = onLabelClick ? LabelButton : Label\n  const createClickHandler = (value: number) => () => onLabelClick?.(value)\n\n  return (\n    <SliderWrapper>\n      <Slider borderNone={borderNone}>\n        {getLabel(value)}\n        <Track fillPercentage={fillPercentage} borderNone={borderNone} />\n      </Slider>\n      <RangeInputSlider\n        type='range'\n        value={value}\n        step={step}\n        onChange={onChange}\n        min={min}\n        max={max}\n        {...rest}\n      />\n      <LabelContainer>\n        {minLabel && (\n          <LabelComponent onClick={createClickHandler(min)}>\n            {minLabel}\n          </LabelComponent>\n        )}\n        {labels?.map(({ value, label }) => (\n          <LabelComponent onClick={createClickHandler(value)} key={value}>\n            {label}\n          </LabelComponent>\n        ))}\n        {maxLabel && (\n          <LabelComponent onClick={createClickHandler(max)}>\n            {maxLabel}\n          </LabelComponent>\n        )}\n      </LabelContainer>\n    </SliderWrapper>\n  )\n}\n"],"names":["SliderInput","_ref","value","onChange","onLabelClick","min","max","step","minLabel","maxLabel","getLabel","val","String","borderNone","labels","rest","fillPercentage","LabelComponent","LabelButton","Label","createClickHandler","_jsxs","SliderWrapper","children","Slider","_jsx","Track","RangeInputSlider","type","LabelContainer","onClick","map","_ref2","label"],"mappings":";;;AAWaA,MAAAA,WAAW,GAAGC,IAAA,IAaH;EAAA,IAbI;IAC1BC,KAAK;IACLC,QAAQ;IACRC,YAAY;AACZC,IAAAA,GAAG,GAAG,CAAC;AACPC,IAAAA,GAAG,GAAG,GAAG;AACTC,IAAAA,IAAI,GAAG,CAAC;IACRC,QAAQ;IACRC,QAAQ;AACRC,IAAAA,QAAQ,GAAIC,GAAG,IAAKC,MAAM,CAACD,GAAG,CAAC;IAC/BE,UAAU;IACVC,MAAM;IACN,GAAGC,IAAAA;AACa,GAAC,GAAAd,IAAA,CAAA;AACjB,EAAA,MAAMe,cAAc,GAAI,CAACd,KAAK,GAAGG,GAAG,KAAKC,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAG,CAAA;AAC1D,EAAA,MAAMY,cAAc,GAAGb,YAAY,GAAGc,WAAW,GAAGC,KAAK,CAAA;EACzD,MAAMC,kBAAkB,GAAIlB,KAAa,IAAK,MAAME,YAAY,GAAGF,KAAK,CAAC,CAAA;EAEzE,oBACEmB,IAAA,CAACC,aAAa,EAAA;IAAAC,QAAA,EAAA,cACZF,IAAA,CAACG,MAAM,EAAA;AAACX,MAAAA,UAAU,EAAEA,UAAW;MAAAU,QAAA,EAAA,CAC5Bb,QAAQ,CAACR,KAAK,CAAC,eAChBuB,GAAA,CAACC,KAAK,EAAA;AAACV,QAAAA,cAAc,EAAEA,cAAe;AAACH,QAAAA,UAAU,EAAEA,UAAAA;AAAW,OAAE,CAAC,CAAA;AAAA,KAC3D,CAAC,eACTY,GAAA,CAACE,gBAAgB,EAAA;AACfC,MAAAA,IAAI,EAAC,OAAO;AACZ1B,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,IAAI,EAAEA,IAAK;AACXJ,MAAAA,QAAQ,EAAEA,QAAS;AACnBE,MAAAA,GAAG,EAAEA,GAAI;AACTC,MAAAA,GAAG,EAAEA,GAAI;MAAA,GACLS,IAAAA;AAAI,KACT,CAAC,eACFM,IAAA,CAACQ,cAAc,EAAA;AAAAN,MAAAA,QAAA,EACZf,CAAAA,QAAQ,iBACPiB,GAAA,CAACR,cAAc,EAAA;AAACa,QAAAA,OAAO,EAAEV,kBAAkB,CAACf,GAAG,CAAE;AAAAkB,QAAAA,QAAA,EAC9Cf,QAAAA;AAAQ,OACK,CACjB,EACAM,MAAM,EAAEiB,GAAG,CAACC,KAAA,IAAA;QAAA,IAAC;UAAE9B,KAAK;AAAE+B,UAAAA,KAAAA;AAAM,SAAC,GAAAD,KAAA,CAAA;QAAA,oBAC5BP,GAAA,CAACR,cAAc,EAAA;AAACa,UAAAA,OAAO,EAAEV,kBAAkB,CAAClB,KAAK,CAAE;AAAAqB,UAAAA,QAAA,EAChDU,KAAAA;AAAK,SAAA,EADiD/B,KAEzC,CAAC,CAAA;AAAA,OAClB,CAAC,EACDO,QAAQ,iBACPgB,GAAA,CAACR,cAAc,EAAA;AAACa,QAAAA,OAAO,EAAEV,kBAAkB,CAACd,GAAG,CAAE;AAAAiB,QAAAA,QAAA,EAC9Cd,QAAAA;AAAQ,OACK,CACjB,CAAA;AAAA,KACa,CAAC,CAAA;AAAA,GACJ,CAAC,CAAA;AAEpB;;;;"}