@soul-refiner/design-system 0.0.25 → 0.1.0

package/src/icons/time/alarm_snooze.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const AlarmSnooze = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.19466 0.861938L4.13747 1.80475L1.80414 4.13808L0.861328 3.19527L3.19466 0.861938ZM12.8041 0.861938L11.8613 1.80475L14.1947 4.13808L15.1375 3.19527L12.8041 0.861938ZM7.9994 14.6667C4.3175 14.6667 1.33273 11.6819 1.33273 8.00001C1.33273 4.31811 4.3175 1.33334 7.9994 1.33334C11.6813 1.33334 14.6661 4.31811 14.6661 8.00001C14.6661 11.6819 11.6813 14.6667 7.9994 14.6667ZM7.9994 13.3333C10.9449 13.3333 13.3327 10.9455 13.3327 8.00001C13.3327 5.05449 10.9449 2.66668 7.9994 2.66668C5.05388 2.66668 2.66607 5.05449 2.66607 8.00001C2.66607 10.9455 5.05388 13.3333 7.9994 13.3333ZM5.9994 5.33334V6.66668H8.08706L5.42039 10.6667H9.9994V9.33334H7.91174L10.5784 5.33334H5.9994Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/time/calendar.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const Calendar = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.00065 4.00004H5.33398V3.33337H10.6673V4.00004H12.0007V3.33337H13.334V5.33337H2.66732V3.33337H4.00065V4.00004ZM2.66732 6.66671V13.3334H13.334V6.66671H2.66732ZM5.33398 2.00004H10.6673V1.33337H12.0007V2.00004H13.334C14.0704 2.00004 14.6673 2.59699 14.6673 3.33337V13.3334C14.6673 14.0698 14.0704 14.6667 13.334 14.6667H2.66732C1.93094 14.6667 1.33398 14.0698 1.33398 13.3334V3.33337C1.33398 2.59699 1.93094 2.00004 2.66732 2.00004H4.00065V1.33337H5.33398V2.00004Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/time/calendar_add.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const CalendarAdd = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.00065 4.00004H5.33398V3.33337H10.6673V4.00004H12.0007V3.33337H13.334V5.33337H2.66732V3.33337H4.00065V4.00004ZM2.66732 6.66671V13.3334H9.33398V14.6667H2.66732C1.93094 14.6667 1.33398 14.0698 1.33398 13.3334V3.33337C1.33398 2.59699 1.93094 2.00004 2.66732 2.00004H4.00065V1.33337H5.33398V2.00004H10.6673V1.33337H12.0007V2.00004H13.334C14.0704 2.00004 14.6673 2.59699 14.6673 3.33337V9.33337H13.334V6.66671H2.66732ZM11.334 14V12.6667H12.6673V11.3334H14.0007V12.6667H15.334V14H14.0007V15.3334H12.6673V14H11.334Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/time/calendar_checkmark.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const CalendarCheckmark = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.33398 4.00004H4.00065V3.33337H2.66732V5.33337H13.334V3.33337H12.0007V4.00004H10.6673V3.33337H5.33398V4.00004ZM2.66732 13.3334V6.66671H13.334V13.3334H2.66732ZM10.6673 2.00004H5.33398V1.33337H4.00065V2.00004H2.66732C1.93094 2.00004 1.33398 2.59699 1.33398 3.33337V13.3334C1.33398 14.0698 1.93094 14.6667 2.66732 14.6667H13.334C14.0704 14.6667 14.6673 14.0698 14.6673 13.3334V3.33337C14.6673 2.59699 14.0704 2.00004 13.334 2.00004H12.0007V1.33337H10.6673V2.00004ZM10.1959 7.52864L7.33398 10.3906L5.80539 8.86197L4.86258 9.80478L7.33398 12.2762L11.1387 8.47145L10.1959 7.52864Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/time/calendar_close.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const CalendarClose = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.33398 4.00004H4.00065V3.33337H2.66732V5.33337H13.334V3.33337H12.0007V4.00004H10.6673V3.33337H5.33398V4.00004ZM2.66732 13.3334V6.66671H13.334V13.3334H2.66732ZM10.6673 2.00004H5.33398V1.33337H4.00065V2.00004H2.66732C1.93094 2.00004 1.33398 2.59699 1.33398 3.33337V13.3334C1.33398 14.0698 1.93094 14.6667 2.66732 14.6667H13.334C14.0704 14.6667 14.6673 14.0698 14.6673 13.3334V3.33337C14.6673 2.59699 14.0704 2.00004 13.334 2.00004H12.0007V1.33337H10.6673V2.00004ZM9.52925 7.52864L8.00065 9.05723L6.47206 7.52864L5.52925 8.47145L7.05784 10L5.52925 11.5286L6.47206 12.4714L8.00065 10.9428L9.52925 12.4714L10.4721 11.5286L8.94346 10L10.4721 8.47145L9.52925 7.52864Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/time/calendar_dates.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const CalendarDates = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.33398 4.00004H4.00065V3.33337H2.66732V5.33337H13.334V3.33337H12.0007V4.00004H10.6673V3.33337H5.33398V4.00004ZM13.334 6.66671H2.66732V13.3334H13.334V6.66671ZM10.6673 2.00004H5.33398V1.33337H4.00065V2.00004H2.66732C1.93094 2.00004 1.33398 2.59699 1.33398 3.33337V13.3334C1.33398 14.0698 1.93094 14.6667 2.66732 14.6667H13.334C14.0704 14.6667 14.6673 14.0698 14.6673 13.3334V3.33337C14.6673 2.59699 14.0704 2.00004 13.334 2.00004H12.0007V1.33337H10.6673V2.00004ZM4.66732 9.33337V8.00004H6.00065V9.33337H4.66732ZM7.33398 9.33337H8.66732V8.00004H7.33398V9.33337ZM11.334 9.33337H10.0007V8.00004H11.334V9.33337ZM4.66732 10.6667V12H6.00065V10.6667H4.66732ZM8.66732 12H7.33398V10.6667H8.66732V12Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/time/calendar_minus.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const CalendarMinus = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.33398 4.00004H4.00065V3.33337H2.66732V5.33337H13.334V3.33337H12.0007V4.00004H10.6673V3.33337H5.33398V4.00004ZM2.66732 13.3334V6.66671H13.334V13.3334H2.66732ZM10.6673 2.00004H5.33398V1.33337H4.00065V2.00004H2.66732C1.93094 2.00004 1.33398 2.59699 1.33398 3.33337V13.3334C1.33398 14.0698 1.93094 14.6667 2.66732 14.6667H13.334C14.0704 14.6667 14.6673 14.0698 14.6673 13.3334V3.33337C14.6673 2.59699 14.0704 2.00004 13.334 2.00004H12.0007V1.33337H10.6673V2.00004ZM5.33398 9.33337V10.6667H10.6673V9.33337H5.33398Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/time/calendar_plus.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const CalendarPlus = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.00065 4.00004H5.33398V3.33337H10.6673V4.00004H12.0007V3.33337H13.334V5.33337H2.66732V3.33337H4.00065V4.00004ZM2.66732 6.66671V13.3334H13.334V6.66671H2.66732ZM5.33398 2.00004H10.6673V1.33337H12.0007V2.00004H13.334C14.0704 2.00004 14.6673 2.59699 14.6673 3.33337V13.3334C14.6673 14.0698 14.0704 14.6667 13.334 14.6667H2.66732C1.93094 14.6667 1.33398 14.0698 1.33398 13.3334V3.33337C1.33398 2.59699 1.93094 2.00004 2.66732 2.00004H4.00065V1.33337H5.33398V2.00004ZM5.33398 10.6667V9.33337H7.33398V7.33337H8.66732V9.33337H10.6673V10.6667H8.66732V12.6667H7.33398V10.6667H5.33398Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/time/calendar_scroll.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const CalendarScroll = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path d="M6.35937 11.0666L8.00097 12.7086L9.64257 11.0666L8.95097 10.3834L8.00097 11.3334L7.05097 10.3834L6.35937 11.0666Z" />
+      <path d="M6.35937 8.93347L7.05097 9.61667L8.00097 8.66667L8.95097 9.61667L9.64257 8.93347L8.00097 7.29187L6.35937 8.93347Z" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.6673 2.00004H5.33398V1.33337H4.00065V2.00004H2.66732C1.93094 2.00004 1.33398 2.59699 1.33398 3.33337V13.3334C1.33398 14.0698 1.93094 14.6667 2.66732 14.6667H13.334C14.0704 14.6667 14.6673 14.0698 14.6673 13.3334V3.33337C14.6673 2.59699 14.0704 2.00004 13.334 2.00004H12.0007V1.33337H10.6673V2.00004ZM5.33398 4.00004H4.00065V3.33337H2.66732V5.33337H13.334V3.33337H12.0007V4.00004H10.6673V3.33337H5.33398V4.00004ZM2.66732 13.3334V6.66671H13.334V13.3334H2.66732Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/time/clock.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const Clock = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99935 15.3333C3.94926 15.3333 0.666016 12.05 0.666016 7.99996C0.666016 3.94987 3.94926 0.666626 7.99935 0.666626C12.0494 0.666626 15.3327 3.94987 15.3327 7.99996C15.3327 12.05 12.0494 15.3333 7.99935 15.3333ZM7.99935 14C11.3131 14 13.9993 11.3137 13.9993 7.99996C13.9993 4.68625 11.3131 1.99996 7.99935 1.99996C4.68564 1.99996 1.99935 4.68625 1.99935 7.99996C1.99935 11.3137 4.68564 14 7.99935 14ZM11.3327 7.33329H8.66602V3.99996H7.33268V8.66663H11.3327V7.33329Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/time/clock_history.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const ClockHistory = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.33268 3.99996H3.40874C4.69579 2.52754 6.10549 1.99996 7.99935 1.99996C11.3131 1.99996 13.9993 4.68625 13.9993 7.99996C13.9993 11.3137 11.3131 14 7.99935 14C4.68564 14 1.99935 11.3137 1.99935 7.99996H0.666016C0.666016 12.05 3.94926 15.3333 7.99935 15.3333C12.0494 15.3333 15.3327 12.05 15.3327 7.99996C15.3327 3.94987 12.0494 0.666626 7.99935 0.666626C5.8571 0.666626 4.1574 1.27366 2.66602 2.83759V1.32743H1.33268V5.33329H5.33268V3.99996ZM11.3327 7.33329H8.66602V3.99996H7.33268V8.66663H11.3327V7.33329Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/time/index.ts

