@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/Input/InputWithButton.styles.js

@@ -0,0 +1,57 @@
+import styled from "styled-components";
+import theme from "../../styles/theme.js";
+const Container = styled.div.withConfig({
+  shouldForwardProp: (props) => !["separatorTop"].includes(props)
+})`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  ${(props) => props.separatorTop && `
+    padding-top: 20px;
+    margin-top: 20px;
+    border-top: 1px solid ${theme.cLightGrey};
+  `}
+`;
+const InputWrap = styled.div`
+  flex-grow: 1;
+  z-index: 0;
+  position: relative;
+  margin-right: -40px;
+`;
+const ButtonWrap = styled.div`
+  z-index: 1;
+  position: relative;
+`;
+const Input = styled.input`
+  display: block;
+  border: 0;
+  height: 40px;
+  width: 100%;
+  padding: 9px 23px;
+  padding-right: 63px;
+  font-family: 'Open Sans';
+  font-size: 14px;
+  line-height: 20px;
+  border: 1px solid ${() => theme.cLightGrey};
+  border-radius: 20px;
+  outline: 0;
+  transition: border-color 0.2s;
+
+  &:focus,
+  &:hover {
+    border: 1px solid ${() => theme.cPrimary};
+  }
+
+  &::placeholder {
+    color: ${() => theme.cGrey2};
+    opacity: 1;
+  }
+`;
+export {
+  ButtonWrap,
+  Container,
+  Input,
+  InputWrap
+};

package/dist/components/Input/MultiSelect.js

