flipper-ui 0.40.4 → 0.41.0

package/core/feedback/progress/index.js

@@ -1,21 +1,45 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
-var _excluded = ["linear", "style", "margin", "padding", "valueBuffer", "primaryColor", "barPrimaryColor", "barSecondaryColor"];
+var _typography = _interopRequireDefault(require("../../data-display/typography"));
+var _styles = require("./styles");
+var _excluded = ["sx", "label", "linear", "ariaLabel", "thickness", "borderRadius", "labelPosition", "style", "margin", "padding", "valueBuffer", "primaryColor", "barPrimaryColor", "barSecondaryColor"],
+  _excluded2 = ["variant"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
+/**
+ * Below this diameter the label no longer fits inside the ring, so it is
+ * rendered beside it. Matches the MUI default `size`.
+ */
+var MIN_INNER_LABEL_SIZE = 40;
+var toPixels = function toPixels(size) {
+  if (typeof size === 'number') {
+    return size;
+  }
+  return typeof size === 'string' && size.endsWith('px') ? parseFloat(size) : undefined;
+};
 var Progress = function Progress(_ref) {
-  var linear = _ref.linear,
+  var _toPixels;
+  var sx = _ref.sx,
+    label = _ref.label,
+    linear = _ref.linear,
+    ariaLabel = _ref.ariaLabel,
+    thickness = _ref.thickness,
+    borderRadius = _ref.borderRadius,
+    labelPosition = _ref.labelPosition,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
     margin = _ref.margin,
@@ -25,26 +49,61 @@ var Progress = function Progress(_ref) {
     barPrimaryColor = _ref.barPrimaryColor,
     barSecondaryColor = _ref.barSecondaryColor,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return linear ? /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], (0, _extends2["default"])({
+  var labelId = (0, _react.useId)();
+  var withReceivedSx = function withReceivedSx(base) {
+    return sx ? [base].concat((0, _toConsumableArray2["default"])(Array.isArray(sx) ? sx : [sx])) : base;
+  };
+  var labelling = {
+    'aria-label': ariaLabel,
+    'aria-labelledby': !ariaLabel && label ? labelId : undefined,
+    'aria-valuetext': typeof label === 'string' ? label : undefined
+  };
+  var renderLabel = function renderLabel() {
+    return /*#__PURE__*/_react["default"].createElement(_typography["default"], {
+      id: labelId,
+      variant: "caption"
+    }, label);
+  };
+  if (linear) {
+    var bar = /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], (0, _extends2["default"])({
+      style: _objectSpread({
+        margin: margin,
+        padding: padding
+      }, style),
+      valueBuffer: valueBuffer,
+      sx: withReceivedSx(_objectSpread(_objectSpread(_objectSpread({}, thickness === undefined ? {} : {
+        height: thickness
+      }), borderRadius === undefined ? {} : {
+        borderRadius: borderRadius
+      }), {}, {
+        backgroundColor: primaryColor,
+        '.MuiLinearProgress-barColorPrimary': {
+          backgroundColor: barPrimaryColor
+        },
+        '.MuiLinearProgress-barColorSecondary': {
+          backgroundColor: barSecondaryColor
+        }
+      }))
+    }, labelling, otherProps));
+    return label ? /*#__PURE__*/_react["default"].createElement(_styles.LinearWrapper, null, bar, renderLabel()) : bar;
+  }
+  var variant = otherProps.variant,
+    circularProps = (0, _objectWithoutProperties2["default"])(otherProps, _excluded2);
+  var ring = /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], (0, _extends2["default"])({
     style: _objectSpread({
       margin: margin,
       padding: padding
     }, style),
-    valueBuffer: valueBuffer,
-    sx: {
-      backgroundColor: primaryColor,
-      '.MuiLinearProgress-barColorPrimary': {
-        backgroundColor: barPrimaryColor
-      },
-      '.MuiLinearProgress-barColorSecondary': {
-        backgroundColor: barSecondaryColor
-      }
-    }
-  }, otherProps)) : /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], (0, _extends2["default"])({
-    style: _objectSpread({
-      margin: margin,
-      padding: padding
-    }, style)
-  }, otherProps));
+    sx: withReceivedSx()
+    // Forwarded verbatim: the ring renders a class of its own for
+    // `buffer` and `query`, so narrowing them here would change it.
+    ,
+    variant: variant
+  }, labelling, circularProps));
+  if (!label) {
+    return ring;
+  }
+  var fitsInside = labelPosition === undefined ? ((_toPixels = toPixels(circularProps.size)) !== null && _toPixels !== void 0 ? _toPixels : MIN_INNER_LABEL_SIZE) >= MIN_INNER_LABEL_SIZE : labelPosition === 'inside';
+  return fitsInside ? /*#__PURE__*/_react["default"].createElement(_styles.CircularWrapper, null, ring, /*#__PURE__*/_react["default"].createElement(_styles.CircularLabel, null, renderLabel())) : /*#__PURE__*/_react["default"].createElement(_styles.InlineWrapper, null, ring, renderLabel());
 };
 var _default = exports["default"] = Progress;

