@soul-refiner/design-system 1.1.0 → 1.1.2

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

@@ -62,10 +62,10 @@ export const MeetingCard = ({ href, image, sx, title, actions, course, startDate
                         startTime,
                         " - ",
                         endTime)),
-                React.createElement(Box, { "$align": "center", "$gap": 20 },
+                React.createElement(Box, { "$align": "center", "$gap": 20, sx: "max-width: 264px;" },
                     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)))));
+            React.createElement(Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 32px; width: 100%;" }, React.Children.toArray(actions)))));
 };
 const Wrapper = styled.div `
   min-width: 312px;

package/package.json

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

package/dist/components/hooks/click-outside.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const useClickOutside: (ref: React.Ref<HTMLElement>, cb: (...args: any[]) => unknown) => void;

package/dist/components/hooks/click-outside.js

@@ -1,10 +0,0 @@
-'use client';
-import { useEventListener } from './event-listenter';
-export const useClickOutside = (ref, cb) => {
-    useEventListener('click', (e) => {
-        if (ref?.current == null ||
-            ref?.current?.contains(e.target))
-            return;
-        cb(e);
-    }, document);
-};

package/dist/components/hooks/event-listenter.d.ts

@@ -1 +0,0 @@
-export declare const useEventListener: (eventType: string, callback: (...args: any[]) => unknown, element?: Window & typeof globalThis) => void;

package/dist/components/hooks/event-listenter.js

@@ -1,15 +0,0 @@
-'use client';
-import React from 'react';
-export const useEventListener = (eventType, callback, element = window) => {
-    const callbackRef = React.useRef(callback);
-    React.useEffect(() => {
-        callbackRef.current = callback;
-    }, [callback]);
-    React.useEffect(() => {
-        if (element == null)
-            return;
-        const handler = (e) => callbackRef.current(e);
-        element.addEventListener(eventType, handler);
-        return () => element.removeEventListener(eventType, handler);
-    }, [eventType, element]);
-};

package/dist/components/hooks/hover.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const useHover: (ref: React.Ref<HTMLElement>) => boolean;

package/dist/components/hooks/hover.js

@@ -1,9 +0,0 @@
-'use client';
-import React from 'react';
-import { useEventListener } from './event-listenter';
-export const useHover = (ref) => {
-    const [hovered, setHovered] = React.useState(false);
-    useEventListener('mouseover', () => setHovered(true), ref?.current);
-    useEventListener('mouseout', () => setHovered(false), ref?.current);
-    return hovered;
-};

package/dist/components/hooks/index.d.ts

@@ -1,4 +0,0 @@
-export { useClickOutside } from './click-outside';
-export { useEventListener } from './event-listenter';
-export { useHover } from './hover';
-export { useWindowSize } from './window-size';

package/dist/components/hooks/index.js

@@ -1,4 +0,0 @@
-export { useClickOutside } from './click-outside';
-export { useEventListener } from './event-listenter';
-export { useHover } from './hover';
-export { useWindowSize } from './window-size';

package/dist/components/hooks/window-size.d.ts

@@ -1,4 +0,0 @@
-export declare const useWindowSize: () => {
-    width: number;
-    height: number;
-};

package/dist/components/hooks/window-size.js

@@ -1,13 +0,0 @@
-'use client';
-import React from 'react';
-import { useEventListener } from './event-listenter';
-export const useWindowSize = () => {
-    const [windowSize, setWindowSize] = React.useState({
-        width: window.innerWidth,
-        height: window.innerHeight,
-    });
-    useEventListener('resize', () => {
-        setWindowSize({ width: window.innerWidth, height: window.innerHeight });
-    });
-    return windowSize;
-};

package/dist/components/media/video/playlist-item.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-interface PlaylistItemProps {
-    duration: number;
-    onClick: () => void;
-    progress?: number;
-    shortDescription: string;
-    thumbnail: string;
-    title: string;
-}
-export declare const PlaylistItem: ({ duration, onClick, progress, shortDescription, thumbnail, title, }: PlaylistItemProps) => React.JSX.Element;
-export {};

package/dist/components/media/video/playlist-item.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import Image from 'next/image';
-import styled from 'styled-components';
-import { Box } from '../../atoms/box';
-import { SecToDuration } from '../../atoms/seconds_to_duration';
-import { P } from '../../atoms/typography';
-import { PlaySolid } from '../../../icons/audio_video';
-export const PlaylistItem = ({ duration, onClick, progress = 0, shortDescription, thumbnail, title, }) => {
-    return (React.createElement(Wrapper, { onClick: onClick },
-        React.createElement(PlaySolid, { color: "white", size: 16, sx: "position: absolute; left: 8px; bottom: 4px;" }),
-        React.createElement(Image, { alt: `thumbnail for ${title}`, height: 75, src: thumbnail, width: 133 }),
-        React.createElement(ProgressBar, { progressPercent: progress / duration }),
-        React.createElement(Box, { "$dir": "column", "$gap": 4, sx: "margin-left: 16px; margin-right: auto; flex: 0 1 auto; flex-basis: content;" },
-            React.createElement(P, { "$color": "grey-10", "$semiBold": true }, title),
-            React.createElement(P, { "$color": "grey-9", "$fontSize": 14, "$lineHeight": 20, "$textClampLines": 2, sx: "max-width: min(500px, 75%);" }, shortDescription)),
-        React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, sx: "flex-shrink: 0;" },
-            React.createElement(SecToDuration, { seconds: duration }))));
-};
-const Wrapper = styled.div `
-  width: 100%;
-  flex: 0 1 auto;
-  display: flex;
-  align-items: center;
-  position: relative;
-  box-sizing: border-box;
-  cursor: pointer;
-`;
-const ProgressBar = ({ progressPercent }) => (React.createElement(ProgressBarSvg, { viewBox: "0 0 133 2", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React.createElement("rect", { width: 133 * progressPercent, height: "2", fill: "var(--color-primary-blue-2)" }),
-    React.createElement("rect", { x: 133 * progressPercent, width: 133 - 133 * progressPercent, height: "2", fill: "var(--color-grey-8)" })));
-const ProgressBarSvg = styled.svg `
-  width: 133px;
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-`;

package/dist/components/surfaces/post/helpers.d.ts

@@ -1 +0,0 @@
-export declare const abbrTimeBeforeDate: (date: Date) => string;

package/dist/components/surfaces/post/helpers.js

@@ -1,26 +0,0 @@
-export const abbrTimeBeforeDate = (date) => {
-    const now = new Date();
-    const diff = now.getTime() - date.getTime();
-    if (diff < 60000) {
-        // under 1 min
-        return 'Just now';
-    }
-    else if (diff < 3600000) {
-        // under one hour
-        const minutes = Math.floor(diff / 60000);
-        return `${minutes} ${minutes === 1 ? 'min' : 'mins'}`;
-    }
-    else if (diff < 86400000) {
-        // under one day
-        const hours = Math.floor(diff / 3600000);
-        return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
-    }
-    else if (diff < 604800000) {
-        // under one week
-        const days = Math.floor(diff / 86400000);
-        return `${days} ${days === 1 ? 'day' : 'days'}`;
-    }
-    else {
-        return date.toDateString().slice(4);
-    }
-};