@soul-refiner/design-system 0.2.61 → 0.2.63

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

@@ -53,6 +53,7 @@ const Components = () => ({
     text: Text,
 });
 const base = css `
+  font-family: var(--font-inter);
   display: flex;
   border-radius: ${({ $roundness }) => $roundness === 'large'
     ? '32px'
@@ -126,12 +127,16 @@ const Secondary = styled(Box) `
 const Outlined = styled(Box) `
   background-color: var(--color-white);
   color: var(--color-grey-3);
-  border: 1px solid var(--color-grey-8);
+  border: 1px solid var(--color-white);
 
   &:active {
     background-color: var(--color-grey-8);
   }
 
+  &:hover {
+    border: 1px solid var(--color-grey-8);
+  }
+
   ${base}
   ${Styles.flex}
   ${Styles.padding}

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

@@ -7,8 +7,9 @@ import { PriceCardProps } from './price';
 import { RegularCardProps } from './regular';
 import { VideoEpisodeCardProps } from './video';
 import { WrittenEpisodeCardProps } from './written';
-type CardType = 'action' | 'audio-episode' | 'feature' | 'person' | 'price' | 'regular' | 'video-episode' | 'written-episode';
-export type CardProps = (ActionCardProps | AudioEpisodeCardProps | FeatureCardProps | PersonCardProps | PriceCardProps | RegularCardProps | VideoEpisodeCardProps | WrittenEpisodeCardProps) & {
+import { MeetingCardCardProps } from './meeting';
+type CardType = 'action' | 'audio-episode' | 'feature' | 'person' | 'price' | 'regular' | 'video-episode' | 'written-episode' | 'meeting';
+export type CardProps = (ActionCardProps | AudioEpisodeCardProps | FeatureCardProps | PersonCardProps | PriceCardProps | RegularCardProps | VideoEpisodeCardProps | WrittenEpisodeCardProps | MeetingCardCardProps) & {
     type: CardType;
 };
 export declare const Card: ({ type, ...rest }: CardProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/dist/components/card/card.js

@@ -8,6 +8,7 @@ import { PriceCard } from './price';
 import { RegularCard } from './regular';
 import { VideoEpisodeCard } from './video';
 import { WrittenEpisodeCard } from './written';
+import { MeetingCard } from './meeting';
 export const Card = ({ type = 'regular', ...rest }) => {
     const lookup = {
         action: React.createElement(ActionCard, { ...rest }),
@@ -18,6 +19,7 @@ export const Card = ({ type = 'regular', ...rest }) => {
         regular: React.createElement(RegularCard, { ...rest }),
         'video-episode': React.createElement(VideoEpisodeCard, { ...rest }),
         'written-episode': (React.createElement(WrittenEpisodeCard, { ...rest })),
+        meeting: React.createElement(MeetingCard, { ...rest }),
     };
     return lookup[type];
 };

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

@@ -25,7 +25,7 @@ export const FeatureCard = ({ content = '', editable, href, image, onSave, sx, t
     };
     const showEditIcon = !editing && editable;
     const isLink = !!href;
-    return (React.createElement(Wrapper, { as: isLink ? 'div' : 'a', href: href },
+    return (React.createElement(Wrapper, { as: isLink ? 'a' : 'div', href: href },
         React.createElement(Figure, { "$editing": editing, "$isLink": isLink, "$sx": sx },
             React.createElement("img", { alt: title, src: image }),
             !editing && (React.createElement(Title, null,

package/dist/components/card/meeting/index.d.ts

@@ -0,0 +1,2 @@
+export { MeetingCard } from './meeting';
+export type { MeetingCardCardProps } from './meeting';

package/dist/components/card/meeting/index.js

@@ -0,0 +1 @@
+export { MeetingCard } from './meeting';

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

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface MeetingCardCardProps {
+    href?: string;
+    image: string;
+    sx?: string;
+    title: string;
+    actions: React.ReactElement | React.ReactElement[];
+    course: string;
+    startDate: string;
+    endDate: string;
+    startTime: string;
+    endTime: string;
+    location: string;
+    shareModal?: React.ReactElement;
+    handleInterestedOnClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
+    handleNotInterestedOnClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
+    handleVisibleToConnectionsOnClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
+}
+export declare const MeetingCard: ({ href, image, sx, title, actions, course, startDate, endDate, startTime, endTime, location, shareModal, handleInterestedOnClick, handleNotInterestedOnClick, handleVisibleToConnectionsOnClick, }: MeetingCardCardProps) => React.JSX.Element;

package/dist/components/card/meeting/meeting.js

@@ -0,0 +1,105 @@
+'use client';
+import React from 'react';
+import styled from 'styled-components';
+import { Box, H, P, Modal, Button, Dropdown } from '../..';
+import { Calendar, GraduationCap, Clock, Pin, ForwardBold, StarFilled, Star, } from 'icons';
+export const MeetingCard = ({ href, image, sx, title, actions, course, startDate, endDate, startTime, endTime, location, shareModal, handleInterestedOnClick, handleNotInterestedOnClick, handleVisibleToConnectionsOnClick, }) => {
+    const secondaryActions = [];
+    !!handleInterestedOnClick &&
+        secondaryActions.push({
+            value: 'interested',
+            label: 'Interested',
+            onClick: handleInterestedOnClick,
+            icon: React.createElement(StarFilled, { color: "yellow-5" }),
+        });
+    !!handleNotInterestedOnClick &&
+        secondaryActions.push({
+            value: 'notInterested',
+            label: 'Not Interested',
+            onClick: handleNotInterestedOnClick,
+            icon: React.createElement(StarFilled, { color: "red-4" }),
+        });
+    !!handleVisibleToConnectionsOnClick &&
+        secondaryActions.push('break', {
+            value: 'visibleToConnections',
+            label: 'Visible to connections',
+            onClick: handleVisibleToConnectionsOnClick,
+        });
+    return (React.createElement(Wrapper, { "$isLink": !!href, "$sx": sx, as: href ? 'a' : 'div', href: href },
+        React.createElement(Figure, null,
+            React.createElement("img", { src: image, alt: "" }),
+            React.createElement(OverlayContainer, { id: "overlay" },
+                shareModal && (React.createElement(Modal, null,
+                    React.createElement(Modal.Trigger, null,
+                        React.createElement(Button, { icon: React.createElement(ForwardBold, null), type: "outlined", size: "small", onClick: (e) => e.preventDefault() })),
+                    React.createElement(Modal.Content, { onClick: (e) => e.preventDefault() }, shareModal))),
+                !!secondaryActions.length && (React.createElement(Dropdown, { open: "left", offset: [40, 10], maintainState: false, options: secondaryActions, trigger: React.createElement(Button, { icon: React.createElement(Star, null), type: "outlined", size: "small" }), onClick: (e) => e.preventDefault() })))),
+        React.createElement(Box, { "$dir": "column", "$padding": 24 },
+            React.createElement(H.Eight, { "$textAlign": "center", "$color": "grey-2" }, title),
+            React.createElement(MeetingInformation, null,
+                React.createElement(Box, { "$align": "center", "$gap": 20 },
+                    React.createElement(GraduationCap, { color: "grey-6" }),
+                    React.createElement(P, { as: "span", "$color": "grey-3", "$lineHeight": 20, "$fontSize": 14 }, course)),
+                React.createElement(Box, { "$align": "center", "$gap": 20 },
+                    React.createElement(Calendar, { color: "grey-6" }),
+                    React.createElement(P, { as: "span", "$color": "grey-3", "$lineHeight": 20, "$fontSize": 14 },
+                        startDate,
+                        " - ",
+                        endDate)),
+                React.createElement(Box, { "$align": "center", "$gap": 20 },
+                    React.createElement(Clock, { color: "grey-6" }),
+                    React.createElement(P, { as: "span", "$color": "grey-3", "$lineHeight": 20, "$fontSize": 14 },
+                        startTime,
+                        " - ",
+                        endTime)),
+                React.createElement(Box, { "$align": "center", "$gap": 20 },
+                    React.createElement(Pin, { color: "grey-6" }),
+                    React.createElement(P, { as: "span", "$color": "grey-3", "$lineHeight": 20, "$fontSize": 14 }, location))),
+            React.createElement(Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 16px; width: 100%;" }, React.Children.toArray(actions)))));
+};
+const Wrapper = styled.div `
+  min-width: 312px;
+  position: relative;
+  display: block;
+  text-decoration: none;
+  cursor: pointer;
+  box-shadow: var(--elevation-1);
+  border-radius: 16px;
+  background-color: var(--color-white);
+
+  &:hover {
+    ${({ $isLink }) => $isLink ? 'border: 1px solid var(--color-primary-blue-3);' : ''}
+
+    #overlay {
+      opacity: 1;
+    }
+  }
+
+  img {
+    border-radius: 16px 16px 0px 0px;
+    height: 160px;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;
+const MeetingInformation = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 16px;
+`;
+const Figure = styled.figure `
+  position: relative;
+  margin: 0;
+`;
+const OverlayContainer = styled.div `
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 0 10px 10px 0;
+  opacity: 0;
+  display: flex;
+  gap: 8px;
+`;

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

@@ -5,14 +5,14 @@ export interface RadioProps extends NativeProps {
     checked: boolean;
     disabled?: boolean;
     label?: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onClick?: (event: React.MouseEvent) => void;
     name?: string;
     reversed?: boolean;
     sx?: string;
     value: string;
 }
 declare const Radio: {
-    ({ checked, disabled, label, onChange, reversed, sx, value, ...rest }: RadioProps): React.JSX.Element;
+    ({ checked, disabled, label, onClick, reversed, sx, value, ...rest }: RadioProps): React.JSX.Element;
     Group: {
         ({ children, name, ...rest }: RadioGroupProps): React.JSX.Element;
         displayName: string;

package/dist/components/input/radio/radio.js

@@ -2,13 +2,13 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Box, P } from '../../';
-const Radio = ({ checked = false, disabled, label, onChange, reversed, sx, value, ...rest }) => {
+const Radio = ({ checked = false, disabled, label, onClick, reversed, sx, value, ...rest }) => {
     const handleChange = (event) => {
         event.stopPropagation();
-        onChange && onChange(event);
+        onClick && onClick(event);
     };
-    return (React.createElement(Label, { "$disabled": disabled, "$reversed": reversed, "$sx": sx },
-        React.createElement(Input, { checked: checked, disabled: disabled, onChange: handleChange, type: "radio", value: value, ...rest }),
+    return (React.createElement(Label, { "$disabled": disabled, "$reversed": reversed, "$sx": sx, onClick: handleChange },
+        React.createElement(Input, { checked: checked, disabled: disabled, type: "radio", value: value, ...rest }),
         React.createElement(P, { as: "span" }, label)));
 };
 const Label = styled.label `

package/dist/components/input/select/select.js

@@ -27,6 +27,7 @@ const SelectBox = styled.div `
   height: 18px;
   border: 1px solid var(--color-grey-8);
   border-radius: 4px;
+  flex-shrink: 0;
 
   ${({ $selected }) => $selected
     ? `

package/dist/components/navigation/breadcrumb/breadcrumb.js

@@ -17,7 +17,8 @@ const Breadcrumb = ({ children, previous }) => {
     }
     return (React.createElement(Box, { "$align": "center", "$gap": 8 }, _children.map((child, index) => {
         if (React.isValidElement(child) &&
-            child.type?.displayName === 'BreadcrumbItem') {
+            (child.type?.displayName === 'BreadcrumbItem' ||
+                child.type?.displayName === 'Breadcrumb.Item')) {
             return (React.createElement(React.Fragment, null,
                 child,
                 _children.length - 1 !== index && (React.createElement(ChevronRight, { color: "grey-3", size: 24 }))));

package/dist/components/surfaces/modal/modal.d.ts

@@ -38,5 +38,6 @@ export interface ModalContentProps extends React.PropsWithChildren {
     header?: React.ReactElement;
     setClosed?: () => void;
     sx?: string;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 export { Modal };

package/dist/components/surfaces/modal/modal.js

@@ -60,6 +60,7 @@ const ModalContent = ({ backgroundDark = true, children, footer, header, setClos
     const handleOutsideClick = (event) => {
         if (event.currentTarget != event.target)
             return;
+        event.preventDefault();
         event.stopPropagation();
         event.preventDefault();
         setClosed ? setClosed() : setOpen(false);

package/package.json

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