@soul-refiner/design-system 1.0.0 → 1.0.2

package/dist/components/index.d.ts

@@ -5,7 +5,7 @@ export * from './editor';
 export * from './feedback';
 export * from './iconography';
 export * from './input';
-export * from './media/video';
+export * from './media/video-player';
 export * from './navigation';
 export * from './surfaces';
 export * from './table';

package/dist/components/index.js

@@ -5,7 +5,7 @@ export * from './editor';
 export * from './feedback';
 export * from './iconography';
 export * from './input';
-export * from './media/video';
+export * from './media/video-player';
 export * from './navigation';
 export * from './surfaces';
 export * from './table';

package/dist/components/media/common.d.ts

@@ -0,0 +1,6 @@
+export interface Subtitle {
+    id: string;
+    label: string;
+    locale: string;
+    src: string;
+}

package/dist/components/media/common.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,2 +1,4 @@
-export { VideoPlayer } from './video';
-export type { VideoPlayerProps } from './video';
+export { Video } from './video';
+export type { VideoProps } from './video';
+export { VideoPlayer } from './video-player';
+export type { VideoPlayerProps } from './video-player';

package/dist/components/media/index.js

@@ -1 +1,2 @@
-export { VideoPlayer } from './video';
+export { Video } from './video';
+export { VideoPlayer } from './video-player';

package/dist/components/media/video/index.d.ts

@@ -1,2 +1,2 @@
-export { VideoPlayer } from './video';
-export type { VideoPlayerProps } from './video';
+export { Video } from './video';
+export type { VideoProps } from './video';

package/dist/components/media/video/index.js

@@ -1 +1 @@
-export { VideoPlayer } from './video';
+export { Video } from './video';

package/dist/components/media/video/video.d.ts

@@ -1,64 +1,13 @@
 import React from 'react';
