@soul-refiner/design-system 2.0.0-alpha.20 → 2.0.0-alpha.21

package/dist/src/components/surfaces/modal/modal.js

@@ -1,135 +0,0 @@
-"use client";
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var button = require('../../actions/button/button.js');
-var close = require('../../../icons/basic/close.js');
-var _function = require('../../../utils/function.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const ModalContext = React__default.default.createContext([false, (() => undefined)]);
-const Modal = ({ alwaysRender = true, controlledOpen, onChange, children, ...props }) => {
-    const [open, setOpen] = React__default.default.useState(controlledOpen || false);
-    React__default.default.useEffect(() => {
-        if (controlledOpen !== undefined) {
-            setOpen(controlledOpen);
-        }
-    }, [controlledOpen]);
-    React__default.default.useEffect(() => {
-        onChange && onChange(open);
-    }, [open]);
-    let trigger;
-    const rest = [];
-    React__default.default.Children.forEach(children, (child) => {
-        const type = React__default.default.isValidElement(child) && child.type?.displayName;
-        if (type && type.toLowerCase().includes('trigger')) {
-            trigger = child;
-        }
-        else {
-            rest.push(child);
-        }
-    });
-    return (React__default.default.createElement(ModalContext.Provider, { value: [open, setOpen], ...props },
-        trigger,
-        (open || alwaysRender) && rest));
-};
-const ModalTrigger = ({ children: child, }) => {
-    const [, setOpen] = React__default.default.useContext(ModalContext);
-    return (child &&
-        React__default.default.cloneElement(child, {
-            onClick: _function.callAll(() => setOpen(true), child.props.onClick, (event) => {
-                event?.stopPropagation();
-                event?.preventDefault();
-            }),
-        }));
-};
-ModalTrigger.displayName = 'Modal.Trigger';
-Modal.Trigger = ModalTrigger;
-const ModalDismiss = ({ children: child, setClosed, }) => {
-    const [, setOpen] = React__default.default.useContext(ModalContext);
-    return (child &&
-        React__default.default.cloneElement(child, {
-            onClick: _function.callAll(() => setOpen(false), child.props.onClick, (event) => {
-                setClosed && setClosed();
-                event?.stopPropagation();
-                event?.preventDefault();
-            }),
-        }));
-};
-ModalDismiss.displayName = 'Modal.Dismiss';
-Modal.Dismiss = ModalDismiss;
-const ModalContent = ({ backgroundDark = true, children, footer, header, setClosed, sx, ...props }) => {
-    const [open, setOpen] = React__default.default.useContext(ModalContext);
-    const handleOutsideClick = (event) => {
-        if (event.currentTarget != event.target)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        event.preventDefault();
-        setClosed ? setClosed() : setOpen(false);
-    };
-    return (React__default.default.createElement(Wrapper, { "$backgroundDark": backgroundDark, "$open": open, onClick: handleOutsideClick },
-        React__default.default.createElement(Content, { ...props, "$sx": sx },
-            header && (React__default.default.createElement("div", { className: "header" },
-                React__default.default.createElement("div", null, header),
-                React__default.default.createElement(Modal.Dismiss, { setClosed: setClosed },
-                    React__default.default.createElement(button.Button, { icon: React__default.default.createElement(close.Close, null), type: "special" })))),
-            children,
-            footer && React__default.default.createElement("div", { className: "footer" }, footer))));
-};
-ModalContent.displayName = 'Modal.Content';
-Modal.Content = ModalContent;
-const Wrapper = styled.styled.div `
-  ${({ $open }) => $open
-    ? `display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;`
-    : 'display: none;'}
-  ${({ $backgroundDark }) => $backgroundDark
-    ? `background: rgba(0, 0, 0, 0.5);
-    cursor: pointer;`
-    : ''}
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 100;
-  width: 100vw;
-  height: 100vh;
-  padding: 0px;
-  margin: 0px;
-  overflow: hidden;
-`;
-const Content = styled.styled.div `
-  position: absolute;
-  z-index: 101;
-  background-color: var(--color-white);
-  box-shadow: var(--elevation-2);
-  border-radius: var(--small);
-  cursor: initial;
-  padding: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-
-  [class~='header'] {
-    display: flex;
-    align-items: center;
-
-    div:first-child {
-      flex: 1;
-    }
-  }
-
-  [class~='footer'] {
-    position: relative;
-    padding-top: 16px;
-  }
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-exports.Modal = Modal;

package/dist/src/components/surfaces/portal/portal.js

@@ -1,36 +0,0 @@
-"use client";
-'use strict';
-
-var React = require('react');
-var ReactDOM = require('react-dom');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var ReactDOM__default = /*#__PURE__*/_interopDefaultCompat(ReactDOM);
-
-const Portal = ({ children, wrapperId = 'root-portal-wrapper', }) => {
-    const [wrapper, setWrapper] = React__default.default.useState(null);
-    React__default.default.useEffect(() => {
-        let element = document.getElementById(wrapperId);
-        let portalCreated = false;
-        if (!element) {
-            portalCreated = true;
-            element = document.createElement('div');
-            element.setAttribute('id', wrapperId);
-            document.body.appendChild(element);
-        }
-        setWrapper(element);
-        return () => {
-            if (portalCreated && element?.parentNode) {
-                element.parentNode.removeChild(element);
-            }
-        };
-    }, [wrapperId]);
-    if (!wrapper) {
-        return null;
-    }
-    return ReactDOM__default.default.createPortal(children, wrapper);
-};
-
-exports.Portal = Portal;

package/dist/src/components/surfaces/post/post.js

@@ -1,246 +0,0 @@
-"use client";
-'use strict';
-
-var React = require('react');
-var Image = require('next/image');
-var Link = require('next/link');
-var styled = require('styled-components');
-var heading = require('../../atoms/typography/heading.js');
-var paragraph = require('../../atoms/typography/paragraph.js');
-require('../../atoms/box/box.js');
-require('../../atoms/typography/display.js');
-require('../../atoms/typography/typography.js');
-var time_ago = require('../../atoms/time_ago/time_ago.js');
-var button = require('../../actions/button/button.js');
-var avatar = require('../../iconography/avatar/avatar.js');
-var lock = require('../../../icons/security/lock.js');
-var modal = require('../modal/modal.js');
-var chevron_left = require('../../../icons/arrow/chevron_left.js');
-var chevron_right = require('../../../icons/arrow/chevron_right.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var Image__default = /*#__PURE__*/_interopDefaultCompat(Image);
-var Link__default = /*#__PURE__*/_interopDefaultCompat(Link);
-
-const Post = ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, avatarTooltipSx, children, content, createdDate, dropdown, hasComments, id, images, isPaywalled = false, onJoin, }) => {
-    const componentId = React__default.default.useId();
-    const [curr, setCurr] = React__default.default.useState(-1);
-    const [modalContentSize, setModalContentSize] = React__default.default.useState({
-        x: '30vw',
-        y: '30vh',
-    });
-    React__default.default.useEffect(() => {
-        const handleKeyEvent = (event) => {
-            if (event.key === 'ArrowLeft') {
-                handleDecrement();
-            }
-            else if (event.key === 'ArrowRight') {
-                handleIncrement();
-            }
-            else if (event.key === 'Escape' || event.key === 'Enter') {
-                setCurr(-1);
-            }
-        };
-        if (typeof document !== 'undefined' && !!images?.length) {
-            document.addEventListener('keydown', handleKeyEvent);
-        }
-        return () => {
-            images?.length &&
-                document.removeEventListener('keydown', handleKeyEvent);
-        };
-    }, []);
-    const _actions = React__default.default.Children.toArray(actions);
-    const _comments = React__default.default.Children.toArray(children);
-    const handleImageLoad = (event) => {
-        const { naturalHeight, naturalWidth } = event.target;
-        let x = `${naturalWidth}px`;
-        let y = `${naturalHeight}px`;
-        // if natural size is smaller than window height and width
-        if (window?.innerHeight < naturalHeight &&
-            window?.innerWidth < naturalWidth) {
-            x = `${Math.floor((window.innerHeight * 0.95 * naturalWidth) / naturalHeight)}px`;
-            y = `${Math.round((window.innerWidth * 0.95 * naturalHeight) / naturalWidth)}px`;
-            // just smaller than height
-        }
-        else if (window?.innerHeight < naturalHeight) {
-            x = `${Math.floor((window.innerHeight * 0.95 * naturalWidth) / naturalHeight)}px`;
-            y = '95vh';
-            // just smaller than width
-        }
-        else if (window?.innerWidth < naturalWidth) {
-            x = '95vw';
-            y = `${Math.round((window.innerWidth * 0.95 * naturalHeight) / naturalWidth)}px`;
-        }
-        setModalContentSize({ x, y });
-    };
-    const handleIncrement = () => {
-        setCurr((prev) => {
-            if (images?.length && prev !== images.length - 1) {
-                return prev + 1;
-            }
-            else {
-                return prev;
-            }
-        });
-    };
-    const handleDecrement = () => {
-        setCurr((prev) => {
-            if (images?.length && prev !== 0) {
-                return prev - 1;
-            }
-            else {
-                return prev;
-            }
-        });
-    };
-    return (React__default.default.createElement(Wrapper, { id: id },
-        curr > -1 && !!images?.[curr] && (React__default.default.createElement(modal.Modal, { alwaysRender: false, controlledOpen: true, onChange: (open) => !open && setCurr(-1) },
-            React__default.default.createElement(modal.Modal.Content, { sx: `
-            position: relative; 
-            height: ${modalContentSize.y}; 
-            width: ${modalContentSize.x};
-            margin: 0 auto;
-            ` },
-                React__default.default.createElement(NavArrow, { "$side": "left", "$visible": curr !== 0, onClick: handleDecrement },
-                    React__default.default.createElement(chevron_left.ChevronLeft, { color: "white", size: 48 })),
-                React__default.default.createElement(Image__default.default, { alt: "", fill: true, quality: 100, onLoad: handleImageLoad, priority: true, sizes: "100vw", src: images[curr], style: { objectFit: 'cover' } }),
-                React__default.default.createElement(NavArrow, { "$side": "right", "$visible": curr !== images.length - 1, onClick: handleIncrement },
-                    React__default.default.createElement(chevron_right.ChevronRight, { color: "white", size: 48 }))))),
-        React__default.default.createElement(Header, null,
-            React__default.default.createElement(avatar.Avatar, { as: !!authorHref ? Link__default.default : 'button', href: authorHref, image: authorImage, size: 64, status: authorActive ? 'online' : undefined, subtitle: React__default.default.createElement(paragraph.P, { as: "span", sx: "vertical-align: top;", "$fontSize": 14, "$lineHeight": 20 },
-                    React__default.default.createElement(time_ago.TimeAgo, { date: new Date(createdDate) })), title: React__default.default.createElement(heading.H, { as: "span", "$bold": true, "$fontSize": 18, "$lineHeight": 26 }, author), textPosition: "right", tooltipContent: avatarTooltipContent, tooltipSx: avatarTooltipSx, sx: !!authorHref ? 'img { cursor: pointer; }' : undefined }),
-            dropdown),
-        !!content?.length && (React__default.default.createElement("div", { style: { padding: '16px 24px' } },
-            React__default.default.createElement(paragraph.P, { "$textClampLines": isPaywalled ? 2 : undefined }, content))),
-        !!images?.length && (React__default.default.createElement(ImagesWrapper, { "$numImages": images.length, "$isPaywalled": isPaywalled },
-            images.slice(0, 4).map((url, i) => (React__default.default.createElement(ImageWrapper, { key: `${componentId}${url.slice(0, 15)}${i}` },
-                React__default.default.createElement(Image__default.default, { alt: "", fill: true, onClick: () => setCurr(i), quality: 100, src: url, style: { cursor: 'pointer' } })))),
-            images.length > 4 && (React__default.default.createElement(heading.H, { as: "p", className: "more-than", "$color": "grey-10", "$fontSize": 28, "$lineHeight": 36, "$semiBold": true },
-                "+",
-                images.length - 4)))),
-        !!images?.length && isPaywalled && (React__default.default.createElement(PaywallWrapper, null,
-            React__default.default.createElement(lock.Lock, { size: 40, color: "grey-7" }),
-            React__default.default.createElement(paragraph.P, { "$fontSize": 14, "$bold": true, "$lineHeight": 20, "$color": "white" },
-                "Become a member",
-                React__default.default.createElement("br", null),
-                "to unlock this post"),
-            React__default.default.createElement(button.Button, { onClick: onJoin, size: "small", sx: "width: 213px;", type: "outlined" }, "Join now"))),
-        !!_actions.length && (React__default.default.createElement(ActionsWrapper, null, !isPaywalled && _actions)),
-        hasComments && !!_comments.length && (React__default.default.createElement(CommentWrapper, null, _comments))));
-};
-const Wrapper = styled.styled.div `
-  position: relative;
-  max-width: 700px;
-  width: 100%;
-  background-color: var(--color-white);
-  border-radius: 24px;
-  box-shadow: var(--elevation-7);
-
-  label > div {
-    box-shadow: var(--elevation-6);
-    border-radius: 16px;
-  }
-`;
-const Header = styled.styled.div `
-  padding: 16px 24px;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  border-bottom: 1px solid var(--color-grey-9);
-`;
-const ImagesWrapper = styled.styled.div `
-  position: relative;
-  display: flex;
-  gap: 8px;
-  flex-flow: row wrap;
-  justify-content: space-between;
-
-  @media screen and (max-width: 532px) {
-    overflow-y: auto;
-  }
-
-  .more-than {
-    position: absolute;
-    bottom: 94px;
-    right: 154px;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
-  }
-
-  ${({ $numImages }) => $numImages > 1
-    ? `
-    div {
-      min-width: calc(50% - 4px);
-      max-width: calc(50% - 4px);
-
-      flex:1;
-      img {
-        object-fit: cover;
-        width: 100%;
-        height: 100%;
-      }
-    }`
-    : `
-    div > img {
-      object-fit: contain;
-      width: 100%;
-      height: 100%;
-    }
-    `}
-
-  ${({ $isPaywalled }) => $isPaywalled
-    ? /** TODO REMOVE USER CAN CHANGE -> SECURITY */
-        `
-    filter: blur(10px) brightness(0.6);
-    clip-path: inset(0px 0px 0px 0px);`
-    : ''}
-`;
-const ImageWrapper = styled.styled.div `
-  position: relative;
-  aspect-ratio: 700 / 427;
-  flex: 1;
-  min-width: min(227px, 80vw);
-`;
-const PaywallWrapper = styled.styled.div `
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  align-items: center;
-  top: 310px;
-  left: 242px;
-`;
-const ActionsWrapper = styled.styled.div `
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  padding: 24px;
-`;
-const CommentWrapper = styled.styled.div `
-  padding: 24px;
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 24px;
-`;
-const NavArrow = styled.styled.button `
-  width: 48px;
-  height: 150px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  z-index: 100;
-  top: calc(50vh - 75px);
-  background-color: rgba(0, 0, 0, 0.5);
-  ${({ $side }) => $side}: 0;
-  border-radius: ${({ $side }) => $side === 'left' ? '0 12px 12px 0' : '12px 0 0 12px'};
-  ${({ $visible }) => $visible
-    ? 'visibility: visible; cursor: pointer;'
-    : 'visibility: hidden; pointer-events: none;'}
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.2);
-  }
-`;
-
-exports.Post = Post;

package/dist/src/components/table/table/table.js

@@ -1,192 +0,0 @@
-"use client";
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var box = require('../../atoms/box/box.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const Table = ({ border = true, children, compact, footer, header, separated, striped, sx, padding = 32, }) => {
-    return (React__default.default.createElement(box.Box, { "$backgroundColor": "white", "$borderRadius": "large", "$display": "flex", "$dir": "column", "$gap": 32, "$padding": padding, sx: compact ? 'width: fit-content;' : '' },
-        !!header && header,
-        React__default.default.createElement(box.Box, { "$borderRadius": "small", sx: border ? 'border: 1px solid var(--color-grey-8);' : '' },
-            React__default.default.createElement(TableElement, { "$compact": compact, "$separated": separated, "$striped": striped, "$sx": sx }, children)),
-        !!footer && footer));
-};
-const TableElement = styled.styled.table `
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  ${({ $compact }) => ($compact ? 'width: fit-content;' : '')}
-  ${({ $separated }) => $separated
-    ? `
-    & > tbody > * {
-      border-bottom: 1px solid var(--color-grey-9);
-      &:last-child {
-        border-bottom: none;
-      }
-    }`
-    : ''}
-  ${({ $striped }) => $striped
-    ? `
-    & > tbody > *:nth-of-type(even) {
-      background-color: var(--color-grey-10);
-    }`
-    : ''}
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-/********************************************************
- *  Table Head
- */
-const Head = ({ children, ...rest }) => {
-    return React__default.default.createElement(HeadElement, { ...rest }, children);
-};
-const HeadElement = styled.styled.thead `
-  tr {
-    background-color: var(--color-grey-10);
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-
-    & > *:first-of-type {
-      border-top-left-radius: 8px;
-    }
-
-    & > *:last-of-type {
-      border-top-right-radius: 8px;
-    }
-  }
-`;
-Head.displayName = 'Table.Head';
-Table.Head = Head;
-/********************************************************
- *  Table Body
- */
-const Body = ({ children, ...rest }) => {
-    return React__default.default.createElement(BodyElement, { ...rest }, children);
-};
-const BodyElement = styled.styled.tbody `
-  & > tr:last-of-type {
-    & > *:first-child {
-      border-bottom-left-radius: 8px;
-    }
-
-    & > *:last-child {
-      border-bottom-right-radius: 8px;
-    }
-  }
-`;
-Body.displayName = 'Table.Body';
-Table.Body = Body;
-/********************************************************
- *  Table Foot
- */
-const Foot = ({ children, ...rest }) => {
-    return React__default.default.createElement("tfoot", { ...rest }, children);
-};
-Foot.displayName = 'Table.Foot';
-Table.Footer = Foot;
-const Row = ({ children, disabled, href, hoverable = false, onClick, selected, sx, ...rest }) => {
-    const handleClick = href
-        ? (event) => {
-            if (event.metaKey || event.ctrlKey) {
-                const win = window.open(href, '_blank');
-                win?.focus();
-            }
-            else {
-                window.location.href = href;
-            }
-        }
-        : onClick
-            ? (event) => {
-                onClick(event);
-            }
-            : undefined;
-    return (React__default.default.createElement(RowElement, { onClick: handleClick, "$disabled": disabled, "$hoverable": hoverable, "$isAnchor": !!href, "$selected": selected, "$sx": sx, ...rest }, children));
-};
-const RowElement = styled.styled.tr `
-  display: table-row;
-
-  ${({ $disabled }) => $disabled
-    ? `
-    background-color: var(--color-grey-9) !important;
-    color: var(--color-grey-7);
-    & > * {
-      color: var(--color-grey-7) !important;
-    }`
-    : ''}
-
-  ${({ $disabled, $hoverable }) => !$disabled && $hoverable ? 'background-color: var(--color-grey-9);' : ''}
-
-  ${({ $disabled, $selected }) => !$disabled && $selected ? 'background-color: var(--color-grey-8;' : ''}
-
-  ${({ $disabled, $isAnchor }) => !$disabled && $isAnchor
-    ? `
-    cursor: pointer;
-    padding-right: 24px;
-
-    &:hover {
-      background-color: var(--color-grey-10);
-
-      & > td:last-child {
-        position: relative;
-      }
-      & > td:last-child::after {
-        content: "❯";
-        color: var(--color-blue-3);
-        position: absolute;
-        right: 12px;
-        top: calc(50% - 11px);
-      }
-    }`
-    : ''}
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-Row.displayName = 'Table.Row';
-Table.Row = Row;
-const Cell = ({ children, lines, padding = '16px 24px', sx, textAlign = 'left', verticalAlign = 'middle', width, }) => {
-    const percentageWidth = width ? width * (1 / 16) + '%' : undefined;
-    return (React__default.default.createElement(CellElement, { "$clamp": lines, "$padding": padding, "$sx": sx, "$textAlign": textAlign, "$verticalAlign": verticalAlign, "$width": percentageWidth ? percentageWidth : 'fit-content' },
-        React__default.default.createElement("div", null, children)));
-};
-const CellElement = styled.styled.td `
-  width: ${({ $width }) => $width};
-  height: 20px;
-  font-family: var(--font-inter);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  color: var(--color-grey-3);
-  vertical-align: ${({ $verticalAlign }) => $verticalAlign ? $verticalAlign : ''};
-  text-align: ${({ $textAlign }) => ($textAlign ? $textAlign : '')};
-  padding: ${({ $padding }) => $padding};
-  ${({ $clamp }) => $clamp
-    ? `
-  & > div {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    line-clamp: ${$clamp};
-    -webkit-line-clamp: ${$clamp};
-    -webkit-box-orient: vertical;
-  }`
-    : ''}
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-Cell.displayName = 'Table.Cell';
-Table.Cell = Cell;
-const HeaderCell = ({ children, lines, padding = '16px 24px', sx, textAlign = 'left', verticalAlign = 'middle', width, }) => {
-    const percentageWidth = width ? width * (100 / 16) + '%' : undefined;
-    return (React__default.default.createElement(HeadCellElement, { as: "th", "$clamp": lines, "$padding": padding, "$sx": sx, "$textAlign": textAlign, "$verticalAlign": verticalAlign, "$width": percentageWidth ? percentageWidth : 'fit-content' }, children));
-};
-const HeadCellElement = styled.styled(CellElement) `
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 24px;
-`;
-HeaderCell.displayName = 'Table.HeaderCell';
-Table.HeaderCell = HeaderCell;
-
-exports.Table = Table;