@soul-refiner/design-system 2.0.0-alpha.25 → 2.0.0-alpha.27

package/dist/common/colors.js

@@ -0,0 +1,140 @@
+'use strict';
+
+const COLORS = [
+    'inherit',
+    'page-bg',
+    'white',
+    'primary-blue-0',
+    'primary-blue-1',
+    'primary-blue-2',
+    'primary-blue-3',
+    'primary-blue-4',
+    'grey-0',
+    'grey-1',
+    'grey-2',
+    'grey-3',
+    'grey-4',
+    'grey-5',
+    'grey-6',
+    'grey-7',
+    'grey-8',
+    'grey-9',
+    'grey-10',
+    'red-0',
+    'red-1',
+    'red-2',
+    'red-3',
+    'red-4',
+    'red-5',
+    'red-6',
+    'red-7',
+    'red-8',
+    'red-9',
+    'red-10',
+    'green-0',
+    'green-1',
+    'green-2',
+    'green-3',
+    'green-4',
+    'green-5',
+    'green-6',
+    'green-7',
+    'green-8',
+    'green-9',
+    'green-10',
+    'blue-0',
+    'blue-1',
+    'blue-2',
+    'blue-3',
+    'blue-4',
+    'blue-5',
+    'blue-6',
+    'blue-7',
+    'blue-8',
+    'blue-9',
+    'blue-10',
+    'turquoise-0',
+    'turquoise-1',
+    'turquoise-2',
+    'turquoise-3',
+    'turquoise-4',
+    'turquoise-5',
+    'turquoise-6',
+    'turquoise-7',
+    'turquoise-8',
+    'turquoise-9',
+    'turquoise-10',
+    'purple-0',
+    'purple-1',
+    'purple-2',
+    'purple-3',
+    'purple-4',
+    'purple-5',
+    'purple-6',
+    'purple-7',
+    'purple-8',
+    'purple-9',
+    'purple-10',
+    'yellow-0',
+    'yellow-1',
+    'yellow-2',
+    'yellow-3',
+    'yellow-4',
+    'yellow-5',
+    'yellow-6',
+    'yellow-7',
+    'yellow-8',
+    'yellow-9',
+    'yellow-10',
+    'orange-0',
+    'orange-1',
+    'orange-2',
+    'orange-3',
+    'orange-4',
+    'orange-5',
+    'orange-6',
+    'orange-7',
+    'orange-8',
+    'orange-9',
+    'orange-10',
+    'hue-pink-1',
+    'hue-pink-2',
+    'hue-pink-3',
+    'hue-purple-1',
+    'hue-purple-2',
+    'hue-purple-3',
+    'hue-ocean-1',
+    'hue-ocean-2',
+    'hue-ocean-3',
+    'hue-mint-1',
+    'hue-mint-2',
+    'hue-mint-3',
+    'hue-blue-1',
+    'hue-blue-2',
+    'hue-blue-3',
+    'hue-orange-1',
+    'hue-orange-2',
+    'hue-orange-3',
+    'special-yellow-1',
+    'special-yellow-2',
+    'special-orange-1',
+    'special-orange-2',
+    'special-red-1',
+    'special-red-2',
+    'special-pink-1',
+    'special-pink-2',
+    'special-purple-1',
+    'special-purple-2',
+    'special-blue-1',
+    'special-blue-2',
+    'special-turquoise-1',
+    'special-turquoise-2',
+    'special-green-1',
+    'special-green-2',
+    'special-grape-1',
+    'special-grape-2',
+];
+const colorReference = Object.fromEntries(COLORS.map((item) => [item, `var(--color-${item})`]));
+
+exports.COLORS = COLORS;
+exports.colorReference = colorReference;

package/dist/common/date.js

