@tecsinapse/react-core 1.17.4 → 1.20.0

package/esm/components/molecules/Calendar/components/MonthWeek.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import { compareAsc as compare, isSameDay } from 'date-fns';
+import { Cell, Selected, Week } from '../styled';
+
+var MonthWeek = function MonthWeek(_ref) {
+  var week = _ref.week,
+      referenceDate = _ref.referenceDate,
+      type = _ref.type,
+      value = _ref.value,
+      TextComponent = _ref.TextComponent,
+      onChange = _ref.onChange;
+  var checkIfIsBetween = React.useCallback(function (date, _value) {
+    if (type !== 'range' || !_value) return false;else {
+      var _ref2 = _value,
+          lowest = _ref2.lowest,
+          highest = _ref2.highest;
+      if (!highest) return false;
+      return compare(lowest, date) <= 0 && compare(highest, date) >= 0;
+    }
+  }, [type]);
+  var checkIfIsSelected = React.useCallback(function (date, _value) {
+    if (!_value) return false;else if (type === 'range' && _value) {
+      var _ref3 = _value,
+          lowest = _ref3.lowest,
+          highest = _ref3.highest;
+      return isSameDay(lowest, date) || (highest ? isSameDay(highest, date) : false);
+    } else {
+      return isSameDay(_value, date);
+    }
+  }, [type]);
+  var handlePressCell = React.useCallback(function (date, _value) {
+    return function () {
+      if (type === 'day') {
+        onChange === null || onChange === void 0 ? void 0 : onChange(date);
+      } else if (!_value) {
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+          lowest: date
+        });
+      } else {
+        var newValue;
+        var _ref4 = _value,
+            lowest = _ref4.lowest,
+            highest = _ref4.highest;
+
+        if (!highest) {
+          if (compare(date, lowest) === -1) {
+            newValue = {
+              lowest: date,
+              highest: undefined
+            };
+          } else if (compare(date, lowest) === 0) {
+            newValue = undefined;
+          } else {
+            newValue = {
+              lowest: lowest,
+              highest: date
+            };
+          }
+        } else {
+          if (compare(date, lowest) === -1) {
+            newValue = {
+              lowest: date,
+              highest: undefined
+            };
+          } else if (compare(date, lowest) === 0) {
+            newValue = undefined;
+          } else {
+            if (compare(date, highest) === -1) {
+              newValue = {
+                lowest: lowest,
+                highest: date
+              };
+            } else if (compare(date, highest) === 0) {
+              newValue = {
+                lowest: lowest,
+                highest: undefined
+              };
+            } else {
+              newValue = {
+                lowest: lowest,
+                highest: date
+              };
+            }
+          }
+        }
+
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+      }
+    };
+  }, [onChange, type]);
+  return React.createElement(Week, null, week.map(function (date, index) {
+    var isSelected = checkIfIsSelected(date, value);
+    var isBetween = checkIfIsBetween(date, value);
+    var isRangeStart, isRangeEnd;
+
+    if (type === 'range' && value) {
+      var _ref5 = value,
+          lowest = _ref5.lowest,
+          highest = _ref5.highest;
+      isRangeStart = highest && isSameDay(lowest, date);
+      isRangeEnd = !!highest && isSameDay(highest, date);
+    } else {
+      isRangeStart = false;
+      isRangeEnd = false;
+    }
+
+    var colorTone = isSelected ? 'xlight' : date.getMonth() === referenceDate.getMonth() ? 'xdark' : 'light';
+    return React.createElement(Cell, {
+      key: date.getDate(),
+      selected: isSelected,
+      highlighted: isBetween,
+      isLineEnd: index === 6,
+      isLineStart: index === 0,
+      isRangeStart: isRangeStart,
+      isRangeEnd: isRangeEnd,
+      onPress: handlePressCell(date, value)
+    }, React.createElement(Selected, {
+      selected: isSelected,
+      pointerEvents: 'none'
+    }, React.createElement(TextComponent, {
+      colorVariant: 'secondary',
+      colorTone: colorTone
+    }, date.getDate())));
+  }));
+};
+
+export default React.memo(MonthWeek);
+//# sourceMappingURL=MonthWeek.js.map