package/core/feedback/progress/progress.spec.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/core/feedback/progress/progress.stories.d.ts

@@ -3,5 +3,7 @@ import Progress from '.';
 declare const meta: Meta<typeof Progress>;
 export default meta;
 type Story = StoryObj<typeof Progress>;
-export declare const progress: Story;
-export declare const progressCustom: Story;
+export declare const loading: Story;
+export declare const dataBar: Story;
+export declare const circularWithLabel: Story;
+export declare const customColors: Story;

package/core/feedback/progress/styles.d.ts

@@ -0,0 +1,18 @@
+export declare const InlineWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LinearWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const CircularWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CircularLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/feedback/progress/styles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinearWrapper = exports.InlineWrapper = exports.CircularWrapper = exports.CircularLabel = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var InlineWrapper = exports.InlineWrapper = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    gap: 4px;\n    align-items: center;\n"])));
+var LinearWrapper = exports.LinearWrapper = (0, _styled["default"])(InlineWrapper)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    .MuiLinearProgress-root {\n        flex: 1;\n    }\n"])));
+var CircularWrapper = exports.CircularWrapper = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    position: relative;\n    display: inline-flex;\n"])));
+var CircularLabel = exports.CircularLabel = _styled["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n"])));

package/core/feedback/snackbar/index.js

@@ -103,7 +103,7 @@ var SnackBar = function SnackBar(props) {
     }), /*#__PURE__*/_react["default"].createElement("div", null, message)),
     action: action || /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
       key: "close",
-      role: "close-icon-button",
+      "data-testid": "close-icon-button",
       "aria-label": "Close",
       color: "inherit",
       onClick: handleClose

package/core/inputs/checkbox/checkbox.spec.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/core/inputs/checkbox/index.js

