@mrshmllw/smores-react 6.0.0 → 6.0.2

package/dist/Button/Button.js

@@ -1,192 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Box } from '../Box/Box.js';
-import { Icon } from '../Icon/Icon.js';
-import { Loader } from '../Loader/Loader.js';
-import { theme } from '../theme.js';
-import { focusOutlineStyle } from '../utils/focusOutline.js';
-
-const Button = forwardRef((props, ref) => {
-  const {
-    children,
-    id,
-    className = "",
-    disabled = false,
-    handleClick,
-    loading = false,
-    primary = false,
-    secondary = false,
-    fallbackStyle = false,
-    textBtn = false,
-    smallButton = false,
-    icon,
-    trailingIcon = false,
-    forcedWidth = "",
-    form,
-    type,
-    ...otherProps
-  } = props;
-  return /* @__PURE__ */ jsxs(
-    Container,
-    {
-      as: "button",
-      id,
-      className,
-      disabled: disabled || loading,
-      onClick: handleClick,
-      $loading: loading,
-      primary,
-      secondary,
-      fallbackStyle,
-      textBtn,
-      smallButton,
-      icon,
-      trailingIcon,
-      forcedWidth,
-      ...form ? { form } : {},
-      type,
-      ...otherProps,
-      ref,
-      children: [
-        loading && /* @__PURE__ */ jsx(LoaderContainer, { children: /* @__PURE__ */ jsx(Loader, { color: "liquorice", height: "16" }) }),
-        /* @__PURE__ */ jsxs(ContentContainer, { icon, $loading: loading, children: [
-          !trailingIcon && icon && /* @__PURE__ */ jsx(
-            IconContainer,
-            {
-              trailingIcon,
-              render: icon,
-              size: smallButton ? 16 : 24,
-              color: "liquorice"
-            }
-          ),
-          /* @__PURE__ */ jsx(ChildrenContainer, { className: "childrenContainer", children }),
-          trailingIcon && icon && textBtn && /* @__PURE__ */ jsx(
-            IconContainer,
-            {
-              trailingIcon,
-              render: icon,
-              size: smallButton ? 16 : 24,
-              color: "liquorice",
-              className: "iconContainer"
-            }
-          )
-        ] })
-      ]
-    }
-  );
-});
-Button.displayName = "Button";
-const Container = styled(Box)(
-  ({
-    disabled,
-    $loading,
-    primary,
-    secondary,
-    forcedWidth,
-    fallbackStyle,
-    textBtn,
-    smallButton
-  }) => css`
-    position: relative;
-    background-color: ${theme.colors.marshmallowPink};
-    box-shadow: none;
-    color: ${theme.colors.liquorice};
-    padding: 0 20px;
-    outline: none;
-    border-radius: 10000px;
-    font-weight: ${theme.font.weight.medium};
-    cursor: ${disabled || $loading ? "not-allowed" : "pointer"};
-    line-height: 100%;
-    font-size: 16px;
-    opacity: ${disabled ? "0.5" : "1"};
-    width: ${forcedWidth ? forcedWidth : "auto"};
-
-    ${focusOutlineStyle}
-
-    ${primary && css`
-      color: ${theme.colors.liquorice};
-
-      &:hover {
-        background-color: ${!(disabled || $loading) && theme.colors.bubblegum};
-      }
-      &:active {
-        background-color: ${theme.colors.lollipop};
-      }
-    `}
-    ${secondary && css`
-      background-color: ${theme.colors.oatmeal};
-
-      &:hover {
-        background-color: ${!(disabled || $loading) && theme.colors.mascarpone};
-      }
-      &:active {
-        background-color: ${theme.colors.custard};
-      }
-    `}
-  ${fallbackStyle && css`
-      background-color: ${theme.colors.cream};
-
-      &:hover {
-        background-color: ${!(disabled || $loading) && theme.colors.coconut};
-      }
-      &:active {
-        background-color: ${theme.colors.mascarpone};
-      }
-    `}
-  ${smallButton && css`
-      padding: 0 10px;
-      min-width: 54px;
-      font-size: 14px;
-
-      .childrenContainer {
-        padding: 9px 0;
-      }
-
-      span {
-        margin: 0 5px 0 0;
-      }
-    `}
-  ${textBtn && css`
-      background-color: transparent;
-      padding: 0;
-      border-radius: 0;
-      text-decoration: underline;
-
-      &:hover {
-        background-color: ${!(disabled || $loading) && theme.colors.fairyFloss};
-      }
-      &:active {
-        background-color: transparent;
-        color: ${theme.colors.sesame};
-      }
-    `}
-  `
-);
-const LoaderContainer = styled.div`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-const ContentContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: ${({ icon }) => icon ? "space-evenly" : "center"};
-  opacity: ${({ $loading }) => $loading ? "0" : "1"};
-`;
-const IconContainer = styled(Icon)(
-  ({ trailingIcon }) => css`
-    margin: ${trailingIcon ? "0 0 0 10px" : "0 10px 0 0"};
-  `
-);
-const ChildrenContainer = styled.div`
-  padding: 16px 0;
-  flex-grow: 1;
-`;
-
-export { Button };