package/esm/components/molecules/Calendar/components/MonthWeek.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthWeek.js","names":["React","compareAsc","compare","isSameDay","Cell","Selected","Week","MonthWeek","week","referenceDate","type","value","TextComponent","onChange","checkIfIsBetween","useCallback","date","_value","lowest","highest","checkIfIsSelected","handlePressCell","newValue","undefined","map","index","isSelected","isBetween","isRangeStart","isRangeEnd","colorTone","getMonth","getDate","memo"],"sources":["../../../../../src/components/molecules/Calendar/components/MonthWeek.tsx"],"sourcesContent":["import React from 'react';\nimport { compareAsc as compare, isSameDay } from 'date-fns';\nimport { Cell, Selected, Week } from '../styled';\nimport { Value, DateRange, SelectionType } from '../Calendar';\nimport { TextProps } from '@tecsinapse/react-core';\n\ninterface IMonthWeek<T extends SelectionType> {\n  TextComponent: React.FC<TextProps>;\n  /** any as workaround for TS type mismatching */\n  onChange?: (value?: any) => void | never;\n  type?: T;\n  value?: Value<T>;\n  week: Date[];\n  referenceDate: Date;\n}\n\nconst MonthWeek = <T extends SelectionType>({\n  week,\n  referenceDate,\n  type,\n  value,\n  TextComponent,\n  onChange,\n}: IMonthWeek<T>) => {\n  const checkIfIsBetween = React.useCallback(\n    (date: Date, _value?: Value<T>) => {\n      if (type !== 'range' || !_value) return false;\n      else {\n        const { lowest, highest } = _value as DateRange;\n        if (!highest) return false;\n        return compare(lowest, date) <= 0 && compare(highest, date) >= 0;\n      }\n    },\n    [type]\n  );\n\n  const checkIfIsSelected = React.useCallback(\n    (date: Date, _value?: Value<T>) => {\n      if (!_value) return false;\n      else if (type === 'range' && _value) {\n        const { lowest, highest } = _value as DateRange;\n        return (\n          isSameDay(lowest, date) ||\n          (highest ? isSameDay(highest, date) : false)\n        );\n      } else {\n        return isSameDay(_value as Date, date);\n      }\n    },\n    [type]\n  );\n\n  const handlePressCell = React.useCallback(\n    (date: Date, _value?: Value<T>) => () => {\n      if (type === 'day') {\n        onChange?.(date as never);\n      } else if (!_value) {\n        onChange?.({ lowest: date } as never);\n      } else {\n        let newValue;\n        const { lowest, highest } = _value as DateRange;\n\n        if (!highest) {\n          if (compare(date, lowest) === -1) {\n            newValue = { lowest: date, highest: undefined };\n          } else if (compare(date, lowest) === 0) {\n            newValue = undefined;\n          } else {\n            newValue = { lowest: lowest, highest: date };\n          }\n        } else {\n          if (compare(date, lowest) === -1) {\n            newValue = { lowest: date, highest: undefined };\n          } else if (compare(date, lowest) === 0) {\n            newValue = undefined;\n          } else {\n            if (compare(date, highest) === -1) {\n              newValue = { lowest: lowest, highest: date };\n            } else if (compare(date, highest) === 0) {\n              newValue = { lowest: lowest, highest: undefined };\n            } else {\n              newValue = { lowest: lowest, highest: date };\n            }\n          }\n        }\n\n        onChange?.(newValue as never);\n      }\n    },\n    [onChange, type]\n  );\n\n  return (\n    <Week>\n      {week.map((date, index) => {\n        const isSelected = checkIfIsSelected(date, value);\n        const isBetween = checkIfIsBetween(date, value);\n\n        let isRangeStart, isRangeEnd;\n\n        if (type === 'range' && value) {\n          const { lowest, highest } = value as DateRange;\n          isRangeStart = highest && isSameDay(lowest, date);\n          isRangeEnd = !!highest && isSameDay(highest, date);\n        } else {\n          isRangeStart = false;\n          isRangeEnd = false;\n        }\n\n        const colorTone = isSelected\n          ? 'xlight'\n          : date.getMonth() === referenceDate.getMonth()\n          ? 'xdark'\n          : 'light';\n\n        return (\n          <Cell\n            key={date.getDate()}\n            selected={isSelected}\n            highlighted={isBetween}\n            isLineEnd={index === 6}\n            isLineStart={index === 0}\n            isRangeStart={isRangeStart}\n            isRangeEnd={isRangeEnd}\n            onPress={handlePressCell(date, value)}\n          >\n            <Selected selected={isSelected} pointerEvents={'none'}>\n              <TextComponent colorVariant={'secondary'} colorTone={colorTone}>\n                {date.getDate()}\n              </TextComponent>\n            </Selected>\n          </Cell>\n        );\n      })}\n    </Week>\n  );\n};\n\nexport default React.memo(MonthWeek);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAU,IAAIC,OAAvB,EAAgCC,SAAhC,QAAiD,UAAjD;AACA,SAASC,IAAT,EAAeC,QAAf,EAAyBC,IAAzB,QAAqC,WAArC;;AAcA,IAAMC,SAAS,GAAG,SAAZA,SAAY,OAOG;EAAA,IANnBC,IAMmB,QANnBA,IAMmB;EAAA,IALnBC,aAKmB,QALnBA,aAKmB;EAAA,IAJnBC,IAImB,QAJnBA,IAImB;EAAA,IAHnBC,KAGmB,QAHnBA,KAGmB;EAAA,IAFnBC,aAEmB,QAFnBA,aAEmB;EAAA,IADnBC,QACmB,QADnBA,QACmB;EACnB,IAAMC,gBAAgB,GAAGd,KAAK,CAACe,WAAN,CACvB,UAACC,IAAD,EAAaC,MAAb,EAAmC;IACjC,IAAIP,IAAI,KAAK,OAAT,IAAoB,CAACO,MAAzB,EAAiC,OAAO,KAAP,CAAjC,KACK;MACH,YAA4BA,MAA5B;MAAA,IAAQC,MAAR,SAAQA,MAAR;MAAA,IAAgBC,OAAhB,SAAgBA,OAAhB;MACA,IAAI,CAACA,OAAL,EAAc,OAAO,KAAP;MACd,OAAOjB,OAAO,CAACgB,MAAD,EAASF,IAAT,CAAP,IAAyB,CAAzB,IAA8Bd,OAAO,CAACiB,OAAD,EAAUH,IAAV,CAAP,IAA0B,CAA/D;IACD;EACF,CARsB,EASvB,CAACN,IAAD,CATuB,CAAzB;EAYA,IAAMU,iBAAiB,GAAGpB,KAAK,CAACe,WAAN,CACxB,UAACC,IAAD,EAAaC,MAAb,EAAmC;IACjC,IAAI,CAACA,MAAL,EAAa,OAAO,KAAP,CAAb,KACK,IAAIP,IAAI,KAAK,OAAT,IAAoBO,MAAxB,EAAgC;MACnC,YAA4BA,MAA5B;MAAA,IAAQC,MAAR,SAAQA,MAAR;MAAA,IAAgBC,OAAhB,SAAgBA,OAAhB;MACA,OACEhB,SAAS,CAACe,MAAD,EAASF,IAAT,CAAT,KACCG,OAAO,GAAGhB,SAAS,CAACgB,OAAD,EAAUH,IAAV,CAAZ,GAA8B,KADtC,CADF;IAID,CANI,MAME;MACL,OAAOb,SAAS,CAACc,MAAD,EAAiBD,IAAjB,CAAhB;IACD;EACF,CAZuB,EAaxB,CAACN,IAAD,CAbwB,CAA1B;EAgBA,IAAMW,eAAe,GAAGrB,KAAK,CAACe,WAAN,CACtB,UAACC,IAAD,EAAaC,MAAb;IAAA,OAAmC,YAAM;MACvC,IAAIP,IAAI,KAAK,KAAb,EAAoB;QAClBG,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGG,IAAH,CAAR;MACD,CAFD,MAEO,IAAI,CAACC,MAAL,EAAa;QAClBJ,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAG;UAAEK,MAAM,EAAEF;QAAV,CAAH,CAAR;MACD,CAFM,MAEA;QACL,IAAIM,QAAJ;QACA,YAA4BL,MAA5B;QAAA,IAAQC,MAAR,SAAQA,MAAR;QAAA,IAAgBC,OAAhB,SAAgBA,OAAhB;;QAEA,IAAI,CAACA,OAAL,EAAc;UACZ,IAAIjB,OAAO,CAACc,IAAD,EAAOE,MAAP,CAAP,KAA0B,CAAC,CAA/B,EAAkC;YAChCI,QAAQ,GAAG;cAAEJ,MAAM,EAAEF,IAAV;cAAgBG,OAAO,EAAEI;YAAzB,CAAX;UACD,CAFD,MAEO,IAAIrB,OAAO,CAACc,IAAD,EAAOE,MAAP,CAAP,KAA0B,CAA9B,EAAiC;YACtCI,QAAQ,GAAGC,SAAX;UACD,CAFM,MAEA;YACLD,QAAQ,GAAG;cAAEJ,MAAM,EAAEA,MAAV;cAAkBC,OAAO,EAAEH;YAA3B,CAAX;UACD;QACF,CARD,MAQO;UACL,IAAId,OAAO,CAACc,IAAD,EAAOE,MAAP,CAAP,KAA0B,CAAC,CAA/B,EAAkC;YAChCI,QAAQ,GAAG;cAAEJ,MAAM,EAAEF,IAAV;cAAgBG,OAAO,EAAEI;YAAzB,CAAX;UACD,CAFD,MAEO,IAAIrB,OAAO,CAACc,IAAD,EAAOE,MAAP,CAAP,KAA0B,CAA9B,EAAiC;YACtCI,QAAQ,GAAGC,SAAX;UACD,CAFM,MAEA;YACL,IAAIrB,OAAO,CAACc,IAAD,EAAOG,OAAP,CAAP,KAA2B,CAAC,CAAhC,EAAmC;cACjCG,QAAQ,GAAG;gBAAEJ,MAAM,EAAEA,MAAV;gBAAkBC,OAAO,EAAEH;cAA3B,CAAX;YACD,CAFD,MAEO,IAAId,OAAO,CAACc,IAAD,EAAOG,OAAP,CAAP,KAA2B,CAA/B,EAAkC;cACvCG,QAAQ,GAAG;gBAAEJ,MAAM,EAAEA,MAAV;gBAAkBC,OAAO,EAAEI;cAA3B,CAAX;YACD,CAFM,MAEA;cACLD,QAAQ,GAAG;gBAAEJ,MAAM,EAAEA,MAAV;gBAAkBC,OAAO,EAAEH;cAA3B,CAAX;YACD;UACF;QACF;;QAEDH,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGS,QAAH,CAAR;MACD;IACF,CAnCD;EAAA,CADsB,EAqCtB,CAACT,QAAD,EAAWH,IAAX,CArCsB,CAAxB;EAwCA,OACE,oBAAC,IAAD,QACGF,IAAI,CAACgB,GAAL,CAAS,UAACR,IAAD,EAAOS,KAAP,EAAiB;IACzB,IAAMC,UAAU,GAAGN,iBAAiB,CAACJ,IAAD,EAAOL,KAAP,CAApC;IACA,IAAMgB,SAAS,GAAGb,gBAAgB,CAACE,IAAD,EAAOL,KAAP,CAAlC;IAEA,IAAIiB,YAAJ,EAAkBC,UAAlB;;IAEA,IAAInB,IAAI,KAAK,OAAT,IAAoBC,KAAxB,EAA+B;MAC7B,YAA4BA,KAA5B;MAAA,IAAQO,MAAR,SAAQA,MAAR;MAAA,IAAgBC,OAAhB,SAAgBA,OAAhB;MACAS,YAAY,GAAGT,OAAO,IAAIhB,SAAS,CAACe,MAAD,EAASF,IAAT,CAAnC;MACAa,UAAU,GAAG,CAAC,CAACV,OAAF,IAAahB,SAAS,CAACgB,OAAD,EAAUH,IAAV,CAAnC;IACD,CAJD,MAIO;MACLY,YAAY,GAAG,KAAf;MACAC,UAAU,GAAG,KAAb;IACD;;IAED,IAAMC,SAAS,GAAGJ,UAAU,GACxB,QADwB,GAExBV,IAAI,CAACe,QAAL,OAAoBtB,aAAa,CAACsB,QAAd,EAApB,GACA,OADA,GAEA,OAJJ;IAMA,OACE,oBAAC,IAAD;MACE,GAAG,EAAEf,IAAI,CAACgB,OAAL,EADP;MAEE,QAAQ,EAAEN,UAFZ;MAGE,WAAW,EAAEC,SAHf;MAIE,SAAS,EAAEF,KAAK,KAAK,CAJvB;MAKE,WAAW,EAAEA,KAAK,KAAK,CALzB;MAME,YAAY,EAAEG,YANhB;MAOE,UAAU,EAAEC,UAPd;MAQE,OAAO,EAAER,eAAe,CAACL,IAAD,EAAOL,KAAP;IAR1B,GAUE,oBAAC,QAAD;MAAU,QAAQ,EAAEe,UAApB;MAAgC,aAAa,EAAE;IAA/C,GACE,oBAAC,aAAD;MAAe,YAAY,EAAE,WAA7B;MAA0C,SAAS,EAAEI;IAArD,GACGd,IAAI,CAACgB,OAAL,EADH,CADF,CAVF,CADF;EAkBD,CAvCA,CADH,CADF;AA4CD,CAxHD;;AA0HA,eAAehC,KAAK,CAACiC,IAAN,CAAW1B,SAAX,CAAf"}

