@soul-refiner/design-system 0.2.112 → 0.2.114

package/dist/components/actions/dropdown/dropdown.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { COLORS } from 'common';
-type NativeProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onBlur' | 'onBlurCapture' | 'onClick' | 'onChange' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'>;
+type NativeProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'children' | 'onBlur' | 'onBlurCapture' | 'onClick' | 'onChange' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseOut' | 'onMouseOver'>;
 export interface DropdownProps extends NativeProps, React.PropsWithChildren {
     checkbox?: boolean;
     closeOnChange?: boolean;

package/dist/components/card/feature/feature.d.ts

@@ -4,9 +4,10 @@ export interface FeatureCardProps {
     editable?: boolean;
     href?: string;
     image: string;
+    onDelete?: () => void;
     onSave?: (title: string, content: string) => void;
     sx?: string;
     title: string;
     uploadModal?: React.ReactElement;
 }
-export declare const FeatureCard: ({ content, editable, href, image, onSave, sx, title, uploadModal, }: FeatureCardProps) => React.JSX.Element;
+export declare const FeatureCard: ({ content, editable, href, image, onDelete, onSave, sx, title, uploadModal, }: FeatureCardProps) => React.JSX.Element;

package/dist/components/card/feature/feature.js

@@ -2,8 +2,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Box, Button, Modal } from '../../';
-import { Camera, Checkmark, Close, Pencil } from '../../../icons';
-export const FeatureCard = ({ content = '', editable, href, image, onSave, sx, title = '', uploadModal, }) => {
+import { Camera, Checkmark, Close, Pencil, Trash } from '../../../icons';
+export const FeatureCard = ({ content = '', editable, href, image, onDelete, onSave, sx, title = '', uploadModal, }) => {
     const [editing, setEditing] = React.useState(false);
     const [editingTitle, setTitle] = React.useState(() => title);
     const [editingContent, setContent] = React.useState(() => content);
@@ -60,13 +60,24 @@ export const FeatureCard = ({ content = '', editable, href, image, onSave, sx, t
                   &:hover {
                     background-color: var(--color-grey-10);
                   }
-                ` })))))));
+                ` }),
+                    onDelete && (React.createElement(Trash, { onClick: onDelete, sx: `
+                    padding: 8px;
+                    border-radius: 4px;
+                    cursor: pointer;
+                    background-color: var(--color-white); 
+                    box-shadow: var(--elevation-1);
+                    &:hover {
+                      background-color: var(--color-grey-10);
+                    }
+                  ` }))))))));
 };
 const Wrapper = styled.div `
   text-decoration: none;
 `;
 const Figure = styled.figure `
   max-width: 352px;
+  box-sizing: border-box;
   display: flex;
   flex-flow: column nowrap;
   gap: 16px;
@@ -145,6 +156,12 @@ const Content = styled.figcaption `
   font-weight: 400;
   line-height: 20px;
   letter-spacing: -0.084px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
 `;
 const EditTitle = styled.input `
   width: calc(100% - 24px);

package/dist/components/card/price/price.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
+import { DropdownOptionProps } from '../../';
 export interface PriceCardProps {
     actions: React.ReactElement;
     content: string;
+    dotsActions?: (Omit<DropdownOptionProps, 'selected'> | 'break')[];
     features: string[];
     featureTitle: string;
+    label?: string;
     price: string;
     title: string;
 }
-export declare const PriceCard: ({ actions, content, featureTitle, features, price, title, }: PriceCardProps) => React.JSX.Element;
+export declare const PriceCard: ({ actions, content, dotsActions, featureTitle, features, label, price, title, }: PriceCardProps) => React.JSX.Element;

package/dist/components/card/price/price.js