@@ -0,0 +1,34 @@
+'use strict';
+
+const THIS_YEAR = +new Date().getFullYear();
+const THIS_MONTH = +new Date().getMonth() + 1;
+exports.WEEKDAYS = void 0;
+(function (WEEKDAYS) {
+    WEEKDAYS["MON"] = "Mon";
+    WEEKDAYS["TUE"] = "Tue";
+    WEEKDAYS["WED"] = "Wed";
+    WEEKDAYS["THU"] = "Thu";
+    WEEKDAYS["FRI"] = "Fri";
+    WEEKDAYS["SAT"] = "Sat";
+    WEEKDAYS["SUN"] = "Sun";
+})(exports.WEEKDAYS || (exports.WEEKDAYS = {}));
+exports.MONTHS = void 0;
+(function (MONTHS) {
+    MONTHS["JAN"] = "Jan";
+    MONTHS["FEB"] = "Feb";
+    MONTHS["MAR"] = "Mar";
+    MONTHS["APR"] = "Apr";
+    MONTHS["MAY"] = "May";
+    MONTHS["JUN"] = "Jun";
+    MONTHS["JUL"] = "Jul";
+    MONTHS["AUG"] = "Aug";
+    MONTHS["SEP"] = "Sep";
+    MONTHS["OCT"] = "Oct";
+    MONTHS["NOV"] = "Nov";
+    MONTHS["DEC"] = "Dec";
+})(exports.MONTHS || (exports.MONTHS = {}));
+const CALENDAR_WEEKS = 6;
+
+exports.CALENDAR_WEEKS = CALENDAR_WEEKS;
+exports.THIS_MONTH = THIS_MONTH;
+exports.THIS_YEAR = THIS_YEAR;

package/dist/common/styles.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var styled = require('styled-components');
+var colors = require('./colors.js');
+
+exports.Styles = void 0;
+(function (Styles) {
+    Styles.backgroundColor = styled.css `
+    background-color: ${({ $backgroundColor }) => $backgroundColor ? colors.colorReference[$backgroundColor] : 'var(--page-bg)'};
+  `;
+    Styles.borderRadius = styled.css `
+    border-radius: ${({ $borderRadius }) => $borderRadius ? `var(--${$borderRadius})` : ''};
+  `;
+    Styles.color = styled.css `
+    color: ${({ $color }) => $color ? colors.colorReference[$color] : 'var(--color-grey-3)'};
+  `;
+    Styles.elevation = styled.css `
+    box-shadow: ${({ $elevation }) => $elevation ? `var(--elevation-${$elevation})` : 'none'};
+  `;
+    Styles.flex = styled.css `
+    align-items: ${({ $align }) => $align ?? 'normal'};
+    gap: ${({ $gap }) => $gap && typeof $gap === 'number'
+        ? `${$gap}px`
+        : $gap && typeof $gap === 'string'
+            ? `var(--${$gap})`
+            : '0px'};
+    flex: ${({ $flex }) => $flex ?? 'none'};
+    flex-flow: ${({ $flow }) => $flow ?? 'row'};
+    flex-direction: ${({ $dir }) => $dir ?? 'row'};
+    justify-content: ${({ $justify }) => $justify ?? 'normal'};
+  `;
+    Styles.margin = styled.css `
+    margin: ${({ $margin }) => $margin && typeof $margin === 'number'
+        ? `${$margin}px`
+        : $margin && typeof $margin === 'string'
+            ? `var(--${$margin})`
+            : '0px'};
+  `;
+    Styles.padding = styled.css `
+    padding: ${({ $padding }) => $padding && typeof $padding === 'number'
+        ? `${$padding}px;`
+        : $padding && typeof $padding === 'string' && $padding.includes('px')
+            ? $padding
+            : $padding && typeof $padding === 'string'
+                ? `var(--${$padding});`
+                : '0px'};
+  `;
+    Styles.styleable = styled.css `
+    ${({ sx }) => (sx ? sx : '')}
+  `;
+    Styles.textClamp = styled.css `
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: ${({ $textClampLines }) => $textClampLines ?? 1};
+    -webkit-line-clamp: ${({ $textClampLines }) => $textClampLines ?? 1};
+    -webkit-box-orient: vertical;
+  `;
+    Styles.typography = styled.css `
+    font-style: ${({ $italic }) => ($italic ? 'italic' : 'normal')};
+    text-decoration: ${({ $strikethrough, $underline }) => $strikethrough ? 'line-through' : $underline ? 'underline' : 'none'};
+  `;
+    Styles.weight = styled.css `
+    font-weight: ${({ $bold, $semiBold, $mediumBold }) => $bold ? 700 : $semiBold ? 600 : $mediumBold ? 500 : 400};
+  `;
+})(exports.Styles || (exports.Styles = {}));

package/dist/components/actions/button/button.js