package/dist/Card/Card.js

@@ -1,124 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { darken } from 'polished';
-import styled, { css } from 'styled-components';
-import { Box } from '../Box/Box.js';
-import { Icon } from '../Icon/Icon.js';
-import { Text } from '../Text/Text.js';
-import { theme } from '../theme.js';
-import { focusOutlineStyle } from '../utils/focusOutline.js';
-
-const Card = ({
-  children,
-  leadingIcon,
-  title,
-  body,
-  visual,
-  tag,
-  cardOnClickAction,
-  rightAction,
-  buttonAction,
-  fallbackStyle = false,
-  visualHeight = "",
-  className = "",
-  maxWidth = "",
-  marginX = "",
-  marginY = "",
-  narrow = false,
-  wide = false,
-  ...otherProps
-}) => {
-  const addChildMargin = (!!leadingIcon || !!title || !!body) && children;
-  const isNotClickable = !cardOnClickAction;
-  return /* @__PURE__ */ jsxs(
-    Container,
-    {
-      className,
-      maxWidth,
-      marginX,
-      marginY,
-      narrow,
-      wide,
-      visual,
-      fallbackStyle,
-      isNotClickable,
-      onClick: cardOnClickAction,
-      tabIndex: isNotClickable ? void 0 : 0,
-      ...otherProps,
-      children: [
-        tag && visual && /* @__PURE__ */ jsx(TagWrapper, { children: tag }),
-        visual && /* @__PURE__ */ jsx(VisualWrapper, { visualHeight, children: /* @__PURE__ */ jsx(Visual, { visualUrl: visual, visualHeight }) }),
-        /* @__PURE__ */ jsxs(Box, { p: visual ? "16px" : { custom: "0px" }, children: [
-          /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", justifyContent: "space-between", children: [
-            /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", children: [
-              leadingIcon && /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  mr: "12px",
-                  render: leadingIcon,
-                  size: 24,
-                  color: "liquorice"
-                }
-              ),
-              /* @__PURE__ */ jsxs(Box, { children: [
-                title && /* @__PURE__ */ jsx(Text, { typo: "headline-regular", color: "liquorice", children: title }),
-                body && /* @__PURE__ */ jsx(Text, { typo: "body-regular", color: "sesame", children: body })
-              ] })
-            ] }),
-            rightAction && rightAction
-          ] }),
-          /* @__PURE__ */ jsx(Box, { mt: addChildMargin ? "16px" : { custom: "0px" }, children }),
-          buttonAction && /* @__PURE__ */ jsx(Box, { mt: "16px", children: buttonAction })
-        ] })
-      ]
-    }
-  );
-};
-const Container = styled(Box)`
-  background: ${({ fallbackStyle }) => fallbackStyle ? theme.colors.cream : theme.colors.custard};
-  box-sizing: border-box;
-  border-radius: 16px;
-
-  max-width: ${(p) => p.maxWidth};
-  margin-top: ${(p) => p.marginY};
-  margin-right: ${(p) => p.marginX};
-  margin-bottom: ${(p) => p.marginY};
-  margin-left: ${(p) => p.marginX};
-
-  padding: ${({ visual }) => visual ? "0px" : "16px"};
-  position: relative;
-  overflow: hidden;
-
-  ${({ isNotClickable, fallbackStyle }) => !isNotClickable && css`
-      cursor: pointer;
-      &:hover {
-        background: ${darken(
-  0.1,
-  fallbackStyle ? theme.colors.cream : theme.colors.custard
-)};
-      }
-
-      ${focusOutlineStyle}
-    `};
-`;
-const TagWrapper = styled(Box)`
-  position: absolute;
-  top: 12px;
-  right: 12px;
-`;
-const VisualWrapper = styled(Box)`
-  width: 100%;
-  margin-top: -16px;
-
-  ${({ visualHeight }) => visualHeight && `height: ${visualHeight};`}
-`;
-const Visual = styled(Box)`
-  width: 100%;
-  background-image: url('${(p) => p.visualUrl}');
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-
-  ${({ visualHeight }) => visualHeight ? `height: ${visualHeight};` : "padding-top: 100%;"}
-`;
-
-export { Card };

