@soul-refiner/design-system 0.1.38 → 0.1.39

package/src/components/feedback/progress/progress.tsx

@@ -1,169 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { colorReference } from '../../../common';
-import { Box, P } from '../../';
-import {
-  CheckmarkCircle,
-  Checkmarks,
-  Close,
-  MinusCircle,
-  Pause,
-} from '../../../icons';
-
-type ProgressType = 'compact' | 'detailed';
-
-export interface ProgressProps {
-  hasError?: boolean;
-  hasIcon?: boolean;
-  /**
-   * @param progress a percentage until complete
-   */
-  progress: number;
-  subtitle?: string;
-  sx?: string;
-  title?: string;
-  type?: ProgressType;
-}
-
-export const Progress = ({
-  hasError,
-  progress,
-  subtitle,
-  sx,
-  title,
-  type,
-}: ProgressProps) => {
-  const isComplete = !hasError && progress > 99;
-  const isDetailed = type === 'detailed';
-  const percent = hasError || isComplete ? 100 : progress;
-  const displayPercent = hasError ? '-' : percent + '%';
-
-  const color = hasError ? 'red-4' : isComplete ? 'green-3' : 'primary-blue-2';
-  const gradientColors: Record<'start' | 'end' | 'empty' | 'bg', string> =
-    hasError
-      ? {
-          start: 'var(--color-red-6)',
-          end: 'var(--color-red-4)',
-          empty: 'var(--color-red-8)',
-          bg: 'var(--color-red-9)',
-        }
-      : isComplete
-      ? {
-          start: 'var(--color-green-5)',
-          end: 'var(--color-green-3)',
-          empty: 'var(--color-green-8)',
-          bg: 'var(--color-green-9)',
-        }
-      : {
-          start: '#abcfed',
-          end: 'var(--color-primary-blue-2)',
-          empty: 'var(--color-primary-blue-3)',
-          bg: 'var(--color-primary-blue-4)',
-        };
-
-  const icon = hasError ? (
-    <Close size={24} color={color} />
-  ) : isComplete ? (
-    <Checkmarks size={24} color={color} />
-  ) : (
-    <Pause size={24} color={color} />
-  );
-
-  return (
-    <Box $align="center" $dir="row" $gap={16} sx={sx}>
-      {isDetailed && (
-        <IconWrapper
-          $completedDegree={Math.round(percent * 3.6)}
-          $gradientColors={gradientColors}
-        >
-          <IconInnerWrapper $bg={gradientColors.bg}>{icon}</IconInnerWrapper>
-        </IconWrapper>
-      )}
-      <Box $dir="column" $flex={1} $gap={8}>
-        <Box>
-          {title && (
-            <P $color="grey-2" $fontSize={14} $lineHeight={20}>
-              {title}
-            </P>
-          )}
-          {isComplete && (
-            <CheckmarkCircle
-              color="green-3"
-              size={24}
-              sx="margin-left: auto;"
-            />
-          )}
-          {hasError && (
-            <MinusCircle color="red-4" size={24} sx="margin-left: auto;" />
-          )}
-        </Box>
-        <BarWrapper>
-          <Bar $color={colorReference[color]} $percent={percent} />
-        </BarWrapper>
-        {subtitle && (
-          <P $color="grey-4" $fontSize={12} $lineHeight={16}>
-            {subtitle}
-          </P>
-        )}
-      </Box>
-      {isDetailed && (
-        <P $color="grey-4" $textAlign="center" sx="width: 72px;">
-          {displayPercent}
-        </P>
-      )}
-    </Box>
-  );
-};
-
-const BarWrapper = styled.div`
-  position: relative;
-  width: 100%;
-  height: 12px;
-  border-radius: 32px;
-  background-color: var(--color-grey-8);
-`;
-
-const Bar = styled.div<{
-  $color: string;
-  $percent: number;
-}>`
-  width: ${({ $percent }) => $percent}%;
-  height: 12px;
-  background-color: ${({ $color }) => $color};
-  border-radius: 32px;
-`;
-
-const IconWrapper = styled.div<{
-  $completedDegree: number;
-  $gradientColors: Record<'start' | 'end' | 'empty' | 'bg', string>;
-}>`
-  position: relative;
-  display: block;
-  width: 45px;
-  height: 45px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  flex-shrink: 0;
-  background: conic-gradient(
-    ${({ $gradientColors }) => $gradientColors.start},
-    ${({ $gradientColors }) => $gradientColors.end}
-      ${({ $completedDegree }) => $completedDegree}deg,
-    ${({ $gradientColors }) => $gradientColors.empty}
-      ${({ $completedDegree }) => $completedDegree}deg 360deg
-  );
-  border: 1px solid ${({ $gradientColors }) => $gradientColors.bg};
-`;
-
-const IconInnerWrapper = styled.div<{ $bg: string }>`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 39px;
-  width: 39px;
-  border-radius: 50%;
-  background-color: ${({ $bg }) => $bg};
-`;

