@soul-refiner/design-system 0.1.38 → 0.1.39

package/src/components/feedback/badge/badge.tsx

@@ -1,96 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Close } from '../../../icons';
-
-type BadgeColor = 'blue' | 'red' | 'green' | 'purple' | 'orange';
-
-const colorLookup: Record<
-  BadgeColor,
-  Record<'primary' | 'secondary' | 'bg', string>
-> = {
-  blue: {
-    primary: 'var(--color-hue-blue-1)',
-    secondary: 'var(--color-hue-blue-2)',
-    bg: 'var(--color-hue-blue-3)',
-  },
-  green: {
-    primary: 'var(--color-green-3)',
-    secondary: 'var(--color-green-8)',
-    bg: 'var(--color-green-10)',
-  },
-  orange: {
-    primary: 'var(--color-hue-orange-1)',
-    secondary: 'var(--color-hue-orange-2)',
-    bg: 'var(--color-hue-orange-3)',
-  },
-  purple: {
-    primary: 'var(--color-hue-purple-1)',
-    secondary: 'var(--color-hue-purple-2)',
-    bg: 'var(--color-hue-purple-3)',
-  },
-  red: {
-    primary: 'var(--color-red-4)',
-    secondary: 'var(--color-red-9)',
-    bg: 'var(--color-red-10)',
-  },
-};
-
-export interface BadgeProps extends React.PropsWithChildren {
-  color: BadgeColor;
-  dot?: boolean;
-  onDismiss?: () => void;
-}
-
-export const Badge = ({ children, color, dot, onDismiss }: BadgeProps) => {
-  const bgColor = colorLookup[color].bg;
-  const textColor = colorLookup[color].primary;
-  const borderColor = colorLookup[color].secondary;
-
-  return (
-    <Component
-      $bgColor={bgColor}
-      $borderColor={borderColor}
-      $textColor={textColor}
-    >
-      {dot && <Dot $secondaryColor={textColor} />}
-      {children}
-      {onDismiss && <Close size={16} />}
-    </Component>
-  );
-};
-
-const Component = styled.div<{
-  $bgColor: string;
-  $borderColor: string;
-  $textColor: string;
-}>`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 1px 7px;
-  border-radius: 32px;
-  background-color: ${({ $bgColor }) => $bgColor};
-  color: ${({ $textColor }) => $textColor};
-  border: 1px solid ${({ $borderColor }) => $borderColor};
-  font-family: Inter;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 16px;
-  user-select: none;
-
-  svg {
-    fill: currentColor;
-    cursor: pointer;
-  }
-`;
-
-const Dot = styled.div<{
-  $secondaryColor: string;
-}>`
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: ${({ $secondaryColor }) => $secondaryColor};
-`;

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

@@ -1,2 +0,0 @@
-export { Badge } from './badge';
-export type { BadgeProps } from './badge';

package/src/components/feedback/banner/banner.tsx

@@ -1,118 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Styles } from '../../../common';
-import { Box, BoxProps, Button, P } from '../../';
-import {
-  AlertCircle,
-  AlertOctogon,
-  AlertTriangle,
-  Close,
-  Information,
-} from '../../../icons';
-
-type BannerTypes = 'error' | 'info' | 'success' | 'warning';
-
-export interface BannerProps {
-  content: string;
-  href: string;
-  onClose: () => void;
-  title: string;
-  type: BannerTypes;
-}
-
-export const Banner = ({
-  content,
-  href,
-  onClose,
-  title,
-  type,
-}: BannerProps) => {
-  const iconLookup: Record<BannerTypes, 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]}
-      <Box $dir="row" $gap={4} $align="center">
-        <P as="span" $semiBold>
-          {title}
-        </P>
-        <P as="span">{content}</P>
-        <P as="a" href={href} $color="primary-blue-2">
-          Read more
-        </P>
-      </Box>
-      <Button icon={<Close size={24} />} onClick={onClose} type="special" />
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.output<
-  BoxProps & {
-    $type: BannerTypes;
-  }
->`
-  width: 100%;
-  box-sizing: border-box;
-  padding: 12px 16px;
-  display: flex;
-  background-color: ${({ $type }) =>
-    $type === 'error'
-      ? 'var(--color-red-9)'
-      : $type === 'info'
-      ? 'var(--color-blue-9)'
-      : $type === 'success'
-      ? 'var(--color-green-9)'
-      : 'var(--color-orange-9)'};
-  border-bottom: 1px solid
-    ${({ $type }) =>
-      $type === 'error'
-        ? 'var(--color-red-4)'
-        : $type === 'info'
-        ? 'var(--color-blue-4)'
-        : $type === 'success'
-        ? 'var(--color-green-3)'
-        : 'var(--color-orange-5)'};
-  box-shadow: var(--elevation-2);
-  border-radius: var(--small);
-
-  & > 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 {
-    position: relative;
-    cursor: pointer;
-
-    &::after {
-      position: absolute;
-      content: '';
-      width: 100%;
-      height: 1px;
-      right: 0px;
-      left: 0px;
-      bottom: 0px;
-      background-color: var(--color-primary-blue-2);
-    }
-  }
-
-  button {
-    padding: 0px;
-    margin-left: auto;
-  }
-
-  ${Styles.flex}
-`;

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

