@soul-refiner/design-system 0.1.28 → 0.1.30

package/dist/components/feedback/banner/index.js

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

package/dist/components/feedback/chip/chip.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type ChipColor = 'grey' | 'blue' | 'red' | 'green' | 'turquoise' | 'purple' | 'yellow' | 'orange' | 'primary-blue';
+type ChipSize = 'small' | 'large';
+export interface ChipProps extends React.PropsWithChildren {
+    color: ChipColor;
+    dot?: boolean;
+    onDismiss?: () => void;
+    size: ChipSize;
+}
+export declare const Chip: ({ children, color, dot, onDismiss, size }: ChipProps) => React.JSX.Element;
+export {};

package/dist/components/feedback/chip/chip.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Close } from 'icons';
+const colorLookup = {
+    '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 const Chip = ({ children, color, dot, onDismiss, size }) => {
+    const bgColor = colorLookup[color].primary;
+    const textColor = colorLookup[color].text;
+    const dotColor = colorLookup[color].secondary;
+    return (React.createElement(Component, { "$bgColor": bgColor, "$size": size, "$textColor": textColor },
+        dot && React.createElement(Dot, { "$secondaryColor": dotColor }),
+        children,
+        onDismiss && React.createElement(Close, { size: 16 })));
+};
+const Component = styled.div `
+  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 `
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: ${({ $secondaryColor }) => $secondaryColor};
+`;

package/dist/components/feedback/chip/chip.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import { ChipProps } from './chip';
+declare const meta: Meta;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ChipProps & {
+    hasDismissFn?: boolean | undefined;
+}>;
+export default meta;

package/dist/components/feedback/chip/chip.stories.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Chip } from './chip';
+const meta = {
+    title: 'Feedback/Chip',
+    parameters: {
+        layout: 'centered',
+    },
+};
+const Story = ({ hasDismissFn, 
+// eslint-disable-next-line
+onDismiss, ...args }) => (React.createElement(Chip, { onDismiss: hasDismissFn ? () => undefined : undefined, ...args }, "Chips Name"));
+export const Default = Story.bind({});
+Default.argTypes = {
+    color: {
+        options: [
+            'grey',
+            'blue',
+            'red',
+            'green',
+            'turquoise',
+            'purple',
+            'yellow',
+            'orange',
+            'primary-blue',
+        ],
+        control: 'select',
+    },
+    size: {
+        options: ['small', 'large'],
+        control: 'select',
+    },
+};
+Default.args = {
+    color: 'blue',
+    hasDismissFn: true,
+    size: 'large',
+    dot: true,
+};
+export default meta;

package/dist/components/feedback/chip/index.d.ts

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

package/dist/components/feedback/chip/index.js

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

package/dist/components/feedback/index.d.ts

@@ -0,0 +1,14 @@
+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/dist/components/feedback/index.js

@@ -0,0 +1,7 @@
+export { Badge } from './badge';
+export { Banner } from './banner';
+export { Loader } from './loader';
+export { Notification } from './notification';
+export { Progress } from './progress';
+export { Toast } from './toast';
+export { Tooltip } from './tooltip';

package/dist/components/feedback/loader/index.d.ts

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

package/dist/components/feedback/loader/index.js

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

package/dist/components/feedback/loader/loader.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { COLORS } from 'common';
+export interface LoaderProps {
+    color?: (typeof COLORS)[number];
+    inline?: boolean;
+    inverse?: boolean;
+    size?: number;
+    sx?: string;
+}
+export declare const Loader: ({ color, inline, size, sx, }: LoaderProps) => React.JSX.Element;

package/dist/components/feedback/loader/loader.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { colorReference } from 'common';
+export const Loader = ({ color = 'grey-1', inline, size = 16, sx, }) => {
+    let borderWidth = 3;
+    if (size > 96)
+        borderWidth = 10;
+    else if (size > 47)
+        borderWidth = 5;
+    else if (size > 23)
+        borderWidth = 4;
+    return (React.createElement(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 `
+  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/dist/components/feedback/loader/loader.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { LoaderProps } from './loader';
+declare const meta: Meta;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, LoaderProps>;
+export default meta;

package/dist/components/feedback/loader/loader.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Loader } from './loader';
+import { COLORS } from 'common';
+const meta = {
+    title: 'Feedback/Loader',
+    parameters: {
+        layout: 'centered',
+    },
+};
+const Story = (args) => React.createElement(Loader, { ...args });
+export const Default = Story.bind({});
+Default.argTypes = {
+    size: {
+        type: 'number',
+        control: {
+            type: 'range',
+            min: 4,
+            max: 64,
+            step: 4,
+        },
+    },
+    color: {
+        type: 'string',
+        options: COLORS,
+        control: 'select',
+    },
+};
+Default.args = {};
+export default meta;

package/dist/components/feedback/notification/index.d.ts

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

package/dist/components/feedback/notification/index.js

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

package/dist/components/feedback/notification/notification.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type NotificationTypes = 'error' | 'info' | 'success' | 'warning';
+export interface NotificationProps {
+    content: string;
+    href?: string;
+    onClose: () => void;
+    sx?: string;
+    title: string;
+    type: NotificationTypes;
+}
+export declare const Notification: ({ content, href, onClose, sx, title, type, }: NotificationProps) => React.JSX.Element;
+export {};