@@ -0,0 +1,325 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var styles = require('../../../common/styles.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+var box = require('../../atoms/box/box.js');
+var chevron_down = require('../../../icons/arrow/chevron_down.js');
+var chevron_up = require('../../../icons/arrow/chevron_up.js');
+
+const LG_ICON_SIZE = 20;
+const LG_ICON_SIZE_WO_CHILDREN = 24;
+const LG_FONT_SIZE = 16;
+const LG_PADDING = '11px 19px';
+const LG_PADDING_WO_CHILDREN = '11px';
+const SM_ICON_SIZE = 16;
+const SM_FONT_SIZE = 14;
+const SM_PADDING = '5px 15px';
+const SM_PADDING_WO_CHILDREN = '7px';
+const Button = ({ as = 'button', children, disabled, fluid = false, href, icon, isDropdownOpen, roundness = 'large', size = 'large', sx, type = 'primary', showChevron = true, customDropdownIcon, ...props }) => {
+    const Component = Components()[type];
+    const buttonIcon = React.Children.map(icon, (item) => {
+        if (React.isValidElement(item))
+            return {
+                ...item,
+                props: {
+                    ...(item.props ?? {}),
+                    size: size === 'large' && !children
+                        ? LG_ICON_SIZE_WO_CHILDREN
+                        : size === 'large'
+                            ? LG_ICON_SIZE
+                            : SM_ICON_SIZE,
+                },
+            };
+    })?.[0];
+    const CustomDropdownIcon = customDropdownIcon;
+    let dropdownIcon = undefined;
+    if (showChevron) {
+        if (isDropdownOpen === true) {
+            dropdownIcon = CustomDropdownIcon ? (React.createElement(CustomDropdownIcon, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : (React.createElement(chevron_up.ChevronUp, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE }));
+        }
+        else if (isDropdownOpen === false) {
+            dropdownIcon = CustomDropdownIcon ? (React.createElement(CustomDropdownIcon, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : (React.createElement(chevron_down.ChevronDown, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE }));
+        }
+    }
+    const padding = !!children
+        ? size === 'large'
+            ? LG_PADDING
+            : SM_PADDING
+        : size === 'large'
+            ? LG_PADDING_WO_CHILDREN
+            : SM_PADDING_WO_CHILDREN;
+    return (React.createElement(Component, { as: as, disabled: disabled, href: href, "$align": "center", "$display": "flex", "$fluid": fluid, "$gap": size === 'large' ? 12 : 8, "$hasChildren": !!children, "$justify": "center", "$padding": padding, "$roundness": roundness, "$size": size, "$sx": sx, ...props },
+        buttonIcon,
+        children && (React.createElement(paragraph.P, { as: "span", "$mediumBold": true, "$fontSize": size === 'large' ? LG_FONT_SIZE : SM_FONT_SIZE, "$color": "inherit" }, children)),
+        !!children && dropdownIcon));
+};
+const Components = () => ({
+    primary: Primary,
+    secondary: Secondary,
+    outlined: Outlined,
+    danger: Danger,
+    raised: Raised,
+    special: Special,
+    text: Text,
+    dropdown: Dropdown,
+});
+const base = styled.css `
+  font-family: var(--font-inter);
+  display: flex;
+  border-radius: ${({ $roundness }) => $roundness === 'large'
+    ? '32px'
+    : $roundness === 'medium-small'
+        ? '8px'
+        : $roundness === 'small'
+            ? '4px'
+            : '0px'};
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  outline: none;
+  ${({ $fluid }) => $fluid
+    ? `flex-basis: max-content;
+    flex: 1 !important;
+    width: max-content`
+    : ''}
+
+  svg {
+    fill: currentColor;
+  }
+
+  &:disabled {
+    background-color: var(--color-grey-9) !important;
+    border: 1px solid var(--color-grey-8) !important;
+    color: var(--color-grey-7) !important;
+    cursor: unset !important;
+  }
+`;
+const Primary = styled(box.Box) `
+  background-color: var(--color-primary-blue-2);
+  color: var(--color-white);
+  border: 1px solid var(--color-primary-blue-2);
+
+  &:hover {
+    border: 1px solid var(--color-primary-blue-1);
+    background-color: var(--color-primary-blue-1);
+  }
+
+  &:focus {
+    border: 1px solid var(--color-primary-blue-3);
+    background-color: var(--color-primary-blue-1);
+  }
+
+  &:active {
+    border: 1px solid var(--color-primary-blue-0);
+    background-color: var(--color-primary-blue-0);
+  }
+
+  ${base}
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Secondary = styled(box.Box) `
+  background-color: var(--color-primary-blue-4);
+  color: var(--color-primary-blue-2);
+  border: 1px solid var(--color-primary-blue-4);
+
+  &:hover {
+    background-color: var(--color-primary-blue-1);
+    color: var(--color-primary-blue-1);
+    border: 1px solid var(--color-primary-blue-1);
+  }
+
+  &:focus {
+    border: 1px solid var(--color-primary-blue-2);
+    color: var(--color-primary-blue-1);
+  }
+
+  &:active {
+    border: 1px solid var(--color-primary-blue-0);
+    color: var(--color-primary-blue-0);
+  }
+
+  ${base}
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Outlined = styled(box.Box) `
+  background-color: var(--color-white);
+  color: var(--color-grey-3);
+  border: 1px solid var(--color-grey-8);
+
+  &.icon {
+    border: 1px solid var(--color-white);
+  }
+
+  &:hover {
+    background-color: var(--color-grey-10);
+    border: 1px solid var(--color-grey-8);
+
+    &.icon {
+      border: 1px solid var(--color-grey-8);
+    }
+  }
+
+  &:focus {
+    background-color: var(--color-grey-10);
+    border: 1px solid var(--color-primary-blue-3);
+
+    &.icon {
+      border: 1px solid var(--color-grey-8);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-grey-9);
+    border: 1px solid var(--color-grey-8);
+  }
+
+  ${base}
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Danger = styled(box.Box) `
+  background-color: var(--color-red-4);
+  color: var(--color-white);
+  border: 1px solid var(--color-red-4);
+
+  &:hover {
+    border: 1px solid var(--color-red-3);
+    background-color: var(--color-red-3);
+  }
+
+  &:focus {
+    border: 1px solid var(--color-primary-blue-2);
+    background-color: var(--color-red-3);
+  }
+
+  &:active {
+    border: 1px solid var(--color-red-2);
+    background-color: var(--color-red-2);
+  }
+
+  ${base}
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Text = styled(box.Box) `
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: var(--color-primary-blue-2);
+
+  &:hover {
+    color: var(--color-primary-blue-1);
+  }
+
+  &:focus {
+    color: var(--color-primary-blue-1);
+    border: 1px solid var(--color-primary-blue-2);
+  }
+
+  &:active {
+    color: var(--color-primary-blue-0);
+  }
+
+  &:disabled {
+    background-color: transparent !important;
+    border: 1px solid transparent !important;
+  }
+
+  ${base}
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Raised = styled(box.Box) `
+  background-color: var(--color-white);
+  color: var(--color-grey-3);
+  border: 1px solid var(--color-white);
+  box-shadow: var(--elevation-1);
+
+  &:hover {
+    background-color: var(--color-grey-9);
+    border: 1px solid var(--color-grey-9);
+  }
+
+  &:active {
+    background-color: var(--color-grey-8);
+    border: 1px solid var(--color-grey-8);
+  }
+
+  &:disabled {
+    border: 1px solid var(--color-grey-9) !important;
+  }
+
+  ${base}
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Special = styled(box.Box) `
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: var(--color-primary-grey-3);
+
+  &:hover {
+    background-color: var(--color-grey-10);
+  }
+
+  &:focus-visible {
+    background-color: var(--color-grey-10);
+    border: 1px solid var(--color-primary-blue-2);
+  }
+
+  &:active {
+    background-color: var(--color-grey-9);
+    border: 1px solid var(--color-grey-9);
+  }
+
+  &:disabled {
+    background-color: transparent !important;
+    border: 1px solid transparent !important;
+  }
+
+  ${base}
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Dropdown = styled(box.Box) `
+  width: 100%;
+  background-color: var(--color-blue-10);
+  color: var(--color-grey-3);
+  border: 1px solid var(--color-primary-blue-2);
+  justify-content: flex-start;
+  padding: 16px;
+  border: 0;
+
+  &:hover {
+    border: 0;
+    background-color: var(--color-blue-10);
+  }
+
+  ${base}
+  ${styles.Styles.flex}
+  ${styles.Styles.padding}
+
+  border-radius: 8px;
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+exports.Button = Button;