@mirai/ui 1.1.0-d → 1.1.1

package/README.md

@@ -19,6 +19,7 @@ This primitive returns a checkbox button based on the following properties:
 - `checked:boolean` if true, the checkbox button is checked
 - `children:node`
 - `disabled:boolean` applying 'disabled' attribute
+- `error:boolean` shows error style
 - `name:string` input name (required)
 - `value:string` input value
 - `onChange:function` executed when input value changes
@@ -38,16 +39,33 @@ const MyComponent = () => (
   </View>
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-checkbox-base: var(--mirai-ui-base);
+--mirai-ui-checkbox-border-color: var(--mirai-ui-content-light);
+--mirai-ui-checkbox-border-radius: var(--mirai-ui-border-radius);
+--mirai-ui-checkbox-checked: var(--mirai-ui-accent);
+--mirai-ui-checkbox-disabled: var(--mirai-ui-content-border);
+--mirai-ui-checkbox-size: calc(var(--mirai-ui-space-M) + calc(var(--mirai-ui-space-XXS) / 2));
+--mirai-ui-checkbox-size-mobile: var(--mirai-ui-space-L);
+```
+
 ### Icon
 
 This primitive returns a span with an icon based on a mandatory string prop `name`.
 
+- `accent:boolean` use theme's accent color
 - `action:boolean` modifying font-size
+- `error:boolean` use theme's error color
 - `headline:boolean` modifying font-size (default headline:3)
 - `level:number` assign the level of heading (1, 2, 3 or 4)
+- `lighten:boolean` use theme's content-light color
 - `paragraph:boolean` modifying font-size
 - `small:boolean` modifying font-size
+- `success:boolean` use theme's success color
 - `value:func` Enum value
+- `warning:boolean` use theme's warning color
 
 ```jsx
 import { Icon, ICON, View } from '@mirai/ui';
@@ -66,6 +84,8 @@ const MyComponent = () => (
 This primitive returns an input or a textarea based on the following props:
 
 - `disabled:boolean` applying 'disabled' attribute
+- `max:number` specifies the maximum allowed value for numeric input
+- `min:number` specifies the minimun allowed value for numeric input
 - `multiline:boolean` if true returning textarea
 - `name:string` input name
 - `type:string` type attribute value
@@ -141,7 +161,6 @@ const MyComponent = () => {
 
 ```css
 --mirai-ui-layer-content: var(--mirai-ui-layer-XL);
-/* position (z-index) */
 --mirai-ui-layer-XS: -1;
 --mirai-ui-layer-S: 0;
 --mirai-ui-layer-M: 1;
@@ -205,7 +224,8 @@ const MyComponent = () => (
 --mirai-ui-radio-border: var(--mirai-ui-content-light);
 --mirai-ui-radio-checked: var(--mirai-ui-accent);
 --mirai-ui-radio-disabled: var(--mirai-ui-content-border);
---mirai-ui-radio-size: var(--mirai-ui-space-L);
+--mirai-ui-radio-size: var(--mirai-ui-checkbox-size);
+--mirai-ui-radio-size-mobile: var(--mirai-ui-checkbox-size-mobile);
 ```
 
 ### ScrollView
@@ -240,6 +260,7 @@ const MyComponent = ({ isDesktop }) => (
 This primitive returns a select element and receives the following props:
 
 - `disabled:boolean` applying 'disabled' attribute
+- `disabledOptions:boolean[]` applying 'disabled' for an specific option
 - `emptyOption:string` label for the empty default value (e.g. 'Select an option')
 - `options:string[]` select options text and values
 - `value:string` current value
@@ -260,6 +281,7 @@ const Example = (props) => {
 
   return (
     <Select
+      disabledOptions={[, true]}
       emptyOption="Select one option..."
       name="Select"
       options={['foo', 'bar']}
@@ -276,6 +298,7 @@ This primitive returns a _mobile_ checkbox button based on the following propert
 
 - `checked:boolean` if true, the checkbox button is checked
 - `disabled:boolean` applying 'disabled' attribute
+- `error:boolean` shows error style
 - `name:string` input name (required)
 - `onChange:function` executed when input value changes
 
@@ -296,12 +319,12 @@ const MyComponent = () => (
 ```css
 --mirai-ui-switch-base: var(--mirai-ui-base);
 --mirai-ui-switch-border-color: var(--mirai-ui-content-light);
---mirai-ui-switch-border-size: calc(var(--mirai-ui-space-XS) / 4);
+--mirai-ui-switch-border-size: var(--mirai-ui-space-XXS);
 --mirai-ui-switch-border-radius: var(--mirai-ui-space-L);
 --mirai-ui-switch-checked: var(--mirai-ui-accent);
 --mirai-ui-switch-disabled: var(--mirai-ui-content-border);
---mirai-ui-switch-color-hover: var(--mirai-ui-content);
---mirai-ui-switch-size: var(--mirai-ui-space-L);
+--mirai-ui-switch-size: var(--mirai-ui-space-M);
+--mirai-ui-switch-size-mobile: calc(var(--mirai-ui-space-L) - var(--mirai-ui-space-XXS));
 ```
 
 ### Text
@@ -311,16 +334,20 @@ A primitive for displaying text. It receives the following props:
 - `accent:boolean` use theme's accent color
 - `action:boolean` modifying font-size
 - `bold:boolean` modifying font-weight
+- `capitalize:boolean` capitalize the first word of a sentence
 - `children:string`
+- `error:boolean` use theme's error color
 - `headline:boolean` modifying font-size
 - `level:number` assign the level of heading (1, 2, 3 or 4)
 - `lighten:boolean` use theme's content-light color
 - `markdown:boolean` if true renders content as parsed markdown
 - `small:boolean` modifying font-size
+- `success:boolean` use theme's success color
 - `tag:string` html tag of resulting element
 - `tiny:bool` modifying font-size
 - `underline:boolean` use an underline text decoration
 - `upperCase:boolean` switching text to upper case
+- `warning:boolean` use theme's warning color
 - `wide:boolean` specifies whether the component should have more width or not
 
 ```jsx
@@ -400,7 +427,6 @@ const MyComponent = (props) => {
 
 ```css
 --mirai-ui-action-color: var(--mirai-ui-accent);
---mirai-ui-action-color-active: var(--mirai-ui-content);
 --mirai-ui-action-color-disabled: var(--mirai-ui-content-light);
 --mirai-ui-action-font-weight: var(--mirai-ui-font-weight);
 ```
@@ -448,7 +474,6 @@ const MyComponent = (props) => {
 --mirai-ui-button-busy-motion: calc(var(--mirai-ui-motion-expand) * 10);
 --mirai-ui-button-color: var(--mirai-ui-base);
 --mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
---mirai-ui-button-color-hover: var(--mirai-ui-content);
 --mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
 --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
 --mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
@@ -679,6 +704,7 @@ This component is used to display a radio button or checkbox base on a mandatory
 
 - `checked:boolean` if true, the input is checked
 - `disabled:boolean` applying 'disabled' attribute
+- `error:boolean` shows error style
 - `indeterminate:boolean` applying 'indeterminate' attribute (only for type checkbox)
 - `label:string` input label
 - `name:string` input name
@@ -733,7 +759,7 @@ const MyComponent = () => {
 
 ```css
 --mirai-ui-input-option-disabled: var(--mirai-ui-content-light);
---mirai-ui-input-option-label-margin: var(--mirai-ui-space-S);
+--mirai-ui-input-option-gap: var(--mirai-ui-space-XS);
 --mirai-ui-input-option-padding-y: var(--mirai-ui-space-S);
 ```
 
@@ -840,7 +866,7 @@ Text input component receiving the following props:
 
 - `caption:string` a support text (Ex. currency symbol)
 - `disabled:boolean` applying 'disabled' attribute
-- `error:boolean` true if error event fired
+- `error:boolean` shows error style
 - `hint:string` brief message
 - `icon:string` if you want use an `<Icon>` within the component
 - `label:string` input label
@@ -879,13 +905,13 @@ const MyComponent = (props) => {
 **Theming variables**
 
 ```css
---mirai-ui-input-text-border: solid 1px var(--mirai-ui-content-border);
+--mirai-ui-input-text-border: solid var(--mirai-ui-border-width) var(--mirai-ui-content-border);
 --mirai-ui-input-text-disabled: var(--mirai-ui-content-border);
 --mirai-ui-input-text-error: var(--mirai-ui-error);
---mirai-ui-input-text-focus: var(--mirai-ui-accent);
---mirai-ui-input-text-icon: var(--mirai-ui-font-size-headline-4);
---mirai-ui-input-text-padding-x: var(--mirai-ui-space-S);
---mirai-ui-input-text-padding-y: var(--mirai-ui-space-S);
+--mirai-ui-input-text-focus: var(--mirai-ui-content);
+--mirai-ui-input-text-icon: var(--mirai-ui-font-size-headline-3);
+--mirai-ui-input-text-padding-x: var(--mirai-ui-space-M);
+--mirai-ui-input-text-padding-y: var(--mirai-ui-space-XS);
 --mirai-ui-input-text-radius: var(--mirai-ui-border-radius);
 ```
 
@@ -937,11 +963,11 @@ const MyComponent = () => {
 ```css
 --mirai-ui-menu-base: var(--mirai-ui-base);
 --mirai-ui-menu-border-radius: var(--mirai-ui-border-radius);
---mirai-ui-menu-min-width: 192px;
+--mirai-ui-menu-min-width: calc(var(--mirai-ui-breakpoint-S) / 2);
 --mirai-ui-menu-shadow: var(--mirai-ui-shadow);
 --mirai-ui-menu-option-disabled: var(--mirai-ui-content-border);
---mirai-ui-menu-option-hover-background: var(--mirai-ui-accent);
---mirai-ui-menu-option-hover-color: var(--mirai-ui-base);
+--mirai-ui-menu-option-hover-background: var(--mirai-ui-content-background);
+--mirai-ui-menu-option-hover-color: var(--mirai-ui-content);
 --mirai-ui-menu-option-padding: var(--mirai-ui-space-M);
 ```
 
@@ -952,6 +978,7 @@ A modal component receiving the following props:
 - `blur:bool` if you want use a _glashmorphism_ effect in the overflow
 - `children:node`
 - `fit:bool` if you want use fit width with the content
+- `mobileBehavior:bool` if you want use mobile behavior
 - `overflow:bool` wraps all modal in a semi-transparent layer
 - `portal:bool` if you want use _portal feature_ of React API
 - `preventDefault:bool` if you want stop the event tunneling (default true)
@@ -979,10 +1006,11 @@ const MyComponent = (props) => {
 
 ```css
 --mirai-ui-modal-background: var(--mirai-ui-base);
+--mirai-ui-modal-border-radius: calc(var(--mirai-ui-border-radius) * 2);
 --mirai-ui-modal-header-padding: var(--mirai-ui-space-M);
 --mirai-ui-modal-icon: var(--mirai-ui-font-size-headline-2);
 --mirai-ui-modal-layer: var(--mirai-ui-layer-L);
---mirai-ui-modal-overflow: rgba(0, 0, 0, 0.15);
+--mirai-ui-modal-overflow: rgba(72, 72, 72, 0.2);
 --mirai-ui-modal-shadow: var(--mirai-ui-shadow);
 ```
 
@@ -1011,6 +1039,15 @@ const Example = (props) => (
 );
 ```
 
+**Theming variables**
+
+```css
+--mirai-ui-notification-border-radius: var(--mirai-ui-border-radius);
+--mirai-ui-notification-padding: var(--mirai-ui-space-S);
+--mirai-ui-notification-padding-large: var(--mirai-ui-space-M);
+--mirai-ui-notification-padding-small: var(--mirai-ui-space-XS);
+```
+
 ### Progress
 
 A progress component receiving the following props:
@@ -1043,15 +1080,18 @@ const MyComponent = (props) => {
 A Slider component receiving the following props:
 
 - `auto:bool` if you want auto slide feature (default is false).
+- `behavior:string` type of scroll animation
 - `captions:arrayOf:string` if you want show a determinate caption for a determinate image.
 - `fullScreen:boolean` if you want start in fullScreen mode.
 - `height:number` Height of component (required).
 - `images:arrayOf:string` images to show (required).
 - `index:number` If you want show a determinate image at atart.
+- `indicator:boolean` if true shows the amount of pictures viewed using a progress component.
+- `replay:boolean` restart slider when we go forwards after the last image
 - `thumbnails:arrayOf:string` if you want use thumbnails of images in fullScreen mode.
 - `width:number` width of component (required).
 - `onChange:function` executed when image (index) is visible
-- `onFullScreen:function` executed when toggle fullScreen property
+- `onCounter:function` show a pressable counter
 
 ```jsx
 import { Slider } from '@mirai/ui';
@@ -1065,9 +1105,10 @@ const MyComponent = (props) => {
 **Theming variables**
 
 ```css
---mirai-ui-slider-background: var(--mirai-ui-content-dark);
+--mirai-ui-slider-button: var(--mirai-ui-base);
+--mirai-ui-slider-button-icon: var(--mirai-ui-content);
 --mirai-ui-slider-overlay: rgba(0, 0, 0, 0.66);
---mirai-ui-slider-color: var(--mirai-ui-base);
+--mirai-ui-slider-overlay-color: var(--mirai-ui-base);
 --mirai-ui-slider-border-radius: var(--mirai-ui-border-radius);
 ```
 
@@ -1077,10 +1118,12 @@ This component helps you to create a pure html table receiving the following pro
 
 - `dataSource:arrayOf(shape)` datasource of your model data schema
 - `filter:object[]` array of filter items that are applied to the table data. Each filter item represents a specific filter configuration.
-- `inline:shape` specifies whether the table should be displayed inline
+- `inline:bool` specifies whether the table should be displayed inline
 - `schema:shape` the model data schema
+- `pagination:number` the number of rows you will paginate
 - `search:string` the query string you want use for filter the datasource
 - `selected:arrayOf(dataSource.row)` if you want pre-select some rows in 1st render
+- `sort:bool` specifies whether the table can be sorted or not
 - `store:string` if you want use storage feature for some features of your table (ex. keep the current filters).
 - `onPress:function` executed once press in any row
 - `onScroll:function` executed once scroll the table
@@ -1144,8 +1187,8 @@ const MyComponent = () => {
 --mirai-ui-table-color-disabled: var(--mirai-ui-content-border);
 --mirai-ui-table-padding-x: var(--mirai-ui-space-M);
 --mirai-ui-table-padding-y: var(--mirai-ui-space-M);
---mirai-ui-table-selected-background: var(--mirai-ui-accent-background);
---mirai-ui-table-selected-color: var(--mirai-ui-accent);
+--mirai-ui-table-selected-background: var(--mirai-ui-content-background);
+--mirai-ui-table-selected-color: var(--mirai-ui-content);
 ```
 
 ### Tooltip
@@ -1177,7 +1220,7 @@ const MyComponent = () => {
 **Theming variables**
 
 ```css
---mirai-ui-tooltip-background: rgba(0, 0, 0, 0.8);
+--mirai-ui-tooltip-background: var(--mirai-ui-content-dark);
 --mirai-ui-tooltip-border-radius: var(--mirai-ui-border-radius);
 --mirai-ui-tooltip-color: var(--mirai-ui-base);
 --mirai-ui-tooltip-space: var(--mirai-ui-space-XS);
@@ -1258,25 +1301,26 @@ Theme.setDirection(DIRECTION_TYPE.RIGHT);
 
 ```css
 /* typography */
---mirai-ui-font: Arial, Regular;
---mirai-ui-input-font: Arial, Regular;
+--mirai-ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+--mirai-ui-input-font: var(--mirai-ui-font);
 --mirai-ui-font-weight: 400;
---mirai-ui-font-bold: Arial, Regular;
+--mirai-ui-font-bold: var(--mirai-ui-font);
 --mirai-ui-font-bold-weight: 700;
 --mirai-ui-font-size-headline-1: 32px;
---mirai-ui-line-height-headline-1: 38px;
+--mirai-ui-line-height-headline-1: 40px;
 --mirai-ui-font-size-headline-2: 24px;
---mirai-ui-line-height-headline-2: 25px;
---mirai-ui-font-size-headline-3: 18px;
---mirai-ui-line-height-headline-3: 22px;
---mirai-ui-font-size-headline-4: 16px;
---mirai-ui-line-height-headline-4: 19px;
---mirai-ui-font-size-paragraph: 14px;
---mirai-ui-line-height-paragraph: 22px;
+--mirai-ui-line-height-headline-2: 32px;
+--mirai-ui-font-size-headline-3: 20px;
+--mirai-ui-line-height-headline-3: 24px;
+--mirai-ui-font-size-paragraph: 16px;
+--mirai-ui-line-height-paragraph: 20px;
 --mirai-ui-font-size-action: 14px;
---mirai-ui-line-height-action: 20px;
+--mirai-ui-line-height-action: 18px;
 --mirai-ui-font-size-small: 12px;
---mirai-ui-line-height-small: 18px;
+--mirai-ui-line-height-small: 16px;
+--mirai-ui-font-size-tiny: 10px;
+--mirai-ui-line-height-tiny: 12px;
 --mirai-ui-text-direction: ltr;
 --mirai-ui-text-align: left;
 
@@ -1285,35 +1329,34 @@ Theme.setDirection(DIRECTION_TYPE.RIGHT);
 
 --mirai-ui-content: #484848;
 --mirai-ui-content-background: #f6f6f6;
---mirai-ui-content-border: #e4e4e4;
+--mirai-ui-content-border: #dedede;
+--mirai-ui-content-light: #6e6e6e;
 --mirai-ui-content-dark: #202020;
---mirai-ui-content-light: #999999;
 
 --mirai-ui-accent: #3978c5;
 --mirai-ui-accent-background: #e9f1fc;
 --mirai-ui-accent-border: #b0c9e8;
---mirai-ui-accent-dark: #224876;
 --mirai-ui-accent-light: #88aedc;
+--mirai-ui-accent-dark: #224876;
 
---mirai-ui-error: #d14343;
---mirai-ui-error-background: #fdf4f4;
---mirai-ui-error-border: #f4b6b6;
---mirai-ui-error-dark: #7d2828;
---mirai-ui-error-light: #ee9191;
+--mirai-ui-error: #d32f2f;
+--mirai-ui-error-background: #fdeded;
+--mirai-ui-error-border: #fad6d6;
 
---mirai-ui-success: #52bd94;
---mirai-ui-success-background: #f5fbf8;
---mirai-ui-success-border: #dcf2ea;
---mirai-ui-success-dark: #317159;
---mirai-ui-success-light: #a3e6cd;
+--mirai-ui-warning: #663c00;
+--mirai-ui-warning-background: #fff4e5;
+--mirai-ui-warning-border: #ffe5c2;
 
---mirai-ui-warning: #ffb020;
---mirai-ui-warning-background: #fffaf1;
---mirai-ui-warning-border: #ffdfa6;
---mirai-ui-warning-dark: #66460d;
---mirai-ui-warning-light: #ffd079;
+--mirai-ui-success: #1e4620;
+--mirai-ui-success-background: #edf7ed;
+--mirai-ui-success-border: #d5ecd5;
+
+--mirai-ui-info: #014361;
+--mirai-ui-info-background: #e6f5fd;
+--mirai-ui-info-border: #c6e8fa;
 
 /* spacing */
+--mirai-ui-space-XXS: 4px;
 --mirai-ui-space-XS: 8px;
 --mirai-ui-space-S: 12px;
 --mirai-ui-space-M: 16px;
@@ -1323,7 +1366,7 @@ Theme.setDirection(DIRECTION_TYPE.RIGHT);
 
 /* breakpoints */
 --mirai-ui-breakpoint-S: 430px;
---mirai-ui-breakpoint-M: 768px;
+--mirai-ui-breakpoint-M: 820px;
 --mirai-ui-breakpoint-content: 1280px;
 
 /* motion */
@@ -1340,7 +1383,12 @@ Theme.setDirection(DIRECTION_TYPE.RIGHT);
 --mirai-ui-border-width: 1px;
 
 /* shadow */
---mirai-ui-shadow: 0 0 var(--mirai-ui-space-XS) var(--mirai-ui-content-border);
+--mirai-ui-shadow: 0 0 var(--mirai-ui-space-S) rgba(0, 0, 0, 0.1);
+
+/* focus */
+--mirai-ui-focus-color: var(--mirai-ui-content);
+--mirai-ui-focus-shadow: 0 0 0 var(--mirai-ui-space-XXS) var(--mirai-ui-content-border);
+--mirai-ui-focus-shadow-error: 0 0 0 var(--mirai-ui-space-XXS) var(--mirai-ui-error-border);
 ```
 
 ## Hooks
@@ -1367,8 +1415,9 @@ This _hook_ can help you know what type of device your application or component
 - `isLandscape:bool` orientation is landscape
 - `isPortrait:bool` orientation is portrait
 <!-- type -->
-- `isMobile:bool` is in the mobile breakpoint (<600px)
-- `isDesktop:bool` in in the desktop breakpoint (>=600px)
+- `isMobile:bool` is in the mobile breakpoint (<=430)
+- `isTable:bool` is in the mobile breakpoint (>430px && <=820px)
+- `isDesktop:bool` in in the desktop breakpoint (>820px)
 
 Let's see a simple use of the hook:
 

package/build/components/Action/Action.js

@@ -28,7 +28,7 @@ var Action = function Action(_ref) {
     large = _ref.large,
     small = _ref.small,
     _ref$tag = _ref.tag,
-    tag = _ref$tag === void 0 ? 'action' : _ref$tag,
+    tag = _ref$tag === void 0 ? 'button' : _ref$tag,
     target = _ref.target,
     underline = _ref.underline,
     wide = _ref.wide,

package/build/components/Action/Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.js","names":["Action","bold","children","disabled","href","inline","large","small","tag","target","underline","wide","onPress","others","React","createElement","Pressable","role","event","window","open","location","className","styles","style","action","displayName","propTypes","PropTypes","bool","oneOfType","string","node","onEnter","func","onLeave"],"sources":["../../../src/components/Action/Action.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable } from '../../primitives';\nimport style from './Action.module.css';\n\nconst Action = ({\n  bold,\n  children,\n  disabled,\n  href,\n  inline,\n  large,\n  small,\n  tag = 'action',\n  target,\n  underline,\n  wide,\n  onPress,\n  ...others\n}) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled,\n      href,\n      role: others.role || 'action',\n      tag: href ? 'a' : tag,\n      onPress: (event) => {\n        onPress && onPress(event);\n        if (href && target) window.open(href, target);\n        else if (href) window.location = href;\n      },\n      className: styles(\n        style.action,\n        bold && style.bold,\n        disabled && style.disabled,\n        inline && style.inline,\n        large && style.large,\n        small && style.small,\n        underline && style.underline,\n        wide && style.wide,\n        others.className,\n      ),\n    },\n    children,\n  );\n\nAction.displayName = 'Component:Action';\n\nAction.propTypes = {\n  bold: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  href: PropTypes.string,\n  inline: PropTypes.bool,\n  large: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n  target: PropTypes.string,\n  underline: PropTypes.bool,\n  wide: PropTypes.bool,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Action };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IAAA,gBACLC,GAAG;IAAHA,GAAG,yBAAG,QAAQ;IACdC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,QAAO,QAAPA,OAAO;IACJC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,qBAAS,kCAEJH,MAAM;IACTV,QAAQ,EAARA,QAAQ;IACRC,IAAI,EAAJA,IAAI;IACJa,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,QAAQ;IAC7BT,GAAG,EAAEJ,IAAI,GAAG,GAAG,GAAGI,GAAG;IACrBI,OAAO,EAAE,iBAACM,KAAK,EAAK;MAClBN,QAAO,IAAIA,QAAO,CAACM,KAAK,CAAC;MACzB,IAAId,IAAI,IAAIK,MAAM,EAAEU,MAAM,CAACC,IAAI,CAAChB,IAAI,EAAEK,MAAM,CAAC,CAAC,KACzC,IAAIL,IAAI,EAAEe,MAAM,CAACE,QAAQ,GAAGjB,IAAI;IACvC,CAAC;IACDkB,SAAS,EAAE,IAAAC,eAAM,EACfC,qBAAK,CAACC,MAAM,EACZxB,IAAI,IAAIuB,qBAAK,CAACvB,IAAI,EAClBE,QAAQ,IAAIqB,qBAAK,CAACrB,QAAQ,EAC1BE,MAAM,IAAImB,qBAAK,CAACnB,MAAM,EACtBC,KAAK,IAAIkB,qBAAK,CAAClB,KAAK,EACpBC,KAAK,IAAIiB,qBAAK,CAACjB,KAAK,EACpBG,SAAS,IAAIc,qBAAK,CAACd,SAAS,EAC5BC,IAAI,IAAIa,qBAAK,CAACb,IAAI,EAClBE,MAAM,CAACS,SAAS;EACjB,IAEHpB,QAAQ,CACT;AAAA;AAAC;AAEJF,MAAM,CAAC0B,WAAW,GAAG,kBAAkB;AAEvC1B,MAAM,CAAC2B,SAAS,GAAG;EACjB1B,IAAI,EAAE2B,kBAAS,CAACC,IAAI;EACpB3B,QAAQ,EAAE0B,kBAAS,CAACE,SAAS,CAAC,CAACF,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACI,IAAI,CAAC,CAAC;EACjE7B,QAAQ,EAAEyB,kBAAS,CAACC,IAAI;EACxBzB,IAAI,EAAEwB,kBAAS,CAACG,MAAM;EACtB1B,MAAM,EAAEuB,kBAAS,CAACC,IAAI;EACtBvB,KAAK,EAAEsB,kBAAS,CAACC,IAAI;EACrBtB,KAAK,EAAEqB,kBAAS,CAACC,IAAI;EACrBrB,GAAG,EAAEoB,kBAAS,CAACG,MAAM;EACrBtB,MAAM,EAAEmB,kBAAS,CAACG,MAAM;EACxBrB,SAAS,EAAEkB,kBAAS,CAACC,IAAI;EACzBlB,IAAI,EAAEiB,kBAAS,CAACC,IAAI;EACpBI,OAAO,EAAEL,kBAAS,CAACM,IAAI;EACvBC,OAAO,EAAEP,kBAAS,CAACM,IAAI;EACvBtB,OAAO,EAAEgB,kBAAS,CAACM;AACrB,CAAC"}
+{"version":3,"file":"Action.js","names":["Action","bold","children","disabled","href","inline","large","small","tag","target","underline","wide","onPress","others","React","createElement","Pressable","role","event","window","open","location","className","styles","style","action","displayName","propTypes","PropTypes","bool","oneOfType","string","node","onEnter","func","onLeave"],"sources":["../../../src/components/Action/Action.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable } from '../../primitives';\nimport style from './Action.module.css';\n\nconst Action = ({\n  bold,\n  children,\n  disabled,\n  href,\n  inline,\n  large,\n  small,\n  tag = 'button',\n  target,\n  underline,\n  wide,\n  onPress,\n  ...others\n}) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled,\n      href,\n      role: others.role || 'action',\n      tag: href ? 'a' : tag,\n      onPress: (event) => {\n        onPress && onPress(event);\n        if (href && target) window.open(href, target);\n        else if (href) window.location = href;\n      },\n      className: styles(\n        style.action,\n        bold && style.bold,\n        disabled && style.disabled,\n        inline && style.inline,\n        large && style.large,\n        small && style.small,\n        underline && style.underline,\n        wide && style.wide,\n        others.className,\n      ),\n    },\n    children,\n  );\n\nAction.displayName = 'Component:Action';\n\nAction.propTypes = {\n  bold: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  href: PropTypes.string,\n  inline: PropTypes.bool,\n  large: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n  target: PropTypes.string,\n  underline: PropTypes.bool,\n  wide: PropTypes.bool,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Action };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IAAA,gBACLC,GAAG;IAAHA,GAAG,yBAAG,QAAQ;IACdC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,QAAO,QAAPA,OAAO;IACJC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,qBAAS,kCAEJH,MAAM;IACTV,QAAQ,EAARA,QAAQ;IACRC,IAAI,EAAJA,IAAI;IACJa,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,QAAQ;IAC7BT,GAAG,EAAEJ,IAAI,GAAG,GAAG,GAAGI,GAAG;IACrBI,OAAO,EAAE,iBAACM,KAAK,EAAK;MAClBN,QAAO,IAAIA,QAAO,CAACM,KAAK,CAAC;MACzB,IAAId,IAAI,IAAIK,MAAM,EAAEU,MAAM,CAACC,IAAI,CAAChB,IAAI,EAAEK,MAAM,CAAC,CAAC,KACzC,IAAIL,IAAI,EAAEe,MAAM,CAACE,QAAQ,GAAGjB,IAAI;IACvC,CAAC;IACDkB,SAAS,EAAE,IAAAC,eAAM,EACfC,qBAAK,CAACC,MAAM,EACZxB,IAAI,IAAIuB,qBAAK,CAACvB,IAAI,EAClBE,QAAQ,IAAIqB,qBAAK,CAACrB,QAAQ,EAC1BE,MAAM,IAAImB,qBAAK,CAACnB,MAAM,EACtBC,KAAK,IAAIkB,qBAAK,CAAClB,KAAK,EACpBC,KAAK,IAAIiB,qBAAK,CAACjB,KAAK,EACpBG,SAAS,IAAIc,qBAAK,CAACd,SAAS,EAC5BC,IAAI,IAAIa,qBAAK,CAACb,IAAI,EAClBE,MAAM,CAACS,SAAS;EACjB,IAEHpB,QAAQ,CACT;AAAA;AAAC;AAEJF,MAAM,CAAC0B,WAAW,GAAG,kBAAkB;AAEvC1B,MAAM,CAAC2B,SAAS,GAAG;EACjB1B,IAAI,EAAE2B,kBAAS,CAACC,IAAI;EACpB3B,QAAQ,EAAE0B,kBAAS,CAACE,SAAS,CAAC,CAACF,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACI,IAAI,CAAC,CAAC;EACjE7B,QAAQ,EAAEyB,kBAAS,CAACC,IAAI;EACxBzB,IAAI,EAAEwB,kBAAS,CAACG,MAAM;EACtB1B,MAAM,EAAEuB,kBAAS,CAACC,IAAI;EACtBvB,KAAK,EAAEsB,kBAAS,CAACC,IAAI;EACrBtB,KAAK,EAAEqB,kBAAS,CAACC,IAAI;EACrBrB,GAAG,EAAEoB,kBAAS,CAACG,MAAM;EACrBtB,MAAM,EAAEmB,kBAAS,CAACG,MAAM;EACxBrB,SAAS,EAAEkB,kBAAS,CAACC,IAAI;EACzBlB,IAAI,EAAEiB,kBAAS,CAACC,IAAI;EACpBI,OAAO,EAAEL,kBAAS,CAACM,IAAI;EACvBC,OAAO,EAAEP,kBAAS,CAACM,IAAI;EACvBtB,OAAO,EAAEgB,kBAAS,CAACM;AACrB,CAAC"}

package/build/components/Action/Action.module.css

@@ -10,10 +10,6 @@
   width: fit-content;
 }
 
-.action:not(.disabled):hover {
-  color: var(--mirai-ui-content);
-}
-
 .action.bold {
   font-family: var(--mirai-ui-font-bold);
   font-weight: var(--mirai-ui-font-bold-weight);
@@ -24,8 +20,9 @@
   color: var(--mirai-ui-action-color-disabled);
 }
 
-.action:not(.disabled):active {
-  color: var(--mirai-ui-action-color-active);
+.action:not(.disabled):focus,
+.action:not(.disabled):hover {
+  color: var(--mirai-ui-focus-color);
 }
 
 .action:not(.inline):not(.large):not(.small) {
@@ -58,5 +55,5 @@
 }
 
 .action * {
-  margin-right: calc(var(--mirai-ui-space-XS) / 2);
+  margin-right: var(--mirai-ui-space-XXS);
 }

package/build/components/Action/Action.stories.js

@@ -27,7 +27,7 @@ Story.args = {
   inline: false,
   large: false,
   small: false,
-  tag: 'action',
+  tag: 'button',
   target: '',
   underline: false,
   wide: false,

package/build/components/Action/Action.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.stories.js","names":["title","Story","props","storyName","args","children","ICON","INFO","disabled","href","icon","inline","large","small","tag","target","underline","wide","testId","style","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Action/Action.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Action } from './Action';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Action {...props} />;\n\nStory.storyName = 'Action';\n\nStory.args = {\n  children: (\n    <>\n      <Icon value={ICON.INFO} />\n      children\n    </>\n  ),\n  disabled: false,\n  href: '',\n  icon: '',\n  inline: false,\n  large: false,\n  small: false,\n  tag: 'action',\n  target: '',\n  underline: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAmD;AAAA,eAEpC;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,6BAAC,cAAM,EAAKA,KAAK,CAAI;AAAA;AAAC;AAEtDD,KAAK,CAACE,SAAS,GAAG,QAAQ;AAE1BF,KAAK,CAACG,IAAI,GAAG;EACXC,QAAQ,eACN,yEACE,6BAAC,UAAI;IAAC,KAAK,EAAEC,UAAI,CAACC;EAAK,EAAG,aAG7B;EACDC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,EAAE;EACRC,IAAI,EAAE,EAAE;EACRC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,QAAQ;EACbC,MAAM,EAAE,EAAE;EACVC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDlB,KAAK,CAACmB,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}
+{"version":3,"file":"Action.stories.js","names":["title","Story","props","storyName","args","children","ICON","INFO","disabled","href","icon","inline","large","small","tag","target","underline","wide","testId","style","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Action/Action.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Action } from './Action';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Action {...props} />;\n\nStory.storyName = 'Action';\n\nStory.args = {\n  children: (\n    <>\n      <Icon value={ICON.INFO} />\n      children\n    </>\n  ),\n  disabled: false,\n  href: '',\n  icon: '',\n  inline: false,\n  large: false,\n  small: false,\n  tag: 'button',\n  target: '',\n  underline: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAmD;AAAA,eAEpC;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,6BAAC,cAAM,EAAKA,KAAK,CAAI;AAAA;AAAC;AAEtDD,KAAK,CAACE,SAAS,GAAG,QAAQ;AAE1BF,KAAK,CAACG,IAAI,GAAG;EACXC,QAAQ,eACN,yEACE,6BAAC,UAAI;IAAC,KAAK,EAAEC,UAAI,CAACC;EAAK,EAAG,aAG7B;EACDC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,EAAE;EACRC,IAAI,EAAE,EAAE;EACRC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,QAAQ;EACbC,MAAM,EAAE,EAAE;EACVC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDlB,KAAK,CAACmB,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}