@@ -0,0 +1,306 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import ReactSelect, { components } from "react-select";
+import styled from "styled-components";
+import { Wrapper, Label } from "./Input.styles.js";
+import { colors } from "../../styles/colors.js";
+import SvgCheckIcon from "../../static/images/check-icon.svg.js";
+import { SelectMenuList, SelectIcon } from "./Select.styles.js";
+const CountBadge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 6px;
+  background-color: ${colors.black};
+  color: ${colors.white};
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 600;
+  margin-left: 8px;
+`;
+const CheckboxWrapperDiv = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 16px 12px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: ${colors.grey};
+  }
+`;
+const CheckboxDiv = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isSelected"].includes(props)
+})`
+  width: 14px;
+  height: 14px;
+  border: 1px solid ${(props) => props.isSelected ? colors.black : colors.grey2};
+  border-radius: 3px;
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${(props) => props.isSelected ? colors.white : colors.white};
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+
+  svg {
+    opacity: ${(props) => props.isSelected ? 1 : 0};
+    transition: opacity 0.15s ease;
+    width: 8px;
+    height: 8px;
+  }
+
+  svg path {
+    stroke: ${colors.blue};
+  }
+`;
+const OptionLabel = styled.span`
+  font-size: 14px;
+  color: ${colors.black};
+  font-weight: 400;
+  letter-spacing: 0.6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+`;
+const PlaceholderText = styled.span`
+  font-size: 14px;
+  color: ${colors.black};
+  font-weight: 400;
+`;
+const CheckboxOption = (props) => {
+  const { isSelected, label, innerRef, innerProps } = props;
+  return /* @__PURE__ */ jsxs(CheckboxWrapperDiv, { ref: innerRef, ...innerProps, children: [
+    /* @__PURE__ */ jsx(CheckboxDiv, { isSelected, children: /* @__PURE__ */ jsx(SvgCheckIcon, {}) }),
+    /* @__PURE__ */ jsx(OptionLabel, { children: label })
+  ] });
+};
+const CountValueContainer = ({ children, selectProps, ...props }) => {
+  const { value, placeholder } = selectProps;
+  const count = value?.length || 0;
+  return /* @__PURE__ */ jsxs(components.ValueContainer, { ...props, selectProps, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx(PlaceholderText, { children: placeholder }),
+      count > 0 && /* @__PURE__ */ jsx(CountBadge, { children: count })
+    ] }),
+    children
+  ] });
+};
+const DropdownIndicator = (props) => {
+  const { selectProps } = props;
+  return /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsx(SelectIcon, { isMenuOpen: selectProps.menuIsOpen }) });
+};
+DropdownIndicator.propTypes = {
+  selectProps: PropTypes.instanceOf(Object).isRequired
+};
+const SelectMenuListWithScroll = (props) => {
+  const { children, selectProps } = props;
+  const { maxMenuHeight = 300 } = selectProps;
+  return /* @__PURE__ */ jsx(SelectMenuList, { autoHeight: true, autoHeightMax: maxMenuHeight, fullHeight: true, children });
+};
+SelectMenuListWithScroll.propTypes = {
+  children: PropTypes.node.isRequired
+};
+const MultiSelect = (props) => {
+  const {
+    id,
+    name,
+    label = "",
+    options,
+    search = false,
+    error = false,
+    touched = false,
+    value = [],
+    disabled,
+    menuHeight,
+    placeholder = "Select",
+    showCheckboxes = true,
+    showCountBadge = true,
+    closeMenuOnSelect = false,
+    hideSelectedOptions = false,
+    width = void 0,
+    minMenuWidth = 150,
+    maxMenuWidth = 300,
+    ...otherProps
+  } = props;
+  const hasValue = value?.length > 0;
+  const [labelUp, setLabelUp] = useState(hasValue);
+  const [hasFocus, setHasFocus] = useState(false);
+  useEffect(() => {
+    const currentHasValue = value?.length > 0;
+    setLabelUp(hasFocus || currentHasValue);
+  }, [hasFocus, value]);
+  const onFocus = () => {
+    props.onFocus?.({ name, value });
+    setHasFocus(true);
+  };
+  const onBlur = () => {
+    props.onBlur?.({ name, value });
+    setTimeout(() => {
+      setHasFocus(false);
+    }, 1);
+  };
+  const onChange = (selectedOptions2) => {
+    const newValue = selectedOptions2 ? selectedOptions2.map((opt) => opt.value) : [];
+    props.onChange?.({
+      name,
+      value: newValue
+    });
+    setTimeout(() => {
+      setHasFocus(true);
+    }, 1);
+  };
+  const selectedOptions = options?.filter((option) => value?.includes(option.value));
+  return /* @__PURE__ */ jsxs(Wrapper, { style: { width: width || "auto" }, children: [
+    label && /* @__PURE__ */ jsx(Label, { isUp: labelUp, active: hasFocus, error: error && touched, htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx(
+      ReactSelect,
+      {
+        ...otherProps,
+        id,
+        name,
+        options,
+        isDisabled: disabled,
+        onChange,
+        onBlur,
+        onFocus,
+        value: selectedOptions,
+        placeholder,
+        isSearchable: search,
+        isMulti: true,
+        openMenuOnFocus: true,
+        closeMenuOnSelect,
+        hideSelectedOptions,
+        maxMenuHeight: menuHeight,
+        styles: {
+          control: (baseStyle, state) => ({
+            ...baseStyle,
+            display: "flex",
+            alignItems: "center",
+            // minHeight: '44px',
+            padding: "0 10px",
+            backgroundColor: colors.white,
+            border: `1px solid ${state.isFocused ? colors.grey2 : colors.lightGrey}`,
+            borderRadius: "10px",
+            boxShadow: "none",
+            cursor: "pointer",
+            "&:hover": {
+              borderColor: colors.grey2
+            }
+          }),
+          menu: (baseStyle) => ({
+            ...baseStyle,
+            marginTop: "4px",
+            zIndex: 1e3,
+            borderRadius: "8px",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+            border: `1px solid ${colors.lightGrey}`,
+            overflow: "hidden",
+            minWidth: minMenuWidth,
+            maxWidth: maxMenuWidth,
+            width: "auto"
+          }),
+          menuList: (baseStyle) => ({
+            ...baseStyle,
+            padding: 0
+          }),
+          option: (baseStyle, state) => ({
+            ...baseStyle,
+            // When using checkboxes, padding is handled by CheckboxOption
+            // Otherwise, add padding for the default option
+            padding: showCheckboxes ? 0 : "12px 16px",
+            backgroundColor: state.isFocused ? colors.grey : "transparent",
+            color: colors.black,
+            cursor: "pointer",
+            fontWeight: state.isSelected ? 600 : 400,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            "&:active": {
+              backgroundColor: colors.grey
+            }
+          }),
+          valueContainer: (baseStyle) => ({
+            ...baseStyle,
+            padding: 0,
+            display: "flex",
+            alignItems: "center"
+          }),
+          placeholder: () => ({
+            display: "none"
+            // We handle placeholder in ValueContainer
+          }),
+          multiValue: () => ({
+            display: showCountBadge ? "none" : "flex"
+            // Hide tags when showing count
+          }),
+          input: (baseStyle) => ({
+            ...baseStyle,
+            margin: 0,
+            padding: 0
+          }),
+          indicatorsContainer: (baseStyle) => ({
+            ...baseStyle,
+            padding: 0,
+            gap: "4px"
+          }),
+          dropdownIndicator: (baseStyle) => ({
+            ...baseStyle,
+            padding: "4px"
+          }),
+          clearIndicator: (baseStyle) => ({
+            ...baseStyle,
+            padding: "4px"
+            // display: 'none',
+          })
+        },
+        components: {
+          DropdownIndicator,
+          IndicatorSeparator: null,
+          MenuList: SelectMenuListWithScroll,
+          Option: showCheckboxes ? CheckboxOption : components.Option,
+          ValueContainer: showCountBadge ? CountValueContainer : components.ValueContainer
+        }
+      }
+    )
+  ] });
+};
+MultiSelect.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  error: PropTypes.bool,
+  touched: PropTypes.bool,
+  value: PropTypes.arrayOf(PropTypes.string),
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
+    })
+  ).isRequired,
+  search: PropTypes.bool,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  showCheckboxes: PropTypes.bool,
+  showCountBadge: PropTypes.bool,
+  closeMenuOnSelect: PropTypes.bool,
+  hideSelectedOptions: PropTypes.bool,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minMenuWidth: PropTypes.number,
+  maxMenuWidth: PropTypes.number
+};
+export {
+  CheckboxDiv,
+  CheckboxWrapperDiv,
+  MultiSelect,
+  OptionLabel
+};

