@soul-refiner/design-system 1.6.1-alpha.3 → 1.6.2

package/dist/components/input/filter/filter.js

@@ -0,0 +1,304 @@
+'use client';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box, Button, P } from '../../';
+import { ChevronDown, ChevronUp } from '../../../icons';
+import { Styles } from '../../../common';
+import { Spacer, Option } from './filter_option';
+const Filter = ({ closeOnBlur = true, disabled, graphic, label = '', sx, triggerType, options, defaultValue = '', closeOnChange = true, optionOnChange, checkbox, applyOnClick, resetOnClick, }) => {
+    const multiple = !!checkbox;
+    const wrapperRef = React.useRef(null);
+    const optionsRef = React.useRef(null);
+    const [open, setOpen] = React.useState(false);
+    const [selected, setSelected] = React.useState(() => defaultValue ? defaultValue : multiple ? [] : '');
+    const [filterLabel, setFilterLabel] = React.useState('');
+    React.useEffect(() => {
+        if (disabled) {
+            setOpen(false);
+        }
+    }, [disabled]);
+    React.useEffect(() => {
+        if (triggerType === 'outlined' && defaultValue === undefined) {
+            setSelected(multiple
+                ? [options[0]?.value]
+                : options[0]?.value);
+        }
+    }, [triggerType, defaultValue]);
+    React.useEffect(() => {
+        if (open) {
+            return;
+        }
+        if (!selected.length) {
+            setFilterLabel(label);
+            return;
+        }
+        // not using selected[0] since it is required to show the first
+        const firstSelected = options.find((option) => typeof option !== 'string' && isSelected(option.value));
+        if (typeof selected === 'string') {
+            setFilterLabel(firstSelected.label);
+            return;
+        }
+        setFilterLabel(selected.length > 1
+            ? `${firstSelected.label} +${selected.length - 1}`
+            : firstSelected.label);
+    }, [selected, options, open]);
+    const handleOpen = () => {
+        if (disabled) {
+            return;
+        }
+        setOpen((prev) => !prev);
+    };
+    const handleBlur = (event) => {
+        if (closeOnBlur &&
+            wrapperRef?.current &&
+            !wrapperRef?.current?.contains(event.relatedTarget)) {
+            setOpen(false);
+        }
+    };
+    const handleChangeSingle = (event) => {
+        event.stopPropagation();
+        const value = event.target.getAttribute('data-value') ?? '';
+        if (selected !== value) {
+            setSelected(value);
+        }
+        else {
+            setSelected('');
+        }
+        if (closeOnChange && !applyOnClick) {
+            setOpen(false);
+        }
+        if (optionOnChange)
+            optionOnChange(event);
+    };
+    const handleChangeMultiple = (event) => {
+        event.stopPropagation();
+        const value = event.target.getAttribute('data-value') ?? '';
+        if (Array.isArray(selected) && selected.includes(value)) {
+            setSelected((prev) => prev.filter((item) => item !== value));
+        }
+        else {
+            setSelected((prev) => [value, ...prev]);
+        }
+        if (closeOnChange && !applyOnClick) {
+            setOpen(false);
+        }
+        if (optionOnChange)
+            optionOnChange(event);
+    };
+    const handleChange = multiple ? handleChangeMultiple : handleChangeSingle;
+    const isSelected = (value) => multiple ? selected.includes(value) : value === selected;
+    const dropdownOptions = [
+        ...options.map((option, index) => {
+            if (typeof option === 'string' && option === 'break') {
+                return React.createElement(Spacer, { key: `${React.useId()}-spacer-${index}` });
+            }
+            return (React.createElement(Option, { key: option.value, onClick: handleChange, selected: isSelected(option.value), checkbox: checkbox, radio: !multiple && triggerType === 'pill', showClose: index === 0 && triggerType === 'pill', onClose: () => setOpen(false), ...option }));
+        }),
+        triggerType === 'pill' && React.createElement(Spacer, { key: `spacer-${options.length}` }),
+    ];
+    return (React.createElement(Wrapper, { "$sx": sx, tabIndex: 0, ref: wrapperRef, onBlurCapture: handleBlur },
+        React.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, label: label, onClick: handleOpen, open: open, type: triggerType, value: filterLabel }),
+        open && (React.createElement(Container, { ref: optionsRef },
+            React.createElement(React.Fragment, null,
+                dropdownOptions,
+                triggerType === 'pill' && (React.createElement(Box, { "$display": "flex", "$dir": "row", "$align": "center", "$justify": "flex-end", "$gap": 8, sx: "margin-top: 8px; padding-right: 8px; padding-bottom: 8px" },
+                    React.createElement(Button, { onClick: (event) => {
+                            resetOnClick && resetOnClick(event);
+                            setSelected(multiple ? [] : '');
+                            setOpen(false);
+                        }, size: "small", type: "text" }, "Reset"),
+                    React.createElement(Button, { onClick: (event) => {
+                            applyOnClick && applyOnClick(event);
+                            setOpen(false);
+                        }, size: "small", type: "primary" }, "Apply"))))))));
+};
+const Wrapper = styled.div `
+  position: relative;
+  display: block;
+  outline: none;
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Container = styled.div `
+  position: absolute;
+  width: max-content;
+  z-index: 100;
+  outline: none;
+  box-shadow: var(--elevation-2);
+  background-color: var(--color-white);
+  cursor: pointer;
+  border-radius: 8px;
+
+  & > div:first-of-type {
+    border-radius: 8px 8px 0px 0px;
+  }
+
+  & > div:last-of-type {
+    border-radius: 0px 0px 8px 8px;
+  }
+`;
+/********************************************************
+ *  Triggers
+ */
+const textProps = {
+    as: 'span',
+    $fontSize: 14,
+    $lineHeight: 20,
+};
+const wrapperProps = {
+    $align: 'center',
+    $dir: 'row',
+    $gap: 16,
+};
+const FilterTrigger = ({ disabled, graphic, label, onClick, open, type, value, }) => {
+    if (type === 'pill') {
+        return (React.createElement(Pill, { disabled: disabled, onClick: onClick, "$labelIsDefault": value === label, ...wrapperProps },
+            graphic,
+            React.createElement(P, { ...textProps }, value),
+            !graphic && (open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))));
+    }
+    if (type === 'labeled') {
+        return (React.createElement(Labeled, { disabled: disabled, onClick: onClick, ...wrapperProps },
+            React.createElement(P, { ...textProps }, label),
+            React.createElement(LabelSeparator, null),
+            React.createElement(P, { "$color": "primary-blue-2", "$mediumBold": true, ...textProps }, value),
+            open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null)));
+    }
+    if (type === 'avatar') {
+        return (React.createElement(Avatar, { "$align": "center", "$dir": "row", "$gap": 8, disabled: disabled, onClick: onClick },
+            graphic,
+            open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null)));
+    }
+    if (type === 'text') {
+        return (React.createElement(Text, { disabled: disabled, onClick: onClick, ...wrapperProps },
+            React.createElement(P, { "$color": "grey-4", "$semiBold": true, ...textProps },
+                label,
+                ":"),
+            React.createElement(P, { "$color": "primary-blue-2", "$semiBold": true, className: "filter-trigger-value", ...textProps }, value),
+            open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null)));
+    }
+    return (React.createElement(Outlined, { disabled: disabled, onClick: onClick, ...wrapperProps },
+        graphic,
+        React.createElement(P, { ...textProps }, value),
+        !graphic && (open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))));
+};
+Filter.Trigger = FilterTrigger;
+FilterTrigger.displayName = 'Filter.Trigger';
+const sharedStyles = css `
+  display: flex;
+  padding: 10px 16px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+
+  &:disabled {
+    background-color: var(--color-grey-9);
+    border: 1px solid var(--color-grey-8);
+    pointer-events: none;
+
+    & > * {
+      color: var(--color-grey-7);
+      fill: var(--color-grey-7);
+    }
+  }
+`;
+const Outlined = styled.button `
+  ${sharedStyles}
+  ${Styles.flex}
+  border: 1px solid var(--color-grey-8);
+  border-radius: 8px;
+  background-color: var(--color-white);
+  font-family: var(--font-inter);
+
+  &:hover {
+    background-color: var(--color-grey-9);
+  }
+`;
+const Pill = styled.button `
+  ${sharedStyles}
+  ${Styles.flex}
+  border: 1px solid var(--color-grey-8);
+  border-radius: 24px;
+  background-color: var(--color-white);
+  font-family: var(--font-inter);
+
+  ${({ $labelIsDefault }) => !$labelIsDefault
+    ? `
+      & > * {
+        color: var(--color-primary-blue-2);
+        fill: currentColor;
+
+        &:hover {
+          color: var(--color-primary-blue-1);
+          background-color: var(--color-primary-blue-4);
+        }
+      }
+
+      &:hover {
+        background-color: var(--color-primary-blue-4);
+      }
+    `
+    : ''}
+`;
+const Labeled = styled.button `
+  ${sharedStyles}
+  ${Styles.flex}
+  border-radius: 24px;
+  border: 1px solid var(--color-grey-8);
+  background-color: var(--color-white);
+  font-family: var(--font-inter);
+
+  &:hover {
+    background-color: var(--color-grey-9);
+  }
+`;
+const LabelSeparator = styled.div `
+  width: 1px;
+  height: 20px;
+  background-color: var(--color-grey-8);
+`;
+const Avatar = styled.button `
+  ${sharedStyles}
+  ${Styles.flex}
+  padding: 4px 16px;
+  border-radius: 32px;
+  font-family: var(--font-inter);
+
+  &:hover {
+    background-color: var(--color-grey-10);
+  }
+
+  &:active {
+    background-color: var(--color-grey-9);
+  }
+
+  &:disabled {
+    img {
+      opacity: 0.5;
+    }
+  }
+`;
+const Text = styled.button `
+  ${sharedStyles}
+  ${Styles.flex}
+  gap: 8px;
+  background-color: transparent;
+  border-radius: 32px;
+  font-family: var(--font-inter);
+
+  &:hover {
+    background-color: var(--color-grey-10);
+  }
+
+  &:active {
+    & > .filter-trigger-value {
+      color: var(--color-primary-blue-0);
+    }
+  }
+
+  &:disabled {
+    background-color: transparent;
+    border: 1px solid transparent;
+  }
+`;
+export { Filter };

package/dist/components/input/filter/filter_option.js

@@ -0,0 +1,70 @@
+'use client';
+import React from 'react';
+import styled from 'styled-components';
+import { Box, P, Checkbox, Radio } from '../..';
+import { Close } from '../../../icons';
+const Option = ({ label, onClick, selected, sx, value, checkbox, radio = false, showClose = false, onClose, }) => {
+    return (React.createElement(OptionWrapper, { "data-value": value, onClick: onClick, "$selected": selected, "$sx": sx, "$hasCheckbox": !!checkbox },
+        checkbox && React.createElement(Checkbox, { selected: selected }),
+        radio && React.createElement(Radio, { checked: selected, value: value }),
+        React.createElement(Box, { "$dir": "column", "$display": "flex" }, label && (React.createElement(P, { "$color": "grey-4", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 1 }, label))),
+        showClose && (React.createElement(Close, { sx: "margin-left: auto; pointer-events: auto !important;", size: 16, onClick: (event) => {
+                event.stopPropagation();
+                onClose && onClose();
+            } }))));
+};
+Option.displayName = 'Filter.Option';
+const OptionWrapper = styled.div `
+  position: relative;
+  z-index: 1;
+  padding: 12px 16px;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 217px;
+
+  & > * {
+    pointer-events: none;
+  }
+
+  ${({ $selected, $hasCheckbox }) => {
+    if ($selected) {
+        return `
+      background-color: var(--color-grey-9);
+      &:active {
+        background-color: var(--color-grey-8);
+      }`;
+    }
+    if ($hasCheckbox) {
+        return `&:hover {
+        background-color: var(--color-grey-10);
+      }`;
+    }
+    return `
+    &:hover {
+      background-color: var(--color-grey-10);
+    }
+
+    &:active {
+      background-color: var(--color-grey-8);
+    }
+    `;
+}}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+export const Spacer = ({ sx }) => {
+    return React.createElement(SpacerWrapper, { "$sx": sx });
+};
+Spacer.displayName = 'Filter.Spacer';
+const SpacerWrapper = styled.div `
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-grey-8);
+
+  &:hover {
+    appearance: none;
+  }
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+export { Option };

package/dist/components/input/filter/index.js

@@ -0,0 +1 @@
+export { Filter } from './filter';

package/dist/components/input/index.js

@@ -0,0 +1,10 @@
+export { Checkbox } from './checkbox';
+export { DatePicker } from './date';
+export { Filter } from './filter';
+export { Radio } from './radio';
+export { Search } from './search';
+export { Select } from './select';
+export { TextArea } from './text_area';
+export { TextInput } from './text_input';
+export { CalendarInput } from './calendar';
+export { Time } from './time';

package/dist/components/input/radio/index.js

@@ -0,0 +1 @@
+export { Radio } from './radio';

package/dist/components/input/radio/radio.js

@@ -0,0 +1,78 @@
+'use client';
+import React from 'react';
+import styled from 'styled-components';
+import { Box, P } from '../../';
+const Radio = ({ checked = false, disabled, label, onClick, reversed, sx, value, ...rest }) => {
+    const handleChange = (event) => {
+        event.stopPropagation();
+        onClick && onClick(event);
+    };
+    return (React.createElement(Label, { "$disabled": disabled, "$reversed": reversed, "$sx": sx, onClick: handleChange },
+        React.createElement(Input, { checked: checked, disabled: disabled, type: "radio", value: value, ...rest }),
+        React.createElement(P, { as: "span" }, label)));
+};
+const Label = styled.label `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  user-select: none;
+
+  ${({ $disabled }) => $disabled
+    ? `
+    & > * {
+      color: var(--color-grey-7);
+    }`
+    : `
+    cursor: pointer;
+    &:hover {
+      input {
+        border-color: var(--color-primary-blue-2);
+      }
+    }`}
+  flex-direction: ${({ $reversed }) => ($reversed ? 'row-reverse' : 'row')};
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Input = styled.input `
+  appearance: none;
+  position: relative;
+  height: 20px;
+  width: 20px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-grey-8);
+  cursor: pointer;
+  border-radius: 50%;
+
+  &:checked {
+    border-color: var(--color-primary-blue-2);
+    &::after {
+      content: '';
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: var(--color-primary-blue-2);
+    }
+  }
+
+  &:disabled {
+    &:checked {
+      border-color: var(--color-grey-8);
+      &::after {
+        background-color: var(--color-grey-7);
+      }
+    }
+  }
+`;
+const RadioGroup = ({ children, name, ...rest }) => {
+    return (React.createElement(Box, { ...rest }, React.Children.map(children, (child) => {
+        if (React.isValidElement(child))
+            return React.createElement(Radio, { key: child.key, name: name, ...child.props });
+    })));
+};
+Radio.Group = RadioGroup;
+RadioGroup.displayName = 'Radio.Group';
+export { Radio };