package/esm/components/molecules/Calendar/components/Weekdays.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IWeekdays {
+    calendar: Date[][];
+    locale?: Locale;
+    Capitalized: React.ElementType;
+}
+declare const _default: React.MemoExoticComponent<({ calendar, locale, Capitalized }: IWeekdays) => JSX.Element>;
+export default _default;

package/esm/components/molecules/Calendar/components/Weekdays.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Cell, Week } from '../styled';
+import { format } from 'date-fns';
+
+var Weekdays = function Weekdays(_ref) {
+  var calendar = _ref.calendar,
+      locale = _ref.locale,
+      Capitalized = _ref.Capitalized;
+  return React.createElement(Week, null, calendar[0].map(function (date) {
+    return React.createElement(Cell, {
+      key: date.getDate(),
+      selected: false,
+      highlighted: false,
+      isLineEnd: false,
+      isLineStart: false,
+      isRangeStart: false,
+      isRangeEnd: false,
+      pointerEvents: 'none'
+    }, React.createElement(Capitalized, {
+      colorVariant: 'secondary',
+      colorTone: 'medium'
+    }, format(date, 'EEE', {
+      locale: locale
+    }).slice(0, 3)));
+  }));
+};
+
+export default React.memo(Weekdays);
+//# sourceMappingURL=Weekdays.js.map

