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

package/dist/components/navigation/breadcrumb/breadcrumb.js

@@ -1,109 +0,0 @@
-'use client';
-import React from 'react';
-import styled from 'styled-components';
-import Link from 'next/link';
-import { Box } from '../../';
-import { ChevronLeft, ChevronRight } from '../../../icons';
-const Breadcrumb = ({ children, previous }) => {
-    const id = React.useId();
-    const _children = React.Children.toArray(children);
-    if (previous) {
-        return (React.createElement(Box, { "$align": "center", "$gap": 8, sx: "& > *:last-child { color: var(--color-grey-3) !important; };" },
-            React.createElement(React.Fragment, null,
-                React.createElement(ChevronLeft, { color: "grey-3", size: 24 }),
-                React.isValidElement(_children[0]) &&
-                    React.cloneElement(_children[0], {
-                        icon: undefined,
-                        avatar: undefined,
-                    }))));
-    }
-    return (React.createElement(Box, { "$align": "center", "$gap": 8 }, _children.map((child, index) => {
-        if (React.isValidElement(child) &&
-            (child.type?.displayName === 'BreadcrumbItem' ||
-                child.type?.displayName === 'Breadcrumb.Item')) {
-            return (React.createElement(React.Fragment, { key: id + index.toString(36) },
-                child,
-                _children.length - 1 !== index && (React.createElement(ChevronRight, { color: "grey-3", size: 24 }))));
-        }
-        return null;
-    })));
-};
-const BreadcrumbItem = ({ avatar, children, href, icon, iconColor = 'blue', onClick, }) => {
-    return (React.createElement(Item, { href: href || '#', onClick: onClick, "$type": icon ? 'icon' : avatar ? 'avatar' : 'text', "$iconColor": `hue-${iconColor}-1`, scroll: false },
-        icon && (React.createElement(IconWrapper, { "$color": iconColor }, React.cloneElement(icon, { color: `hue-${iconColor}-1`, size: 24 }))),
-        avatar,
-        children));
-};
-Breadcrumb.Item = BreadcrumbItem;
-BreadcrumbItem.displayName = 'Breadcrumb.Item';
-const Item = styled(Link) `
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  font-family: var(--font-inter);
-  color: var(--color-grey-3);
-
-  ${({ as }) => as === 'a'
-    ? `
-    text-decoration: none;
-    color: var(--color-primary-blue-2);
-    
-    &:hover {
-      position: relative;
-      &:after {
-        content: '';
-        position: absolute;
-        width: 100%;
-        height: 1px;
-        bottom: 0px;
-        right: 0px;
-        background-color: var(--color-primary-blue-1);
-      }
-    }`
-    : ''}
-
-  ${({ $type, $iconColor }) => $type === 'icon'
-    ? `
-    gap: 32px;
-    font-size: 24px;
-    font-weight: 700;
-    line-height: 36px;
-    color: var(--color-${$iconColor});
-
-    &:hover {
-      &:after {
-        width: calc(100% - 80px);
-        background-color: var(--color-${$iconColor});
-      }
-    }`
-    : $type === 'avatar'
-        ? `
-    padding: 4px;
-    gap: 16px;
-    font-size: 18px;
-    font-weight: 700;
-    line-height: 26px;
-    color: var(--color-grey-1);
-    &:hover {
-      &:after {
-        background-color: var(--color-primary-blue-2);
-      }
-    }`
-        : `
-    padding: 4px 0px;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 24px;
-    `}
-`;
-const IconWrapper = styled.div `
-  background-color: ${({ $color }) => `var(--color-hue-${$color}-2)`};
-  height: 48px;
-  width: 48px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  border-radius: 8px;
-`;
-export { Breadcrumb };

package/dist/components/navigation/breadcrumb/index.js

@@ -1 +0,0 @@
-export { Breadcrumb } from './breadcrumb';

package/dist/components/navigation/index.js

@@ -1,3 +0,0 @@
-export { Breadcrumb } from './breadcrumb';
-export { InnerNav } from './inner';
-export { Tabs } from './tabs';

package/dist/components/navigation/inner/index.js

@@ -1 +0,0 @@
-export { InnerNav } from './inner';

package/dist/components/navigation/inner/inner.js