package/dist/components/feedback/notification/notification.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Styles } from 'common';
+import { Box, Button, P } from 'components';
+import { AlertCircle, AlertOctogon, AlertTriangle, Close, Information, } from 'icons';
+export const Notification = ({ content, href, onClose, sx, title, type, }) => {
+    const iconLookup = {
+        error: React.createElement(AlertOctogon, { size: 24 }),
+        info: React.createElement(Information, { size: 24 }),
+        success: React.createElement(AlertCircle, { size: 24 }),
+        warning: React.createElement(AlertTriangle, { size: 24 }),
+    };
+    return (React.createElement(Wrapper, { as: href ? 'a' : 'output', href: href, "$dir": "column", "$gap": 8, "$sx": sx, "$type": type },
+        React.createElement(Box, { "$dir": "row", "$gap": 8, "$flex": 1 },
+            iconLookup[type],
+            React.createElement(P, { as: "span", "$semiBold": true }, title),
+            React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: onClose, sx: "margin-left: auto;", type: "special" })),
+        React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 4 },
+            React.createElement(P, { as: "span", sx: "padding-left: 32px;" }, content))));
+};
+const Wrapper = styled.output `
+  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/dist/components/feedback/notification/notificition.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { NotificationProps } from './notification';
+declare const meta: Meta;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NotificationProps>;
+export default meta;

package/dist/components/feedback/notification/notificition.stories.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Notification } from './notification';
+const meta = {
+    title: 'Feedback/Notification',
+};
+const Story = (args) => (React.createElement(Notification, { sx: "max-width: 480px;", ...args }));
+export const Default = Story.bind({});
+Default.argTypes = {
+    content: {
+        type: 'string',
+    },
+    href: {
+        type: 'string',
+    },
+    title: {
+        type: 'string',
+    },
+    type: {
+        type: 'string',
+        options: ['error', 'info', 'success', 'warning'],
+        control: 'select',
+    },
+};
+Default.args = {
+    content: 'Monotonectally syndicate multifunctional functionalities and low-risk high-yield infrastructures. Continually revolutionize functional channels after user-centric imperatives.',
+    href: '',
+    title: 'Notification title.',
+    type: 'success',
+};
+export default meta;

package/dist/components/feedback/progress/index.d.ts

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

package/dist/components/feedback/progress/index.js

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

package/dist/components/feedback/progress/progress.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+type ProgressType = 'compact' | 'detailed';
+export interface ProgressProps {
+    hasError?: boolean;
+    hasIcon?: boolean;
+    /**
+     * @param progress a percentage until complete
+     */
+    progress: number;
+    subtitle?: string;
+    sx?: string;
+    title?: string;
+    type?: ProgressType;
+}
+export declare const Progress: ({ hasError, progress, subtitle, sx, title, type, }: ProgressProps) => React.JSX.Element;
+export {};

package/dist/components/feedback/progress/progress.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import styled from 'styled-components';
+import { colorReference } from 'common';
+import { Box, P } from 'components';
+import { CheckmarkCircle, Checkmarks, Close, MinusCircle, Pause } from 'icons';
+export const Progress = ({ hasError, progress, subtitle, sx, title, type, }) => {
+    const isComplete = !hasError && progress > 99;
+    const isDetailed = type === 'detailed';
+    const percent = hasError || isComplete ? 100 : progress;
+    const displayPercent = hasError ? '-' : percent + '%';
+    const color = hasError ? 'red-4' : isComplete ? 'green-3' : 'primary-blue-2';
+    const gradientColors = hasError
+        ? {
+            start: 'var(--color-red-6)',
+            end: 'var(--color-red-4)',
+            empty: 'var(--color-red-8)',
+            bg: 'var(--color-red-9)',
+        }
+        : isComplete
+            ? {
+                start: 'var(--color-green-5)',
+                end: 'var(--color-green-3)',
+                empty: 'var(--color-green-8)',
+                bg: 'var(--color-green-9)',
+            }
+            : {
+                start: '#abcfed',
+                end: 'var(--color-primary-blue-2)',
+                empty: 'var(--color-primary-blue-3)',
+                bg: 'var(--color-primary-blue-4)',
+            };
+    const icon = hasError ? (React.createElement(Close, { size: 24, color: color })) : isComplete ? (React.createElement(Checkmarks, { size: 24, color: color })) : (React.createElement(Pause, { size: 24, color: color }));
+    return (React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 16, sx: sx },
+        isDetailed && (React.createElement(IconWrapper, { "$completedDegree": Math.round(percent * 3.6), "$gradientColors": gradientColors },
+            React.createElement(IconInnerWrapper, { "$bg": gradientColors.bg }, icon))),
+        React.createElement(Box, { "$dir": "column", "$flex": 1, "$gap": 8 },
+            React.createElement(Box, null,
+                title && (React.createElement(P, { "$color": "grey-2", "$fontSize": 14, "$lineHeight": 20 }, title)),
+                isComplete && (React.createElement(CheckmarkCircle, { color: "green-3", size: 24, sx: "margin-left: auto;" })),
+                hasError && (React.createElement(MinusCircle, { color: "red-4", size: 24, sx: "margin-left: auto;" }))),
+            React.createElement(BarWrapper, null,
+                React.createElement(Bar, { "$color": colorReference[color], "$percent": percent })),
+            subtitle && (React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle))),
+        isDetailed && (React.createElement(P, { "$color": "grey-4", "$textAlign": "center", sx: "width: 72px;" }, displayPercent))));
+};
+const BarWrapper = styled.div `
+  position: relative;
+  width: 100%;
+  height: 12px;
+  border-radius: 32px;
+  background-color: var(--color-grey-8);
+`;
+const Bar = styled.div `
+  width: ${({ $percent }) => $percent}%;
+  height: 12px;
+  background-color: ${({ $color }) => $color};
+  border-radius: 32px;
+`;
+const IconWrapper = styled.div `
+  position: relative;
+  display: block;
+  width: 45px;
+  height: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: conic-gradient(
+    ${({ $gradientColors }) => $gradientColors.start},
+    ${({ $gradientColors }) => $gradientColors.end}
+      ${({ $completedDegree }) => $completedDegree}deg,
+    ${({ $gradientColors }) => $gradientColors.empty}
+      ${({ $completedDegree }) => $completedDegree}deg 360deg
+  );
+  border: 1px solid ${({ $gradientColors }) => $gradientColors.bg};
+`;
+const IconInnerWrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 39px;
+  width: 39px;
+  border-radius: 50%;
+  background-color: ${({ $bg }) => $bg};
+`;