package/esm/components/molecules/Calendar/components/Weekdays.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Weekdays.js","names":["React","Cell","Week","format","Weekdays","calendar","locale","Capitalized","map","date","getDate","slice","memo"],"sources":["../../../../../src/components/molecules/Calendar/components/Weekdays.tsx"],"sourcesContent":["import React from 'react';\nimport { Cell, Week } from '../styled';\nimport { format } from 'date-fns';\n\ninterface IWeekdays {\n  calendar: Date[][];\n  locale?: Locale;\n  Capitalized: React.ElementType;\n}\n\nconst Weekdays = ({ calendar, locale, Capitalized }: IWeekdays) => {\n  return (\n    <Week>\n      {calendar[0].map(date => (\n        <Cell\n          key={date.getDate()}\n          selected={false}\n          highlighted={false}\n          isLineEnd={false}\n          isLineStart={false}\n          isRangeStart={false}\n          isRangeEnd={false}\n          pointerEvents={'none'}\n        >\n          <Capitalized colorVariant={'secondary'} colorTone={'medium'}>\n            {format(date, 'EEE', { locale }).slice(0, 3)}\n          </Capitalized>\n        </Cell>\n      ))}\n    </Week>\n  );\n};\n\nexport default React.memo(Weekdays);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,WAA3B;AACA,SAASC,MAAT,QAAuB,UAAvB;;AAQA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAAkD;EAAA,IAA/CC,QAA+C,QAA/CA,QAA+C;EAAA,IAArCC,MAAqC,QAArCA,MAAqC;EAAA,IAA7BC,WAA6B,QAA7BA,WAA6B;EACjE,OACE,oBAAC,IAAD,QACGF,QAAQ,CAAC,CAAD,CAAR,CAAYG,GAAZ,CAAgB,UAAAC,IAAI;IAAA,OACnB,oBAAC,IAAD;MACE,GAAG,EAAEA,IAAI,CAACC,OAAL,EADP;MAEE,QAAQ,EAAE,KAFZ;MAGE,WAAW,EAAE,KAHf;MAIE,SAAS,EAAE,KAJb;MAKE,WAAW,EAAE,KALf;MAME,YAAY,EAAE,KANhB;MAOE,UAAU,EAAE,KAPd;MAQE,aAAa,EAAE;IARjB,GAUE,oBAAC,WAAD;MAAa,YAAY,EAAE,WAA3B;MAAwC,SAAS,EAAE;IAAnD,GACGP,MAAM,CAACM,IAAD,EAAO,KAAP,EAAc;MAAEH,MAAM,EAANA;IAAF,CAAd,CAAN,CAAgCK,KAAhC,CAAsC,CAAtC,EAAyC,CAAzC,CADH,CAVF,CADmB;EAAA,CAApB,CADH,CADF;AAoBD,CArBD;;AAuBA,eAAeX,KAAK,CAACY,IAAN,CAAWR,QAAX,CAAf"}

package/esm/components/molecules/Calendar/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Weekdays } from './Weekdays';
+export { default as MonthWeek } from './MonthWeek';

package/esm/components/molecules/Calendar/components/index.js

@@ -0,0 +1,3 @@
+export { default as Weekdays } from './Weekdays';
+export { default as MonthWeek } from './MonthWeek';
+//# sourceMappingURL=index.js.map

package/esm/components/molecules/Calendar/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","Weekdays","MonthWeek"],"sources":["../../../../../src/components/molecules/Calendar/components/index.ts"],"sourcesContent":["export { default as Weekdays } from './Weekdays';\nexport { default as MonthWeek } from './MonthWeek';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,QAApB,QAAoC,YAApC;AACA,SAASD,OAAO,IAAIE,SAApB,QAAqC,aAArC"}