package/dist/CheckBox/CheckBox.js

@@ -1,128 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import styled from 'styled-components';
-import { focusOutline } from '../utils/focusOutline.js';
-import { Text } from '../Text/Text.js';
-import { theme } from '../theme.js';
-import { useUniqueId } from '../utils/id.js';
-
-const CheckBox = forwardRef(
-  function CheckBox2({ id: idProp, checked, children, toggle, error, errorMsg }, ref) {
-    const id = useUniqueId(idProp);
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(BoxContainer, { id, children: [
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            tag: "span",
-            typo: "base",
-            color: error ? "strawberry" : "liquorice",
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref,
-            type: "checkbox",
-            checked,
-            onChange: toggle
-          }
-        ),
-        /* @__PURE__ */ jsx(Checkmark, { error })
-      ] }),
-      error && errorMsg && /* @__PURE__ */ jsx(ErrorBox, { children: errorMsg })
-    ] });
-  }
-);
-const Checkmark = styled.span`
-  position: absolute;
-  left: 0;
-  width: 24px;
-  height: 24px;
-  border: ${({ error }) => error ? `solid 2px ${theme.colors.strawberry}` : `solid 2px ${theme.colors.liquorice}`};
-  box-sizing: border-box;
-  border-radius: 1px;
-
-  &:before {
-    content: '';
-    position: absolute;
-    display: none;
-    top: 9px;
-    left: 5px;
-    width: 3px;
-    height: 8px;
-    border-radius: 4px;
-    background-color: ${theme.colors.cream};
-    -webkit-transform: rotate(316deg);
-    -ms-transform: rotate(316deg);
-    transform: rotate(316deg);
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    display: none;
-    top: 3px;
-    left: 11px;
-    width: 3px;
-    height: 15px;
-    border-radius: 4px;
-    background-color: ${theme.colors.cream};
-    -webkit-transform: rotate(43deg);
-    -ms-transform: rotate(43deg);
-    transform: rotate(43deg);
-  }
-`;
-const BoxContainer = styled.label`
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  padding-left: 32px;
-  user-select: none;
-  cursor: pointer;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    background-color: ${theme.colors.cream};
-
-    &:checked ~ ${Checkmark} {
-      background-color: ${theme.colors.liquorice};
-      border: solid 2px ${theme.colors.liquorice};
-    }
-
-    &:checked ~ ${Checkmark}:before {
-      display: block;
-    }
-
-    &:checked ~ ${Checkmark}:after {
-      display: block;
-    }
-
-    ${focusOutline({ selector: `&:focus-visible ~ ${Checkmark}` })}
-  }
-
-  &:hover {
-    ${Checkmark} {
-      background-color: ${theme.colors.coconut};
-      border: solid 2px ${theme.colors.liquorice};
-    }
-  }
-
-  @media (min-width: 768px) {
-    padding-left: 32px;
-  }
-
-  span {
-    border-radius: 6px;
-  }
-`;
-const ErrorBox = styled.span`
-  padding-top: 8px;
-  font-size: 12px;
-  color: ${theme.colors.strawberry};
-`;
-
-export { CheckBox };

package/dist/CheckBoxGroup/CheckBoxGroup.js