@@ -1,187 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import Link from 'next/link';
-import { Button } from '../../../components/actions/button';
-import { Drawer } from '../../../components/surfaces/drawer';
-import { ChevronDown, ChevronLeft, ChevronUp, Plus } from '../../../icons';
-const INNER_NAV_CHILD_TYPES = [
-    'Header',
-    'Item',
-    'Dropdown',
-    'BackButton',
-    'Drawer',
-    'Misc',
-];
-/*************************************************************************************************************************
- * Inner Navigation
- */
-const InnerNav = ({ children }) => {
-    const elementsByType = {
-        Header: [],
-        Item: [],
-        Dropdown: [],
-        BackButton: [],
-        Drawer: [],
-        Misc: [],
-    };
-    const _children = React.Children.toArray(children);
-    for (const child of _children) {
-        const isValidChild = React.isValidElement(child);
-        const isInnerNavChild = isValidChild &&
-            INNER_NAV_CHILD_TYPES.includes(child?.type?.displayName?.replace('InnerNav.', ''));
-        if (isInnerNavChild) {
-            const type = child?.type?.displayName.replace('InnerNav.', '');
-            elementsByType[type].push(child);
-        }
-        else {
-            elementsByType['Misc'].push(child);
-        }
-    }
-    return (React.createElement(NavWrapper, { "aria-label": "side-navigation" },
-        React.createElement("div", null, elementsByType['Header']),
-        React.createElement("div", null, elementsByType['BackButton']),
-        React.createElement("div", null, elementsByType['Drawer']),
-        React.createElement("div", null, elementsByType['Item']),
-        React.createElement("div", null, elementsByType['Dropdown']),
-        React.createElement("div", null, elementsByType['Misc'])));
-};
-const NavWrapper = styled.nav `
-  height: 100%;
-  width: 365px;
-  padding: 24px 12px 24px 16px;
-  box-sizing: border-box;
-  background-color: var(--color-blue-10);
-  border-right: 1px solid var(--color-grey-9);
-`;
-const InnerNavItem = ({ active, href, icon, label, sx, onClick, }) => {
-    return (React.createElement(Item, { "$active": active, "$sx": sx, href: href || '#', scroll: false, onClick: onClick },
-        icon,
-        label));
-};
-const Item = styled(Link) `
-  padding: 14px 16px;
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  border-radius: 8px;
-  font-family: var(--font-inter);
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--color-blue-2);
-  cursor: pointer;
-  svg {
-    fill: var(--color-blue-2);
-  }
-  ${({ $active }) => $active
-    ? `
-    background-color: var(--color-primary-blue-3);`
-    : `
-    &:hover {
-      background-color: var(--color-primary-blue-4);
-    }`}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-InnerNav.Item = InnerNavItem;
-InnerNavItem.displayName = 'InnerNav.Item';
-const InnerNavDropdown = ({ children, icon, label, open, sx, onClick, }) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(DropdownItem, { "$active": false, "$sx": sx, onClick: onClick },
-            icon,
-            React.createElement(DropdownTriggerWrapper, null,
-                label,
-                open && React.createElement(ChevronUp, { size: 16 }),
-                !open && React.createElement(ChevronDown, { size: 16 }))),
-        open && React.createElement(DropdownContent, null, children)));
-};
-const DropdownContent = styled.div `
-  & > a,
-  & > button {
-    padding-left: 40px;
-  }
-`;
-const DropdownTriggerWrapper = styled.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex: 1;
-`;
-const DropdownItem = styled.a `
-  padding: 14px 16px;
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  border-radius: 8px;
-  font-family: var(--font-inter);
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--color-blue-2);
-  cursor: pointer;
-  svg {
-    fill: var(--color-blue-2);
-  }
-  ${({ $active }) => $active
-    ? `
-    background-color: var(--color-primary-blue-3);`
-    : `
-    &:hover {
-      background-color: var(--color-primary-blue-4);
-    }`}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-InnerNav.Dropdown = InnerNavDropdown;
-InnerNavDropdown.displayName = 'InnerNav.Dropdown';
-const InnerNavBackButton = ({ href, label, sx }) => {
-    return (React.createElement(BackButton, { href: href, "$sx": sx, scroll: false },
-        React.createElement("div", null,
-            React.createElement(ChevronLeft, { size: 24 })),
-        label));
-};
-const BackButton = styled(Link) `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-family: var(--font-inter);
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--color-grey-3);
-  text-decoration: none;
-  border-radius: 8px;
-
-  &:hover {
-    background-color: var(--color-primary-blue-4);
-  }
-
-  div {
-    padding: 12px;
-  }
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-InnerNav.BackButton = InnerNavBackButton;
-InnerNavBackButton.displayName = 'InnerNav.BackButton';
-const InnerNavHeader = ({ children }) => {
-    return React.createElement(HeaderWrapper, null, children);
-};
-const HeaderWrapper = styled.div ``;
-InnerNav.Header = InnerNavHeader;
-InnerNavHeader.displayName = 'InnerNav.Header';
-const InnerNavDrawer = ({ children, label, controlledOpen, onOpenChange, }) => {
-    return (React.createElement(Drawer, { controlledOpen: controlledOpen, onOpenChange: onOpenChange },
-        React.createElement(Drawer.Trigger, null,
-            React.createElement(Button, { icon: React.createElement(Plus, { color: "white" }), size: "small", sx: "width: 100%; margin-bottom: 24px;", type: "primary", onClick: () => {
-                    onOpenChange?.();
-                } }, label)),
-        children));
-};
-InnerNav.Drawer = InnerNavDrawer;
-InnerNavDrawer.displayName = 'InnerNav.Drawer';
-InnerNav.DrawerHeader = Drawer.Header;
-InnerNav.DrawerContent = Drawer.Content;
-InnerNav.DrawerFooter = Drawer.Footer;
-InnerNav.DrawerTrigger = Drawer.Trigger;
-export { InnerNav };

