@ap-gen/ui 1.0.5 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/date-picker/CalendarRangeSquare.d.ts +10 -0
- package/dist/components/date-picker/index.d.ts +14 -0
- package/dist/components/date-picker/input.d.ts +0 -0
- package/dist/components/date-picker/month.d.ts +14 -0
- package/dist/components/date-picker/single.d.ts +8 -0
- package/dist/components/date-picker/year.d.ts +3 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/hooks/useCalendar.d.ts +3 -0
- package/dist/index.js +201 -49
- package/dist/index.js.map +1 -1
- package/dist/provider/CalendarProvider.d.ts +1 -0
- package/esm/index.mjs +201 -51
- package/esm/index.mjs.map +1 -1
- package/package.json +1 -1
package/esm/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import React__default, { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, forwardRef, useImperativeHandle, useId, useLayoutEffect } from 'react';
|
|
3
|
+
import React__default, { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, forwardRef, useImperativeHandle, useId, useLayoutEffect, memo } from 'react';
|
|
4
4
|
import { OverlayProvider } from '@toss/use-overlay';
|
|
5
5
|
import { ThemeProvider, css, useTheme } from '@emotion/react';
|
|
6
6
|
import styled from '@emotion/styled';
|
|
@@ -22,7 +22,7 @@ const getTrueDarkTheme=brand=>{const theme$1=brand==="afin"?theme.afin:theme.sae
|
|
|
22
22
|
|
|
23
23
|
const ColorThemeContext=/*#__PURE__*/createContext({theme:"light",onChange:()=>{},brand:"afin"});const ColorThemeProvider=({children})=>{const{theme,onChange,brand}=useContext(ColorThemeContext);const colors=useMemo(()=>{return applyThemeColor(theme,brand)},[theme,brand]);return /*#__PURE__*/jsx(ThemeProvider,{theme:{colors:colors},children:children})};
|
|
24
24
|
|
|
25
|
-
const useCalendar=()=>{const today=new Date;const[month,setMonth]=useState(today.getMonth()+1);const[year,setYear]=useState(new Date().getFullYear());const[monthData,setMonthData]=useState(getMonthDays());const[yearData,setYearData]=useState(getYearMonths());const[weekData,setWeekData]=useState(getWeekDays());const prevMonth=()=>{if(month===1){setYear(year-1);setMonth(12);}else {setMonth(month-1);}};const nextMonth=()=>{if(month===12){setYear(year+1);setMonth(1);}else {setMonth(month+1);}};useEffect(()=>{setMonthData(getMonthDays(month));setYearData(getYearMonths());},[month,year]);function getMonthDays(targetMonth){const weeks=[];const firstDay=new Date(
|
|
25
|
+
const padStart=(str,length,pad)=>{return str.length>=length?str:padStart(pad+str,length,pad)};const useCalendar=()=>{const today=new Date;const[month,setMonth]=useState(today.getMonth()+1);const[year,setYear]=useState(new Date().getFullYear());const[monthData,setMonthData]=useState(getMonthDays());const[yearData,setYearData]=useState(getYearMonths());const[weekData,setWeekData]=useState(getWeekDays());const[nextMonthData,setNextMonthData]=useState(getMonthDays(month+1));const prevMonth=()=>{if(month===1){setYear(year-1);setMonth(12);}else {setMonth(month-1);}};const nextMonth=()=>{if(month===12){setYear(year+1);setMonth(1);}else {setMonth(month+1);}};useEffect(()=>{setMonthData(getMonthDays(month));setYearData(getYearMonths());setNextMonthData(getMonthDays(month===12?1:month+1));},[month,year]);function getMonthDays(targetMonth){const weeks=[];const targetYear=targetMonth===1&&month===12?year+1:year;const firstDay=new Date(targetYear,targetMonth?targetMonth-1:month-1,1);let start=1-firstDay.getDay();let end=7-firstDay.getDay();while(weeks.length<6){const week=[];for(let day=start;day<=end;day++){const currentDate=new Date(targetYear,targetMonth?targetMonth-1:month-1,day);const dayObj={isCurrentMonth:currentDate.getMonth()===(targetMonth?targetMonth-1:month-1),isToday:currentDate.toDateString()===new Date().toDateString(),day:currentDate.getDate(),week:weeks.length,date:currentDate.getFullYear()+"-"+padStart(currentDate.getMonth()+1+"",2,"0")+"-"+padStart(currentDate.getDate()+"",2,"0")};week.push(dayObj);}weeks.push(week);start=end+1;end=end+7;}return weeks}function getYearMonths(){const months=[];for(let i=1;i<=12;i++){months.push(getMonthDays(i));}return months}function getWeekDays(){const days=[];for(let i=1;i<=7;i++){const dayObj={isCurrentMonth:false,isToday:false,day:i,week:0,date:""};days.push(dayObj);}return days}return {month,setMonth,year,setYear,prevMonth,nextMonth,getMonthDays,getYearMonths,yearData,monthData,setMonthData,weekData,setWeekData,nextMonthData,setNextMonthData}};
|
|
26
26
|
|
|
27
27
|
const CalendarContext=/*#__PURE__*/createContext(null);const CalendarProvider=({children})=>{const calendar=useCalendar();return /*#__PURE__*/jsx(CalendarContext.Provider,{value:calendar,children:children})};
|
|
28
28
|
|
|
@@ -1458,7 +1458,7 @@ var v$2="4.8.0";var meta$1={g:"LottieFiles AE 2.0.4",a:"",k:"",d:"",tc:""};var f
|
|
|
1458
1458
|
|
|
1459
1459
|
var v$1="4.8.0";var meta={g:"LottieFiles AE 2.0.4",a:"",k:"",d:"",tc:""};var fr=30;var ip=0;var op=60;var w$1=100;var h$1=100;var nm="loading-white-spot";var ddd=0;var assets=[];var layers=[{ddd:0,ind:1,ty:4,nm:"blue Outlines",sr:1,ks:{o:{a:0,k:100,ix:11},r:{a:1,k:[{i:{x:[.833],y:[.833]},o:{x:[.167],y:[.167]},t:0,s:[0]},{t:60.060546875,s:[360]}],ix:10},p:{a:0,k:[50,50,0],ix:2},a:{a:0,k:[31,31,0],ix:1},s:{a:0,k:[147,147,100],ix:6}},ao:0,shapes:[{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[0,-12.979],[12.979,0],[0,12.979],[-12.979,0]],o:[[0,12.979],[-12.979,0],[0,-12.979],[12.979,0]],v:[[23.5,0],[0,23.5],[-23.5,0],[0,-23.5]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false},{ty:"st",c:{a:0,k:[.1922,.5098,.9647,1],ix:3},o:{a:0,k:100,ix:4},w:{a:0,k:8,ix:5},lc:2,lj:1,ml:10,bm:0,nm:"Stroke 1",mn:"ADBE Vector Graphic - Stroke",hd:false},{ty:"tr",p:{a:0,k:[31,31],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform"}],nm:"Group 1",np:2,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:false},{ty:"tm",s:{a:1,k:[{i:{x:[.799],y:[1]},o:{x:[.602],y:[0]},t:20.021,s:[0]},{t:60.060546875,s:[100]}],ix:1},e:{a:1,k:[{i:{x:[.414],y:[1]},o:{x:[.302],y:[0]},t:0,s:[.1]},{t:50.0498046875,s:[100]}],ix:2},o:{a:0,k:-90,ix:3},m:1,ix:2,nm:"Trim Paths 1",mn:"ADBE Vector Filter - Trim",hd:false}],ip:0,op:60.0600600600601,st:0,bm:0},{ddd:0,ind:2,ty:4,nm:"grey Outlines",sr:1,ks:{o:{a:0,k:30,ix:11},r:{a:0,k:0,ix:10},p:{a:0,k:[50,50,0],ix:2},a:{a:0,k:[31,31,0],ix:1},s:{a:0,k:[147,147,100],ix:6}},ao:0,shapes:[{ty:"gr",it:[{ind:0,ty:"sh",ix:1,ks:{a:0,k:{i:[[0,-12.979],[12.979,0],[0,12.979],[-12.979,0]],o:[[0,12.979],[-12.979,0],[0,-12.979],[12.979,0]],v:[[23.5,0],[0,23.5],[-23.5,0],[0,-23.5]],c:true},ix:2},nm:"Path 1",mn:"ADBE Vector Shape - Group",hd:false},{ty:"st",c:{a:0,k:[.1922,.5098,.9647,1],ix:3},o:{a:0,k:100,ix:4},w:{a:0,k:8,ix:5},lc:1,lj:1,ml:10,bm:0,nm:"Stroke 1",mn:"ADBE Vector Graphic - Stroke",hd:false},{ty:"tr",p:{a:0,k:[31,31],ix:2},a:{a:0,k:[0,0],ix:1},s:{a:0,k:[100,100],ix:3},r:{a:0,k:0,ix:6},o:{a:0,k:100,ix:7},sk:{a:0,k:0,ix:4},sa:{a:0,k:0,ix:5},nm:"Transform"}],nm:"Group 1",np:2,cix:2,bm:0,ix:1,mn:"ADBE Vector Group",hd:false}],ip:0,op:60.0600600600601,st:0,bm:0}];var markers=[];var loadingCircleBlue = {v:v$1,meta:meta,fr:fr,ip:ip,op:op,w:w$1,h:h$1,nm:nm,ddd:ddd,assets:assets,layers:layers,markers:markers};
|
|
1460
1460
|
|
|
1461
|
-
const backgrounds={core:"color.foreground.semantic.core",coreLight:"color.background.semantic.coreTranslucent",neutral:"color.background.surface.standard",neutralOutline:"transparent",warning:"color.background.semantic.status.warning",warningLight:"color.background.semantic.status.warningTranslucent"};const contents$1={core:"color.foreground.surface.static",coreLight:"color.foreground.semantic.core",neutral:"color.foreground.neutral.primary",neutralOutline:"color.foreground.neutral.primary",warning:"color.foreground.surface.static",warningLight:"color.foreground.semantic.status.warning"};const heights$1={large:40,medium:36,small:28};const paddings={large:"0px 8px",medium:"0px 8px",small:"0px 6px"};const gaps$1={large:"2px",medium:"2px",small:"2px"};const borderRadiuses={large:"8px",medium:"8px",small:"8px"};const iconSizes$1={large:24,medium:20,small:16};const textHorizontalPaddingVariations$1={large:"4px",medium:"4px",small:"2px"};const textVariants$4={large:"BodyL_Bold",medium:"BodyM_Bold",small:"BodyS_Bold"};function Button$1({variant="core",size="large",iconLeading,iconTrailing,iconAutoFill=true,iconAutoStroke=false,children,fullWidth,disabled,onClick,loading,...props}){useTheme();const buttonRef=useRef(null);const[width,setWidth]=React__default.useState(null);useEffect(()=>{if(buttonRef.current&&!width){setWidth(buttonRef.current.clientWidth);}},[]);return /*#__PURE__*/jsx(Container$
|
|
1461
|
+
const backgrounds={core:"color.foreground.semantic.core",coreLight:"color.background.semantic.coreTranslucent",neutral:"color.background.surface.standard",neutralOutline:"transparent",warning:"color.background.semantic.status.warning",warningLight:"color.background.semantic.status.warningTranslucent"};const contents$1={core:"color.foreground.surface.static",coreLight:"color.foreground.semantic.core",neutral:"color.foreground.neutral.primary",neutralOutline:"color.foreground.neutral.primary",warning:"color.foreground.surface.static",warningLight:"color.foreground.semantic.status.warning"};const heights$1={large:40,medium:36,small:28};const paddings={large:"0px 8px",medium:"0px 8px",small:"0px 6px"};const gaps$1={large:"2px",medium:"2px",small:"2px"};const borderRadiuses={large:"8px",medium:"8px",small:"8px"};const iconSizes$1={large:24,medium:20,small:16};const textHorizontalPaddingVariations$1={large:"4px",medium:"4px",small:"2px"};const textVariants$4={large:"BodyL_Bold",medium:"BodyM_Bold",small:"BodyS_Bold"};function Button$1({variant="core",size="large",iconLeading,iconTrailing,iconAutoFill=true,iconAutoStroke=false,children,fullWidth,disabled,onClick,loading,...props}){useTheme();const buttonRef=useRef(null);const[width,setWidth]=React__default.useState(null);useEffect(()=>{if(buttonRef.current&&!width){setWidth(buttonRef.current.clientWidth);}},[]);return /*#__PURE__*/jsx(Container$t,{ref:buttonRef,"data-variant":variant,"data-size":size,"data-fullwidth":fullWidth,onClick:disabled||loading?undefined:onClick,style:{cursor:disabled||loading?"not-allowed":"pointer",opacity:disabled||loading?.3:1,width:loading?width||"auto":"auto"},whileHover:disabled||loading?{opacity:.3}:{opacity:.8},whileTap:disabled||loading?{opacity:.3}:{opacity:.6},...props,children:loading?/*#__PURE__*/jsxs(LoadingWrapper,{children:[/*#__PURE__*/jsx(Lottie,{json:JSON.stringify(variant==="neutral"||variant==="neutralOutline"?loadingCircleBlack:variant==="coreLight"?loadingCircleBlue:variant==="warningLight"?loadingCircleRed:loadingCircle),loop:true,height:iconSizes$1[size],width:iconSizes$1[size]}),/*#__PURE__*/jsxs("div",{style:{opacity:0,visibility:"hidden",display:"flex",alignItems:"center",width:"100%",gap:gaps$1[size]},children:[iconLeading&&/*#__PURE__*/jsx("div",{style:{width:iconSizes$1[size],height:iconSizes$1[size]}}),children&&/*#__PURE__*/jsx(Text,{style:{padding:`0px ${textHorizontalPaddingVariations$1[size]}`},variant:textVariants$4[size],color:contents$1[variant],children:children}),iconTrailing&&/*#__PURE__*/jsx("div",{style:{width:iconSizes$1[size],height:iconSizes$1[size]}})]})]}):/*#__PURE__*/jsxs(Fragment,{children:[iconLeading&&/*#__PURE__*/jsx(Icon,{name:iconLeading,size:iconSizes$1[size],fill:iconAutoFill?contents$1[variant]:undefined,stroke:iconAutoStroke?contents$1[variant]:undefined}),children&&/*#__PURE__*/jsx(Text,{style:{padding:`0px ${textHorizontalPaddingVariations$1[size]}`},variant:textVariants$4[size],color:contents$1[variant],children:children}),iconTrailing&&/*#__PURE__*/jsx(Icon,{name:iconTrailing,size:iconSizes$1[size],fill:iconAutoFill?contents$1[variant]:undefined,stroke:iconAutoStroke?contents$1[variant]:undefined})]})})}const LoadingWrapper=styled.div`
|
|
1462
1462
|
position: relative;
|
|
1463
1463
|
display: flex;
|
|
1464
1464
|
align-items: center;
|
|
@@ -1468,7 +1468,7 @@ const backgrounds={core:"color.foreground.semantic.core",coreLight:"color.backgr
|
|
|
1468
1468
|
> :first-of-type {
|
|
1469
1469
|
position: absolute;
|
|
1470
1470
|
}
|
|
1471
|
-
`;const Container$
|
|
1471
|
+
`;const Container$t=styled(MotionPressable)`
|
|
1472
1472
|
display: inline-flex;
|
|
1473
1473
|
justify-content: center;
|
|
1474
1474
|
align-items: center;
|
|
@@ -1492,10 +1492,10 @@ const backgrounds={core:"color.foreground.semantic.core",coreLight:"color.backgr
|
|
|
1492
1492
|
}
|
|
1493
1493
|
`;
|
|
1494
1494
|
|
|
1495
|
-
function Date$2({selected,disabled,today,modifier,dayoff,date,body}){return /*#__PURE__*/jsxs(Container$
|
|
1495
|
+
function Date$2({selected,disabled,today,modifier,dayoff,date,body}){return /*#__PURE__*/jsxs(Container$s,{selected:selected,disabled:disabled,children:[/*#__PURE__*/jsxs(DateArea$1,{children:[/*#__PURE__*/jsx(DateItem,{today:today,dayoff:dayoff,children:/*#__PURE__*/jsx(Text,{variant:"BodyM",color:dayoff&&!today?"color.foreground.semantic.status.warning":dayoff&&today||today?"color.foreground.surface.static":"color.foreground.neutral.primary",children:date})}),modifier&&/*#__PURE__*/jsx(Label,{variant:"BodyS",color:dayoff?"color.foreground.semantic.status.warning":"color.foreground.neutral.secondary",children:modifier})]}),body&&/*#__PURE__*/jsx(Body,{children:body})]})}const Label=styled(Text)`
|
|
1496
1496
|
flex: 1 0 0;
|
|
1497
1497
|
height: 18px;
|
|
1498
|
-
`;const Container$
|
|
1498
|
+
`;const Container$s=styled.div`
|
|
1499
1499
|
box-sizing: border-box;
|
|
1500
1500
|
display: flex;
|
|
1501
1501
|
flex: 1;
|
|
@@ -1531,13 +1531,13 @@ function Date$2({selected,disabled,today,modifier,dayoff,date,body}){return /*#_
|
|
|
1531
1531
|
align-self: stretch;
|
|
1532
1532
|
`;
|
|
1533
1533
|
|
|
1534
|
-
function Month(){const{monthData}=useContext(CalendarContext);const days=["일","월","화","수","목","금","토"];return /*#__PURE__*/jsxs(CalendarArea,{children:[/*#__PURE__*/jsx(DowArea,{children:days.map((dow,index)=>/*#__PURE__*/jsx(Dow$
|
|
1534
|
+
function Month$1(){const{monthData}=useContext(CalendarContext);const days=["일","월","화","수","목","금","토"];return /*#__PURE__*/jsxs(CalendarArea$1,{children:[/*#__PURE__*/jsx(DowArea$1,{children:days.map((dow,index)=>/*#__PURE__*/jsx(Dow$2,{children:/*#__PURE__*/jsx(Text,{variant:"BodyM",color:index===0?"color.foreground.semantic.status.warning":"color.foreground.neutral.secondary",children:dow})},index))}),/*#__PURE__*/jsx(CalendarColumn$1,{children:monthData.map((week,index)=>{return /*#__PURE__*/jsxs(React__default.Fragment,{children:[/*#__PURE__*/jsx(CalendarRow$1,{children:week.map((day,index)=>/*#__PURE__*/jsx(Date$2,{disabled:!day.isCurrentMonth,dayoff:index===0,today:day.isToday,date:day.day},index))},index),index!==monthData.length-1&&/*#__PURE__*/jsx(CalendarDivider,{})]},index)})})]})}const CalendarRow$1=styled.div`
|
|
1535
1535
|
display: flex;
|
|
1536
1536
|
align-items: flex-start;
|
|
1537
1537
|
gap: 8px;
|
|
1538
1538
|
flex: 1 0 0;
|
|
1539
1539
|
align-self: stretch;
|
|
1540
|
-
`;const CalendarColumn=styled.div`
|
|
1540
|
+
`;const CalendarColumn$1=styled.div`
|
|
1541
1541
|
display: flex;
|
|
1542
1542
|
flex-direction: column;
|
|
1543
1543
|
justify-content: center;
|
|
@@ -1549,19 +1549,19 @@ function Month(){const{monthData}=useContext(CalendarContext);const days=["일",
|
|
|
1549
1549
|
height: 1px;
|
|
1550
1550
|
align-self: stretch;
|
|
1551
1551
|
background-color: ${({theme})=>theme.colors.color.stroke.separator.standard};
|
|
1552
|
-
`;const DowArea=styled.div`
|
|
1552
|
+
`;const DowArea$1=styled.div`
|
|
1553
1553
|
display: flex;
|
|
1554
1554
|
align-items: flex-start;
|
|
1555
1555
|
gap: 8px;
|
|
1556
1556
|
align-self: stretch;
|
|
1557
|
-
`;const CalendarArea=styled.div`
|
|
1557
|
+
`;const CalendarArea$1=styled.div`
|
|
1558
1558
|
display: flex;
|
|
1559
1559
|
height: 842px;
|
|
1560
1560
|
flex-direction: column;
|
|
1561
1561
|
align-items: flex-start;
|
|
1562
1562
|
gap: 12px;
|
|
1563
1563
|
align-self: stretch;
|
|
1564
|
-
`;const Dow$
|
|
1564
|
+
`;const Dow$2=styled.div`
|
|
1565
1565
|
display: flex;
|
|
1566
1566
|
height: 28px;
|
|
1567
1567
|
flex-direction: column;
|
|
@@ -1570,7 +1570,7 @@ function Month(){const{monthData}=useContext(CalendarContext);const days=["일",
|
|
|
1570
1570
|
flex: 1 0 0;
|
|
1571
1571
|
`;
|
|
1572
1572
|
|
|
1573
|
-
function Year({onChange}){const{yearData}=useContext(CalendarContext);const months=["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"];const days=["일","월","화","수","목","금","토"];return /*#__PURE__*/jsx(Container$
|
|
1573
|
+
function Year$1({onChange}){const{yearData}=useContext(CalendarContext);const months=["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"];const days=["일","월","화","수","목","금","토"];return /*#__PURE__*/jsx(Container$r,{children:yearData.map((month,index)=>{return /*#__PURE__*/jsxs(MonthContainer$1,{onClick:()=>{onChange(index+1);},children:[/*#__PURE__*/jsx(MonthArea,{children:/*#__PURE__*/jsx(Text,{color:"color.foreground.neutral.secondary",variant:"BodyM_Bold",children:months[index]})}),/*#__PURE__*/jsx(WeekArea,{children:days.map((day,index)=>{return /*#__PURE__*/jsx(Dow$1,{children:/*#__PURE__*/jsx(Text,{color:"color.foreground.neutral.secondary",variant:"Caption",children:day})},index)})}),/*#__PURE__*/jsx(DateArea,{children:month.map((week,index)=>{return /*#__PURE__*/jsx(Week,{children:week.map((day,index)=>{return /*#__PURE__*/jsx(Date$1,{disabled:!day.isCurrentMonth,children:/*#__PURE__*/jsx(Text,{color:"color.foreground.neutral.primary",variant:"BodyS",children:day.day})},index)})},index)})})]},index)})})}const Container$r=styled.div`
|
|
1574
1574
|
display: flex;
|
|
1575
1575
|
align-items: flex-start;
|
|
1576
1576
|
align-content: flex-start;
|
|
@@ -1578,7 +1578,7 @@ function Year({onChange}){const{yearData}=useContext(CalendarContext);const mont
|
|
|
1578
1578
|
flex: 1 0 0;
|
|
1579
1579
|
align-self: stretch;
|
|
1580
1580
|
flex-wrap: wrap;
|
|
1581
|
-
`;const MonthContainer=styled(MotionPressable)`
|
|
1581
|
+
`;const MonthContainer$1=styled(MotionPressable)`
|
|
1582
1582
|
display: flex;
|
|
1583
1583
|
min-width: 200px;
|
|
1584
1584
|
padding: 12px;
|
|
@@ -1586,7 +1586,7 @@ function Year({onChange}){const{yearData}=useContext(CalendarContext);const mont
|
|
|
1586
1586
|
align-items: flex-start;
|
|
1587
1587
|
gap: 12px;
|
|
1588
1588
|
flex: 1 0 0;
|
|
1589
|
-
`;const Dow=styled.div`
|
|
1589
|
+
`;const Dow$1=styled.div`
|
|
1590
1590
|
display: flex;
|
|
1591
1591
|
flex-direction: column;
|
|
1592
1592
|
justify-content: center;
|
|
@@ -1625,7 +1625,7 @@ function Year({onChange}){const{yearData}=useContext(CalendarContext);const mont
|
|
|
1625
1625
|
align-items: center;
|
|
1626
1626
|
`;
|
|
1627
1627
|
|
|
1628
|
-
function Calendar(){const{month,setMonth,year,prevMonth,nextMonth,monthData}=useContext(CalendarContext);const[isMonth,setIsMonth]=useState(true);return /*#__PURE__*/jsxs(Container$
|
|
1628
|
+
function Calendar(){const{month,setMonth,year,prevMonth,nextMonth,monthData}=useContext(CalendarContext);const[isMonth,setIsMonth]=useState(true);return /*#__PURE__*/jsxs(Container$q,{children:[/*#__PURE__*/jsxs(HeaderArea$1,{children:[/*#__PURE__*/jsx(MotionPressable,{onClick:()=>{setIsMonth(!isMonth);},children:/*#__PURE__*/jsx(Text,{variant:"BodyL_Bold",color:"color.foreground.neutral.primary",children:isMonth?`${year}년 ${month}월`:`${year}년`})}),isMonth&&/*#__PURE__*/jsxs(MonthControl,{children:[/*#__PURE__*/jsx(MonthButton,{onClick:prevMonth,children:/*#__PURE__*/jsx(Icon,{size:12,fill:"color.foreground.neutral.secondary",name:"arrowBackIos"})}),/*#__PURE__*/jsx(MonthButton,{onClick:nextMonth,children:/*#__PURE__*/jsx(Icon,{size:12,fill:"color.foreground.neutral.secondary",name:"arrowForwardIos"})})]})]}),isMonth?/*#__PURE__*/jsx(Month$1,{}):/*#__PURE__*/jsx(Year$1,{onChange:month=>{setMonth(month);setIsMonth(true);console.log(monthData);}})]})}const Container$q=styled.div`
|
|
1629
1629
|
display: flex;
|
|
1630
1630
|
flex:1 0 0;
|
|
1631
1631
|
height: 890px;
|
|
@@ -1652,14 +1652,14 @@ function Calendar(){const{month,setMonth,year,prevMonth,nextMonth,monthData}=use
|
|
|
1652
1652
|
background: ${({theme})=>theme.colors.color.background.surface.standard};
|
|
1653
1653
|
`;
|
|
1654
1654
|
|
|
1655
|
-
function Card({collapsible,wide,children,containerStyle,surface,headline}){const[isCollapsed,setIsCollapsed]=useState(false);return /*#__PURE__*/jsxs(Container$
|
|
1655
|
+
function Card({collapsible,wide,children,containerStyle,surface,headline}){const[isCollapsed,setIsCollapsed]=useState(false);return /*#__PURE__*/jsxs(Container$p,{style:containerStyle,wide:wide,collapsible:collapsible,collapsed:isCollapsed,surface:surface,children:[collapsible&&/*#__PURE__*/jsxs(Top,{children:[/*#__PURE__*/jsx(Text,{style:{flex:1},variant:"BodyM",color:"color.foreground.neutral.primary",children:headline}),/*#__PURE__*/jsx(MotionPressable,{onClick:()=>setIsCollapsed(!isCollapsed),style:{rotate:isCollapsed?"180deg":"0deg",display:"flex",alignItems:"center",justifyContent:"center",padding:0,margin:0},children:/*#__PURE__*/jsx(Icon,{name:"expandMore",size:20,fill:"color.foreground.neutral.tertiary"})})]}),collapsible?!isCollapsed?children:null:children]})}const Top=styled.div`
|
|
1656
1656
|
display: flex;
|
|
1657
1657
|
padding: 8px;
|
|
1658
1658
|
justify-content: flex-end;
|
|
1659
1659
|
align-items: center;
|
|
1660
1660
|
gap: 8px;
|
|
1661
1661
|
align-self: stretch;
|
|
1662
|
-
`;const Container$
|
|
1662
|
+
`;const Container$p=styled.div`
|
|
1663
1663
|
display: flex;
|
|
1664
1664
|
width: 100%;
|
|
1665
1665
|
padding: ${({wide,collapsible,collapsed})=>{if(collapsible){if(collapsed){return wide?"4px 12px":"4px 8px"}return wide?"4px 12px 8px 12px":"4px 8px 8px 8px"}return wide?"12px":"8px"}};
|
|
@@ -1671,7 +1671,7 @@ function Card({collapsible,wide,children,containerStyle,surface,headline}){const
|
|
|
1671
1671
|
background-color: ${({surface,theme})=>surface?theme.colors.color.background.surface.standard:"transparent"};
|
|
1672
1672
|
`;
|
|
1673
1673
|
|
|
1674
|
-
function Item$3({active,label,subLabel,onClick,disabled=false}){const theme=useTheme();const toggleSwitch=()=>onClick(!active);return /*#__PURE__*/jsxs(Container$
|
|
1674
|
+
function Item$3({active,label,subLabel,onClick,disabled=false}){const theme=useTheme();const toggleSwitch=()=>onClick(!active);return /*#__PURE__*/jsxs(Container$o,{style:{opacity:disabled?.4:1},initial:"off",animate:active?"on":"off","data-isOn":active,onClick:toggleSwitch,disabled:disabled,variants:{on:{boxShadow:`inset 0 0 0 0.6px ${theme.colors.color.stroke.semantic.core}`,backgroundColor:theme.colors.color.background.semantic.coreTranslucent},off:{boxShadow:`inset 0 0 0 1px ${theme.colors.color.stroke.outline.standard}`,backgroundColor:"transparent"}},children:[subLabel&&/*#__PURE__*/jsx(Text,{variant:"Caption",color:"color.foreground.neutral.secondary",children:subLabel}),/*#__PURE__*/jsx(Text,{variant:"BodyL",color:"color.foreground.neutral.primary",children:label})]})}const Container$o=styled(MotionPressable)`
|
|
1675
1675
|
display: flex;
|
|
1676
1676
|
width: 100%;
|
|
1677
1677
|
flex: 1;
|
|
@@ -1691,7 +1691,7 @@ const CellPickerContainer=styled.div`
|
|
|
1691
1691
|
gap: 6px;
|
|
1692
1692
|
`;function CellPicker({items,columns=2,minCellWidth=120,className="",onOptionChange}){const handleChange=id=>value=>{onOptionChange===null||onOptionChange===void 0?void 0:onOptionChange(id,value);};return /*#__PURE__*/jsx(CellPickerContainer,{className:`grid auto-rows-auto ${className}`,style:{gridTemplateColumns:`repeat(${columns}, minmax(${minCellWidth}px, 1fr))`},children:items.map(option=>/*#__PURE__*/jsx(Item$3,{active:option.active,label:option.label,subLabel:option.subLabel,disabled:option.disabled,onClick:handleChange(option.id)},option.id))})}
|
|
1693
1693
|
|
|
1694
|
-
function Checkbox({type="check",value,onChange,disabled=false}){const theme=useTheme();const toggleSwitch=()=>onChange(!value);return /*#__PURE__*/jsx(Container$
|
|
1694
|
+
function Checkbox({type="check",value,onChange,disabled=false}){const theme=useTheme();const toggleSwitch=()=>onChange(!value);return /*#__PURE__*/jsx(Container$n,{style:{opacity:disabled?.4:1},"data-isOn":value,onClick:toggleSwitch,variants:{on:{backgroundColor:theme.colors.color.foreground.semantic.core,borderColor:theme.colors.color.foreground.semantic.core},off:{backgroundColor:"transparent",borderColor:theme.colors.color.stroke.outline.intense}},initial:value?"on":"off",animate:value?"on":"off",children:value&&/*#__PURE__*/jsx(Icon,{name:type==="check"?"check":"remove",fill:"color.stroke.surface.static"})})}const Container$n=styled(motion.div)`
|
|
1695
1695
|
display: flex;
|
|
1696
1696
|
justify-content: center;
|
|
1697
1697
|
align-items: center;
|
|
@@ -1747,7 +1747,7 @@ function Default({align,leadingNumber,headline,description,leadingArea,subHeadli
|
|
|
1747
1747
|
gap: 2px;
|
|
1748
1748
|
`;
|
|
1749
1749
|
|
|
1750
|
-
function Radio({value,onChange,disabled=false}){const theme=useTheme();const toggleSwitch=()=>onChange(!value);return /*#__PURE__*/jsx(Container$
|
|
1750
|
+
function Radio({value,onChange,disabled=false}){const theme=useTheme();const toggleSwitch=()=>onChange(!value);return /*#__PURE__*/jsx(Container$m,{style:{opacity:disabled?.4:1},"data-isOn":value,onClick:toggleSwitch,variants:{on:{boxShadow:`inset 0px 0px 0px 6px ${theme.colors.color.foreground.semantic.core}`,backgroundColor:theme.colors.color.foreground.surface.static},off:{backgroundColor:"transparent",boxShadow:`inset 0px 0px 0px 2px ${theme.colors.color.stroke.outline.intense}`}},initial:"off",animate:value?"on":"off"})}const Container$m=styled(motion.div)`
|
|
1751
1751
|
display: flex;
|
|
1752
1752
|
justify-content: center;
|
|
1753
1753
|
align-items: center;
|
|
@@ -1809,7 +1809,7 @@ function Tab$1({minimized=false,activated=false,description,tabName,iconName,onC
|
|
|
1809
1809
|
|
|
1810
1810
|
const List$1={Default,Compact,Tab: Tab$1};
|
|
1811
1811
|
|
|
1812
|
-
function Popover({children,type,options,headline,primaryButton,secondaryButton,onChange,value}){return /*#__PURE__*/jsxs(Container$
|
|
1812
|
+
function Popover({children,type,options,headline,primaryButton,secondaryButton,onChange,value}){return /*#__PURE__*/jsxs(Container$l,{type:type,children:[headline&&/*#__PURE__*/jsx(HeaderArea,{type:type,children:/*#__PURE__*/jsx(Text,{color:"color.foreground.neutral.secondary",variant:type==="component"?"BodyM":"BodyS",children:headline})}),options&&type!=="component"&&/*#__PURE__*/jsx(ItemArea,{children:options.map((option,index)=>/*#__PURE__*/jsx(List$1.Compact,{type:type==="shortcut"?"icon":"radio",label:option.label,activated:option.value===value,iconName:type==="shortcut"?"add":undefined,onChange:()=>onChange===null||onChange===void 0?void 0:onChange(option.value)},index))}),children&&type==="component"&&/*#__PURE__*/jsx(ComnponentArea,{children:/*#__PURE__*/jsx(ComponentPlaceHolder,{children:children})}),type==="component"&&(primaryButton||secondaryButton)&&/*#__PURE__*/jsxs(ButtonArea,{children:[primaryButton&&primaryButton,secondaryButton&&secondaryButton]})]})}const Container$l=styled.div`
|
|
1813
1813
|
display: flex;
|
|
1814
1814
|
width: 100%;
|
|
1815
1815
|
${({type})=>type!=="component"&&"max-height: 400px;"}
|
|
@@ -1864,9 +1864,9 @@ function Popover({children,type,options,headline,primaryButton,secondaryButton,o
|
|
|
1864
1864
|
*/const useClickOutside$1=(ref,handler,enabled=true,ignoreIds=[])=>{useEffect(()=>{if(!enabled)return;const listener=event=>{// Do nothing if clicking ref's element or descendent elements
|
|
1865
1865
|
if(!ref.current||ref.current.contains(event.target)){return}if(ignoreIds.includes(event.target.id)){return}handler(event);};document.addEventListener("mousedown",listener);document.addEventListener("touchstart",listener);return ()=>{document.removeEventListener("mousedown",listener);document.removeEventListener("touchstart",listener);}},[ref,handler,enabled]);};var useClickOutside$2 = useClickOutside$1;
|
|
1866
1866
|
|
|
1867
|
-
const heightVariants$1={small:"28px",medium:"36px",large:"40px"};const iconSizeVariants$1={small:16,medium:20,large:20};const textSizeVariants$2={small:"BodyS",medium:"BodyM",large:"BodyL"};const horizontalPaddingVariants={small:"6px",medium:"8px",large:"8px"};function ComboBox({size,disabled,placeholder,value,containerStyle,options=[],onChange,icon,showDropdownIcon=true}){var _options_find;const[open,setOpen]=useState(false);const containerRef=useRef(null);useClickOutside$2(containerRef,()=>setOpen(false),open);const handleSelect=value=>{onChange===null||onChange===void 0?void 0:onChange(value);setOpen(false);};return /*#__PURE__*/jsxs(Container$
|
|
1867
|
+
const heightVariants$1={small:"28px",medium:"36px",large:"40px"};const iconSizeVariants$1={small:16,medium:20,large:20};const textSizeVariants$2={small:"BodyS",medium:"BodyM",large:"BodyL"};const horizontalPaddingVariants={small:"6px",medium:"8px",large:"8px"};function ComboBox({size,disabled,placeholder,value,containerStyle,options=[],onChange,icon,showDropdownIcon=true}){var _options_find;const[open,setOpen]=useState(false);const containerRef=useRef(null);useClickOutside$2(containerRef,()=>setOpen(false),open);const handleSelect=value=>{onChange===null||onChange===void 0?void 0:onChange(value);setOpen(false);};return /*#__PURE__*/jsxs(Container$k,{ref:containerRef,children:[/*#__PURE__*/jsxs(Wrapper$l,{size:size,disabled:disabled,style:containerStyle,onClick:()=>setOpen(!open),children:[icon&&/*#__PURE__*/jsx(Icon,{name:icon,size:iconSizeVariants$1[size],fill:"color.foreground.neutral.tertiary"}),/*#__PURE__*/jsx(SelectWrapper$1,{children:/*#__PURE__*/jsx(PlaceholderText,{color:value?"color.foreground.neutral.primary":"color.foreground.neutral.tertiary",variant:textSizeVariants$2[size],children:value?(_options_find=options.find(option=>option.value===value))===null||_options_find===void 0?void 0:_options_find.label:placeholder})}),showDropdownIcon&&/*#__PURE__*/jsx(Icon,{style:{transform:open?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease-in-out"},name:"expandMore",size:iconSizeVariants$1[size],fill:"color.foreground.neutral.tertiary"})]}),open?/*#__PURE__*/jsx(PopoverWrapper$2,{children:/*#__PURE__*/jsx(AnimatePresence,{mode:"wait",children:/*#__PURE__*/jsx(motion.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2},style:{paddingBottom:"20px"},children:/*#__PURE__*/jsx(Popover,{type:"list",options:options.map(option=>({label:option.label,value:option.value})),value:value,onChange:handleSelect})},"popover")})}):null]})}const Container$k=styled.div`
|
|
1868
1868
|
position: relative;
|
|
1869
|
-
`;const PopoverWrapper$
|
|
1869
|
+
`;const PopoverWrapper$2=styled.div`
|
|
1870
1870
|
position: absolute;
|
|
1871
1871
|
top: 100%;
|
|
1872
1872
|
padding-top: 4px;
|
|
@@ -1925,13 +1925,13 @@ function Description$1({label,labelProps,subValue,subValueProps,value,valueProps
|
|
|
1925
1925
|
flex: 1 0 0;
|
|
1926
1926
|
`;
|
|
1927
1927
|
|
|
1928
|
-
const dividerSizes={line:"1px",fill:"8px"};function Divider$1({type,padding}){return /*#__PURE__*/jsx(Wrapper$j,{padding:padding,children:/*#__PURE__*/jsx(Container$
|
|
1928
|
+
const dividerSizes={line:"1px",fill:"8px"};function Divider$1({type,padding}){return /*#__PURE__*/jsx(Wrapper$j,{padding:padding,children:/*#__PURE__*/jsx(Container$j,{type:type})})}const Wrapper$j=styled.div`
|
|
1929
1929
|
display: flex;
|
|
1930
1930
|
width: 100%;
|
|
1931
1931
|
padding: ${p=>p.padding?"8px 0px":"0px"};
|
|
1932
1932
|
flex-direction: column;
|
|
1933
1933
|
align-items: flex-start;
|
|
1934
|
-
`;const Container$
|
|
1934
|
+
`;const Container$j=styled.div`
|
|
1935
1935
|
width: 100%;
|
|
1936
1936
|
height: ${p=>dividerSizes[p.type]};
|
|
1937
1937
|
background: ${({theme})=>theme.colors.color.stroke.separator.standard};
|
|
@@ -1954,7 +1954,7 @@ function Empty({type}){return /*#__PURE__*/jsxs(Wrapper$i,{type:type,children:[/
|
|
|
1954
1954
|
flex: 1;
|
|
1955
1955
|
`;
|
|
1956
1956
|
|
|
1957
|
-
const headlineTextVariants={large:"BodyL_Bold",medium:"BodyM_Bold",small:"BodyS_Bold"};const descriptionTextVariants={large:"BodyS",medium:"Caption",small:"Caption"};const trailingTextVariants={large:"BodyS",medium:"BodyS",small:"Caption"};const headlineTextColors={primary:"color.foreground.neutral.primary",secondary:"color.foreground.neutral.secondary"};function List({size="large",color="primary",leading=null,headline,description,traillingText,trailling=null}){return /*#__PURE__*/jsxs(Container$
|
|
1957
|
+
const headlineTextVariants={large:"BodyL_Bold",medium:"BodyM_Bold",small:"BodyS_Bold"};const descriptionTextVariants={large:"BodyS",medium:"Caption",small:"Caption"};const trailingTextVariants={large:"BodyS",medium:"BodyS",small:"Caption"};const headlineTextColors={primary:"color.foreground.neutral.primary",secondary:"color.foreground.neutral.secondary"};function List({size="large",color="primary",leading=null,headline,description,traillingText,trailling=null}){return /*#__PURE__*/jsxs(Container$i,{children:[leading,/*#__PURE__*/jsxs(TextArea$1,{children:[headline&&/*#__PURE__*/jsx(Headline,{variant:headlineTextVariants[size],color:headlineTextColors[color],children:headline}),description&&/*#__PURE__*/jsx(Description,{variant:descriptionTextVariants[size],color:"color.foreground.neutral.tertiary",children:description})]}),traillingText&&/*#__PURE__*/jsx(Text,{variant:trailingTextVariants[size],color:"color.foreground.neutral.secondary",children:traillingText}),trailling]})}const Container$i=styled.div`
|
|
1958
1958
|
display: flex;
|
|
1959
1959
|
padding: 8px;
|
|
1960
1960
|
align-self: stretch;
|
|
@@ -1984,7 +1984,7 @@ const headlineTextVariants={large:"BodyL_Bold",medium:"BodyM_Bold",small:"BodyS_
|
|
|
1984
1984
|
text-overflow: ellipsis;
|
|
1985
1985
|
`;
|
|
1986
1986
|
|
|
1987
|
-
const subHeadlineTextVariant={large:"BodyM",small:"BodyS"};const headlineTextVariant={large:"TitleL",small:"TitleS"};const descriptionTextVariant={large:"BodyM",small:"BodyS"};const valueTextVariant={large:"ValueXL",small:"ValueL"};function Section(props){const{size="large",type,subHeadline,subValue,description,trailling=null}=props;const headlineOrValue=type==="default"?props.headline:props.value;const variant=type==="default"?headlineTextVariant[size]:valueTextVariant[size];return /*#__PURE__*/jsxs(Container$
|
|
1987
|
+
const subHeadlineTextVariant={large:"BodyM",small:"BodyS"};const headlineTextVariant={large:"TitleL",small:"TitleS"};const descriptionTextVariant={large:"BodyM",small:"BodyS"};const valueTextVariant={large:"ValueXL",small:"ValueL"};function Section(props){const{size="large",type,subHeadline,subValue,description,trailling=null}=props;const headlineOrValue=type==="default"?props.headline:props.value;const variant=type==="default"?headlineTextVariant[size]:valueTextVariant[size];return /*#__PURE__*/jsxs(Container$h,{children:[/*#__PURE__*/jsxs(TextArea,{children:[subHeadline&&/*#__PURE__*/jsx(Text,{color:"color.foreground.neutral.secondary",variant:subHeadlineTextVariant[size],children:subHeadline}),/*#__PURE__*/jsxs(HeadlineArea,{children:[/*#__PURE__*/jsx(Text,{variant:variant,color:"color.foreground.neutral.primary",children:headlineOrValue}),subValue&&/*#__PURE__*/jsx(SubValueArea,{children:/*#__PURE__*/jsx(Text,{variant:"ValueS",color:"color.foreground.neutral.secondary",children:subValue})})]}),description&&/*#__PURE__*/jsx(Text,{variant:descriptionTextVariant[size],color:"color.foreground.neutral.secondary",children:description})]}),trailling]})}const Container$h=styled.div`
|
|
1988
1988
|
display: flex;
|
|
1989
1989
|
align-items: flex-end;
|
|
1990
1990
|
gap: 8px;
|
|
@@ -2021,7 +2021,7 @@ const textVariants$3={large:"BodyL_Bold",medium:"BodyM_Bold",small:"BodyS_Bold"}
|
|
|
2021
2021
|
|
|
2022
2022
|
const Header={Section,List,Tab};
|
|
2023
2023
|
|
|
2024
|
-
const inputContainerPaddingAndGap={small:"2px",medium:"4px",large:"4px"};const inputBoxPaddingAndGap={small:"6px",medium:"8px",large:"8px"};const inputTextVariant={small:"BodyS",medium:"BodyM",large:"BodyL"};const inputBoxHeight={small:"28px",medium:"36px",large:"40px"};const inputBoxRadius={small:"10px",medium:"11px",large:"12px"};const inputIconSize={small:16,medium:20,large:24};const Input$5=/*#__PURE__*/React__default.forwardRef(function InputComponent({size,placeholder,value,onChange,leadingArea,trailingArea,icon,align,as="input",rows=4,...props},ref){const[isFocused,setIsFocused]=useState(false);return /*#__PURE__*/jsxs(Container$
|
|
2024
|
+
const inputContainerPaddingAndGap={small:"2px",medium:"4px",large:"4px"};const inputBoxPaddingAndGap={small:"6px",medium:"8px",large:"8px"};const inputTextVariant={small:"BodyS",medium:"BodyM",large:"BodyL"};const inputBoxHeight={small:"28px",medium:"36px",large:"40px"};const inputBoxRadius={small:"10px",medium:"11px",large:"12px"};const inputIconSize={small:16,medium:20,large:24};const Input$5=/*#__PURE__*/React__default.forwardRef(function InputComponent({size,placeholder,value,onChange,leadingArea,trailingArea,icon,align,as="input",rows=4,...props},ref){const[isFocused,setIsFocused]=useState(false);return /*#__PURE__*/jsxs(Container$g,{className:"input-container",size:size,isFocused:isFocused,mode:as,"data-mode":as,children:[leadingArea,/*#__PURE__*/jsxs(InputWrapper,{size:size,mode:as,rows:rows,variant:inputTextVariant[size],children:[icon&&align==="left"&&/*#__PURE__*/jsx(Icon,{fill:"color.foreground.neutral.tertiary",name:icon,size:inputIconSize[size]}),/*#__PURE__*/jsx(InputBox,{ref:ref,...props,color:"color.foreground.neutral.primary",style:{textAlign:align},variant:inputTextVariant[size],as:as,placeholder:placeholder,value:value,onChange:onChange,onFocus:e=>{var _props_onFocus;setIsFocused(true);(_props_onFocus=props.onFocus)===null||_props_onFocus===void 0?void 0:_props_onFocus.call(props,e);},onBlur:e=>{var _props_onBlur;setIsFocused(false);(_props_onBlur=props.onBlur)===null||_props_onBlur===void 0?void 0:_props_onBlur.call(props,e);},rows:as==="textarea"?rows:undefined,baseSize:size})]}),trailingArea===null||trailingArea===void 0?void 0:trailingArea.map(area=>area)]})});const Container$g=styled.div`
|
|
2025
2025
|
box-sizing: border-box;
|
|
2026
2026
|
width: 100%;
|
|
2027
2027
|
display: flex;
|
|
@@ -2211,7 +2211,7 @@ const textSizeVariants$1={small:"TextualS",medium:"TextualM",large:"TextualL"};c
|
|
|
2211
2211
|
background-color: ${props=>props.theme.colors.color.foreground.neutral[props.color]};
|
|
2212
2212
|
`;
|
|
2213
2213
|
|
|
2214
|
-
function ProgressBar({type="basic",value,defaultValue=0,padding=false,containerStyle={}}){return /*#__PURE__*/jsx(RealContainer,{"data-padding":padding,style:containerStyle,children:/*#__PURE__*/jsx(Container$
|
|
2214
|
+
function ProgressBar({type="basic",value,defaultValue=0,padding=false,containerStyle={}}){return /*#__PURE__*/jsx(RealContainer,{"data-padding":padding,style:containerStyle,children:/*#__PURE__*/jsx(Container$f,{"data-type":type,children:/*#__PURE__*/jsx(Fill,{initial:{width:`${defaultValue}%`},animate:{width:`${value}%`}})})})}const RealContainer=styled.div`
|
|
2215
2215
|
display: flex;
|
|
2216
2216
|
align-items: center;
|
|
2217
2217
|
align-self: stretch;
|
|
@@ -2219,7 +2219,7 @@ function ProgressBar({type="basic",value,defaultValue=0,padding=false,containerS
|
|
|
2219
2219
|
&[data-padding='true'] {
|
|
2220
2220
|
padding: 8px 0px;
|
|
2221
2221
|
}
|
|
2222
|
-
`;const Container$
|
|
2222
|
+
`;const Container$f=styled.div`
|
|
2223
2223
|
display: flex;
|
|
2224
2224
|
align-items: center;
|
|
2225
2225
|
border-radius: var(--CornerRadius-Full, 999px);
|
|
@@ -2301,14 +2301,14 @@ function SearchBox({value,onChange,...rest}){return /*#__PURE__*/jsxs(Wrapper$a,
|
|
|
2301
2301
|
}
|
|
2302
2302
|
`;
|
|
2303
2303
|
|
|
2304
|
-
const segmentedControlItemPadding={small:"2px 6px",medium:"4px 6px",large:"6px 8px"};const segmentedControlItemTextVariant={small:"BodyS_Bold",medium:"BodyM_Bold",large:"BodyM_Bold"};const segmentedControlContainerPaddingAndGap={small:"3px",medium:"4px",large:"4px"};const iconSize={small:14,medium:16,large:20};function SegmentedControl({value,options,onChange,size,fullWidth=false,paddingDisabled=false}){const theme=useTheme();const groupId=useId();const barId=useId();return /*#__PURE__*/jsx(Wrapper$9,{paddingDisabled:paddingDisabled,fullWidth:fullWidth,children:/*#__PURE__*/jsx(LayoutGroup,{id:groupId,children:/*#__PURE__*/jsx(Container$
|
|
2304
|
+
const segmentedControlItemPadding={small:"2px 6px",medium:"4px 6px",large:"6px 8px"};const segmentedControlItemTextVariant={small:"BodyS_Bold",medium:"BodyM_Bold",large:"BodyM_Bold"};const segmentedControlContainerPaddingAndGap={small:"3px",medium:"4px",large:"4px"};const iconSize={small:14,medium:16,large:20};function SegmentedControl({value,options,onChange,size,fullWidth=false,paddingDisabled=false}){const theme=useTheme();const groupId=useId();const barId=useId();return /*#__PURE__*/jsx(Wrapper$9,{paddingDisabled:paddingDisabled,fullWidth:fullWidth,children:/*#__PURE__*/jsx(LayoutGroup,{id:groupId,children:/*#__PURE__*/jsx(Container$e,{style:{gap:segmentedControlContainerPaddingAndGap[size],padding:segmentedControlContainerPaddingAndGap[size]},children:options.map(option=>/*#__PURE__*/jsxs(ItemContainer,{onClick:()=>onChange===null||onChange===void 0?void 0:onChange(option.value),style:{padding:segmentedControlItemPadding[size]},children:[option.leadingIcon&&/*#__PURE__*/jsx(Icon,{style:{zIndex:2},name:option.leadingIcon,size:iconSize[size],fill:value===option.value?"color.foreground.neutral.primary":"color.foreground.neutral.secondary"}),/*#__PURE__*/jsx(ItemText,{variants:{on:{color:theme.colors.color.foreground.neutral.primary},off:{color:theme.colors.color.foreground.neutral.secondary}},initial:"off",animate:value===option.value?"on":"off",variant:segmentedControlItemTextVariant[size],color:"color.foreground.neutral.secondary",children:option.label}),option.trailingIcon&&/*#__PURE__*/jsx(Icon,{style:{zIndex:2},name:option.trailingIcon,size:iconSize[size],fill:value===option.value?"color.foreground.neutral.primary":"color.foreground.neutral.secondary"}),value===option.value&&/*#__PURE__*/jsx(Bar,{layoutId:barId})]},option.value))})})})}const Wrapper$9=styled.div`
|
|
2305
2305
|
display: flex;
|
|
2306
2306
|
padding: ${p=>p.paddingDisabled?"0px":"8px 16px"};
|
|
2307
2307
|
flex-direction: column;
|
|
2308
2308
|
justify-content: center;
|
|
2309
2309
|
align-items: center;
|
|
2310
2310
|
width: ${p=>p.fullWidth?"100%":"auto"};
|
|
2311
|
-
`;const Container$
|
|
2311
|
+
`;const Container$e=styled.div`
|
|
2312
2312
|
display: inline-flex;
|
|
2313
2313
|
padding: 4px;
|
|
2314
2314
|
align-items: center;
|
|
@@ -2428,7 +2428,7 @@ const handleDragEnd=index=>()=>{if(options.length>0){var _normalizedValue_index;
|
|
|
2428
2428
|
}
|
|
2429
2429
|
`;
|
|
2430
2430
|
|
|
2431
|
-
const contents={core:"color.foreground.semantic.core",warning:"color.foreground.semantic.status.warning",mono:"color.foreground.neutral.primary"};const heights={large:40,medium:36,small:28};const gaps={large:"4px",medium:"2px",small:"2px"};const iconSizes={large:24,medium:20,small:16};const textVariants$2={large:"BodyL_Bold",medium:"BodyM_Bold",small:"BodyS_Bold"};function TextButton({variant="core",size="large",iconLeading,iconTrailing,iconAutoFill=true,iconAutoStroke=false,children,fullWidth,disabled,onClick,loading,...props}){return /*#__PURE__*/jsxs(Container$
|
|
2431
|
+
const contents={core:"color.foreground.semantic.core",warning:"color.foreground.semantic.status.warning",mono:"color.foreground.neutral.primary"};const heights={large:40,medium:36,small:28};const gaps={large:"4px",medium:"2px",small:"2px"};const iconSizes={large:24,medium:20,small:16};const textVariants$2={large:"BodyL_Bold",medium:"BodyM_Bold",small:"BodyS_Bold"};function TextButton({variant="core",size="large",iconLeading,iconTrailing,iconAutoFill=true,iconAutoStroke=false,children,fullWidth,disabled,onClick,loading,...props}){return /*#__PURE__*/jsxs(Container$d,{variant:variant,size:size,"data-fullwidth":fullWidth,onClick:disabled?undefined:onClick,style:{cursor:disabled?"not-allowed":"pointer",opacity:disabled?.3:1},whileHover:disabled?{opacity:.3}:{opacity:.8},whileTap:disabled?{opacity:.3}:{opacity:.6},...props,children:[iconLeading&&/*#__PURE__*/jsx(Icon,{name:iconLeading,size:iconSizes[size],fill:iconAutoFill?contents[variant]:undefined,stroke:iconAutoStroke?contents[variant]:undefined}),children&&/*#__PURE__*/jsx(Text,{variant:textVariants$2[size],color:contents[variant],children:children}),iconTrailing&&/*#__PURE__*/jsx(Icon,{name:iconTrailing,size:iconSizes[size],fill:iconAutoFill?contents[variant]:undefined,stroke:iconAutoStroke?contents[variant]:undefined})]})}const Container$d=styled(MotionPressable)`
|
|
2432
2432
|
display: inline-flex;
|
|
2433
2433
|
justify-content: center;
|
|
2434
2434
|
align-items: center;
|
|
@@ -2464,7 +2464,7 @@ const defaultButtonProps={variant:"mono",size:"small"};function Snackbar({label,
|
|
|
2464
2464
|
align-self: ${props=>props.compact?"stretch":"center"};
|
|
2465
2465
|
`;
|
|
2466
2466
|
|
|
2467
|
-
function Switch({value,onChange,disabled=false}){const theme=useTheme();const toggleSwitch=()=>onChange(!value);return /*#__PURE__*/jsx(Container$
|
|
2467
|
+
function Switch({value,onChange,disabled=false}){const theme=useTheme();const toggleSwitch=()=>onChange(!value);return /*#__PURE__*/jsx(Container$c,{style:{opacity:disabled?.4:1},"data-isOn":value,onClick:toggleSwitch,variants:{on:{backgroundColor:theme.colors.color.foreground.semantic.core},off:{backgroundColor:theme.colors.color.background.surface.intense}},initial:"off",animate:value?"on":"off",children:/*#__PURE__*/jsx(Handle,{layout:true,transition:{type:"spring",stiffness:700,damping:30}})})}const Container$c=styled(motion.div)`
|
|
2468
2468
|
width: 48px;
|
|
2469
2469
|
height: 28px;
|
|
2470
2470
|
display: flex;
|
|
@@ -2516,7 +2516,7 @@ const horizontalPaddings={large:16,medium:12,small:10};const textVariants$1={lar
|
|
|
2516
2516
|
|
|
2517
2517
|
const debounce=(fn,delay)=>{let timeout;return (...args)=>{let result;if(timeout)clearTimeout(timeout);timeout=setTimeout(()=>{result=fn(...args);},delay);return result}};
|
|
2518
2518
|
|
|
2519
|
-
function HeadColumn({collapsable=false,expanded=false,spacingLevel=0,onChange,editable=false,value}){const[isFocused,setIsFocused]=useState(false);return /*#__PURE__*/jsxs(Container$
|
|
2519
|
+
function HeadColumn({collapsable=false,expanded=false,spacingLevel=0,onChange,editable=false,value}){const[isFocused,setIsFocused]=useState(false);return /*#__PURE__*/jsxs(Container$b,{isFocused:isFocused,children:[new Array(spacingLevel).fill(null).map((_,index)=>/*#__PURE__*/jsx(Spacing,{},index)),collapsable&&/*#__PURE__*/jsx(CollapseButton,{children:/*#__PURE__*/jsx(Icon,{style:{transform:!expanded?"rotate(0deg)":"rotate(90deg)"},name:"expandMore",size:12,fill:"color.foreground.neutral.secondary"})}),editable&&onChange&&/*#__PURE__*/jsx(Input$2,{variant:"TableM",color:"color.foreground.neutral.primary",as:"input",onChange:debounce(onChange,1e3),defaultValue:value,onBlur:e=>{setIsFocused(false);},onFocus:()=>setIsFocused(true)}),!editable&&value&&/*#__PURE__*/jsx(Text,{variant:"TableM",color:"color.foreground.neutral.primary",children:value})]})}const Container$b=styled.div`
|
|
2520
2520
|
display: flex;
|
|
2521
2521
|
width: 100%;
|
|
2522
2522
|
height: 40px;
|
|
@@ -2550,7 +2550,7 @@ function HeadColumn({collapsable=false,expanded=false,spacingLevel=0,onChange,ed
|
|
|
2550
2550
|
background: ${({theme})=>theme.colors.color.background.surface.standard};
|
|
2551
2551
|
`;
|
|
2552
2552
|
|
|
2553
|
-
function HeadRow({align="left",onChange,value,editable,sortable,sortDirection="none",fullWidth,width}){const[isFocused,setIsFocused]=useState(false);return /*#__PURE__*/jsxs(Container$
|
|
2553
|
+
function HeadRow({align="left",onChange,value,editable,sortable,sortDirection="none",fullWidth,width}){const[isFocused,setIsFocused]=useState(false);return /*#__PURE__*/jsxs(Container$a,{width:width,fullWidth:fullWidth,isFocused:isFocused,align:align,children:[sortable&&/*#__PURE__*/jsxs(SortButton,{align:align,children:[/*#__PURE__*/jsx(Text,{align:align,variant:"TableS_Bold",color:sortDirection==="none"?"color.foreground.neutral.secondary":"color.foreground.semantic.core",children:value}),/*#__PURE__*/jsx(Icon,{name:sortDirection==="asc"?"arrowUpward":sortDirection==="desc"?"arrowDownward":"switchIcon",fill:sortDirection==="none"?"color.foreground.neutral.quarternary":"color.foreground.semantic.core",size:16})]}),editable&&onChange&&/*#__PURE__*/jsx(Input$1,{align:align,variant:"TableS_Bold",color:"color.foreground.neutral.secondary",as:"input",onChange:debounce(onChange,1e3),defaultValue:value,onBlur:_=>{setIsFocused(false);},onFocus:()=>setIsFocused(true)}),!sortable&&!editable&&/*#__PURE__*/jsx(Text,{align:align,variant:"TableS_Bold",color:"color.foreground.neutral.secondary",children:value})]})}const Container$a=styled.div`
|
|
2554
2554
|
box-sizing: border-box;
|
|
2555
2555
|
display: flex;
|
|
2556
2556
|
min-width: 100px;
|
|
@@ -2585,7 +2585,7 @@ function HeadRow({align="left",onChange,value,editable,sortable,sortDirection="n
|
|
|
2585
2585
|
justify-content: ${({align})=>align==="right"?"flex-end":align==="center"?"center":"flex-start"};
|
|
2586
2586
|
`;
|
|
2587
2587
|
|
|
2588
|
-
function Item$1({children,align="left",onChange,value,editable,fullWidth,width}){const[isFocused,setIsFocused]=useState(false);return /*#__PURE__*/jsxs(Container$
|
|
2588
|
+
function Item$1({children,align="left",onChange,value,editable,fullWidth,width}){const[isFocused,setIsFocused]=useState(false);return /*#__PURE__*/jsxs(Container$9,{width:width,fullWidth:fullWidth,isFocused:isFocused,align:align,children:[editable&&onChange&&/*#__PURE__*/jsx(Input,{variant:"TableM",color:"color.foreground.neutral.primary",as:editable?"input":"div",onChange:debounce(onChange,1e3),defaultValue:typeof value==="string"?value:undefined,onBlur:e=>{setIsFocused(false);},onFocus:()=>setIsFocused(true)}),!editable&&value&&/*#__PURE__*/jsx(Text,{variant:"TableM",color:"color.foreground.neutral.primary",children:value}),children&&children]})}const Container$9=styled.div`
|
|
2589
2589
|
box-sizing: border-box;
|
|
2590
2590
|
display: flex;
|
|
2591
2591
|
width: ${({width,fullWidth})=>width||fullWidth?"100%":"auto"};
|
|
@@ -2610,7 +2610,7 @@ function Item$1({children,align="left",onChange,value,editable,fullWidth,width})
|
|
|
2610
2610
|
caret-color: ${({theme})=>theme.colors.color.foreground.semantic.core};
|
|
2611
2611
|
`;
|
|
2612
2612
|
|
|
2613
|
-
function Table(){return /*#__PURE__*/jsxs(Container$
|
|
2613
|
+
function Table(){return /*#__PURE__*/jsxs(Container$8,{children:[/*#__PURE__*/jsxs(RowFixed,{children:[/*#__PURE__*/jsx(HeadRow,{value:"항목"}),/*#__PURE__*/jsx(Divider,{}),/*#__PURE__*/jsxs(BodyGroup,{border:true,children:[/*#__PURE__*/jsx(HeadColumn,{value:"금융수익",collapsable:true}),/*#__PURE__*/jsx(HeadColumn,{value:"이자수익",spacingLevel:1}),/*#__PURE__*/jsx(HeadColumn,{value:"배당금수익",spacingLevel:1}),/*#__PURE__*/jsx(HeadColumn,{value:"외환거래이익",spacingLevel:1,collapsable:true}),/*#__PURE__*/jsx(HeadColumn,{value:"기타수익",spacingLevel:2})]})]}),/*#__PURE__*/jsxs(Row$1,{children:[/*#__PURE__*/jsx(HeadRow,{align:"right",value:"23년 4월"}),/*#__PURE__*/jsx(Divider,{}),/*#__PURE__*/jsxs(BodyGroup,{children:[/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"})]})]}),/*#__PURE__*/jsxs(Row$1,{children:[/*#__PURE__*/jsx(HeadRow,{align:"right",value:"23년 4월"}),/*#__PURE__*/jsx(Divider,{}),/*#__PURE__*/jsxs(BodyGroup,{children:[/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"})]})]}),/*#__PURE__*/jsxs(Row$1,{children:[/*#__PURE__*/jsx(HeadRow,{align:"right",value:"23년 4월"}),/*#__PURE__*/jsx(Divider,{}),/*#__PURE__*/jsxs(BodyGroup,{children:[/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"})]})]}),/*#__PURE__*/jsxs(Row$1,{children:[/*#__PURE__*/jsx(HeadRow,{align:"right",value:"23년 4월"}),/*#__PURE__*/jsx(Divider,{}),/*#__PURE__*/jsxs(BodyGroup,{children:[/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"})]})]}),/*#__PURE__*/jsxs(Row$1,{children:[/*#__PURE__*/jsx(HeadRow,{align:"right",value:"23년 4월"}),/*#__PURE__*/jsx(Divider,{}),/*#__PURE__*/jsxs(BodyGroup,{children:[/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"})]})]}),/*#__PURE__*/jsxs(Row$1,{children:[/*#__PURE__*/jsx(HeadRow,{align:"right",value:"23년 4월"}),/*#__PURE__*/jsx(Divider,{}),/*#__PURE__*/jsxs(BodyGroup,{children:[/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"}),/*#__PURE__*/jsx(Item$1,{align:"right",value:"25,620억"})]})]})]})}const Container$8=styled.div`
|
|
2614
2614
|
display: flex;
|
|
2615
2615
|
align-items: flex-start;
|
|
2616
2616
|
align-self: stretch;
|
|
@@ -2659,7 +2659,7 @@ const textVariants={large:"TitleM",medium:"BodyL_Bold"};function Tabs({value,onC
|
|
|
2659
2659
|
transition: transform 0.3s ease;
|
|
2660
2660
|
`;
|
|
2661
2661
|
|
|
2662
|
-
function Timeline({MainDate,SubDate,Label,SubLabel,type}){return /*#__PURE__*/jsxs(Wrapper$4,{type:type,children:[/*#__PURE__*/jsxs(DateWrapper,{type:type,children:[/*#__PURE__*/jsx(Text,{variant:"BodyM_Bold",color:"color.foreground.neutral.secondary",children:MainDate}),/*#__PURE__*/jsx(Text,{variant:"BodyS",color:"color.foreground.neutral.secondary",children:SubDate})]}),/*#__PURE__*/jsxs(LabelWrapper,{type:type,children:[/*#__PURE__*/jsx(Text,{variant:"BodyL_Bold",color:"color.foreground.neutral.primary",children:Label}),/*#__PURE__*/jsx(Text,{variant:"BodyS",color:"color.foreground.neutral.secondary",children:SubLabel})]})]})}const Wrapper$4=styled.div`
|
|
2662
|
+
function Timeline({MainDate,SubDate,Label,SubLabel,type}){return /*#__PURE__*/jsxs(Wrapper$4,{type:type,children:[/*#__PURE__*/jsxs(DateWrapper$1,{type:type,children:[/*#__PURE__*/jsx(Text,{variant:"BodyM_Bold",color:"color.foreground.neutral.secondary",children:MainDate}),/*#__PURE__*/jsx(Text,{variant:"BodyS",color:"color.foreground.neutral.secondary",children:SubDate})]}),/*#__PURE__*/jsxs(LabelWrapper,{type:type,children:[/*#__PURE__*/jsx(Text,{variant:"BodyL_Bold",color:"color.foreground.neutral.primary",children:Label}),/*#__PURE__*/jsx(Text,{variant:"BodyS",color:"color.foreground.neutral.secondary",children:SubLabel})]})]})}const Wrapper$4=styled.div`
|
|
2663
2663
|
display: flex;
|
|
2664
2664
|
width: 380px;
|
|
2665
2665
|
height: 60px;
|
|
@@ -2669,7 +2669,7 @@ function Timeline({MainDate,SubDate,Label,SubLabel,type}){return /*#__PURE__*/js
|
|
|
2669
2669
|
flex-shrink: 0;
|
|
2670
2670
|
flex-direction: ${({type})=>type==="main"?"row":"column"};
|
|
2671
2671
|
justify-content: ${({type})=>type==="main"?"flex-start":"center"};
|
|
2672
|
-
`;const DateWrapper=styled.div`
|
|
2672
|
+
`;const DateWrapper$1=styled.div`
|
|
2673
2673
|
display: flex;
|
|
2674
2674
|
width: ${({type})=>type==="main"?"120px":"auto"};
|
|
2675
2675
|
padding: 2px 0px;
|
|
@@ -2687,13 +2687,13 @@ function Timeline({MainDate,SubDate,Label,SubLabel,type}){return /*#__PURE__*/js
|
|
|
2687
2687
|
width: ${({type})=>type==="main"?"auto":"232px"};
|
|
2688
2688
|
`;
|
|
2689
2689
|
|
|
2690
|
-
const backgroundColor={mono:"color.background.overlay.static",standard:"color.background.overlay.standard"};const contentColor={mono:"color.foreground.surface.static",standard:"color.foreground.neutral.primary"};function Tooltip({variant,tail,description,headline,closeIcon}){const TopTailSVG=()=>/*#__PURE__*/jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"10",height:"5",viewBox:"0 0 10 5",fill:"none",children:/*#__PURE__*/jsx("path",{d:"M3.58579 0.561693C4.36684 -0.187232 5.63317 -0.18723 6.41421 0.561694L10 5H0L3.58579 0.561693Z"})});const BottomTailSVG=()=>/*#__PURE__*/jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"10",height:"5",viewBox:"0 0 10 5",fill:"none",children:/*#__PURE__*/jsx("path",{d:"M3.58579 4.43831C4.36684 5.18723 5.63317 5.18723 6.41421 4.43831L10 0H0L3.58579 4.43831Z"})});return /*#__PURE__*/jsxs(TooltipContainer,{tail:tail,children:[tail.startsWith("top")&&/*#__PURE__*/jsx(Tail,{variant:variant,tail:tail,children:/*#__PURE__*/jsx(TopTailSVG,{})}),/*#__PURE__*/jsxs(Container$
|
|
2690
|
+
const backgroundColor={mono:"color.background.overlay.static",standard:"color.background.overlay.standard"};const contentColor={mono:"color.foreground.surface.static",standard:"color.foreground.neutral.primary"};function Tooltip({variant,tail,description,headline,closeIcon}){const TopTailSVG=()=>/*#__PURE__*/jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"10",height:"5",viewBox:"0 0 10 5",fill:"none",children:/*#__PURE__*/jsx("path",{d:"M3.58579 0.561693C4.36684 -0.187232 5.63317 -0.18723 6.41421 0.561694L10 5H0L3.58579 0.561693Z"})});const BottomTailSVG=()=>/*#__PURE__*/jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"10",height:"5",viewBox:"0 0 10 5",fill:"none",children:/*#__PURE__*/jsx("path",{d:"M3.58579 4.43831C4.36684 5.18723 5.63317 5.18723 6.41421 4.43831L10 0H0L3.58579 4.43831Z"})});return /*#__PURE__*/jsxs(TooltipContainer,{tail:tail,children:[tail.startsWith("top")&&/*#__PURE__*/jsx(Tail,{variant:variant,tail:tail,children:/*#__PURE__*/jsx(TopTailSVG,{})}),/*#__PURE__*/jsxs(Container$7,{variant:variant,children:[/*#__PURE__*/jsxs(TextGroup,{children:[headline&&/*#__PURE__*/jsx(Text,{variant:"BodyM_Bold",color:contentColor[variant],children:headline}),/*#__PURE__*/jsx(Text,{variant:"BodyS",color:contentColor[variant],children:description})]}),closeIcon&&/*#__PURE__*/jsx(CloseIconWrapper,{children:/*#__PURE__*/jsx(Icon,{name:"close",size:16,fill:variant==="standard"?"color.foreground.neutral.secondary":contentColor[variant]})})]}),tail.startsWith("bottom")&&/*#__PURE__*/jsx(Tail,{variant:variant,tail:tail,children:/*#__PURE__*/jsx(BottomTailSVG,{})})]})}const TooltipContainer=styled.div`
|
|
2691
2691
|
position: relative; // absolute에서 relative로 변경
|
|
2692
2692
|
display: flex;
|
|
2693
2693
|
max-width: 217px;
|
|
2694
2694
|
width: max-content;
|
|
2695
2695
|
flex-direction: column;
|
|
2696
|
-
`;const Container$
|
|
2696
|
+
`;const Container$7=styled.div`
|
|
2697
2697
|
position: relative; // absolute에서 relative로 변경
|
|
2698
2698
|
max-width: 217px;
|
|
2699
2699
|
width: max-content;
|
|
@@ -2743,7 +2743,7 @@ function File({status,name,size,error}){return /*#__PURE__*/jsxs(Wrapper$3,{chil
|
|
|
2743
2743
|
align-items: flex-start;
|
|
2744
2744
|
`;
|
|
2745
2745
|
|
|
2746
|
-
function Image({onRemove,status,image}){return /*#__PURE__*/jsxs(Wrapper$2,{children:[status==="error"?/*#__PURE__*/jsxs(ErrorContainer,{children:[/*#__PURE__*/jsx(Icon,{name:"error",size:20,fill:"color.foreground.semantic.status.warning"}),/*#__PURE__*/jsx(Text,{variant:"BodyS",color:"color.foreground.semantic.status.warning",children:"Error"})]}):status==="uploading"?/*#__PURE__*/jsx(Container$
|
|
2746
|
+
function Image({onRemove,status,image}){return /*#__PURE__*/jsxs(Wrapper$2,{children:[status==="error"?/*#__PURE__*/jsxs(ErrorContainer,{children:[/*#__PURE__*/jsx(Icon,{name:"error",size:20,fill:"color.foreground.semantic.status.warning"}),/*#__PURE__*/jsx(Text,{variant:"BodyS",color:"color.foreground.semantic.status.warning",children:"Error"})]}):status==="uploading"?/*#__PURE__*/jsx(Container$6,{children:/*#__PURE__*/jsx(ProgressBar,{value:50})}):status==="uploaded"?/*#__PURE__*/jsx(ImageContainer,{src:image}):status==="await"?/*#__PURE__*/jsxs(Container$6,{children:[/*#__PURE__*/jsx(Icon,{name:"addPhotoAlternate",size:20,fill:"color.foreground.neutral.tertiary"}),/*#__PURE__*/jsx(Text,{variant:"BodyS",color:"color.foreground.neutral.tertiary",children:"Add"})]}):null,(status==="uploaded"||status==="error")&&/*#__PURE__*/jsx(RemoveButton,{whileTap:{scale:.9},onPress:onRemove,children:/*#__PURE__*/jsx(Icon,{fill:"color.foreground.surface.static",name:"close",size:16})})]})}const Wrapper$2=styled.div`
|
|
2747
2747
|
position: relative;
|
|
2748
2748
|
display: inline-flex;
|
|
2749
2749
|
padding: 4px;
|
|
@@ -2752,7 +2752,7 @@ function Image({onRemove,status,image}){return /*#__PURE__*/jsxs(Wrapper$2,{chil
|
|
|
2752
2752
|
align-items: flex-start;
|
|
2753
2753
|
gap: 12px;
|
|
2754
2754
|
border: 0;
|
|
2755
|
-
`;const Container$
|
|
2755
|
+
`;const Container$6=styled.div`
|
|
2756
2756
|
box-sizing: border-box;
|
|
2757
2757
|
display: flex;
|
|
2758
2758
|
width: 80px;
|
|
@@ -2771,7 +2771,7 @@ function Image({onRemove,status,image}){return /*#__PURE__*/jsxs(Wrapper$2,{chil
|
|
|
2771
2771
|
background-position: center;
|
|
2772
2772
|
background-size: cover;
|
|
2773
2773
|
background-repeat: no-repeat;
|
|
2774
|
-
`;const ErrorContainer=styled(Container$
|
|
2774
|
+
`;const ErrorContainer=styled(Container$6)`
|
|
2775
2775
|
background: none;
|
|
2776
2776
|
border-radius: 8px;
|
|
2777
2777
|
box-shadow: inset 0 0 0 1px
|
|
@@ -2821,7 +2821,7 @@ function Dropbox({size,value,onChange,accept="image/jpeg,image/png,image/webp",m
|
|
|
2821
2821
|
|
|
2822
2822
|
const Upload={File,Image,Dropbox};
|
|
2823
2823
|
|
|
2824
|
-
function FrontCheckbox({...props}){return /*#__PURE__*/jsx(Container$
|
|
2824
|
+
function FrontCheckbox({...props}){return /*#__PURE__*/jsx(Container$5,{children:/*#__PURE__*/jsx(Checkbox,{...props})})}const Container$5=styled.div`
|
|
2825
2825
|
display: inline-flex;
|
|
2826
2826
|
height: 40px;
|
|
2827
2827
|
min-width: 40px;
|
|
@@ -2834,7 +2834,7 @@ function FrontCheckbox({...props}){return /*#__PURE__*/jsx(Container$3,{children
|
|
|
2834
2834
|
gap: 4px;
|
|
2835
2835
|
`;
|
|
2836
2836
|
|
|
2837
|
-
function TableColumn(){return /*#__PURE__*/jsxs(Container$
|
|
2837
|
+
function TableColumn(){return /*#__PURE__*/jsxs(Container$4,{children:[/*#__PURE__*/jsxs(Row,{head:true,children:[/*#__PURE__*/jsx(FrontCheckbox,{value:false,onChange:()=>{}}),/*#__PURE__*/jsx(HeadRow,{value:"구분"}),/*#__PURE__*/jsx(HeadRow,{value:"핀코드",fullWidth:true}),/*#__PURE__*/jsx(HeadRow,{value:"핀코드2"}),/*#__PURE__*/jsx(HeadRow,{value:"핀잔액",sortable:true,align:"left"}),/*#__PURE__*/jsx(HeadRow,{value:"핀상태"}),/*#__PURE__*/jsx(HeadRow,{value:"메모",fullWidth:true}),/*#__PURE__*/jsx(HeadRow,{value:"핀코드 관리"})]}),/*#__PURE__*/jsxs(Row,{children:[/*#__PURE__*/jsx(FrontCheckbox,{value:false,onChange:()=>{}}),/*#__PURE__*/jsx(Item$1,{value:"1,000개"}),/*#__PURE__*/jsx(Item$1,{value:"TPDFASAF3K143231",onChange:()=>{},editable:true,fullWidth:true}),/*#__PURE__*/jsx(Item$1,{value:"513412"}),/*#__PURE__*/jsx(Item$1,{value:"110,000"}),/*#__PURE__*/jsx(Item$1,{children:/*#__PURE__*/jsx(Badge,{variant:"success",children:"사용대기"})}),/*#__PURE__*/jsx(Item$1,{value:"-",fullWidth:true}),/*#__PURE__*/jsxs(Item$1,{children:[/*#__PURE__*/jsx(Button$1,{variant:"neutral",size:"small",children:"관리"}),/*#__PURE__*/jsx(Button$1,{variant:"warningLight",size:"small",children:"삭제"})]})]}),/*#__PURE__*/jsxs(Row,{children:[/*#__PURE__*/jsx(FrontCheckbox,{value:false,onChange:()=>{}}),/*#__PURE__*/jsx(Item$1,{value:"1,000개"}),/*#__PURE__*/jsx(Item$1,{value:"TPDFASAF3K143231",fullWidth:true}),/*#__PURE__*/jsx(Item$1,{value:"513412"}),/*#__PURE__*/jsx(Item$1,{value:"110,000"}),/*#__PURE__*/jsx(Item$1,{children:/*#__PURE__*/jsx(Badge,{variant:"warning",children:"사용불가"})}),/*#__PURE__*/jsx(Item$1,{value:"-",fullWidth:true}),/*#__PURE__*/jsxs(Item$1,{children:[/*#__PURE__*/jsx(Button$1,{variant:"neutral",size:"small",children:"관리"}),/*#__PURE__*/jsx(Button$1,{variant:"warningLight",size:"small",children:"삭제"})]})]}),/*#__PURE__*/jsxs(Row,{children:[/*#__PURE__*/jsx(FrontCheckbox,{value:false,onChange:()=>{}}),/*#__PURE__*/jsx(Item$1,{value:"1,000개"}),/*#__PURE__*/jsx(Item$1,{value:"TPDFASAF3K143231",fullWidth:true}),/*#__PURE__*/jsx(Item$1,{value:"513412"}),/*#__PURE__*/jsx(Item$1,{value:"110,000"}),/*#__PURE__*/jsx(Item$1,{children:/*#__PURE__*/jsx(Badge,{variant:"success",children:"사용대기"})}),/*#__PURE__*/jsx(Item$1,{value:"-",fullWidth:true}),/*#__PURE__*/jsxs(Item$1,{children:[/*#__PURE__*/jsx(Button$1,{variant:"neutral",size:"small",children:"관리"}),/*#__PURE__*/jsx(Button$1,{variant:"warningLight",size:"small",children:"삭제"})]})]}),/*#__PURE__*/jsxs(Row,{children:[/*#__PURE__*/jsx(FrontCheckbox,{value:false,onChange:()=>{}}),/*#__PURE__*/jsx(Item$1,{value:"1,000개"}),/*#__PURE__*/jsx(Item$1,{value:"TPDFASAF3K143231",fullWidth:true}),/*#__PURE__*/jsx(Item$1,{value:"513412"}),/*#__PURE__*/jsx(Item$1,{value:"110,000"}),/*#__PURE__*/jsx(Item$1,{children:/*#__PURE__*/jsx(Badge,{variant:"success",children:"사용대기"})}),/*#__PURE__*/jsx(Item$1,{value:"-",fullWidth:true}),/*#__PURE__*/jsxs(Item$1,{children:[/*#__PURE__*/jsx(Button$1,{variant:"neutral",size:"small",children:"관리"}),/*#__PURE__*/jsx(Button$1,{variant:"warningLight",size:"small",children:"삭제"})]})]}),/*#__PURE__*/jsxs(Row,{children:[/*#__PURE__*/jsx(FrontCheckbox,{value:false,onChange:()=>{}}),/*#__PURE__*/jsx(Item$1,{value:"1,000개"}),/*#__PURE__*/jsx(Item$1,{value:"TPDFASAF3K143231",onChange:()=>{},editable:true,fullWidth:true}),/*#__PURE__*/jsx(Item$1,{value:"513412"}),/*#__PURE__*/jsx(Item$1,{value:"110,000"}),/*#__PURE__*/jsx(Item$1,{children:/*#__PURE__*/jsx(Badge,{variant:"flat",children:"사용완료"})}),/*#__PURE__*/jsx(Item$1,{value:"-",fullWidth:true}),/*#__PURE__*/jsxs(Item$1,{children:[/*#__PURE__*/jsx(Button$1,{variant:"neutral",size:"small",children:"관리"}),/*#__PURE__*/jsx(Button$1,{variant:"warningLight",size:"small",children:"삭제"})]})]}),/*#__PURE__*/jsxs(Row,{children:[/*#__PURE__*/jsx(FrontCheckbox,{value:false,onChange:()=>{}}),/*#__PURE__*/jsx(Item$1,{value:"1,000개"}),/*#__PURE__*/jsx(Item$1,{value:"TPDFASAF3K143231",onChange:()=>{},editable:true,fullWidth:true}),/*#__PURE__*/jsx(Item$1,{value:"513412"}),/*#__PURE__*/jsx(Item$1,{value:"110,000"}),/*#__PURE__*/jsx(Item$1,{children:/*#__PURE__*/jsx(Badge,{variant:"success",children:"사용대기"})}),/*#__PURE__*/jsx(Item$1,{value:"-",fullWidth:true}),/*#__PURE__*/jsxs(Item$1,{children:[/*#__PURE__*/jsx(Button$1,{variant:"neutral",size:"small",children:"관리"}),/*#__PURE__*/jsx(Button$1,{variant:"warningLight",size:"small",children:"삭제"})]})]}),/*#__PURE__*/jsxs(Row,{children:[/*#__PURE__*/jsx(FrontCheckbox,{value:false,onChange:()=>{}}),/*#__PURE__*/jsx(Item$1,{value:"1,000개"}),/*#__PURE__*/jsx(Item$1,{value:"TPDFASAF3K143231",onChange:()=>{},editable:true,fullWidth:true}),/*#__PURE__*/jsx(Item$1,{value:"513412"}),/*#__PURE__*/jsx(Item$1,{value:"110,000"}),/*#__PURE__*/jsx(Item$1,{children:/*#__PURE__*/jsx(Badge,{variant:"success",children:"사용대기"})}),/*#__PURE__*/jsx(Item$1,{value:"-",fullWidth:true}),/*#__PURE__*/jsxs(Item$1,{children:[/*#__PURE__*/jsx(Button$1,{variant:"neutral",size:"small",children:"관리"}),/*#__PURE__*/jsx(Button$1,{variant:"warningLight",size:"small",children:"삭제"})]})]})]})}const Container$4=styled.div`
|
|
2838
2838
|
display: flex;
|
|
2839
2839
|
width: 100%;
|
|
2840
2840
|
flex-direction: column;
|
|
@@ -2847,7 +2847,7 @@ function TableColumn(){return /*#__PURE__*/jsxs(Container$2,{children:[/*#__PURE
|
|
|
2847
2847
|
border-color: ${({theme,head})=>head?theme.colors.color.stroke.separator.intense:theme.colors.color.stroke.separator.standard};
|
|
2848
2848
|
`;
|
|
2849
2849
|
|
|
2850
|
-
const heightVariants={small:"28px",medium:"36px",large:"40px"};const iconSizeVariants={small:16,medium:20,large:24};const textSizeVariants={small:"BodyS",medium:"BodyM",large:"BodyL"};function TextComboBox({size,disabled,placeholder,value,options=[],onChange,icon,showDropdownIcon=true}){const[open,setOpen]=useState(false);const containerRef=useRef(null);useClickOutside$2(containerRef,()=>setOpen(false),open);const handleSelect=value=>{onChange===null||onChange===void 0?void 0:onChange(value);};return /*#__PURE__*/jsxs(Container$
|
|
2850
|
+
const heightVariants={small:"28px",medium:"36px",large:"40px"};const iconSizeVariants={small:16,medium:20,large:24};const textSizeVariants={small:"BodyS",medium:"BodyM",large:"BodyL"};function TextComboBox({size,disabled,placeholder,value,options=[],onChange,icon,showDropdownIcon=true}){const[open,setOpen]=useState(false);const containerRef=useRef(null);useClickOutside$2(containerRef,()=>setOpen(false),open);const handleSelect=value=>{onChange===null||onChange===void 0?void 0:onChange(value);};return /*#__PURE__*/jsxs(Container$3,{ref:containerRef,children:[/*#__PURE__*/jsxs(Wrapper,{size:size,disabled:disabled,onClick:()=>setOpen(!open),children:[icon&&/*#__PURE__*/jsx(Icon,{name:icon,size:iconSizeVariants[size],fill:"color.foreground.neutral.tertiary"}),/*#__PURE__*/jsx(SelectWrapper,{children:/*#__PURE__*/jsx(Text,{style:{flex:1,userSelect:"none",padding:`0 4px`,pointerEvents:"none"},color:value?"color.foreground.neutral.primary":"color.foreground.neutral.tertiary",variant:textSizeVariants[size],children:value||placeholder})}),showDropdownIcon&&/*#__PURE__*/jsx(Icon,{style:{transform:open?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease-in-out"},name:"expandMore",size:iconSizeVariants[size],fill:"color.foreground.neutral.tertiary"})]}),open?/*#__PURE__*/jsx(PopoverWrapper$1,{children:/*#__PURE__*/jsx(AnimatePresence,{mode:"wait",children:/*#__PURE__*/jsx(motion.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2},children:/*#__PURE__*/jsx(Popover,{type:"list",options:options.map(option=>({label:option.label,value:option.value})),value:value,onChange:handleSelect})},"popover")})}):null]})}const PopoverWrapper$1=styled.div`
|
|
2851
2851
|
position: absolute;
|
|
2852
2852
|
top: 100%;
|
|
2853
2853
|
padding-top: 4px;
|
|
@@ -2856,7 +2856,7 @@ const heightVariants={small:"28px",medium:"36px",large:"40px"};const iconSizeVar
|
|
|
2856
2856
|
height: 100%;
|
|
2857
2857
|
min-width: 200px;
|
|
2858
2858
|
z-index: 9;
|
|
2859
|
-
`;const Container$
|
|
2859
|
+
`;const Container$3=styled.div`
|
|
2860
2860
|
position: relative;
|
|
2861
2861
|
`;const SelectWrapper=styled.div`
|
|
2862
2862
|
position: relative;
|
|
@@ -2895,7 +2895,7 @@ function u(){return (u=Object.assign||function(e){for(var r=1;r<arguments.length
|
|
|
2895
2895
|
const useClickOutside=(ref,handler,enabled=true,ignoreIds=[])=>{useEffect(()=>{if(!enabled)return;const listener=event=>{// Do nothing if clicking ref's element or descendent elements
|
|
2896
2896
|
if(!ref.current||ref.current.contains(event.target)){return}if(ignoreIds.includes(event.target.id)){return}handler(event);};document.addEventListener("mousedown",listener);document.addEventListener("touchstart",listener);return ()=>{document.removeEventListener("mousedown",listener);document.removeEventListener("touchstart",listener);}},[ref,handler,enabled]);};function ColorPicker(props){const{color,onColorChange}=props;const[active,setActive]=useState(false);const[showPicker,setShowPicker]=useState(false);const pickerRef=useRef(null);useClickOutside(pickerRef,()=>{setShowPicker(false);},showPicker);const handleEyeDropper=async()=>{try{// @ts-ignore
|
|
2897
2897
|
const eyeDropper=new window.EyeDropper;const result=await eyeDropper.open();// Just use the color from eyedropper without opacity
|
|
2898
|
-
onColorChange(result.sRGBHex);}catch(err){console.log("Browser does not support the EyeDropper API");}};const handleColorChange=e=>{const newValue=e.target.value;onColorChange(newValue);};return /*#__PURE__*/jsxs(Container,{ref:pickerRef,children:[/*#__PURE__*/jsxs(LeftInputGroup,{active:active,children:[/*#__PURE__*/jsxs(ColorPreviewContainer,{children:[/*#__PURE__*/jsx(ColorPreview,{style:{backgroundColor:color},onClick:()=>setShowPicker(!showPicker)}),showPicker&&/*#__PURE__*/jsx(PickerPopover,{children:/*#__PURE__*/jsx(Z,{color:color,onChange:newColor=>{onColorChange(`${newColor}`);}})})]}),/*#__PURE__*/jsx(ColorLabelInput,{as:"input",variant:"BodyS",color:"color.foreground.neutral.primary",value:color,onFocus:()=>{setActive(true);setShowPicker(true);},onBlur:()=>setActive(false),onChange:handleColorChange,placeholder:"#RRGGBB"})]}),/*#__PURE__*/jsx(EyeDropperButton,{onClick:handleEyeDropper,children:/*#__PURE__*/jsx(Icon,{name:"colorize",size:24})})]})}const Container=styled.div`
|
|
2898
|
+
onColorChange(result.sRGBHex);}catch(err){console.log("Browser does not support the EyeDropper API");}};const handleColorChange=e=>{const newValue=e.target.value;onColorChange(newValue);};return /*#__PURE__*/jsxs(Container$2,{ref:pickerRef,children:[/*#__PURE__*/jsxs(LeftInputGroup,{active:active,children:[/*#__PURE__*/jsxs(ColorPreviewContainer,{children:[/*#__PURE__*/jsx(ColorPreview,{style:{backgroundColor:color},onClick:()=>setShowPicker(!showPicker)}),showPicker&&/*#__PURE__*/jsx(PickerPopover,{children:/*#__PURE__*/jsx(Z,{color:color,onChange:newColor=>{onColorChange(`${newColor}`);}})})]}),/*#__PURE__*/jsx(ColorLabelInput,{as:"input",variant:"BodyS",color:"color.foreground.neutral.primary",value:color,onFocus:()=>{setActive(true);setShowPicker(true);},onBlur:()=>setActive(false),onChange:handleColorChange,placeholder:"#RRGGBB"})]}),/*#__PURE__*/jsx(EyeDropperButton,{onClick:handleEyeDropper,children:/*#__PURE__*/jsx(Icon,{name:"colorize",size:24})})]})}const Container$2=styled.div`
|
|
2899
2899
|
display: flex;
|
|
2900
2900
|
width: 100%;
|
|
2901
2901
|
justify-content: center;
|
|
@@ -3011,5 +3011,155 @@ onColorChange(result.sRGBHex);}catch(err){console.log("Browser does not support
|
|
|
3011
3011
|
}
|
|
3012
3012
|
`;
|
|
3013
3013
|
|
|
3014
|
-
|
|
3014
|
+
const CalendarRangeSquare=/*#__PURE__*/memo(function CalendarRangeSquare({startDate,endDate,hoveredStartDate,hoveredEndDate,currentDate}){const CALENDAR_WIDTH=384;const DAYS_PER_WEEK=7;const DAY_WIDTH=40;const calculateDayPosition=dayIndex=>{const remainingSpace=CALENDAR_WIDTH-DAYS_PER_WEEK*DAY_WIDTH;const gap=remainingSpace/(DAYS_PER_WEEK-1);return dayIndex*(DAY_WIDTH+gap)};const normalizeDate=date=>{return new Date(date.getFullYear(),date.getMonth(),date.getDate())};// 범위 계산에 사용할 실제 start/end
|
|
3015
|
+
const effectiveStartDate=hoveredStartDate||hoveredEndDate?hoveredStartDate!==null&&hoveredStartDate!==void 0?hoveredStartDate:startDate:startDate;const effectiveEndDate=hoveredStartDate||hoveredEndDate?hoveredEndDate!==null&&hoveredEndDate!==void 0?hoveredEndDate:endDate:endDate;const isDateInRange=date=>{if(!effectiveStartDate||!effectiveEndDate||!date)return false;const normalizedDate=normalizeDate(date);const normalizedStart=normalizeDate(effectiveStartDate);const normalizedEnd=normalizeDate(effectiveEndDate);const start=normalizedStart.getTime();const end=normalizedEnd.getTime();const current=normalizedDate.getTime();return current>=Math.min(start,end)&¤t<=Math.max(start,end)};const calculateRangeSegments=()=>{if(!effectiveStartDate||!effectiveEndDate)return [];const segments=[];// 주별로 그룹화
|
|
3016
|
+
const weeks=[];for(let i=0;i<currentDate.length;i+=DAYS_PER_WEEK){weeks.push(currentDate.slice(i,i+DAYS_PER_WEEK));}weeks.forEach((week,weekIndex)=>{let rangeStartIndex=-1;let rangeEndIndex=-1;week.forEach((day,dayIndex)=>{if(day.date&&day.isCurrentMonth&&isDateInRange(new Date(day.date))){if(rangeStartIndex===-1)rangeStartIndex=dayIndex;rangeEndIndex=dayIndex;}else if(day.date&&!day.isCurrentMonth&&rangeStartIndex!==-1){const startPos=calculateDayPosition(rangeStartIndex);const endPos=calculateDayPosition(rangeEndIndex);segments.push({row:weekIndex,left:startPos,width:endPos-startPos+DAY_WIDTH});rangeStartIndex=-1;rangeEndIndex=-1;}});if(rangeStartIndex!==-1&&rangeEndIndex!==-1){const startPos=calculateDayPosition(rangeStartIndex);const endPos=calculateDayPosition(rangeEndIndex);segments.push({row:weekIndex,left:startPos,width:endPos-startPos+DAY_WIDTH});}});return segments};const segments=useMemo(calculateRangeSegments,[effectiveStartDate,effectiveEndDate,currentDate]);const isRangeStart=date=>{if(!effectiveStartDate||!date)return false;return date.getTime()===effectiveStartDate.getTime()};const isRangeEnd=date=>{if(!effectiveEndDate||!date)return false;return date.getTime()===effectiveEndDate.getTime()};return /*#__PURE__*/jsx(Fragment,{children:segments.map((segment,index)=>/*#__PURE__*/jsx(RangeContainer,{style:{top:`${segment.row*40}px`,left:`${segment.left}px`,width:`${segment.width}px`},borderLeft:currentDate.filter(day=>day.date&&day.isCurrentMonth&&isRangeStart(new Date(day.date))).length>0,borderRight:currentDate.filter(day=>day.date&&day.isCurrentMonth&&isRangeEnd(new Date(day.date))).length>0},index))})});const RangeContainer=styled.div`
|
|
3017
|
+
position: absolute;
|
|
3018
|
+
height: 40px;
|
|
3019
|
+
z-index: 1;
|
|
3020
|
+
border-radius: ${({borderLeft,borderRight})=>`${borderLeft?"8px":"0"} ${borderRight?"8px":"0"} ${borderRight?"8px":"0"} ${borderLeft?"8px":"0"}`};
|
|
3021
|
+
|
|
3022
|
+
background-color: ${({theme})=>theme.colors.color.background.semantic.coreTranslucent};
|
|
3023
|
+
`;
|
|
3024
|
+
|
|
3025
|
+
function Month(props){const{isNextMonth,type,hoveredStartDate,hoveredEndDate,setSelectedDates,setHoveredStartDate,setHoveredEndDate}=props;// single/double 분기쳐보자....
|
|
3026
|
+
const selectedDates=type==="double"?props.selectedDates:[];const startDate=type==="double"?selectedDates[0]:undefined;const endDate=type==="double"?selectedDates[1]:undefined;const selectedDate=type==="single"?props.selectedDate:undefined;const onChange=type==="single"?props.onChange:undefined;const{monthData,nextMonthData}=useContext(CalendarContext);const days=["일","월","화","수","목","금","토"];const[lastClicked,setLastClicked]=useState(null);const[hoveredDate,setHoveredDate]=useState(null);const currentMonthData=isNextMonth?nextMonthData:monthData;const normalizeDate=date=>{return new Date(date.getFullYear(),date.getMonth(),date.getDate())};const compareDates=(date1,date2)=>{const normalized1=normalizeDate(date1);const normalized2=normalizeDate(date2);return normalized1.getTime()===normalized2.getTime()};const isInRange=date=>{if(!date)return false;if(type==="single"){if(!selectedDate)return false;return compareDates(date,selectedDate)}if(!startDate||!endDate)return false;const effectiveStartDate=hoveredStartDate||startDate;const effectiveEndDate=hoveredEndDate||endDate;const current=normalizeDate(date).getTime();const start=normalizeDate(effectiveStartDate).getTime();const end=normalizeDate(effectiveEndDate).getTime();return current>=Math.min(start,end)&¤t<=Math.max(start,end)};const checkRangeEdge=(date,edgeDate,hoveredEdgeDate)=>{if(!date||!edgeDate)return false;if(type==="single")return isInRange(date);const isHoveredEdge=hoveredEdgeDate&&compareDates(date,hoveredEdgeDate);const isActualEdge=compareDates(date,edgeDate);return isHoveredEdge||isActualEdge};const isRangeStart=date=>type==="double"?checkRangeEdge(date,startDate,hoveredStartDate):false;const isRangeEnd=date=>type==="double"?checkRangeEdge(date,endDate,hoveredEndDate):false;const handleDateSelection=(date,isHover)=>{if(!date)return;if(type==="single"){if(!isHover&&onChange)onChange(date);return}if(!startDate||!endDate||!lastClicked){if(isHover){setHoveredStartDate(date);setHoveredEndDate(date);}else {setSelectedDates([date,date]);setHoveredStartDate(date);setHoveredEndDate(date);setLastClicked("start");}return}if(lastClicked==="start"){if(isHover){setHoveredStartDate(startDate);setHoveredEndDate(date);}else {const newDates=[startDate,date].sort((a,b)=>a.getTime()-b.getTime());setSelectedDates(newDates);setHoveredStartDate(newDates[0]);setHoveredEndDate(newDates[1]);setLastClicked("end");}}else {if(isHover){setHoveredStartDate(date);setHoveredEndDate(endDate);}else {const newDates=[date,endDate].sort((a,b)=>a.getTime()-b.getTime());setSelectedDates(newDates);setHoveredStartDate(newDates[0]);setHoveredEndDate(newDates[1]);setLastClicked("start");}}};const handleMouseOver=date=>{if(type==="double"){setHoveredDate(date);handleDateSelection(date,true);}};const handleClick=date=>{handleDateSelection(date,false);};return /*#__PURE__*/jsxs(CalendarArea,{children:[/*#__PURE__*/jsx(DowArea,{children:days.map((dow,index)=>/*#__PURE__*/jsx(Dow,{children:/*#__PURE__*/jsx(Text,{variant:"BodyS",color:"color.foreground.neutral.secondary",children:dow})},index))}),/*#__PURE__*/jsx(CalendarColumn,{children:currentMonthData.map((week,index)=>{return /*#__PURE__*/jsxs(CalendarRow,{children:[type==="double"&&startDate&&endDate&&/*#__PURE__*/jsx(CalendarRangeSquare,{startDate:startDate,endDate:endDate,hoveredStartDate:hoveredStartDate,hoveredEndDate:hoveredEndDate,currentDate:week}),week.map((day,index)=>{const date=new Date(day.date);const isSelected=date?isInRange(date):false;const isStart=date?isRangeStart(date):false;const isEnd=date?isRangeEnd(date):false;const isHighlighted=type==="single"?selectedDate&&compareDates(date,selectedDate):isStart||isEnd;return /*#__PURE__*/jsx(DateWrapper,{isCurrentMonth:day.isCurrentMonth,isSelected:day.isCurrentMonth?isSelected:false,isInRange:day.isCurrentMonth?isInRange(date):false,isStart:day.isCurrentMonth?isStart:false,isEnd:day.isCurrentMonth?isEnd:false,isHighlighted:day.isCurrentMonth?isHighlighted:false,onMouseOver:()=>handleMouseOver(date),onMouseLeave:()=>{if(type==="double"){setHoveredDate(null);if(startDate&&endDate){setHoveredStartDate(startDate);setHoveredEndDate(endDate);}}},onClick:()=>handleClick(date),children:/*#__PURE__*/jsx(Text,{variant:"BodyL",color:!day.isCurrentMonth?"color.foreground.neutral.primary":isHighlighted?"color.foreground.surface.static":isInRange(date)?"color.foreground.semantic.core":"color.foreground.neutral.primary",children:day.day})},index)})]},index)})})]})}const DateWrapper=styled(MotionPressableDiv)`
|
|
3027
|
+
border-radius: 8px;
|
|
3028
|
+
display: flex;
|
|
3029
|
+
width: 40px;
|
|
3030
|
+
height: 40px;
|
|
3031
|
+
flex-direction: column;
|
|
3032
|
+
justify-content: center;
|
|
3033
|
+
align-items: center;
|
|
3034
|
+
opacity: ${({isCurrentMonth})=>isCurrentMonth?1:.3};
|
|
3035
|
+
background-color: ${({isHighlighted,isInRange,isStart,isEnd,theme})=>isHighlighted||isStart||isEnd?theme.colors.color.foreground.semantic.core:"transparent"};
|
|
3036
|
+
cursor: pointer;
|
|
3037
|
+
z-index: 2;
|
|
3038
|
+
border: none;
|
|
3039
|
+
`;const CalendarRow=styled.div`
|
|
3040
|
+
display: flex;
|
|
3041
|
+
justify-content: space-between;
|
|
3042
|
+
align-items: center;
|
|
3043
|
+
flex: 1 0 0;
|
|
3044
|
+
align-self: stretch;
|
|
3045
|
+
position: relative;
|
|
3046
|
+
`;const CalendarColumn=styled.div`
|
|
3047
|
+
display: flex;
|
|
3048
|
+
flex-direction: column;
|
|
3049
|
+
justify-content: center;
|
|
3050
|
+
align-items: center;
|
|
3051
|
+
gap: 8px;
|
|
3052
|
+
flex: 1 0 0;
|
|
3053
|
+
align-self: stretch;
|
|
3054
|
+
`;const DowArea=styled.div`
|
|
3055
|
+
display: flex;
|
|
3056
|
+
justify-content: space-between;
|
|
3057
|
+
align-items: flex-start;
|
|
3058
|
+
align-self: stretch;
|
|
3059
|
+
`;const CalendarArea=styled.div`
|
|
3060
|
+
display: flex;
|
|
3061
|
+
padding: 8px;
|
|
3062
|
+
flex-direction: column;
|
|
3063
|
+
align-items: flex-start;
|
|
3064
|
+
gap: 12px;
|
|
3065
|
+
flex: 1 0 0;
|
|
3066
|
+
align-self: stretch;
|
|
3067
|
+
`;const Dow=styled.div`
|
|
3068
|
+
display: flex;
|
|
3069
|
+
width: 36px;
|
|
3070
|
+
height: 28px;
|
|
3071
|
+
flex-direction: column;
|
|
3072
|
+
justify-content: center;
|
|
3073
|
+
align-items: center;
|
|
3074
|
+
`;
|
|
3075
|
+
|
|
3076
|
+
function Year({onChange}){const{yearData,month}=useContext(CalendarContext);return /*#__PURE__*/jsx(Container$1,{children:yearData.map((_,index)=>{return /*#__PURE__*/jsx(MonthContainer,{onClick:()=>{onChange(index+1);},isSelected:index===month-1,children:/*#__PURE__*/jsxs(Text,{color:index===month-1?"color.foreground.semantic.core":"color.foreground.neutral.primary",variant:"BodyL",children:[index+1,"월"]})},index)})})}const Container$1=styled.div`
|
|
3077
|
+
display: flex;
|
|
3078
|
+
padding: 8px;
|
|
3079
|
+
align-items: flex-start;
|
|
3080
|
+
gap: 12px 8px;
|
|
3081
|
+
flex: 1;
|
|
3082
|
+
align-self: stretch;
|
|
3083
|
+
flex-wrap: wrap;
|
|
3084
|
+
height: 100%;
|
|
3085
|
+
`;const MonthContainer=styled(MotionPressableDiv)`
|
|
3086
|
+
display: flex;
|
|
3087
|
+
min-width: 90px;
|
|
3088
|
+
flex-direction: column;
|
|
3089
|
+
justify-content: center;
|
|
3090
|
+
align-items: center;
|
|
3091
|
+
flex: 1;
|
|
3092
|
+
align-self: stretch;
|
|
3093
|
+
border-radius: 8px;
|
|
3094
|
+
background: ${({isSelected,theme})=>isSelected?theme.colors.color.background.semantic.coreTranslucent:"transparent"};
|
|
3095
|
+
`;
|
|
3096
|
+
|
|
3097
|
+
const DatePicker=({selectedDates,setSelectedDates,selectedDate,type,showNextMonth,onChange,headline,size="medium",placeholder="날짜 선택",popoverWrapperStyle={}})=>{const[open,setOpen]=useState(false);const containerRef=useRef(null);useClickOutside$2(containerRef,()=>setOpen(false),open);const{month,setMonth,year,prevMonth,nextMonth}=useContext(CalendarContext);const[isMonth,setIsMonth]=useState(true);const[hoveredDates,setHoveredDates]=useState([undefined,undefined]);const hoveredStartDate=hoveredDates[0];const hoveredEndDate=hoveredDates[1];const handleSetSelectedDates=dates=>{setSelectedDates(dates);setHoveredDates([dates[0],dates[1]]);};var _selectedDate_toLocaleDateString;return /*#__PURE__*/jsxs(Container,{ref:containerRef,children:[/*#__PURE__*/jsx(Input$5,{style:{width:"100%"},value:type==="single"?(_selectedDate_toLocaleDateString=selectedDate===null||selectedDate===void 0?void 0:selectedDate.toLocaleDateString("ko-KR",{year:"numeric",month:"2-digit",day:"2-digit"}))!==null&&_selectedDate_toLocaleDateString!==void 0?_selectedDate_toLocaleDateString:"":selectedDates.length>0?selectedDates.map(date=>date.toLocaleDateString("ko-KR",{year:"numeric",month:"2-digit",day:"2-digit"})).join(" ~ "):"",onChange:()=>{},size:size,placeholder:placeholder,type:"text",readOnly:true,align:"left",onClick:()=>{setOpen(!open);},icon:"calendar"}),open?/*#__PURE__*/jsx(PopoverWrapper,{style:popoverWrapperStyle,children:/*#__PURE__*/jsx(AnimatePresence,{mode:"wait",children:/*#__PURE__*/jsx(motion.div,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.2},style:{paddingBottom:"20px"},children:/*#__PURE__*/jsx(Popover,{type:"component",headline:headline,children:/*#__PURE__*/jsx(DatePickerContainer$1,{children:isMonth?/*#__PURE__*/jsxs(React__default.Fragment,{children:[/*#__PURE__*/jsxs(CalendarContainer$1,{children:[/*#__PURE__*/jsxs(CalendarHeader$1,{children:[/*#__PURE__*/jsxs(CalendarMonthArea$1,{onClick:()=>setIsMonth(false),children:[/*#__PURE__*/jsxs(Text,{variant:"BodyL_Bold",color:"color.foreground.neutral.primary",children:[year,"년 ",month,"월"]}),/*#__PURE__*/jsx(Icon,{name:"bracketDown",size:20,fill:"color.foreground.neutral.tertiary"})]}),/*#__PURE__*/jsxs(CalendarMonthControl$1,{children:[/*#__PURE__*/jsx(Icon,{name:"back",size:20,fill:"color.foreground.semantic.core",onClick:prevMonth}),/*#__PURE__*/jsx(Icon,{name:"front",size:20,fill:"color.foreground.semantic.core",onClick:nextMonth})]})]}),/*#__PURE__*/jsx(Month,{selectedDates:selectedDates,setSelectedDates:handleSetSelectedDates,selectedDate:selectedDate,type:type,hoveredStartDate:hoveredStartDate,hoveredEndDate:hoveredEndDate,setHoveredStartDate:date=>setHoveredDates([date,hoveredEndDate]),setHoveredEndDate:date=>setHoveredDates([hoveredStartDate,date]),onChange:onChange})]}),showNextMonth&&/*#__PURE__*/jsxs(CalendarContainer$1,{children:[/*#__PURE__*/jsxs(CalendarHeader$1,{children:[/*#__PURE__*/jsxs(CalendarMonthArea$1,{onClick:()=>setIsMonth(false),children:[/*#__PURE__*/jsxs(Text,{variant:"BodyL_Bold",color:"color.foreground.neutral.primary",children:[month+1>12?year+1:year,"년"," ",month+1>12?1:month+1,"월"]}),/*#__PURE__*/jsx(Icon,{name:"bracketDown",size:20,fill:"color.foreground.neutral.tertiary"})]}),/*#__PURE__*/jsxs(CalendarMonthControl$1,{children:[/*#__PURE__*/jsx(Icon,{name:"back",size:20,fill:"color.foreground.semantic.core",onClick:prevMonth}),/*#__PURE__*/jsx(Icon,{name:"front",size:20,fill:"color.foreground.semantic.core",onClick:nextMonth})]})]}),/*#__PURE__*/jsx(Month,{selectedDates:selectedDates,setSelectedDates:handleSetSelectedDates,selectedDate:selectedDate,isNextMonth:true,type:type,hoveredStartDate:hoveredStartDate,hoveredEndDate:hoveredEndDate,setHoveredStartDate:date=>setHoveredDates([date,hoveredEndDate]),setHoveredEndDate:date=>setHoveredDates([hoveredStartDate,date]),onChange:onChange})]})]}):/*#__PURE__*/jsxs(CalendarContainer$1,{children:[/*#__PURE__*/jsxs(CalendarHeader$1,{children:[/*#__PURE__*/jsxs(CalendarMonthArea$1,{onClick:()=>setIsMonth(true),children:[/*#__PURE__*/jsx(Text,{variant:"BodyL_Bold",color:"color.foreground.semantic.core",children:year}),/*#__PURE__*/jsx(Icon,{name:"bracketDown",size:20,fill:"color.foreground.semantic.core"})]}),/*#__PURE__*/jsxs(CalendarMonthControl$1,{children:[/*#__PURE__*/jsx(Icon,{name:"back",size:20,fill:"color.foreground.semantic.core"}),/*#__PURE__*/jsx(Icon,{name:"front",size:20,fill:"color.foreground.semantic.core"})]})]}),/*#__PURE__*/jsx(Year,{onChange:month=>{setMonth(month);setIsMonth(true);}})]})})})},"popover")})}):null]})};const Container=styled.div`
|
|
3098
|
+
position: relative;
|
|
3099
|
+
width: 100%;
|
|
3100
|
+
`;const PopoverWrapper=styled.div`
|
|
3101
|
+
position: absolute;
|
|
3102
|
+
top: 100%;
|
|
3103
|
+
padding-top: 4px;
|
|
3104
|
+
left: 0;
|
|
3105
|
+
width: fit-content;
|
|
3106
|
+
z-index: 9;
|
|
3107
|
+
`;const DatePickerContainer$1=styled.div`
|
|
3108
|
+
display: flex;
|
|
3109
|
+
align-items: center;
|
|
3110
|
+
gap: 12px;
|
|
3111
|
+
align-self: stretch;
|
|
3112
|
+
`;const CalendarContainer$1=styled.div`
|
|
3113
|
+
display: flex;
|
|
3114
|
+
width: 400px;
|
|
3115
|
+
height: 380px;
|
|
3116
|
+
flex-direction: column;
|
|
3117
|
+
align-items: flex-start;
|
|
3118
|
+
`;const CalendarHeader$1=styled.div`
|
|
3119
|
+
display: flex;
|
|
3120
|
+
padding: 4px;
|
|
3121
|
+
justify-content: space-between;
|
|
3122
|
+
align-items: center;
|
|
3123
|
+
align-self: stretch;
|
|
3124
|
+
`;const CalendarMonthArea$1=styled(MotionPressableDiv)`
|
|
3125
|
+
display: flex;
|
|
3126
|
+
padding: 4px 8px;
|
|
3127
|
+
align-items: center;
|
|
3128
|
+
gap: 4px;
|
|
3129
|
+
`;const CalendarMonthControl$1=styled.div`
|
|
3130
|
+
display: flex;
|
|
3131
|
+
align-items: center;
|
|
3132
|
+
gap: 16px;
|
|
3133
|
+
`;
|
|
3134
|
+
|
|
3135
|
+
const DatePickerSingle=({selectedDates,setSelectedDates,selectedDate,type,onChange})=>{const[open,setOpen]=useState(false);const containerRef=useRef(null);useClickOutside$2(containerRef,()=>setOpen(false),open);const{month,setMonth,year,prevMonth,nextMonth}=useContext(CalendarContext);const[isMonth,setIsMonth]=useState(true);const[hoveredDates,setHoveredDates]=useState([undefined,undefined]);const hoveredStartDate=hoveredDates[0];const hoveredEndDate=hoveredDates[1];const handleSetSelectedDates=dates=>{setSelectedDates(dates);setHoveredDates([dates[0],dates[1]]);};return /*#__PURE__*/jsx(DatePickerContainer,{children:isMonth?/*#__PURE__*/jsxs(CalendarContainer,{children:[/*#__PURE__*/jsxs(CalendarHeader,{children:[/*#__PURE__*/jsxs(CalendarMonthArea,{onClick:()=>setIsMonth(false),children:[/*#__PURE__*/jsxs(Text,{variant:"BodyL_Bold",color:"color.foreground.neutral.primary",children:[year,"년 ",month,"월"]}),/*#__PURE__*/jsx(Icon,{name:"bracketDown",size:20,fill:"color.foreground.neutral.tertiary"})]}),/*#__PURE__*/jsxs(CalendarMonthControl,{children:[/*#__PURE__*/jsx(Icon,{name:"back",size:20,fill:"color.foreground.semantic.core",onClick:prevMonth}),/*#__PURE__*/jsx(Icon,{name:"front",size:20,fill:"color.foreground.semantic.core",onClick:nextMonth})]})]}),/*#__PURE__*/jsx(Month,{selectedDates:selectedDates,setSelectedDates:handleSetSelectedDates,selectedDate:selectedDate,type:type,hoveredStartDate:hoveredStartDate,hoveredEndDate:hoveredEndDate,setHoveredStartDate:date=>setHoveredDates([date,hoveredEndDate]),setHoveredEndDate:date=>setHoveredDates([hoveredStartDate,date]),onChange:onChange})]}):/*#__PURE__*/jsxs(CalendarContainer,{children:[/*#__PURE__*/jsxs(CalendarHeader,{children:[/*#__PURE__*/jsxs(CalendarMonthArea,{onClick:()=>setIsMonth(true),children:[/*#__PURE__*/jsx(Text,{variant:"BodyL_Bold",color:"color.foreground.semantic.core",children:year}),/*#__PURE__*/jsx(Icon,{name:"bracketDown",size:20,fill:"color.foreground.semantic.core"})]}),/*#__PURE__*/jsxs(CalendarMonthControl,{children:[/*#__PURE__*/jsx(Icon,{name:"back",size:20,fill:"color.foreground.semantic.core"}),/*#__PURE__*/jsx(Icon,{name:"front",size:20,fill:"color.foreground.semantic.core"})]})]}),/*#__PURE__*/jsx(Year,{onChange:month=>{setMonth(month);setIsMonth(true);}})]})})};const DatePickerContainer=styled.div`
|
|
3136
|
+
display: flex;
|
|
3137
|
+
align-items: center;
|
|
3138
|
+
gap: 12px;
|
|
3139
|
+
align-self: stretch;
|
|
3140
|
+
justify-content: center;
|
|
3141
|
+
`;const CalendarContainer=styled.div`
|
|
3142
|
+
display: flex;
|
|
3143
|
+
width: 400px;
|
|
3144
|
+
height: 380px;
|
|
3145
|
+
flex-direction: column;
|
|
3146
|
+
align-items: flex-start;
|
|
3147
|
+
`;const CalendarHeader=styled.div`
|
|
3148
|
+
display: flex;
|
|
3149
|
+
padding: 4px;
|
|
3150
|
+
justify-content: space-between;
|
|
3151
|
+
align-items: center;
|
|
3152
|
+
align-self: stretch;
|
|
3153
|
+
`;const CalendarMonthArea=styled(MotionPressable)`
|
|
3154
|
+
display: flex;
|
|
3155
|
+
padding: 4px 8px;
|
|
3156
|
+
align-items: center;
|
|
3157
|
+
gap: 4px;
|
|
3158
|
+
`;const CalendarMonthControl=styled.div`
|
|
3159
|
+
display: flex;
|
|
3160
|
+
align-items: center;
|
|
3161
|
+
gap: 16px;
|
|
3162
|
+
`;
|
|
3163
|
+
|
|
3164
|
+
export { Alert, Badge, Breadcrumb, Button$1 as Button, Calendar, Card, CellPicker, Checkbox, Chip, ClientProvider, ColorPicker, ComboBox, DatePicker, DatePickerSingle, Description$1 as Description, Divider$1 as Divider, Empty, HeadColumn, HeadRow, Header, Icon, Input$5 as Input, Item$1 as Item, List$1 as List, ListGroup, Loading, MotionPressable, MotionPressableDiv, MotionText, NavigationBar, PageIndicator, Pagination, Paragraph, Popover, ProgressBar, Provider, Radio, SearchBar, SearchBox, SegmentedControl, Slider, Snackbar, Switch, TabBar, Table, TableColumn, Tabs, Text, TextButton, TextComboBox, Timeline, Tooltip, Upload };
|
|
3015
3165
|
//# sourceMappingURL=index.mjs.map
|