@soul-refiner/design-system 0.2.105 → 0.2.107

package/dist/components/actions/button/button.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 type NativeProps = Pick<React.HTMLAttributes<HTMLButtonElement>, 'dangerouslySetInnerHTML' | 'onClick' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'> & {
     value?: string;
 };
-type ButtonTypes = 'primary' | 'secondary' | 'outlined' | 'danger' | 'text' | 'raised' | 'special';
+type ButtonTypes = 'primary' | 'secondary' | 'outlined' | 'danger' | 'text' | 'raised' | 'special' | 'dropdown';
 type ButtonSize = 'small' | 'large';
 type ButtonShape = 'none' | 'small' | 'medium-small' | 'large';
 export interface ButtonProps extends NativeProps, React.PropsWithChildren {

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

@@ -51,6 +51,7 @@ const Components = () => ({
     raised: Raised,
     special: Special,
     text: Text,
+    dropdown: Dropdown,
 });
 const base = css `
   font-family: var(--font-inter);
@@ -246,3 +247,24 @@ const Special = styled(Box) `
 
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
+const Dropdown = styled(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-radius: 8px;
+  border: 0;
+
+  &:hover {
+    border: 0;
+    background-color: var(--color-blue-10);
+  }
+
+  ${base}
+  ${Styles.flex}
+  ${Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;

package/dist/components/custom/index.d.ts

@@ -0,0 +1,2 @@
+export { UsersSelection } from './users_selection';
+export type { UsersSelectionProps } from './users_selection';

package/dist/components/custom/index.js

@@ -0,0 +1 @@
+export { UsersSelection } from './users_selection';

package/dist/components/custom/users_selection/index.d.ts

@@ -0,0 +1,2 @@
+export { UsersSelection } from './users_selection';
+export type { UsersSelectionProps } from './users_selection';

package/dist/components/custom/users_selection/index.js

@@ -0,0 +1 @@
+export { UsersSelection } from './users_selection';

package/dist/components/custom/users_selection/users_selection.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+type NativeProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onBlur' | 'onBlurCapture' | 'onClick' | 'onChange' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'>;
+type User = {
+    id: string;
+    fullName: string;
+    imageSrc: string;
+};
+export interface UsersSelectionProps extends NativeProps, React.PropsWithChildren {
+    closeOnBlur?: boolean;
+    disabled?: boolean;
+    offset?: [number, number];
+    sx?: string;
+    containerSx?: string;
+    searchSx?: string;
+    users: User[];
+    label: string;
+    title: string;
+    userIsChecked: Record<string, boolean>;
+    setUserIsChecked: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+}
+export declare const UsersSelection: ({ closeOnBlur, disabled, offset, sx, containerSx, searchSx, users, label, title, userIsChecked, setUserIsChecked, ...rest }: UsersSelectionProps) => React.JSX.Element;
+export {};

package/dist/components/custom/users_selection/users_selection.js

@@ -0,0 +1,118 @@
+'use client';
+import { Group } from '../../../icons';
+import React from 'react';
+import styled from 'styled-components';
+import { Button, P, Search, Checkbox, Box } from '../../';
+export const UsersSelection = ({ closeOnBlur = true, disabled = false, offset = [0, 0], sx, containerSx, searchSx, users, label, title, userIsChecked, setUserIsChecked, ...rest }) => {
+    const wrapperRef = React.useRef(null);
+    const [open, setOpen] = React.useState(true);
+    const [searchValue, setSearchValue] = React.useState('');
+    React.useEffect(() => {
+        if (disabled) {
+            setOpen(false);
+        }
+    }, [disabled]);
+    const handleOpen = () => {
+        if (disabled) {
+            return;
+        }
+        setOpen((prev) => !prev);
+    };
+    const handleBlur = (event) => {
+        if (closeOnBlur &&
+            wrapperRef?.current &&
+            !wrapperRef?.current?.contains(event.relatedTarget)) {
+            setOpen(false);
+        }
+    };
+    return (React.createElement(Wrapper, { "$sx": sx, tabIndex: 0, ref: wrapperRef, onBlurCapture: handleBlur, ...rest },
+        React.createElement(Button, { type: "dropdown", isDropdownOpen: open, onClick: handleOpen },
+            React.createElement(Group, { size: 16, sx: "margin-right: 16px;" }),
+            label),
+        open && (React.createElement(Container, { "$offset": offset, "$sx": containerSx },
+            React.createElement(P, null, title),
+            React.createElement(Search, { onChange: (event) => setSearchValue(event.target.value), onClearText: () => setSearchValue(''), value: searchValue, size: "large", placeholder: "Search...", sx: `margin-top: 8px; margin-bottom: 8px; border-radius: 76px; ${searchSx}` }),
+            users
+                .filter((user) => searchValue
+                ? user.fullName
+                    .toLowerCase()
+                    .includes(searchValue.toLowerCase())
+                : true)
+                .map((user) => (React.createElement(React.Fragment, { key: user.id },
+                React.createElement(OptionWrapper, { "$disabled": disabled, onClick: () => setUserIsChecked({
+                        ...userIsChecked,
+                        [user.id]: !userIsChecked[user.id],
+                    }) },
+                    React.createElement(Box, { "$display": "flex", "$align": "center" },
+                        React.createElement(Image, { src: user.imageSrc }),
+                        React.createElement(P, { "$color": 'grey-4', "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 1 }, user.fullName),
+                        React.createElement(Checkbox, { selected: userIsChecked[user.id], sx: "margin-left: auto;" }))),
+                React.createElement(Spacer, null))))))));
+};
+const Wrapper = styled.div `
+  position: relative;
+  display: block;
+  outline: none;
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Container = styled.div `
+  min-width: 280px;
+  max-height: 600px;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-white);
+  position: absolute;
+  width: 100%;
+  outline: none;
+  cursor: pointer;
+  box-shadow: var(--elevation-2);
+  border-radius: 8px;
+  overflow: auto;
+  padding: 24px;
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+
+  ${({ $offset }) => $offset ? `transform: translate(${$offset[0]}px, ${$offset[1]}px);` : ''}
+`;
+const OptionWrapper = styled.div `
+  position: relative;
+  padding: 12px 16px;
+  user-select: none;
+  gap: 8px;
+
+  & > * {
+    pointer-events: none;
+  }
+
+  ${({ $disabled }) => {
+    if ($disabled) {
+        return `cursor: initial;
+      color: var(--color-grey-7);
+      background-color: var(--color-grey-10);`;
+    }
+    return `
+    &:hover {
+      background-color: var(--color-blue-10);
+    }
+
+    &:active {
+      background-color: var(--color-grey-8);
+    }
+    `;
+}}
+`;
+const Image = styled.img `
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  margin-right: 16px;
+`;
+const Spacer = styled.div `
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-grey-8);
+
+  &:hover {
+    appearance: none;
+  }
+`;

package/dist/components/iconography/avatar/avatar.d.ts

@@ -16,14 +16,13 @@ export interface AvatarProps extends NativeProps {
     title?: React.ReactNode;
     tooltipContent?: React.ReactElement;
     tooltipSx?: string;
-    tooltipWrapperId?: string;
 }
 /**
  *
  * Avatar
  */
 declare const Avatar: {
-    ({ as, href, image, size, status, subtitle, sx, textPosition, title, tooltipContent, tooltipSx, tooltipWrapperId, ...rest }: AvatarProps): React.JSX.Element;
+    ({ as, href, image, size, status, subtitle, sx, textPosition, title, tooltipContent, tooltipSx, ...rest }: AvatarProps): React.JSX.Element;
     displayName: string;
     Group: {
         ({ children, numDisplayed, total }: AvatarGroupProps): React.JSX.Element;

package/dist/components/iconography/avatar/avatar.js

@@ -1,9 +1,8 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Box, H, P, Portal } from '../../';
+import { Box, H, P } from '../../';
 import { Approved, Busy, Declined, Default, Focus, Locked, Offline, Online, Subscribed, } from './icons';
-import { useHover } from '../../../';
 /**
  * Lookup tables for sizes
  */
@@ -58,14 +57,16 @@ const iconOffsetY = {
  *
  * Avatar
  */
-const Avatar = ({ as = 'button', href, image, size = 64, status, subtitle, sx, textPosition = 'left', title, tooltipContent, tooltipSx, tooltipWrapperId = 'avatar-tooltip', ...rest }) => {
+const Avatar = ({ as = 'button', href, image, size = 64, status, subtitle, sx, textPosition = 'left', title, tooltipContent, tooltipSx, ...rest }) => {
     const [displayDefault, setDisplayDefault] = React.useState(false);
-    const componentWrapperRef = React.useRef(null);
-    const tooltipRef = React.useRef(null);
-    const hovered = useHover(componentWrapperRef);
-    const tooltipHovered = useHover(tooltipRef);
     const Icon = iconReference?.[status ?? 'none'];
-    return (React.createElement(ComponentWrapper, { id: "avatar-tooltip", ref: componentWrapperRef, "$sx": sx, ...rest },
+    return (React.createElement(Box, { "$align": "center", "$gap": 18, sx: `
+        position: relative; 
+        &:hover > div:nth-of-type(2) {
+          display: flex;
+        }
+        ${sx}
+      `, ...rest },
         React.createElement(Container, { as: as, "$size": size, href: href },
             !displayDefault && (React.createElement("img", { src: image ?? '', onError: () => setDisplayDefault(true) })),
             displayDefault && React.createElement(Default, null),
@@ -74,26 +75,9 @@ const Avatar = ({ as = 'button', href, image, size = 64, status, subtitle, sx, t
         (title || subtitle) && (React.createElement(TextContainer, { "$textPosition": textPosition },
             title && (React.createElement(H, { as: "h3", "$bold": true, "$color": "grey-2", "$textClampLines": 1, sx: "font-size: 26px;" }, title)),
             subtitle && (React.createElement(P, { "$color": "grey-4", "$textClampLines": 1 }, subtitle)))),
-        tooltipContent && (React.createElement(Portal, { wrapperId: tooltipWrapperId },
-            React.createElement(TooltipContainer, { id: "tooltip-container", ref: tooltipRef, "$sx": `${hovered || tooltipHovered ? 'display: flex' : 'display: none'}; ${tooltipSx}` }, tooltipContent)))));
+        tooltipContent && (React.createElement(TooltipContainer, { "$sx": tooltipSx }, tooltipContent))));
 };
 Avatar.displayName = 'Avatar';
-const ComponentWrapper = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  flex: none;
-  flex-flow: row;
-  flex-direction: row;
-  justify-content: normal;
-  background-color: var(--page-bg);
-  box-shadow: none;
-  margin: 0px;
-  padding: 0px;
-  position: relative;
-
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
 const Container = styled.div `
   flex-shrink: 0;
   display: flex;
@@ -131,13 +115,13 @@ const TextContainer = styled.div `
   order: ${({ $textPosition }) => ($textPosition === 'left' ? -1 : 1)};
 `;
 const TooltipContainer = styled.div `
+  display: none;
   position: absolute;
   top: 100%;
   z-index: 250;
   background-color: var(--color-white);
   border-radius: 24px;
   box-shadow: var(--elevation-2);
-  // pointer-events: none;
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
 const Group = ({ children, numDisplayed, total }) => {

package/dist/components/index.d.ts

@@ -3,9 +3,9 @@ export * from './atoms';
 export * from './card';
 export * from './editor';
 export * from './feedback';
-export * from './hooks';
 export * from './iconography';
 export * from './input';
 export * from './navigation';
 export * from './surfaces';
 export * from './table';
+export * from './custom';

package/dist/components/index.js

@@ -3,9 +3,9 @@ export * from './atoms';
 export * from './card';
 export * from './editor';
 export * from './feedback';
-export * from './hooks';
 export * from './iconography';
 export * from './input';
 export * from './navigation';
 export * from './surfaces';
 export * from './table';
+export * from './custom';

package/dist/components/input/checkbox/checkbox.d.ts

@@ -3,6 +3,7 @@ type NativeProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onCha
 export interface CheckboxProps extends NativeProps {
     disabled?: boolean;
     selected: boolean;
+    sx?: string;
 }
-export declare const Checkbox: ({ disabled, selected, ...rest }: CheckboxProps) => React.JSX.Element;
+export declare const Checkbox: ({ disabled, selected, sx, ...rest }: CheckboxProps) => React.JSX.Element;
 export {};

package/dist/components/input/checkbox/checkbox.js

@@ -3,8 +3,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { Styles } from '../../../common';
 import { Checkmark } from '../../../icons';
-export const Checkbox = ({ disabled, selected, ...rest }) => {
-    return (React.createElement(Box, { "$align": "center", "$disabled": !!disabled, "$display": "flex", "$justify": "center", "$selected": selected, ...rest }, selected && React.createElement(Checkmark, { color: "white" })));
+export const Checkbox = ({ disabled, selected, sx, ...rest }) => {
+    return (React.createElement(Box, { "$align": "center", "$disabled": !!disabled, "$display": "flex", "$justify": "center", "$selected": selected, "$sx": sx, ...rest }, selected && React.createElement(Checkmark, { color: "white" })));
 };
 const Box = styled.div `
   display: flex;
@@ -19,4 +19,5 @@ const Box = styled.div `
     border: 1px solid var(--color-primary-blue-2);`
     : 'border: 1px solid var(--color-grey-8);'}
   ${Styles.flex}
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;

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

@@ -52,6 +52,7 @@ const Wrapper = styled.div `
   ${Styles.padding}
   display: flex;
   background-color: var(--color-white);
+  border: 1px solid transparent;
 
   & > * {
     width: fit-content;

package/dist/components/surfaces/comment/comment.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface CommentProps {
     avatarTooltipContent?: React.ReactElement;
+    avatarTooltipSx?: string;
     content: string;
     createdDate: Date;
     hasMoreReplies?: boolean;
@@ -16,4 +17,4 @@ export interface CommentProps {
     userReactions?: string[];
     userProfileUri: string;
 }
-export declare const Comment: ({ avatarTooltipContent, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, reactionModal, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }: CommentProps) => React.JSX.Element;
+export declare const Comment: ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, reactionModal, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }: CommentProps) => React.JSX.Element;

package/dist/components/surfaces/comment/comment.js

@@ -10,7 +10,7 @@ import { Styles } from '../../../common';
 import { ThumbsUp, Comment as CommentIcon } from '../../../icons';
 import { abbrTimeBeforeDate } from './helpers';
 const MAX_REACTIONS_SHOWN = 5;
-export const Comment = ({ avatarTooltipContent, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, reactionModal, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }) => {
+export const Comment = ({ avatarTooltipContent, avatarTooltipSx, content, createdDate, hasMoreReplies, id, onComment, onReact, onShowReplies, reactionModal, reactions, replies, userImageUri, userName, userReactions, userProfileUri, }) => {
     const [showPicker, setShowPicker] = React.useState(false);
     const [pickerTriggerLoc, setPickerTriggerLoc] = React.useState({
         x: 0,
@@ -66,7 +66,7 @@ export const Comment = ({ avatarTooltipContent, content, createdDate, hasMoreRep
                 React.createElement(ReplyIndicator, null)));
         });
     return (React.createElement(Wrapper, { id: id },
-        React.createElement(Avatar, { href: userProfileUri, image: userImageUri, size: 32, tooltipContent: avatarTooltipContent }),
+        React.createElement(Avatar, { href: userProfileUri, image: userImageUri, size: 32, tooltipContent: avatarTooltipContent, tooltipSx: avatarTooltipSx }),
         React.createElement(Box, { "$flex": 1, "$dir": "column" },
             React.createElement(ContentWrapper, { "$hasReplies": hasReplies || !!hasMoreReplies },
                 React.createElement(CommentBox, null,

package/dist/components/surfaces/post/post.d.ts

@@ -6,6 +6,7 @@ export interface PostProps extends React.PropsWithChildren {
     authorHref: string;
     authorImage: string;
     avatarTooltipContent?: React.ReactElement;
+    avatarTooltipSx?: string;
     content: string;
     createdDate: string;
     dropdown?: React.ReactElement;
@@ -15,4 +16,4 @@ export interface PostProps extends React.PropsWithChildren {
     isPaywalled?: boolean;
     onJoin?: () => void;
 }
-export declare const Post: ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, children, content, createdDate, dropdown, hasComments, id, images, isPaywalled, onJoin, }: PostProps) => React.JSX.Element;
+export declare const Post: ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, avatarTooltipSx, children, content, createdDate, dropdown, hasComments, id, images, isPaywalled, onJoin, }: PostProps) => React.JSX.Element;

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

@@ -6,14 +6,14 @@ import { TimeAgo } from '../../atoms/time_ago/time_ago';
 import { Button } from '../../actions/button';
 import { Avatar } from '../../iconography/avatar';
 import { Lock } from '../../../icons';
-export const Post = ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, children, content, createdDate, dropdown, hasComments, id, images, isPaywalled = false, onJoin, }) => {
+export const Post = ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, avatarTooltipSx, children, content, createdDate, dropdown, hasComments, id, images, isPaywalled = false, onJoin, }) => {
     const componentId = React.useId();
     const _actions = React.Children.toArray(actions);
     const _comments = React.Children.toArray(children);
     return (React.createElement(Wrapper, { id: id },
         React.createElement(Header, null,
             React.createElement(Avatar, { href: authorHref, image: authorImage, size: 64, status: authorActive ? 'online' : undefined, subtitle: React.createElement(P, { as: "span", sx: "vertical-align: top;", "$fontSize": 14, "$lineHeight": 20 },
-                    React.createElement(TimeAgo, { date: new Date(createdDate) })), title: React.createElement(H, { as: "span", "$bold": true, "$fontSize": 18, "$lineHeight": 26 }, author), textPosition: "right", tooltipContent: avatarTooltipContent }),
+                    React.createElement(TimeAgo, { date: new Date(createdDate) })), title: React.createElement(H, { as: "span", "$bold": true, "$fontSize": 18, "$lineHeight": 26 }, author), textPosition: "right", tooltipContent: avatarTooltipContent, tooltipSx: avatarTooltipSx }),
             dropdown),
         !!content?.length && (React.createElement("div", { style: { padding: 24 } },
             React.createElement(P, { "$textClampLines": isPaywalled ? 2 : undefined }, content))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.105",
+  "version": "0.2.107",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {

package/dist/components/hooks/click-outside.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const useClickOutside: (ref: React.Ref<HTMLElement>, cb: (...args: any[]) => unknown) => void;

package/dist/components/hooks/click-outside.js

@@ -1,10 +0,0 @@
-'use client';
-import { useEventListener } from './event-listenter';
-export const useClickOutside = (ref, cb) => {
-    useEventListener('click', (e) => {
-        if (ref?.current == null ||
-            ref?.current?.contains(e.target))
-            return;
-        cb(e);
-    }, document);
-};

package/dist/components/hooks/event-listenter.d.ts

@@ -1 +0,0 @@
-export declare const useEventListener: (eventType: string, callback: (...args: any[]) => unknown, element?: Window & typeof globalThis) => void;

package/dist/components/hooks/event-listenter.js

@@ -1,15 +0,0 @@
-'use client';
-import React from 'react';
-export const useEventListener = (eventType, callback, element = window) => {
-    const callbackRef = React.useRef(callback);
-    React.useEffect(() => {
-        callbackRef.current = callback;
-    }, [callback]);
-    React.useEffect(() => {
-        if (element == null)
-            return;
-        const handler = (e) => callbackRef.current(e);
-        element.addEventListener(eventType, handler);
-        return () => element.removeEventListener(eventType, handler);
-    }, [eventType, element]);
-};

package/dist/components/hooks/hover.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const useHover: (ref: React.Ref<HTMLElement>) => boolean;

package/dist/components/hooks/hover.js

@@ -1,9 +0,0 @@
-'use client';
-import React from 'react';
-import { useEventListener } from './event-listenter';
-export const useHover = (ref) => {
-    const [hovered, setHovered] = React.useState(false);
-    useEventListener('mouseover', () => setHovered(true), ref?.current);
-    useEventListener('mouseout', () => setHovered(false), ref?.current);
-    return hovered;
-};

package/dist/components/hooks/index.d.ts

@@ -1,4 +0,0 @@
-export { useClickOutside } from './click-outside';
-export { useEventListener } from './event-listenter';
-export { useHover } from './hover';
-export { useWindowSize } from './window-size';

package/dist/components/hooks/index.js

@@ -1,4 +0,0 @@
-export { useClickOutside } from './click-outside';
-export { useEventListener } from './event-listenter';
-export { useHover } from './hover';
-export { useWindowSize } from './window-size';

package/dist/components/hooks/window-size.d.ts

@@ -1,4 +0,0 @@
-export declare const useWindowSize: () => {
-    width: number;
-    height: number;
-};

package/dist/components/hooks/window-size.js

@@ -1,13 +0,0 @@
-'use client';
-import React from 'react';
-import { useEventListener } from './event-listenter';
-export const useWindowSize = () => {
-    const [windowSize, setWindowSize] = React.useState({
-        width: window.innerWidth,
-        height: window.innerHeight,
-    });
-    useEventListener('resize', () => {
-        setWindowSize({ width: window.innerWidth, height: window.innerHeight });
-    });
-    return windowSize;
-};