package/src/components/feedback/toast/index.ts

@@ -1,2 +0,0 @@
-export { Toast } from './toast';
-export type { ToastProps } from './toast';

package/src/components/feedback/toast/toast.tsx

@@ -1,103 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Styles } from '../../../common';
-import { BoxProps, Button, P } from '../../';
-import {
-  AlertCircle,
-  AlertOctogon,
-  AlertTriangle,
-  Close,
-  Information,
-} from '../../../icons';
-
-type ToastTypes = 'error' | 'info' | 'success' | 'warning';
-
-export interface ToastProps {
-  content: string;
-  href?: string;
-  onClose: () => void;
-  type: ToastTypes;
-}
-
-export const Toast = ({ content, href, onClose, type }: ToastProps) => {
-  const iconLookup: Record<ToastTypes, React.ReactElement> = {
-    error: <AlertOctogon size={24} />,
-    info: <Information size={24} />,
-    success: <AlertCircle size={24} />,
-    warning: <AlertTriangle size={24} />,
-  };
-
-  return (
-    <Wrapper as="output" $align="center" $dir="row" $gap={8} $type={type}>
-      {iconLookup[type]}
-      <P as="span">{content}</P>
-      {href && (
-        <P sx="padding-left: 8px;" as="a" href={href} $color="primary-blue-2">
-          View
-        </P>
-      )}
-      <Button icon={<Close size={24} />} onClick={onClose} type="special" />
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.output<
-  BoxProps & {
-    $type: ToastTypes;
-  }
->`
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
-  width: 99vw;
-  max-width: 476px;
-  box-sizing: border-box;
-  padding: 12px 16px;
-  display: flex;
-  box-shadow: var(--elevation-2);
-  border-radius: var(--small);
-
-  &::before {
-    position: absolute;
-    content: '';
-    left: 0px;
-    width: 4px;
-    height: 100%;
-    background-color: ${({ $type }) =>
-      $type === 'error'
-        ? 'var(--color-red-4)'
-        : $type === 'info'
-        ? 'var(--color-blue-4)'
-        : $type === 'success'
-        ? 'var(--color-green-3)'
-        : 'var(--color-orange-5)'};
-    border-radius: 8px 0px 0px 8px;
-  }
-
-  & > svg {
-    fill: ${({ $type }) =>
-      $type === 'error'
-        ? 'var(--color-red-4)'
-        : $type === 'info'
-        ? 'var(--color-blue-4)'
-        : $type === 'success'
-        ? 'var(--color-green-3)'
-        : 'var(--color-orange-5)'};
-  }
-
-  a {
-    &:hover {
-      cursor: pointer;
-      text-decoration: underline;
-    }
-  }
-
-  button {
-    padding: 0px;
-    margin-left: auto;
-  }
-
-  ${Styles.flex}
-`;

package/src/components/feedback/tooltip/index.ts

@@ -1,2 +0,0 @@
-export { Tooltip } from './tooltip';
-export type { TooltipProps } from './tooltip';

package/src/components/feedback/tooltip/tooltip.tsx

@@ -1,42 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Tooltip as ReactTooltip, PlacesType } from 'react-tooltip';
-
-export interface TooltipProps extends React.PropsWithChildren {
-  content: string;
-  place: PlacesType;
-}
-
-export const Tooltip = ({ children, content, place = 'top' }: TooltipProps) => {
-  const id = React.useId();
-  return (
-    <>
-      <ReactTooltip
-        id={id}
-        place={place}
-        style={{
-          fontFamily: 'Inter',
-          fontSize: '12px',
-          fontWeight: 400,
-          lineHeight: '150%',
-          textAlign: 'center',
-          padding: '8px',
-          maxWidth: '280px',
-          backgroundColor: 'var(--color-grey-3)',
-          boxShadow: 'var(--elevation-2)',
-          borderRadius: '4px',
-        }}
-      />
-      {React.Children.map(children, (child) => {
-        return (
-          React.isValidElement(child) &&
-          React.cloneElement(child, {
-            'data-tooltip-id': id,
-            'data-tooltip-content': content,
-          } as any)
-        );
-      })}
-    </>
-  );
-};

package/src/components/iconography/avatar/avatar.tsx

@@ -1,298 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Box, H, P } from '../../';
-import {
-  Approved,
-  Busy,
-  Declined,
-  Default,
-  Focus,
-  Locked,
-  Offline,
-  Online,
-  Subscribed,
-} from './icons';
-
-type NativeProps = Pick<
-  React.HTMLAttributes<any>,
-  | 'onBlur'
-  | 'onBlurCapture'
-  | 'onClick'
-  | 'onChange'
-  | 'onCopy'
-  | 'onCut'
-  | 'onKeyDown'
-  | 'onKeyDownCapture'
-  | 'onKeyUp'
-  | 'onKeyUpCapture'
-  | 'onMouseDown'
-  | 'onMouseDownCapture'
-  | 'onMouseEnter'
-  | 'onMouseLeave'
-  | 'onMouseOut'
-  | 'onMouseOver'
-> & { value?: string };
-
-type Status =
-  | 'offline'
-  | 'focus'
-  | 'busy'
-  | 'online'
-  | 'subscribed'
-  | 'locked'
-  | 'declined'
-  | 'approved';
-
-type Size = 96 | 72 | 64 | 56 | 48 | 40 | 36 | 32 | 24 | 16;
-type SizeStrings =
-  | '96'
-  | '72'
-  | '64'
-  | '56'
-  | '48'
-  | '40'
-  | '36'
-  | '32'
-  | '24'
-  | '16';
-
-export interface AvatarProps extends NativeProps {
-  as?: React.ElementType;
-  href?: string;
-  image: string;
-  size: Size;
-  status?: Status;
-  subtitle?: React.ReactNode;
-  sx?: string;
-  textPosition?: 'left' | 'right';
-  title?: React.ReactNode;
-}
-
-/**
- * Lookup tables for sizes
- */
-const iconReference: Record<
-  Status | 'none',
-  React.JSXElementConstructor<any>
-> = {
-  approved: Approved,
-  busy: Busy,
-  declined: Declined,
-  focus: Focus,
-  locked: Locked,
-  none: () => <></>,
-  online: Online,
-  offline: Offline,
-  subscribed: Subscribed,
-};
-
-const iconSize: Record<SizeStrings, number> = {
-  '96': 18,
-  '72': 18,
-  '64': 18,
-  '56': 15,
-  '48': 15,
-  '40': 15,
-  '36': 14,
-  '32': 14,
-  '24': 12,
-  '16': 8,
-};
-
-const iconOffsetX: Record<SizeStrings, number> = {
-  '96': -23,
-  '72': -21,
-  '64': -20,
-  '56': -16,
-  '48': -15,
-  '40': -13,
-  '36': -12,
-  '32': -12,
-  '24': -10,
-  '16': -8,
-};
-
-const iconOffsetY: Record<SizeStrings, number> = {
-  '96': 5,
-  '72': 3,
-  '64': 2,
-  '56': 1,
-  '48': 0,
-  '40': -2,
-  '36': -2,
-  '32': -2,
-  '24': -2,
-  '16': -1,
-};
-
-/**
- *
- * Avatar
- */
-const Avatar = ({
-  as = 'button',
-  href,
-  image,
-  size = 64,
-  status,
-  subtitle,
-  sx,
-  textPosition = 'left',
-  title,
-  ...rest
-}: AvatarProps) => {
-  const [displayDefault, setDisplayDefault] = React.useState(false);
-
-  const Icon = iconReference?.[status ?? 'none'];
-
-  return (
-    <Box $align="center" $gap={18} {...rest} sx={sx}>
-      <Container as={as} $size={size} href={href}>
-        {!displayDefault && (
-          <img src={image ?? ''} onError={() => setDisplayDefault(true)} />
-        )}
-        {displayDefault && <Default />}
-        <div>
-          <Icon />
-        </div>
-      </Container>
-      {(title || subtitle) && (
-        <TextContainer $textPosition={textPosition}>
-          {title && (
-            <H
-              as="h3"
-              $bold
-              $color="grey-2"
-              $textClampLines={1}
-              sx="font-size: 26px;"
-            >
-              {title}
-            </H>
-          )}
-          {subtitle && (
-            <P $color="grey-4" $textClampLines={1}>
-              {subtitle}
-            </P>
-          )}
-        </TextContainer>
-      )}
-    </Box>
-  );
-};
-
-Avatar.displayName = 'Avatar';
-
-const Container = styled.div<{
-  $size: number;
-  href?: string;
-}>`
-  flex-shrink: 0;
-  display: flex;
-  flex-flow: row nowrap;
-  cursor: ${({ as }) =>
-    as && (as === 'a' || as === 'button') ? 'pointer' : 'initial'};
-  padding: 0px;
-  border: 0px;
-  position: relative;
-  background-color: transparent;
-
-  > img,
-  > svg {
-    flex-shrink: 0;
-    border-radius: 50%;
-    overflow: hidden;
-    object-fit: cover;
-
-    ${({ $size }) => `
-    width: ${$size}px;
-    height: ${$size}px;
-    `}
-  }
-
-  div > svg {
-    position: relative;
-    width: ${({ $size }) => iconSize[`${$size}` as SizeStrings]}px;
-    margin-left: ${({ $size }) => iconOffsetX[`${$size}` as SizeStrings]}px;
-    top: ${({ $size }) => iconOffsetY[`${$size}` as SizeStrings]}px;
-  }
-`;
-
-const TextContainer = styled.div<{
-  $textPosition: 'left' | 'right';
-}>`
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 4px;
-  order: ${({ $textPosition }) => ($textPosition === 'left' ? -1 : 1)};
-`;
-
-/**
- * Avatar Group
- */
-export interface AvatarGroupProps extends React.PropsWithChildren {
-  numDisplayed: number;
-  total: number;
-}
-
-const Group = ({ children, numDisplayed, total }: AvatarGroupProps) => {
-  let size = 0;
-  // filter out ReactNodes and ReactElements that are not Avatars
-  const displayedElements = React.Children.map(
-    children as React.ReactElement[],
-    (child, index) => {
-      if (
-        React.isValidElement(child) &&
-        (child.type as any).displayName === 'Avatar'
-      ) {
-        size = (child.props as { size: number }).size;
-
-        return <AvatarWrapper $index={index}>{child}</AvatarWrapper>;
-      }
-      return null;
-    }
-  ).slice(0, numDisplayed);
-
-  displayedElements.push(
-    <Total $index={displayedElements.length + 1} $size={size}>
-      <P $fontSize={11} $lineHeight={20}>
-        +{total - numDisplayed}
-      </P>
-    </Total>
-  );
-
-  return <Box>{displayedElements}</Box>;
-};
-
-Group.displayName = 'Avatar.Group';
-Avatar.Group = Group;
-
-const AvatarWrapper = styled.div<{
-  $index: number;
-}>`
-  position: relative;
-  z-index: ${({ $index }) => `-${$index}`};
-  border-radius: 50%;
-  border: 2px solid var(--color-white);
-  margin-right: -8px;
-`;
-
-const Total = styled.div<{
-  $index: number;
-  $size: number;
-}>`
-  position: relative;
-  z-index: ${({ $index }) => `-${$index}`};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  ${({ $size }) => `
-    width: ${$size}px;
-    height: ${$size}px;
-  `}
-  border-radius: 50%;
-  background-color: var(--color-grey-9);
-`;
-
-export { Avatar };