@@ -1,2 +0,0 @@
-export { Banner } from './banner';
-export type { BannerProps } from './banner';

package/src/components/feedback/chip/chip.tsx

@@ -1,132 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Close } from '../../../icons';
-
-type ChipColor =
-  | 'grey'
-  | 'blue'
-  | 'red'
-  | 'green'
-  | 'turquoise'
-  | 'purple'
-  | 'yellow'
-  | 'orange'
-  | 'primary-blue';
-type ChipSize = 'small' | 'large';
-
-const colorLookup: Record<
-  ChipColor,
-  Record<'primary' | 'secondary' | 'text', string>
-> = {
-  'primary-blue': {
-    primary: 'var(--color-primary-blue-2)',
-    secondary: 'var(--color-white)',
-    text: 'var(--color-white)',
-  },
-  blue: {
-    primary: 'var(--color-blue-9)',
-    secondary: 'var(--color-blue-5)',
-    text: 'var(--color-grey-4)',
-  },
-  green: {
-    primary: 'var(--color-green-9)',
-    secondary: 'var(--color-green-5)',
-    text: 'var(--color-grey-4)',
-  },
-  grey: {
-    primary: 'var(--color-grey-9)',
-    secondary: 'var(--color-grey-4)',
-    text: 'var(--color-grey-4)',
-  },
-  orange: {
-    primary: 'var(--color-orange-9)',
-    secondary: 'var(--color-orange-5)',
-    text: 'var(--color-grey-4)',
-  },
-  purple: {
-    primary: 'var(--color-purple-9)',
-    secondary: 'var(--color-purple-5)',
-    text: 'var(--color-grey-4)',
-  },
-  red: {
-    primary: 'var(--color-red-9)',
-    secondary: 'var(--color-red-5)',
-    text: 'var(--color-grey-4)',
-  },
-  turquoise: {
-    primary: 'var(--color-turquoise-9)',
-    secondary: 'var(--color-turquoise-5)',
-    text: 'var(--color-grey-4)',
-  },
-  yellow: {
-    primary: 'var(--color-yellow-9)',
-    secondary: 'var(--color-yellow-9)',
-    text: 'var(--color-grey-4)',
-  },
-};
-
-export interface ChipProps extends React.PropsWithChildren {
-  color: ChipColor;
-  dot?: boolean;
-  onDismiss?: () => void;
-  size: ChipSize;
-}
-
-export const Chip = ({ children, color, dot, onDismiss, size }: ChipProps) => {
-  const bgColor = colorLookup[color].primary;
-  const textColor = colorLookup[color].text;
-  const dotColor = colorLookup[color].secondary;
-
-  return (
-    <Component $bgColor={bgColor} $size={size} $textColor={textColor}>
-      {dot && <Dot $secondaryColor={dotColor} />}
-      {children}
-      {onDismiss && <Close size={16} />}
-    </Component>
-  );
-};
-
-const Component = styled.div<{
-  $bgColor: string;
-  $size: ChipSize;
-  $textColor: string;
-}>`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-radius: 32px;
-  background-color: ${({ $bgColor }) => $bgColor};
-  color: ${({ $textColor }) => $textColor};
-  font-family: Inter;
-  user-select: none;
-
-  svg {
-    fill: currentColor;
-    cursor: pointer;
-  }
-  ${({ $size }) =>
-    $size === 'small'
-      ? // small
-        `
-    padding: 4px 16px;
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 500;`
-      : // large
-        `
-    padding: 8px 16px;
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 600;`}
-`;
-
-const Dot = styled.div<{
-  $secondaryColor: string;
-}>`
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: ${({ $secondaryColor }) => $secondaryColor};
-`;

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

@@ -1,2 +0,0 @@
-export { Chip } from './chip';
-export type { ChipProps } from './chip';

package/src/components/feedback/index.ts

@@ -1,14 +0,0 @@
-export { Badge } from './badge';
-export type { BadgeProps } from './badge';
-export { Banner } from './banner';
-export type { BannerProps } from './banner';
-export { Loader } from './loader';
-export type { LoaderProps } from './loader';
-export { Notification } from './notification';
-export type { NotificationProps } from './notification';
-export { Progress } from './progress';
-export type { ProgressProps } from './progress';
-export { Toast } from './toast';
-export type { ToastProps } from './toast';
-export { Tooltip } from './tooltip';
-export type { TooltipProps } from './tooltip';

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

