@soul-refiner/design-system 2.3.11 → 2.3.13

package/dist/components/input/calendar/calendar.js

@@ -1,5 +1,5 @@
 "use client";
-"use strict";var React=require("react"),styled=require("styled-components"),date$1=require("../../../common/date.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),chevron_left=require("../../../icons/arrow/chevron_left.js"),chevron_right=require("../../../icons/arrow/chevron_right.js"),calendar=require("../../../icons/time/calendar.js"),date=require("../../../utils/date.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const CalendarInput=({selectedDate:e,onSelect:t,disablePastDates:l})=>{const o=new Date;o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0),new Date(o).setDate(1);const a=React__default.default.useRef(null),[r,n]=React__default.default.useState(!1),[d,i]=React__default.default.useState(()=>e?.toDateString()||(new Date).toDateString()),[u,c]=React__default.default.useState(()=>e?.toDateString()||(new Date).toDateString());React__default.default.useEffect(()=>{c(e?.toDateString()||(new Date).toDateString())},[e]);const s=e=>{var e=e.target,t=e.getAttribute("data-day"),a=e.getAttribute("data-month"),e=e.getAttribute("data-year");a=new Date(a+`-${t}-`+e),c(a.toDateString())};var f=date.buildCalendar(new Date(d).getMonth()+1,new Date(d).getFullYear()),[p,g,y]=(e||new Date).toLocaleString("default",{year:"2-digit",month:"2-digit",day:"2-digit"}).split("/");return React__default.default.createElement(Wrapper,{onBlurCapture:e=>{a?.current&&!a?.current?.contains(e.relatedTarget)&&n(!1)},ref:a,tabIndex:0},React__default.default.createElement(InputWrapper,null,React__default.default.createElement(Input,{value:e?p+` / ${g} / `+y:"",onFocus:()=>n(e=>!e),style:{letterSpacing:"1px",fontSize:"16px"},readOnly:!0}),React__default.default.createElement(calendar.Calendar,null)),r&&React__default.default.createElement(DateSelector,null,React__default.default.createElement(InnerWrapper,null,React__default.default.createElement("div",null,React__default.default.createElement(MonthBar,null,React__default.default.createElement(Arrow,{onClick:()=>{i(e=>{e=new Date(e);return e.setMonth(e.getMonth()-1),e.toDateString()})}},React__default.default.createElement(chevron_left.ChevronLeft,{size:24})),React__default.default.createElement(paragraph.P,null,Object.values(date$1.MONTHS)[Math.max(0,Math.min(new Date(d).getMonth(),11))]+" "+new Date(d).getFullYear()),React__default.default.createElement(Arrow,{onClick:()=>{i(e=>{e=new Date(e);return e.setMonth(e.getMonth()+1),e.toDateString()})}},React__default.default.createElement(chevron_right.ChevronRight,{size:24}))),React__default.default.createElement(WeekdayWrapper,null,Object.values(date$1.WEEKDAYS).map(e=>React__default.default.createElement(paragraph.P,{key:e},e))),React__default.default.createElement(Calendar,null,f.map((e,t)=>React__default.default.createElement(Week,{key:"week-"+t.toString(36)},e.map((e,t)=>{var a=new Date(`${e[1]}-${e[2]}-`+e[0]),r=0<o.getTime()-a.getTime(),n=e[1]!==date.zeroPad(new Date(d).getMonth()+1,2),r=l?r:n,n=Math.abs(a.getTime()-o.getTime())<.5,a=new Date(u).getTime()===a.getTime();return React__default.default.createElement(Day,{className:((n?"today":"")+(r?" not-current":"")+(a?" selected":"")).trim(),"data-day":e[2],"data-month":e[1],"data-year":e[0],key:"day-"+t.toString(36),onClick:s},(""+e[2]).startsWith("0")?(""+e[2])[1]:e[2])})))),React__default.default.createElement(BottomWrapper,null,React__default.default.createElement(button.Button,{onClick:()=>{c(e?.toDateString()||(new Date).toDateString()),n(!1)},size:"small",sx:"width: 80px;",type:"outlined"},"Cancel"),React__default.default.createElement(button.Button,{onClick:()=>{t(new Date(u)),n(!1)},size:"small",sx:"width: 80px;"},"Apply"))))))},Wrapper=styled.styled.div`
+"use strict";var React=require("react"),styled=require("styled-components"),date$1=require("../../../common/date.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),chevron_left=require("../../../icons/arrow/chevron_left.js"),chevron_right=require("../../../icons/arrow/chevron_right.js"),calendar=require("../../../icons/time/calendar.js"),date=require("../../../utils/date.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const CalendarInput=({selectedDate:e,onSelect:t,disablePastDates:l})=>{const o=new Date;o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0),new Date(o).setDate(1);const a=React__default.default.useRef(null),[r,n]=React__default.default.useState(!1),[d,i]=React__default.default.useState(()=>e?.toDateString()||(new Date).toDateString()),[u,c]=React__default.default.useState(()=>e?.toDateString()||(new Date).toDateString());React__default.default.useEffect(()=>{c(e?.toDateString()||(new Date).toDateString())},[e]);const s=e=>{var e=e.target,t=e.getAttribute("data-day"),a=e.getAttribute("data-month"),e=e.getAttribute("data-year");a=new Date(a+`-${t}-`+e),c(a.toDateString())};var f=date.buildCalendar(new Date(d).getMonth()+1,new Date(d).getFullYear()),[p,g,y]=(e||new Date).toLocaleString("default",{year:"2-digit",month:"2-digit",day:"2-digit"}).split("/");return React__default.default.createElement(Wrapper,{onBlurCapture:e=>{a?.current&&!a?.current?.contains(e.relatedTarget)&&n(!1)},ref:a,tabIndex:0},React__default.default.createElement(InputWrapper,null,React__default.default.createElement(Input,{value:e?p+` / ${g} / `+y:"",onFocus:()=>n(e=>!e),style:{letterSpacing:"1px",fontSize:"16px",textAlign:"center"},readOnly:!0}),React__default.default.createElement(calendar.Calendar,null)),r&&React__default.default.createElement(DateSelector,null,React__default.default.createElement(InnerWrapper,null,React__default.default.createElement("div",null,React__default.default.createElement(MonthBar,null,React__default.default.createElement(Arrow,{onClick:()=>{i(e=>{e=new Date(e);return e.setMonth(e.getMonth()-1),e.toDateString()})}},React__default.default.createElement(chevron_left.ChevronLeft,{size:24})),React__default.default.createElement(paragraph.P,null,Object.values(date$1.MONTHS)[Math.max(0,Math.min(new Date(d).getMonth(),11))]+" "+new Date(d).getFullYear()),React__default.default.createElement(Arrow,{onClick:()=>{i(e=>{e=new Date(e);return e.setMonth(e.getMonth()+1),e.toDateString()})}},React__default.default.createElement(chevron_right.ChevronRight,{size:24}))),React__default.default.createElement(WeekdayWrapper,null,Object.values(date$1.WEEKDAYS).map(e=>React__default.default.createElement(paragraph.P,{key:e},e))),React__default.default.createElement(Calendar,null,f.map((e,t)=>React__default.default.createElement(Week,{key:"week-"+t.toString(36)},e.map((e,t)=>{var a=new Date(`${e[1]}-${e[2]}-`+e[0]),r=0<o.getTime()-a.getTime(),n=e[1]!==date.zeroPad(new Date(d).getMonth()+1,2),r=l?r:n,n=Math.abs(a.getTime()-o.getTime())<.5,a=new Date(u).getTime()===a.getTime();return React__default.default.createElement(Day,{className:((n?"today":"")+(r?" not-current":"")+(a?" selected":"")).trim(),"data-day":e[2],"data-month":e[1],"data-year":e[0],key:"day-"+t.toString(36),onClick:s},(""+e[2]).startsWith("0")?(""+e[2])[1]:e[2])})))),React__default.default.createElement(BottomWrapper,null,React__default.default.createElement(button.Button,{onClick:()=>{c(e?.toDateString()||(new Date).toDateString()),n(!1)},size:"small",sx:"width: 80px;",type:"outlined"},"Cancel"),React__default.default.createElement(button.Button,{onClick:()=>{t(new Date(u)),n(!1)},size:"small",sx:"width: 80px;"},"Apply"))))))},Wrapper=styled.styled.div`
   position: relative;
   width: fit-content;
   font-family: var(--font-inter);