@@ -1,11 +1,24 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Box, H, P } from '../../';
-import { Checkmark } from '../../../icons';
-export const PriceCard = ({ actions, content, featureTitle, features, price, title, }) => {
+import { Box, Button, H, P, Dropdown } from '../../';
+import { Checkmark, EllipsisHorizontal } from '../../../icons';
+export const PriceCard = ({ actions, content, dotsActions, featureTitle, features, label, price, title, }) => {
     const id = React.useId();
     return (React.createElement(Price, null,
+        dotsActions && !!dotsActions.length && (React.createElement(Dropdown, { className: "dot-dropdown", hasArrow: true, maintainState: false, offset: [0, 32], options: dotsActions, sx: `
+          position: absolute; 
+          top: 6px; 
+          right: 6px; 
+          display: none;
+          `, trigger: React.createElement(Button, { icon: React.createElement(EllipsisHorizontal, null), showChevron: false, type: "outlined", size: "small", className: "icon" }), onClick: (e) => e.preventDefault() })),
+        label && (React.createElement(Box, { "$justify": "center", sx: `
+            width: 100%;
+            position: absolute;
+            z-index: -1;
+            top: -33px;` },
+            React.createElement(Label, null,
+                React.createElement(P, { as: "span", "$fontSize": 12, "$lineHeight": 16, "$mediumBold": true, "$textClampLines": 1 }, label)))),
         React.createElement(Box, { "$align": "stretch", "$display": "flex", "$dir": "column", "$gap": 24, sx: `
           padding: 24px 48px; 
           background-color: var(--color-grey-10); 
@@ -26,6 +39,8 @@ export const PriceCard = ({ actions, content, featureTitle, features, price, tit
                     React.createElement(P, { "$fontSize": 14, "$lineHeight": 20 }, item))))))));
 };
 const Price = styled.figure `
+  position: relative;
+  z-index: 1;
   margin: 0px;
   padding: 0px;
   width: 280px;
@@ -33,11 +48,25 @@ const Price = styled.figure `
   border-radius: 16px;
   box-shadow: var(--elevation-2);
   user-select: none;
+  border: 1px solid transparent;
 
   &:hover {
     border: 1px solid var(--color-primary-blue-3);
+
+    .dot-dropdown {
+      display: flex;
+    }
   }
 `;
+const Label = styled.div `
+  max-width: calc(100% - 32px);
+  box-sizing: border-box;
+  padding: 8px 24px;
+  border-radius: 16px 16px 0px 0px;
+  background-color: var(--color-grey-10);
+  box-shadow: var(--elevation-2);
+  border-bottom: 1px solid var(--color-grey-9);
+`;
 const Divider = styled.div `
   height: 1px;
   width: 100%;

package/dist/components/custom/courses_selection/courses_selection.d.ts

@@ -17,6 +17,7 @@ export interface CoursesSelectionProps extends NativeProps, React.PropsWithChild
     courseIsSelected: Record<string, boolean>;
     setCourseIsSelected: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
     subtitle: string;
+    onlyOneCanBeSelected: boolean;
 }
-export declare const CoursesSelection: ({ closeOnChange, closeOnBlur, disabled, offset, sx, containerSx, courses, label, courseIsSelected, setCourseIsSelected, subtitle, ...rest }: CoursesSelectionProps) => React.JSX.Element;
+export declare const CoursesSelection: ({ closeOnChange, closeOnBlur, disabled, offset, sx, containerSx, courses, label, courseIsSelected, setCourseIsSelected, subtitle, onlyOneCanBeSelected, ...rest }: CoursesSelectionProps) => React.JSX.Element;
 export {};

package/dist/components/custom/courses_selection/courses_selection.js

@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { Button, P, Box, H } from '../..';
 import { GraduationCap, Search as SearchIcon, Plus, Close, } from '../../../icons';
-export const CoursesSelection = ({ closeOnChange = true, closeOnBlur = true, disabled = false, offset = [0, 0], sx, containerSx, courses, label, courseIsSelected, setCourseIsSelected, subtitle, ...rest }) => {
+export const CoursesSelection = ({ closeOnChange = true, closeOnBlur = true, disabled = false, offset = [0, 0], sx, containerSx, courses, label, courseIsSelected, setCourseIsSelected, subtitle, onlyOneCanBeSelected = false, ...rest }) => {
     const wrapperRef = React.useRef(null);
     const [open, setOpen] = React.useState(false);
     React.useEffect(() => {
@@ -33,10 +33,14 @@ export const CoursesSelection = ({ closeOnChange = true, closeOnBlur = true, dis
         React.createElement(P, { "$color": "grey-4", "$fontSize": 14, sx: "margin-top: 32px;" }, subtitle),
         React.createElement(Button, { type: "dropdown", isDropdownOpen: open, onClick: handleOpen, customDropdownIcon: SearchIcon, sx: "margin-top: 32px;" }, label),
         open && (React.createElement(Container, { "$offset": offset, "$sx": containerSx }, courses.map((course) => (React.createElement(OptionWrapper, { key: course.id, "$disabled": disabled, onClick: () => {
-                setCourseIsSelected({
-                    ...courseIsSelected,
-                    [course.id]: true,
-                });
+                setCourseIsSelected(onlyOneCanBeSelected
+                    ? {
+                        [course.id]: true,
+                    }
+                    : {
+                        ...courseIsSelected,
+                        [course.id]: true,
+                    });
                 if (closeOnChange) {
                     setOpen(false);
                 }

package/dist/components/input/calendar/calendar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export interface CalendarInputProps {
-    selectedDate: Date;
+    selectedDate: Date | null;
     onSelect: (value: Date) => void;
 }
 export declare const CalendarInput: ({ selectedDate, onSelect: parentOnSelect, }: CalendarInputProps) => React.JSX.Element;

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

@@ -15,10 +15,10 @@ export const CalendarInput = ({ selectedDate, onSelect: parentOnSelect, }) => {
     firstOfMonth.setDate(1);
     const pickerRef = React.useRef(null);
     const [show, setShow] = React.useState(false);
-    const [displayDate, setDisplayDate] = React.useState(() => selectedDate.toDateString());
-    const [componentSelectedDate, setComponentSelectedDate] = React.useState(() => selectedDate.toDateString());
+    const [displayDate, setDisplayDate] = React.useState(() => selectedDate?.toDateString() || new Date().toDateString());
+    const [componentSelectedDate, setComponentSelectedDate] = React.useState(() => selectedDate?.toDateString() || new Date().toDateString());
     React.useEffect(() => {
-        setComponentSelectedDate(selectedDate.toDateString());
+        setComponentSelectedDate(selectedDate?.toDateString() || new Date().toDateString());
     }, [selectedDate]);
     const handleShow = () => setShow((prev) => !prev);
     const handleBlur = (event) => {
@@ -56,11 +56,11 @@ export const CalendarInput = ({ selectedDate, onSelect: parentOnSelect, }) => {
         onSelect(new Date(`${month}-${day}-${year}`));
     };
     const handleCancel = () => {
-        setComponentSelectedDate(selectedDate.toDateString());
+        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
+    const [month, day, year] = (selectedDate || new Date())
         .toLocaleString('default', {
         year: '2-digit',
         month: '2-digit',
@@ -69,7 +69,7 @@ export const CalendarInput = ({ selectedDate, onSelect: parentOnSelect, }) => {
         .split('/');
     return (React.createElement(Wrapper, { onBlurCapture: handleBlur, ref: pickerRef, tabIndex: 0 },
         React.createElement(InputWrapper, null,
-            React.createElement(Input, { value: `${month} / ${day} / ${year}`, onFocus: handleShow, style: { letterSpacing: '1px', fontSize: '16px' }, readOnly: true }),
+            React.createElement(Input, { value: selectedDate ? `${month} / ${day} / ${year}` : '', onFocus: handleShow, style: { letterSpacing: '1px', fontSize: '16px' }, readOnly: true }),
             React.createElement(CalendarIcon, null)),
         show && (React.createElement(DateSelector, null,
             React.createElement(InnerWrapper, null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.112",
+  "version": "0.2.114",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {