@onesy/ui-react 1.0.197 → 1.0.199

package/Button/Button.js

@@ -16,7 +16,7 @@ var _RoundProgress = _interopRequireDefault(require("../RoundProgress"));
 var _Type = _interopRequireDefault(require("../Type"));
 var _utils2 = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ref", "tonal", "color", "version", "name", "size", "fullWidth", "fontSize", "selected", "iconSelected", "start", "startSelected", "end", "endSelected", "elevation", "backgroundOpacity", "align", "loading", "loadingLabel", "loadingIcon", "loadingIconPosition", "fab", "chip", "icon", "focus", "value", "noIconRootFontSize", "firstLevelChildren", "noFontSize", "disabled", "onFocus", "onBlur", "IconWrapperComponent", "InteractionProps", "IconWrapperProps", "LabelProps", "IconProps", "Component", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "version", "name", "size", "fullWidth", "fontSize", "selected", "iconSelected", "start", "startSelected", "end", "endSelected", "elevation", "backgroundOpacity", "align", "loading", "loadingLabel", "loadingIcon", "loadingIconPosition", "fab", "chip", "icon", "focus", "value", "noIconRootFontSize", "firstLevelChildren", "noFontSize", "readOnly", "disabled", "onFocus", "onBlur", "IconWrapperComponent", "InteractionProps", "IconWrapperProps", "LabelProps", "IconProps", "Component", "className", "style", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -279,6 +279,7 @@ const Button = props_ => {
       noIconRootFontSize,
       firstLevelChildren,
       noFontSize,
+      readOnly,
       disabled: disabled_,
       onFocus: onFocus_,
       onBlur: onBlur_,
@@ -430,7 +431,7 @@ const Button = props_ => {
       }
       refs.root.current = item_2;
     },
-    tabIndex: !disabled ? 0 : -1,
+    tabIndex: !(readOnly || disabled) ? 0 : -1,
     type: "button",
     role: "button",
     color: color,
