@dotss/ui 0.0.4 → 0.0.6

package/dist/DatePicker/DatePicker.es.js

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

package/dist/DatePicker/DatePicker.stories.d.ts

@@ -0,0 +1,27 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./DatePicker').DatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        value: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ShowToday: Story;
+export declare const HolidayDates: Story;
+export declare const DisableDates: Story;
+export declare const MultipleSelect: Story;
+export declare const MultipleMode: Story;
+export declare const PeriodMode: Story;
+export declare const EnableMonthSelect: Story;

package/dist/DatePicker/index.cjs

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

package/dist/DatePicker/index.d.ts

@@ -0,0 +1,4 @@
+import { DateFormatter, DatePickerValue, DateValue, default as DatePicker } from './DatePicker';
+
+export type { DatePickerValue, DateValue, DateFormatter };
+export default DatePicker;

package/dist/DatePicker/index.es.js

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

package/dist/Dialog/Dialog.cjs

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),t=require("react"),I=require("../Backdrop/Backdrop.cjs"),b=require("../Flexbox/Flexbox.cjs"),M=require("../FocusBoundary/FocusBoundary.cjs"),O=require("@emotion/styled"),A=e=>e&&e.__esModule?e:{default:e},B=A(O),H=B.default.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  display: flex;
+  flex-direction: column;
+  width: ${({fullWidth:e})=>e?"100%":"auto"};
+  max-width: ${({maxWidth:e})=>typeof e=="number"?`${e}px`:"auto"};
+  max-height: ${({maxHeight:e})=>typeof e=="number"?`${e}px`:"100%"};
+  border-radius: 16px;
+  background-color: ${({theme:{palette:{grey:e}}})=>e.white};
+  box-shadow: ${({theme:{elevation:e}})=>e[2]};
+  overflow-y: auto;
+
+  transition: transform ${({transitionDuration:e})=>e}ms;
+  ${({open:e})=>e?{transform:"translate3d(-50%, -50%, 0)"}:{transform:"translate3d(-50%, -50%, 0) scale(0.97)"}};
+
+  ${({fullScreen:e})=>e?{width:"100%",height:"100%",maxWidth:"100%",maxHeight:"100%",borderRadius:0}:null}
+`,L=t.forwardRef(function({children:h,open:r,onClose:s,transitionDuration:l=200,fullWidth:x=!0,fullScreen:a=!1,maxWidth:p=320,maxHeight:y=438,inlineCSS:v,backdropProps:w,statusBarColor:k="transparent",systemNavigationBarColor:$="#FFFFFF",disableFocusBoundary:T=!1,hideStatusBar:q=!1,hideSystemNavigationBar:F=!1,...R},S){var c,f,m,g;const[j,u]=t.useState(!1),d=t.useRef(null),i=t.useRef(),_=n=>n.stopPropagation(),E=((f=(c=d.current)==null?void 0:c.querySelector('[id^="dialogTitle"]'))==null?void 0:f.getAttribute("id"))||"",C=((g=(m=d.current)==null?void 0:m.querySelector('[id^="dialogText"]'))==null?void 0:g.getAttribute("id"))||"";return t.useEffect(()=>{r?(i.current&&clearTimeout(i.current),i.current=setTimeout(()=>{u(!0)},100)):u(!1)},[r]),t.useEffect(()=>{const n=D=>{D.key==="Escape"&&r&&s&&s()};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[r,s]),t.useEffect(()=>()=>{i.current&&clearTimeout(i.current)},[]),o.jsx(I.default,{ref:d,open:r,onClose:s,transitionDuration:l,centered:!a,fullScreen:a,...w,children:o.jsx(H,{ref:S,role:"dialog","aria-labelledby":E,"aria-describedby":C,open:j,transitionDuration:l,fullWidth:x,fullScreen:a,maxWidth:p,maxHeight:y,onClick:_,...R,css:v,children:o.jsxs(M.default,{active:r,disabled:T,inlineCSS:{flex:1,overflowY:"auto"},children:[a&&!q&&o.jsx(b.default,{inlineCSS:{minHeight:"var(--status-bar-height, 0px)",backgroundColor:k}}),h,a&&!F&&o.jsx(b.default,{inlineCSS:{minHeight:"var(--system-navigation-bar-height, 0px)",backgroundColor:$}})]})})})});exports.default=L;

package/dist/Dialog/Dialog.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'react';
+import { BackdropProps } from '../Backdrop/Backdrop';
+import { GeneralComponentProps } from '../typings/component';
+
+export interface DialogProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    open?: boolean;
+    onClose?: () => void;
+    transitionDuration?: number;
+    fullWidth?: boolean;
+    fullScreen?: boolean;
+    maxWidth?: number | 'auto';
+    maxHeight?: number | 'auto';
+    backdropProps?: BackdropProps;
+    disableFocusBoundary?: boolean;
+    statusBarColor?: string;
+    systemNavigationBarColor?: string;
+    hideStatusBar?: boolean;
+    hideSystemNavigationBar?: boolean;
+}
+declare const Dialog: import('react').ForwardRefExoticComponent<DialogProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Dialog;