@@ -1,27 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { Box } from '../Box/Box.js';
-import { CheckBox } from '../CheckBox/CheckBox.js';
-
-const CheckBoxGroup = ({
-  list,
-  onToggle,
-  ...marginProps
-}) => /* @__PURE__ */ jsx(Container, { children: list.map((item) => /* @__PURE__ */ jsx(
-  CheckBox,
-  {
-    id: String(item.id),
-    checked: item.checked,
-    toggle: () => onToggle(item.id),
-    ...marginProps,
-    children: item.label
-  },
-  item.id
-)) });
-const Container = styled(Box)`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
-
-export { CheckBoxGroup };

package/dist/Chip/Chip.js

@@ -1,87 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Box } from '../Box/Box.js';
-import { Icon } from '../Icon/Icon.js';
-import { Loader } from '../Loader/Loader.js';
-import { theme } from '../theme.js';
-import { focusOutline } from '../utils/focusOutline.js';
-
-const Chip = forwardRef(
-  ({
-    children,
-    handleClick,
-    primary = false,
-    secondary = false,
-    disabled = false,
-    loading = false,
-    icon,
-    ...props
-  }, ref) => /* @__PURE__ */ jsx(
-    Container,
-    {
-      as: "button",
-      primary,
-      secondary,
-      disabled: disabled || loading,
-      $loading: loading,
-      onClick: handleClick,
-      icon,
-      ...props,
-      ref,
-      children: loading ? /* @__PURE__ */ jsx(Loader, { color: primary ? "liquorice" : "cream", height: "16" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon && /* @__PURE__ */ jsx(
-          Icon,
-          {
-            render: icon,
-            size: 20,
-            color: primary ? "liquorice" : "cream"
-          }
-        ),
-        /* @__PURE__ */ jsx(ChildrenContainer, { children })
-      ] })
-    }
-  )
-);
-Chip.displayName = "Chip";
-const Container = styled(Box)(
-  ({ primary, secondary, icon, $loading, disabled }) => css`
-    ${focusOutline()}
-
-    align-items: center;
-    background-color: ${theme.colors.oatmeal};
-    border-radius: 100px;
-    border: 2px solid ${theme.colors.oatmeal};
-    color: ${theme.colors.liquorice};
-    display: flex;
-    font-size: 16px;
-    justify-content: ${icon ? "space-evenly" : "center"};
-    line-height: 100%;
-    padding: 8px 16px 8px ${icon ? "8px" : "16px"};
-    width: 98px;
-    min-height: 40px;
-    cursor: ${disabled || $loading ? "not-allowed" : "pointer"};
-    opacity: ${disabled ? "0.5" : "1"};
-
-    ${primary && css`
-      &:hover {
-        border: ${!(disabled || $loading) && `2px solid ${theme.colors.mascarpone}`};
-        background-color: ${!(disabled || $loading) && theme.colors.mascarpone};
-      }
-    `}
-    ${secondary && css`
-      color: ${theme.colors.cream};
-      background-color: ${theme.colors.liquorice};
-      border: 2px solid ${theme.colors.liquorice};
-      &:hover {
-        border: ${!(disabled || $loading) && `2px solid ${theme.colors.sesame}`};
-        background-color: ${!(disabled || $loading) && theme.colors.sesame};
-      }
-    `};
-  `
-);
-const ChildrenContainer = styled.div`
-  flex-grow: 1;
-`;
-
-export { Chip };

package/dist/CurrencyInput/CurrencyInput.js

@@ -1,90 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../Box/Box.js';
-import { Field } from '../fields/Field/Field.js';
-import { useUniqueId } from '../utils/id.js';
-import { StyledFrontIcon, Input } from '../fields/components/CommonInput.js';
-
-const CurrencyInput = forwardRef(function CurrencyInput2({
-  id: idProp,
-  placeholder,
-  name,
-  value,
-  decimalNumber = true,
-  onChange,
-  onInputChange,
-  onBlur,
-  min,
-  max,
-  disabled = false,
-  error = false,
-  fallbackStyle,
-  ...fieldProps
-}, ref) {
-  const id = useUniqueId(idProp);
-  const frontIcon = "pound-regular";
-  const formatCurrency = (value2) => {
-    const decimalIndex = value2.indexOf(".");
-    if (!decimalNumber) {
-      return Math.trunc(Number(value2)).toString();
-    }
-    if (decimalIndex >= 0 && value2.length > decimalIndex + 1) {
-      const fractionalString = value2.substring(decimalIndex + 1).substring(0, 2);
-      return `${value2.substring(0, decimalIndex)}.${fractionalString}`;
-    } else {
-      return value2;
-    }
-  };
-  const applyMinMax = (value2) => {
-    const numberValue = Number(value2);
-    if (min && numberValue < min)
-      return min.toString();
-    if (max && numberValue > max)
-      return max.toString();
-    return value2;
-  };
-  const handleChange = (value2) => {
-    if (onChange === void 0)
-      return;
-    const EMPTY_INPUT = "";
-    if (value2 === EMPTY_INPUT) {
-      onChange(value2);
-    } else {
-      const amount = formatCurrency(value2);
-      const normalisedValue = applyMinMax(amount);
-      onChange(normalisedValue);
-    }
-  };
-  return /* @__PURE__ */ jsx(Field, { ...fieldProps, htmlFor: id, error, children: /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", justifyContent: "flex-start", children: [
-    /* @__PURE__ */ jsx(
-      StyledFrontIcon,
-      {
-        disabled,
-        render: frontIcon,
-        color: "sesame"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        ref,
-        error,
-        disabled,
-        type: "number",
-        id,
-        name,
-        placeholder,
-        value,
-        frontIcon,
-        fallbackStyle,
-        onChange: (e) => {
-          onChange && handleChange(e.currentTarget.value);
-          onInputChange && onInputChange(e);
-        },
-        onBlur
-      }
-    )
-  ] }) });
-});
-
-export { CurrencyInput };