package/esm/components/molecules/Calendar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Calendar } from './Calendar';
+export type { CalendarProps, SelectionType, DateRange, Value, } from './Calendar';

package/esm/components/molecules/Calendar/index.js

@@ -0,0 +1,2 @@
+export { default as Calendar } from './Calendar';
+//# sourceMappingURL=index.js.map

package/esm/components/molecules/Calendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","Calendar"],"sources":["../../../../src/components/molecules/Calendar/index.ts"],"sourcesContent":["export { default as Calendar } from './Calendar';\nexport type {\n  CalendarProps,\n  SelectionType,\n  DateRange,\n  Value,\n} from './Calendar';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,QAApB,QAAoC,YAApC"}

package/esm/components/molecules/Calendar/styled.d.ts

@@ -0,0 +1,61 @@
+import { FC } from 'react';
+import { PressableProps, ViewProps } from 'react-native';
+import { TextProps } from '../../atoms/Text';
+interface ButtonBorders {
+    isLeft?: boolean;
+    isRright?: boolean;
+}
+export declare const TitleContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
+}>;
+export declare const Control: import("@emotion/native").StyledComponent<import("../../atoms/PressableSurface").PressableSurfaceProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("../../../types/defaults").ThemeProviderProps> & ButtonBorders & {
+    align: 'start' | 'end';
+}, {}, {}>;
+export declare const getCapitalizedTextComponent: (component: FC<TextProps>) => import("@emotion/native").StyledComponent<TextProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export declare const Content: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
+}>;
+export declare const Week: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
+}>;
+export declare const Selected: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("../../../types/defaults").ThemeProviderProps> & {
+    selected: boolean;
+}, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
+}>;
+export declare const Cell: import("@emotion/native").StyledComponent<import("../../atoms/PressableSurface").PressableSurfaceProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & PressableProps & Partial<import("../../../types/defaults").ThemeProviderProps> & {
+    selected: boolean;
+    highlighted: boolean;
+    isLineEnd: boolean;
+    isLineStart: boolean;
+    isRangeStart: boolean;
+    isRangeEnd: boolean;
+}, {}, {}>;
+export {};

package/esm/components/molecules/Calendar/styled.js

@@ -0,0 +1,56 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import styled, { css } from '@emotion/native';
+import { Platform } from 'react-native';
+import { PressableSurface } from '../../atoms/PressableSurface';
+var isWeb = Platform.OS === 'web';
+export var TitleContainer = styled.View(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.color.secondary.xlight;
+});
+export var Control = styled(PressableSurface)(function (props) {
+  var _props$theme, _props$theme2, _props$theme3;
+
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    align-items: flex-", ";\n    padding: ", ";\n    border-radius: ", ";\n    margin: ", ";\n  "])), props.align, (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.spacing.centi, (_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.borderRadius.mili, (_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.spacing.mili);
+});
+export var getCapitalizedTextComponent = function getCapitalizedTextComponent(component) {
+  return styled(component)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    text-transform: capitalize;\n  "])));
+};
+export var Content = styled.View(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: ", ";\n  background-color: ", ";\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.spacing.deca;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.miscellaneous.surfaceColor;
+});
+export var Week = styled.View(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  flex-direction: row;\n"])));
+export var Selected = styled.View(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: ", ";\n  border-radius: ", ";\n  width: 100%;\n  height: 100%;\n"])), function (_ref4) {
+  var theme = _ref4.theme,
+      selected = _ref4.selected;
+  return selected ? theme.color.primary.medium : 'transparent';
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.borderRadius.mili;
+});
+export var Cell = styled(PressableSurface)(function (_ref6) {
+  var theme = _ref6.theme,
+      selected = _ref6.selected,
+      highlighted = _ref6.highlighted,
+      isLineEnd = _ref6.isLineEnd,
+      isLineStart = _ref6.isLineStart,
+      isRangeStart = _ref6.isRangeStart,
+      isRangeEnd = _ref6.isRangeEnd;
+  var borderRadiusSize = theme.borderRadius.mili;
+  var _rightBorderRadius$le = {
+    rightBorderRadius: selected && !isRangeStart || isLineEnd ? borderRadiusSize : 0,
+    leftBorderRadius: selected && !isRangeEnd || isLineStart ? borderRadiusSize : 0
+  },
+      rightBorderRadius = _rightBorderRadius$le.rightBorderRadius,
+      leftBorderRadius = _rightBorderRadius$le.leftBorderRadius;
+  var borderEffect = highlighted ? 0 : borderRadiusSize;
+  var backgroundColor = highlighted ? theme.color.primary.light : 'transparent';
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      ", "\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: ", ";\n      border-top-left-radius: ", ";\n      border-bottom-left-radius: ", ";\n      border-top-right-radius: ", ";\n      border-bottom-right-radius: ", ";\n      background-color: ", ";\n    "])), isWeb ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n            width: 32px;\n            height: 32px;\n          "]))) : css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n            aspect-ratio: 1;\n            flex: 1;\n          "]))), borderEffect, leftBorderRadius, leftBorderRadius, rightBorderRadius, rightBorderRadius, backgroundColor);
+});
+//# sourceMappingURL=styled.js.map

