@soul-refiner/design-system 0.2.116 → 0.2.117

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

@@ -33,6 +33,7 @@ const Wrapper = styled.a `
 
   figure {
     max-width: 228px;
+    width: max-content;
   }
 
   .hidden {
@@ -40,6 +41,9 @@ const Wrapper = styled.a `
   }
 
   &:hover {
+    padding: 4px;
+    transform: translate(-4px, -4px);
+
     .hidden {
       display: flex;
 

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

@@ -36,6 +36,9 @@ const Wrapper = styled.a `
   }
 
   &:hover {
+    padding: 4px;
+    transform: translate(-4px, -4px);
+
     .hidden {
       display: flex;
     }
@@ -69,6 +72,7 @@ const Wrapper = styled.a `
 `;
 const Figure = styled.figure `
   max-width: 410px;
+  width: max-content;
   margin: 0px;
   border-radius: 16px;
 
@@ -76,7 +80,8 @@ const Figure = styled.figure `
     position: relative;
     z-index: -1;
     width: 100%;
-    aspect-ratio: 410 / 239;
+    aspect-ratio: 379 / 275;
+    height: 228px;
     border-radius: 16px;
   }
 `;

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

@@ -33,6 +33,7 @@ const Wrapper = styled.a `
 
   figure {
     max-width: 228px;
+    width: max-content;
   }
 
   .hidden {
@@ -40,6 +41,9 @@ const Wrapper = styled.a `
   }
 
   &:hover {
+    padding: 4px;
+    transform: translate(-4px, -4px);
+
     .hidden {
       display: flex;
 
@@ -86,6 +90,7 @@ const Figure = styled.figure `
     position: relative;
     z-index: -1;
     width: 100%;
+    height: 228px;
     aspect-ratio: 228 / 326;
   }
 `;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface CardCarouselProps extends React.PropsWithChildren {
+    onScrollEnd?: () => void;
+    scrollTriggerDistance?: number;
+    scrollDistance?: number;
+    sx?: string;
+}
+export declare const CardCarousel: ({ children, onScrollEnd, scrollTriggerDistance, scrollDistance, sx, }: CardCarouselProps) => React.JSX.Element;

package/dist/components/surfaces/carousel/card/card.js

@@ -0,0 +1,84 @@
+'use client';
+import React from 'react';
+import styled from 'styled-components';
+import { ChevronLeft, ChevronRight } from '../../../../icons';
+const DEFAULT_SCROLL_TRIGGER_DISTANCE = 11;
+const DEFAULT_SCROLL_DISTANCE = 450;
+export const CardCarousel = ({ children, onScrollEnd, scrollTriggerDistance = DEFAULT_SCROLL_TRIGGER_DISTANCE, scrollDistance = DEFAULT_SCROLL_DISTANCE, sx, }) => {
+    const ref = React.useRef(null);
+    const handleScroll = (event) => {
+        const target = event.target;
+        const scrollDistance = target.scrollWidth - target.scrollLeft;
+        if (scrollDistance - target.clientWidth < scrollTriggerDistance &&
+            onScrollEnd) {
+            onScrollEnd();
+        }
+    };
+    const onNavigateRight = () => {
+        if (ref.current) {
+            const amount = ref.current.scrollLeft + scrollDistance;
+            ref.current.scrollLeft = amount;
+        }
+    };
+    const onNavigateLeft = () => {
+        if (ref.current) {
+            const amount = ref.current.scrollLeft - scrollDistance;
+            ref.current.scrollLeft = amount < 0 ? 0 : amount;
+        }
+    };
+    return (React.createElement(Wrapper, { "$sx": sx },
+        React.createElement(Button, { className: "carousel-navigation", onClick: onNavigateLeft, "$side": "left" },
+            React.createElement(ChevronLeft, { color: "white", size: 48 })),
+        React.createElement(Inner, { onScroll: handleScroll, ref: ref }, children),
+        React.createElement(Button, { className: "carousel-navigation", onClick: onNavigateRight, "$side": "right" },
+            React.createElement(ChevronRight, { color: "white", size: 48 }))));
+};
+const Wrapper = styled.div `
+  position: relative;
+  height: 288px;
+
+  &:hover .carousel-navigation {
+    display: block;
+  }
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Inner = styled.div `
+  overflow-x: scroll;
+  overflow-y: show;
+  display: flex;
+  gap: 24px;
+  flex-flow: row nowrap;
+  scroll-behavior: smooth;
+  padding-right: 32px;
+
+  &::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+  }
+`;
+const Button = styled.button `
+  position: absolute;
+  z-index: 25;
+  top: 0px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  border: none;
+  background: rgba(8, 8, 9, 0.5);
+  padding: 0px 16px;
+  cursor: pointer;
+
+  display: none;
+
+  ${({ $side }) => $side === 'left'
+    ? `
+    left: 0px;
+    border-radius: 0px 16px 16px 0px;
+    `
+    : `
+    right: 0px;
+    border-radius: 16px 0px 0px 16px;`};
+`;

package/dist/components/surfaces/carousel/card/index.d.ts

@@ -0,0 +1,2 @@
+export { CardCarousel } from './card';
+export type { CardCarouselProps } from './card';

package/dist/components/surfaces/carousel/card/index.js

@@ -0,0 +1 @@
+export { CardCarousel } from './card';

package/dist/components/surfaces/carousel/index.d.ts

@@ -0,0 +1,2 @@
+export { CardCarousel } from './card';
+export type { CardCarouselProps } from './card';

package/dist/components/surfaces/carousel/index.js

@@ -0,0 +1 @@
+export { CardCarousel } from './card';

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

@@ -1,5 +1,7 @@
 export { Accordion } from './accordion';
 export type { AccordionProps, AccordionItemProps } from './accordion';
+export { CardCarousel } from './carousel';
+export type { CardCarouselProps } from './carousel';
 export { Comment } from './comment';
 export type { CommentProps } from './comment';
 export { Drawer } from './drawer';

package/dist/components/surfaces/index.js

@@ -1,4 +1,5 @@
 export { Accordion } from './accordion';
+export { CardCarousel } from './carousel';
 export { Comment } from './comment';
 export { Drawer } from './drawer';
 export { Message } from './message';

package/package.json

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