@soul-refiner/design-system 0.1.37 → 0.1.39

package/src/components/card/person/person.tsx

@@ -1,98 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Box, H, P } from '../../';
-
-export interface PersonCardProps {
-  actions?: React.ReactElement | React.ReactElement[];
-  href: string;
-  image: string;
-  subtitle: string;
-  sx?: string;
-  title: string;
-}
-
-export const PersonCard = ({
-  actions,
-  href,
-  image,
-  subtitle,
-  sx,
-  title,
-}: PersonCardProps) => {
-  return (
-    <Wrapper $image={image} as={href ? 'a' : 'div'}>
-      <Person $sx={sx}>
-        <Shadow>
-          <img src={image} alt="" />
-        </Shadow>
-        <Figcaption>
-          <H as="span" $bold $color="white" $fontSize={24} $lineHeight={36}>
-            {title}
-          </H>
-          <P as="span" $color="white" $fontSize={14} $lineHeight={20}>
-            {subtitle}
-          </P>
-          {actions && (
-            <Box $display="flex" $dir="row" $gap={8} sx="margin-top: 16px;">
-              {React.Children.toArray(actions)}
-            </Box>
-          )}
-        </Figcaption>
-      </Person>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div<{
-  $image: string;
-}>`
-  width: 312px;
-  height: 400px;
-  display: block;
-  text-decoration: none;
-  cursor: pointer;
-
-  img {
-    width: 100%;
-    height: 100%;
-    border-radius: 16px;
-  }
-`;
-
-const Shadow = styled.div`
-  border-radius: 16px;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 66.67%, #000 98.25%),
-    transparent 50% / cover no-repeat;
-`;
-
-const Person = styled.figure<{
-  $sx?: string;
-}>`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  margin: 0px;
-  border-radius: 16px;
-  display: flex;
-  justify-content: flex-end;
-  flex-direction: column;
-
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-
-const Figcaption = styled.figcaption`
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  padding: 16px 24px;
-`;

package/src/components/card/price/index.ts

@@ -1,2 +0,0 @@
-export { PriceCard } from './price';
-export type { PriceCardProps } from './price';

package/src/components/card/price/price.tsx

@@ -1,112 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Box, H, P } from '../../';
-import { Checkmark } from '../../../icons';
-
-export interface PriceCardProps {
-  actions: React.ReactElement;
-  content: string;
-  features: string[];
-  featureTitle: string;
-  price: string;
-  title: string;
-}
-
-export const PriceCard = ({
-  actions,
-  content,
-  featureTitle,
-  features,
-  price,
-  title,
-}: PriceCardProps) => {
-  const id = React.useId();
-  return (
-    <Price>
-      <Box
-        $align="stretch"
-        $display="flex"
-        $dir="column"
-        $gap={24}
-        sx={`
-          padding: 24px 48px; 
-          background-color: var(--color-grey-10); 
-          border-radius: 16px 16px 0px 0px;
-        `}
-      >
-        <H
-          as="h6"
-          $fontSize={24}
-          $lineHeight={36}
-          $semiBold
-          $textAlign="center"
-        >
-          {title}
-        </H>
-        <Box $dir="column">
-          <H
-            as="p"
-            $bold
-            $fontSize={32}
-            $lineHeight={48}
-            $textClampLines={5}
-            $textAlign="center"
-          >
-            {price}
-          </H>
-          <P as="span" $color="grey-4" $textAlign="center">
-            /month
-          </P>
-        </Box>
-        {actions}
-      </Box>
-      <Box
-        sx="padding: 16px 24px; position: relative;"
-        $display="flex"
-        $dir="column"
-      >
-        <P sx="padding: 16px 0px;">{content}</P>
-        <Divider />
-        <Box sx="padding: 16px 0px;" $dir="column" $gap={8}>
-          <P $color="grey-2" $mediumBold>
-            {featureTitle}
-          </P>
-          {features.map((item, index) => (
-            <Box key={id + index.toString(36)} $align="center" $gap={12}>
-              <Checkmark
-                color="green-5"
-                sx="padding: 2px; border-radius: 50%; background-color: var(--color-green-9);"
-              />
-              <P $fontSize={14} $lineHeight={20}>
-                {item}
-              </P>
-            </Box>
-          ))}
-        </Box>
-      </Box>
-    </Price>
-  );
-};
-
-const Price = styled.figure`
-  margin: 0px;
-  padding: 0px;
-  width: 280px;
-  height: fit-content;
-  border-radius: 16px;
-  box-shadow: var(--elevation-2);
-  user-select: none;
-
-  &:hover {
-    border: 1px solid var(--color-primary-blue-3);
-  }
-`;
-
-const Divider = styled.div`
-  height: 1px;
-  width: 100%;
-  box-sizing: border-box;
-  background-color: var(--color-grey-9);
-`;

package/src/components/card/regular/index.ts

@@ -1,2 +0,0 @@
-export { RegularCard } from './regular';
-export type { RegularCardProps } from './regular';

package/src/components/card/regular/regular.tsx

@@ -1,54 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Box } from '../../';
-
-export interface RegularCardProps extends React.PropsWithChildren {
-  href?: string;
-  image: string;
-  sx?: string;
-}
-
-export const RegularCard = ({
-  children,
-  href,
-  image,
-  sx,
-}: RegularCardProps) => {
-  return (
-    <Wrapper $isLink={!!href} $sx={sx} as={href ? 'a' : 'div'} href={href}>
-      <img src={image} alt="" />
-      <Box $dir="column" $padding={24}>
-        {children}
-      </Box>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.div<{
-  $isLink: boolean;
-  $sx?: string;
-}>`
-  position: relative;
-  display: block;
-  text-decoration: none;
-  cursor: pointer;
-  box-shadow: var(--elevation-1);
-  border-radius: 16px;
-  background-color: var(--color-white);
-
-  ${({ $isLink }) =>
-    $isLink
-      ? `
-    &:hover {
-      border: 1px solid var(--color-primary-blue-3);
-    }`
-      : ''}
-
-  img {
-    border-radius: 16px 16px 0px 0px;
-  }
-
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;

package/src/components/card/video/index.ts

@@ -1,2 +0,0 @@
-export { VideoEpisodeCard } from './video';
-export type { VideoEpisodeCardProps } from './video';

package/src/components/card/video/video.tsx

@@ -1,169 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Box, H, P, Rate } from '../../';
-
-export interface VideoEpisodeCardProps {
-  actions: React.ReactElement[];
-  actionDropdown?: React.ReactElement;
-  content: string;
-  cta: React.ReactElement;
-  href: string;
-  image: string;
-  logo?: React.ReactElement;
-  numRating: number;
-  rating: number;
-  subtitle: string;
-  supportLabel?: string;
-  sx?: string;
-  title: string;
-}
-
-export const VideoEpisodeCard = ({
-  actions,
-  actionDropdown,
-  content,
-  cta,
-  href,
-  image,
-  logo,
-  numRating,
-  rating,
-  subtitle,
-  supportLabel,
-  sx,
-  title,
-}: VideoEpisodeCardProps) => {
-  const hasLogo = !!logo;
-
-  return (
-    <Wrapper $sx={sx} href={href}>
-      <Figure>
-        {actionDropdown && <DropdownWrapper>{actionDropdown}</DropdownWrapper>}
-        <img className="thumbnail" src={image} alt="" />
-        <Figcaption>
-          <Box $display="block" className="hidden">
-            {cta}
-          </Box>
-          <Box $align="center" $dir="row" $gap={16}>
-            {logo}
-            <Box $dir="column">
-              <H $color="grey-2" $semiBold $fontSize={hasLogo ? 18 : 16}>
-                {title}
-              </H>
-              <P $color="grey-4" $fontSize={12} $lineHeight={16}>
-                {subtitle}
-              </P>
-            </Box>
-            {supportLabel && (
-              <P
-                className="not-hover"
-                $color="grey-4"
-                $fontSize={12}
-                $lineHeight={16}
-                sx="margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;"
-              >
-                {supportLabel}
-              </P>
-            )}
-          </Box>
-          <P
-            $color="grey-5"
-            $fontSize={14}
-            $lineHeight={20}
-            $mediumBold
-            $textClampLines={4}
-            className="hidden"
-          >
-            {content}
-          </P>
-          <Box className="hidden" $align="center" $dir="row">
-            <Rate isRateable={false} percent={rating} size="small" />
-            <P
-              $color="grey-4"
-              $fontSize={12}
-              $lineHeight={16}
-              sx="margin: 0px auto 0px 4px;"
-            >
-              ({numRating})
-            </P>
-            <Box $align="center" $dir="row" $gap={8}>
-              {React.Children.toArray(actions)}
-            </Box>
-          </Box>
-        </Figcaption>
-      </Figure>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.a<{ $sx?: string }>`
-  cursor: pointer;
-  display: block;
-  position: relative;
-  user-select: none;
-
-  .hidden {
-    display: none;
-  }
-
-  &:hover {
-    .hidden {
-      display: flex;
-    }
-
-    .not-hover {
-      display: none;
-    }
-
-    .thumbnail {
-      border-radius: 16px 16px 0px 0px;
-    }
-
-    figure {
-      aspect-ratio: 410 / 414;
-      box-shadow: var(--elevation-3);
-      background: linear-gradient(
-        0deg,
-        #ffffff 50%,
-        rgba(255, 255, 255, 0.85) 55%,
-        rgba(255, 255, 255, 0.1) 80%
-      );
-    }
-
-    figcaption {
-      margin-top: -40px;
-      padding: 24px;
-    }
-  }
-
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-
-const Figure = styled.figure`
-  max-width: 410px;
-  margin: 0px;
-  border-radius: 16px;
-
-  .thumbnail {
-    position: relative;
-    z-index: -1;
-    width: 100%;
-    aspect-ratio: 410 / 239;
-    border-radius: 16px;
-  }
-`;
-
-const Figcaption = styled.figcaption`
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 8px;
-  padding: 8px;
-`;
-
-const DropdownWrapper = styled.div`
-  position: absolute;
-  top: 8px;
-  right: 8px;
-`;

package/src/components/card/written/index.ts

@@ -1,2 +0,0 @@
-export { WrittenEpisodeCard } from './written';
-export type { WrittenEpisodeCardProps } from './written';

package/src/components/card/written/written.tsx

@@ -1,178 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Box, H, P, Rate } from '../../';
-
-export interface WrittenEpisodeCardProps {
-  actions: React.ReactElement[];
-  actionDropdown?: React.ReactElement;
-  content: string;
-  cta: React.ReactElement;
-  href: string;
-  image: string;
-  logo?: React.ReactElement;
-  numRating: number;
-  rating: number;
-  subtitle: string;
-  supportLabel?: string;
-  sx?: string;
-  title: string;
-}
-
-export const WrittenEpisodeCard = ({
-  actions,
-  actionDropdown,
-  content,
-  cta,
-  href,
-  image,
-  logo,
-  numRating,
-  rating,
-  subtitle,
-  supportLabel,
-  sx,
-  title,
-}: WrittenEpisodeCardProps) => {
-  const hasLogo = !!logo;
-
-  return (
-    <Wrapper $sx={sx} href={href}>
-      <Figure>
-        {actionDropdown && <DropdownWrapper>{actionDropdown}</DropdownWrapper>}
-        <img className="thumbnail" src={image} alt="" />
-        <Figcaption>
-          <Box $display="block" className="hidden">
-            {cta}
-          </Box>
-          <Box $align="center" $dir="row" $gap={16}>
-            {logo}
-            <Box $dir="column">
-              <H $color="grey-2" $semiBold $fontSize={hasLogo ? 18 : 16}>
-                {title}
-              </H>
-              <P $color="grey-4" $fontSize={12} $lineHeight={16}>
-                {subtitle}
-              </P>
-            </Box>
-            {supportLabel && (
-              <P
-                className="not-hover"
-                $color="grey-4"
-                $fontSize={12}
-                $lineHeight={16}
-                sx="margin-left: auto; align-self: flex-end; margin-bottom: 2.5px;"
-              >
-                {supportLabel}
-              </P>
-            )}
-          </Box>
-          <P
-            $color="grey-5"
-            $fontSize={14}
-            $lineHeight={20}
-            $mediumBold
-            $textClampLines={6}
-            className="hidden inline"
-          >
-            {content}
-          </P>
-          <Box className="hidden" $align="center" $dir="row">
-            <Rate isRateable={false} percent={rating} size="small" />
-            <P
-              $color="grey-4"
-              $fontSize={12}
-              $lineHeight={16}
-              sx="margin: 0px auto 0px 4px;"
-            >
-              ({numRating})
-            </P>
-            <Box $align="center" $dir="row" $gap={8}>
-              {React.Children.toArray(actions)}
-            </Box>
-          </Box>
-        </Figcaption>
-      </Figure>
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.a<{ $sx?: string }>`
-  cursor: pointer;
-  display: block;
-  position: relative;
-  user-select: none;
-
-  figure {
-    max-width: 228px;
-  }
-
-  .hidden {
-    display: none;
-  }
-
-  &:hover {
-    .hidden {
-      display: flex;
-
-      &.inline {
-        display: -webkit-box;
-      }
-    }
-
-    .not-hover {
-      display: none;
-    }
-
-    .thumbnail {
-      border-radius: 16px 16px 0px 0px;
-      aspect-ratio: 228 / 228;
-    }
-
-    figure {
-      max-width: 280px;
-      aspect-ratio: 280 / 434;
-      box-shadow: var(--elevation-3);
-      background: linear-gradient(
-        0deg,
-        #ffffff 50%,
-        rgba(255, 255, 255, 0.85) 55%,
-        rgba(255, 255, 255, 0.1) 80%
-      );
-    }
-
-    figcaption {
-      margin-top: -80px;
-      padding: 24px;
-    }
-  }
-
-  ${({ $sx }) => ($sx ? $sx : '')};
-`;
-
-const Figure = styled.figure`
-  margin: 0px;
-  border-radius: 16px;
-
-  .thumbnail {
-    border-radius: 16px;
-    position: relative;
-    z-index: -1;
-    width: 100%;
-    aspect-ratio: 228 / 326;
-  }
-`;
-
-const Figcaption = styled.figcaption`
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 8px;
-  padding: 8px;
-`;
-
-const DropdownWrapper = styled.div`
-  position: absolute;
-  top: 8px;
-  right: 8px;
-`;