package/esm/components/molecules/Calendar/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","names":["styled","css","Platform","PressableSurface","isWeb","OS","TitleContainer","View","theme","color","secondary","xlight","Control","props","align","spacing","centi","borderRadius","mili","getCapitalizedTextComponent","component","Content","deca","miscellaneous","surfaceColor","Week","Selected","selected","primary","medium","Cell","highlighted","isLineEnd","isLineStart","isRangeStart","isRangeEnd","borderRadiusSize","rightBorderRadius","leftBorderRadius","borderEffect","backgroundColor","light"],"sources":["../../../../src/components/molecules/Calendar/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { Platform, PressableProps, ViewProps } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { PressableSurface } from '../../atoms/PressableSurface';\nimport { TextProps } from '../../atoms/Text';\n\nconst isWeb = Platform.OS === 'web';\n\ninterface ButtonBorders {\n  isLeft?: boolean;\n  isRright?: boolean;\n}\n\nexport const TitleContainer = styled.View<Partial<StyleProps>>`\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ${({ theme }) => theme.color.secondary.xlight};\n`;\n\nexport const Control = styled(PressableSurface)(\n  (\n    props: Partial<StyleProps> & ButtonBorders & { align: 'start' | 'end' }\n  ) => css`\n    align-items: flex-${props.align};\n    padding: ${props.theme?.spacing.centi};\n    border-radius: ${props.theme?.borderRadius.mili};\n    margin: ${props.theme?.spacing.mili};\n  `\n);\n\nexport const getCapitalizedTextComponent = (component: FC<TextProps>) => {\n  return styled(component)`\n    text-transform: capitalize;\n  `;\n};\n\nexport const Content = styled.View<ViewProps & Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.deca};\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n`;\n\nexport const Week = styled.View<Partial<StyleProps>>`\n  flex-direction: row;\n`;\n\nexport const Selected = styled.View<\n  Partial<StyleProps> & { selected: boolean }\n>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: ${({ theme, selected }) =>\n    selected ? theme.color.primary.medium : 'transparent'};\n  border-radius: ${({ theme }) => theme.borderRadius.mili};\n  width: 100%;\n  height: 100%;\n`;\n\nexport const Cell = styled(PressableSurface)<\n  PressableProps &\n    Partial<StyleProps> & {\n      selected: boolean;\n      highlighted: boolean;\n      isLineEnd: boolean;\n      isLineStart: boolean;\n      isRangeStart: boolean;\n      isRangeEnd: boolean;\n    }\n>(\n  ({\n    theme,\n    selected,\n    highlighted,\n    isLineEnd,\n    isLineStart,\n    isRangeStart,\n    isRangeEnd,\n  }) => {\n    const borderRadiusSize = theme.borderRadius.mili;\n\n    const { rightBorderRadius, leftBorderRadius } = {\n      rightBorderRadius:\n        (selected && !isRangeStart) || isLineEnd ? borderRadiusSize : 0,\n      leftBorderRadius:\n        (selected && !isRangeEnd) || isLineStart ? borderRadiusSize : 0,\n    };\n\n    const borderEffect = highlighted ? 0 : borderRadiusSize;\n\n    const backgroundColor = highlighted\n      ? theme.color.primary.light\n      : 'transparent';\n\n    return css`\n      ${isWeb\n        ? css`\n            width: 32px;\n            height: 32px;\n          `\n        : css`\n            aspect-ratio: 1;\n            flex: 1;\n          `}\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: ${borderEffect};\n      border-top-left-radius: ${leftBorderRadius};\n      border-bottom-left-radius: ${leftBorderRadius};\n      border-top-right-radius: ${rightBorderRadius};\n      border-bottom-right-radius: ${rightBorderRadius};\n      background-color: ${backgroundColor};\n    `;\n  }\n);\n"],"mappings":"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"}

package/esm/components/molecules/DatePicker/DatePicker.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { InputContainerProps } from '../../atoms/Input';
+import { TextProps } from '../../atoms/Text';
+import { CalendarProps, SelectionType } from '../Calendar';
+export interface DatePickerProps<T extends SelectionType> extends InputContainerProps, Omit<CalendarProps<T>, 'style'> {
+    controlComponent?: (onPress: () => void, displayValue?: string) => JSX.Element;
+    TextComponent?: React.FC<TextProps>;
+    CalendarComponent: React.FC<CalendarProps<T>>;
+    placeholder?: string;
+    onFocus?: () => void | never;
+    onBlur?: () => void | never;
+    format?: string;
+    closeOnPick?: boolean;
+    renderCalendar: (calendar: React.ReactElement, blur?: () => void) => JSX.Element | null;
+    requestShowCalendar: () => void;
+    requestCloseCalendar: () => void;
+}
+declare function DatePicker<T extends SelectionType>({ month, year, onChange, value, type, format, placeholder, onFocus, onBlur, disabled, controlComponent, hintComponent, hint, variant, TextComponent, CalendarComponent, rightComponent, style, locale, closeOnPick, renderCalendar, requestShowCalendar, requestCloseCalendar, ...rest }: DatePickerProps<T>): JSX.Element;
+export default DatePicker;

package/esm/components/molecules/DatePicker/DatePicker.js

