@mirai/ui 1.0.262 → 1.0.263

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
@@ -285,6 +286,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
 
@@ -692,6 +694,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
@@ -853,7 +856,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

package/build/components/InputOption/InputOption.js

@@ -11,7 +11,7 @@ var _primitives = require("../../primitives");
 var _partials = require("../InputText/partials");
 var _InputOption = require("./InputOption.constants");
 var _InputOptionModule = _interopRequireDefault(require("./InputOption.module.css"));
-var _excluded = ["checked", "disabled", "indeterminate", "label", "name", "required", "showRequired", "small", "type", "value", "onChange"];
+var _excluded = ["checked", "disabled", "error", "indeterminate", "label", "name", "required", "showRequired", "small", "type", "value", "onChange"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -19,6 +19,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var InputOption = function InputOption(_ref) {
   var checked = _ref.checked,
     disabled = _ref.disabled,
+    error = _ref.error,
     indeterminate = _ref.indeterminate,
     label = _ref.label,
     name = _ref.name,
@@ -45,6 +46,7 @@ var InputOption = function InputOption(_ref) {
   }), /*#__PURE__*/_react.default.createElement(Primitive, {
     checked: checked || type === _InputOption.CHECKBOX && indeterminate,
     disabled: disabled,
+    error: error,
     name: name,
     type: type,
     value: value
@@ -65,6 +67,7 @@ InputOption.displayName = 'Component:InputOption';
 InputOption.propTypes = {
   checked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
+  error: _propTypes.default.bool,
   indeterminate: _propTypes.default.bool,
   label: _propTypes.default.string,
   name: _propTypes.default.string.isRequired,

package/build/components/InputOption/InputOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputOption.js","names":["InputOption","checked","disabled","indeterminate","label","name","required","showRequired","small","type","CHECKBOX","value","onChange","others","Primitive","Checkbox","RADIO","Radio","Switch","handleChange","event","SWITCH","includes","role","styles","style","inputOption","className","ICON","CHECK","REMOVE","icon","undefined","displayName","propTypes","PropTypes","bool","string","isRequired","oneOf","oneOfType","func"],"sources":["../../../src/components/InputOption/InputOption.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Checkbox, Icon, ICON, Pressable, Radio, Switch } from '../../primitives';\nimport { Label } from '../InputText/partials';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\nimport style from './InputOption.module.css';\n\nconst InputOption = ({\n  checked,\n  disabled,\n  indeterminate,\n  label,\n  name,\n  required,\n  showRequired = false,\n  small,\n  type = CHECKBOX,\n  value = '',\n  onChange = () => {},\n  ...others\n}) => {\n  const Primitive = type === CHECKBOX ? Checkbox : type === RADIO ? Radio : Switch;\n\n  const handleChange = (event) => {\n    onChange([CHECKBOX, SWITCH].includes(type) ? !checked : value, event);\n  };\n\n  return (\n    <Pressable\n      {...others}\n      role={others.role || 'input-option'}\n      preventDefault={false}\n      onPress={handleChange}\n      className={styles(style.inputOption, others.className)}\n    >\n      <Primitive\n        checked={checked || (type === CHECKBOX && indeterminate)}\n        disabled={disabled}\n        name={name}\n        type={type}\n        value={value}\n      >\n        {type === CHECKBOX && (checked || indeterminate) ? (\n          <Icon value={checked ? ICON.CHECK : ICON.REMOVE} className={style.icon} />\n        ) : undefined}\n      </Primitive>\n      {label && (\n        <Label\n          action={!small}\n          small={small}\n          {...{ disabled, label, required: showRequired && required }}\n          className={style.label}\n        />\n      )}\n    </Pressable>\n  );\n};\n\nInputOption.displayName = 'Component:InputOption';\n\nInputOption.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  indeterminate: PropTypes.bool,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  required: PropTypes.bool,\n  showRequired: PropTypes.bool,\n  small: PropTypes.bool,\n  type: PropTypes.oneOf([CHECKBOX, RADIO, SWITCH]),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  onChange: PropTypes.func,\n};\n\nexport { InputOption };\n"],"mappings":"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"}
+{"version":3,"file":"InputOption.js","names":["InputOption","checked","disabled","error","indeterminate","label","name","required","showRequired","small","type","CHECKBOX","value","onChange","others","Primitive","Checkbox","RADIO","Radio","Switch","handleChange","event","SWITCH","includes","role","styles","style","inputOption","className","ICON","CHECK","REMOVE","icon","undefined","displayName","propTypes","PropTypes","bool","string","isRequired","oneOf","oneOfType","func"],"sources":["../../../src/components/InputOption/InputOption.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Checkbox, Icon, ICON, Pressable, Radio, Switch } from '../../primitives';\nimport { Label } from '../InputText/partials';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\nimport style from './InputOption.module.css';\n\nconst InputOption = ({\n  checked,\n  disabled,\n  error,\n  indeterminate,\n  label,\n  name,\n  required,\n  showRequired = false,\n  small,\n  type = CHECKBOX,\n  value = '',\n  onChange = () => {},\n  ...others\n}) => {\n  const Primitive = type === CHECKBOX ? Checkbox : type === RADIO ? Radio : Switch;\n\n  const handleChange = (event) => {\n    onChange([CHECKBOX, SWITCH].includes(type) ? !checked : value, event);\n  };\n\n  return (\n    <Pressable\n      {...others}\n      role={others.role || 'input-option'}\n      preventDefault={false}\n      onPress={handleChange}\n      className={styles(style.inputOption, others.className)}\n    >\n      <Primitive\n        checked={checked || (type === CHECKBOX && indeterminate)}\n        disabled={disabled}\n        error={error}\n        name={name}\n        type={type}\n        value={value}\n      >\n        {type === CHECKBOX && (checked || indeterminate) ? (\n          <Icon value={checked ? ICON.CHECK : ICON.REMOVE} className={style.icon} />\n        ) : undefined}\n      </Primitive>\n      {label && (\n        <Label\n          action={!small}\n          small={small}\n          {...{ disabled, label, required: showRequired && required }}\n          className={style.label}\n        />\n      )}\n    </Pressable>\n  );\n};\n\nInputOption.displayName = 'Component:InputOption';\n\nInputOption.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  indeterminate: PropTypes.bool,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  required: PropTypes.bool,\n  showRequired: PropTypes.bool,\n  small: PropTypes.bool,\n  type: PropTypes.oneOf([CHECKBOX, RADIO, SWITCH]),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  onChange: PropTypes.func,\n};\n\nexport { InputOption };\n"],"mappings":"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"}

package/build/components/InputOption/InputOption.stories.js

@@ -22,7 +22,7 @@ var _default = {
 };
 exports.default = _default;
 var Story = function Story(props) {
-  var _useState = (0, _react.useState)(true),
+  var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     checked = _useState2[0],
     setChecked = _useState2[1];
@@ -43,6 +43,7 @@ exports.Story = Story;
 Story.storyName = 'InputOption';
 Story.args = {
   disabled: false,
+  error: false,
   indeterminate: false,
   label: 'label',
   name: 'name',

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

@@ -1 +1 @@
-{"version":3,"file":"InputOption.stories.js","names":["title","Story","props","useState","checked","setChecked","handleChange","next","others","console","log","storyName","args","disabled","indeterminate","label","name","required","showRequired","small","type","value","testId","style","argTypes","options","CHECKBOX","RADIO","SWITCH","control","defaultValue"],"sources":["../../../src/components/InputOption/InputOption.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { InputOption } from './InputOption';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n  const [checked, setChecked] = useState(true);\n\n  const handleChange = (next, ...others) => {\n    setChecked(next);\n    console.log('<InputOption>::onChange', next, ...others);\n  };\n\n  return <InputOption {...props} checked={checked} onChange={handleChange} />;\n};\n\nStory.storyName = 'InputOption';\n\nStory.args = {\n  disabled: false,\n  indeterminate: false,\n  label: 'label',\n  name: 'name',\n  required: false,\n  showRequired: false,\n  small: false,\n  type: 'checkbox',\n  value: 'value',\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  type: {\n    options: [CHECKBOX, RADIO, SWITCH],\n    control: { type: 'select' },\n    defaultValue: CHECKBOX,\n  },\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAkE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnD;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA8B,IAAAC,eAAQ,EAAC,IAAI,CAAC;IAAA;IAArCC,OAAO;IAAEC,UAAU;EAE1B,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IACxCF,UAAU,CAACE,IAAI,CAAC;IAAC,kCADYC,MAAM;MAANA,MAAM;IAAA;IAEnC,YAAAC,OAAO,EAACC,GAAG,kBAAC,yBAAyB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACzD,CAAC;EAED,oBAAO,6BAAC,wBAAW,eAAKN,KAAK;IAAE,OAAO,EAAEE,OAAQ;IAAC,QAAQ,EAAEE;EAAa,GAAG;AAC7E,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,aAAa;AAE/BV,KAAK,CAACW,IAAI,GAAG;EACXC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE,KAAK;EACpBC,KAAK,EAAE,OAAO;EACdC,IAAI,EAAE,MAAM;EACZC,QAAQ,EAAE,KAAK;EACfC,YAAY,EAAE,KAAK;EACnBC,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAE,OAAO;EACd;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDtB,KAAK,CAACuB,QAAQ,GAAG;EACfJ,IAAI,EAAE;IACJK,OAAO,EAAE,CAACC,sBAAQ,EAAEC,mBAAK,EAAEC,oBAAM,CAAC;IAClCC,OAAO,EAAE;MAAET,IAAI,EAAE;IAAS,CAAC;IAC3BU,YAAY,EAAEJ;EAChB;AACF,CAAC"}
+{"version":3,"file":"InputOption.stories.js","names":["title","Story","props","useState","checked","setChecked","handleChange","next","others","console","log","storyName","args","disabled","error","indeterminate","label","name","required","showRequired","small","type","value","testId","style","argTypes","options","CHECKBOX","RADIO","SWITCH","control","defaultValue"],"sources":["../../../src/components/InputOption/InputOption.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { InputOption } from './InputOption';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n  const [checked, setChecked] = useState(false);\n\n  const handleChange = (next, ...others) => {\n    setChecked(next);\n    console.log('<InputOption>::onChange', next, ...others);\n  };\n\n  return <InputOption {...props} checked={checked} onChange={handleChange} />;\n};\n\nStory.storyName = 'InputOption';\n\nStory.args = {\n  disabled: false,\n  error: false,\n  indeterminate: false,\n  label: 'label',\n  name: 'name',\n  required: false,\n  showRequired: false,\n  small: false,\n  type: 'checkbox',\n  value: 'value',\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  type: {\n    options: [CHECKBOX, RADIO, SWITCH],\n    control: { type: 'select' },\n    defaultValue: CHECKBOX,\n  },\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAkE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnD;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA8B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAtCC,OAAO;IAAEC,UAAU;EAE1B,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IACxCF,UAAU,CAACE,IAAI,CAAC;IAAC,kCADYC,MAAM;MAANA,MAAM;IAAA;IAEnC,YAAAC,OAAO,EAACC,GAAG,kBAAC,yBAAyB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACzD,CAAC;EAED,oBAAO,6BAAC,wBAAW,eAAKN,KAAK;IAAE,OAAO,EAAEE,OAAQ;IAAC,QAAQ,EAAEE;EAAa,GAAG;AAC7E,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,aAAa;AAE/BV,KAAK,CAACW,IAAI,GAAG;EACXC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,aAAa,EAAE,KAAK;EACpBC,KAAK,EAAE,OAAO;EACdC,IAAI,EAAE,MAAM;EACZC,QAAQ,EAAE,KAAK;EACfC,YAAY,EAAE,KAAK;EACnBC,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAE,OAAO;EACd;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDvB,KAAK,CAACwB,QAAQ,GAAG;EACfJ,IAAI,EAAE;IACJK,OAAO,EAAE,CAACC,sBAAQ,EAAEC,mBAAK,EAAEC,oBAAM,CAAC;IAClCC,OAAO,EAAE;MAAET,IAAI,EAAE;IAAS,CAAC;IAC3BU,YAAY,EAAEJ;EAChB;AACF,CAAC"}

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

@@ -122,6 +122,25 @@ exports[`primitive:<InputOption> prop:disabled 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<InputOption> prop:error 1`] = `
+<DocumentFragment>
+  <div
+    class="pressable inputOption"
+  >
+    <div
+      class="checkbox"
+    >
+      <input
+        class="error input"
+        name="name"
+        type="checkbox"
+        value=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`primitive:<InputOption> prop:indeterminate && disabled 1`] = `
 <DocumentFragment>
   <div

package/build/primitives/Checkbox/Checkbox.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _Primitive = require("../Primitive");
 var _CheckboxModule = _interopRequireDefault(require("./Checkbox.module.css"));
-var _excluded = ["checked", "children", "disabled", "name", "value", "onChange"];
+var _excluded = ["checked", "children", "disabled", "error", "name", "value", "onChange"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -18,6 +18,7 @@ var Checkbox = function Checkbox(_ref) {
     checked = _ref$checked === void 0 ? false : _ref$checked,
     children = _ref.children,
     disabled = _ref.disabled,
+    error = _ref.error,
     name = _ref.name,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? '' : _ref$value,
@@ -42,7 +43,7 @@ var Checkbox = function Checkbox(_ref) {
     value: value,
     onChange: handleChange,
     testId: others.testId,
-    className: (0, _helpers.styles)(checked && _CheckboxModule.default.checked, _CheckboxModule.default.input)
+    className: (0, _helpers.styles)(checked && _CheckboxModule.default.checked, error && !checked && !disabled && _CheckboxModule.default.error, _CheckboxModule.default.input)
   }), children);
 };
 exports.Checkbox = Checkbox;
@@ -51,6 +52,7 @@ Checkbox.propTypes = {
   checked: _propTypes.default.bool,
   children: _propTypes.default.node,
   disabled: _propTypes.default.bool,
+  error: _propTypes.default.bool,
   name: _propTypes.default.string.isRequired,
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   onChange: _propTypes.default.func

package/build/primitives/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["Checkbox","checked","children","disabled","name","value","onChange","others","handleChange","event","target","role","styles","style","checkbox","className","testId","input","displayName","propTypes","PropTypes","bool","node","string","isRequired","oneOfType","func"],"sources":["../../../src/primitives/Checkbox/Checkbox.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './Checkbox.module.css';\n\nconst Checkbox = ({ checked = false, children, disabled, name, value = '', onChange = () => {}, ...others }) => {\n  const handleChange = (event) => {\n    if (disabled) return;\n\n    const {\n      target: { checked },\n    } = event;\n    onChange(checked, event);\n  };\n\n  return (\n    <Primitive\n      role={others.role || 'checkbox'}\n      className={styles(style.checkbox, others.className)}\n      style={others.style}\n    >\n      <Primitive\n        checked={checked}\n        disabled={disabled}\n        name={name}\n        tag=\"input\"\n        type=\"checkbox\"\n        value={value}\n        onChange={handleChange}\n        testId={others.testId}\n        className={styles(checked && style.checked, style.input)}\n      />\n      {children}\n    </Primitive>\n  );\n};\n\nCheckbox.displayName = 'Primitive:Checkbox';\n\nCheckbox.propTypes = {\n  checked: PropTypes.bool,\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  onChange: PropTypes.func,\n};\n\nexport { Checkbox };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA0C;AAAA;AAAA;AAAA;AAE1C,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAAkG;EAAA,wBAA5FC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,EAAE;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IAAKC,MAAM;EACvG,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAK,EAAK;IAC9B,IAAIN,QAAQ,EAAE;IAEd,IACYF,OAAO,GACfQ,KAAK,CADPC,MAAM,CAAIT,OAAO;IAEnBK,QAAQ,CAACL,OAAO,EAAEQ,KAAK,CAAC;EAC1B,CAAC;EAED,oBACE,6BAAC,oBAAS;IACR,IAAI,EAAEF,MAAM,CAACI,IAAI,IAAI,UAAW;IAChC,SAAS,EAAE,IAAAC,eAAM,EAACC,uBAAK,CAACC,QAAQ,EAAEP,MAAM,CAACQ,SAAS,CAAE;IACpD,KAAK,EAAER,MAAM,CAACM;EAAM,gBAEpB,6BAAC,oBAAS;IACR,OAAO,EAAEZ,OAAQ;IACjB,QAAQ,EAAEE,QAAS;IACnB,IAAI,EAAEC,IAAK;IACX,GAAG,EAAC,OAAO;IACX,IAAI,EAAC,UAAU;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEG,YAAa;IACvB,MAAM,EAAED,MAAM,CAACS,MAAO;IACtB,SAAS,EAAE,IAAAJ,eAAM,EAACX,OAAO,IAAIY,uBAAK,CAACZ,OAAO,EAAEY,uBAAK,CAACI,KAAK;EAAE,EACzD,EACDf,QAAQ,CACC;AAEhB,CAAC;AAAC;AAEFF,QAAQ,CAACkB,WAAW,GAAG,oBAAoB;AAE3ClB,QAAQ,CAACmB,SAAS,GAAG;EACnBlB,OAAO,EAAEmB,kBAAS,CAACC,IAAI;EACvBnB,QAAQ,EAAEkB,kBAAS,CAACE,IAAI;EACxBnB,QAAQ,EAAEiB,kBAAS,CAACC,IAAI;EACxBjB,IAAI,EAAEgB,kBAAS,CAACG,MAAM,CAACC,UAAU;EACjCnB,KAAK,EAAEe,kBAAS,CAACK,SAAS,CAAC,CAACL,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACC,IAAI,CAAC,CAAC;EAC9Df,QAAQ,EAAEc,kBAAS,CAACM;AACtB,CAAC"}
+{"version":3,"file":"Checkbox.js","names":["Checkbox","checked","children","disabled","error","name","value","onChange","others","handleChange","event","target","role","styles","style","checkbox","className","testId","input","displayName","propTypes","PropTypes","bool","node","string","isRequired","oneOfType","func"],"sources":["../../../src/primitives/Checkbox/Checkbox.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './Checkbox.module.css';\n\nconst Checkbox = ({ checked = false, children, disabled, error, name, value = '', onChange = () => {}, ...others }) => {\n  const handleChange = (event) => {\n    if (disabled) return;\n\n    const {\n      target: { checked },\n    } = event;\n    onChange(checked, event);\n  };\n\n  return (\n    <Primitive\n      role={others.role || 'checkbox'}\n      className={styles(style.checkbox, others.className)}\n      style={others.style}\n    >\n      <Primitive\n        checked={checked}\n        disabled={disabled}\n        name={name}\n        tag=\"input\"\n        type=\"checkbox\"\n        value={value}\n        onChange={handleChange}\n        testId={others.testId}\n        className={styles(checked && style.checked, error && !checked && !disabled && style.error, style.input)}\n      />\n      {children}\n    </Primitive>\n  );\n};\n\nCheckbox.displayName = 'Primitive:Checkbox';\n\nCheckbox.propTypes = {\n  checked: PropTypes.bool,\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  onChange: PropTypes.func,\n};\n\nexport { Checkbox };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAA0C;AAAA;AAAA;AAAA;AAE1C,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,OAAyG;EAAA,wBAAnGC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,KAAK,QAALA,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAA,kBAAEC,KAAK;IAALA,KAAK,2BAAG,EAAE;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IAAKC,MAAM;EAC9G,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAK,EAAK;IAC9B,IAAIP,QAAQ,EAAE;IAEd,IACYF,OAAO,GACfS,KAAK,CADPC,MAAM,CAAIV,OAAO;IAEnBM,QAAQ,CAACN,OAAO,EAAES,KAAK,CAAC;EAC1B,CAAC;EAED,oBACE,6BAAC,oBAAS;IACR,IAAI,EAAEF,MAAM,CAACI,IAAI,IAAI,UAAW;IAChC,SAAS,EAAE,IAAAC,eAAM,EAACC,uBAAK,CAACC,QAAQ,EAAEP,MAAM,CAACQ,SAAS,CAAE;IACpD,KAAK,EAAER,MAAM,CAACM;EAAM,gBAEpB,6BAAC,oBAAS;IACR,OAAO,EAAEb,OAAQ;IACjB,QAAQ,EAAEE,QAAS;IACnB,IAAI,EAAEE,IAAK;IACX,GAAG,EAAC,OAAO;IACX,IAAI,EAAC,UAAU;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEG,YAAa;IACvB,MAAM,EAAED,MAAM,CAACS,MAAO;IACtB,SAAS,EAAE,IAAAJ,eAAM,EAACZ,OAAO,IAAIa,uBAAK,CAACb,OAAO,EAAEG,KAAK,IAAI,CAACH,OAAO,IAAI,CAACE,QAAQ,IAAIW,uBAAK,CAACV,KAAK,EAAEU,uBAAK,CAACI,KAAK;EAAE,EACxG,EACDhB,QAAQ,CACC;AAEhB,CAAC;AAAC;AAEFF,QAAQ,CAACmB,WAAW,GAAG,oBAAoB;AAE3CnB,QAAQ,CAACoB,SAAS,GAAG;EACnBnB,OAAO,EAAEoB,kBAAS,CAACC,IAAI;EACvBpB,QAAQ,EAAEmB,kBAAS,CAACE,IAAI;EACxBpB,QAAQ,EAAEkB,kBAAS,CAACC,IAAI;EACxBlB,KAAK,EAAEiB,kBAAS,CAACC,IAAI;EACrBjB,IAAI,EAAEgB,kBAAS,CAACG,MAAM,CAACC,UAAU;EACjCnB,KAAK,EAAEe,kBAAS,CAACK,SAAS,CAAC,CAACL,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACC,IAAI,CAAC,CAAC;EAC9Df,QAAQ,EAAEc,kBAAS,CAACM;AACtB,CAAC"}

package/build/primitives/Checkbox/Checkbox.module.css

@@ -36,8 +36,13 @@
   border-color: var(--mirai-ui-checkbox-checked);
 }
 
+.checkbox input:not(:disabled).error {
+  border-color: var(--mirai-ui-error);
+  border-width: calc(var(--mirai-ui-border-width) * 2);
+}
+
 /* -- reset defaults -------------------------------------------------------- */
 .checkbox input.input {
   margin-right: 0;
   top: 0;
-}
+}

package/build/primitives/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap

@@ -80,6 +80,37 @@ exports[`primitive:<Checkbox> prop:disabled 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Checkbox> prop:error && disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="checkbox"
+  >
+    <input
+      class="input"
+      disabled=""
+      name="name"
+      type="checkbox"
+      value=""
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Checkbox> prop:error 1`] = `
+<DocumentFragment>
+  <div
+    class="checkbox"
+  >
+    <input
+      class="error input"
+      name="name"
+      type="checkbox"
+      value=""
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Checkbox> prop:value 1`] = `
 <DocumentFragment>
   <div

package/build/primitives/Switch/Switch.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _Primitive = require("../Primitive");
 var _SwitchModule = _interopRequireDefault(require("./Switch.module.css"));
-var _excluded = ["checked", "disabled", "name", "onChange"];
+var _excluded = ["checked", "disabled", "error", "name", "onChange"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -18,6 +18,7 @@ var Switch = function Switch(_ref) {
   var _ref$checked = _ref.checked,
     checked = _ref$checked === void 0 ? false : _ref$checked,
     disabled = _ref.disabled,
+    error = _ref.error,
     name = _ref.name,
     onChange = _ref.onChange,
     others = _objectWithoutProperties(_ref, _excluded);
@@ -36,7 +37,7 @@ var Switch = function Switch(_ref) {
     type: "checkbox",
     onChange: function onChange() {}
   }), /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
-    className: _SwitchModule.default.area
+    className: (0, _helpers.styles)(_SwitchModule.default.area, error && !checked && !disabled && _SwitchModule.default.error)
   }, /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
     tag: "span",
     className: _SwitchModule.default.toggle
@@ -47,6 +48,7 @@ Switch.displayName = 'Primitive:Switch';
 Switch.propTypes = {
   checked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
+  error: _propTypes.default.bool,
   name: _propTypes.default.string.isRequired,
   onChange: _propTypes.default.func
 };

package/build/primitives/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["Switch","checked","disabled","name","onChange","others","handleChange","event","role","undefined","styles","style","switch","className","area","toggle","displayName","propTypes","PropTypes","bool","string","isRequired","func"],"sources":["../../../src/primitives/Switch/Switch.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './Switch.module.css';\n\nconst Switch = ({ checked = false, disabled, name, onChange, ...others }) => {\n  const handleChange = (event) => {\n    onChange && onChange(!checked, event);\n  };\n\n  return (\n    <Primitive\n      {...others}\n      role={others.role || 'switch'}\n      onClick={!disabled ? handleChange : undefined}\n      className={styles(style.switch, others.className)}\n    >\n      <Primitive checked={checked} disabled={disabled} name={name} tag=\"input\" type=\"checkbox\" onChange={() => {}} />\n      <Primitive className={style.area}>\n        <Primitive tag=\"span\" className={style.toggle} />\n      </Primitive>\n    </Primitive>\n  );\n};\n\nSwitch.displayName = 'Primitive:Switch';\n\nSwitch.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n};\n\nexport { Switch };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,MAAM,GAAG,SAATA,MAAM,OAAiE;EAAA,wBAA3DC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,MAAM;EACpE,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAK,EAAK;IAC9BH,QAAQ,IAAIA,QAAQ,CAAC,CAACH,OAAO,EAAEM,KAAK,CAAC;EACvC,CAAC;EAED,oBACE,6BAAC,oBAAS,eACJF,MAAM;IACV,IAAI,EAAEA,MAAM,CAACG,IAAI,IAAI,QAAS;IAC9B,OAAO,EAAE,CAACN,QAAQ,GAAGI,YAAY,GAAGG,SAAU;IAC9C,SAAS,EAAE,IAAAC,eAAM,EAACC,qBAAK,CAACC,MAAM,EAAEP,MAAM,CAACQ,SAAS;EAAE,iBAElD,6BAAC,oBAAS;IAAC,OAAO,EAAEZ,OAAQ;IAAC,QAAQ,EAAEC,QAAS;IAAC,IAAI,EAAEC,IAAK;IAAC,GAAG,EAAC,OAAO;IAAC,IAAI,EAAC,UAAU;IAAC,QAAQ,EAAE,oBAAM,CAAC;EAAE,EAAG,eAC/G,6BAAC,oBAAS;IAAC,SAAS,EAAEQ,qBAAK,CAACG;EAAK,gBAC/B,6BAAC,oBAAS;IAAC,GAAG,EAAC,MAAM;IAAC,SAAS,EAAEH,qBAAK,CAACI;EAAO,EAAG,CACvC,CACF;AAEhB,CAAC;AAAC;AAEFf,MAAM,CAACgB,WAAW,GAAG,kBAAkB;AAEvChB,MAAM,CAACiB,SAAS,GAAG;EACjBhB,OAAO,EAAEiB,kBAAS,CAACC,IAAI;EACvBjB,QAAQ,EAAEgB,kBAAS,CAACC,IAAI;EACxBhB,IAAI,EAAEe,kBAAS,CAACE,MAAM,CAACC,UAAU;EACjCjB,QAAQ,EAAEc,kBAAS,CAACI;AACtB,CAAC"}
+{"version":3,"file":"Switch.js","names":["Switch","checked","disabled","error","name","onChange","others","handleChange","event","role","undefined","styles","style","switch","className","area","toggle","displayName","propTypes","PropTypes","bool","string","isRequired","func"],"sources":["../../../src/primitives/Switch/Switch.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './Switch.module.css';\n\nconst Switch = ({ checked = false, disabled, error, name, onChange, ...others }) => {\n  const handleChange = (event) => {\n    onChange && onChange(!checked, event);\n  };\n\n  return (\n    <Primitive\n      {...others}\n      role={others.role || 'switch'}\n      onClick={!disabled ? handleChange : undefined}\n      className={styles(style.switch, others.className)}\n    >\n      <Primitive checked={checked} disabled={disabled} name={name} tag=\"input\" type=\"checkbox\" onChange={() => {}} />\n      <Primitive className={styles(style.area, error && !checked && !disabled && style.error)}>\n        <Primitive tag=\"span\" className={style.toggle} />\n      </Primitive>\n    </Primitive>\n  );\n};\n\nSwitch.displayName = 'Primitive:Switch';\n\nSwitch.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n};\n\nexport { Switch };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,MAAM,GAAG,SAATA,MAAM,OAAwE;EAAA,wBAAlEC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,KAAK,QAALA,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,MAAM;EAC3E,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAK,EAAK;IAC9BH,QAAQ,IAAIA,QAAQ,CAAC,CAACJ,OAAO,EAAEO,KAAK,CAAC;EACvC,CAAC;EAED,oBACE,6BAAC,oBAAS,eACJF,MAAM;IACV,IAAI,EAAEA,MAAM,CAACG,IAAI,IAAI,QAAS;IAC9B,OAAO,EAAE,CAACP,QAAQ,GAAGK,YAAY,GAAGG,SAAU;IAC9C,SAAS,EAAE,IAAAC,eAAM,EAACC,qBAAK,CAACC,MAAM,EAAEP,MAAM,CAACQ,SAAS;EAAE,iBAElD,6BAAC,oBAAS;IAAC,OAAO,EAAEb,OAAQ;IAAC,QAAQ,EAAEC,QAAS;IAAC,IAAI,EAAEE,IAAK;IAAC,GAAG,EAAC,OAAO;IAAC,IAAI,EAAC,UAAU;IAAC,QAAQ,EAAE,oBAAM,CAAC;EAAE,EAAG,eAC/G,6BAAC,oBAAS;IAAC,SAAS,EAAE,IAAAO,eAAM,EAACC,qBAAK,CAACG,IAAI,EAAEZ,KAAK,IAAI,CAACF,OAAO,IAAI,CAACC,QAAQ,IAAIU,qBAAK,CAACT,KAAK;EAAE,gBACtF,6BAAC,oBAAS;IAAC,GAAG,EAAC,MAAM;IAAC,SAAS,EAAES,qBAAK,CAACI;EAAO,EAAG,CACvC,CACF;AAEhB,CAAC;AAAC;AAEFhB,MAAM,CAACiB,WAAW,GAAG,kBAAkB;AAEvCjB,MAAM,CAACkB,SAAS,GAAG;EACjBjB,OAAO,EAAEkB,kBAAS,CAACC,IAAI;EACvBlB,QAAQ,EAAEiB,kBAAS,CAACC,IAAI;EACxBjB,KAAK,EAAEgB,kBAAS,CAACC,IAAI;EACrBhB,IAAI,EAAEe,kBAAS,CAACE,MAAM,CAACC,UAAU;EACjCjB,QAAQ,EAAEc,kBAAS,CAACI;AACtB,CAAC"}

package/build/primitives/Switch/Switch.module.css

@@ -30,6 +30,10 @@
   width: calc(var(--mirai-ui-switch-size) * 2);
 }
 
+.switch .area.error {
+  background-color: var(--mirai-ui-error);
+}
+
 .switch .toggle {
   background-color: var(--mirai-ui-switch-base);
   border-radius: calc(var(--mirai-ui-switch-border-radius) - var(--mirai-ui-switch-border-size));

package/build/primitives/Switch/Switch.stories.js

@@ -43,6 +43,7 @@ Story.storyName = 'Switch';
 Story.args = {
   checked: false,
   disabled: false,
+  error: false,
   name: 'Switch',
   // inherited properties
   testId: 'test-story',

package/build/primitives/Switch/Switch.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.stories.js","names":["title","Story","props","useState","checked","setChecked","handleChange","next","others","console","log","storyName","args","disabled","name","testId","style","argTypes"],"sources":["../../../src/primitives/Switch/Switch.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Switch } from './Switch';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => {\n  const [checked, setChecked] = useState(false);\n\n  const handleChange = (next, ...others) => {\n    console.log('<Switch>::onChange', next, ...others);\n    setChecked(!checked);\n  };\n\n  return <Switch {...props} checked={checked} onChange={handleChange} />;\n};\n\nStory.storyName = 'Switch';\n\nStory.args = {\n  checked: false,\n  disabled: false,\n  name: 'Switch',\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA8B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAtCC,OAAO;IAAEC,UAAU;EAE1B,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IAAA,kCAAXC,MAAM;MAANA,MAAM;IAAA;IACnC,YAAAC,OAAO,EAACC,GAAG,kBAAC,oBAAoB,EAAEH,IAAI,SAAKC,MAAM,EAAC;IAClDH,UAAU,CAAC,CAACD,OAAO,CAAC;EACtB,CAAC;EAED,oBAAO,6BAAC,cAAM,eAAKF,KAAK;IAAE,OAAO,EAAEE,OAAQ;IAAC,QAAQ,EAAEE;EAAa,GAAG;AACxE,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,QAAQ;AAE1BV,KAAK,CAACW,IAAI,GAAG;EACXR,OAAO,EAAE,KAAK;EACdS,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,QAAQ;EACd;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDf,KAAK,CAACgB,QAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"Switch.stories.js","names":["title","Story","props","useState","checked","setChecked","handleChange","next","others","console","log","storyName","args","disabled","error","name","testId","style","argTypes"],"sources":["../../../src/primitives/Switch/Switch.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Switch } from './Switch';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => {\n  const [checked, setChecked] = useState(false);\n\n  const handleChange = (next, ...others) => {\n    console.log('<Switch>::onChange', next, ...others);\n    setChecked(!checked);\n  };\n\n  return <Switch {...props} checked={checked} onChange={handleChange} />;\n};\n\nStory.storyName = 'Switch';\n\nStory.args = {\n  checked: false,\n  disabled: false,\n  error: false,\n  name: 'Switch',\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA8B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAtCC,OAAO;IAAEC,UAAU;EAE1B,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IAAA,kCAAXC,MAAM;MAANA,MAAM;IAAA;IACnC,YAAAC,OAAO,EAACC,GAAG,kBAAC,oBAAoB,EAAEH,IAAI,SAAKC,MAAM,EAAC;IAClDH,UAAU,CAAC,CAACD,OAAO,CAAC;EACtB,CAAC;EAED,oBAAO,6BAAC,cAAM,eAAKF,KAAK;IAAE,OAAO,EAAEE,OAAQ;IAAC,QAAQ,EAAEE;EAAa,GAAG;AACxE,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,QAAQ;AAE1BV,KAAK,CAACW,IAAI,GAAG;EACXR,OAAO,EAAE,KAAK;EACdS,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,IAAI,EAAE,QAAQ;EACd;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDhB,KAAK,CAACiB,QAAQ,GAAG,CAAC,CAAC"}

package/build/primitives/Switch/__tests__/__snapshots__/Switch.test.js.snap

@@ -20,6 +20,28 @@ exports[`primitive:<Switch> inherit:className 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Switch> prop:checked && disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="switch"
+  >
+    <input
+      checked=""
+      disabled=""
+      name="name"
+      type="checkbox"
+    />
+    <div
+      class="area"
+    >
+      <span
+        class="toggle"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Switch> prop:checked 1`] = `
 <DocumentFragment>
   <div
@@ -62,6 +84,47 @@ exports[`primitive:<Switch> prop:disabled 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Switch> prop:error && disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="switch"
+  >
+    <input
+      disabled=""
+      name="name"
+      type="checkbox"
+    />
+    <div
+      class="area"
+    >
+      <span
+        class="toggle"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Switch> prop:error 1`] = `
+<DocumentFragment>
+  <div
+    class="switch"
+  >
+    <input
+      name="name"
+      type="checkbox"
+    />
+    <div
+      class="area error"
+    >
+      <span
+        class="toggle"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Switch> render 1`] = `
 <DocumentFragment>
   <div

package/package.json

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