package/dist/components/media/audio-playlist/audio-playlist.js

@@ -1,7 +1,10 @@
-"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),arrow_up=require("../../../icons/arrow/arrow_up.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),audioPlayer=require("../audio-player/audio-player.js"),playlistItem=require("./playlist-item.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),styled__default=_interopDefaultCompat(styled);const AudioPlaylist=({activeIndex:e,onProgress:t,playlist:a,previewImage:l,setMediaItem:i,subtitle:r,title:d})=>{var n="undefined"!=typeof window?window:null;const o=a?.[e],[u,p]=React__default.default.useState(!1),[s,c]=React__default.default.useState(!1),[f,_]=React__default.default.useState(0);return React__default.default.createElement(Wrapper,{$fullscreen:u},React__default.default.createElement(ThumbnailWrapper,null,React__default.default.createElement(Image__default.default,{alt:"thumbnail",height:400,width:n?.innerWidth||500,src:l}),React__default.default.createElement(box.Box,{$dir:"column",sx:"padding: 100px 0px 160px; position: relative; z-index: 2; margin: 0px 160px;"},React__default.default.createElement(heading.H,{$bold:!0,$color:"white",$fontSize:64,$lineHeight:96},d),React__default.default.createElement(heading.H,{$color:"grey-8",$fontSize:28,$lineHeight:36,$semiBold:!0},r))),React__default.default.createElement(PlaylistWrapper,null,a.map((e,t)=>React__default.default.createElement(playlistItem.PlaylistItem,{duration:e.duration,key:e.id,playing:e.id===o?.id&&s,progress:f,onPause:()=>c(!1),onPlay:()=>{i(t),c(!0)},title:e.title,thumbnail:e.thumbnail}))),React__default.default.createElement(Shade,{$isFullscreen:u},React__default.default.createElement(Button,{onClick:()=>p(e=>!e)},u?React__default.default.createElement(arrow_up.ArrowUp,{color:"grey-0",size:24}):React__default.default.createElement(chevron_down.ChevronDown,{color:"white",size:24}))),!!o&&React__default.default.createElement(BottomBarWrapper,null,React__default.default.createElement(audioPlayer.AudioPlayer,{onListen:e=>{_(e),t&&t(e)},onPause:()=>c(!1),onPlay:()=>c(!0),playing:s,progress:f,src:o.src,thumbnail:o.thumbnail,title:o.title})))},Wrapper=styled__default.default.div`
+"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),arrow_up=require("../../../icons/arrow/arrow_up.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),audioPlayer=require("../audio-player/audio-player.js"),playlistItem=require("./playlist-item.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),styled__default=_interopDefaultCompat(styled);const AudioPlaylist=({activeIndex:e,onProgress:t,playlist:a,previewImage:l,setMediaItem:i,subtitle:r,title:d})=>{var o="undefined"!=typeof window?window:null;const n=a?.[e],[u,p]=React__default.default.useState(!1),[s,c]=React__default.default.useState(!1),[f,_]=React__default.default.useState(0);return React__default.default.createElement(Wrapper,{$fullscreen:u},React__default.default.createElement(ThumbnailWrapper,null,React__default.default.createElement(Image__default.default,{alt:"thumbnail",height:400,width:o?.innerWidth||500,src:l}),React__default.default.createElement(box.Box,{$dir:"column",sx:"padding: 100px 0px 160px; position: relative; z-index: 2; margin: 0px 160px;"},React__default.default.createElement(heading.H,{$bold:!0,$color:"white",$fontSize:64,$lineHeight:96},d),React__default.default.createElement(heading.H,{$color:"grey-8",$fontSize:28,$lineHeight:36,$semiBold:!0},r))),React__default.default.createElement(PlaylistWrapper,null,a.map((e,t)=>React__default.default.createElement(playlistItem.PlaylistItem,{duration:e.duration,key:e.id,playing:e.id===n?.id&&s,progress:f,onPause:()=>c(!1),onPlay:()=>{i(t),c(!0)},title:e.title,thumbnail:e.thumbnail}))),React__default.default.createElement(Shade,{$isFullscreen:u},React__default.default.createElement(Button,{onClick:()=>p(e=>!e)},u?React__default.default.createElement(arrow_up.ArrowUp,{color:"grey-0",size:24}):React__default.default.createElement(chevron_down.ChevronDown,{color:"white",size:24}))),!!n&&React__default.default.createElement(BottomBarWrapper,null,React__default.default.createElement(audioPlayer.AudioPlayer,{onListen:e=>{_(e),t&&t(e)},onPause:()=>c(!1),onPlay:()=>c(!0),playing:s,progress:f,src:n.src,thumbnail:n.thumbnail,title:n.title})))},Wrapper=styled__default.default.div`
   ${({$fullscreen:e})=>e?"height: 100vh;":"height: 744px;"}
   width: 100vw;
   position: relative;
+  padding-bottom: 24px;
+  overflow-y: auto;
+  overflow-x: hidden;
   background-color: var(--color-grey-0);
 `,ThumbnailWrapper=styled__default.default.div`
   width: 100%;
@@ -30,7 +33,10 @@
       background-color: white;
     }`:`padding: 96px 0px 16px;
     align-items: center;