@@ -0,0 +1,120 @@
+var _excluded = ["month", "year", "onChange", "value", "type", "format", "placeholder", "onFocus", "onBlur", "disabled", "controlComponent", "hintComponent", "hint", "variant", "TextComponent", "CalendarComponent", "rightComponent", "style", "locale", "closeOnPick", "renderCalendar", "requestShowCalendar", "requestCloseCalendar"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import { format as formatDate } from 'date-fns';
+import * as React from 'react';
+import { useEffect } from 'react';
+import { useInputFocus } from '../../atoms/Input';
+import { Text } from '../../atoms/Text';
+import { HintInputContainer } from '../HintInputContainer';
+import { CalendarIcon, getStyledTextComponent } from './styled';
+
+function DatePicker(_ref) {
+  var month = _ref.month,
+      year = _ref.year,
+      onChange = _ref.onChange,
+      value = _ref.value,
+      type = _ref.type,
+      _ref$format = _ref.format,
+      format = _ref$format === void 0 ? 'yyyy-MM-dd' : _ref$format,
+      placeholder = _ref.placeholder,
+      onFocus = _ref.onFocus,
+      onBlur = _ref.onBlur,
+      disabled = _ref.disabled,
+      controlComponent = _ref.controlComponent,
+      hintComponent = _ref.hintComponent,
+      hint = _ref.hint,
+      variant = _ref.variant,
+      _ref$TextComponent = _ref.TextComponent,
+      TextComponent = _ref$TextComponent === void 0 ? Text : _ref$TextComponent,
+      CalendarComponent = _ref.CalendarComponent,
+      rightComponent = _ref.rightComponent,
+      style = _ref.style,
+      locale = _ref.locale,
+      _ref$closeOnPick = _ref.closeOnPick,
+      closeOnPick = _ref$closeOnPick === void 0 ? false : _ref$closeOnPick,
+      renderCalendar = _ref.renderCalendar,
+      requestShowCalendar = _ref.requestShowCalendar,
+      requestCloseCalendar = _ref.requestCloseCalendar,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useInputFocus = useInputFocus(onFocus, onBlur, !disabled),
+      focused = _useInputFocus.focused,
+      handleBlur = _useInputFocus.handleBlur,
+      handleFocus = _useInputFocus.handleFocus;
+
+  var handleShowCalendar = React.useCallback(function () {
+    requestShowCalendar();
+    handleFocus();
+  }, [handleFocus, requestShowCalendar]);
+
+  var getDisplayValue = function getDisplayValue() {
+    if (!value) return placeholder;
+
+    if (type === 'day') {
+      return formatDate(value, format, {
+        locale: locale
+      });
+    } else {
+      var _ref2 = value,
+          lowest = _ref2.lowest,
+          highest = _ref2.highest;
+      if (highest) return "".concat(formatDate(lowest, format, {
+        locale: locale
+      }), " - ").concat(formatDate(highest, format, {
+        locale: locale
+      }));else return formatDate(lowest, format, {
+        locale: locale
+      });
+    }
+  };
+
+  var StyledText = getStyledTextComponent(TextComponent);
+  useEffect(function () {
+    if (closeOnPick && value && type === 'day') {
+      setTimeout(requestCloseCalendar, 200);
+    }
+
+    if (closeOnPick && value && type === 'range') {
+      var _ref3 = value,
+          lowest = _ref3.lowest,
+          highest = _ref3.highest;
+      lowest && highest && setTimeout(requestCloseCalendar, 200);
+    }
+  }, [value, closeOnPick, type, requestCloseCalendar]);
+  var calendar = React.createElement(CalendarComponent, {
+    pointerEvents: 'box-none',
+    type: type,
+    value: value,
+    month: month,
+    year: year,
+    onChange: onChange,
+    locale: locale
+  });
+  return React.createElement(React.Fragment, null, controlComponent ? controlComponent(handleShowCalendar, getDisplayValue()) : React.createElement(HintInputContainer, _extends({
+    focused: focused,
+    viewStyle: style,
+    onPress: handleShowCalendar,
+    disabled: disabled,
+    hintComponent: hintComponent,
+    LabelComponent: TextComponent,
+    variant: variant,
+    hint: hint,
+    rightComponent: React.createElement(React.Fragment, null, React.createElement(CalendarIcon, {
+      name: "calendar-sharp",
+      type: "ionicon",
+      size: "centi"
+    }), rightComponent)
+  }, rest), React.createElement(StyledText, {
+    fontWeight: "bold",
+    disabled: disabled
+  }, getDisplayValue() || ' ')), renderCalendar(calendar, handleBlur));
+}
+
+export default DatePicker;
+//# sourceMappingURL=DatePicker.js.map

package/esm/components/molecules/DatePicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","names":["format","formatDate","React","useEffect","useInputFocus","Text","HintInputContainer","CalendarIcon","getStyledTextComponent","DatePicker","month","year","onChange","value","type","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","CalendarComponent","rightComponent","style","locale","closeOnPick","renderCalendar","requestShowCalendar","requestCloseCalendar","rest","focused","handleBlur","handleFocus","handleShowCalendar","useCallback","getDisplayValue","lowest","highest","StyledText","setTimeout","calendar"],"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { useEffect } from 'react';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarProps, DateRange, SelectionType } from '../Calendar';\nimport { HintInputContainer } from '../HintInputContainer';\nimport { CalendarIcon, getStyledTextComponent } from './styled';\n\nexport interface DatePickerProps<T extends SelectionType>\n  extends InputContainerProps,\n    Omit<CalendarProps<T>, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  CalendarComponent: React.FC<CalendarProps<T>>;\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  format?: string;\n  closeOnPick?: boolean;\n  renderCalendar: (\n    calendar: React.ReactElement,\n    blur?: () => void\n  ) => JSX.Element | null;\n  requestShowCalendar: () => void;\n  requestCloseCalendar: () => void;\n}\n\nfunction DatePicker<T extends SelectionType>({\n  /** DatePicker props */\n  month,\n  year,\n  onChange,\n  value,\n  type,\n  format = 'yyyy-MM-dd',\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant,\n  TextComponent = Text,\n  CalendarComponent,\n  rightComponent,\n  style,\n  locale,\n  closeOnPick = false,\n  renderCalendar,\n  requestShowCalendar,\n  requestCloseCalendar,\n  ...rest\n}: DatePickerProps<T>): JSX.Element {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const handleShowCalendar = React.useCallback(() => {\n    requestShowCalendar();\n    handleFocus();\n  }, [handleFocus, requestShowCalendar]);\n\n  const getDisplayValue = () => {\n    if (!value) return placeholder;\n    if (type === 'day') {\n      return formatDate(value as Date, format, { locale: locale });\n    } else {\n      const { lowest, highest } = value as DateRange;\n      if (highest)\n        return `${formatDate(lowest, format, {\n          locale: locale,\n        })} - ${formatDate(highest, format, { locale: locale })}`;\n      else return formatDate(lowest, format, { locale: locale });\n    }\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n\n  useEffect(() => {\n    if (closeOnPick && value && type === 'day') {\n      setTimeout(requestCloseCalendar, 200);\n    }\n    if (closeOnPick && value && type === 'range') {\n      const { lowest, highest } = value as DateRange;\n      lowest && highest && setTimeout(requestCloseCalendar, 200);\n    }\n  }, [value, closeOnPick, type, requestCloseCalendar]);\n\n  const calendar = (\n    <CalendarComponent\n      pointerEvents={'box-none'}\n      type={type}\n      value={value}\n      month={month}\n      year={year}\n      onChange={onChange}\n      locale={locale}\n    />\n  );\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handleShowCalendar, getDisplayValue())\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handleShowCalendar}\n          disabled={disabled}\n          hintComponent={hintComponent}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {getDisplayValue() || ' '}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      {renderCalendar(calendar, handleBlur)}\n    </>\n  );\n}\n\nexport default DatePicker;\n"],"mappings":"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"}