package/src/components/iconography/avatar/icons/approved.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-export const Approved = () => (
-  <svg fill="none" viewBox="0 0 18 18">
-    <rect width="16" height="16" x="1" y="1" fill="#09B3A1" rx="8" />
-    <path
-      fill="#fff"
-      d="M6.485 8.521a1.1 1.1 0 1 0-1.555 1.555l2.199 2.199a1.1 1.1 0 0 0 1.555 0l4.398-4.398a1.1 1.1 0 0 0-1.555-1.555l-3.62 3.62-1.422-1.421Z"
-    />
-    <rect
-      width="16"
-      height="16"
-      x="1"
-      y="1"
-      stroke="#F8F9F9"
-      strokeWidth="2"
-      rx="8"
-    />
-  </svg>
-);

package/src/components/iconography/avatar/icons/busy.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-export const Busy = () => (
-  <svg fill="none" viewBox="0 0 18 18">
-    <rect width="16" height="16" x="1" y="1" fill="#F34436" rx="8" />
-    <path
-      fill="#fff"
-      d="m7.839 5.526 4.622 4.622c.33.33.33.825 0 1.155l-1.156 1.155a.798.798 0 0 1-1.155 0L5.528 7.838a.798.798 0 0 1 0-1.156l1.156-1.155a.798.798 0 0 1 1.155 0Z"
-    />
-    <rect
-      width="16"
-      height="16"
-      x="1"
-      y="1"
-      stroke="#F8F9F9"
-      strokeWidth="2"
-      rx="8"
-    />
-  </svg>
-);

