@soul-refiner/design-system 0.2.121 → 0.2.123

package/dist/components/card/audio/audio.js

@@ -30,11 +30,15 @@ const Wrapper = styled.a `
   cursor: pointer;
   display: block;
   position: relative;
+  z-index: 5;
   user-select: none;
+  height: 288px;
+  width: 213px;
+  transition: transform 0.3s;
 
   figure {
-    max-width: 228px;
-    width: max-content;
+    transition: width 0.3s;
+    width: 213px;
   }
 
   .hidden {
@@ -42,8 +46,8 @@ const Wrapper = styled.a `
   }
 
   &:hover {
-    padding: 4px;
-    transform: translate(-4px, -4px);
+    transform: translate(-34px, -55px);
+    z-index: 6;
 
     .hidden {
       display: flex;
@@ -62,6 +66,8 @@ const Wrapper = styled.a `
     }
 
     figure {
+      position: absolute;
+      width: 280px;
       max-width: 280px;
       aspect-ratio: 280 / 434;
       box-shadow: var(--elevation-3);

package/dist/components/card/video/video.js

@@ -8,7 +8,7 @@ export const VideoEpisodeCard = ({ actions, actionDropdown, content, cta, href,
     return (React.createElement(Wrapper, { "$sx": sx, href: href },
         React.createElement(Figure, null,
             actionDropdown && React.createElement(DropdownWrapper, null, actionDropdown),
-            React.createElement(Image, { alt: "", className: "thumbnail", height: 228, src: image, width: 314 }),
+            React.createElement(Image, { alt: "", className: "thumbnail", height: 213, src: image, width: 379 }),
             React.createElement(Figcaption, null,
                 React.createElement(Box, { "$display": "block", className: "hidden" }, cta),
                 React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 16 },
@@ -30,15 +30,25 @@ const Wrapper = styled.a `
   cursor: pointer;
   display: block;
   position: relative;
+  z-index: 1;
   user-select: none;
+  position: relative;
+  height: 288px;
+  width: 379px;
+  transition: transform 0.3s;
+
+  figure {
+    transition: width 0.3s;
+    width: 379px;
+  }
 
   .hidden {
     display: none;
   }
 
   &:hover {
-    padding: 4px;
-    transform: translate(-4px, -4px);
+    transform: translate(-13px, -55px);
+    z-index: 6;
 
     .hidden {
       display: flex;
@@ -53,7 +63,8 @@ const Wrapper = styled.a `
     }
 
     figure {
-      aspect-ratio: 410 / 414;
+      position: absolute;
+      width: 406px;
       box-shadow: var(--elevation-3);
       background: linear-gradient(
         0deg,
@@ -82,7 +93,7 @@ const Figure = styled.figure `
     object-fit: cover;
     z-index: -1;
     width: 100%;
-    aspect-ratio: 379 / 275;
+    aspect-ratio: 379 / 213;
     height: 228px;
     border-radius: 16px;
   }

package/dist/components/card/written/written.js

@@ -30,11 +30,15 @@ const Wrapper = styled.a `
   cursor: pointer;
   display: block;
   position: relative;
+  z-index: 1;
   user-select: none;
+  width: 149px;
+  height: 288px;
+  transition: transform 0.3s;
 
   figure {
-    max-width: 228px;
-    width: max-content;
+    transition: width 0.3s;
+    width: 149px;
   }
 
   .hidden {
@@ -42,8 +46,8 @@ const Wrapper = styled.a `
   }
 
   &:hover {
-    padding: 4px;
-    transform: translate(-4px, -4px);
+    transform: translate(-65px, -55px);
+    z-index: 6;
 
     .hidden {
       display: flex;
@@ -63,7 +67,8 @@ const Wrapper = styled.a `
     }
 
     figure {
-      max-width: 280px;
+      position: absolute;
+      width: 280px;
       aspect-ratio: 280 / 434;
       box-shadow: var(--elevation-3);
       background: linear-gradient(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.121",
+  "version": "0.2.123",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {
@@ -69,6 +69,5 @@
     "slate-hyperscript": "^0.77.0",
     "slate-react": "^0.97.1",
     "styled-components": "^6.0.0-rc.3"
-  },
-  "packageManager": "yarn@3.4.1"
+  }
 }

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/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);
-    }
-};