@@ -0,0 +1,19 @@
+export { Alarm } from './alarm';
+export { AlarmCheckmark } from './alarm_checkmark';
+export { AlarmMinus } from './alarm_minus';
+export { AlarmPlus } from './alarm_plus';
+export { AlarmSlash } from './alarm_slash';
+export { AlarmSnooze } from './alarm_snooze';
+export { Calendar } from './calendar';
+export { CalendarAdd } from './calendar_add';
+export { CalendarCheckmark } from './calendar_checkmark';
+export { CalendarClose } from './calendar_close';
+export { CalendarDates } from './calendar_dates';
+export { CalendarMinus } from './calendar_minus';
+export { CalendarPlus } from './calendar_plus';
+export { CalendarScroll } from './calendar_scroll';
+export { Clock } from './clock';
+export { ClockHistory } from './clock_history';
+export { Stopwatch } from './stopwatch';
+export { Timer } from './timer';
+export { Watch } from './watch';

package/src/icons/time/stopwatch.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const Stopwatch = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.33333 2.70325V1.99996H6.66667V0.666626H9.33333V1.99996H8.66667V2.70325C9.82367 2.83115 10.8815 3.28802 11.7446 3.97827L12.8609 2.85706L13.8058 3.7978L12.6875 4.92098C13.5089 5.9475 14 7.24971 14 8.66663C14 11.9803 11.3137 14.6666 8 14.6666C4.68629 14.6666 2 11.9803 2 8.66663C2 5.57826 4.33337 3.03487 7.33333 2.70325ZM8 13.3333C10.5773 13.3333 12.6667 11.244 12.6667 8.66663C12.6667 6.0893 10.5773 3.99996 8 3.99996C5.42267 3.99996 3.33333 6.0893 3.33333 8.66663C3.33333 11.244 5.42267 13.3333 8 13.3333ZM8.66667 9.33329V5.33329H7.33333V9.33329H8.66667Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/time/timer.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const Timer = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.66602 4.66663V2.03658C11.666 2.36821 13.9993 4.91159 13.9993 7.99996C13.9993 11.3137 11.3131 14 7.99935 14C4.68564 14 1.99935 11.3137 1.99935 7.99996C1.99935 6.38247 2.64146 4.8684 3.76468 3.74936L2.82363 2.8048C1.45178 4.17155 0.666016 6.02434 0.666016 7.99996C0.666016 12.05 3.94926 15.3333 7.99935 15.3333C12.0494 15.3333 15.3327 12.05 15.3327 7.99996C15.3327 3.94987 12.0494 0.666626 7.99935 0.666626H7.33268V4.66663H8.66602ZM7.99935 6.66663C7.87991 6.66663 7.76414 6.68233 7.65399 6.71179L5.13742 4.19522L4.19461 5.13803L6.71118 7.6546C6.68172 7.76475 6.66602 7.88052 6.66602 7.99996C6.66602 8.73634 7.26297 9.33329 7.99935 9.33329C8.73573 9.33329 9.33268 8.73634 9.33268 7.99996C9.33268 7.26358 8.73573 6.66663 7.99935 6.66663Z"
+      />
+    </Icon>
+  );
+};