package/src/components/iconography/avatar/icons/declined.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-export const Declined = () => (
-  <svg fill="none" viewBox="0 0 18 18">
-    <rect width="16" height="16" x="1" y="1" fill="#F34436" rx="8" />
-    <path
-      fill="#fff"
-      d="M10.47 9.015 12 7.479c.402-.404.4-1.056-.005-1.457a1.034 1.034 0 0 0-1.46.005L9.013 7.555 7.464 6.003A1.034 1.034 0 0 0 6.004 6 1.028 1.028 0 0 0 6 7.457l1.556 1.559-1.522 1.528c-.402.403-.4 1.056.004 1.457.404.4 1.058.399 1.46-.005l1.515-1.52 1.486 1.489a1.034 1.034 0 0 0 1.46.003 1.028 1.028 0 0 0 .003-1.457L10.47 9.015Z"
-    />
-    <rect
-      width="16"
-      height="16"
-      x="1"
-      y="1"
-      stroke="#F8F9F9"
-      strokeWidth="2"
-      rx="8"
-    />
-  </svg>
-);

package/src/components/iconography/avatar/icons/default.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-export const Default = () => (
-  <svg fill="none" viewBox="0 0 40 40">
-    <path
-      fill="#9DA7B2"
-      fillRule="evenodd"
-      d="M18.86 4.074c-1.343.172-2.791.707-3.872 1.43-.68.454-1.672 1.376-2.148 1.995a9.549 9.549 0 0 0-1.714 3.824c-.158.832-.16 2.573-.006 3.384a9.399 9.399 0 0 0 1.436 3.447c.466.701 1.46 1.711 2.167 2.202l.556.387-.517.182c-.705.247-2.2.992-2.906 1.447-1.454.938-3.103 2.506-4.07 3.87a15.669 15.669 0 0 0-2.603 6.205c-.177.989-.242 2.697-.114 3.005.146.353.466.548.898.548.683 0 1.054-.389 1.055-1.105.001-.562.13-1.684.282-2.448.26-1.312.87-2.892 1.563-4.043.814-1.356 2.114-2.808 3.308-3.694 1.842-1.368 3.803-2.192 6.015-2.529.28-.043 1.124-.111 1.874-.153.75-.04 1.601-.13 1.891-.198.691-.161 1.536-.467 2.167-.785.792-.399 1.841-1.187 2.437-1.831 1.223-1.322 1.991-2.866 2.334-4.687.138-.735.12-2.41-.033-3.186-.372-1.869-1.231-3.456-2.576-4.756-.395-.382-.928-.837-1.186-1.011a9.262 9.262 0 0 0-3.797-1.466 8.33 8.33 0 0 0-2.442-.034Zm2.677 2.178c.755.18 1.733.618 2.408 1.077.589.4 1.345 1.152 1.732 1.723.587.865 1 1.867 1.174 2.854.045.255.082.77.082 1.143 0 1.708-.668 3.39-1.866 4.697-.822.895-1.965 1.591-3.266 1.986-.6.182-.82.208-1.778.209-.886.001-1.213-.031-1.718-.17-1.257-.343-2.528-1.093-3.378-1.99-.742-.785-1.377-1.945-1.674-3.057-.08-.302-.166-.935-.19-1.408-.036-.683-.014-1.01.109-1.601.085-.409.265-1.01.401-1.335.628-1.51 1.874-2.844 3.326-3.563 1.078-.534 1.831-.709 3.084-.716.647-.005 1.082.038 1.554.15Zm7.33 17.533c-.284.154-.45.494-.45.921 0 .288.052.414.303.726.167.208.503.571.747.808.52.504 1.295 1.529 1.745 2.31.708 1.226 1.296 2.848 1.535 4.234.064.373.147 1.132.184 1.686l.067 1.008.285.26c.252.232.335.262.723.262.398 0 .464-.026.715-.276l.276-.277-.044-1.266c-.053-1.488-.27-2.65-.762-4.079-.398-1.157-1.243-2.815-1.908-3.745-.606-.847-1.5-1.864-2.062-2.343-.363-.31-.455-.35-.776-.348-.2.002-.46.055-.578.119Z"
-      clipRule="evenodd"
-    />
-  </svg>
-);