@soul-refiner/design-system 0.2.95 → 0.2.97

package/dist/components/actions/dropdown/dropdown.js

@@ -125,7 +125,7 @@ const Container = styled.div `
   cursor: pointer;
   box-shadow: var(--elevation-2);
   border-radius: 8px;
-  overflow: scroll;
+  overflow: auto;
 
   & > div:first-of-type {
     border-radius: 8px 8px 0px 0px;

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

@@ -1,10 +1,12 @@
 import React from 'react';
+import { DropdownOptionProps } from '../../';
 export interface PersonCardProps {
     actions?: React.ReactElement | React.ReactElement[];
+    dotsActions?: (Omit<DropdownOptionProps, 'selected'> | 'break')[];
     href: string;
     image: string;
-    subtitle: string;
+    subtitle: string | React.ReactElement;
     sx?: string;
     title: string;
 }
-export declare const PersonCard: ({ actions, href, image, subtitle, sx, title, }: PersonCardProps) => React.JSX.Element;
+export declare const PersonCard: ({ actions, dotsActions, href, image, subtitle, sx, title, }: PersonCardProps) => React.JSX.Element;

package/dist/components/card/person/person.js

@@ -1,12 +1,14 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
-import { Box, H, P } from '../../';
-export const PersonCard = ({ actions, href, image, subtitle, sx, title, }) => {
-    return (React.createElement(Wrapper, { "$image": image, as: href ? 'a' : 'div' },
+import { Box, Button, Dropdown, H, P } from '../../';
+import { EllipsisHorizontal } from '../../../icons';
+export const PersonCard = ({ actions, dotsActions, href, image, subtitle, sx, title, }) => {
+    return (React.createElement(Wrapper, { "$image": image, as: href ? 'a' : 'div', href: href },
         React.createElement(Person, { "$sx": sx },
-            React.createElement(Shadow, null,
-                React.createElement("img", { src: image, alt: "" })),
+            dotsActions && !!dotsActions.length && (React.createElement(Dropdown, { containerSx: "", hasArrow: true, maintainState: false, onClick: (e) => e.preventDefault(), options: dotsActions, sx: "position: absolute; top: 8px; right: 8px; z-index: 24; display: none;", trigger: React.createElement(Button, { className: "icon", icon: React.createElement(EllipsisHorizontal, null), onClick: (event) => event.stopPropagation(), showChevron: false, size: "small", type: "outlined" }) })),
+            React.createElement("img", { src: image, alt: "" }),
+            React.createElement(Shadow, null),
             React.createElement(Figcaption, null,
                 React.createElement(H, { as: "span", "$bold": true, "$color": "white", "$fontSize": 24, "$lineHeight": 36 }, title),
                 React.createElement(P, { as: "span", "$color": "white", "$fontSize": 14, "$lineHeight": 20 }, subtitle),
@@ -20,6 +22,9 @@ const Wrapper = styled.div `
   cursor: pointer;
 
   img {
+    position: absolute;
+    top: 0px;
+    left: 0px;
     width: 100%;
     height: 100%;
     border-radius: 16px;
@@ -46,6 +51,10 @@ const Person = styled.figure `
   justify-content: flex-end;
   flex-direction: column;
 
+  &:hover > div {
+    display: initial;
+  }
+
   ${({ $sx }) => ($sx ? $sx : '')};
 `;
 const Figcaption = styled.figcaption `

package/package.json

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