package/dist/components/navigation/tabs/index.js

@@ -1 +0,0 @@
-export { Tabs } from './tabs';

package/dist/components/navigation/tabs/tabs.js

@@ -1,150 +0,0 @@
-'use client';
-import React from 'react';
-import styled from 'styled-components';
-import Link from 'next/link';
-import { P } from '../../';
-const colorLookup = {
-    blue: {
-        bg: 'var(--color-hue-blue-2)',
-        icon: 'var(--color-hue-blue-1)',
-    },
-    green: {
-        bg: 'var(--color-green-8)',
-        icon: 'var(--color-green-2)',
-    },
-    grey: {
-        bg: 'var(--color-grey-9)',
-        icon: 'var(--color-grey-7)',
-    },
-    mint: {
-        bg: 'var(--color-hue-mint-2)',
-        icon: 'var(--color-hue-mint-1)',
-    },
-    ocean: {
-        bg: 'var(--color-hue-ocean-2)',
-        icon: 'var(--color-hue-ocean-1)',
-    },
-    orange: {
-        bg: 'var(--color-hue-orange-2)',
-        icon: 'var(--color-hue-orange-1)',
-    },
-    pink: {
-        bg: 'var(--color-hue-pink-2)',
-        icon: 'var(--color-hue-pink-1)',
-    },
-    purple: {
-        bg: 'var(--color-hue-purple-2)',
-        icon: 'var(--color-hue-purple-1)',
-    },
-    red: {
-        bg: 'var(--color-red-9)',
-        icon: 'var(--color-red-3)',
-    },
-    yellow: {
-        bg: 'var(--color-yellow-8)',
-        icon: 'var(--color-yellow-3)',
-    },
-};
-const Tabs = ({ activeIndex, items, onChange, size = 'large', sx, }) => {
-    const id = React.useId();
-    return (React.createElement(Wrapper, { "$sx": sx }, items.map((item, index) => (React.createElement(Item, { active: activeIndex === index, color: item?.color, disabled: item?.disabled, href: item?.href, icon: item?.icon, key: id + index.toString(36), label: item.label, onClick: () => onChange && onChange(index), size: size })))));
-};
-const Wrapper = styled.div `
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: flex-end;
-  justify-content: center;
-  gap: 16px;
-  margin: 0px;
-  padding: 0px;
-
-  a {
-    text-decoration: none;
-  }
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Item = ({ active, color, disabled, href, icon, label, onClick, size = 'large', }) => {
-    const inputColor = disabled ? 'grey' : color ? color : 'blue';
-    const iconColor = colorLookup[inputColor].icon;
-    const bgColor = colorLookup[inputColor].bg;
-    const fontSize = size === 'large' ? 16 : size === 'medium' ? 14 : 12;
-    const lineHeight = size === 'large' ? 24 : size === 'medium' ? 20 : 16;
-    return (React.createElement(Element, { onClick: !disabled && onClick ? onClick : undefined, href: href || '#', scroll: false, "$active": active, "$color": iconColor, "$disabled": disabled, "$hasIcon": !!icon, "$size": size },
-        icon && React.createElement(IconWrapper, { "$bg": bgColor }, icon),
-        React.createElement(P, { "$fontSize": fontSize, "$lineHeight": lineHeight, "$semiBold": true }, label)));
-};
-const Element = styled(Link) `
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  user-select: none;
-
-  ${({ $size, $hasIcon }) => $hasIcon
-    ? 'padding: 16px 12px;'
-    : $size === 'small'
-        ? 'padding: 10px 8px;'
-        : $size === 'medium'
-            ? 'padding: 14px 10px;'
-            : 'padding: 22px 12px;'}
-
-  ${({ $hasIcon, $color, $disabled }) => $disabled
-    ? `
-  cursor: initial;
-  `
-    : $hasIcon
-        ? `
-  &:hover {
-    p {
-      color: ${$color};
-    }
-  }
-
-  div > svg {
-    fill: ${$color};
-  }`
-        : `
-  &:hover {
-    background-color: var(--color-grey-10);
-    &:after {
-      position: absolute;
-      content: '';
-      width: 100%;
-      height: 3px;
-      bottom: 0px;
-      left: 0px;
-      background-color: var(--color-primary-blue-3);
-      border-top-right-radius: 3px;
-      border-top-left-radius: 3px;
-    }
-  }
-  &:active {
-    background-color: var(--color-grey-9);
-  }`}
-
-  ${({ $active, $color, $hasIcon }) => $active
-    ? `
-  &:after {
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 3px;
-    bottom: 0px;
-    left: 0px;
-    background-color: ${$hasIcon ? $color : 'var(--color-primary-blue-2)'} !important;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-  }
-  `
-    : ''}
-`;
-const IconWrapper = styled.div `
-  padding: 8px;
-  border-radius: 8px;
-  background-color: ${({ $bg }) => $bg};
-`;
-Tabs.Item = Item;
-Item.displayName = 'Tabs.Item';
-export { Tabs };

package/dist/components/surfaces/accordion/accordion.js

@@ -1,47 +0,0 @@
-'use client';
-import React from 'react';
-import styled from 'styled-components';
-import { Box } from '../../';
-import { callAll } from '../../../utils';
-import { ChevronDown, ChevronUp } from '../../../icons';
-const AccordionContext = React.createContext([-1, () => undefined]);
-const Accordion = ({ children, sx }) => {
-    const [openIndex, setOpenIndex] = React.useState(-1);
-    const handleIndexChange = (index) => {
-        setOpenIndex((prev) => (prev === index ? -1 : index));
-    };
-    return (React.createElement(AccordionContext.Provider, { value: [openIndex, handleIndexChange] },
-        React.createElement(Wrapper, { "$sx": sx }, React.Children.map(children, (child, index) => {
-            if (React.isValidElement(child))
-                return React.cloneElement(child, { index });
-            return null;
-        }))));
-};
-const Wrapper = styled.div `
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-const AccordionItem = ({ buttonSx, children, index, sx, trigger, }) => {
-    const [openIndex, setOpenIndex] = React.useContext(AccordionContext);
-    return (React.createElement(Box, { "$dir": "column" },
-        React.createElement(TriggerWrapper, { onClick: callAll(
-            // eslint-disable-next-line
-            () => setOpenIndex(index), trigger?.props?.onClick), "$sx": buttonSx },
-            trigger,
-            openIndex === index ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null)),
-        React.createElement(Box, { sx: openIndex === index ? sx : 'visibility: hidden; height: 0px;' }, children)));
-};
-const TriggerWrapper = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  appearance: none;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  cursor: pointer;
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-Accordion.Item = AccordionItem;
-AccordionItem.displayName = 'Accordion.Item';
-export { Accordion };

