@ttoss/ui 1.31.15 → 1.31.16

package/dist/esm/index.js

@@ -86,9 +86,9 @@ var Button = /*#__PURE__*/React3.forwardRef((props, ref) => {
     ...restProps
   } = props;
   return /* @__PURE__ */jsxs3(ButtonUi, {
-    ref,
     type: "button",
     ...restProps,
+    ref,
     sx: {
       cursor: "pointer",
       paddingX: "xl",
@@ -274,7 +274,17 @@ import { Spinner } from "theme-ui";
 import { Radio } from "theme-ui";
 
 // src/components/IconButton.tsx
-import { IconButton } from "theme-ui";
+import * as React6 from "react";
+import { IconButton as IconButtonUi } from "theme-ui";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var IconButton = /*#__PURE__*/React6.forwardRef((props, ref) => {
+  return /* @__PURE__ */jsx8(IconButtonUi, {
+    type: "button",
+    ...props,
+    ref
+  });
+});
+IconButton.displayName = "IconButton";
 
 // src/components/Slider.tsx
 import { Slider } from "theme-ui";
@@ -283,12 +293,12 @@ import { Slider } from "theme-ui";
 import { Checkbox } from "theme-ui";
 
 // src/components/InfiniteLinearProgress.tsx
-import * as React6 from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import * as React7 from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var MAX_PROGRESS = 100;
 var InfiniteLinearProgress = () => {
-  const [progress, setProgress] = React6.useState(0);
-  React6.useEffect(() => {
+  const [progress, setProgress] = React7.useState(0);
+  React7.useEffect(() => {
     const timer = setInterval(() => {
       setProgress(oldProgress => {
         if (oldProgress === MAX_PROGRESS) {
@@ -309,7 +319,7 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */jsx8(Progress, {
+  return /* @__PURE__ */jsx9(Progress, {
     max: MAX_PROGRESS,
     value: progress,
     role: "progressbar"
@@ -323,14 +333,14 @@ import { Textarea } from "theme-ui";
 import { Container } from "theme-ui";
 
 // src/components/HelpText.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var HelpText = ({
   disabled,
   negative,
   ...props
 }) => {
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */jsx9(Text, {
+  return /* @__PURE__ */jsx10(Text, {
     variant,
     "aria-disabled": disabled ? "true" : void 0,
     ...props

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as theme_ui from 'theme-ui';
-import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, SelectProps as SelectProps$1, TextProps } from 'theme-ui';
-export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, IconButton, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Link, LinkProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, Text, TextProps, Textarea, TextareaProps, Theme } from 'theme-ui';
+import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, SelectProps as SelectProps$1, IconButtonProps, TextProps } from 'theme-ui';
+export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Link, LinkProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, Text, TextProps, Textarea, TextareaProps, Theme } from 'theme-ui';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 import * as React from 'react';
 import React__default from 'react';
@@ -49,6 +49,8 @@ declare const Label: ({ children, onTooltipClick, tooltip, ...props }: LabelProp
 type SelectProps = SelectProps$1;
 declare const Select: React__default.ForwardRefExoticComponent<Omit<SelectProps$1, "ref"> & React__default.RefAttributes<HTMLSelectElement>>;
 
+declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
 declare const InfiniteLinearProgress: () => JSX.Element;
 
 type HelpTextProps = Omit<TextProps, 'variant'> & {
@@ -57,4 +59,4 @@ type HelpTextProps = Omit<TextProps, 'variant'> & {
 };
 declare const HelpText: ({ disabled, negative, ...props }: HelpTextProps) => JSX.Element;
 
-export { Badge, BadgeProps, Button, ButtonProps, HelpText, HelpTextProps, Icon, IconProps, IconType, InfiniteLinearProgress, Input, InputProps, Label, LabelProps, Select, SelectProps, ThemeProvider, ThemeProviderProps, useTheme };
+export { Badge, BadgeProps, Button, ButtonProps, HelpText, HelpTextProps, Icon, IconButton, IconProps, IconType, InfiniteLinearProgress, Input, InputProps, Label, LabelProps, Select, SelectProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -51,7 +51,7 @@ __export(src_exports, {
   Heading: () => import_theme_ui10.Heading,
   HelpText: () => HelpText,
   Icon: () => Icon,
-  IconButton: () => import_theme_ui20.IconButton,
+  IconButton: () => IconButton,
   Image: () => import_theme_ui11.Image,
   InfiniteLinearProgress: () => InfiniteLinearProgress,
   Input: () => Input,
@@ -155,9 +155,9 @@ var Button = React3.forwardRef((props, ref) => {
     ...restProps
   } = props;
   return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_theme_ui5.Button, {
-    ref,
     type: "button",
     ...restProps,
+    ref,
     sx: {
       cursor: "pointer",
       paddingX: "xl",
@@ -343,7 +343,17 @@ var import_theme_ui18 = require("theme-ui");
 var import_theme_ui19 = require("theme-ui");
 
 // src/components/IconButton.tsx
+var React6 = __toESM(require("react"));
 var import_theme_ui20 = require("theme-ui");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var IconButton = React6.forwardRef((props, ref) => {
+  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_theme_ui20.IconButton, {
+    type: "button",
+    ...props,
+    ref
+  });
+});
+IconButton.displayName = "IconButton";
 
 // src/components/Slider.tsx
 var import_theme_ui21 = require("theme-ui");
@@ -352,12 +362,12 @@ var import_theme_ui21 = require("theme-ui");
 var import_theme_ui22 = require("theme-ui");
 
 // src/components/InfiniteLinearProgress.tsx
-var React6 = __toESM(require("react"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var React7 = __toESM(require("react"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var MAX_PROGRESS = 100;
 var InfiniteLinearProgress = () => {
-  const [progress, setProgress] = React6.useState(0);
-  React6.useEffect(() => {
+  const [progress, setProgress] = React7.useState(0);
+  React7.useEffect(() => {
     const timer = setInterval(() => {
       setProgress(oldProgress => {
         if (oldProgress === MAX_PROGRESS) {
@@ -378,7 +388,7 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_theme_ui15.Progress, {
+  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_theme_ui15.Progress, {
     max: MAX_PROGRESS,
     value: progress,
     role: "progressbar"
@@ -392,14 +402,14 @@ var import_theme_ui23 = require("theme-ui");
 var import_theme_ui24 = require("theme-ui");
 
 // src/components/HelpText.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var HelpText = ({
   disabled,
   negative,
   ...props
 }) => {
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_theme_ui16.Text, {
+  return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_theme_ui16.Text, {
     variant,
     "aria-disabled": disabled ? "true" : void 0,
     ...props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.31.15",
+  "version": "1.31.16",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -23,9 +23,9 @@
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@iconify-icon/react": "^1.0.7",
-    "@theme-ui/match-media": "^0.15.5",
+    "@theme-ui/match-media": "^0.15.7",
     "@ttoss/theme": "^1.4.13",
-    "theme-ui": "^0.15.5"
+    "theme-ui": "^0.15.7"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "93e161a8af481b0a74c48331c5d193566f3878dc"
+  "gitHead": "aa31505953d2717d84fa5e69dbae5b488ef04986"
 }

package/src/components/Button.tsx

@@ -16,9 +16,9 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     return (
       <ButtonUi
-        ref={ref}
         type="button"
         {...restProps}
+        ref={ref}
         sx={{
           cursor: 'pointer',
           paddingX: 'xl',

package/src/components/IconButton.tsx

@@ -1 +1,12 @@
-export { IconButton, type IconButtonProps } from 'theme-ui';
+import * as React from 'react';
+import { type IconButtonProps, IconButton as IconButtonUi } from 'theme-ui';
+
+export type { IconButtonProps };
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (props, ref) => {
+    return <IconButtonUi type="button" {...props} ref={ref} />;
+  }
+);
+
+IconButton.displayName = 'IconButton';