@@ -43,7 +43,9 @@ var Checkbox = function Checkbox(props) {
   };
   var renderSwitch = function renderSwitch(checkboxProps) {
     return /*#__PURE__*/_react["default"].createElement(_Switch["default"], (0, _extends2["default"])({}, checkboxProps, {
-      role: "switch",
+      inputProps: {
+        role: 'switch'
+      },
       sx: props.sx,
       name: props.name,
       value: props.name,

package/core/inputs/icon-button/icon-button.spec.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/core/inputs/icon-button/index.d.ts

@@ -6,6 +6,13 @@ export interface IconButtonProps extends DefaultProps {
     role?: string;
     disabled?: boolean;
     'data-testid'?: string;
+    /**
+     * Accessible name. Falls back to `name` when the button has no text of
+     * its own — an icon alone leaves it unnamed, since the icon itself is
+     * `aria-hidden` (WCAG 4.1.2). Never applied over a text child, which
+     * already names the button.
+     */
+    'aria-label'?: string;
     size?: 'small' | 'medium' | 'large';
     onClick?(event: MouseEvent<HTMLButtonElement>): void;
 }

package/core/inputs/icon-button/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,20 +9,29 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _excluded = ["children", "padding", "margin", "size", "style"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
+var hasTextChild = function hasTextChild(children) {
+  return _react.Children.toArray(children).some(function (child) {
+    return typeof child === 'string' || typeof child === 'number';
+  });
+};
 var IconButton = function IconButton(_ref) {
+  var _otherProps$ariaLabe;
   var children = _ref.children,
     padding = _ref.padding,
     margin = _ref.margin,
     size = _ref.size,
     style = _ref.style,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var ariaLabel = (_otherProps$ariaLabe = otherProps['aria-label']) !== null && _otherProps$ariaLabe !== void 0 ? _otherProps$ariaLabe : hasTextChild(children) ? undefined : otherProps.name;
   return /*#__PURE__*/_react["default"].createElement(_IconButton["default"], (0, _extends2["default"])({}, otherProps, {
     size: size || 'large',
+    "aria-label": ariaLabel,
     style: _objectSpread({
       margin: margin,
       padding: padding

package/core/inputs/select/index.js

@@ -23,7 +23,8 @@ var renderEndAdornment = function renderEndAdornment(onClear) {
       paddingRight: '12px'
     }
   }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
-    role: "end-adornment-component",
+    "data-testid": "end-adornment-component",
+    "aria-label": "Limpar",
     size: "small",
     onClick: onClear
   }, /*#__PURE__*/_react["default"].createElement(_mui.IconClose, {

package/core/inputs/text-field/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ChangeEvent, ClipboardEvent, KeyboardEvent, FocusEvent, ReactNode, MouseEvent, Ref } from 'react';
+import type { ChangeEvent, ClipboardEvent, KeyboardEvent, FocusEvent, ReactNode, SyntheticEvent, Ref } from 'react';
 import type { DefaultProps } from '../../types';
 import type { InputBaseComponentProps } from '@mui/material/InputBase';
 import type { TextFieldProps } from '@mui/material/TextField';
@@ -49,7 +49,7 @@ export interface ITextFieldProps extends DefaultProps, Omit<TextFieldProps, 'mar
 }
 interface IHelperProps {
     helperIcon?: ReactNode;
-    onHelperClick: (event: MouseEvent) => void;
+    onHelperClick: (event: SyntheticEvent) => void;
 }
 export declare const HelperBox: (props: IHelperProps) => React.JSX.Element;
 export declare const renderOptions: (options: ITextFieldProps["options"]) => React.JSX.Element[] | undefined;

package/core/inputs/text-field/index.js

@@ -43,10 +43,19 @@ var toLispCase = function toLispCase(name) {
 };
 var HelperBox = exports.HelperBox = function HelperBox(props) {
   return /*#__PURE__*/_react["default"].createElement(_styles.Helper, {
-    role: "helper-box"
+    "data-testid": "helper-box"
   }, /*#__PURE__*/_react["default"].createElement(_styles.HelperButton, {
-    onClick: function onClick(e) {
-      return props.onHelperClick(e);
+    role: "button",
+    tabIndex: 0,
+    "aria-label": "Ajuda",
+    onClick: function onClick(event) {
+      return props.onHelperClick(event);
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        props.onHelperClick(event);
+      }
     }
   }, props.helperIcon || /*#__PURE__*/_react["default"].createElement(_mui.IconHelp, {
     color: "primary"
@@ -70,7 +79,8 @@ var renderEndAdornment = function renderEndAdornment(disabled, onClear) {
     position: "end"
   }, /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
     size: "small",
-    role: "clear-button",
+    "aria-label": "Limpar",
+    "data-testid": "clear-button",
     margin: "0 16px 0 0",
     disabled: disabled || false,
     onClick: onClear

package/core/inputs/text-field/styles.js

@@ -14,7 +14,7 @@ var _theme$colors = _theme.theme.colors,
   primary = _theme$colors.primary;
 var Wrapper = exports.Wrapper = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
 var Helper = exports.Helper = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 42px;\n    height: 38px;\n\n    display: flex;\n    align-items: center;\n"])));
-var HelperButton = exports.HelperButton = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    opacity: 0;\n    padding: 4px;\n    display: flex;\n    border-radius: 100px;\n    transition:\n        opacity 0.2s ease,\n        background-color 0.2s ease;\n\n    &:hover {\n        opacity: 1;\n        cursor: pointer;\n        background-color: ", "0a;\n    }\n"])), primary.main);
+var HelperButton = exports.HelperButton = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    opacity: 0;\n    padding: 4px;\n    display: flex;\n    border-radius: 100px;\n    transition:\n        opacity 0.2s ease,\n        background-color 0.2s ease;\n\n    &:hover {\n        opacity: 1;\n        cursor: pointer;\n        background-color: ", "0a;\n    }\n\n    &:focus-visible {\n        opacity: 1;\n        background-color: ", "0a;\n    }\n"])), primary.main, primary.main);
 var TextFieldWrapper = exports.TextFieldWrapper = _styled["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    align-items: center;\n\n    button {\n        display: none;\n    }\n\n    :hover button {\n        display: flex;\n    }\n"])));
 var StaticTextFieldWrapper = exports.StaticTextFieldWrapper = _styled["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    align-items: center;\n"])));
 var CharactersCount = exports.CharactersCount = _styled["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    color: ", ";\n    font-size: 14px;\n    font-family:\n        Roboto,\n        Helvetica,\n        Arial,\n        sans- serif;\n"])), gray[600]);

package/core/inputs/text-field/text-field.spec.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/core/navigation/menu/index.js

@@ -36,7 +36,7 @@ var Menu = function Menu(_ref) {
       margin: margin
     }, style)
   }), withWrapper ? /*#__PURE__*/_react["default"].createElement("div", {
-    role: "menu-wrapper-container"
+    "data-testid": "menu-wrapper-container"
   }, children) : children);
 };
 var _default = exports["default"] = Menu;

