@onesy/ui-react 1.0.198 → 1.0.200

package/Button/Button.js

@@ -274,15 +274,15 @@ const Button = props_ => {
       fab,
       chip,
       icon,
-      focus: focus_,
+      focus: focusProps,
       value,
       noIconRootFontSize,
       firstLevelChildren,
       noFontSize,
       readOnly,
       disabled: disabled_,
-      onFocus: onFocus_,
-      onBlur: onBlur_,
+      onFocus: onFocusProps,
+      onBlur: onBlurProps,
       IconWrapperComponent = 'span',
       InteractionProps = {},
       IconWrapperProps,
@@ -297,7 +297,7 @@ const Button = props_ => {
   const {
     classes
   } = useStyle();
-  const [focus, setFocus] = _react.default.useState(focus_ !== undefined ? focus_ : false);
+  const [focus, setFocus] = _react.default.useState(focusProps !== undefined ? focusProps : false);
   const refs = {
     root: _react.default.useRef(undefined),
     ids: {
@@ -416,12 +416,12 @@ const Button = props_ => {
     delete styles.label.color;
   }
   const onFocus = event => {
-    if (focus_ === undefined && event.target === refs.root.current && !disabled) setFocus(true);
-    if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
+    if (focusProps === undefined && event.target === refs.root.current && !disabled) setFocus(true);
+    if ((0, _utils.is)('function', onFocusProps)) onFocusProps(event);
   };
   const onBlur = event_0 => {
-    if (focus_ === undefined && !disabled) setFocus(false);
-    if ((0, _utils.is)('function', onBlur_)) onBlur_(event_0);
+    if (focusProps === undefined && !disabled) setFocus(false);
+    if ((0, _utils.is)('function', onBlurProps)) onBlurProps(event_0);
   };
   const IconElement = selected && iconSelected || children_;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
@@ -446,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

@@ -66,7 +66,7 @@ const CardButton = props_ => {
     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

@@ -424,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/ListItem/ListItem.d.ts

@@ -25,6 +25,7 @@ export declare type IListItem = ISurface & {
     noBackground?: boolean;
     noOutline?: boolean;
     fullWidth?: boolean;
+    focus?: boolean;
     value?: any;
     onClick?: (event: React.MouseEvent<any>) => any;
     onFocus?: (event: React.FocusEvent<any>) => any;

package/ListItem/ListItem.js

@@ -15,7 +15,7 @@ var _Interaction = _interopRequireDefault(require("../Interaction"));
 var _Type = _interopRequireDefault(require("../Type"));
 var _utils2 = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ref", "tonal", "color", "colorSelected", "inset", "primary", "secondary", "tertiary", "preselected", "selected", "start", "startAlign", "end", "endAlign", "size", "noPadding", "href", "button", "shape", "shapePosition", "menuItem", "footer", "tabIndex", "interaction", "fullWidth", "noOutline", "noBackground", "disabled", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "onClose", "RootComponent", "WrapperProps", "RootProps", "InteractionProps", "PrimaryProps", "SecondaryProps", "TertiaryProps", "MainProps", "AsideProps", "AsideStartProps", "AsideEndProps", "Component", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "colorSelected", "inset", "primary", "secondary", "tertiary", "preselected", "selected", "start", "startAlign", "end", "endAlign", "size", "noPadding", "href", "button", "shape", "shapePosition", "menuItem", "footer", "tabIndex", "interaction", "fullWidth", "noOutline", "noBackground", "focus", "readOnly", "disabled", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "onClose", "RootComponent", "WrapperProps", "RootProps", "InteractionProps", "PrimaryProps", "SecondaryProps", "TertiaryProps", "MainProps", "AsideProps", "AsideStartProps", "AsideEndProps", "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 => {
@@ -256,14 +256,16 @@ const ListItem = props_ => {
       fullWidth = true,
       noOutline,
       noBackground,
+      focus: focusProps,
+      readOnly,
       disabled,
       onClick,
-      onFocus,
-      onBlur,
+      onFocus: onFocusProps,
+      onBlur: onBlurProps,
       onMouseEnter,
       onMouseLeave,
       onClose: onClose_,
-      RootComponent: RootComponent_ = 'div',
+      RootComponent: RootComponentProps = 'div',
       WrapperProps,
       RootProps,
       InteractionProps,
@@ -283,6 +285,7 @@ const ListItem = props_ => {
   const {
     classes
   } = useStyle();
+  const [focus, setFocus] = _react.default.useState(focusProps !== undefined ? focusProps : false);
   const refs = {
     root: _react.default.useRef(undefined),
     props: _react.default.useRef(undefined),
@@ -292,6 +295,14 @@ const ListItem = props_ => {
     }
   };
   refs.props.current = props;
+  const onFocus = event => {
+    if (focusProps === undefined && event.target === refs.root.current && !disabled) setFocus(true);
+    if ((0, _utils.is)('function', onFocusProps)) onFocusProps(event);
+  };
+  const onBlur = event_0 => {
+    if (focusProps === undefined && !disabled) setFocus(false);
+    if ((0, _utils.is)('function', onBlurProps)) onBlurProps(event_0);
+  };
   const styles = {
     root: {},
     icon: {
@@ -302,7 +313,7 @@ const ListItem = props_ => {
     secondary: {},
     tertiary: {}
   };
-  let RootComponent = RootComponent_;
+  let RootComponent = RootComponentProps;
   if (href) RootComponent = 'a';
   const colorToUse = selected ? colorSelected : color;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread(_objectSpread({
@@ -314,7 +325,6 @@ const ListItem = props_ => {
     },
     tonal: tonal,
     color: colorToUse,
-    tabIndex: tabIndex !== undefined ? tabIndex : button && !disabled ? 0 : undefined,
     "aria-labelledby": refs.ids.primary,
     "aria-describedby": refs.ids.secondary,
     "aria-selected": selected,
@@ -326,18 +336,20 @@ const ListItem = props_ => {
   }, other), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(RootComponent, _objectSpread(_objectSpread({
       href: href,
+      tabIndex: tabIndex !== undefined ? tabIndex : button && !(readOnly || disabled) ? 0 : undefined,
       onClick: onClick,
       onFocus: onFocus,
       onBlur: onBlur,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave
     }, RootProps), {}, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-root', `onesy-ListItem-size-${size}`, preselected && `onesy-ListItem-preselected`, selected && `onesy-ListItem-selected`, disabled && `onesy-ListItem-disabled`, inset && !start && `onesy-ListItem-inset`], RootProps === null || RootProps === void 0 ? void 0 : RootProps.className, classes.root, !menuItem && classes[`size_${size}`], classes[`shape_${shape}_position_${shapePosition}`], inset && !start && classes[`inset_size_${size}`], menuItem && [classes[`menuItem_size_${size}`], inset && classes[`menuItem_inset_size_${size}`]], (href || button) && classes.button, noPadding && classes.noPadding, disabled && classes.disabled]),
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-root', `onesy-ListItem-size-${size}`, preselected && `onesy-ListItem-preselected`, selected && `onesy-ListItem-selected`, readOnly && `onesy-ListItem-readOnly`, disabled && `onesy-ListItem-disabled`, inset && !start && `onesy-ListItem-inset`], RootProps === null || RootProps === void 0 ? void 0 : RootProps.className, classes.root, !menuItem && classes[`size_${size}`], classes[`shape_${shape}_position_${shapePosition}`], inset && !start && classes[`inset_size_${size}`], menuItem && [classes[`menuItem_size_${size}`], inset && classes[`menuItem_inset_size_${size}`]], (href || button) && classes.button, noPadding && classes.noPadding, disabled && classes.disabled]),
       style: _objectSpread(_objectSpread({}, style), styles.root),
       disabled: disabled,
       children: [(href || button || interaction) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Interaction, _objectSpread({
         border: false,
         preselected: (InteractionProps === null || InteractionProps === void 0 ? void 0 : InteractionProps.focus) || preselected || undefined,
+        pulse: focus,
         selected: selected,
         disabled: disabled
       }, InteractionProps)), start && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread(_objectSpread({}, AsideProps), AsideStartProps), {}, {

package/NavigationItem/NavigationItem.js

@@ -249,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

@@ -259,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

@@ -165,7 +165,7 @@ const Tab = props_ => {
   }, TooltipProps) : undefined;
   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

@@ -266,15 +266,15 @@ const Button = props_ => {
       fab,
       chip,
       icon,
-      focus: focus_,
+      focus: focusProps,
       value,
       noIconRootFontSize,
       firstLevelChildren,
       noFontSize,
       readOnly,
       disabled: disabled_,
-      onFocus: onFocus_,
-      onBlur: onBlur_,
+      onFocus: onFocusProps,
+      onBlur: onBlurProps,
       IconWrapperComponent = 'span',
       InteractionProps = {},
       IconWrapperProps,
@@ -289,7 +289,7 @@ const Button = props_ => {
   const {
     classes
   } = useStyle();
-  const [focus, setFocus] = React.useState(focus_ !== undefined ? focus_ : false);
+  const [focus, setFocus] = React.useState(focusProps !== undefined ? focusProps : false);
   const refs = {
     root: React.useRef(undefined),
     ids: {
@@ -408,12 +408,12 @@ const Button = props_ => {
     delete styles.label.color;
   }
   const onFocus = event => {
-    if (focus_ === undefined && event.target === refs.root.current && !disabled) setFocus(true);
-    if (is('function', onFocus_)) onFocus_(event);
+    if (focusProps === undefined && event.target === refs.root.current && !disabled) setFocus(true);
+    if (is('function', onFocusProps)) onFocusProps(event);
   };
   const onBlur = event_0 => {
-    if (focus_ === undefined && !disabled) setFocus(false);
-    if (is('function', onBlur_)) onBlur_(event_0);
+    if (focusProps === undefined && !disabled) setFocus(false);
+    if (is('function', onBlurProps)) onBlurProps(event_0);
   };
   const IconElement = selected && iconSelected || children_;
   return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
@@ -438,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

@@ -58,7 +58,7 @@ const CardButton = props_ => {
     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

@@ -415,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/ListItem/ListItem.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["ref", "tonal", "color", "colorSelected", "inset", "primary", "secondary", "tertiary", "preselected", "selected", "start", "startAlign", "end", "endAlign", "size", "noPadding", "href", "button", "shape", "shapePosition", "menuItem", "footer", "tabIndex", "interaction", "fullWidth", "noOutline", "noBackground", "disabled", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "onClose", "RootComponent", "WrapperProps", "RootProps", "InteractionProps", "PrimaryProps", "SecondaryProps", "TertiaryProps", "MainProps", "AsideProps", "AsideStartProps", "AsideEndProps", "Component", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "colorSelected", "inset", "primary", "secondary", "tertiary", "preselected", "selected", "start", "startAlign", "end", "endAlign", "size", "noPadding", "href", "button", "shape", "shapePosition", "menuItem", "footer", "tabIndex", "interaction", "fullWidth", "noOutline", "noBackground", "focus", "readOnly", "disabled", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "onClose", "RootComponent", "WrapperProps", "RootProps", "InteractionProps", "PrimaryProps", "SecondaryProps", "TertiaryProps", "MainProps", "AsideProps", "AsideStartProps", "AsideEndProps", "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';
@@ -248,14 +248,16 @@ const ListItem = props_ => {
       fullWidth = true,
       noOutline,
       noBackground,
+      focus: focusProps,
+      readOnly,
       disabled,
       onClick,
-      onFocus,
-      onBlur,
+      onFocus: onFocusProps,
+      onBlur: onBlurProps,
       onMouseEnter,
       onMouseLeave,
       onClose: onClose_,
-      RootComponent: RootComponent_ = 'div',
+      RootComponent: RootComponentProps = 'div',
       WrapperProps,
       RootProps,
       InteractionProps,
@@ -275,6 +277,7 @@ const ListItem = props_ => {
   const {
     classes
   } = useStyle();
+  const [focus, setFocus] = React.useState(focusProps !== undefined ? focusProps : false);
   const refs = {
     root: React.useRef(undefined),
     props: React.useRef(undefined),
@@ -284,6 +287,14 @@ const ListItem = props_ => {
     }
   };
   refs.props.current = props;
+  const onFocus = event => {
+    if (focusProps === undefined && event.target === refs.root.current && !disabled) setFocus(true);
+    if (is('function', onFocusProps)) onFocusProps(event);
+  };
+  const onBlur = event_0 => {
+    if (focusProps === undefined && !disabled) setFocus(false);
+    if (is('function', onBlurProps)) onBlurProps(event_0);
+  };
   const styles = {
     root: {},
     icon: {
@@ -294,7 +305,7 @@ const ListItem = props_ => {
     secondary: {},
     tertiary: {}
   };
-  let RootComponent = RootComponent_;
+  let RootComponent = RootComponentProps;
   if (href) RootComponent = 'a';
   const colorToUse = selected ? colorSelected : color;
   return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread(_objectSpread({
@@ -306,7 +317,6 @@ const ListItem = props_ => {
     },
     tonal: tonal,
     color: colorToUse,
-    tabIndex: tabIndex !== undefined ? tabIndex : button && !disabled ? 0 : undefined,
     "aria-labelledby": refs.ids.primary,
     "aria-describedby": refs.ids.secondary,
     "aria-selected": selected,
@@ -318,18 +328,20 @@ const ListItem = props_ => {
   }, other), {}, {
     children: [/*#__PURE__*/_jsxs(RootComponent, _objectSpread(_objectSpread({
       href: href,
+      tabIndex: tabIndex !== undefined ? tabIndex : button && !(readOnly || disabled) ? 0 : undefined,
       onClick: onClick,
       onFocus: onFocus,
       onBlur: onBlur,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave
     }, RootProps), {}, {
-      className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-root', `onesy-ListItem-size-${size}`, preselected && `onesy-ListItem-preselected`, selected && `onesy-ListItem-selected`, disabled && `onesy-ListItem-disabled`, inset && !start && `onesy-ListItem-inset`], RootProps?.className, classes.root, !menuItem && classes[`size_${size}`], classes[`shape_${shape}_position_${shapePosition}`], inset && !start && classes[`inset_size_${size}`], menuItem && [classes[`menuItem_size_${size}`], inset && classes[`menuItem_inset_size_${size}`]], (href || button) && classes.button, noPadding && classes.noPadding, disabled && classes.disabled]),
+      className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-root', `onesy-ListItem-size-${size}`, preselected && `onesy-ListItem-preselected`, selected && `onesy-ListItem-selected`, readOnly && `onesy-ListItem-readOnly`, disabled && `onesy-ListItem-disabled`, inset && !start && `onesy-ListItem-inset`], RootProps?.className, classes.root, !menuItem && classes[`size_${size}`], classes[`shape_${shape}_position_${shapePosition}`], inset && !start && classes[`inset_size_${size}`], menuItem && [classes[`menuItem_size_${size}`], inset && classes[`menuItem_inset_size_${size}`]], (href || button) && classes.button, noPadding && classes.noPadding, disabled && classes.disabled]),
       style: _objectSpread(_objectSpread({}, style), styles.root),
       disabled: disabled,
       children: [(href || button || interaction) && /*#__PURE__*/_jsx(Interaction, _objectSpread({
         border: false,
         preselected: InteractionProps?.focus || preselected || undefined,
+        pulse: focus,
         selected: selected,
         disabled: disabled
       }, InteractionProps)), start && /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread(_objectSpread({}, AsideProps), AsideStartProps), {}, {

package/esm/NavigationItem/NavigationItem.js

@@ -238,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

@@ -251,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

@@ -157,7 +157,7 @@ const Tab = props_ => {
   }, TooltipProps) : undefined;
   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.197
+/** @license UiReact v1.0.199
  *
  * 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.197
+/** @license UiReact v1.0.199
  *
  * 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.198",
+  "version": "1.0.200",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar Erić <lazareric1@proton.me>",