package/dist/components/Input/OtpInput.js

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Input from "react-otp-input";
+import { styled } from "styled-components";
+import { Wrapper, Label, InputWrap } from "./Input.styles.js";
+import theme from "../../styles/theme.js";
+import rwd from "../../styles/rwd.js";
+const inputStyle = {
+  outline: "none",
+  border: "none",
+  borderBottom: `1.5px solid ${theme.cBlack}`,
+  padding: "10px",
+  paddingBottom: "2px",
+  minWidth: 30,
+  fontSize: 16,
+  // fontWeight: 'bold',
+  marginTop: 4
+};
+const Separator = styled.span`
+  padding: 5px;
+  ${rwd.Mobile`
+    padding: 10px;
+  `}
+`;
+const OtpInput = (props) => {
+  const { value, numInputs = 4, RenderSeparator = Separator, inputType = "text", shouldAutoFocus = true, label } = props;
+  const [labelUp, setLabelUp] = useState(false);
+  const [hasFocus, setHasFocus] = useState(false);
+  const checkLabel = (focus) => {
+    setHasFocus(focus);
+    setLabelUp(!!value);
+  };
+  useEffect(() => {
+    checkLabel(false);
+  }, []);
+  useEffect(() => {
+    checkLabel(false);
+  }, [hasFocus, value]);
+  useEffect(() => {
+    if (value && !labelUp) setLabelUp(true);
+  }, [value, labelUp]);
+  const handleChange = (e, field) => {
+    const { onChange } = props;
+    onChange?.(e, field);
+  };
+  return /* @__PURE__ */ jsxs(Wrapper, { children: [
+    label && /* @__PURE__ */ jsx(Label, { isUp: true, style: { lineHeight: "inherit", top: "-5px" }, children: label }),
+    /* @__PURE__ */ jsx(InputWrap, { children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        value,
+        onChange: handleChange,
+        numInputs,
+        inputType,
+        shouldAutoFocus,
+        inputStyle,
+        renderSeparator: /* @__PURE__ */ jsx(RenderSeparator, {}),
+        renderInput: (_props) => {
+          return /* @__PURE__ */ jsx("input", { ..._props });
+        },
+        ...props
+      }
+    ) })
+  ] });
+};
+var stdin_default = OtpInput;
+export {
+  OtpInput,
+  stdin_default as default
+};