package/core/navigation/stepper/index.d.ts

@@ -1,14 +1,50 @@
 import React from 'react';
+import type { ReactNode } from 'react';
 import type { DefaultProps } from '../../types';
 export interface StepperProps extends DefaultProps {
     active?: number;
     steps: Array<string | TStep>;
     bottomLabel?: boolean;
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Frees the steps from `active`: none is completed or blocked by its
+     * position alone, each one carries its own `completed` and `disabled`.
+     * Required for free navigation — a linear stepper blocks every step
+     * after `active`, so clicking ahead does nothing.
+     * @optional
+     */
+    nonLinear?: boolean;
+    /**
+     * Called with the index of the clicked step. It only turns the steps into
+     * buttons alongside `nonLinear` — on its own the stepper stays the
+     * read-only trail it has always been, so a handler injected by tooling
+     * (Storybook auto-actions, a spread of props) cannot make it clickable.
+     * @optional
+     */
+    onStepClick?: (index: number) => void;
 }
 type TStep = {
     label: JSX.Element | string;
-    icon: JSX.Element | ((active?: boolean) => JSX.Element);
+    icon?: JSX.Element | ((active?: boolean) => JSX.Element);
+    /**
+     * Overrides the completion the stepper would infer from `active`, and is
+     * the only source of it under `nonLinear`.
+     * @optional
+     */
+    completed?: boolean;
+    /**
+     * Blocks the step: greyed out, and unreachable by mouse or keyboard when
+     * `onStepClick` is set.
+     * @optional
+     */
+    disabled?: boolean;
+    /**
+     * Secondary line under the label — a percentage, a count. It lands inside
+     * the label, so it also names the step for screen readers: `'45%'` reads
+     * as part of the button. Inline content only.
+     * @optional
+     */
+    caption?: ReactNode;
 };
-declare const Stepper: ({ active, bottomLabel, steps, padding, margin, style, ...otherProps }: StepperProps) => React.JSX.Element;
+declare const Stepper: ({ active, bottomLabel, steps, padding, margin, nonLinear, onStepClick, style, ...otherProps }: StepperProps) => React.JSX.Element;
 export default Stepper;

package/core/navigation/stepper/index.js

@@ -12,9 +12,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _Step = _interopRequireDefault(require("@mui/material/Step"));
+var _StepButton = _interopRequireDefault(require("@mui/material/StepButton"));
 var _StepLabel = _interopRequireDefault(require("@mui/material/StepLabel"));
 var _Stepper = _interopRequireDefault(require("@mui/material/Stepper"));
