@dotss/ui 0.0.4 → 0.0.6

package/dist/Chip/Chip.es.js

@@ -0,0 +1,120 @@
+import { jsxs as c } from "@emotion/react/jsx-runtime";
+import { forwardRef as b } from "react";
+import f from "@emotion/styled";
+import u from "../utils/getContrastingTextColor/getContrastingTextColor.es.js";
+import h from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+const x = f.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: { spacing: o } }) => o.content(1)}px;
+  border-radius: 18px;
+  box-sizing: border-box;
+  color: ${({ theme: o }) => o.palette.grey[100]};
+  cursor: ${({ disabled: o }) => o ? "not-allowed" : "pointer"};
+  pointer-events: ${({ disabled: o }) => o ? "none" : "auto"};
+
+  ${({
+  theme: {
+    palette: { brand: o, grey: i, background: e }
+  },
+  variant: l,
+  selected: r,
+  isHoverPossible: n
+}) => {
+  let t = {};
+  return l === "filled" ? (t = {
+    backgroundColor: r ? o.primary.main : e.primary,
+    color: u(r ? o.primary.main : e.primary, [
+      i.white,
+      i[100]
+    ]),
+    border: "1px solid transparent",
+    "&:active:not([disabled])": {
+      backgroundColor: r ? o.primary.press : i[10]
+    },
+    "&[disabled]": {
+      backgroundColor: r ? o.primary.disable : i[10],
+      color: i[30]
+    },
+    "& svg": {
+      color: "inherit"
+    }
+  }, n && (t = {
+    ...t,
+    "&:hover:not([disabled])": {
+      backgroundColor: r ? o.primary.press : i[10]
+    }
+  }), t) : (l === "outlined" && (t = {
+    backgroundColor: i.white,
+    color: i[70],
+    border: `1px solid ${r ? o.primary.main : i[30]}`,
+    "&:active:not([disabled])": {
+      backgroundColor: r ? o.primary.disable : i[10]
+    },
+    "&[disabled]": {
+      backgroundColor: r ? o.primary.disable : i[10],
+      borderColor: r ? o.primary.disableLine : i[30],
+      color: i[30]
+    },
+    "& svg": {
+      color: "inherit"
+    }
+  }, n && (t = {
+    ...t,
+    "&:hover:not([disabled])": {
+      backgroundColor: r ? o.primary.disable : i[10]
+    }
+  })), t);
+}}
+
+  ${({ theme: { typography: o } }) => ({
+  padding: "8px 11px",
+  maxHeight: 36,
+  fontSize: o.b4M.size,
+  fontWeight: o.b4M.weight,
+  lineHeight: o.b4M.lineHeight,
+  letterSpacing: o.b4M.letterSpacing,
+  textAlign: "center",
+  "& svg": {
+    width: 16,
+    height: 16
+  }
+})}
+`, w = b(
+  ({
+    children: o,
+    tag: i,
+    variant: e = "filled",
+    startAdornment: l,
+    endAdornment: r,
+    iconOnly: n,
+    selected: t = !1,
+    disabled: a = !1,
+    inlineCSS: s,
+    ...p
+  }, m) => {
+    const { isHoverPossible: d } = h();
+    return /* @__PURE__ */ c(
+      x,
+      {
+        as: i,
+        ref: m,
+        variant: e,
+        selected: t,
+        disabled: a,
+        isHoverPossible: d,
+        ...p,
+        css: s,
+        children: [
+          l,
+          !n && o,
+          r
+        ]
+      }
+    );
+  }
+);
+export {
+  w as default
+};

package/dist/Chip/Chip.stories.d.ts

@@ -0,0 +1,30 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: <T extends import('react').ElementType = "div">(props: import('./Chip').ChipProps<T>) => import('react').ReactNode;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        startAdornment: {
+            control: {
+                disable: true;
+            };
+        };
+        endAdornment: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Filled: Story;
+export declare const Outlined: Story;
+export declare const StartAdornment: Story;
+export declare const EndAdornment: Story;
+export declare const BothAdornment: Story;
+export declare const IconOnly: Story;

package/dist/Chip/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Chip.cjs");exports.default=e.default;

package/dist/Chip/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Chip } from './Chip';
+
+export default Chip;

package/dist/Chip/index.es.js

@@ -0,0 +1,4 @@
+import p from "./Chip.es.js";
+export {
+  p as default
+};

package/dist/CircularProgressIndicator/CircularProgressIndicator.cjs

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("@emotion/react/jsx-runtime"),h=require("react"),g=require("@emotion/react"),m=require("@emotion/styled"),y=e=>e&&e.__esModule?e:{default:e},o=y(m),k=g.keyframes`
+    100% {
+        transform: rotate(270deg);
+    }
+`,x=o.default.svg`
+  ${({size:e})=>e==="large"?{width:120,height:120}:{width:40,height:40}};
+
+  transform: rotate(-90deg);
+
+  ${({loop:e})=>e?{animation:`${k} 1s infinite`}:{}};
+`,$=o.default.circle`
+  ${({size:e})=>e==="large"?{cx:60,cy:60,strokeWidth:16}:{cx:20,cy:20,strokeWidth:4}};
+  stroke: ${({theme:{palette:{grey:e}}})=>e[10]};
+`,_=o.default.circle`
+  transition: stroke-dashoffset ${({transitionDuration:e})=>e}ms linear 0s;
+  ${({size:e})=>e==="large"?{cx:60,cy:60,strokeWidth:16}:{cx:20,cy:20,strokeWidth:4}};
+  stroke: ${({theme:{palette:{brand:e}}})=>e.primary.main};
+`,p=h.forwardRef(function({size:t="small",value:i=0,transitionDuration:n=500,inlineCSS:l,loop:a,...d},u){const r=t==="large"?52:18,c=2*Math.PI*r,f=c*(1-(a?20:i)/100);return s.jsxs(x,{ref:u,viewBox:t==="large"?"0 0 120 120":"0 0 40 40",fill:"none",size:t,loop:a,...d,css:l,children:[s.jsx($,{size:t,r}),s.jsx(_,{size:t,transitionDuration:n,r,strokeLinecap:"round",strokeDashoffset:f,strokeDasharray:c})]})});exports.default=p;

package/dist/CircularProgressIndicator/CircularProgressIndicator.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+import { GeneralComponentProps, Size } from '../typings/component';
+
+export interface CircularProgressIndicatorProps extends GeneralComponentProps<HTMLAttributes<SVGSVGElement>> {
+    size?: Extract<Size, 'large' | 'small'>;
+    value?: number;
+    transitionDuration?: number;
+    loop?: boolean;
+}
+declare const CircularProgressIndicator: import('react').ForwardRefExoticComponent<CircularProgressIndicatorProps & import('react').RefAttributes<SVGSVGElement>>;
+export default CircularProgressIndicator;

package/dist/CircularProgressIndicator/CircularProgressIndicator.es.js

@@ -0,0 +1,87 @@
+import { jsxs as h, jsx as c } from "@emotion/react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { keyframes as k } from "@emotion/react";
+import o from "@emotion/styled";
+const y = k`
+    100% {
+        transform: rotate(270deg);
+    }
+`, p = o.svg`
+  ${({ size: r }) => r === "large" ? {
+  width: 120,
+  height: 120
+} : {
+  width: 40,
+  height: 40
+}};
+
+  transform: rotate(-90deg);
+
+  ${({ loop: r }) => r ? {
+  animation: `${y} 1s infinite`
+} : {}};
+`, u = o.circle`
+  ${({ size: r }) => r === "large" ? {
+  cx: 60,
+  cy: 60,
+  strokeWidth: 16
+} : {
+  cx: 20,
+  cy: 20,
+  strokeWidth: 4
+}};
+  stroke: ${({
+  theme: {
+    palette: { grey: r }
+  }
+}) => r[10]};
+`, x = o.circle`
+  transition: stroke-dashoffset ${({ transitionDuration: r }) => r}ms linear 0s;
+  ${({ size: r }) => r === "large" ? {
+  cx: 60,
+  cy: 60,
+  strokeWidth: 16
+} : {
+  cx: 20,
+  cy: 20,
+  strokeWidth: 4
+}};
+  stroke: ${({
+  theme: {
+    palette: { brand: r }
+  }
+}) => r.primary.main};
+`, P = g(
+  function({ size: t = "small", value: i = 0, transitionDuration: n = 500, inlineCSS: l, loop: s, ...d }, f) {
+    const e = t === "large" ? 52 : 18, a = 2 * Math.PI * e, m = a * (1 - (s ? 20 : i) / 100);
+    return /* @__PURE__ */ h(
+      p,
+      {
+        ref: f,
+        viewBox: t === "large" ? "0 0 120 120" : "0 0 40 40",
+        fill: "none",
+        size: t,
+        loop: s,
+        ...d,
+        css: l,
+        children: [
+          /* @__PURE__ */ c(u, { size: t, r: e }),
+          /* @__PURE__ */ c(
+            x,
+            {
+              size: t,
+              transitionDuration: n,
+              r: e,
+              strokeLinecap: "round",
+              strokeDashoffset: m,
+              strokeDasharray: a
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  P as default
+};

package/dist/CircularProgressIndicator/CircularProgressIndicator.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./CircularProgressIndicator').CircularProgressIndicatorProps & import('react').RefAttributes<SVGSVGElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Loop: Story;

package/dist/CircularProgressIndicator/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./CircularProgressIndicator.cjs");exports.default=e.default;

package/dist/CircularProgressIndicator/index.d.ts

@@ -0,0 +1,3 @@
+import { default as CircularProgressIndicator } from './CircularProgressIndicator';
+
+export default CircularProgressIndicator;

package/dist/CircularProgressIndicator/index.es.js

@@ -0,0 +1,4 @@
+import o from "./CircularProgressIndicator.es.js";
+export {
+  o as default
+};

package/dist/ClickAwayListener/ClickAwayListener.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@emotion/react/jsx-runtime"),o=require("react"),d=require("../Box/Box.cjs");function a({onClickAway:n,children:u,...s}){const t=o.useRef(null);return o.useEffect(()=>{const e=r=>{t.current&&!t.current.contains(r.target)&&n(r.target)};return window.addEventListener("mousedown",e),window.addEventListener("touchstart",e),()=>{window.removeEventListener("mousedown",e),window.removeEventListener("touchstart",e)}},[n]),i.jsx(d.default,{ref:t,...s,children:u})}exports.default=a;

package/dist/ClickAwayListener/ClickAwayListener.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+
+export interface ClickAwayListenerProps extends HTMLAttributes<HTMLDivElement> {
+    onClickAway: (target: EventTarget | null) => void;
+}
+declare function ClickAwayListener({ onClickAway, children, ...props }: ClickAwayListenerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default ClickAwayListener;

package/dist/ClickAwayListener/ClickAwayListener.es.js

@@ -0,0 +1,17 @@
+import { jsx as i } from "@emotion/react/jsx-runtime";
+import { useRef as u, useEffect as d } from "react";
+import a from "../Box/Box.es.js";
+function c({ onClickAway: r, children: o, ...s }) {
+  const t = u(null);
+  return d(() => {
+    const e = (n) => {
+      t.current && !t.current.contains(n.target) && r(n.target);
+    };
+    return window.addEventListener("mousedown", e), window.addEventListener("touchstart", e), () => {
+      window.removeEventListener("mousedown", e), window.removeEventListener("touchstart", e);
+    };
+  }, [r]), /* @__PURE__ */ i(a, { ref: t, ...s, children: o });
+}
+export {
+  c as default
+};

package/dist/ClickAwayListener/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ClickAwayListener.cjs");exports.default=e.default;

package/dist/ClickAwayListener/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ClickAwayListener } from './ClickAwayListener';
+
+export default ClickAwayListener;

package/dist/ClickAwayListener/index.es.js

@@ -0,0 +1,4 @@
+import r from "./ClickAwayListener.es.js";
+export {
+  r as default
+};

package/dist/DatePicker/DatePicker.cjs

@@ -0,0 +1,73 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("@emotion/react/jsx-runtime"),f=require("react"),et=require("../IconButton/IconButton.cjs"),Bt=require("../Menu/Menu.cjs"),Nt=require("../Menu/MenuBlock/MenuBlock.cjs"),Gt=require("../core/useTheme.cjs"),Kt=require("@emotion/styled"),V=require("../utils/getContrastingTextColor/getContrastingTextColor.cjs"),Ut=t=>t&&t.__esModule?t:{default:t},T=Ut(Kt),Vt=T.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({theme:{spacing:t}})=>t.content(2)}px;
+`,Ct=T.default.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: fit-content;
+  padding: 0 ${({theme:{spacing:t}})=>t.content(3)}px;
+  cursor: ${({clickable:t})=>t?"pointer":"default"};
+
+  ${({theme:{typography:{h4B:t}}})=>({fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing})};
+`,Jt=T.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({theme:{spacing:t}})=>t.content(4)}px;
+
+  ${({theme:{typography:{h2B:t}}})=>({fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing})};
+`,Pt=T.default.div`
+  display: flex;
+  align-items: center;
+  padding: 0 ${({theme:{spacing:t},edgeSpacing:e})=>t.content(e||0)}px;
+
+  & > span {
+    margin: 5px 0;
+    flex-grow: 1;
+    text-align: center;
+    ${({theme:{palette:{grey:t},typography:{b4M:e}}})=>({fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing,color:t[50]})};
+  }
+`,Qt=T.default.div`
+  overflow: hidden;
+`,Zt=T.default.div`
+  display: flex;
+  transform: translate3d(0, 0, 0);
+`,jt=T.default.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 100%;
+  gap: ${({theme:{spacing:t}})=>t.content(2)}px;
+  padding: ${({theme:{spacing:t}})=>t.content(2)}px
+    ${({theme:{spacing:t},edgeSpacing:e})=>t.content(e||0)}px;
+`,Rt=T.default.div`
+  display: flex;
+  width: 100%;
+`,kt=T.default.div`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-width: 30px;
+  min-height: 30px;
+  max-height: 30px;
+  cursor: ${({disabled:t})=>t?"not-allowed":"pointer"};
+  pointer-events: ${({disabled:t})=>t?"none":"auto"};
+  & > span {
+    z-index: 1;
+  }
+
+  ${({theme:{typography:{b2R:t}}})=>({fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing})};
+
+  ${({theme:{palette:{brand:t,grey:e}},variant:r,today:d,selected:s,disabled:l})=>{if(s){let o={fontWeight:700,color:V.default(t.primary.main,[e.white,e[100]]),"&:after":{content:'""',position:"absolute",top:"50%",left:"50%",width:30,height:30,transform:"translate(-50%, -50%)",backgroundColor:l?t.primary.disable:t.primary.main,borderRadius:"50%"}};return r==="start"&&(o={fontWeight:700,color:V.default(t.primary.main,[e.white,e[100]]),overflow:"hidden","&:before":{content:'""',position:"absolute",top:"50%",left:"50%",width:30,height:30,transform:"translate(-50%, -50%)",backgroundColor:l?t.primary.disable:t.primary.main,borderTopLeftRadius:100,borderBottomLeftRadius:100},"&:after":{content:'""',position:"absolute",top:"50%",left:30,width:"100%",height:30,transform:"translateY(-50%)",backgroundColor:l?t.primary.disable:t.primary.main}}),r==="end"&&(o={fontWeight:700,color:V.default(t.primary.main,[e.white,e[100]]),overflow:"hidden","&:before":{content:'""',position:"absolute",top:"50%",left:"50%",width:30,height:30,transform:"translate(-50%, -50%)",backgroundColor:l?t.primary.disable:t.primary.main,borderTopRightRadius:100,borderBottomRightRadius:100},"&:after":{content:'""',position:"absolute",top:"50%",right:30,width:"100%",height:30,transform:"translateY(-50%)",backgroundColor:l?t.primary.disable:t.primary.main}}),r==="middle"&&(o={fontWeight:700,color:V.default(t.primary.main,[e.white,e[100]]),overflow:"hidden","&:after":{content:'""',position:"absolute",top:"50%",left:"50%",width:"calc(100% + 1px)",height:30,transform:"translate(-50%, -50%)",backgroundColor:l?t.primary.disable:t.primary.main}}),o}return d?{"&:after":{content:'""',position:"absolute",top:"50%",left:"50%",width:30,height:30,transform:"translate(-50%, -50%)",border:`1px solid ${t.primary.main}`,borderRadius:"50%"}}:null}};
+
+  ${({theme:{palette:{grey:t,pink:e,brand:r}},holiday:d,disabled:s,selected:l})=>{let o=null;return d&&(o={color:V.default(l?r.primary.main:"transparent",[e[30],e[100]])}),s&&(o={color:t[30]}),s&&d&&(o={color:e[30]}),o}}
+`,te=T.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  cursor: ${({clickable:t})=>t?"pointer":"default"};
+`,ee=30,ne=f.forwardRef(function({onChange:e,value:r,date:d,minDate:s,maxDate:l,holidayDates:o,disableDates:m,showWeekHead:pt=!1,multiple:w=!1,period:C=!1,enableMonthSelect:W=!1,showToday:gt=!1,edgeSpacing:nt=0,inlineCSS:Ht,...bt},zt){const{spacing:yt}=Gt.default(),[L,rt]=f.useState((typeof d=="string"||typeof d=="number"?new Date(d):d)||new Date),[y,B]=f.useState(()=>Array.isArray(r)&&r.length>0?$(r[0]):$(r)),[H,J]=f.useState(()=>Array.isArray(r)&&r.length>1?$(r[r.length-1]):null),[M,Dt]=f.useState(0),[S,E]=f.useState(1),[$t,xt]=f.useState(!1),[st,wt]=f.useState(!1),it=f.useRef(null),p=f.useRef(null),P=f.useRef(0),R=f.useRef(0),A=f.useRef(!1),N=f.useRef(S),ot=f.useRef(),ct=f.useRef(null),at=f.useRef(null),k=L.getFullYear(),Q=L.getMonth(),St=mt(k,Q),G=I(Q),Y=$(r),F=$(o),_=$(m),lt=O(L,s)||vt(L,s),ut=z(L,l)||vt(L,l),Z=new Date(k,Q-1),tt=new Date(k,Q+1),K=`${k}. ${G}`,q=C&&!!y&&!!H,Mt=[{year:Z.getFullYear(),month:I(Z.getMonth()),weeks:mt(Z.getFullYear(),Z.getMonth())},{year:k,month:G,weeks:St},{year:tt.getFullYear(),month:I(tt.getMonth()),weeks:mt(tt.getFullYear(),tt.getMonth())}],It=Mt[1].weeks.length*(ee+yt.content(2))+yt.content(2),Tt=n=>()=>{w&&(p.current&&(p.current.style.transition="none",p.current.style.cursor="grabbing"),P.current=n,A.current=!0)},b=f.useCallback(()=>{if(!A.current)return;const n=M-R.current,u=Math.abs(M-n),a=M*.1;p.current&&(p.current.style.transform=`translate3d(-${M*S}px, 0, 0)`,p.current.style.cursor="grab",p.current.style.transition="transform 0.2s"),P.current=0,R.current=0,A.current=!1,!(u<=a)&&(M<n?E(g=>g+1):M>n&&E(g=>g-1))},[M,S]),At=n=>()=>{if(!(A.current||S!==1)){if(!C){e==null||e(n,$);return}if(j(n,y)&&Array.isArray(r)&&r.length===1){B(null),J(null),e==null||e([],$);return}else if(j(n,y)&&!Array.isArray(r)&&j(n,r)){B(null),J(null),e==null||e([],$);return}if(!y){B(n),e==null||e(n,$);return}if(!H&&y){const[u,a]=z(n,y)?[y,n]:[n,y];B(u),J(a);const g=Wt([u,a],m);e==null||e(g,$);return}y&&H&&(B(n),J(null),e==null||e(n,$))}},Lt=n=>Tt(n.clientX)(),Et=n=>Tt(n.touches[0].clientX)(),Yt=()=>{$t||(p.current&&(p.current.style.transition="transform 0.2s"),E(n=>n-1))},Ft=()=>{$t||(p.current&&(p.current.style.transition="transform 0.2s"),E(n=>n+1))},ft=()=>wt(n=>!n),_t=n=>{if(!n)return;const[u,a]=n.toString().split(".").map(Number);rt(new Date(u,a-1)),wt(!1)};return f.useLayoutEffect(()=>{var n;Dt(((n=it.current)==null?void 0:n.clientWidth)||0)},[w]),f.useEffect(()=>{const n=()=>{var u;Dt(((u=it.current)==null?void 0:u.clientWidth)||0)};return window.addEventListener("resize",n),window.addEventListener("scroll",n),()=>{window.removeEventListener("resize",n),window.removeEventListener("scroll",n)}},[w]),f.useEffect(()=>{const n=p.current,u=(i,x,D)=>{if(!n||!A.current)return;R.current=i-P.current;const h=x-P.current,v=5;if(A.current=A.current||Math.abs(R.current)>v&&Math.abs(h)<v*2,D.cancelable&&D.preventDefault(),A.current){if(lt&&R.current>0){b();return}if(ut&&R.current<0){b();return}Math.abs(R.current)>=10&&(n.style.transform=`translate3d(${R.current-M*S}px, 0, 0)`,n.style.cursor="grabbing")}},a=i=>u(i.touches[0].clientX,i.touches[0].clientY,i),g=i=>{A.current&&u(i.clientX,i.clientY,i)};return n==null||n.addEventListener("mousemove",g),n==null||n.addEventListener("touchmove",a),()=>{n==null||n.removeEventListener("mousemove",g),n==null||n.removeEventListener("touchmove",a)}},[M,S,b,ut,lt]),f.useEffect(()=>{xt(!0),ot.current=setTimeout(()=>{p.current&&(p.current.style.transition="none"),S>N.current?(E(1),rt(n=>new Date(n.setMonth(n.getMonth()+1))),N.current=1):S<N.current?(rt(n=>new Date(n.setMonth(n.getMonth()-1))),E(1),N.current=1):N.current=S,xt(!1)},200)},[S]),f.useLayoutEffect(()=>{if(!C||!Array.isArray(r))return;const n=Wt(r,m);r.length<n.length&&(e==null||e(n,$))},[C,r,e,m]),f.useEffect(()=>{let n;return st&&(n=setTimeout(()=>{if(at.current){const u=at.current.querySelector("ul"),a=u==null?void 0:u.querySelector(`[data-value="${K}"]`);a==null||a.scrollIntoView({block:"start"})}},200)),()=>{clearTimeout(n)}},[st,K]),f.useEffect(()=>()=>{ot.current&&clearTimeout(ot.current)},[]),c.jsxs(Vt,{ref:zt,...bt,css:Ht,children:[w?c.jsxs(Jt,{children:[c.jsx(et.default,{name:"ChevronLeftLine",size:"small",onClick:Yt,disabled:lt}),c.jsxs(te,{ref:ct,clickable:!!W,onClick:W?ft:void 0,children:[K,W&&c.jsx(et.default,{name:"ArrowDownFill",size:"xSmall"})]}),c.jsx(et.default,{name:"ChevronRightLine",size:"small",onClick:Ft,disabled:ut})]}):c.jsxs(Ct,{ref:ct,clickable:!!W,onClick:W?ft:void 0,children:[K,W&&c.jsx(et.default,{name:"ArrowDownFill",size:"xSmall"})]}),W&&c.jsx(Bt.default,{anchorRef:ct,ref:at,open:st,onClose:ft,onChange:_t,value:K,placement:w?"bottom-center":"bottom-left",width:160,fitToAnchorWidth:!1,maxHeight:368,children:Array.from({length:130},(n,u)=>{const a=1970+u;return Array.from({length:12},(g,i)=>{const x=i+1,D=x<10?`0${x}`:x,h=new Date(a,i+1,0).getDate(),v=`${a}-${D}-${h}`,U=`${a}-${D}-01`;return O(v,s)||z(U,l)?null:c.jsx(Nt.default,{value:`${a}. ${D}`,children:`${a}. ${D}`},`${a}-${D}`)})})}),pt&&c.jsxs(Pt,{edgeSpacing:nt,children:[c.jsx("span",{children:"일"}),c.jsx("span",{children:"월"}),c.jsx("span",{children:"화"}),c.jsx("span",{children:"수"}),c.jsx("span",{children:"목"}),c.jsx("span",{children:"금"}),c.jsx("span",{children:"토"})]}),c.jsx(Qt,{ref:it,children:c.jsxs(Zt,{ref:p,onMouseDown:Lt,onMouseUp:b,onMouseLeave:b,onTouchStart:Et,onTouchEnd:b,onTouchCancel:b,style:{transform:w?`translate3d(-${M*S}px, 0, 0)`:void 0,cursor:w?"grab":void 0,maxHeight:It},children:[w&&Mt.map(({year:n,month:u,weeks:a})=>c.jsx(jt,{edgeSpacing:nt,children:a.map((g,i)=>c.jsx(Rt,{children:g.map((x,D)=>{const h=`${n}-${u}-${X(x||0)}`,v=j(h,new Date),U=Array.isArray(F)?F.includes(h):F===h,dt=Array.isArray(Y)?Y.includes(h):Y===h,ht=!x||(Array.isArray(_)?_.includes(h):_===h)||z(h,l)||O(h,s),qt=q&&j(h,y),Ot=q&&j(h,H),Xt=q&&z(h,y)&&O(h,H);return c.jsx(kt,{variant:qt?"start":Ot?"end":Xt?"middle":void 0,onClick:At(h),today:gt&&v,holiday:U,selected:dt,disabled:ht,children:c.jsx("span",{children:x})},`${n}-${u}-week-row-${D}-${x?h:`${i}-${D}`}`)})},`${n}-${u}-week-row-${String(g)}`))},`week-body-${n}-${u}`)),!w&&c.jsx(jt,{edgeSpacing:nt,children:St.map((n,u)=>c.jsx(Rt,{children:n.map((a,g)=>{const i=`${k}-${G}-${X(a||0)}`,x=j(i,new Date),D=Array.isArray(F)?F.includes(i):F===i,h=Array.isArray(Y)?Y.includes(i):Y===i,v=!a||(Array.isArray(_)?_.includes(i):_===i)||z(i,l)||O(i,s),U=q&&j(i,y),dt=q&&j(i,H),ht=q&&z(i,y)&&O(i,H);return c.jsx(kt,{variant:U?"start":dt?"end":ht?"middle":void 0,onClick:At(i),today:gt&&x,holiday:D,selected:h,disabled:v,children:c.jsx("span",{children:a})},`${k}-${G}-week-row-${n}-${a?i:`${u}-${g}`}`)})},`${k}-${G}-week-row-${String(n)}`))})]})})]})});function mt(t,e){let r=[];const d=new Date(t,e,1),s=new Date(t,e+1,0).getDate(),l=d.getDay();let o=Array.from({length:l}).fill(null);for(let m=1;m<=s;m+=1)o.push(m),(o.length===7||m===s)&&(r.push(o),o=[]);return r=r.map(m=>Array.from({length:7}).map((pt,w)=>m[w]||null)),r}function I(t){return String(t+1).length===1?`0${t+1}`:t+1}function X(t){return String(t).length===1?`0${t}`:t}function $(t){if(Array.isArray(t))return t.map(e=>e instanceof Date?`${e.getFullYear()}-${I(e.getMonth())}-${X(e.getDate())}`:e);if(t instanceof Date)return`${t.getFullYear()}-${I(t.getMonth())}-${X(t.getDate())}`;if(typeof t=="number"){const e=new Date(t);return`${e.getFullYear()}-${I(e.getMonth())}-${X(e.getDate())}`}return t}function z(t,e){if(!t||!e)return!1;const r=t instanceof Date?t:new Date(t);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const d=r.getTime(),s=e instanceof Date?e:new Date(e);s.setHours(0),s.setMinutes(0),s.setSeconds(0),s.setMilliseconds(0);const l=s.getTime();return d>l}function O(t,e){if(!t||!e)return!1;const r=t instanceof Date?t:new Date(t);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const d=r.getTime(),s=e instanceof Date?e:new Date(e);s.setHours(0),s.setMinutes(0),s.setSeconds(0),s.setMilliseconds(0);const l=s.getTime();return d<l}function vt(t,e){if(!t||!e)return!1;const r=t instanceof Date?t:new Date(t),d=e instanceof Date?e:new Date(e);return`${r.getFullYear()}-${r.getMonth()}`==`${d.getFullYear()}-${d.getMonth()}`}function j(t,e){if(!t||!e)return!1;const r=t instanceof Date?t:new Date(t);r.setHours(0),r.setMinutes(0),r.setSeconds(0),r.setMilliseconds(0);const d=r.getTime(),s=e instanceof Date?e:new Date(e);s.setHours(0),s.setMinutes(0),s.setSeconds(0),s.setMilliseconds(0);const l=s.getTime();return d===l}function Wt(t,e){if(!t||!Array.isArray(t)||t.length===0)return[];const r=t.map(m=>m instanceof Date?m:m===null?new Date:new Date(m)),d=new Date(Math.min(...r.map(m=>m.getTime()))),s=new Date(Math.max(...r.map(m=>m.getTime()))),l=[],o=new Date(d);for(;o<=s;){if(Array.isArray(e)&&e.includes(o)){o.setDate(o.getDate()+1);continue}else if(e===o){o.setDate(o.getDate()+1);continue}l.push(`${o.getFullYear()}-${I(o.getMonth())}-${X(o.getDate())}`),o.setDate(o.getDate()+1)}return l}exports.default=ne;

package/dist/DatePicker/DatePicker.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+import { GeneralComponentProps } from '../typings/component';
+
+export type DateValue = string | number | Date | null;
+export type DatePickerValue = DateValue[] | DateValue;
+export type DateFormatter<T> = typeof formatDate<T>;
+export interface DatePickerProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
+    onChange?: (date: string | string[], dateFormatter: DateFormatter<string>) => void;
+    value?: DatePickerValue;
+    date?: DateValue;
+    minDate?: DateValue;
+    maxDate?: DateValue;
+    holidayDates?: DatePickerValue;
+    disableDates?: DatePickerValue;
+    showWeekHead?: boolean;
+    multiple?: boolean;
+    period?: boolean;
+    enableMonthSelect?: boolean;
+    showToday?: boolean;
+    edgeSpacing?: number;
+}
+declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
+export default DatePicker;
+declare function formatDate<T>(value?: DatePickerValue): T;