package/dist/components/surfaces/accordion/index.js

@@ -1 +0,0 @@
-export { Accordion } from './accordion';

package/dist/components/surfaces/calendar_date/calendar_date.js

@@ -1,45 +0,0 @@
-'use client';
-import React from 'react';
-import styled from 'styled-components';
-import { H, P } from '../../atoms/typography';
-export const CalendarDate = ({ monthAbbreviation, date, dayOfWeek, startTime, endTime, sx, size = 'large', }) => {
-    return (React.createElement(Container, { "$sx": sx },
-        React.createElement(CalendarContainer, { "$size": size },
-            React.createElement(MonthContainer, { "$size": size },
-                size === 'large' && (React.createElement(H.Seven, { "$color": "white", "$textAlign": "center", "$semiBold": true }, monthAbbreviation)),
-                size === 'small' && (React.createElement(P, { "$color": "white", "$textAlign": "center", "$fontSize": 14 }, monthAbbreviation))),
-            React.createElement(DateContainer, { "$size": size },
-                size === 'large' && (React.createElement(H.One, { "$textAlign": "center", "$semiBold": true }, date)),
-                size === 'small' && (React.createElement(H.Six, { "$color": "grey-2", "$textAlign": "center" }, date)))),
-        dayOfWeek && startTime && endTime && (React.createElement(TimeContainer, null,
-            React.createElement(P, { as: "span", "$color": "red-5" }, `${dayOfWeek}, ${startTime} -> ${endTime}`)))));
-};
-const Container = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const CalendarContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-
-  ${({ $size }) => ($size === 'large' ? 'width: 120px;' : 'width: 64px;')}
-`;
-const MonthContainer = styled.div `
-  background-color: var(--color-red-5);
-  border-radius: 16px 16px 0 0;
-
-  ${({ $size }) => $size === 'large' ? 'padding: 8px 16px;' : 'padding: 2px 8px;'}
-`;
-const DateContainer = styled.div `
-  background-color: white;
-  border-radius: 0 0 16px 16px;
-  box-shadow: var(--elevation-3);
-
-  ${({ $size }) => $size === 'large' ? 'padding: 8px 16px;' : 'padding: 2px 16px;'}
-`;
-const TimeContainer = styled.div `
-  margin-top: 16px;
-`;

package/dist/components/surfaces/calendar_date/index.js

@@ -1 +0,0 @@
-export { CalendarDate } from './calendar_date';

package/dist/components/surfaces/carousel/card/card.js

@@ -1,96 +0,0 @@
-'use client';
-import React from 'react';
-import styled from 'styled-components';
-import { ChevronLeft, ChevronRight } from '../../../../icons';
-const DEFAULT_SCROLL_TRIGGER_DISTANCE = 11;
-const DEFAULT_SCROLL_DISTANCE = 450;
-export const CardCarousel = ({ children, onScrollEnd, scrollTriggerDistance = DEFAULT_SCROLL_TRIGGER_DISTANCE, scrollDistance = DEFAULT_SCROLL_DISTANCE, sx, }) => {
-    const ref = React.useRef(null);
-    const handleScroll = (event) => {
-        const target = event.target;
-        const scrollDistance = target.scrollWidth - target.scrollLeft;
-        if (scrollDistance - target.clientWidth < scrollTriggerDistance &&
-            onScrollEnd) {
-            onScrollEnd();
-        }
-    };
-    const onNavigateRight = () => {
-        if (ref.current) {
-            const amount = ref.current.scrollLeft + scrollDistance;
-            ref.current.scrollLeft = amount;
-        }
-    };
-    const onNavigateLeft = () => {
-        if (ref.current) {
-            const amount = ref.current.scrollLeft - scrollDistance;
-            ref.current.scrollLeft = amount < 0 ? 0 : amount;
-        }
-    };
-    return (React.createElement(Wrapper, { "$sx": sx },
-        React.createElement(Button, { className: "carousel-navigation", onClick: onNavigateLeft, "$side": "left" },
-            React.createElement(ChevronLeft, { color: "white", size: 48 })),
-        React.createElement(Inner, { onScroll: handleScroll, ref: ref }, children),
-        React.createElement(Button, { className: "carousel-navigation", onClick: onNavigateRight, "$side": "right" },
-            React.createElement(ChevronRight, { color: "white", size: 48 }))));
-};
-const Wrapper = styled.div `
-  position: relative;
-  height: 288px;
-
-  &:hover .carousel-navigation {
-    display: block;
-  }
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Inner = styled.div `
-  position: absolute;
-  width: 100%;
-  z-index: 0;
-  top: 0px;
-  left: 0px;
-  overflow-x: scroll;
-  overflow-y: visible;
-  display: flex;
-  gap: 24px;
-  flex-flow: row nowrap;
-  scroll-behavior: smooth;
-  padding-right: 32px;
-  margin-top: -56px;
-  padding-top: 56px;
-  padding-bottom: 92px;
-
-  & > * {
-    flex-shrink: 0;
-  }
-
-  &::-webkit-scrollbar {
-    width: 0px;
-    height: 0px;
-  }
-`;
-const Button = styled.button `
-  position: absolute;
-  z-index: 1;
-  top: 0px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-  border: none;
-  background: rgba(8, 8, 9, 0.5);
-  padding: 0px 16px;
-  cursor: pointer;
-
-  display: none;
-
-  ${({ $side }) => $side === 'left'
-    ? `
-    left: 0px;
-    border-radius: 0px 16px 16px 0px;
-    `
-    : `
-    right: 0px;
-    border-radius: 16px 0px 0px 16px;`};
-`;

package/dist/components/surfaces/carousel/card/index.js

@@ -1 +0,0 @@
-export { CardCarousel } from './card';

package/dist/components/surfaces/carousel/index.js

@@ -1 +0,0 @@
-export { CardCarousel } from './card';