-var _excluded = ["active", "bottomLabel", "steps", "padding", "margin", "style"];
+var _typography = _interopRequireDefault(require("../../data-display/typography"));
+var _excluded = ["active", "bottomLabel", "steps", "padding", "margin", "nonLinear", "onStepClick", "style"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -38,26 +40,51 @@ var Stepper = function Stepper(_ref2) {
     steps = _ref2.steps,
     padding = _ref2.padding,
     margin = _ref2.margin,
+    nonLinear = _ref2.nonLinear,
+    onStepClick = _ref2.onStepClick,
     _ref2$style = _ref2.style,
     style = _ref2$style === void 0 ? {} : _ref2$style,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Stepper["default"], (0, _extends2["default"])({
-    role: "stepper-container",
+    "data-testid": "stepper-container",
     alternativeLabel: bottomLabel,
     activeStep: active,
+    nonLinear: nonLinear,
     style: _objectSpread({
       padding: padding,
       margin: margin
     }, style)
   }, otherProps), steps.map(function (step, index) {
+    var _ref3 = (0, _typeof2["default"])(step) === 'object' ? step : {
+        label: step
+      },
+      label = _ref3.label,
+      icon = _ref3.icon,
+      completed = _ref3.completed,
+      disabled = _ref3.disabled,
+      caption = _ref3.caption;
+    var stepActive = nonLinear ? index === active || !!completed : !!isActive(index, active);
+    var stepIcon = icon ? /*#__PURE__*/_react["default"].createElement(StepIcon, {
+      icon: icon,
+      active: stepActive
+    }) : index + 1;
+    var stepCaption = caption ? /*#__PURE__*/_react["default"].createElement(_typography["default"], {
+      variant: "caption"
+    }, caption) : undefined;
     return /*#__PURE__*/_react["default"].createElement(_Step["default"], {
-      key: index
-    }, /*#__PURE__*/_react["default"].createElement(_StepLabel["default"], {
-      icon: (0, _typeof2["default"])(step) === 'object' ? /*#__PURE__*/_react["default"].createElement(StepIcon, {
-        icon: step.icon,
-        active: !!isActive(index, active)
-      }) : index + 1
-    }, (0, _typeof2["default"])(step) === 'object' ? step.label : step));
+      key: index,
+      completed: completed,
+      disabled: disabled
+    }, nonLinear && onStepClick ? /*#__PURE__*/_react["default"].createElement(_StepButton["default"], {
+      icon: stepIcon,
+      optional: stepCaption,
+      onClick: function onClick() {
+        return onStepClick(index);
+      }
+    }, label) : /*#__PURE__*/_react["default"].createElement(_StepLabel["default"], {
+      icon: stepIcon,
+      optional: stepCaption
+    }, label));
   }));
 };
 var _default = exports["default"] = Stepper;

package/core/navigation/stepper/stepper.stories.d.ts

@@ -5,3 +5,5 @@ export default meta;
 type Story = StoryObj<typeof Stepper>;
 export declare const stepper: Story;
 export declare const stepperWithIcon: Story;
+export declare const stepperWithNavigation: Story;
+export declare const stepperWithBlockedStep: Story;

package/core/surfaces/card/index.d.ts

@@ -1,23 +1,30 @@
 import React from 'react';
 import type { ReactNode } from 'react';
+import type { ITypographyProps } from '@/core/data-display/typography';
 import type { IButtonProps } from '@/core/inputs/button';
 import type { IconButtonProps } from '@/core/inputs/icon-button';
 export interface IProps {
-    children: ReactNode;
-    nested?: boolean;
-    title?: string;
+    id?: string;
     name: string;
+    title?: string;
     label?: string;
-    id?: string;
+    nested?: boolean;
     editing?: boolean;
-    action?: JSX.Element | null;
+    children: ReactNode;
     renderRemove?: boolean;
+    action?: JSX.Element | null;
+    /**
+     * Merged over the title defaults — `variant='h6'`, `color='primary'`.
+     * `variant` also sets the heading level, so `{ component: 'h2' }`
+     * keeps the `h6` type scale on an `<h2>` tag.
+     */
+    titleProps?: Partial<ITypographyProps>;
     onAddProps?: Partial<IButtonProps>;
     onEditProps?: Partial<IconButtonProps>;
     onRemoveProps?: Partial<IconButtonProps>;
+    onRemove?(): void;
     onClickAdd?(): void;
     onToggleEdit?(): void;
-    onRemove?(): void;
 }
 declare const Card: (props: IProps) => React.JSX.Element;
 export default Card;

package/core/surfaces/card/index.js

@@ -11,18 +11,18 @@ var _react = _interopRequireDefault(require("react"));
 var _line = _interopRequireDefault(require("../../data-display/line"));
 var _typography = _interopRequireDefault(require("../../data-display/typography"));
 var _addButton = _interopRequireDefault(require("../../inputs/add-button"));
+var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
 var _paper = _interopRequireDefault(require("../paper"));
 var _mui = require("../../../icons/mui");
 var _styles = require("./styles");
