@soul-refiner/design-system 0.1.37 → 0.1.39

package/src/components/navigation/breadcrumb/breadcrumb.tsx

@@ -1,174 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Box } from '../../';
-import { ChevronLeft, ChevronRight } from '../../../icons';
-
-export interface BreadcrumbProps extends React.PropsWithChildren {
-  previous?: boolean;
-}
-
-const Breadcrumb = ({ children, previous }: BreadcrumbProps) => {
-  const _children = React.Children.toArray(children);
-
-  if (previous) {
-    return (
-      <Box
-        $align="center"
-        $gap={8}
-        sx="& > *:last-child { color: var(--color-grey-3) !important; };"
-      >
-        <>
-          <ChevronLeft color="grey-3" size={24} />
-          {React.isValidElement(_children[0]) &&
-            React.cloneElement(_children[0], {
-              icon: undefined,
-              avatar: undefined,
-            } as any)}
-        </>
-      </Box>
-    );
-  }
-
-  return (
-    <Box $align="center" $gap={8}>
-      {_children.map((child, index) => {
-        if (
-          React.isValidElement(child) &&
-          (child.type as any)?.displayName === 'BreadcrumbItem'
-        ) {
-          return (
-            <>
-              {child}
-              {_children.length - 1 !== index && (
-                <ChevronRight color="grey-3" size={24} />
-              )}
-            </>
-          );
-        }
-        return null;
-      })}
-    </Box>
-  );
-};
-
-type IconColor = 'blue' | 'pink' | 'purple' | 'mint' | 'orange' | 'ocean';
-
-export interface BreadcrumbItemProps extends React.PropsWithChildren {
-  avatar?: React.ReactElement;
-  href?: string;
-  icon?: React.ReactElement;
-  iconColor?: IconColor;
-  onClick?: React.MouseEventHandler;
-}
-
-const BreadcrumbItem = ({
-  avatar,
-  children,
-  href,
-  icon,
-  iconColor = 'blue',
-  onClick,
-}: BreadcrumbItemProps) => {
-  return (
-    <Item
-      as={href ? 'a' : 'div'}
-      href={href}
-      onClick={onClick}
-      $type={icon ? 'icon' : avatar ? 'avatar' : 'text'}
-      $iconColor={`hue-${iconColor}-1`}
-    >
-      {icon && (
-        <IconWrapper $color={iconColor}>
-          {React.cloneElement(icon, { color: `hue-${iconColor}-1`, size: 24 })}
-        </IconWrapper>
-      )}
-      {avatar}
-      {children}
-    </Item>
-  );
-};
-
-Breadcrumb.Item = BreadcrumbItem;
-BreadcrumbItem.displayName = 'Breadcrumb.Item';
-
-const Item = styled.div<{
-  as: string;
-  $type: 'text' | 'avatar' | 'icon';
-  $iconColor?: string;
-}>`
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  font-family: 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<{ $color: IconColor }>`
-  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/src/components/navigation/breadcrumb/index.ts

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

package/src/components/navigation/index.ts

@@ -1,4 +0,0 @@
-export { Breadcrumb } from './breadcrumb';
-export type { BreadcrumbProps, BreadcrumbItemProps } from './breadcrumb';
-export { Tabs } from './tabs';
-export type { TabProps } from './tabs';

package/src/components/navigation/tabs/index.ts

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

package/src/components/navigation/tabs/tabs.tsx