package/dist/components/Input/RangeInput.js

@@ -0,0 +1,80 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import RangeWrapper from "./RangeInput.styles.js";
+import { Range, getTrackBackground } from "react-range";
+import { colors } from "../../styles/colors.js";
+const RangeInput = ({
+  disabled = false,
+  max = 100,
+  min = 0,
+  step = 1,
+  onChange = () => {
+  },
+  value,
+  id,
+  name
+}) => {
+  const valuePercent = ((value - min) / (max - min) * 100).toFixed(2);
+  return /* @__PURE__ */ jsx(RangeWrapper, { valuePercent, children: /* @__PURE__ */ jsx(
+    Range,
+    {
+      id,
+      name,
+      disabled,
+      max,
+      min,
+      step,
+      values: [value],
+      onChange,
+      renderTrack: ({ props, children }) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...props,
+          style: {
+            ...props.style,
+            height: "9px",
+            width: "100%",
+            borderRadius: "10px",
+            backgroundColor: colors.lightGrey,
+            background: getTrackBackground({
+              values: [value],
+              colors: [colors.blue, colors.lightGrey],
+              min,
+              max
+            })
+          },
+          children
+        }
+      ),
+      renderThumb: ({ props }, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...props,
+          style: {
+            ...props.style,
+            height: "24px",
+            width: "24px",
+            backgroundColor: colors.blue,
+            borderRadius: "50%",
+            border: "4px solid white"
+          }
+        },
+        `${props?.key}-${index.toString()}`
+      )
+    }
+  ) });
+};
+RangeInput.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  max: PropTypes.number,
+  min: PropTypes.number,
+  step: PropTypes.number,
+  onChange: PropTypes.func,
+  value: PropTypes.number.isRequired
+};
+export {
+  RangeInput
+};

package/dist/components/Input/RangeInput.styles.js