-    justify-content: center;`}
+    justify-content: center;
+    button {
+      background-color: transparent;
+    }`}
 `,Button=styled__default.default.button`
   padding: 12px;
   appearance: none;

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

@@ -1,10 +1,12 @@
 "use client";
-"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),pause_solid=require("../../../icons/audio_video/pause_solid.js"),play_solid=require("../../../icons/audio_video/play_solid.js"),progressBar=require("../audio/progress-bar.js"),time=require("../../../utils/time.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("react-h5-audio-player/lib/styles.css");var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),styled__default=_interopDefaultCompat(styled);const PlaylistItem=({duration:e,onPause:t,onPlay:a,playing:r,progress:l,thumbnail:o,title:i})=>{var d=r?t:a;return React__default.default.createElement(ItemWrapper,{$playing:r,onClick:d},React__default.default.createElement(box.Box,{$gap:24,$dir:"row",$align:"center"},React__default.default.createElement(Image__default.default,{alt:"",height:64,src:o,width:64,style:{height:64,marginRight:8,borderRadius:8}}),React__default.default.createElement(box.Box,{$align:"center",sx:"flex: 1 1 210px;"},r?React__default.default.createElement(Button,{onClick:t},React__default.default.createElement(pause_solid.PauseSolid,{color:"white",size:24})):React__default.default.createElement(Button,{onClick:a},React__default.default.createElement(play_solid.PlaySolid,{color:"white",size:24})),React__default.default.createElement(paragraph.P,{$bold:!0,$color:"white",$fontSize:14,$lineHeight:20,$textClampLines:1,sx:"margin-right: 32px;"},i))),React__default.default.createElement(box.Box,{$align:"center",sx:"flex: 3; margin-left: auto;"},React__default.default.createElement(paragraph.P,{$color:"grey-9",$fontSize:10,$lineHeight:14,$sx:"flex: 0; width: fit-content; min-width: 56px;"},time.secondsToTimestamp(e)),React__default.default.createElement(progressBar.AudioProgressBar,{duration:e||0,progress:r?l:0})))},ItemWrapper=styled__default.default.button`
+"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),pause_solid=require("../../../icons/audio_video/pause_solid.js"),play_solid=require("../../../icons/audio_video/play_solid.js"),progressBar=require("../audio/progress-bar.js"),time=require("../../../utils/time.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("react-h5-audio-player/lib/styles.css");var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image),styled__default=_interopDefaultCompat(styled);const PlaylistItem=({duration:e,onPause:t,onPlay:a,playing:r,progress:l,thumbnail:o,title:i})=>{var d=r?t:a;return React__default.default.createElement(ItemWrapper,{$playing:r,onClick:d},React__default.default.createElement(box.Box,{$gap:24,$dir:"row",$align:"center"},React__default.default.createElement(Image__default.default,{alt:"",height:64,src:o,width:64,style:{height:64,marginRight:8,borderRadius:8}}),React__default.default.createElement(box.Box,{$align:"center",sx:"flex: 1 1 250px; width: 250px;"},r?React__default.default.createElement(Button,{onClick:t},React__default.default.createElement(pause_solid.PauseSolid,{color:"white",size:24})):React__default.default.createElement(Button,{onClick:a},React__default.default.createElement(play_solid.PlaySolid,{color:"white",size:24})),React__default.default.createElement(paragraph.P,{$bold:!0,$color:"white",$fontSize:14,$lineHeight:20,$textClampLines:1,sx:"margin-right: 32px;"},i))),React__default.default.createElement(box.Box,{$align:"center",sx:"flex: 3; margin-left: auto;"},React__default.default.createElement(paragraph.P,{$color:"grey-9",$fontSize:10,$lineHeight:14,$sx:"flex: 0; width: fit-content; min-width: 56px;"},time.secondsToTimestamp(e)),React__default.default.createElement(progressBar.AudioProgressBar,{duration:e||0,progress:r?l:0})))},ItemWrapper=styled__default.default.button`
   padding: 16px 32px;
   display: flex;
   flex-direction: row;
   align-items: center;
   border-radius: 8px;
+  border: none;
+  cursor: pointer;
   ${({$playing:e})=>e?"background-color: var(--color-grey-2);":`background-color: transparent;
     &:hover {
       background-color: var(--color-grey-1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "2.3.11",
+  "version": "2.3.13",
   "main": "dist/index.js",
   "types": "dist/src/index.d.ts",
   "license": "MIT",