@soul-refiner/design-system 1.7.22 → 2.0.0-alpha.1

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

@@ -1,319 +0,0 @@
-'use client';
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { Box, Button, P } from '../../';
-import { ChevronDown, ChevronUp, Close } from '../../../icons';
-import { Styles } from '../../../common';
-import { Spacer, Option } from './filter_option';
-const Filter = ({ closeOnBlur = true, disabled, graphic, graphicAlignment = 'left', resetGraphic, label = '', sx, triggerType, options, defaultValue = '', closeOnChange = true, optionOnChange, optionShowClose, checkbox, applyOnClick, resetOnClick, applyResetActions, }) => {
-    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: optionShowClose === undefined
-                    ? index === 0 && triggerType === 'pill'
-                    : optionShowClose, onClose: () => setOpen(false), ...option }));
-        }),
-        triggerType === 'pill' && React.createElement(Spacer, { key: `spacer-${options.length}` }),
-    ];
-    const showResetGraphic = resetGraphic &&
-        (typeof selected === 'string' ? !!selected : !!selected.length);
-    return (React.createElement(Wrapper, { "$sx": sx, tabIndex: 0, ref: wrapperRef, onBlurCapture: handleBlur },
-        React.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, graphicAlignment: graphicAlignment, label: label, onClick: handleOpen, onReset: resetGraphic
-                ? (event) => {
-                    event.stopPropagation();
-                    resetOnClick && resetOnClick(event);
-                    setSelected(multiple ? [] : '');
-                    setOpen(false);
-                }
-                : undefined, open: open, resetGraphic: showResetGraphic, type: triggerType, value: filterLabel }),
-        open && (React.createElement(Container, { ref: optionsRef },
-            React.createElement(React.Fragment, null,
-                dropdownOptions,
-                triggerType === 'pill' && applyResetActions && (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, graphicAlignment, label, onClick, resetGraphic, open, onReset, type, value, }) => {
-    if (type === 'pill') {
-        return (React.createElement(Pill, { disabled: disabled, onClick: onClick, "$labelIsDefault": value === label, ...wrapperProps },
-            graphicAlignment === 'left' ? graphic : null,
-            React.createElement(P, { ...textProps }, value),
-            resetGraphic ? React.createElement(Close, { color: "blue-3", onClick: onReset }) : null,
-            graphicAlignment === 'right' ? graphic : null,
-            !graphic && !resetGraphic && (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 },
-        graphicAlignment === 'left' ? graphic : null,
-        graphic,
-        React.createElement(P, { ...textProps }, value),
-        graphicAlignment === 'right' ? graphic : null,
-        !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

@@ -1,70 +0,0 @@
-'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

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

package/dist/components/input/index.js

@@ -1,10 +0,0 @@
-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

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

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

@@ -1,83 +0,0 @@
-'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 handleInputClick = (event) => {
-        event.stopPropagation();
-        onClick && onClick(event);
-    };
-    const handleLabelClick = (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        onClick && onClick(event);
-    };
-    return (React.createElement(Label, { "$disabled": disabled, "$reversed": reversed, "$sx": sx, onClick: handleLabelClick },
-        React.createElement(Input, { checked: checked, onClickCapture: handleInputClick, 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

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

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

@@ -1,138 +0,0 @@
-'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

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

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

@@ -1,47 +0,0 @@
-'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

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