package/esm/components/molecules/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DatePicker } from './DatePicker';
+export type { DatePickerProps } from './DatePicker';

package/esm/components/molecules/DatePicker/index.js

@@ -0,0 +1,2 @@
+export { default as DatePicker } from './DatePicker';
+//# sourceMappingURL=index.js.map

package/esm/components/molecules/DatePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","DatePicker"],"sources":["../../../../src/components/molecules/DatePicker/index.ts"],"sourcesContent":["export { default as DatePicker } from './DatePicker';\nexport type { DatePickerProps } from './DatePicker';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAApB,QAAsC,cAAtC"}

package/esm/components/molecules/DatePicker/styled.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { InputContainerProps } from '../../atoms/Input';
+import { TextProps } from '../../atoms/Text';
+export declare const getStyledTextComponent: (component: FC<TextProps>) => import("@emotion/native").StyledComponent<TextProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<InputContainerProps> & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {}>;
+export declare const CalendarIcon: import("@emotion/native").StyledComponent<import("../../atoms/Icon").IconProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {}>;

package/esm/components/molecules/DatePicker/styled.js

@@ -0,0 +1,22 @@
+var _templateObject, _templateObject2;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import styled, { css } from '@emotion/native';
+import { Icon } from '../../atoms/Icon';
+import { disabledInputStyles } from '../../atoms/Input';
+export var getStyledTextComponent = function getStyledTextComponent(component) {
+  return styled(component)(function (props) {
+    var _props$theme;
+
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      line-height: ", ";\n      ", "\n    "])), (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.typography.h5.lineHeight, disabledInputStyles(props));
+  });
+};
+export var CalendarIcon = styled(Icon)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", ";\n  color: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.spacing.centi;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.color.secondary.medium;
+});
+//# sourceMappingURL=styled.js.map

package/esm/components/molecules/DatePicker/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","names":["styled","css","Icon","disabledInputStyles","getStyledTextComponent","component","props","theme","typography","h5","lineHeight","CalendarIcon","spacing","centi","color","secondary","medium"],"sources":["../../../../src/components/molecules/DatePicker/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { StyleProps } from '../../../types/defaults';\nimport { Icon } from '../../atoms/Icon';\nimport { disabledInputStyles, InputContainerProps } from '../../atoms/Input';\nimport { TextProps } from '../../atoms/Text';\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n  return styled(component)(\n    (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n      line-height: ${props.theme?.typography.h5.lineHeight};\n      ${disabledInputStyles(props)}\n    `\n  );\n};\n\nexport const CalendarIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n"],"mappings":";;;;AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,iBAA5B;AAGA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,mBAAT,QAAyD,mBAAzD;AAGA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACC,SAAD,EAA8B;EAClE,OAAOL,MAAM,CAACK,SAAD,CAAN,CACL,UAACC,KAAD;IAAA;;IAAA,OAA+DL,GAA/D,kIACiBK,KAAK,CAACC,KADvB,iDACiB,aAAaC,UAAb,CAAwBC,EAAxB,CAA2BC,UAD5C,EAEIP,mBAAmB,CAACG,KAAD,CAFvB;EAAA,CADK,CAAP;AAMD,CAPM;AASP,OAAO,IAAMK,YAAY,GAAGX,MAAM,CAACE,IAAD,CAAT,4GACZ;EAAA,IAAGK,KAAH,QAAGA,KAAH;EAAA,OAAeA,KAAK,CAACK,OAAN,CAAcC,KAA7B;AAAA,CADY,EAEd;EAAA,IAAGN,KAAH,SAAGA,KAAH;EAAA,OAAeA,KAAK,CAACO,KAAN,CAAYC,SAAZ,CAAsBC,MAArC;AAAA,CAFc,CAAlB"}

package/esm/components/molecules/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { InputContainerProps } from '../../atoms/Input';
+import { TextProps } from '../../atoms/Text';
+import { DateTimeSelectorProps } from '../DateTimeSelector';
+export interface DateTimePickerProps extends InputContainerProps, Omit<DateTimeSelectorProps, 'style'> {
+    controlComponent?: (onPress: () => void, displayValue?: string) => JSX.Element;
+    TextComponent?: React.FC<TextProps>;
+    DateTimeSelectorComponent: React.FC<DateTimeSelectorProps>;
+    placeholder?: string;
+    onFocus?: () => void | never;
+    onBlur?: () => void | never;
+    renderSelector: (selector: React.ReactElement, blur?: () => void) => JSX.Element | null;
+    requestShowSelector: () => void;
+    requestCloseSelector: () => void;
+}
+declare const DateTimePicker: React.FC<DateTimePickerProps>;
+export default DateTimePicker;