package/src/icons/time/watch.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Icon, IconProps } from 'components';
+
+export const Watch = (props: IconProps) => {
+  return (
+    <Icon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.99935 0.666626H5.99935C5.7017 0.666626 5.4401 0.863944 5.35833 1.15015L4.56779 3.91705C3.40496 4.89539 2.66602 6.36138 2.66602 7.99996C2.66602 9.63854 3.40496 11.1045 4.56779 12.0829L5.35833 14.8498C5.4401 15.136 5.7017 15.3333 5.99935 15.3333H9.99935C10.297 15.3333 10.5586 15.136 10.6404 14.8498L11.4309 12.0829C12.4335 11.2393 13.121 10.0333 13.2914 8.66663H13.9993V7.33329H13.2914C13.121 5.96665 12.4335 4.76059 11.4309 3.91705L10.6404 1.15015C10.5586 0.863944 10.297 0.666626 9.99935 0.666626ZM7.99935 2.66663C8.62126 2.66663 9.21831 2.77307 9.77328 2.96874L9.49648 1.99996H6.50222L6.22542 2.96874C6.78038 2.77307 7.37744 2.66663 7.99935 2.66663ZM6.50222 14L6.22542 13.0312C6.78038 13.2268 7.37744 13.3333 7.99935 13.3333C8.62126 13.3333 9.21831 13.2268 9.77328 13.0312L9.49648 14H6.50222ZM11.9993 7.99996C11.9993 10.2091 10.2085 12 7.99935 12C5.79021 12 3.99935 10.2091 3.99935 7.99996C3.99935 5.79082 5.79021 3.99996 7.99935 3.99996C10.2085 3.99996 11.9993 5.79082 11.9993 7.99996ZM8.66602 7.33329H9.99935V8.66663H7.33268V5.33329H8.66602V7.33329Z"
+      />
+    </Icon>
+  );
+};

package/src/index.ts

@@ -0,0 +1 @@
+export { Avatar, Box, Icon, Display, H, P } from './components';

package/src/types/attributes.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+import { COLORS } from 'common';
+
+export type Align =
+  | 'center'
+  | 'flex-start'
+  | 'flex-end'
+  | 'baseline'
+  | 'stretch';
+
+export type Justify =
+  | 'center'
+  | 'flex-start'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'stretch';
+
+export type Sizes =
+  | 'extra-small'
+  | 'small'
+  | 'medium'
+  | 'medium-large'
+  | 'large'
+  | 'extra-large'
+  | 'full';
+
+export type BorderRadius = {
+  $borderRadius?: Sizes;
+};
+
+export type BackgroundColor = {
+  $backgroundColor?: (typeof COLORS)[number];
+};
+
+export type Color = {
+  $color?: (typeof COLORS)[number];
+};
+
+export type Elevation = {
+  $elevation?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+};
+
+export type Flex = {
+  $align?: Align;
+  $gap?: Sizes | number;
+  $flex?: number;
+  $flow?: string;
+  $dir?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  $justify?: Justify;
+};
+
+export type Margin = {
+  $margin?: Sizes | number;
+};
+
+export type Padding = {
+  $padding?: Sizes | number;
+};
+
+export type Polymorphic = {
+  as?: React.ElementType;
+};
+
+export type Styleable = {
+  sx?: string;
+};
+
+export type TextClamp = {
+  $textClampLines?: number;
+};
+
+export type TypographyWeight = {
+  $bold?: boolean;
+  $semiBold?: boolean;
+  $mediumBold?: boolean;
+};
+
+export type TypographyStyle = {
+  $italic?: boolean;
+  $strikethrough?: boolean;
+  $underline?: boolean;
+};

package/src/types/index.ts

@@ -0,0 +1,17 @@
+export type {
+  Align,
+  BackgroundColor,
+  BorderRadius,
+  Color,
+  Elevation,
+  Flex,
+  Justify,
+  Margin,
+  Padding,
+  Polymorphic,
+  Sizes,
+  Styleable,
+  TextClamp,
+  TypographyStyle,
+  TypographyWeight,
+} from './attributes';

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "lib": ["es2022", "ESNext"],
+    "module": "ES6",
+    "jsx": "react",
+    "strict": true,
+    "noEmit": true,
+    "allowJs": false,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": "src",
+    "experimentalDecorators": true,
+    "rootDir": "./src",
+    "paths": {
+      "common/*": ["./src/common/*"],
+      "components/*": ["./src/components/*"],
+      "icons/*": ["./src/icons/*"],
+      "types/*": ["./src/types/*"]
+    }
+  },
+  "include": ["src/**/*.tsx", "src/**/*.ts", "src/icons/home.tsx"],
+  "exclude": ["node_modules"]
+}

package/dist/global.d.ts

@@ -1 +0,0 @@
-declare module "*.scss";

package/dist/index.d.ts

@@ -1 +0,0 @@
-export * from './src/index'