@@ -1,248 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { P } from '../../';
-
-type TabColors =
-  | 'blue'
-  | 'grey'
-  | 'green'
-  | 'mint'
-  | 'orange'
-  | 'ocean'
-  | 'pink'
-  | 'purple'
-  | 'red'
-  | 'yellow';
-type TabSizes = 'small' | 'medium' | 'large';
-
-const colorLookup: Record<TabColors, Record<'icon' | 'bg', string>> = {
-  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)',
-  },
-};
-
-export interface TabProps {
-  activeIndex: number;
-  items: {
-    color?: TabColors;
-    disabled?: boolean;
-    icon?: React.ReactElement;
-    label: string;
-  }[];
-  onChange: (index: number) => void;
-  size?: TabSizes;
-  sx?: string;
-}
-
-const Tabs = ({
-  activeIndex,
-  items,
-  onChange,
-  size = 'large',
-  sx,
-}: TabProps) => {
-  const id = React.useId();
-
-  return (
-    <Wrapper $sx={sx}>
-      {items.map((item, index) => (
-        <Item
-          active={activeIndex === index}
-          color={item?.color}
-          disabled={item?.disabled}
-          key={id + index.toString(36)}
-          icon={item?.icon}
-          label={item.label}
-          onClick={() => onChange(index)}
-          size={size}
-        />
-      ))}
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.ul<{
-  $sx?: string;
-}>`
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: flex-end;
-  justify-content: center;
-  gap: 16px;
-  margin: 0px;
-  padding: 0px;
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-export interface TabsItemProps {
-  active: boolean;
-  color?: TabColors;
-  disabled?: boolean;
-  icon?: React.ReactElement;
-  label: string;
-  onClick: () => void;
-  size: TabSizes;
-}
-
-const Item = ({
-  active,
-  color,
-  disabled,
-  icon,
-  label,
-  onClick,
-  size = 'large',
-}: TabsItemProps) => {
-  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 (
-    <Li
-      $active={active}
-      $color={iconColor}
-      $disabled={disabled}
-      $hasIcon={!!icon}
-      $size={size}
-      onClick={!disabled ? onClick : undefined}
-    >
-      {icon && <IconWrapper $bg={bgColor}>{icon}</IconWrapper>}
-      <P $fontSize={fontSize} $lineHeight={lineHeight} $semiBold>
-        {label}
-      </P>
-    </Li>
-  );
-};
-
-const Li = styled.li<{
-  $active: boolean;
-  $color: string;
-  $disabled?: boolean;
-  $hasIcon: boolean;
-  $size: TabSizes;
-}>`
-  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<{
-  $bg: string;
-}>`
-  padding: 8px;
-  border-radius: 8px;
-  background-color: ${({ $bg }) => $bg};
-`;
-
-Tabs.Item = Item;
-Item.displayName = 'Tabs.Item';
-
-export { Tabs };

package/src/components/surfaces/accordion/accordion.tsx

@@ -1,89 +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';
-
-export interface AccordionProps extends React.PropsWithChildren {
-  sx?: string;
-}
-
-const AccordionContext = React.createContext<[number, (index: number) => void]>(
-  [-1, () => undefined]
-);
-
-const Accordion = ({ children, sx }: AccordionProps) => {
-  const [openIndex, setOpenIndex] = React.useState(-1);
-
-  const handleIndexChange = (index: number) => {
-    setOpenIndex((prev) => (prev === index ? -1 : index));
-  };
-
-  return (
-    <AccordionContext.Provider value={[openIndex, handleIndexChange]}>
-      <Wrapper $sx={sx}>
-        {React.Children.map(children, (child, index) => {
-          if (React.isValidElement(child))
-            return React.cloneElement(child, { index } as any);
-          return null;
-        })}
-      </Wrapper>
-    </AccordionContext.Provider>
-  );
-};
-
-const Wrapper = styled.div<{ $sx?: string }>`
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-
-export interface AccordionItemProps extends React.PropsWithChildren {
-  index?: number;
-  sx?: string;
-  trigger: React.ReactNode;
-}
-
-const AccordionItem = ({
-  children,
-  index,
-  sx,
-  trigger,
-}: AccordionItemProps) => {
-  const [openIndex, setOpenIndex] = React.useContext(AccordionContext);
-
-  return (
-    <Box $dir="column">
-      <TriggerWrapper
-        onClick={callAll(
-          // eslint-disable-next-line
-          () => setOpenIndex(index!),
-          (trigger as React.ReactElement)?.props?.onClick
-        )}
-      >
-        {trigger}
-        {openIndex === index ? <ChevronUp /> : <ChevronDown />}
-      </TriggerWrapper>
-      <Box sx={openIndex === index ? sx : 'visibility: hidden; height: 0px;'}>
-        {children}
-      </Box>
-    </Box>
-  );
-};
-
-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;
-`;
-
-Accordion.Item = AccordionItem;
-AccordionItem.displayName = 'Accordion.Item';
-
-export { Accordion };

package/src/components/surfaces/accordion/index.ts

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