-interface MediaItem {
-    id: string;
-    duration: number;
-    progress?: number;
+import { Subtitle } from '../common';
+export interface VideoProps {
+    controls?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsInline?: boolean;
     src: string;
-    subtitles: Subtitle[];
-    shortDescription: string;
+    subtitles?: Subtitle[];
+    style?: React.CSSProperties;
     thumbnail: string;
-    title: string;
 }
-interface Subtitle {
-    id: string;
-    label: string;
-    locale: string;
-    src: string;
-}
-export interface VideoPlayerProps {
-    /**
-     * @param activeIndex the media item from the playlist currently playing
-     */
-    activeIndex: number;
-    /**
-     * @param orientation the orientation of the player
-     */
-    orientation: 'horizontal' | 'vertical';
-    /**
-     * @param onPipChange when the pip changes
-     */
-    onPipChange?: (pip: boolean) => void;
-    /**
-     * @param onProgress the handler as the video progresses
-     */
-    onProgress: (progress: {
-        playedSeconds: number;
-        loadedSeconds: number;
-    }) => void;
-    /**
-     * @param pip picture in picture is enabled
-     */
-    pip?: boolean;
-    /**
-     * @param playlist the media items in the player
-     */
-    playlist: MediaItem[];
-    /**
-     * @param subtitle the video player's subtitle
-     */
-    subtitle: string;
-    /**
-     * @param title the video player's title
-     */
-    title: string;
-    /**
-     * @param setMediaItem sets the index of the item to be played
-     */
-    setMediaItem: (index: number) => void;
-}
-/**
- * ReactPlayer props reference -> https://www.npmjs.com/package/react-player#props
- * HLS Option props reference -> https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
- */
-export declare const VideoPlayer: ({ activeIndex, pip, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, }: VideoPlayerProps) => React.JSX.Element | null;
-export {};
+export declare const Video: ({ controls, loop, playsInline, src, subtitles, style, thumbnail, }: VideoProps) => React.JSX.Element;

package/dist/components/media/video/video.js

@@ -1,165 +1,31 @@
-'use client';
 import React from 'react';
-import Image from 'next/image';
 import ReactPlayer from 'react-player';
-import styled from 'styled-components';
-import { Box } from '../../atoms/box';
-import { H, P } from '../../atoms/typography';
-import { Button } from '../../actions/button';
-import { PlaylistItem } from './playlist-item';
-/**
- * ReactPlayer props reference -> https://www.npmjs.com/package/react-player#props
- * HLS Option props reference -> https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
- */
-export const VideoPlayer = ({ activeIndex, pip, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, }) => {
-    const [showingAll, setShowingAll] = React.useState(false);
+import Image from 'next/image';
+export const Video = ({ controls = true, loop = false, playsInline, src, subtitles, style, thumbnail, }) => {
     const ref = React.useRef(null);
-    const mediaItem = playlist?.[activeIndex];
-    const handleReady = () => {
-        const currTime = ref?.current?.getCurrentTime();
-        if (currTime === 0 && mediaItem?.progress !== 0) {
-            ref.current.seekTo(mediaItem.progress);
-        }
-    };
-    const toggleShowingAll = () => setShowingAll((prev) => !prev);
-    if (!mediaItem)
-        return null;
-    return (React.createElement(Wrapper, { "$orientation": orientation },
-        React.createElement(InnerWrapper, { "$orientation": orientation },
-            orientation === 'vertical' && (React.createElement(Box, { "$dir": "column", "$gap": 4, sx: "margin: 24px;" },
-                React.createElement(H, { as: "h2", "$bold": true, "$color": "white", "$fontSize": 28, "$lineHeight": 36 }, title),
-                React.createElement(P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle))),
-            React.createElement(ReactPlayer, { config: {
-                    file: {
-                        attributes: {
-                            crossOrigin: 'true',
-                        },
-                        forceHLS: true,
-                        hlsOptions: {
-                            autoStartLoad: true,
-                        },
-                        tracks: mediaItem.subtitles.map((subtitle) => ({
-                            kind: 'subtitles',
-                            label: subtitle.label,
-                            src: subtitle.src,
-                            srcLang: subtitle.locale,
-                        })),
-                    },
-                }, controls: true, height: "100%", light: React.createElement(Image, { alt: `thumbnail for ${title}`, layout: "fill", objectFit: "contain", priority: true, src: mediaItem.thumbnail }), onDisablePIP: () => onPipChange && onPipChange(false), onEnablePIP: () => onPipChange && onPipChange(true), onProgress: onProgress, onReady: handleReady, pip: pip, playing: true, ref: ref, style: {
-                    backgroundColor: 'var(--color-grey-0)',
-                    maxHeight: 720,
-                    maxWidth: 1280,
-                    minHeight: 480,
-                    overflow: 'hidden',
-                    position: 'relative',
-                }, url: mediaItem.src, width: "100%" }),
-            orientation === 'horizontal' && (React.createElement(Side, null,
-                React.createElement(Box, { "$dir": "column", "$gap": 4 },
-                    React.createElement(H, { as: "h2", "$bold": true, "$color": "white", "$fontSize": 28, "$lineHeight": 36 }, title),
-                    React.createElement(P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle)),
-                React.createElement(Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px 8px 14px;" },
-                    React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "All lessons")),
-                React.createElement(HorizontalPlaylistWrapper, null, playlist.map((playlistItem, index) => (React.createElement(PlaylistItem, { key: playlistItem.id, duration: playlistItem.duration, onClick: () => setMediaItem(index), progress: playlistItem.progress, shortDescription: playlistItem.shortDescription, thumbnail: playlistItem.thumbnail, title: playlistItem.title })))))),
-            orientation === 'vertical' && (React.createElement(Box, { "$dir": "column", "$gap": 24 },
-                React.createElement(Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px; margin: 0px 24px; border-bottom: 1px solid var(--color-grey-3);" },
-                    React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "All lessons"),
-                    React.createElement(Button, { onClick: toggleShowingAll, size: "small", sx: "background-color: var(--color-grey-2); border-color: var(--color-grey-8); color: var(--color-grey-8);", type: "text" }, showingAll ? 'Collapse' : 'View all')),
-                React.createElement(VerticalPlaylistWrapper, { "$showingAll": showingAll }, playlist.map((playlistItem, index) => (React.createElement(PlaylistItem, { key: playlistItem.id, duration: playlistItem.duration, onClick: () => setMediaItem(index), progress: playlistItem.progress, shortDescription: playlistItem.shortDescription, thumbnail: playlistItem.thumbnail, title: playlistItem.title })))))))));
+    return (React.createElement(ReactPlayer, { config: {
+            file: {
+                attributes: {
+                    crossOrigin: 'true',
+                },
+                forceHLS: true,
+                hlsOptions: {
+                    autoStartLoad: true,
+                },
+                tracks: subtitles?.map((subtitle) => ({
+                    kind: 'subtitles',
+                    label: subtitle.label,
+                    src: subtitle.src,
+                    srcLang: subtitle.locale,
+                })),
+            },
+        }, controls: controls, height: "100%", light: thumbnail ? (React.createElement(Image, { alt: "thumbnail for trailer", layout: "fill", objectFit: "contain", priority: true, src: thumbnail })) : undefined, loop: loop, pip: false, playsinline: playsInline, playing: true, ref: ref, style: {
+            backgroundColor: 'var(--color-grey-0)',
+            maxHeight: 720,
+            maxWidth: 1280,
+            minHeight: 480,
+            overflow: 'hidden',
+            position: 'relative',
+            ...(style || {}),
+        }, url: src, width: "100%" }));
 };