@@ -0,0 +1,129 @@
+import styled, { css } from "styled-components";
+import theme from "../../styles/theme.js";
+const sliderThumbSize = 26;
+const sliderLineThickness = 8;
+const sliderThumbStyle = css`
+  background: ${() => theme.cPrimary};
+  border: 4px solid ${() => theme.cWhite};
+  height: ${sliderThumbSize}px;
+  width: ${sliderThumbSize}px;
+`;
+const sliderDefaultBackground = css`
+  background: ${(props) => `linear-gradient(${theme.cPrimary}, ${theme.cPrimary}) 0/ ${props.valuePercent}% 100% no-repeat ${theme.cLightGrey}`};
+`;
+const sliderTrackFocusedStyle = css`
+  background: ${(props) => `linear-gradient(${theme.cPrimaryDark}, ${theme.cPrimaryDark}) 0/ ${props.valuePercent}% 100% no-repeat ${theme.cLightGrey}`};
+`;
+const sliderTrackStyle = css`
+  /* background: ${() => theme.cLightGrey}; */
+  border-radius: ${sliderLineThickness / 2}px;
+  height: ${sliderLineThickness}px;
+  ${sliderDefaultBackground};
+`;
+const sliderThumbFocusedStyle = css`
+  border-color: ${() => theme.cLightGrey};
+`;
+const sliderThumbHoverStyle = css`
+  background: ${() => theme.cPrimaryDark};
+`;
+const chromeRangeInputStyle = css`
+  &::-webkit-slider-thumb {
+    margin-top: -${sliderThumbSize / 2 - sliderLineThickness / 2}px;
+    ${sliderThumbStyle};
+  }
+
+  &:focus::-webkit-slider-thumb {
+    ${sliderThumbFocusedStyle};
+  }
+
+  &:hover::-webkit-slider-thumb {
+    ${sliderThumbHoverStyle};
+  }
+
+  &::-webkit-slider-runnable-track {
+    ${sliderTrackStyle};
+  }
+
+  &:focus::-webkit-slider-runnable-track {
+    ${sliderDefaultBackground};
+  }
+
+  &:active::-webkit-slider-runnable-track,
+  &:hover::-webkit-slider-runnable-track {
+    ${sliderTrackFocusedStyle};
+  }
+`;
+const firefoxRangeInputStyle = css`
+  &::-moz-range-thumb {
+    ${sliderThumbStyle};
+  }
+
+  &:focus::-moz-range-thumb {
+    ${sliderThumbFocusedStyle};
+  }
+
+  &:hover::-moz-range-thumb {
+    ${sliderThumbHoverStyle};
+  }
+
+  &::-moz-range-track {
+    ${sliderTrackStyle};
+  }
+
+  &:focus::-moz-range-track {
+    ${sliderDefaultBackground};
+  }
+
+  &:active::-moz-range-track,
+  &:hover::-moz-range-track {
+    ${sliderTrackFocusedStyle};
+  }
+`;
+const IERangeInputStyle = css`
+  &::-ms-thumb {
+    ${sliderThumbStyle};
+    margin-top: -${sliderThumbSize / 2 - sliderLineThickness / 2}px;
+  }
+
+  &:focus::-ms-thumb {
+    ${sliderThumbFocusedStyle};
+  }
+
+  &:hover::-ms-thumb {
+    ${sliderThumbHoverStyle};
+  }
+
+  &::-ms-track {
+    height: ${sliderLineThickness}px;
+  }
+
+  &::-ms-fill-lower {
+    background: ${() => theme.cPrimary};
+    border-radius: ${sliderLineThickness / 2}px;
+  }
+
+  &::-ms-fill-upper {
+    background: ${() => theme.cLightGrey};
+    border-radius: ${sliderLineThickness / 2}px;
+  }
+
+  &:active::-ms-fill-lower,
+  &:hover::-ms-fill-lower {
+    background: ${() => theme.cPrimaryDark};
+  }
+
+  &:active::-ms-fill-upper,
+  &:hover::-ms-fill-upper {
+    background: ${() => theme.cLightGrey};
+  }
+`;
+const RangeWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["valuePercent"].includes(props)
+})`
+  input {
+    ${chromeRangeInputStyle} ${firefoxRangeInputStyle} ${IERangeInputStyle};
+  }
+`;
+export {
+  RangeWrapper as default
+};

package/dist/components/Input/SearchInput.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { SearchInputContainer, SearchInputWrapper, SearchIconWrapper, SearchInputField } from "./SearchInput.styles.js";
+import SvgSearchIcon from "../../static/images/search-icon.svg.js";
+const SearchInput = ({
+  value = "",
+  onChange,
+  placeholder = "Search",
+  icon,
+  showIcon = true,
+  disabled = false,
+  variant = "filled",
+  // 'filled' or 'outlined'
+  onFocus,
+  onBlur,
+  className,
+  containerStyle,
+  inputStyle,
+  iconStyle,
+  id,
+  name,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) => {
+  const handleChange = (e) => {
+    if (onChange) {
+      onChange(e.target.value, e);
+    }
+  };
+  const handleFocus = (e) => {
+    if (onFocus) {
+      onFocus(e);
+    }
+  };
+  const handleBlur = (e) => {
+    if (onBlur) {
+      onBlur(e);
+    }
+  };
+  const generatedId = useId();
+  const inputId = id || `search-input-${generatedId}`;
+  const inputName = name || inputId;
+  return /* @__PURE__ */ jsx(SearchInputContainer, { className, style: containerStyle, children: /* @__PURE__ */ jsxs(SearchInputWrapper, { disabled, variant, children: [
+    showIcon && /* @__PURE__ */ jsx(SearchIconWrapper, { style: iconStyle, children: icon || /* @__PURE__ */ jsx(SvgSearchIcon, {}) }),
+    /* @__PURE__ */ jsx(
+      SearchInputField,
+      {
+        id: inputId,
+        name: inputName,
+        type: "search",
+        value,
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        placeholder,
+        disabled,
+        "aria-label": ariaLabel || placeholder,
+        "aria-describedby": ariaDescribedBy,
+        style: inputStyle,
+        ...props
+      }
+    )
+  ] }) });
+};
+export {
+  SearchInput
+};