@@ -1,2 +0,0 @@
-export { Loader } from './loader';
-export type { LoaderProps } from './loader';

package/src/components/feedback/loader/loader.tsx

@@ -1,64 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled, { keyframes } from 'styled-components';
-import { colorReference, COLORS } from '../../../common';
-
-export interface LoaderProps {
-  color?: (typeof COLORS)[number];
-  inline?: boolean;
-  inverse?: boolean;
-  size?: number;
-  sx?: string;
-}
-
-export const Loader = ({
-  color = 'grey-1',
-  inline,
-  size = 16,
-  sx,
-}: LoaderProps) => {
-  let borderWidth = 3;
-
-  if (size > 96) borderWidth = 10;
-  else if (size > 47) borderWidth = 5;
-  else if (size > 23) borderWidth = 4;
-
-  return (
-    <Component
-      $borderWidth={borderWidth}
-      $color={color}
-      $inline={!!inline}
-      $size={size}
-      $sx={sx}
-    />
-  );
-};
-
-const spin = keyframes`
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-`;
-
-const Component = styled.div<{
-  $color: (typeof COLORS)[number];
-  $borderWidth: number;
-  $inline: boolean;
-  $size: number;
-  $sx?: string;
-}>`
-  border: 2px solid transparent;
-  border-radius: 50%;
-  animation: ${spin} 0.8s linear infinite;
-
-  border-width: ${({ $borderWidth }) => `${$borderWidth}px`};
-  border-color: ${({ $color }) => colorReference[$color]};
-  border-top-color: transparent;
-
-  ${({ $size }) => `
-    height: ${$size}px;
-    width: ${$size}px;
-  `}
-
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;

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

@@ -1,2 +0,0 @@
-export { Notification } from './notification';
-export type { NotificationProps } from './notification';

package/src/components/feedback/notification/notification.tsx

@@ -1,129 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Styles } from '../../../common';
-import { Box, BoxProps, Button, P } from '../../';
-import {
-  AlertCircle,
-  AlertOctogon,
-  AlertTriangle,
-  Close,
-  Information,
-} from '../../../icons';
-
-type NotificationTypes = 'error' | 'info' | 'success' | 'warning';
-
-export interface NotificationProps {
-  content: string;
-  href?: string;
-  onClose: () => void;
-  sx?: string;
-  title: string;
-  type: NotificationTypes;
-}
-
-export const Notification = ({
-  content,
-  href,
-  onClose,
-  sx,
-  title,
-  type,
-}: NotificationProps) => {
-  const iconLookup: Record<NotificationTypes, React.ReactElement> = {
-    error: <AlertOctogon size={24} />,
-    info: <Information size={24} />,
-    success: <AlertCircle size={24} />,
-    warning: <AlertTriangle size={24} />,
-  };
-
-  return (
-    <Wrapper
-      as={href ? 'a' : 'output'}
-      href={href}
-      $dir="column"
-      $gap={8}
-      $sx={sx}
-      $type={type}
-    >
-      <Box $dir="row" $gap={8} $flex={1}>
-        {iconLookup[type]}
-        <P as="span" $semiBold>
-          {title}
-        </P>
-        <Button
-          icon={<Close size={24} />}
-          onClick={onClose}
-          sx="margin-left: auto;"
-          type="special"
-        />
-      </Box>
-      <Box $align="center" $dir="row" $gap={4}>
-        <P as="span" sx="padding-left: 32px;">
-          {content}
-        </P>
-      </Box>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.output<
-  BoxProps & {
-    $sx?: string;
-    $type: NotificationTypes;
-  }
->`
-  text-decoration: none;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 16px;
-  display: flex;
-  background-color: ${({ $type }) =>
-    $type === 'error'
-      ? 'var(--color-red-9)'
-      : $type === 'info'
-      ? 'var(--color-blue-9)'
-      : $type === 'success'
-      ? 'var(--color-green-9)'
-      : 'var(--color-orange-9)'};
-  border: 1px solid
-    ${({ $type }) =>
-      $type === 'error'
-        ? 'var(--color-red-8)'
-        : $type === 'info'
-        ? 'var(--color-blue-8)'
-        : $type === 'success'
-        ? 'var(--color-green-8)'
-        : 'var(--color-orange-8)'};
-  box-shadow: var(--elevation-2);
-  border-radius: var(--small);
-
-  & > div > 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)'};
-  }
-
-  button > svg {
-    fill: unset;
-  }
-
-  a {
-    position: relative;
-    cursor: pointer;
-  }
-
-  button {
-    padding: 0px;
-    margin-left: auto;
-  }
-
-  ${Styles.flex}
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;

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

@@ -1,2 +0,0 @@
-export { Progress } from './progress';
-export type { ProgressProps } from './progress';