@soul-refiner/design-system 0.2.94 → 0.2.96

package/dist/components/actions/button/button.js

@@ -30,7 +30,7 @@ export const Button = ({ as = 'button', children, disabled, fluid = false, href,
                 },
             };
     })?.[0];
-    const dropdownIcon = showChevron ? (isDropdownOpen === true ? (React.createElement(ChevronUp, { size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : isDropdownOpen === false ? (React.createElement(ChevronDown, { size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : undefined) : undefined;
+    const dropdownIcon = showChevron ? (isDropdownOpen === true ? (React.createElement(ChevronUp, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : isDropdownOpen === false ? (React.createElement(ChevronDown, { sx: "margin-left:auto;", size: size === 'large' ? LG_ICON_SIZE : SM_ICON_SIZE })) : undefined) : undefined;
     const padding = !!children
         ? size === 'large'
             ? LG_PADDING

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,10 +1,12 @@
 '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 },
+            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(Shadow, null,
                 React.createElement("img", { src: image, alt: "" })),
             React.createElement(Figcaption, null,
@@ -46,6 +48,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.94",
+  "version": "0.2.96",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {