@mirai/ui 1.0.9 → 1.0.12

package/README.md

@@ -21,7 +21,7 @@ This primitive returns a checkbox button based on the following properties:
 - `name:string` input name
 - `onChange:function` executed when input value changes
 
-```js
+```jsx
 import { Checkbox, View } from '@mirai/ui';
 
 const MyComponent = () => (
@@ -40,7 +40,7 @@ const MyComponent = () => (
 
 This primitive returns a span with an icon based on a mandatory string prop `name` with one of the following possible values: Left, Right, Up, Down, Close, CloseArrow, Plus, Minus, EyeOpen, EyeClose.
 
-```js
+```jsx
 import { Icon, View } from '@mirai/ui';
 
 const MyComponent = () => (
@@ -63,7 +63,7 @@ This primitive returns an input or a textarea based on the following props:
 - `onError:function` executed once an error event fires
 - `onLeave:function` executed on click outside the input
 
-```js
+```jsx
 import { Input, View } from '@mirai/ui';
 
 const MyComponent = () => (
@@ -81,6 +81,34 @@ const MyComponent = () => (
 );
 ```
 
+### Layer
+
+This primitive returns an element that displays with relative position to other element based on the following props:
+
+- `children:node` two children elements are accepted, the first one is the element to be displayed and the second one is the LayerContent that wraps the element to be displayed if the visible prop is true
+- `visible:boolean` showing or hiding the layer
+
+The position of the layer is based on the position of the element to be displayed. If the layer can show on right or left because have a gap in this direction, the layer will be shown on the right or left of the element to be displayed. If the layer can open on top or bottom because have a gap in this direction, the layer will be shown on the top or bottom of the element to be displayed
+
+```jsx
+import { Button, Calendar, Layer, LayerContent } from '@mirai/ui';
+
+const MyComponent = () => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <Layer visible={visible}>
+      <Button style={{ position: 'absolute', left: '500px', top: '100px' }} onPress={() => setVisible(!visible)}>
+        {visible ? 'close' : 'open'}
+      </Button>
+      <LayerContent>
+        <Calendar months={2} range />
+      </LayerContent>
+    </Layer>
+  );
+};
+```
+
 ### Pressable
 
 This primitive returns pressable elements based on the following properties:
@@ -92,7 +120,7 @@ This primitive returns pressable elements based on the following properties:
 - `onLeave:function` executed once the user hovers away
 - `onPress:function` executed on mouse click on the element
 
-```js
+```jsx
 import { Icon, Pressable, View } from '@mirai/ui';
 
 const MyComponent = () => (
@@ -113,7 +141,7 @@ This primitive returns a radio button based on the following properties:
 - `name:string` input name
 - `onChange:function` executed when input value changes
 
-```js
+```jsx
 import { Radio, View } from '@mirai/ui';
 
 const MyComponent = () => (
@@ -143,7 +171,7 @@ This primitive is used to make vertically scrollable views and receives the foll
 - `width:number` width value
 - `onscroll:function` executed when user scrolls over the element
 
-```js
+```jsx
 import { ScrollView, View } from '@mirai/ui';
 
 const MyComponent = ({ isDesktop }) => (
@@ -162,12 +190,11 @@ A primitive for displaying text. It receives the following props:
 - `bold:boolean` modifying font-weight
 - `children:string`
 - `headline:boolean` modifying font-size
-- `lighten:boolean` modifying text color
 - `upperCase:boolean` switching text to upper case
 - `small:boolean` modifying font-size
 - `tag:string` html tag of resulting element
 
-```js
+```jsx
 import { Text, View } from '@mirai/ui';
 
 const MyComponent = ({ headerText }) => (
@@ -188,7 +215,7 @@ This primitive works as a container for displaying layout. It receives the follo
 - `row:boolean` sets flex-direction as 'row' if true
 - `tag:string` html tag of resulting element
 
-```js
+```jsx
 import { Text, View } from '@mirai/ui';
 
 const MyComponent = ({ headerText }) => (
@@ -219,7 +246,7 @@ A button component that receives the following props:
 - `onLeave:function` executed when the user hovers away
 - `onPress:function` executed on mouse click on the element
 
-```js
+```jsx
 import { Button } from '@mirai/ui';
 
 const MyComponent = (props) => {
@@ -254,7 +281,7 @@ A calendar component that receives the following props:
 - `onChange:function` executed when input value changes
 - `onFocus:function` executed on calendar cell hover
 
-```js
+```jsx
 import { Calendar } from '@mirai/ui';
 
 const MyComponent = props => {
@@ -293,7 +320,7 @@ Input number component controlling the value with 2 buttons. Receives the follow
 - `value:number` input value
 - `onChange:function` executed when input value changes
 
-```js
+```jsx
 import { InputNumber } from '@mirai/ui';
 
 const MyComponent = (props) => {
@@ -316,7 +343,7 @@ This component is used to display a radio button or checkbox base on a mandatory
 - `value:number` input value
 - `onChange:function` executed when input value changes
 
-```js
+```jsx
 import { InputOption, View } from '@mirai/ui';
 
 const MyComponent = () => {
@@ -372,7 +399,7 @@ Text input component receiving the following props:
 - `onEnter:function` executed when user clicks on input
 - `onLeave:function` executed on click outside the input
 
-```js
+```jsx
 import { InputText } from '@mirai/ui';
 
 const MyComponent = (props) => {
@@ -392,6 +419,48 @@ const MyComponent = (props) => {
 };
 ```
 
+### Menu
+
+This component helps you to create a menu over a determinate component receiving the following props:
+
+- `children:node` The element which we will use as reference for display the menu.
+- `options:arrayOf(Option:shape)`
+- `Template:node` if you don't want use the default option scaffold.
+- `visible:boolean` showing or hiding the menu
+- `onPress:func` callback when we click on a determinate _option_.
+
+Before learning how to instantiate `<Menu>` let's look at the properties of our _shape_ `Option`:
+
+- `children:node` If you wanna add a component in the right side of your option.
+- `disabled:boolean` disables the option
+- `divider:boolean` if you wanna show a divider in the bottom of the option
+- `icon:string` If you want instantiate a primitive `<Icon>`
+- `label:string` label of the option
+- `value:string|number` this property will dispatch as identificator in the callback `onPress:func`
+
+```jsx
+import { Button, Icon, Menu } from '@mirai/ui';
+
+const MyComponent = () => {
+  const [visible, setVisible] = useState(false);
+
+  <Menu
+    options={[
+      { icon: 'EyeOpen', label: 'Show results', value: 1 },
+      { icon: 'Plus', label: 'Add item', disabled: true, value: 2 },
+      { icon: 'Minus', label: 'Subtract item', divider: true, value: 'three' },
+      { label: 'Using child', children: <Button small>Add</Button>, value: 'four' },
+    ]}
+    visible={visible}
+    onPress={(value, event) => console.log('<Menu>::onPress', value, event)}
+  >
+    <Button squared outlined onPress={() => setVisible(!visible)}>
+      <Icon name="Plus" />
+    </Button>
+  </Menu>;
+};
+```
+
 ### Modal
 
 A modal component receiving the following props:
@@ -400,7 +469,7 @@ A modal component receiving the following props:
 - `visible:boolean` if true modal is shown
 - `onClose:function` executed once modal close button is clicked
 
-```js
+```jsx
 import { Modal, View } from '@mirai/ui';
 
 const MyComponent = (props) => {
@@ -414,6 +483,27 @@ const MyComponent = (props) => {
 };
 ```
 
+### Tooltip
+
+This component helps you to create a tooltip over a determinate component receiving the following props:
+
+- `children:node` The element which we will use as reference for display the menu.
+- `Template:node` if you don't want use the default scaffold.
+- `text:string` text it will appears when hover on `children`
+- `visible:boolean` the default state of visibility of the instance.
+
+```jsx
+import { Text, Tooltip } from '@mirai/ui';
+
+const MyComponent = () => {
+  const [visible, setVisible] = useState(false);
+
+  <Tooltip text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. ">
+    <Text bold>hover me</Text>
+  </Tooltip>;
+};
+```
+
 ## Theme
 
 Styles can be customised by using Theme utility.
@@ -426,7 +516,7 @@ This method returns current theme settings (variables with values). This method
 
 This method sets a value of the variable passed as a parameter.
 
-```js
+```jsx
 import { Button, Text, Theme } from '../../src';
 
 export default () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.0.9",
+  "version": "1.0.12",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",

package/build/components/Button/Button.js

@@ -1,45 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Button = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _helpers = require("../../helpers");
-
-var _primitives = require("../../primitives");
-
-var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
-
-var _excluded = ["children", "disabled", "large", "outlined", "rounded", "small", "squared", "tag"];
-
-var Button = function Button(_ref) {
-  var children = _ref.children,
-      disabled = _ref.disabled,
-      large = _ref.large,
-      outlined = _ref.outlined,
-      rounded = _ref.rounded,
-      small = _ref.small,
-      _ref$squared = _ref.squared,
-      squared = _ref$squared === void 0 ? false : _ref$squared,
-      _ref$tag = _ref.tag,
-      tag = _ref$tag === void 0 ? 'button' : _ref$tag,
-      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, others), {}, {
-    disabled: disabled,
-    tag: tag,
-    className: (0, _helpers.styles)(_ButtonModule.default.button, large && _ButtonModule.default.large, small && _ButtonModule.default.small, rounded && _ButtonModule.default.rounded, squared && _ButtonModule.default.squared, outlined && !disabled && _ButtonModule.default.outlined, others.className)
-  }), children);
-};
-
-exports.Button = Button;
-Button.displayName = 'Component:Button';
-//# sourceMappingURL=Button.js.map

package/build/components/Button/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","names":["Button","children","disabled","large","outlined","rounded","small","squared","tag","others","React","createElement","Pressable","className","style","button","displayName"],"sources":["../../../src/components/Button/Button.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable } from '../../primitives';\nimport style from './Button.module.css';\n\nconst Button = ({ children, disabled, large, outlined, rounded, small, squared = false, tag = 'button', ...others }) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled,\n      tag,\n      className: styles(\n        style.button,\n        large && style.large,\n        small && style.small,\n        rounded && style.rounded,\n        squared && style.squared,\n        outlined && !disabled && style.outlined,\n        others.className,\n      ),\n    },\n    children,\n  );\n\nButton.displayName = 'Component:Button';\n\nButton.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  outlined: PropTypes.bool,\n  rounded: PropTypes.bool,\n  small: PropTypes.bool,\n  squared: PropTypes.bool,\n  tag: PropTypes.string,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"mappings":";;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,IAAGC,QAAH,QAAGA,QAAH;EAAA,IAAaC,QAAb,QAAaA,QAAb;EAAA,IAAuBC,KAAvB,QAAuBA,KAAvB;EAAA,IAA8BC,QAA9B,QAA8BA,QAA9B;EAAA,IAAwCC,OAAxC,QAAwCA,OAAxC;EAAA,IAAiDC,KAAjD,QAAiDA,KAAjD;EAAA,wBAAwDC,OAAxD;EAAA,IAAwDA,OAAxD,6BAAkE,KAAlE;EAAA,oBAAyEC,GAAzE;EAAA,IAAyEA,GAAzE,yBAA+E,QAA/E;EAAA,IAA4FC,MAA5F;EAAA,oBACbC,eAAMC,aAAN,CACEC,qBADF,8DAGOH,MAHP;IAIIP,QAAQ,EAARA,QAJJ;IAKIM,GAAG,EAAHA,GALJ;IAMIK,SAAS,EAAE,qBACTC,sBAAMC,MADG,EAETZ,KAAK,IAAIW,sBAAMX,KAFN,EAGTG,KAAK,IAAIQ,sBAAMR,KAHN,EAITD,OAAO,IAAIS,sBAAMT,OAJR,EAKTE,OAAO,IAAIO,sBAAMP,OALR,EAMTH,QAAQ,IAAI,CAACF,QAAb,IAAyBY,sBAAMV,QANtB,EAOTK,MAAM,CAACI,SAPE;EANf,IAgBEZ,QAhBF,CADa;AAAA,CAAf;;;AAoBAD,MAAM,CAACgB,WAAP,GAAqB,kBAArB"}

package/build/components/Button/Button.module.css

@@ -1,83 +0,0 @@
-:root {
-  --mirai-ui-button-color: var(--mirai-ui-accent);
-  --mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
-  --mirai-ui-button-color-focus: var(--mirai-ui-content);
-  --mirai-ui-button-color-text: var(--mirai-ui-base);
-  --mirai-ui-button-radius: var(--mirai-ui-border-radius);
-}
-
-.button {
-  align-items: center;
-  background-color: var(--mirai-ui-button-color);
-  border-radius: var(--mirai-ui-button-radius);
-  color: var(--mirai-ui-button-color-text);
-  display: flex;
-  font-family: var(--mirai-ui-font);
-  font-size: var(--mirai-ui-font-size-action);
-  font-weight: var(--mirai-ui-font-bold-weight);
-  justify-content: center;
-  padding: var(--mirai-ui-space-S) var(--mirai-ui-space-L);
-  transition: background-color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
-    box-shadow var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
-    color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
-  width: fit-content;
-}
-
-.button:disabled {
-  background-color: var(--mirai-ui-disabled);
-  color: var(--mirai-ui-lighten);
-}
-
-.outlined {
-  border: solid 1px var(--mirai-ui-button-color);
-  background-color: var(--mirai-ui-base);
-  color: var(--mirai-ui-button-color);
-}
-
-.button:not(:disabled):active {
-  box-shadow: inset 0 0 var(--mirai-ui-space-XXL) var(--mirai-ui-space-XXL) var(--mirai-ui-button-color-active);
-}
-
-.large:not(.squared) {
-  font-size: var(--mirai-ui-font-size-headline);
-  padding: var(--mirai-ui-space-M) var(--mirai-ui-space-XL);
-}
-
-.small:not(.squared) {
-  font-size: var(--mirai-ui-font-size-small);
-  padding: var(--mirai-ui-space-XS) var(--mirai-ui-space-S);
-}
-
-.rounded {
-  border-radius: 50%;
-}
-
-.squared {
-  padding: 0;
-  height: var(--mirai-ui-space-XL);
-  width: var(--mirai-ui-space-XL);
-}
-
-.squared.small {
-  height: var(--mirai-ui-space-L);
-  width: var(--mirai-ui-space-L);
-}
-
-.squared.large {
-  height: var(--mirai-ui-space-XXL);
-  width: var(--mirai-ui-space-XXL);
-}
-
-@media only screen and (max-width: 600px) {
-}
-
-@media only screen and (min-width: 600px) {
-  .button:not(:disabled).outlined:hover {
-    border-color: var(--mirai-ui-button-color-hover);
-    color: var(--mirai-ui-button-color-focus);
-  }
-
-  .button:not(:disabled):not(.outlined):hover {
-    background-color: var(--mirai-ui-button-color-focus);
-  }
-}

package/build/components/Button/__tests__/__snapshots__/Button.test.js.snap

@@ -1,113 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[` 1`] = `
-<DocumentFragment>
-  <button
-    class="pressable button squared"
-  >
-    children
-  </button>
-</DocumentFragment>
-`;
-
-exports[`component:<Button> inherit:className 1`] = `
-<DocumentFragment>
-  <button
-    class="pressable button mirai"
-  >
-    children
-  </button>
-</DocumentFragment>
-`;
-
-exports[`component:<Button> prop:disabled 1`] = `
-<DocumentFragment>
-  <button
-    class="pressable button"
-    disabled=""
-  >
-    children
-  </button>
-</DocumentFragment>
-`;
-
-exports[`component:<Button> prop:large 1`] = `
-<DocumentFragment>
-  <button
-    class="pressable button large"
-  >
-    children
-  </button>
-</DocumentFragment>
-`;
-
-exports[`component:<Button> prop:outlined 1`] = `
-<DocumentFragment>
-  <button
-    class="pressable button outlined"
-  >
-    children
-  </button>
-</DocumentFragment>
-`;
-
-exports[`component:<Button> prop:small 1`] = `
-<DocumentFragment>
-  <button
-    class="pressable button small"
-  >
-    children
-  </button>
-</DocumentFragment>
-`;
-
-exports[`component:<Button> prop:squared & large 1`] = `
-<DocumentFragment>
-  <button
-    class="pressable button large squared"
-  >
-    children
-  </button>
-</DocumentFragment>
-`;
-
-exports[`component:<Button> prop:squared & small 1`] = `
-<DocumentFragment>
-  <button
-    class="pressable button small squared"
-  >
-    children
-  </button>
-</DocumentFragment>
-`;
-
-exports[`component:<Button> prop:tag 1`] = `
-<DocumentFragment>
-  <a
-    class="pressable button"
-  >
-    children
-  </a>
-</DocumentFragment>
-`;
-
-exports[`component:<Button> renders 1`] = `
-<DocumentFragment>
-  <button
-    class="pressable button"
-  >
-    children
-  </button>
-</DocumentFragment>
-`;
-
-exports[`component:<Button> testID 1`] = `
-<DocumentFragment>
-  <button
-    class="pressable button"
-    data-testid="mirai"
-  >
-    children
-  </button>
-</DocumentFragment>
-`;

package/build/components/Button/index.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _Button = require("./Button");
-
-Object.keys(_Button).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Button[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Button[key];
-    }
-  });
-});
-//# sourceMappingURL=index.js.map

package/build/components/Button/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Button/index.js"],"sourcesContent":["export * from './Button';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/components/Calendar/Calendar.Month.js

@@ -1,100 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Month = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _helpers = require("../../helpers");
-
-var _hooks = require("../../hooks");
-
-var _primitives = require("../../primitives");
-
-var _Calendar = require("./Calendar.constants");
-
-var _CalendarModule = _interopRequireDefault(require("./Calendar.module.css"));
-
-var _Calendar2 = require("./Calendar.Week");
-
-var _Calendar3 = require("./Calendar.Weekdays");
-
-var _helpers2 = require("./helpers");
-
-var _excluded = ["focus", "instance", "selected", "disabledPast", "format", "from", "locale", "range", "to", "onChange", "onFocus", "onNext", "onPrevious"];
-
-var Month = function Month(_ref) {
-  var focus = _ref.focus,
-      instance = _ref.instance,
-      selected = _ref.selected,
-      _ref$disabledPast = _ref.disabledPast,
-      disabledPast = _ref$disabledPast === void 0 ? true : _ref$disabledPast,
-      format = _ref.format,
-      from = _ref.from,
-      locale = _ref.locale,
-      _ref$range = _ref.range,
-      range = _ref$range === void 0 ? false : _ref$range,
-      to = _ref.to,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$onFocus = _ref.onFocus,
-      onFocus = _ref$onFocus === void 0 ? function () {} : _ref$onFocus,
-      onNext = _ref.onNext,
-      onPrevious = _ref.onPrevious,
-      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
-  var _useDevice = (0, _hooks.useDevice)(),
-      isDesktop = _useDevice.isDesktop;
-
-  var weekNumber = (0, _helpers2.getWeekNumber)(instance);
-  return /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    className: (0, _helpers.styles)(_CalendarModule.default.month, others.className)
-  }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    row: true,
-    className: _CalendarModule.default.header
-  }, onPrevious && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    onPress: onPrevious
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    name: "Left"
-  })), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
-    bold: true,
-    upperCase: true,
-    className: _CalendarModule.default.title
-  }, (0, _helpers2.getHeader)(instance, locale)), onNext && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
-    onPress: onNext
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
-    name: "Right"
-  }))), isDesktop && /*#__PURE__*/_react.default.createElement(_Calendar3.Weekdays, {
-    locale: locale
-  }), _Calendar.VISIBLE_WEEKS.map(function (week) {
-    return /*#__PURE__*/_react.default.createElement(_Calendar2.Week, Object.assign({}, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, others), {}, {
-      disabledPast: disabledPast,
-      focus: focus,
-      format: format,
-      from: from,
-      locale: locale,
-      to: to,
-      range: range,
-      selected: selected
-    }), {
-      key: week,
-      month: instance.getMonth(),
-      number: weekNumber + week,
-      year: instance.getFullYear(),
-      onFocus: onFocus,
-      onPress: onChange
-    }));
-  }));
-};
-
-exports.Month = Month;
-Month.displayName = 'Component:Calendar:Month';
-//# sourceMappingURL=Calendar.Month.js.map

package/build/components/Calendar/Calendar.Month.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Calendar.Month.js","names":["Month","focus","instance","selected","disabledPast","format","from","locale","range","to","onChange","onFocus","onNext","onPrevious","others","isDesktop","weekNumber","style","month","className","header","title","VISIBLE_WEEKS","map","week","getMonth","getFullYear","displayName"],"sources":["../../../src/components/Calendar/Calendar.Month.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport { VISIBLE_WEEKS } from './Calendar.constants';\nimport style from './Calendar.module.css';\nimport { Week } from './Calendar.Week';\nimport { Weekdays } from './Calendar.Weekdays';\nimport { getHeader, getWeekNumber } from './helpers';\n\nexport const Month = ({\n  focus,\n  instance,\n  selected,\n  disabledPast = true,\n  format,\n  from,\n  locale,\n  range = false,\n  to,\n  onChange = () => {},\n  onFocus = () => {},\n  onNext,\n  onPrevious,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n  const weekNumber = getWeekNumber(instance);\n\n  return (\n    <View className={styles(style.month, others.className)}>\n      <View row className={style.header}>\n        {onPrevious && (\n          <Pressable onPress={onPrevious}>\n            <Icon name=\"Left\" />\n          </Pressable>\n        )}\n        <Text bold upperCase className={style.title}>\n          {getHeader(instance, locale)}\n        </Text>\n        {onNext && (\n          <Pressable onPress={onNext}>\n            <Icon name=\"Right\" />\n          </Pressable>\n        )}\n      </View>\n\n      {isDesktop && <Weekdays locale={locale} />}\n\n      {VISIBLE_WEEKS.map((week) => (\n        <Week\n          {...{\n            ...others,\n            disabledPast,\n            focus,\n            format,\n            from,\n            locale,\n            to,\n            range,\n            selected,\n          }}\n          key={week}\n          month={instance.getMonth()}\n          number={weekNumber + week}\n          year={instance.getFullYear()}\n          onFocus={onFocus}\n          onPress={onChange}\n        />\n      ))}\n    </View>\n  );\n};\n\nMonth.displayName = 'Component:Calendar:Month';\n\nMonth.propTypes = {\n  captions: PropTypes.shape({}),\n  focus: PropTypes.any,\n  instance: PropTypes.any,\n  selected: PropTypes.any,\n  disabledDates: PropTypes.arrayOf(PropTypes.string),\n  disabledPast: PropTypes.bool,\n  disabledWeekends: PropTypes.bool,\n  format: PropTypes.string,\n  from: PropTypes.instanceOf(Date),\n  locale: PropTypes.string,\n  range: PropTypes.bool,\n  to: PropTypes.instanceOf(Date),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),\n  onChange: PropTypes.func,\n  onFocus: PropTypes.func,\n  onNext: PropTypes.func,\n  onPrevious: PropTypes.func,\n};\n"],"mappings":";;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEO,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAef;EAAA,IAdJC,KAcI,QAdJA,KAcI;EAAA,IAbJC,QAaI,QAbJA,QAaI;EAAA,IAZJC,QAYI,QAZJA,QAYI;EAAA,6BAXJC,YAWI;EAAA,IAXJA,YAWI,kCAXW,IAWX;EAAA,IAVJC,MAUI,QAVJA,MAUI;EAAA,IATJC,IASI,QATJA,IASI;EAAA,IARJC,MAQI,QARJA,MAQI;EAAA,sBAPJC,KAOI;EAAA,IAPJA,KAOI,2BAPI,KAOJ;EAAA,IANJC,EAMI,QANJA,EAMI;EAAA,yBALJC,QAKI;EAAA,IALJA,QAKI,8BALO,YAAM,CAAE,CAKf;EAAA,wBAJJC,OAII;EAAA,IAJJA,OAII,6BAJM,YAAM,CAAE,CAId;EAAA,IAHJC,MAGI,QAHJA,MAGI;EAAA,IAFJC,UAEI,QAFJA,UAEI;EAAA,IADDC,MACC;;EACJ,iBAAsB,uBAAtB;EAAA,IAAQC,SAAR,cAAQA,SAAR;;EACA,IAAMC,UAAU,GAAG,6BAAcd,QAAd,CAAnB;EAEA,oBACE,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOe,wBAAMC,KAAb,EAAoBJ,MAAM,CAACK,SAA3B;EAAjB,gBACE,6BAAC,gBAAD;IAAM,GAAG,MAAT;IAAU,SAAS,EAAEF,wBAAMG;EAA3B,GACGP,UAAU,iBACT,6BAAC,qBAAD;IAAW,OAAO,EAAEA;EAApB,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EADF,CAFJ,eAME,6BAAC,gBAAD;IAAM,IAAI,MAAV;IAAW,SAAS,MAApB;IAAqB,SAAS,EAAEI,wBAAMI;EAAtC,GACG,yBAAUnB,QAAV,EAAoBK,MAApB,CADH,CANF,EASGK,MAAM,iBACL,6BAAC,qBAAD;IAAW,OAAO,EAAEA;EAApB,gBACE,6BAAC,gBAAD;IAAM,IAAI,EAAC;EAAX,EADF,CAVJ,CADF,EAiBGG,SAAS,iBAAI,6BAAC,mBAAD;IAAU,MAAM,EAAER;EAAlB,EAjBhB,EAmBGe,wBAAcC,GAAd,CAAkB,UAACC,IAAD;IAAA,oBACjB,6BAAC,eAAD,gFAEOV,MAFP;MAGIV,YAAY,EAAZA,YAHJ;MAIIH,KAAK,EAALA,KAJJ;MAKII,MAAM,EAANA,MALJ;MAMIC,IAAI,EAAJA,IANJ;MAOIC,MAAM,EAANA,MAPJ;MAQIE,EAAE,EAAFA,EARJ;MASID,KAAK,EAALA,KATJ;MAUIL,QAAQ,EAARA;IAVJ;MAYE,GAAG,EAAEqB,IAZP;MAaE,KAAK,EAAEtB,QAAQ,CAACuB,QAAT,EAbT;MAcE,MAAM,EAAET,UAAU,GAAGQ,IAdvB;MAeE,IAAI,EAAEtB,QAAQ,CAACwB,WAAT,EAfR;MAgBE,OAAO,EAAEf,OAhBX;MAiBE,OAAO,EAAED;IAjBX,GADiB;EAAA,CAAlB,CAnBH,CADF;AA2CD,CA9DM;;;AAgEPV,KAAK,CAAC2B,WAAN,GAAoB,0BAApB"}