@soul-refiner/design-system 0.1.37 → 0.1.39

package/src/components/actions/button/button.tsx

@@ -1,364 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { Styles } from '../../../common';
-import { P } from '../../';
-import { Box } from '../../atoms/box/box';
-import { ChevronDown, ChevronUp } from '../../../icons';
-
-const LG_ICON_SIZE = 20;
-const LG_ICON_SIZE_WO_CHILDREN = 24;
-const LG_FONT_SIZE = 16;
-const LG_PADDING = '11px 19px';
-const LG_PADDING_WO_CHILDREN = '11px';
-
-const SM_ICON_SIZE = 16;
-const SM_FONT_SIZE = 14;
-const SM_PADDING = '5px 15px';
-const SM_PADDING_WO_CHILDREN = '7px';
-
-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 ButtonSize = 'small' | 'large';
-type ButtonShape = 'none' | 'small' | 'medium-small' | 'large';
-
-export interface ButtonProps extends NativeProps, React.PropsWithChildren {
-  as?: React.ElementType;
-  disabled?: boolean;
-  fluid?: boolean;
-  icon?: React.ReactElement | undefined;
-  isDropdownOpen?: boolean;
-  roundness?: ButtonShape;
-  size?: ButtonSize;
-  sx?: string;
-  type?: ButtonTypes;
-}
-
-export const Button = ({
-  as = 'button',
-  children,
-  disabled,
-  fluid = false,
-  icon,
-  isDropdownOpen,
-  roundness = 'large',
-  size = 'large',
-  sx,
-  type = 'primary',
-  ...props
-}: ButtonProps) => {
-  const Component = Components()[type];
-
-  const buttonIcon = React.Children.map(icon, (item) => {
-    if (React.isValidElement(item))
-      return {
-        ...item,
-        props: {
-          size:
-            size === 'large' && !children
-              ? LG_ICON_SIZE_WO_CHILDREN
-              : size === 'large'
-              ? LG_ICON_SIZE
-              : SM_ICON_SIZE,
-        },
-      };
-  })?.[0];
-
-  const dropdownIcon =
-    isDropdownOpen === true ? (
-      <ChevronUp size={size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE} />
-    ) : isDropdownOpen === false ? (
-      <ChevronDown size={size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE} />
-    ) : undefined;
-
-  const padding = !!children
-    ? size === 'large'
-      ? LG_PADDING
-      : SM_PADDING
-    : size === 'large'
-    ? LG_PADDING_WO_CHILDREN
-    : SM_PADDING_WO_CHILDREN;
-
-  return (
-    <Component
-      as={as}
-      disabled={disabled}
-      $align="center"
-      $display="flex"
-      $fluid={fluid}
-      $gap={size === 'large' ? 12 : 8}
-      $hasChildren={!!children}
-      $justify="center"
-      $padding={padding}
-      $roundness={roundness}
-      $size={size}
-      $sx={sx}
-      {...props}
-    >
-      {buttonIcon}
-      {children && (
-        <P
-          as="span"
-          $mediumBold
-          $fontSize={size === 'large' ? LG_FONT_SIZE : SM_FONT_SIZE}
-          $color="inherit"
-        >
-          {children}
-        </P>
-      )}
-      {!!children && dropdownIcon}
-    </Component>
-  );
-};
-
-const Components = (): Record<ButtonTypes, any> => ({
-  primary: Primary,
-  secondary: Secondary,
-  outlined: Outlined,
-  danger: Danger,
-  raised: Raised,
-  special: Special,
-  text: Text,
-});
-
-const base = css<{
-  $fluid: boolean;
-  $roundness: ButtonShape;
-  $sx?: string;
-}>`
-  display: flex;
-  border-radius: ${({ $roundness }) =>
-    $roundness === 'large'
-      ? '32px'
-      : $roundness === 'medium-small'
-      ? '8px'
-      : $roundness === 'small'
-      ? '4px'
-      : '0px'};
-  cursor: pointer;
-  user-select: none;
-  box-sizing: border-box;
-  outline: none;
-  ${({ $fluid }) =>
-    $fluid
-      ? `flex-basis: max-content;
-    flex: 1 !important;
-    width: max-content`
-      : ''}
-
-  svg {
-    fill: currentColor;
-  }
-
-  &:disabled {
-    background-color: var(--color-grey-9) !important;
-    border: 1px solid var(--color-grey-8) !important;
-    color: var(--color-grey-7) !important;
-    cursor: unset !important;
-  }
-`;
-
-const Primary = styled(Box)<{
-  $fluid: boolean;
-  $roundness: ButtonShape;
-  $sx?: string;
-}>`
-  background-color: var(--color-primary-blue-2);
-  color: var(--color-white);
-  border: 1px solid var(--color-primary-blue-2);
-
-  &:hover {
-    border: 1px solid var(--color-primary-blue-1);
-    background-color: var(--color-primary-blue-1);
-  }
-
-  &:active {
-    border: 1px solid var(--color-primary-blue-0);
-    background-color: var(--color-primary-blue-0);
-  }
-
-  ${base}
-  ${Styles.flex}
-  ${Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-const Secondary = styled(Box)<{
-  $fluid: boolean;
-  $roundness: ButtonShape;
-  $sx?: string;
-}>`
-  background-color: var(--color-primary-blue-4);
-  color: var(--color-primary-blue-2);
-  border: 1px solid var(--color-primary-blue-4);
-
-  &:hover {
-    border: 1px solid var(--color-primary-blue-2);
-    color: var(--color-primary-blue-1);
-  }
-
-  &:active {
-    color: var(--color-primary-blue-0);
-  }
-
-  ${base}
-  ${Styles.flex}
-  ${Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-const Outlined = styled(Box)<{
-  $fluid: boolean;
-  $roundness: ButtonShape;
-  $sx?: string;
-}>`
-  background-color: var(--color-white);
-  color: var(--color-grey-3);
-  border: 1px solid var(--color-grey-8);
-
-  &:active {
-    background-color: var(--color-grey-8);
-  }
-
-  ${base}
-  ${Styles.flex}
-  ${Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-const Danger = styled(Box)<{
-  $fluid: boolean;
-  $roundness: ButtonShape;
-  $sx?: string;
-}>`
-  background-color: var(--color-red-4);
-  color: var(--color-white);
-  border: 1px solid var(--color-red-4);
-
-  &:hover {
-    border: 1px solid var(--color-red-3);
-    background-color: var(--color-red-3);
-  }
-
-  &:active {
-    border: 1px solid var(--color-red-2);
-    background-color: var(--color-red-2);
-  }
-
-  ${base}
-  ${Styles.flex}
-  ${Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-const Text = styled(Box)<{
-  $fluid: boolean;
-  $roundness: ButtonShape;
-  $sx?: string;
-}>`
-  background-color: transparent;
-  border: 1px solid transparent;
-  color: var(--color-primary-blue-2);
-
-  &:hover {
-    color: var(--color-primary-blue-1);
-  }
-
-  &:active {
-    color: var(--color-primary-blue-0);
-  }
-
-  &:disabled {
-    background-color: transparent !important;
-    border: 1px solid transparent !important;
-  }
-
-  ${base}
-  ${Styles.flex}
-  ${Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-const Raised = styled(Box)<{
-  $fluid: boolean;
-  $roundness: ButtonShape;
-  $sx?: string;
-}>`
-  background-color: var(--color-white);
-  color: var(--color-grey-3);
-  border: 1px solid var(--color-white);
-  box-shadow: var(--elevation-1);
-
-  &:hover {
-    background-color: var(--color-grey-9);
-    border: 1px solid var(--color-grey-9);
-  }
-
-  &:active {
-    background-color: var(--color-grey-8);
-    border: 1px solid var(--color-grey-8);
-  }
-
-  &:disabled {
-    border: 1px solid var(--color-grey-9) !important;
-  }
-
-  ${base}
-  ${Styles.flex}
-  ${Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-const Special = styled(Box)<{
-  $fluid: boolean;
-  $roundness: ButtonShape;
-  $sx?: string;
-}>`
-  background-color: transparent;
-  border: 1px solid transparent;
-  color: var(--color-primary-grey-3);
-
-  &:hover {
-    color: var(--color-grey-3);
-  }
-
-  &:active {
-    background-color: var(--color-grey-9);
-  }
-
-  &:disabled {
-    background-color: transparent !important;
-    border: 1px solid transparent !important;
-  }
-
-  ${base}
-  ${Styles.flex}
-  ${Styles.padding}
-
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;

package/src/components/actions/button/index.ts

@@ -1,2 +0,0 @@
-export { Button } from './button';
-export type { ButtonProps } from './button';