package/dist/components/input/search/index.js

@@ -0,0 +1 @@
+export { Search } from './search';

package/dist/components/input/search/search.js

@@ -0,0 +1,138 @@
+'use client';
+import React from 'react';
+import styled from 'styled-components';
+import { Styles } from '../../../common';
+import { Close, Search as SearchIcon } from '../../../icons';
+export const Search = ({ dropdownFilter, onChange, onClearText, onSubmit, placeholder, size, sx, value, }) => {
+    const [expanded, setExpanded] = React.useState(false);
+    const [focused, setFocused] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const isCollapsed = !expanded && size === 'collapsed';
+    const iconSize = isCollapsed || size === 'large' ? 24 : 16;
+    const handleExpand = () => {
+        setExpanded(true);
+        inputRef?.current?.focus();
+    };
+    const handleCollapse = () => {
+        setExpanded(false);
+        setFocused(false);
+        inputRef?.current?.blur();
+    };
+    const handleFocus = () => {
+        inputRef?.current?.focus();
+    };
+    return (React.createElement(Wrapper, { "$align": "center", "$dir": "row", "$isCollapsed": isCollapsed, "$isFocused": focused, "$borderRadius": "large", "$size": size, "$sx": sx, onClick: dropdownFilter && size === 'large'
+            ? undefined
+            : isCollapsed
+                ? handleExpand
+                : handleFocus },
+        React.createElement(SearchIcon, { color: size === 'large' ? 'blue-7' : 'grey-3', size: iconSize, onClick: isCollapsed ? undefined : handleCollapse, sx: isCollapsed || size !== 'collapsed'
+                ? undefined
+                : `
+          &:hover {
+            cursor: pointer;
+            background-color: var(--color-grey-10);
+            border-radius: 50%;
+          }` }),
+        React.createElement(Input, { "$isCollapsed": isCollapsed, onBlur: () => setFocused(false), onChange: onChange, onFocus: () => setFocused(true), onSubmit: onSubmit, placeholder: placeholder, ref: inputRef, value: value }),
+        !isCollapsed && onClearText && (React.createElement(Close, { size: 16, onClick: onClearText, sx: `
+            ${value.length === 0 ? 'visibility: hidden;' : ''}
+            padding: 4px;
+            &:hover {
+              cursor: pointer;
+              background-color: var(--color-grey-10);
+              border-radius: 50%;
+            }` })),
+        size === 'large' && dropdownFilter && (React.createElement(React.Fragment, null,
+            React.createElement(Separator, null),
+            dropdownFilter))));
+};
+const Wrapper = styled.div `
+  ${Styles.flex}
+  ${Styles.padding}
+  display: flex;
+  background-color: var(--color-white);
+  border: 1px solid transparent;
+
+  & > * {
+    width: fit-content;
+    flex-shrink: 0;
+  }
+
+  ${({ $isCollapsed, $size }) => $isCollapsed
+    ? `
+    padding: 12px;
+    border-radius: 50%;
+    &:hover {
+      background-color: var(--color-grey-10);
+      cursor: pointer;
+    }`
+    : `
+    border-radius: 8px;
+    ${$size === 'collapsed'
+        ? // collapsed
+            `
+      gap: 8px;
+      padding: 10px 16px;
+      border: 1px solid var(--color-grey-8);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`
+        : $size === 'small'
+            ? // small
+                `
+      gap: 12px;
+      padding: 10px 16px;
+      border: 1px solid var(--color-grey-8);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`
+            : $size === 'medium'
+                ? // medium
+                    `
+      gap: 12px;
+      padding: 14px 16px;
+      border: 1px solid var(--color-grey-8);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`
+                : // large
+                    `
+      gap: 16px;
+      padding: 16px;
+      box-shadow: var(--elevation-1);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`}`}
+
+  ${({ $isFocused, $isCollapsed }) => $isFocused && !$isCollapsed
+    ? 'border: 1px solid var(--color-primary-blue-2) !important;'
+    : ''}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Input = styled.input.attrs(({ ref }) => ({
+    ref: ref,
+})) `
+  flex: 1;
+  border-radius: 8px;
+  outline: none;
+  border: none;
+  font-size: 14px;
+  font-family: var(--font-inter);
+  line-height: 20px;
+  color: var(--color-grey-2);
+
+  ${({ $isCollapsed }) => $isCollapsed
+    ? 'width: 0px; height: 0px; padding: 0px !important; border: none !important;'
+    : ''}
+`;
+const Separator = styled.div `
+  width: 1px;
+  height: 20px;
+  background-color: var(--color-grey-9);
+`;

package/dist/components/input/select/index.js

@@ -0,0 +1 @@
+export { Select } from './select';

package/dist/components/input/select/select.js

@@ -0,0 +1,47 @@
+'use client';
+import { P } from '../../../components/atoms/typography/paragraph';
+import React from 'react';
+import styled from 'styled-components';
+export const Select = ({ label, onClick, selected, sx, value, }) => {
+    return (React.createElement(Label, { onClick: (event) => onClick(event, value), "$sx": sx },
+        React.createElement("input", { value: value, type: "radio", checked: selected, readOnly: true }),
+        React.createElement(SelectBox, { "$selected": selected }),
+        React.createElement(P, { as: "div" }, label)));
+};
+const Label = styled.div `
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 24px;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+
+  input {
+    display: none;
+  }
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const SelectBox = styled.div `
+  position: relative;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--color-grey-8);
+  border-radius: 4px;
+  flex-shrink: 0;
+
+  ${({ $selected }) => $selected
+    ? `
+    background-color: var(--color-primary-blue-2);
+    border-color: var(--color-primary-blue-2);
+    
+    &::after {
+      position: absolute;
+      content: '✔';
+      top: -1px;
+      left: 4px;
+      font-size: 13px;
+      color: var(--color-white);
+      font-weight: 500;
+    }`
+    : ''}
+`;

package/dist/components/input/text_area/index.js

@@ -0,0 +1 @@
+export { TextArea } from './text_area';