@ttoss/ui 5.5.7 → 5.5.8

package/dist/esm/index.js

@@ -49,22 +49,54 @@ var ActionButton = ({
   sx,
   ...props
 }) => {
+  const variantStyles = {
+    default: {
+      backgroundColor: "action.background.secondary.default",
+      color: "action.text.primary.default",
+      border: "sm",
+      borderColor: "action.background.primary.default",
+      transition: "all 0.2s",
+      ":is(:focus-within, :hover):not(:disabled)": {
+        backgroundColor: "action.background.secondary.active",
+        borderColor: "action.border.secondary.active",
+        color: "action.text.secondary.active"
+      },
+      ":disabled": {
+        cursor: "default",
+        backgroundColor: "action.background.muted.default",
+        borderColor: "action.border.muted.default",
+        color: "action.text.muted.default"
+      }
+    },
+    accent: {
+      backgroundColor: "action.background.accent.default",
+      color: "action.text.accent.default",
+      border: "none",
+      ":disabled": {
+        cursor: "default",
+        backgroundColor: "action.background.muted.default",
+        color: "action.text.muted.default"
+      }
+    },
+    quiet: {
+      backgroundColor: "action.background.muted.default",
+      color: "action.text.accent.default",
+      border: "none",
+      borderColor: "transparent",
+      ":disabled": {
+        cursor: "default",
+        opacity: 0.6,
+        color: "action.text.muted.default"
+      }
+    }
+  };
   return /* @__PURE__ */jsx2(Button, {
-    variant: `buttons.actionButton.${variant}`,
     leftIcon: icon,
     sx: {
-      padding: "2",
-      gap: "4",
-      fontFamily: "body",
-      borderRadius: "action",
-      outlineColor: "transparent",
-      ":disabled": props.disabled ? {
-        backgroundColor: "muted",
-        color: "onMuted",
-        cursor: "not-allowed",
-        border: "muted",
-        borderColor: "onMuted"
-      } : void 0,
+      paddingY: "2",
+      paddingX: "4",
+      // Apply variant-specific styles
+      ...variantStyles[variant],
       ...sx
     },
     ...props
@@ -317,23 +349,31 @@ var HelpText = ({
 };
 
 // src/components/IconButton.tsx
-import * as React4 from "react";
+import { Icon as Icon4 } from "@ttoss/react-icons";
 import { IconButton as IconButtonUi } from "theme-ui";
 import { jsx as jsx9 } from "react/jsx-runtime";
-var IconButton = React4.forwardRef((props, ref) => {
+var IconButton = props => {
+  const {
+    icon,
+    children,
+    ...restProps
+  } = props;
   return /* @__PURE__ */jsx9(IconButtonUi, {
     type: "button",
-    ...props,
-    ref
+    ...restProps,
+    children: icon ? /* @__PURE__ */jsx9(Icon4, {
+      inline: true,
+      icon
+    }) : children
   });
-});
+};
 IconButton.displayName = "IconButton";
 
 // src/components/Image.tsx
 import { Image } from "theme-ui";
 
 // src/components/InfiniteLinearProgress.tsx
-import * as React5 from "react";
+import * as React4 from "react";
 
 // src/components/LinearProgress.tsx
 import { Progress } from "theme-ui";
@@ -342,8 +382,8 @@ import { Progress } from "theme-ui";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var MAX_PROGRESS = 100;
 var InfiniteLinearProgress = () => {
-  const [progress, setProgress] = React5.useState(0);
-  React5.useEffect(() => {
+  const [progress, setProgress] = React4.useState(0);
+  React4.useEffect(() => {
     const timer = setInterval(() => {
       setProgress(oldProgress => {
         if (oldProgress === MAX_PROGRESS) {
@@ -372,11 +412,11 @@ var InfiniteLinearProgress = () => {
 };
 
 // src/components/Input.tsx
-import { Icon as Icon4 } from "@ttoss/react-icons";
-import * as React6 from "react";
+import { Icon as Icon5 } from "@ttoss/react-icons";
+import * as React5 from "react";
 import { Input as InputUI } from "theme-ui";
 import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
-var Input = React6.forwardRef(({
+var Input = React5.forwardRef(({
   leadingIcon,
   trailingIcon: trailingIconProp,
   onLeadingIconClick,
@@ -404,7 +444,7 @@ var Input = React6.forwardRef(({
       },
       onClick: onLeadingIconClick,
       variant: "leading-icon",
-      children: /* @__PURE__ */jsx11(Icon4, {
+      children: /* @__PURE__ */jsx11(Icon5, {
         inline: true,
         icon: leadingIcon
       })
@@ -432,7 +472,7 @@ var Input = React6.forwardRef(({
       },
       variant: "trailing-icon",
       onClick: onTrailingIconClick,
-      children: /* @__PURE__ */jsx11(Icon4, {
+      children: /* @__PURE__ */jsx11(Icon5, {
         inline: true,
         icon: trailingIcon
       })
@@ -442,11 +482,11 @@ var Input = React6.forwardRef(({
 Input.displayName = "Input";
 
 // src/components/InputNumber.tsx
-import { Icon as Icon5 } from "@ttoss/react-icons";
-import * as React7 from "react";
+import { Icon as Icon6 } from "@ttoss/react-icons";
+import * as React6 from "react";
 import { Input as Input2 } from "theme-ui";
 import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
-var InputNumber = React7.forwardRef(({
+var InputNumber = React6.forwardRef(({
   sx,
   value,
   infoIcon,
@@ -454,7 +494,7 @@ var InputNumber = React7.forwardRef(({
   onClickInfoIcon,
   ...inputProps
 }, ref) => {
-  const sxProps = React7.useMemo(() => {
+  const sxProps = React6.useMemo(() => {
     const size = String(typeof value === "undefined" ? 0 : value).length;
     if (inputProps["aria-invalid"] === "true") {
       return {
@@ -535,7 +575,7 @@ var InputNumber = React7.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeUp,
-      children: /* @__PURE__ */jsx12(Icon5, {
+      children: /* @__PURE__ */jsx12(Icon6, {
         icon: "picker-down"
       })
     }), infoIcon && /* @__PURE__ */jsx12(Text, {
@@ -547,7 +587,7 @@ var InputNumber = React7.forwardRef(({
         cursor: onClickInfoIcon ? "pointer" : "default"
       },
       onClick: onClickInfoIcon,
-      children: /* @__PURE__ */jsx12(Icon5, {
+      children: /* @__PURE__ */jsx12(Icon6, {
         icon: "info"
       })
     }), /* @__PURE__ */jsx12(Text, {
@@ -559,7 +599,7 @@ var InputNumber = React7.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeDown,
-      children: /* @__PURE__ */jsx12(Icon5, {
+      children: /* @__PURE__ */jsx12(Icon6, {
         icon: "picker-up"
       })
     })]
@@ -568,16 +608,16 @@ var InputNumber = React7.forwardRef(({
 InputNumber.displayName = "InputNumber";
 
 // src/components/InputPassword/InputPassword.tsx
-import * as React9 from "react";
+import * as React8 from "react";
 
 // src/components/InputPassword/useHidePassInput.ts
-import * as React8 from "react";
+import * as React7 from "react";
 var useHidePassInput = (defaultValue = true) => {
-  const [hidePass, setHidePass] = React8.useState(Boolean(defaultValue));
+  const [hidePass, setHidePass] = React7.useState(Boolean(defaultValue));
   const {
     icon,
     inputType
-  } = React8.useMemo(() => {
+  } = React7.useMemo(() => {
     return {
       icon: hidePass ? "view-off" : "view-on",
       inputType: hidePass ? "password" : "text"
@@ -597,7 +637,7 @@ var useHidePassInput = (defaultValue = true) => {
 
 // src/components/InputPassword/InputPassword.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
-var InputPassword = React9.forwardRef(({
+var InputPassword = React8.forwardRef(({
   showPasswordByDefault,
   ...inputPasswordProps
 }, ref) => {
@@ -617,8 +657,8 @@ var InputPassword = React9.forwardRef(({
 InputPassword.displayName = "InputPassword";
 
 // src/components/Label.tsx
-import { Icon as Icon6 } from "@ttoss/react-icons";
-import * as React10 from "react";
+import { Icon as Icon7 } from "@ttoss/react-icons";
+import * as React9 from "react";
 import { Label as LabelUi } from "theme-ui";
 import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var TOOLTIP_LABEL = "tooltip";
@@ -628,7 +668,7 @@ var Label = ({
   sx,
   ...props
 }) => {
-  const id = React10.useId();
+  const id = React9.useId();
   const tooltipId = `${id}-tooltip`;
   return /* @__PURE__ */jsxs6(LabelUi, {
     "data-tooltip-id": tooltipId,
@@ -647,7 +687,7 @@ var Label = ({
         cursor: "pointer"
       },
       "aria-label": TOOLTIP_LABEL,
-      children: [/* @__PURE__ */jsx14(Icon6, {
+      children: [/* @__PURE__ */jsx14(Icon7, {
         inline: true,
         icon: "fluent:info-24-regular"
       }), /* @__PURE__ */jsx14(Tooltip, {
@@ -662,10 +702,10 @@ var Label = ({
 };
 
 // src/components/Link.tsx
-import * as React11 from "react";
+import * as React10 from "react";
 import { Link as LinkUi } from "theme-ui";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var Link = React11.forwardRef(({
+var Link = React10.forwardRef(({
   quiet,
   className,
   ...props
@@ -685,8 +725,8 @@ import { Paragraph } from "theme-ui";
 import { Radio } from "theme-ui";
 
 // src/components/Select.tsx
-import { Icon as Icon7 } from "@ttoss/react-icons";
-import * as React12 from "react";
+import { Icon as Icon8 } from "@ttoss/react-icons";
+import * as React11 from "react";
 import ReactSelect, { components } from "react-select";
 import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var Control = props => {
@@ -737,7 +777,7 @@ var DropdownIndicator = props => {
       display: "flex",
       alignItems: "center"
     },
-    children: /* @__PURE__ */jsx16(Icon7, {
+    children: /* @__PURE__ */jsx16(Icon8, {
       icon: "picker-down"
     })
   });
@@ -820,7 +860,7 @@ var ValueContainer = ({
         lineHeight: 0,
         fontSize: "md"
       },
-      children: /* @__PURE__ */jsx16(Icon7, {
+      children: /* @__PURE__ */jsx16(Icon8, {
         icon: finalLeadingIcon
       })
     }), /* @__PURE__ */jsx16(Flex, {
@@ -838,13 +878,13 @@ var ValueContainer = ({
         fontSize: "md",
         color: trailingIconColor
       },
-      children: /* @__PURE__ */jsx16(Icon7, {
+      children: /* @__PURE__ */jsx16(Icon8, {
         icon: hasError ? "warning-alt" : trailingIcon
       })
     })]
   });
 };
-var Select = React12.forwardRef(({
+var Select = React11.forwardRef(({
   ...props
 }, ref) => {
   const value = props.options?.find(option => {
@@ -930,11 +970,11 @@ var Switch = props => {
 };
 
 // src/components/Textarea.tsx
-import { Icon as Icon8 } from "@ttoss/react-icons";
-import * as React13 from "react";
+import { Icon as Icon9 } from "@ttoss/react-icons";
+import * as React12 from "react";
 import { Textarea as TextareaUI } from "theme-ui";
 import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
-var Textarea = React13.forwardRef(({
+var Textarea = React12.forwardRef(({
   trailingIcon,
   className,
   sx,
@@ -966,7 +1006,7 @@ var Textarea = React13.forwardRef(({
         right: "1.25rem",
         top: "0.75rem"
       },
-      children: /* @__PURE__ */jsx19(Icon8, {
+      children: /* @__PURE__ */jsx19(Icon9, {
         inline: true,
         icon: trailingIcon
       })

package/dist/index.d.ts

@@ -2,8 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconType } from '@ttoss/react-icons';
 import * as React from 'react';
 import * as theme_ui from 'theme-ui';
-import { ButtonProps as ButtonProps$1, BadgeProps as BadgeProps$1, CardProps, BoxProps, CheckboxProps as CheckboxProps$1, TextProps, IconButtonProps, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, SxProp, FlexProps, SwitchProps, TextareaProps as TextareaProps$1, Theme } from 'theme-ui';
-export { BaseStyles, Box, BoxProps, CardProps, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Paragraph, ParagraphProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, SwitchProps, SxProp, Text, TextProps, Theme, ThemeUIStyleObject } from 'theme-ui';
+import { ButtonProps as ButtonProps$1, BadgeProps as BadgeProps$1, CardProps, BoxProps, CheckboxProps as CheckboxProps$1, TextProps, IconButtonProps as IconButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, SxProp, FlexProps, SwitchProps, TextareaProps as TextareaProps$1, Theme } from 'theme-ui';
+export { BaseStyles, Box, BoxProps, CardProps, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Paragraph, ParagraphProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, SwitchProps, SxProp, Text, TextProps, Theme, ThemeUIStyleObject } from 'theme-ui';
 import { Props } from 'react-select';
 import { ITooltip } from 'react-tooltip';
 export { Keyframes, keyframes } from '@emotion/react';
@@ -54,7 +54,13 @@ type HelpTextProps = Omit<TextProps, 'variant'> & {
 };
 declare const HelpText: ({ sx, disabled, negative, ...props }: HelpTextProps) => react_jsx_runtime.JSX.Element;
 
-declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type IconButtonProps = IconButtonProps$1 & {
+    icon?: string;
+};
+declare const IconButton: {
+    (props: IconButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 declare const InfiniteLinearProgress: () => react_jsx_runtime.JSX.Element;
 
@@ -155,4 +161,4 @@ declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) =
 
 declare const useTheme: () => theme_ui.ThemeUIContextValue;
 
-export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Card, Checkbox, type CheckboxProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Switch, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, Tooltip, useTheme };
+export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Card, Checkbox, type CheckboxProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, type IconButtonProps, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Switch, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, Tooltip, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.5.7",
+  "version": "5.5.8",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",
@@ -28,7 +28,7 @@
     "react-select": "^5.9.0",
     "react-tooltip": "^5.28.0",
     "theme-ui": "^0.17.1",
-    "@ttoss/theme": "^2.5.6"
+    "@ttoss/theme": "^2.5.7"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -43,9 +43,9 @@
     "jest": "^29.7.0",
     "react": "^19.0.0",
     "tsup": "^8.3.5",
-    "@ttoss/config": "^1.35.3",
     "@ttoss/test-utils": "^2.1.23",
-    "@ttoss/react-icons": "^0.4.11"
+    "@ttoss/react-icons": "^0.4.11",
+    "@ttoss/config": "^1.35.3"
   },
   "keywords": [
     "React",