-const Wrapper = styled.div `
-  display: flex;
-  justify-content: center;
-  background-color: var(--color-grey-0);
-
-  img {
-    object-fit: cover !important;
-  }
-
-  ${({ $orientation }) => $orientation === 'vertical' ? 'max-width: 960px; height: max-content;' : ''}
-`;
-const InnerWrapper = styled.div `
-  max-width: 2284px;
-  flex: 1;
-  display: flex;
-  justify-content: flex-end;
-  ${({ $orientation }) => $orientation === 'vertical'
-    ? `
-    flex-direction: column;
-    gap: 24px;
-    justify-content: flex-start;`
-    : `
-      & > div:first-of-type {
-        flex: 5;
-        aspect-ratio: 1280 / 720;
-      }
-      & > div:last-of-type {
-        flex: 3;
-      }`}
-`;
-const Side = styled.div `
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  padding: 24px;
-  gap: 24px;
-`;
-const HorizontalPlaylistWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  max-height: 548px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding-right: 24px;
-
-  &::-webkit-scrollbar-track {
-    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
-    -webkit-box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
-    border-radius: 4px;
-    background-color: var(--color-grey-2);
-    margin: 40px 0px 15px 0px;
-  }
-  &::-webkit-scrollbar {
-    width: 8px;
-    border-radius: 4px;
-  }
-  &::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background-color: var(--color-grey-6);
-    opacity: 30%;
-  }
-`;
-const VerticalPlaylistWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  padding: 0px 12px 48px 24px;
-  margin-right: 24px;
-  max-height: 350px;
-  overflow-y: scroll;
-  overflow-x: hidden;
-
-  &::-webkit-scrollbar-track {
-    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
-    -webkit-box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
-    border-radius: 4px;
-    background-color: var(--color-grey-2);
-    margin: 40px 0px 15px 0px;
-  }
-  &::-webkit-scrollbar {
-    width: 8px;
-    border-radius: 4px;
-  }
-  &::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background-color: var(--color-grey-6);
-    opacity: 30%;
-  }
-
-  ${({ $showingAll }) => $showingAll
-    ? `
-    max-height: unset;
-    overflow-y: visible;`
-    : ''}
-`;

package/dist/components/media/video-player/index.d.ts

@@ -0,0 +1,2 @@
+export { VideoPlayer } from './video';
+export type { VideoPlayerProps } from './video';

package/dist/components/media/video-player/index.js

@@ -0,0 +1 @@
+export { VideoPlayer } from './video';

package/dist/components/media/video-player/video.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Subtitle } from '../common';
+interface MediaItem {
+    id: string;
+    duration: number;
+    progress?: number;
+    src: string;
+    subtitles: Subtitle[];
+    shortDescription: string;
+    thumbnail: string;
+    title: string;
+}
+export interface VideoPlayerProps {
+    /**
+     * @param activeIndex the media item from the playlist currently playing
+     */
+    activeIndex: number;
+    /**
+     * @param orientation the orientation of the player
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * @param onPipChange when the pip changes
+     */
+    onPipChange?: (pip: boolean) => void;
+    /**
+     * @param onProgress the handler as the video progresses
+     */
+    onProgress: (progress: {
+        playedSeconds: number;
+        loadedSeconds: number;
+    }) => void;
+    /**
+     * @param pip picture in picture is enabled
+     */
+    pip?: boolean;
+    /**
+     * @param playlist the media items in the player
+     */
+    playlist: MediaItem[];
+    /**
+     * @param subtitle the video player's subtitle
+     */
+    subtitle: string;
+    /**
+     * @param title the video player's title
+     */
+    title: string;
+    /**
+     * @param setMediaItem sets the index of the item to be played
+     */
+    setMediaItem: (index: number) => void;
+}
+/**
+ * ReactPlayer props reference -> https://www.npmjs.com/package/react-player#props
+ * HLS Option props reference -> https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
+ */
+export declare const VideoPlayer: ({ activeIndex, pip, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, }: VideoPlayerProps) => React.JSX.Element | null;
+export {};

