@soul-refiner/design-system 0.2.111 → 0.2.113

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/actions/toggle/toggle.js

@@ -5,8 +5,8 @@ import { Box, P } from '../../';
 export const Toggle = ({ checked, label, onChange }) => {
     const status = checked === undefined ? 'indeterminate' : checked ? 'checked' : 'unchecked';
     return (React.createElement(Box, { "$align": "center", "$gap": 8 },
-        React.createElement(Wrapper, { as: "label", onClick: onChange },
-            React.createElement(Input, { checked: !!checked, onChange: onChange, type: "checkbox" }),
+        React.createElement(Wrapper, { as: "label", onChange: onChange },
+            React.createElement(Input, { checked: !!checked, type: "checkbox" }),
             React.createElement(Slider, { "$status": status })),
         label && React.createElement(P, { "$fontSize": 14 }, label)));
 };

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/package.json

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