package/dist/components/feedback/progress/progress.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ProgressProps } from './progress';
+declare const meta: Meta;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ProgressProps>;
+export default meta;

package/dist/components/feedback/progress/progress.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Progress } from './progress';
+const meta = {
+    title: 'Feedback/Progress Bar',
+    parameters: {
+        layout: 'centered',
+    },
+};
+const Story = (args) => (React.createElement(Progress, { sx: "min-width: 452px;", ...args }));
+export const Default = Story.bind({});
+Default.argTypes = {
+    hasError: {
+        type: 'boolean',
+    },
+    progress: {
+        type: 'number',
+        control: 'range',
+        step: 1,
+    },
+    type: {
+        options: ['compact', 'detailed'],
+        control: 'select',
+    },
+};
+Default.args = {
+    hasError: false,
+    progress: 52,
+    subtitle: 'Support Text',
+    title: 'Title label',
+    type: 'compact',
+};
+export default meta;

package/dist/components/feedback/toast/index.d.ts

@@ -0,0 +1,2 @@
+export { Toast } from './toast';
+export type { ToastProps } from './toast';

package/dist/components/feedback/toast/index.js

@@ -0,0 +1 @@
+export { Toast } from './toast';

package/dist/components/feedback/toast/toast.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type ToastTypes = 'error' | 'info' | 'success' | 'warning';
+export interface ToastProps {
+    content: string;
+    href?: string;
+    onClose: () => void;
+    type: ToastTypes;
+}
+export declare const Toast: ({ content, href, onClose, type }: ToastProps) => React.JSX.Element;
+export {};

package/dist/components/feedback/toast/toast.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Styles } from 'common';
+import { Button, P } from 'components';
+import { AlertCircle, AlertOctogon, AlertTriangle, Close, Information, } from 'icons';
+export const Toast = ({ content, href, onClose, type }) => {
+    const iconLookup = {
+        error: React.createElement(AlertOctogon, { size: 24 }),
+        info: React.createElement(Information, { size: 24 }),
+        success: React.createElement(AlertCircle, { size: 24 }),
+        warning: React.createElement(AlertTriangle, { size: 24 }),
+    };
+    return (React.createElement(Wrapper, { as: "output", "$align": "center", "$dir": "row", "$gap": 8, "$type": type },
+        iconLookup[type],
+        React.createElement(P, { as: "span" }, content),
+        href && (React.createElement(P, { sx: "padding-left: 8px;", as: "a", href: href, "$color": "primary-blue-2" }, "View")),
+        React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: onClose, type: "special" })));
+};
+const Wrapper = styled.output `
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  width: 99vw;
+  max-width: 476px;
+  box-sizing: border-box;
+  padding: 12px 16px;
+  display: flex;
+  box-shadow: var(--elevation-2);
+  border-radius: var(--small);
+
+  &::before {
+    position: absolute;
+    content: '';
+    left: 0px;
+    width: 4px;
+    height: 100%;
+    background-color: ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-4)'
+    : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+            ? 'var(--color-green-3)'
+            : 'var(--color-orange-5)'};
+    border-radius: 8px 0px 0px 8px;
+  }
+
+  & > 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 {
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  button {
+    padding: 0px;
+    margin-left: auto;
+  }
+
+  ${Styles.flex}
+`;

package/dist/components/feedback/toast/toast.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ToastProps } from './toast';
+declare const meta: Meta;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ToastProps>;
+export default meta;