package/dist/components/media/video-player/video.js

@@ -0,0 +1,165 @@
+'use client';
+import React from 'react';
+import Image from 'next/image';
+import ReactPlayer from 'react-player';
+import styled from 'styled-components';
+import { Box } from '../../atoms/box';
+import { H, P } from '../../atoms/typography';
+import { Button } from '../../actions/button';
+import { PlaylistItem } from './playlist-item';
+/**
+ * ReactPlayer props reference -> https://www.npmjs.com/package/react-player#props
+ * HLS Option props reference -> https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning
+ */
+export const VideoPlayer = ({ activeIndex, pip, playlist, onPipChange, onProgress, orientation, setMediaItem, subtitle, title, }) => {
+    const [showingAll, setShowingAll] = React.useState(false);
+    const ref = React.useRef(null);
+    const mediaItem = playlist?.[activeIndex];
+    const handleReady = () => {
+        const currTime = ref?.current?.getCurrentTime();
+        if (currTime === 0 && mediaItem?.progress !== 0) {
+            ref.current.seekTo(mediaItem.progress);
+        }
+    };
+    const toggleShowingAll = () => setShowingAll((prev) => !prev);
+    if (!mediaItem)
+        return null;
+    return (React.createElement(Wrapper, { "$orientation": orientation },
+        React.createElement(InnerWrapper, { "$orientation": orientation },
+            orientation === 'vertical' && (React.createElement(Box, { "$dir": "column", "$gap": 4, sx: "margin: 24px;" },
+                React.createElement(H, { as: "h2", "$bold": true, "$color": "white", "$fontSize": 28, "$lineHeight": 36 }, title),
+                React.createElement(P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle))),
+            React.createElement(ReactPlayer, { config: {
+                    file: {
+                        attributes: {
+                            crossOrigin: 'true',
+                        },
+                        forceHLS: true,
+                        hlsOptions: {
+                            autoStartLoad: true,
+                        },
+                        tracks: mediaItem.subtitles.map((subtitle) => ({
+                            kind: 'subtitles',
+                            label: subtitle.label,
+                            src: subtitle.src,
+                            srcLang: subtitle.locale,
+                        })),
+                    },
+                }, controls: true, height: "100%", light: React.createElement(Image, { alt: `thumbnail for ${title}`, layout: "fill", objectFit: "contain", priority: true, src: mediaItem.thumbnail }), onDisablePIP: () => onPipChange && onPipChange(false), onEnablePIP: () => onPipChange && onPipChange(true), onProgress: onProgress, onReady: handleReady, pip: pip, playing: true, ref: ref, style: {
+                    backgroundColor: 'var(--color-grey-0)',
+                    maxHeight: 720,
+                    maxWidth: 1280,
+                    minHeight: 480,
+                    overflow: 'hidden',
+                    position: 'relative',
+                }, url: mediaItem.src, width: "100%" }),
+            orientation === 'horizontal' && (React.createElement(Side, null,
+                React.createElement(Box, { "$dir": "column", "$gap": 4 },
+                    React.createElement(H, { as: "h2", "$bold": true, "$color": "white", "$fontSize": 28, "$lineHeight": 36 }, title),
+                    React.createElement(P, { as: "h3", "$bold": true, "$color": "grey-8" }, subtitle)),
+                React.createElement(Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px 8px 14px;" },
+                    React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "All lessons")),
+                React.createElement(HorizontalPlaylistWrapper, null, playlist.map((playlistItem, index) => (React.createElement(PlaylistItem, { key: playlistItem.id, duration: playlistItem.duration, onClick: () => setMediaItem(index), progress: playlistItem.progress, shortDescription: playlistItem.shortDescription, thumbnail: playlistItem.thumbnail, title: playlistItem.title })))))),
+            orientation === 'vertical' && (React.createElement(Box, { "$dir": "column", "$gap": 24 },
+                React.createElement(Box, { "$align": "center", "$justify": "space-between", sx: "padding: 8px 0px; margin: 0px 24px; border-bottom: 1px solid var(--color-grey-3);" },
+                    React.createElement(P, { "$color": "grey-8", "$fontSize": 14, "$lineHeight": 20, "$semiBold": true }, "All lessons"),
+                    React.createElement(Button, { onClick: toggleShowingAll, size: "small", sx: "background-color: var(--color-grey-2); border-color: var(--color-grey-8); color: var(--color-grey-8);", type: "text" }, showingAll ? 'Collapse' : 'View all')),
+                React.createElement(VerticalPlaylistWrapper, { "$showingAll": showingAll }, playlist.map((playlistItem, index) => (React.createElement(PlaylistItem, { key: playlistItem.id, duration: playlistItem.duration, onClick: () => setMediaItem(index), progress: playlistItem.progress, shortDescription: playlistItem.shortDescription, thumbnail: playlistItem.thumbnail, title: playlistItem.title })))))))));
+};
+const Wrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  background-color: var(--color-grey-0);
+
+  img {
+    object-fit: cover !important;
+  }
+
+  ${({ $orientation }) => $orientation === 'vertical' ? 'max-width: 960px; height: max-content;' : ''}
+`;
+const InnerWrapper = styled.div `
+  max-width: 2284px;
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  ${({ $orientation }) => $orientation === 'vertical'
+    ? `
+    flex-direction: column;
+    gap: 24px;
+    justify-content: flex-start;`
+    : `
+      & > div:first-of-type {
+        flex: 5;
+        aspect-ratio: 1280 / 720;
+      }
+      & > div:last-of-type {
+        flex: 3;
+      }`}
+`;
+const Side = styled.div `
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  gap: 24px;
+`;
+const HorizontalPlaylistWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  max-height: 548px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 24px;
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    -webkit-box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    background-color: var(--color-grey-2);
+    margin: 40px 0px 15px 0px;
+  }
+  &::-webkit-scrollbar {
+    width: 8px;
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: var(--color-grey-6);
+    opacity: 30%;
+  }
+`;
+const VerticalPlaylistWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 0px 12px 48px 24px;
+  margin-right: 24px;
+  max-height: 350px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    -webkit-box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    background-color: var(--color-grey-2);
+    margin: 40px 0px 15px 0px;
+  }
+  &::-webkit-scrollbar {
+    width: 8px;
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: var(--color-grey-6);
+    opacity: 30%;
+  }
+
+  ${({ $showingAll }) => $showingAll
+    ? `
+    max-height: unset;
+    overflow-y: visible;`
+    : ''}
+`;

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

@@ -1,6 +1,7 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
+import Link from 'next/link';
 import { Box } from '../../';
 import { ChevronLeft, ChevronRight } from '../../../icons';
 const Breadcrumb = ({ children, previous }) => {
@@ -28,14 +29,14 @@ const Breadcrumb = ({ children, previous }) => {
     })));
 };
 const BreadcrumbItem = ({ avatar, children, href, icon, iconColor = 'blue', onClick, }) => {
-    return (React.createElement(Item, { as: href ? 'a' : 'div', href: href, onClick: onClick, "$type": icon ? 'icon' : avatar ? 'avatar' : 'text', "$iconColor": `hue-${iconColor}-1` },
+    return (React.createElement(Item, { href: href || '#', onClick: onClick, "$type": icon ? 'icon' : avatar ? 'avatar' : 'text', "$iconColor": `hue-${iconColor}-1`, scroll: false },
         icon && (React.createElement(IconWrapper, { "$color": iconColor }, React.cloneElement(icon, { color: `hue-${iconColor}-1`, size: 24 }))),
         avatar,
         children));
 };
 Breadcrumb.Item = BreadcrumbItem;
 BreadcrumbItem.displayName = 'Breadcrumb.Item';
-const Item = styled.div `
+const Item = styled(Link) `
   display: flex;
   flex-flow: row nowrap;
   align-items: center;

package/dist/components/navigation/inner/inner.d.ts

@@ -9,7 +9,7 @@ declare const InnerNav: {
         displayName: string;
     };
     Dropdown: {
-        ({ children, href, icon, label, open, sx, onClick, }: InnerNavDropdownProps): React.JSX.Element;
+        ({ children, icon, label, open, sx, onClick, }: InnerNavDropdownProps): React.JSX.Element;
         displayName: string;
     };
     BackButton: {
@@ -63,7 +63,6 @@ export interface InnerNavItemProps {
  * Dropdown
  */
 export interface InnerNavDropdownProps extends React.PropsWithChildren {
-    href?: string;
     icon?: React.ReactElement;
     label: React.ReactNode;
     open: boolean;

package/dist/components/navigation/inner/inner.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import Link from 'next/link';
 import { Button } from '../../../components/actions/button';
 import { Drawer } from '../../../components/surfaces/drawer';
 import { ChevronDown, ChevronLeft, ChevronUp, Plus } from '../../../icons';
@@ -53,12 +54,11 @@ const NavWrapper = styled.nav `
   border-right: 1px solid var(--color-grey-9);
 `;
 const InnerNavItem = ({ active, href, icon, label, sx }) => {
-    const isAnchor = !!href;
-    return (React.createElement(Item, { "$active": active, "$sx": sx, as: isAnchor ? 'a' : 'button', href: href },
+    return (React.createElement(Item, { "$active": active, "$sx": sx, href: href || '#', scroll: false },
         icon,
         label));
 };
-const Item = styled.button `
+const Item = styled(Link) `
   padding: 14px 16px;
   display: flex;
   gap: 16px;
@@ -85,10 +85,9 @@ const Item = styled.button `
 `;
 InnerNav.Item = InnerNavItem;
 InnerNavItem.displayName = 'InnerNav.Item';
-const InnerNavDropdown = ({ children, href, icon, label, open, sx, onClick, }) => {
-    const isAnchor = !!href;
+const InnerNavDropdown = ({ children, icon, label, open, sx, onClick, }) => {
     return (React.createElement(React.Fragment, null,
-        React.createElement(Item, { "$active": false, "$sx": sx, as: isAnchor ? 'a' : 'button', href: !!onClick ? undefined : href, onClick: onClick },
+        React.createElement(DropdownItem, { "$active": false, "$sx": sx, onClick: onClick },
             icon,
             React.createElement(DropdownTriggerWrapper, null,
                 label,
@@ -108,15 +107,40 @@ const DropdownTriggerWrapper = styled.div `
   align-items: center;
   flex: 1;
 `;
+const DropdownItem = styled.a `
+  padding: 14px 16px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  border-radius: 8px;
+  font-family: var(--font-inter);
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--color-blue-2);
+  cursor: pointer;
+  svg {
+    fill: var(--color-blue-2);
+  }
+  ${({ $active }) => $active
+    ? `
+    background-color: var(--color-primary-blue-3);`
+    : `
+    &:hover {
+      background-color: var(--color-primary-blue-4);
+    }`}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
 InnerNav.Dropdown = InnerNavDropdown;
 InnerNavDropdown.displayName = 'InnerNav.Dropdown';
 const InnerNavBackButton = ({ href, label, sx }) => {
-    return (React.createElement(BackButton, { href: href, "$sx": sx },
+    return (React.createElement(BackButton, { href: href, "$sx": sx, scroll: false },
         React.createElement("div", null,
             React.createElement(ChevronLeft, { size: 24 })),
         label));
 };
-const BackButton = styled.a `
+const BackButton = styled(Link) `
   display: flex;
   align-items: center;
   gap: 8px;

package/dist/components/navigation/tabs/tabs.js

@@ -1,6 +1,7 @@
 'use client';
 import React from 'react';
 import styled from 'styled-components';
+import Link from 'next/link';
 import { P } from '../../';
 const colorLookup = {
     blue: {
@@ -64,17 +65,16 @@ const Wrapper = styled.div `
   ${({ $sx }) => ($sx ? $sx : '')}
 `;
 const Item = ({ active, color, disabled, href, icon, label, onClick, size = 'large', }) => {
-    const isAnchor = !!href;
     const inputColor = disabled ? 'grey' : color ? color : 'blue';
     const iconColor = colorLookup[inputColor].icon;
     const bgColor = colorLookup[inputColor].bg;
     const fontSize = size === 'large' ? 16 : size === 'medium' ? 14 : 12;
     const lineHeight = size === 'large' ? 24 : size === 'medium' ? 20 : 16;
-    return (React.createElement(Element, { as: isAnchor ? 'a' : 'div', href: href, onClick: !disabled && onClick ? onClick : undefined, "$active": active, "$color": iconColor, "$disabled": disabled, "$hasIcon": !!icon, "$size": size },
+    return (React.createElement(Element, { onClick: !disabled && onClick ? onClick : undefined, href: href || '#', scroll: false, "$active": active, "$color": iconColor, "$disabled": disabled, "$hasIcon": !!icon, "$size": size },
         icon && React.createElement(IconWrapper, { "$bg": bgColor }, icon),
         React.createElement(P, { "$fontSize": fontSize, "$lineHeight": lineHeight, "$semiBold": true }, label)));
 };
-const Element = styled.div `
+const Element = styled(Link) `
   position: relative;
   display: flex;
   align-items: center;

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

@@ -6,5 +6,6 @@ export interface CalendarDateProps {
     startTime?: string;
     endTime?: string;
     sx?: string;
+    size?: 'small' | 'large';
 }
-export declare const CalendarDate: ({ monthAbbreviation, date, dayOfWeek, startTime, endTime, sx, }: CalendarDateProps) => React.JSX.Element;
+export declare const CalendarDate: ({ monthAbbreviation, date, dayOfWeek, startTime, endTime, sx, size, }: CalendarDateProps) => React.JSX.Element;

package/dist/components/surfaces/calendar_date/calendar_date.js

@@ -2,13 +2,15 @@
 import React from 'react';
 import styled from 'styled-components';
 import { H, P } from '../../atoms/typography';
-export const CalendarDate = ({ monthAbbreviation, date, dayOfWeek, startTime, endTime, sx, }) => {
+export const CalendarDate = ({ monthAbbreviation, date, dayOfWeek, startTime, endTime, sx, size = 'large', }) => {
     return (React.createElement(Container, { "$sx": sx },
-        React.createElement(CalendarContainer, null,
-            React.createElement(MonthContainer, null,
-                React.createElement(H.Seven, { "$color": "white", "$textAlign": "center", sx: "font-weight: 600;" }, monthAbbreviation)),
-            React.createElement(DateContainer, null,
-                React.createElement(H.One, { "$textAlign": "center", sx: "font-weight: 600;" }, date))),
+        React.createElement(CalendarContainer, { "$size": size },
+            React.createElement(MonthContainer, { "$size": size },
+                size === 'large' && (React.createElement(H.Seven, { "$color": "white", "$textAlign": "center", "$semiBold": true }, monthAbbreviation)),
+                size === 'small' && (React.createElement(P, { "$color": "white", "$textAlign": "center", "$fontSize": 14 }, monthAbbreviation))),
+            React.createElement(DateContainer, { "$size": size },
+                size === 'large' && (React.createElement(H.One, { "$textAlign": "center", "$semiBold": true }, date)),
+                size === 'small' && (React.createElement(H.Six, { "$color": "grey-2", "$textAlign": "center" }, date)))),
         dayOfWeek && startTime && endTime && (React.createElement(TimeContainer, null,
             React.createElement(P, { as: "span", "$color": "red-5" }, `${dayOfWeek}, ${startTime} -> ${endTime}`)))));
 };
@@ -22,18 +24,21 @@ const Container = styled.div `
 const CalendarContainer = styled.div `
   display: flex;
   flex-direction: column;
-  width: 120px;
+
+  ${({ $size }) => ($size === 'large' ? 'width: 120px;' : 'width: 64px;')}
 `;
 const MonthContainer = styled.div `
-  padding: 8px 16px;
   background-color: var(--color-red-5);
   border-radius: 16px 16px 0 0;
+
+  ${({ $size }) => $size === 'large' ? 'padding: 8px 16px;' : 'padding: 2px 8px;'}
 `;
 const DateContainer = styled.div `
-  padding: 8px 16px;
   background-color: white;
   border-radius: 0 0 16px 16px;
   box-shadow: var(--elevation-3);
+
+  ${({ $size }) => $size === 'large' ? 'padding: 8px 16px;' : 'padding: 2px 16px;'}
 `;
 const TimeContainer = styled.div `
   margin-top: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "1.0.0",
+  "version": "1.0.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/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);
-    }
-};