-var _theme = require("../../../theme");
-var _excluded = ["id", "name", "label", "nested", "title", "action", "onToggleEdit", "editing", "children", "renderRemove", "onRemove", "onClickAdd", "onAddProps", "onEditProps", "onRemoveProps"];
-var feedback = _theme.theme.colors.feedback;
+var _excluded = ["id", "name", "label", "nested", "title", "titleProps", "action", "onToggleEdit", "editing", "children", "renderRemove", "onRemove", "onClickAdd", "onAddProps", "onEditProps", "onRemoveProps"];
 var Card = function Card(props) {
   var id = props.id,
     name = props.name,
     label = props.label,
     nested = props.nested,
     title = props.title,
+    titleProps = props.titleProps,
     action = props.action,
     onToggleEdit = props.onToggleEdit,
     editing = props.editing,
@@ -45,26 +45,33 @@ var Card = function Card(props) {
       display: 'flex',
       flexDirection: 'column'
     }
-  }), title && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_styles.Header, null, title && /*#__PURE__*/_react["default"].createElement(_typography["default"], {
+  }), title && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_styles.Header, null, title && /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
     name: name + '-title',
     flex: 1,
     variant: "h6",
     color: "primary"
-  }, title), action, onRemove && !!renderRemove && /*#__PURE__*/_react["default"].createElement(_styles.CardButton, (0, _extends2["default"])({}, onRemoveProps, {
+  }, titleProps), title), /*#__PURE__*/_react["default"].createElement(_styles.ActionsWrapper, null, action, onRemove && !!renderRemove && /*#__PURE__*/_react["default"].createElement(_iconButton["default"], (0, _extends2["default"])({
+    "aria-label": "Excluir"
+  }, onRemoveProps, {
     className: editing ? '' : 'showable-target',
     name: "remove-".concat(name),
-    margin: "-10px 20px",
-    padding: "0px",
+    padding: "4px",
     onClick: onRemove
   }), /*#__PURE__*/_react["default"].createElement(_mui.IconDelete, {
-    htmlColor: feedback.danger
-  })), onToggleEdit && /*#__PURE__*/_react["default"].createElement(_styles.CardButton, (0, _extends2["default"])({}, onEditProps, {
+    color: "error",
+    fontSize: "small"
+  })), onToggleEdit && /*#__PURE__*/_react["default"].createElement(_iconButton["default"], (0, _extends2["default"])({
+    "aria-label": editing ? 'Cancelar' : 'Editar'
+  }, onEditProps, {
     className: editing ? '' : 'showable-target',
     name: "".concat(editing ? 'cancel' : 'edit', "-").concat(name),
-    margin: "-10px",
-    padding: "0px",
+    padding: "4px",
     onClick: onToggleEdit
-  }), editing ? /*#__PURE__*/_react["default"].createElement(_mui.IconClose, null) : /*#__PURE__*/_react["default"].createElement(_mui.IconEdit, null))), /*#__PURE__*/_react["default"].createElement(_line["default"], null)), onClickAdd && /*#__PURE__*/_react["default"].createElement(_addButton["default"], (0, _extends2["default"])({}, onAddProps, {
+  }), editing ? /*#__PURE__*/_react["default"].createElement(_mui.IconClose, {
+    fontSize: "small"
+  }) : /*#__PURE__*/_react["default"].createElement(_mui.IconEdit, {
+    fontSize: "small"
+  })))), /*#__PURE__*/_react["default"].createElement(_line["default"], null)), onClickAdd && /*#__PURE__*/_react["default"].createElement(_addButton["default"], (0, _extends2["default"])({}, onAddProps, {
     name: name,
     label: label,
     onClick: onClickAdd

package/core/surfaces/card/styles.d.ts

@@ -6,6 +6,7 @@ export declare const CardWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CardButton: import("@emotion/styled").StyledComponent<import("@/core/inputs/icon-button").IconButtonProps & {
+export declare const ActionsWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
-}, {}, {}>;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/core/surfaces/card/styles.js

@@ -4,11 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Header = exports.CardWrapper = exports.CardButton = void 0;
+exports.Header = exports.CardWrapper = exports.ActionsWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
 var _templateObject, _templateObject2, _templateObject3;
 var Header = exports.Header = _styled["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));
 var CardWrapper = exports.CardWrapper = _styled["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n"])));
-var CardButton = exports.CardButton = (0, _styled["default"])(_iconButton["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        width: 36px;\n        height: 36px;\n    }\n"])));
+var ActionsWrapper = exports.ActionsWrapper = _styled["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    gap: 4px;\n"])));