@@ -445,7 +446,7 @@ const Button = props_ => {
     onFocus: onFocus,
     onBlur: onBlur,
     Component: Component,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && [`onesy-Button-root`, `onesy-Button-version-${version}`, `onesy-Button-size-${size}`, fullWidth && `onesy-Button-full-width`, start && `onesy-Button-start`, end && `onesy-Button-end`, selected && `onesy-Button-selected`, loading && `onesy-Button-loading`, focus && `onesy-Button-focus`, disabled && `onesy-Button-disabled`], className, classes.root, classes[`size_${size}`], classes[`version_${version}`], classes[`color_${color}`], elevation && !disabled && ['filled', 'tonal'].includes(version) && classes.elevation, start && classes.start, end && classes.end, fullWidth && classes.fullWidth, icon && [classes.icon, classes[`icon_size_${size}`]], fab && [classes.fab, classes[`fab_size_${size}`]], chip && [classes.chip, classes[`chip_size_${size}`]], disabled && [classes.disabled, classes[`disabled_version_${version}`]]]),
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Button', theme) && [`onesy-Button-root`, `onesy-Button-version-${version}`, `onesy-Button-size-${size}`, fullWidth && `onesy-Button-full-width`, start && `onesy-Button-start`, end && `onesy-Button-end`, selected && `onesy-Button-selected`, loading && `onesy-Button-loading`, focus && `onesy-Button-focus`, readOnly && `onesy-Button-readOnly`, disabled && `onesy-Button-disabled`], className, classes.root, classes[`size_${size}`], classes[`version_${version}`], classes[`color_${color}`], elevation && !disabled && ['filled', 'tonal'].includes(version) && classes.elevation, start && classes.start, end && classes.end, fullWidth && classes.fullWidth, icon && [classes.icon, classes[`icon_size_${size}`]], fab && [classes.fab, classes[`fab_size_${size}`]], chip && [classes.chip, classes[`chip_size_${size}`]], disabled && [classes.disabled, classes[`disabled_version_${version}`]]]),
     style: _objectSpread(_objectSpread({}, styles.root), style)
   }, other), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Interaction, _objectSpread({

package/CardButton/CardButton.js

@@ -13,7 +13,7 @@ var _styleReact = require("@onesy/style-react");
 var _Interaction = _interopRequireDefault(require("../Interaction"));
 var _utils2 = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["focus", "selected", "href", "disabled", "onFocus", "onBlur", "InteractionProps", "Component", "className", "children"];
+const _excluded = ["focus", "selected", "href", "readOnly", "disabled", "onFocus", "onBlur", "InteractionProps", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -33,6 +33,7 @@ const CardButton = props_ => {
       focus: focus_,
       selected,
       href,
+      readOnly,
       disabled,
       onFocus: onFocus_,
       onBlur: onBlur_,
@@ -60,12 +61,12 @@ const CardButton = props_ => {
   };
   const Component = Component_;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({
-    tabIndex: !disabled ? 0 : -1,
+    tabIndex: !(readOnly || disabled) ? 0 : -1,
     Component: Component,
     onFocus: onFocus,
     onBlur: onBlur,
     href: href,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CardButton', theme) && [`onesy-CardButton-root`, focus && `onesy-CardButton-focus`, disabled && `onesy-CardButton-disabled`], className, classes.root])
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('CardButton', theme) && [`onesy-CardButton-root`, focus && `onesy-CardButton-focus`, readOnly && `onesy-CardButton-readOnly`, disabled && `onesy-CardButton-disabled`], className, classes.root])
   }, other), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Interaction, _objectSpread({
       border: false,

package/Checkbox/Checkbox.js

@@ -17,7 +17,7 @@ var _utils2 = require("../utils");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["noFontSizeDownScale", "Component", "className", "style", "children"],
-  _excluded2 = ["tonal", "color", "version", "size", "colorIndeterminate", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "indeterminate", "disabled", "inputRef", "Component", "className", "children"];
+  _excluded2 = ["tonal", "color", "version", "size", "colorIndeterminate", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "indeterminate", "readOnly", "disabled", "inputRef", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const IconMaterialIndeterminateCheckBox = props => {
@@ -310,6 +310,7 @@ const Checkbox = props_ => {
       checked: checked_,
       onChange,
       indeterminate: indeterminate_,
+      readOnly,
       disabled,
       inputRef,
       Component = 'span',
@@ -398,7 +399,7 @@ const Checkbox = props_ => {
   if (!value && tonal) colorValue = colorUnchecked;
   if (indeterminate) colorValue = colorIndeterminate;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(IconButton, _objectSpread(_objectSpread({
-    tabIndex: !disabled ? 0 : -1,
+    tabIndex: !(readOnly || disabled) ? 0 : -1,
     color: colorValue,
     tonal: tonal,
     version: version,
@@ -423,7 +424,7 @@ const Checkbox = props_ => {
     "aria-disabled": disabled,
     disabled: disabled,
     Component: Component,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-root', `onesy-Checkbox-version-${version}`, `onesy-Checkbox-size-${size}`, value && `onesy-Checkbox-checked`, disabled && `onesy-Checkbox-disabled`], className, classes.root, disabled && classes.disabled])
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-root', `onesy-Checkbox-version-${version}`, `onesy-Checkbox-size-${size}`, value && `onesy-Checkbox-checked`, readOnly && `onesy-Checkbox-readOnly`, disabled && `onesy-Checkbox-disabled`], className, classes.root, disabled && classes.disabled])
   }, other), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconItem, {
       size: size,

package/NavigationItem/NavigationItem.js

@@ -16,7 +16,7 @@ var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _Transition = _interopRequireDefault(require("../Transition"));
 var _utils2 = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ref", "tonal", "color", "version", "value", "name", "nameTooltip", "vertical", "icon", "iconSelected", "selected", "disabled", "IconWrapperComponent", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "onMouseLeave", "onTouchStart", "TooltipProps", "LabelProps", "IconWrapperProps", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "version", "value", "name", "nameTooltip", "vertical", "icon", "iconSelected", "selected", "readOnly", "disabled", "IconWrapperComponent", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "onMouseLeave", "onTouchStart", "TooltipProps", "LabelProps", "IconWrapperProps", "className", "style", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -129,6 +129,7 @@ const NavigationItem = props_ => {
       icon,
       iconSelected,
       selected,
+      readOnly,
       disabled,
       IconWrapperComponent = 'span',
       onFocus: onFocus_,
@@ -240,7 +241,7 @@ const NavigationItem = props_ => {
     focus: false
   }, TooltipProps), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({
-      tabIndex: !disabled ? 0 : undefined,
+      tabIndex: !(readOnly || disabled) ? 0 : undefined,
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: onKeyDown,
@@ -248,7 +249,7 @@ const NavigationItem = props_ => {
       onMouseDown: onMouseDown,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('NavigationItem', theme) && ['onesy-NavigationItem-root', selected && 'onesy-NavigationItem-selected', hover && `onesy-NavigationItem-hover`, mouseDown && `onesy-NavigationItem-mouse-down`, focus && `onesy-NavigationItem-focus`, disabled && `onesy-NavigationItem-disabled`], className, classes.root, vertical && classes.vertical, disabled && classes.disabled]),
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('NavigationItem', theme) && ['onesy-NavigationItem-root', selected && 'onesy-NavigationItem-selected', hover && `onesy-NavigationItem-hover`, mouseDown && `onesy-NavigationItem-mouse-down`, focus && `onesy-NavigationItem-focus`, readOnly && `onesy-NavigationItem-readOnly`, disabled && `onesy-NavigationItem-disabled`], className, classes.root, vertical && classes.vertical, disabled && classes.disabled]),
       style: _objectSpread({}, style)
     }, other), {}, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {

package/Radio/Radio.js

@@ -15,7 +15,7 @@ var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _utils2 = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["size", "Component", "className", "style", "children"],
-  _excluded2 = ["tonal", "color", "version", "size", "render", "inputRef", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "disabled", "Component", "className", "children"];
+  _excluded2 = ["tonal", "color", "version", "size", "render", "inputRef", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "readOnly", "disabled", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -181,6 +181,7 @@ const Radio = props_ => {
       value: value_,
       checked: checked_,
       onChange,
+      readOnly,
       disabled,
       Component = 'span',
       className,
@@ -235,7 +236,7 @@ const Radio = props_ => {
   let colorValue = color;
   if (!value) colorValue = colorUnchecked;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
-    tabIndex: !disabled ? 0 : -1,
+    tabIndex: !(readOnly || disabled) ? 0 : -1,
     tonal: tonal,
     color: colorValue,
     version: version,
@@ -258,7 +259,7 @@ const Radio = props_ => {
     "aria-disabled": disabled,
     disabled: disabled,
     Component: Component,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Radio', theme) && ['onesy-Radio-root', `onesy-Radio-version-${version}`, `onesy-Radio-size-${size}`, value && `onesy-Radio-checked`, disabled && `onesy-Radio-disabled`], className, classes.root, disabled && classes.disabled])
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Radio', theme) && ['onesy-Radio-root', `onesy-Radio-version-${version}`, `onesy-Radio-size-${size}`, value && `onesy-Radio-checked`, readOnly && `onesy-Radio-readOnly`, disabled && `onesy-Radio-disabled`], className, classes.root, disabled && classes.disabled])
   }, other), {}, {
     children: (0, _utils.is)('function', render) ? render(value, _objectSpread(_objectSpread(_objectSpread({}, props), other), {}, {
       tonal,

package/Tab/Tab.js

@@ -18,7 +18,7 @@ var _Line = _interopRequireDefault(require("../Line"));
 var _Interaction = _interopRequireDefault(require("../Interaction"));
 var _utils2 = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["tonal", "color", "version", "size", "value", "onChange", "active", "index", "name", "label", "icon", "iconPosition", "activateOnFocus", "tooltip", "disabled", "onBlur", "onFocus", "LineProps", "TooltipProps", "Component", "className", "children"];
+const _excluded = ["tonal", "color", "version", "size", "value", "onChange", "active", "index", "name", "label", "icon", "iconPosition", "activateOnFocus", "tooltip", "readOnly", "disabled", "onBlur", "onFocus", "LineProps", "TooltipProps", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -105,6 +105,7 @@ const Tab = props_ => {
       iconPosition: t4,
       activateOnFocus,
       tooltip,
+      readOnly,
       disabled,
       onBlur: onBlur_,
       onFocus: onFocus_,
@@ -162,9 +163,9 @@ const Tab = props_ => {
   const wrapperProps = hasTooltip ? _objectSpread({
     name: tooltip
   }, TooltipProps) : undefined;
-  const t7 = !disabled ? 0 : -1;
+  const t7 = !(readOnly || disabled) ? 0 : -1;
   const t8 = "tab";
-  const t9 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Tab", theme) && ["onesy-Tab-root", `onesy-Tab-version-${version}`, `onesy-Tab-size-${size}`, active && "onesy-Tab-active", disabled && "onesy-Tab-disabled"], className, classes.root, classes[`size_${size}`], active && classes.active, disabled && classes.disabled]);
+  const t9 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Tab", theme) && ["onesy-Tab-root", `onesy-Tab-version-${version}`, `onesy-Tab-size-${size}`, active && "onesy-Tab-active", readOnly && "onesy-Tab-readOnly", disabled && "onesy-Tab-disabled"], className, classes.root, classes[`size_${size}`], active && classes.active, disabled && classes.disabled]);
   let t10;
   if ($[0] !== Interaction || $[1] !== focus) {
     t10 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Interaction, {

package/esm/Button/Button.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["ref", "tonal", "color", "version", "name", "size", "fullWidth", "fontSize", "selected", "iconSelected", "start", "startSelected", "end", "endSelected", "elevation", "backgroundOpacity", "align", "loading", "loadingLabel", "loadingIcon", "loadingIconPosition", "fab", "chip", "icon", "focus", "value", "noIconRootFontSize", "firstLevelChildren", "noFontSize", "disabled", "onFocus", "onBlur", "IconWrapperComponent", "InteractionProps", "IconWrapperProps", "LabelProps", "IconProps", "Component", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "version", "name", "size", "fullWidth", "fontSize", "selected", "iconSelected", "start", "startSelected", "end", "endSelected", "elevation", "backgroundOpacity", "align", "loading", "loadingLabel", "loadingIcon", "loadingIconPosition", "fab", "chip", "icon", "focus", "value", "noIconRootFontSize", "firstLevelChildren", "noFontSize", "readOnly", "disabled", "onFocus", "onBlur", "IconWrapperComponent", "InteractionProps", "IconWrapperProps", "LabelProps", "IconProps", "Component", "className", "style", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -271,6 +271,7 @@ const Button = props_ => {
       noIconRootFontSize,
       firstLevelChildren,
       noFontSize,
+      readOnly,
       disabled: disabled_,
       onFocus: onFocus_,
       onBlur: onBlur_,
@@ -422,7 +423,7 @@ const Button = props_ => {
       }
       refs.root.current = item_2;
     },
-    tabIndex: !disabled ? 0 : -1,
+    tabIndex: !(readOnly || disabled) ? 0 : -1,
     type: "button",
     role: "button",
     color: color,
@@ -437,7 +438,7 @@ const Button = props_ => {
     onFocus: onFocus,
     onBlur: onBlur,
     Component: Component,
-    className: classNames([staticClassName('Button', theme) && [`onesy-Button-root`, `onesy-Button-version-${version}`, `onesy-Button-size-${size}`, fullWidth && `onesy-Button-full-width`, start && `onesy-Button-start`, end && `onesy-Button-end`, selected && `onesy-Button-selected`, loading && `onesy-Button-loading`, focus && `onesy-Button-focus`, disabled && `onesy-Button-disabled`], className, classes.root, classes[`size_${size}`], classes[`version_${version}`], classes[`color_${color}`], elevation && !disabled && ['filled', 'tonal'].includes(version) && classes.elevation, start && classes.start, end && classes.end, fullWidth && classes.fullWidth, icon && [classes.icon, classes[`icon_size_${size}`]], fab && [classes.fab, classes[`fab_size_${size}`]], chip && [classes.chip, classes[`chip_size_${size}`]], disabled && [classes.disabled, classes[`disabled_version_${version}`]]]),
+    className: classNames([staticClassName('Button', theme) && [`onesy-Button-root`, `onesy-Button-version-${version}`, `onesy-Button-size-${size}`, fullWidth && `onesy-Button-full-width`, start && `onesy-Button-start`, end && `onesy-Button-end`, selected && `onesy-Button-selected`, loading && `onesy-Button-loading`, focus && `onesy-Button-focus`, readOnly && `onesy-Button-readOnly`, disabled && `onesy-Button-disabled`], className, classes.root, classes[`size_${size}`], classes[`version_${version}`], classes[`color_${color}`], elevation && !disabled && ['filled', 'tonal'].includes(version) && classes.elevation, start && classes.start, end && classes.end, fullWidth && classes.fullWidth, icon && [classes.icon, classes[`icon_size_${size}`]], fab && [classes.fab, classes[`fab_size_${size}`]], chip && [classes.chip, classes[`chip_size_${size}`]], disabled && [classes.disabled, classes[`disabled_version_${version}`]]]),
     style: _objectSpread(_objectSpread({}, styles.root), style)
   }, other), {}, {
     children: [/*#__PURE__*/_jsx(Interaction, _objectSpread({

package/esm/CardButton/CardButton.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["focus", "selected", "href", "disabled", "onFocus", "onBlur", "InteractionProps", "Component", "className", "children"];
+const _excluded = ["focus", "selected", "href", "readOnly", "disabled", "onFocus", "onBlur", "InteractionProps", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -25,6 +25,7 @@ const CardButton = props_ => {
       focus: focus_,
       selected,
       href,
+      readOnly,
       disabled,
       onFocus: onFocus_,
       onBlur: onBlur_,
@@ -52,12 +53,12 @@ const CardButton = props_ => {
   };
   const Component = Component_;
   return /*#__PURE__*/_jsxs(Component, _objectSpread(_objectSpread({
-    tabIndex: !disabled ? 0 : -1,
+    tabIndex: !(readOnly || disabled) ? 0 : -1,
     Component: Component,
     onFocus: onFocus,
     onBlur: onBlur,
     href: href,
-    className: classNames([staticClassName('CardButton', theme) && [`onesy-CardButton-root`, focus && `onesy-CardButton-focus`, disabled && `onesy-CardButton-disabled`], className, classes.root])
+    className: classNames([staticClassName('CardButton', theme) && [`onesy-CardButton-root`, focus && `onesy-CardButton-focus`, readOnly && `onesy-CardButton-readOnly`, disabled && `onesy-CardButton-disabled`], className, classes.root])
   }, other), {}, {
     children: [/*#__PURE__*/_jsx(Interaction, _objectSpread({
       border: false,

package/esm/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["noFontSizeDownScale", "Component", "className", "style", "children"],
-  _excluded2 = ["tonal", "color", "version", "size", "colorIndeterminate", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "indeterminate", "disabled", "inputRef", "Component", "className", "children"];
+  _excluded2 = ["tonal", "color", "version", "size", "colorIndeterminate", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "indeterminate", "readOnly", "disabled", "inputRef", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { c as _c } from "react/compiler-runtime";
@@ -302,6 +302,7 @@ const Checkbox = props_ => {
       checked: checked_,
       onChange,
       indeterminate: indeterminate_,
+      readOnly,
       disabled,
       inputRef,
       Component = 'span',
@@ -389,7 +390,7 @@ const Checkbox = props_ => {
   if (!value && tonal) colorValue = colorUnchecked;
   if (indeterminate) colorValue = colorIndeterminate;
   return /*#__PURE__*/_jsxs(IconButton, _objectSpread(_objectSpread({
-    tabIndex: !disabled ? 0 : -1,
+    tabIndex: !(readOnly || disabled) ? 0 : -1,
     color: colorValue,
     tonal: tonal,
     version: version,
@@ -414,7 +415,7 @@ const Checkbox = props_ => {
     "aria-disabled": disabled,
     disabled: disabled,
     Component: Component,
-    className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-root', `onesy-Checkbox-version-${version}`, `onesy-Checkbox-size-${size}`, value && `onesy-Checkbox-checked`, disabled && `onesy-Checkbox-disabled`], className, classes.root, disabled && classes.disabled])
+    className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-root', `onesy-Checkbox-version-${version}`, `onesy-Checkbox-size-${size}`, value && `onesy-Checkbox-checked`, readOnly && `onesy-Checkbox-readOnly`, disabled && `onesy-Checkbox-disabled`], className, classes.root, disabled && classes.disabled])
   }, other), {}, {
     children: [/*#__PURE__*/_jsx(IconItem, {
       size: size,

package/esm/NavigationItem/NavigationItem.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["ref", "tonal", "color", "version", "value", "name", "nameTooltip", "vertical", "icon", "iconSelected", "selected", "disabled", "IconWrapperComponent", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "onMouseLeave", "onTouchStart", "TooltipProps", "LabelProps", "IconWrapperProps", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "version", "value", "name", "nameTooltip", "vertical", "icon", "iconSelected", "selected", "readOnly", "disabled", "IconWrapperComponent", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "onMouseLeave", "onTouchStart", "TooltipProps", "LabelProps", "IconWrapperProps", "className", "style", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -121,6 +121,7 @@ const NavigationItem = props_ => {
       icon,
       iconSelected,
       selected,
+      readOnly,
       disabled,
       IconWrapperComponent = 'span',
       onFocus: onFocus_,
@@ -229,7 +230,7 @@ const NavigationItem = props_ => {
     focus: false
   }, TooltipProps), {}, {
     children: /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
-      tabIndex: !disabled ? 0 : undefined,
+      tabIndex: !(readOnly || disabled) ? 0 : undefined,
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyDown: onKeyDown,
@@ -237,7 +238,7 @@ const NavigationItem = props_ => {
       onMouseDown: onMouseDown,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
-      className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-root', selected && 'onesy-NavigationItem-selected', hover && `onesy-NavigationItem-hover`, mouseDown && `onesy-NavigationItem-mouse-down`, focus && `onesy-NavigationItem-focus`, disabled && `onesy-NavigationItem-disabled`], className, classes.root, vertical && classes.vertical, disabled && classes.disabled]),
+      className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-root', selected && 'onesy-NavigationItem-selected', hover && `onesy-NavigationItem-hover`, mouseDown && `onesy-NavigationItem-mouse-down`, focus && `onesy-NavigationItem-focus`, readOnly && `onesy-NavigationItem-readOnly`, disabled && `onesy-NavigationItem-disabled`], className, classes.root, vertical && classes.vertical, disabled && classes.disabled]),
       style: _objectSpread({}, style)
     }, other), {}, {
       children: /*#__PURE__*/_jsxs(Line, {

package/esm/Radio/Radio.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 const _excluded = ["size", "Component", "className", "style", "children"],
-  _excluded2 = ["tonal", "color", "version", "size", "render", "inputRef", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "disabled", "Component", "className", "children"];
+  _excluded2 = ["tonal", "color", "version", "size", "render", "inputRef", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "readOnly", "disabled", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { c as _c } from "react/compiler-runtime";
@@ -173,6 +173,7 @@ const Radio = props_ => {
       value: value_,
       checked: checked_,
       onChange,
+      readOnly,
       disabled,
       Component = 'span',
       className,
@@ -227,7 +228,7 @@ const Radio = props_ => {
   let colorValue = color;
   if (!value) colorValue = colorUnchecked;
   return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
-    tabIndex: !disabled ? 0 : -1,
+    tabIndex: !(readOnly || disabled) ? 0 : -1,
     tonal: tonal,
     color: colorValue,
     version: version,
@@ -250,7 +251,7 @@ const Radio = props_ => {
     "aria-disabled": disabled,
     disabled: disabled,
     Component: Component,
-    className: classNames([staticClassName('Radio', theme) && ['onesy-Radio-root', `onesy-Radio-version-${version}`, `onesy-Radio-size-${size}`, value && `onesy-Radio-checked`, disabled && `onesy-Radio-disabled`], className, classes.root, disabled && classes.disabled])
+    className: classNames([staticClassName('Radio', theme) && ['onesy-Radio-root', `onesy-Radio-version-${version}`, `onesy-Radio-size-${size}`, value && `onesy-Radio-checked`, readOnly && `onesy-Radio-readOnly`, disabled && `onesy-Radio-disabled`], className, classes.root, disabled && classes.disabled])
   }, other), {}, {
     children: is('function', render) ? render(value, _objectSpread(_objectSpread(_objectSpread({}, props), other), {}, {
       tonal,

package/esm/Tab/Tab.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "version", "size", "value", "onChange", "active", "index", "name", "label", "icon", "iconPosition", "activateOnFocus", "tooltip", "disabled", "onBlur", "onFocus", "LineProps", "TooltipProps", "Component", "className", "children"];
+const _excluded = ["tonal", "color", "version", "size", "value", "onChange", "active", "index", "name", "label", "icon", "iconPosition", "activateOnFocus", "tooltip", "readOnly", "disabled", "onBlur", "onFocus", "LineProps", "TooltipProps", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { c as _c } from "react/compiler-runtime";
@@ -97,6 +97,7 @@ const Tab = props_ => {
       iconPosition: t4,
       activateOnFocus,
       tooltip,
+      readOnly,
       disabled,
       onBlur: onBlur_,
       onFocus: onFocus_,
@@ -154,9 +155,9 @@ const Tab = props_ => {
   const wrapperProps = hasTooltip ? _objectSpread({
     name: tooltip
   }, TooltipProps) : undefined;
-  const t7 = !disabled ? 0 : -1;
+  const t7 = !(readOnly || disabled) ? 0 : -1;
   const t8 = "tab";
-  const t9 = classNames([staticClassName("Tab", theme) && ["onesy-Tab-root", `onesy-Tab-version-${version}`, `onesy-Tab-size-${size}`, active && "onesy-Tab-active", disabled && "onesy-Tab-disabled"], className, classes.root, classes[`size_${size}`], active && classes.active, disabled && classes.disabled]);
+  const t9 = classNames([staticClassName("Tab", theme) && ["onesy-Tab-root", `onesy-Tab-version-${version}`, `onesy-Tab-size-${size}`, active && "onesy-Tab-active", readOnly && "onesy-Tab-readOnly", disabled && "onesy-Tab-disabled"], className, classes.root, classes[`size_${size}`], active && classes.active, disabled && classes.disabled]);
   let t10;
   if ($[0] !== Interaction || $[1] !== focus) {
     t10 = /*#__PURE__*/_jsx(Interaction, {

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.196
+/** @license UiReact v1.0.198
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.196
+/** @license UiReact v1.0.198
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.197",
+  "version": "1.0.199",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar Erić <lazareric1@proton.me>",