@soul-refiner/design-system 2.0.0-alpha.30 → 2.0.0-alpha.4

package/dist/src/components/iconography/avatar/icons/declined.js

@@ -0,0 +1,8 @@
+import React__default from 'react';
+
+const Declined = () => (React__default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#F34436", rx: "8" }),
+    React__default.createElement("path", { fill: "#fff", d: "M10.47 9.015 12 7.479c.402-.404.4-1.056-.005-1.457a1.034 1.034 0 0 0-1.46.005L9.013 7.555 7.464 6.003A1.034 1.034 0 0 0 6.004 6 1.028 1.028 0 0 0 6 7.457l1.556 1.559-1.522 1.528c-.402.403-.4 1.056.004 1.457.404.4 1.058.399 1.46-.005l1.515-1.52 1.486 1.489a1.034 1.034 0 0 0 1.46.003 1.028 1.028 0 0 0 .003-1.457L10.47 9.015Z" }),
+    React__default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+export { Declined };

package/dist/src/components/iconography/avatar/icons/default.js

@@ -0,0 +1,7 @@
+import React__default from 'react';
+
+const Default = () => (React__default.createElement("svg", { viewBox: "0 0 228 228", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.createElement("rect", { width: "228", height: "228", fill: "#D0D2D6" }),
+    React__default.createElement("path", { d: "M114 114C104.513 114 96.3906 110.622 89.6344 103.866C82.8781 97.1094 79.5 88.9875 79.5 79.5C79.5 70.0125 82.8781 61.8906 89.6344 55.1344C96.3906 48.3781 104.513 45 114 45C123.488 45 131.609 48.3781 138.366 55.1344C145.122 61.8906 148.5 70.0125 148.5 79.5C148.5 88.9875 145.122 97.1094 138.366 103.866C131.609 110.622 123.488 114 114 114ZM45 183V158.85C45 153.963 46.2593 149.469 48.7778 145.369C51.2905 141.275 54.6312 138.15 58.8 135.994C67.7125 131.538 76.7688 128.194 85.9688 125.963C95.1688 123.738 104.513 122.625 114 122.625C123.488 122.625 132.831 123.738 142.031 125.963C151.231 128.194 160.288 131.538 169.2 135.994C173.369 138.15 176.71 141.275 179.222 145.369C181.741 149.469 183 153.963 183 158.85V183H45Z", fill: "white" })));
+
+export { Default };

package/dist/src/components/iconography/avatar/icons/focus.js

@@ -0,0 +1,8 @@
+import React__default from 'react';
+
+const Focus = () => (React__default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#fff", rx: "8" }),
+    React__default.createElement("path", { fill: "#A246C1", d: "M9 16A7 7 0 1 1 9 2a7 7 0 0 1 0 14Zm0-2.333a4.667 4.667 0 1 0 0-9.334 4.667 4.667 0 0 0 0 9.334Zm0-2.334a2.333 2.333 0 1 1 0-4.666 2.333 2.333 0 0 1 0 4.666Z" }),
+    React__default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+export { Focus };

package/dist/src/components/iconography/avatar/icons/locked.js

@@ -0,0 +1,8 @@
+import React__default from 'react';
+
+const Locked = () => (React__default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#B3B7BC", rx: "8" }),
+    React__default.createElement("path", { fill: "#4A4F55", d: "M9.023 4.594H8.98c-1.221 0-2.21.973-2.21 2.175V7.89h1.116V6.78c0-.6.494-1.087 1.105-1.087h.022c.61 0 1.105.486 1.105 1.087v1.11h1.116V6.77c0-1.203-.989-2.176-2.21-2.176ZM6.77 7.89h1.116V8.99H6.769V7.89Zm3.348 0h1.116V8.99h-1.116V7.89Zm0 1.099H6.77c-.616 0-1.116.492-1.116 1.099v1.648c0 .91.742 1.648 1.655 1.648h3.386c.914 0 1.655-.732 1.655-1.648v-1.648c0-.607-.5-1.1-1.116-1.1h-1.116Z" }),
+    React__default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+export { Locked };

package/dist/src/components/iconography/avatar/icons/offline.js

@@ -0,0 +1,8 @@
+import React__default from 'react';
+
+const Offline = () => (React__default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#4A4F55", rx: "8" }),
+    React__default.createElement("path", { fill: "#B3B7BC", d: "M9 12.3a3.3 3.3 0 1 0 0-6.6 3.3 3.3 0 0 0 0 6.6Z" }),
+    React__default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+export { Offline };

package/dist/src/components/iconography/avatar/icons/online.js

@@ -0,0 +1,7 @@
+import React__default from 'react';
+
+const Online = () => (React__default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#3CC260", rx: "8" }),
+    React__default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+export { Online };

package/dist/src/components/iconography/avatar/icons/subscribed.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+
+const Subscribed = () => (React__default.createElement("svg", { fill: "none", viewBox: "0 0 20 20" },
+    React__default.createElement("path", { fill: "#fff", fillRule: "evenodd", d: "M19.088 9.994a9.088 9.088 0 1 1-18.176 0 9.088 9.088 0 0 1 18.176 0Z", clipRule: "evenodd" }),
+    React__default.createElement("path", { fill: "url(#a)", d: "M17.088 9.994a7.088 7.088 0 1 1-14.176 0 7.088 7.088 0 0 1 14.176 0Z" }),
+    React__default.createElement("path", { fill: "#fff", d: "M9.25 5h1.5v.936c.338.048.648.134.927.26.458.202.813.485 1.067.847.255.362.386.781.394 1.258h-1.665a.976.976 0 0 0-.413-.734c-.244-.175-.575-.262-.992-.262-.283 0-.523.039-.718.117a1.01 1.01 0 0 0-.45.316.748.748 0 0 0-.152.461.645.645 0 0 0 .092.375c.07.107.165.2.285.278.12.075.26.141.418.199.157.054.326.101.505.14l.738.172c.359.078.688.183.988.313.299.13.559.29.778.48a2.003 2.003 0 0 1 .698 1.559c-.003.49-.131.914-.385 1.273-.252.357-.615.634-1.091.832-.302.125-.643.21-1.024.255V15h-1.5v-.942a4.002 4.002 0 0 1-.923-.242c-.49-.198-.872-.49-1.148-.879-.273-.39-.416-.873-.429-1.449h1.681c.019.269.098.492.237.672.142.177.33.311.566.402.238.089.507.133.806.133.294 0 .55-.041.767-.125.219-.083.389-.199.509-.347a.79.79 0 0 0 .18-.512c0-.18-.054-.33-.164-.453a1.248 1.248 0 0 0-.473-.313 4.908 4.908 0 0 0-.759-.234l-.894-.219c-.693-.164-1.24-.42-1.641-.77-.402-.348-.601-.818-.598-1.41-.003-.484.13-.907.397-1.269.27-.362.64-.645 1.111-.848.242-.104.5-.181.775-.232V5Z" }),
+    React__default.createElement("defs", null,
+        React__default.createElement("radialGradient", { id: "a", cx: "0", cy: "0", r: "1", gradientTransform: "rotate(-49.924 18.2 -.497) scale(14.7338 19.4196)", gradientUnits: "userSpaceOnUse" },
+            React__default.createElement("stop", { stopColor: "#09B3A1" }),
+            React__default.createElement("stop", { offset: "1", stopColor: "#3AC15E" })))));
+
+export { Subscribed };

package/dist/src/components/iconography/icon/icon.js

@@ -0,0 +1,13 @@
+"use client";
+import React__default from 'react';
+import styled from 'styled-components';
+import { colorReference } from '../../../common/colors.js';
+
+const Icon = ({ as, children, color = 'grey-3', size = 16, sx, ...rest }) => {
+    return (React__default.createElement(SVG, { as: as, width: size, height: size, viewBox: "0 0 16 16", fill: colorReference[color], xmlns: "http://www.w3.org/2000/svg", "$sx": sx, ...rest }, children));
+};
+const SVG = styled.svg.withConfig({ displayName: "SVG", componentId: "sc-byxrsa" }) `
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+export { Icon };

package/dist/src/components/input/calendar/calendar.js

@@ -0,0 +1,261 @@
+"use client";
+import React__default from 'react';
+import styled from 'styled-components';
+import { MONTHS, WEEKDAYS } from '../../../common/date.js';
+import { Button } from '../../actions/button/button.js';
+import { P } from '../../atoms/typography/paragraph.js';
+import { ChevronLeft } from '../../../icons/arrow/chevron_left.js';
+import { ChevronRight } from '../../../icons/arrow/chevron_right.js';
+import { Calendar as Calendar$1 } from '../../../icons/time/calendar.js';
+import { buildCalendar, zeroPad } from '../../../utils/date.js';
+
+const CalendarInput = ({ selectedDate, onSelect: parentOnSelect, disablePastDates, }) => {
+    const today = new Date();
+    today.setHours(0);
+    today.setMinutes(0);
+    today.setSeconds(0);
+    today.setMilliseconds(0);
+    const firstOfMonth = new Date(today);
+    firstOfMonth.setDate(1);
+    const pickerRef = React__default.useRef(null);
+    const [show, setShow] = React__default.useState(false);
+    const [displayDate, setDisplayDate] = React__default.useState(() => selectedDate?.toDateString() || new Date().toDateString());
+    const [componentSelectedDate, setComponentSelectedDate] = React__default.useState(() => selectedDate?.toDateString() || new Date().toDateString());
+    React__default.useEffect(() => {
+        setComponentSelectedDate(selectedDate?.toDateString() || new Date().toDateString());
+    }, [selectedDate]);
+    const handleShow = () => setShow((prev) => !prev);
+    const handleBlur = (event) => {
+        if (pickerRef?.current &&
+            !pickerRef?.current?.contains(event.relatedTarget)) {
+            setShow(false);
+        }
+    };
+    const handlePreviousMonth = () => {
+        setDisplayDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() - 1);
+            return newDate.toDateString();
+        });
+    };
+    const handleNextMonth = () => {
+        setDisplayDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() + 1);
+            return newDate.toDateString();
+        });
+    };
+    const onSelect = (newDate) => {
+        setComponentSelectedDate(newDate.toDateString());
+    };
+    const handleApply = () => {
+        parentOnSelect(new Date(componentSelectedDate));
+        setShow(false);
+    };
+    const handleClick = (event) => {
+        const target = event.target;
+        const day = target.getAttribute('data-day');
+        const month = target.getAttribute('data-month');
+        const year = target.getAttribute('data-year');
+        onSelect(new Date(`${month}-${day}-${year}`));
+    };
+    const handleCancel = () => {
+        setComponentSelectedDate(selectedDate?.toDateString() || new Date().toDateString());
+        setShow(false);
+    };
+    const calendar = buildCalendar(new Date(displayDate).getMonth() + 1, new Date(displayDate).getFullYear());
+    const [month, day, year] = (selectedDate || new Date())
+        .toLocaleString('default', {
+        year: '2-digit',
+        month: '2-digit',
+        day: '2-digit',
+    })
+        .split('/');
+    return (React__default.createElement(Wrapper, { onBlurCapture: handleBlur, ref: pickerRef, tabIndex: 0 },
+        React__default.createElement(InputWrapper, null,
+            React__default.createElement(Input, { value: selectedDate ? `${month} / ${day} / ${year}` : '', onFocus: handleShow, style: { letterSpacing: '1px', fontSize: '16px' }, readOnly: true }),
+            React__default.createElement(Calendar$1, null)),
+        show && (React__default.createElement(DateSelector, null,
+            React__default.createElement(InnerWrapper, null,
+                React__default.createElement("div", null,
+                    React__default.createElement(MonthBar, null,
+                        React__default.createElement(Arrow, { onClick: handlePreviousMonth },
+                            React__default.createElement(ChevronLeft, { size: 24 })),
+                        React__default.createElement(P, null, `${Object.values(MONTHS)[Math.max(0, Math.min(new Date(displayDate).getMonth(), 11))]} ${new Date(displayDate).getFullYear()}`),
+                        React__default.createElement(Arrow, { onClick: handleNextMonth },
+                            React__default.createElement(ChevronRight, { size: 24 }))),
+                    React__default.createElement(WeekdayWrapper, null, Object.values(WEEKDAYS).map((day) => (React__default.createElement(P, { key: day }, day)))),
+                    React__default.createElement(Calendar, null, calendar.map((week, index) => {
+                        return (React__default.createElement(Week, { key: 'week-' + index.toString(36) }, week.map((day, dayIndex) => {
+                            const dateObj = new Date(`${day[1]}-${day[2]}-${day[0]}`);
+                            const isPastDate = today.getTime() - dateObj.getTime() > 0;
+                            const isCurrMonth = day[1] !==
+                                zeroPad(new Date(displayDate).getMonth() + 1, 2);
+                            const isNotCurrent = disablePastDates
+                                ? isPastDate
+                                : isCurrMonth;
+                            const isToday = Math.abs(dateObj.getTime() - today.getTime()) < 0.5;
+                            const isSelected = new Date(componentSelectedDate).getTime() ===
+                                dateObj.getTime();
+                            return (React__default.createElement(Day, { className: `${isToday ? 'today' : ''}${isNotCurrent ? ' not-current' : ''}${isSelected ? ' selected' : ''}`.trim(), "data-day": day[2], "data-month": day[1], "data-year": day[0], key: 'day-' + dayIndex.toString(36), onClick: handleClick }, `${day[2]}`.startsWith('0')
+                                ? `${day[2]}`[1]
+                                : day[2]));
+                        })));
+                    })),
+                    React__default.createElement(BottomWrapper, null,
+                        React__default.createElement(Button, { onClick: handleCancel, size: "small", sx: "width: 80px;", type: "outlined" }, "Cancel"),
+                        React__default.createElement(Button, { onClick: handleApply, size: "small", sx: "width: 80px;" }, "Apply"))))))));
+};
+const Wrapper = styled.div.withConfig({ displayName: "Wrapper", componentId: "sc-1bmij7m" }) `
+  position: relative;
+  width: fit-content;
+  font-family: var(--font-inter);
+`;
+const DateSelector = styled.div.withConfig({ displayName: "DateSelector", componentId: "sc-4xgafl" }) `
+  transform: translateY(26px);
+  position: absolute;
+  z-index: 5;
+  background-color: #ffffff;
+  border-radius: 25px;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
+`;
+const InnerWrapper = styled.div.withConfig({ displayName: "InnerWrapper", componentId: "sc-16kqx5e" }) `
+  display: flex;
+  gap: 31px;
+  padding: 30px;
+  position: relative;
+  border-radius: 25px;
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: 24px;
+    height: 24px;
+    top: -12px;
+    left: 48px;
+    background-color: #ffffff;
+    transform: rotate(45deg);
+    box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
+  }
+`;
+const MonthBar = styled.div.withConfig({ displayName: "MonthBar", componentId: "sc-1e4yjc4" }) `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+  user-select: none;
+`;
+const Arrow = styled.button.withConfig({ displayName: "Arrow", componentId: "sc-16f2dwz" }) `
+  appearance: none;
+  border: none;
+  outline: none;
+  padding: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: transparent;
+
+  &:hover {
+    background-color: var(--color-primary-blue-2);
+    border-color: #ffffff;
+    svg {
+      fill: #ffffff;
+    }
+  }
+`;
+const WeekdayWrapper = styled.div.withConfig({ displayName: "WeekdayWrapper", componentId: "sc-3mbvr" }) `
+  display: flex;
+  gap: 32px;
+  user-select: none;
+`;
+const Calendar = styled.div.withConfig({ displayName: "Calendar", componentId: "sc-mttk00" }) `
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  margin: 32px 0px;
+  user-select: none;
+`;
+const Week = styled.div.withConfig({ displayName: "Week", componentId: "sc-1co45a6" }) `
+  display: flex;
+  gap: 32px;
+  border-radius: 24px;
+`;
+const Day = styled.button.withConfig({ displayName: "Day", componentId: "sc-c7n4tw" }) `
+  outline: none;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-family: var(--font-inter);
+  font-size: 16px;
+  line-height: 24px;
+
+  &.today {
+    color: var(--color-primary-blue-2);
+    font-weight: 600;
+  }
+
+  &.not-current {
+    color: var(--color-grey-9);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &.selected {
+    background-color: var(--color-primary-blue-2);
+    color: #ffffff;
+
+    &.not-current {
+      background-color: var(--color-blue-9);
+    }
+  }
+`;
+const BottomWrapper = styled.div.withConfig({ displayName: "BottomWrapper", componentId: "sc-1hmgkh4" }) `
+  display: flex;
+  justify-content: flex-end;
+  gap: 18px;
+`;
+const Input = styled.input.withConfig({ displayName: "Input", componentId: "sc-1cbof6a" }) `
+  max-width: 140px;
+  padding: 0px;
+  flex: 1;
+  font-family: var(--font-inter);
+  font-size: 14px;
+  color: var(--color-grey-3);
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  background-color: transparent;
+
+  &::placeholder {
+    color: var(--color-grey-6);
+  }
+`;
+const InputWrapper = styled.div.withConfig({ displayName: "InputWrapper", componentId: "sc-1sctm5q" }) `
+  width: fit-content;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 12px;
+  background-color: var(--color-blue-10);
+  border-radius: 8px;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: var(--color-grey-8);
+  }
+
+  &:focus-within {
+    border-color: var(--color-primary-blue-2);
+  }
+`;
+
+export { CalendarInput };

package/dist/src/components/input/checkbox/checkbox.js

@@ -0,0 +1,26 @@
+"use client";
+import React__default from 'react';
+import styled from 'styled-components';
+import { Styles } from '../../../common/styles.js';
+import { Checkmark } from '../../../icons/basic/checkmark.js';
+
+const Checkbox = ({ disabled, selected, sx, ...rest }) => {
+    return (React__default.createElement(Box, { "$align": "center", "$disabled": !!disabled, "$display": "flex", "$justify": "center", "$selected": selected, "$sx": sx, ...rest }, selected && React__default.createElement(Checkmark, { color: "white" })));
+};
+const Box = styled.div.withConfig({ displayName: "Box", componentId: "sc-1sakrq7" }) `
+  display: flex;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  ${({ $selected }) => $selected
+    ? `background-color: var(--color-primary-blue-2);
+    border: 1px solid var(--color-primary-blue-2);`
+    : 'border: 1px solid var(--color-grey-8);'}
+  ${Styles.flex}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+export { Checkbox };