@ttoss/ui 5.0.6 → 5.0.7

package/dist/esm/index.js

@@ -0,0 +1,902 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+
+// src/index.ts
+import { BaseStyles, Global as Global2 } from "theme-ui";
+import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
+import { keyframes } from "@emotion/react";
+
+// src/theme/ThemeProvider.tsx
+import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
+import { Global, css } from "@emotion/react";
+import { ThemeUIProvider } from "theme-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ThemeProvider = ({
+  children,
+  theme = BruttalTheme,
+  fonts = BruttalFonts
+}) => {
+  return /* @__PURE__ */jsx(Fragment, {
+    children: /* @__PURE__ */jsxs(ThemeUIProvider, {
+      theme,
+      children: [/* @__PURE__ */jsx(Global, {
+        styles: css`
+            ${fonts.map(url => {
+          return `@import url('${url}');`;
+        }).join("\n")}
+          `
+      }), children]
+    })
+  });
+};
+
+// src/theme/useTheme.ts
+import { useThemeUI } from "theme-ui";
+var useTheme = useThemeUI;
+
+// src/components/Badge.tsx
+import { Badge as BadgeUi } from "theme-ui";
+import { Icon } from "@ttoss/react-icons";
+
+// src/components/Text.tsx
+import { Text } from "theme-ui";
+
+// src/components/Badge.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Badge = ({
+  icon,
+  children,
+  sx,
+  chip,
+  onDelete,
+  ...props
+}) => {
+  return /* @__PURE__ */jsxs2(BadgeUi, {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      fontFamily: "caption",
+      fontWeight: "normal",
+      lineHeight: "base",
+      fontSize: "sm",
+      paddingX: "xs",
+      borderRadius: "informative",
+      paddingY: "2xs",
+      gap: "xs",
+      ...sx
+    },
+    ...props,
+    children: [icon && /* @__PURE__ */jsx2(Icon, {
+      inline: true,
+      icon
+    }), children, chip && /* @__PURE__ */jsx2(Text, {
+      sx: {
+        cursor: "pointer",
+        lineHeight: 0,
+        color: "currentcolor",
+        alignSelf: "center"
+      },
+      children: /* @__PURE__ */jsx2(Icon, {
+        onClick: onDelete,
+        inline: true,
+        icon: "close"
+      })
+    })]
+  });
+};
+
+// src/components/Box.tsx
+import { Box } from "theme-ui";
+
+// src/components/Button.tsx
+import * as React from "react";
+import { Button as ButtonUi } from "theme-ui";
+import { Icon as Icon2 } from "@ttoss/react-icons";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Button = React.forwardRef((props, ref) => {
+  const {
+    children,
+    leftIcon,
+    rightIcon,
+    loading,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */jsxs3(ButtonUi, {
+    type: "button",
+    ...restProps,
+    ref,
+    sx: {
+      cursor: "pointer",
+      paddingX: "xl",
+      paddingY: "lg",
+      fontFamily: "body",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "lg",
+      ...restProps.sx
+    },
+    children: [loading && /* @__PURE__ */jsx3(Icon2, {
+      inline: true,
+      icon: "three-dots-loading"
+    }), !loading && leftIcon && /* @__PURE__ */jsx3(Icon2, {
+      inline: true,
+      icon: leftIcon
+    }), children, rightIcon && /* @__PURE__ */jsx3(Icon2, {
+      inline: true,
+      icon: rightIcon
+    })]
+  });
+});
+Button.displayName = "Button";
+
+// src/components/Card.tsx
+import { Card } from "theme-ui";
+
+// src/components/Divider.tsx
+import { Divider } from "theme-ui";
+
+// src/components/Flex.tsx
+import { Flex } from "theme-ui";
+
+// src/components/Grid.tsx
+import { Grid } from "theme-ui";
+
+// src/components/Heading.tsx
+import { Heading } from "theme-ui";
+
+// src/components/Image.tsx
+import { Image } from "theme-ui";
+
+// src/components/Input.tsx
+import * as React2 from "react";
+import { Icon as Icon3 } from "@ttoss/react-icons";
+import { Input as InputUI } from "theme-ui";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Input = React2.forwardRef(({
+  leadingIcon,
+  trailingIcon: trailingIconProp,
+  onLeadingIconClick,
+  onTrailingIconClick,
+  className,
+  sx,
+  ...inputProps
+}, ref) => {
+  const trailingIcon = inputProps["aria-invalid"] ? "warning-alt" : trailingIconProp;
+  return /* @__PURE__ */jsxs4(Flex, {
+    className,
+    sx: {
+      ...sx,
+      position: "relative",
+      padding: 0,
+      border: "none"
+    },
+    children: [leadingIcon && /* @__PURE__ */jsx4(Text, {
+      sx: {
+        position: "absolute",
+        alignSelf: "center",
+        left: "1rem",
+        cursor: onLeadingIconClick ? "pointer" : "default"
+      },
+      onClick: onLeadingIconClick,
+      variant: "leading-icon",
+      children: /* @__PURE__ */jsx4(Icon3, {
+        inline: true,
+        icon: leadingIcon
+      })
+    }), /* @__PURE__ */jsx4(InputUI, {
+      ref,
+      sx: {
+        fontFamily: "body",
+        paddingY: "lg",
+        paddingX: "xl",
+        ...sx,
+        paddingLeft: leadingIcon ? "3xl" : void 0,
+        paddingRight: trailingIcon ? "3xl" : void 0,
+        margin: 0
+      },
+      className,
+      ...inputProps
+    }), trailingIcon && /* @__PURE__ */jsx4(Text, {
+      sx: {
+        position: "absolute",
+        right: "1rem",
+        alignSelf: "center",
+        cursor: onTrailingIconClick ? "pointer" : "default"
+      },
+      variant: "trailing-icon",
+      onClick: onTrailingIconClick,
+      children: /* @__PURE__ */jsx4(Icon3, {
+        inline: true,
+        icon: trailingIcon
+      })
+    })]
+  });
+});
+Input.displayName = "Input";
+
+// src/components/Label.tsx
+import { Icon as Icon4 } from "@ttoss/react-icons";
+import { Label as LabelUi } from "theme-ui";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var TOOLTIP_LABEL = "tooltip";
+var Label = ({
+  children,
+  onTooltipClick,
+  tooltip,
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */jsxs5(LabelUi, {
+    sx: {
+      fontFamily: "caption",
+      alignItems: "center",
+      fontSize: "sm",
+      lineHeight: "base",
+      ...sx
+    },
+    ...props,
+    children: [children, tooltip && /* @__PURE__ */jsx5(Text, {
+      sx: {
+        color: "currentcolor",
+        cursor: onTooltipClick ? "pointer" : void 0
+      },
+      onClick: onTooltipClick,
+      "aria-label": TOOLTIP_LABEL,
+      children: /* @__PURE__ */jsx5(Icon4, {
+        inline: true,
+        icon: "info"
+      })
+    })]
+  });
+};
+
+// src/components/Link.tsx
+import * as React3 from "react";
+import { Link as LinkUi } from "theme-ui";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Link = React3.forwardRef(({
+  quiet,
+  className,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */jsx6(LinkUi, {
+    className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
+    ...props,
+    ref
+  });
+});
+Link.displayName = "Link";
+
+// src/components/LinearProgress.tsx
+import { Progress } from "theme-ui";
+
+// src/components/Select.tsx
+import * as React4 from "react";
+import { Icon as Icon5 } from "@ttoss/react-icons";
+import ReactSelect, { components } from "react-select";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var Control = props => {
+  const isDisabled = props.selectProps.isDisabled;
+  const hasError = props.selectProps["aria-invalid"] === "true";
+  const border = (() => {
+    if (isDisabled) {
+      return "muted";
+    }
+    if (hasError) {
+      return "danger";
+    }
+    return "interaction";
+  })();
+  const backgroundColor = (() => {
+    if (isDisabled) {
+      return "muted";
+    }
+    return "surface";
+  })();
+  return /* @__PURE__ */jsx7(Box, {
+    sx: {
+      ".react-select__control": {
+        border,
+        backgroundColor,
+        paddingX: "xl",
+        paddingY: "lg",
+        borderRadius: "action"
+      }
+    },
+    children: /* @__PURE__ */jsx7(components.Control, {
+      ...props
+    })
+  });
+};
+var DropdownIndicator = props => {
+  const isDisabled = props.selectProps.isDisabled;
+  const color = (() => {
+    if (isDisabled) {
+      return "onMuted";
+    }
+    return "text";
+  })();
+  return /* @__PURE__ */jsx7(Text, {
+    sx: {
+      fontSize: "base",
+      color,
+      alignSelf: "center",
+      display: "flex",
+      alignItems: "center"
+    },
+    children: /* @__PURE__ */jsx7(Icon5, {
+      icon: "picker-down"
+    })
+  });
+};
+var IndicatorsContainer = ({
+  children
+}) => {
+  return /* @__PURE__ */jsx7(Box, {
+    sx: {
+      marginLeft: "lg",
+      border: "none"
+    },
+    children
+  });
+};
+var Placeholder = ({
+  children
+}) => {
+  return /* @__PURE__ */jsx7(Text, {
+    sx: {
+      color: "onMuted",
+      alignSelf: "center"
+    },
+    children
+  });
+};
+var SelectContainer = ({
+  children,
+  ...props
+}) => {
+  const {
+    sx,
+    css: css2
+  } = props.selectProps;
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    /* @__PURE__ */
+    jsx7(Box, {
+      sx,
+      css: css2,
+      children: /* @__PURE__ */jsx7(components.SelectContainer, {
+        ...props,
+        children
+      })
+    })
+  );
+};
+var ValueContainer = ({
+  children,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ...props
+}) => {
+  const {
+    leadingIcon,
+    trailingIcon,
+    isSearchable
+  } = props.selectProps;
+  const hasError = props.selectProps["aria-invalid"] === "true";
+  const trailingIconColor = (() => {
+    if (hasError) {
+      return "danger";
+    }
+    return "text";
+  })();
+  const finalLeadingIcon = (() => {
+    if (!isSearchable) {
+      return leadingIcon;
+    }
+    return leadingIcon || "search";
+  })();
+  return /* @__PURE__ */jsxs6(Flex, {
+    sx: {
+      gap: "lg",
+      flex: 1
+    },
+    children: [finalLeadingIcon && /* @__PURE__ */jsx7(Text, {
+      sx: {
+        alignSelf: "center",
+        pointerEvents: "none",
+        lineHeight: 0,
+        fontSize: "base"
+      },
+      children: /* @__PURE__ */jsx7(Icon5, {
+        icon: finalLeadingIcon
+      })
+    }), /* @__PURE__ */jsx7(Flex, {
+      sx: {
+        flex: 1,
+        alignItems: "center"
+      },
+      children
+    }), (trailingIcon || hasError) && /* @__PURE__ */jsx7(Text, {
+      className: hasError ? "error-icon" : "",
+      sx: {
+        alignSelf: "center",
+        pointerEvents: "none",
+        lineHeight: 0,
+        fontSize: "base",
+        color: trailingIconColor
+      },
+      children: /* @__PURE__ */jsx7(Icon5, {
+        icon: hasError ? "warning-alt" : trailingIcon
+      })
+    })]
+  });
+};
+var Select = React4.forwardRef(({
+  ...props
+}, ref) => {
+  const value = props.options?.find(option => {
+    if ("value" in option) {
+      return option.value === props.value;
+    }
+    return false;
+  });
+  return /* @__PURE__ */jsx7(ReactSelect, {
+    ref,
+    components: {
+      Control,
+      DropdownIndicator,
+      IndicatorsContainer,
+      Placeholder,
+      SelectContainer,
+      ValueContainer
+    },
+    isDisabled: props.disabled,
+    ...props,
+    value,
+    onChange: value2 => {
+      props.onChange?.(value2?.value);
+    },
+    styles: {
+      input: baseStyles => {
+        return {
+          ...baseStyles,
+          position: "absolute"
+        };
+      }
+    },
+    classNamePrefix: "react-select"
+  });
+});
+Select.displayName = "Select";
+
+// src/components/Spinner.tsx
+import { Spinner } from "theme-ui";
+
+// src/components/Radio.tsx
+import { Radio } from "theme-ui";
+
+// src/components/IconButton.tsx
+import * as React5 from "react";
+import { IconButton as IconButtonUi } from "theme-ui";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var IconButton = React5.forwardRef((props, ref) => {
+  return /* @__PURE__ */jsx8(IconButtonUi, {
+    type: "button",
+    ...props,
+    ref
+  });
+});
+IconButton.displayName = "IconButton";
+
+// src/components/Slider.tsx
+import { Slider } from "theme-ui";
+
+// src/components/Checkbox.tsx
+import * as React6 from "react";
+import { Checkbox as CheckBoxUi } from "theme-ui";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Checkbox = React6.forwardRef(({
+  indeterminate = false,
+  ...rest
+}, ref) => {
+  const innerRef = React6.useRef(null);
+  React6.useImperativeHandle(ref, () => {
+    return innerRef.current;
+  });
+  React6.useEffect(() => {
+    if (innerRef.current) {
+      innerRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  if (indeterminate) {
+    return /* @__PURE__ */jsx9("input", {
+      type: "checkbox",
+      ref: innerRef,
+      ...rest
+    });
+  }
+  return /* @__PURE__ */jsx9(CheckBoxUi, {
+    ref: innerRef,
+    ...rest
+  });
+});
+Checkbox.displayName = "Checkbox";
+
+// src/components/InfiniteLinearProgress.tsx
+import * as React7 from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var MAX_PROGRESS = 100;
+var InfiniteLinearProgress = () => {
+  const [progress, setProgress] = React7.useState(0);
+  React7.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress(oldProgress => {
+        if (oldProgress === MAX_PROGRESS) {
+          return 0;
+        }
+        let diff = 0;
+        if (oldProgress > 0.97 * MAX_PROGRESS) {
+          diff -= 0.75 * MAX_PROGRESS;
+        } else if (oldProgress > 0.6 * MAX_PROGRESS) {
+          diff = Math.random() * (MAX_PROGRESS - oldProgress) * 0.1;
+        } else {
+          diff = Math.random() * (MAX_PROGRESS * 0.02);
+        }
+        return Math.min(oldProgress + diff, MAX_PROGRESS);
+      });
+    }, 100);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+  return /* @__PURE__ */jsx10(Progress, {
+    max: MAX_PROGRESS,
+    value: progress,
+    role: "progressbar"
+  });
+};
+
+// src/components/Textarea.tsx
+import * as React8 from "react";
+import { Icon as Icon6 } from "@ttoss/react-icons";
+import { Textarea as TextareaUI } from "theme-ui";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var Textarea = React8.forwardRef(({
+  trailingIcon,
+  className,
+  sx,
+  ...textareaProps
+}, ref) => {
+  return /* @__PURE__ */jsxs7(Flex, {
+    className,
+    sx: {
+      ...sx,
+      position: "relative",
+      padding: 0,
+      border: "none"
+    },
+    children: [/* @__PURE__ */jsx11(TextareaUI, {
+      ref,
+      sx: {
+        fontFamily: "body",
+        paddingY: "lg",
+        paddingX: "xl",
+        ...sx,
+        paddingRight: trailingIcon ? "3xl" : void 0,
+        margin: 0
+      },
+      className,
+      ...textareaProps
+    }), trailingIcon && /* @__PURE__ */jsx11(Text, {
+      sx: {
+        position: "absolute",
+        right: "1.25rem",
+        top: "0.75rem"
+      },
+      children: /* @__PURE__ */jsx11(Icon6, {
+        inline: true,
+        icon: trailingIcon
+      })
+    })]
+  });
+});
+Textarea.displayName = "Textarea";
+
+// src/components/Container.tsx
+import * as React9 from "react";
+import { Container as ContainerUi } from "theme-ui";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Container = React9.forwardRef((props, ref) => {
+  return /* @__PURE__ */jsx12(ContainerUi, {
+    ref,
+    ...props
+  });
+});
+Container.displayName = "Container";
+
+// src/components/HelpText.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var HelpText = ({
+  sx,
+  disabled,
+  negative,
+  ...props
+}) => {
+  const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
+  return /* @__PURE__ */jsx13(Text, {
+    variant,
+    sx: {
+      fontSize: "sm",
+      fontFamily: "caption",
+      lineHeight: "base",
+      ...sx
+    },
+    "aria-disabled": disabled ? "true" : void 0,
+    ...props
+  });
+};
+
+// src/components/CloseButton.tsx
+import * as React10 from "react";
+import { Icon as Icon7 } from "@ttoss/react-icons";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var CloseButton = React10.forwardRef(({
+  label,
+  sx,
+  onlyText,
+  ...props
+}, ref) => {
+  if (onlyText && !label) {
+    return null;
+  }
+  return /* @__PURE__ */jsxs8(Button, {
+    variant: "buttons.closeButton",
+    type: "button",
+    "aria-label": label,
+    sx: {
+      fontFamily: "caption",
+      fontSize: "xs",
+      display: "inline-flex",
+      alignItems: "center",
+      cursor: "pointer",
+      lineHeight: "normal",
+      gap: "sm",
+      padding: "sm",
+      width: "fit-content",
+      transition: "all 0.2s",
+      "& > iconify-icon": {
+        fontSize: "base"
+      },
+      ...sx
+    },
+    ...props,
+    ref,
+    children: [label, !onlyText && /* @__PURE__ */jsx14(Icon7, {
+      icon: "close"
+    })]
+  });
+});
+CloseButton.displayName = "CloseButton";
+
+// src/components/InputNumber.tsx
+import * as React11 from "react";
+import { Icon as Icon8 } from "@ttoss/react-icons";
+import { Input as Input2 } from "theme-ui";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var InputNumber = React11.forwardRef(({
+  sx,
+  value,
+  infoIcon,
+  onChange,
+  onClickInfoIcon,
+  ...inputProps
+}, ref) => {
+  const sxProps = React11.useMemo(() => {
+    const size = String(typeof value === "undefined" ? 0 : value).length;
+    if (inputProps["aria-invalid"] === "true") {
+      return {
+        width: `calc(139px + ${size > 1 ? size * 10 : 0}px)`,
+        textAlign: "left",
+        "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
+          WebkitAppearance: "none",
+          margin: 0
+        },
+        ...sx,
+        paddingLeft: "3xl",
+        paddingRight: "2xl",
+        margin: 0
+      };
+    }
+    return {
+      width: `calc(108px + ${size > 1 ? size * 10 : 0}px)`,
+      textAlign: "center",
+      "&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-outer-spin-button": {
+        WebkitAppearance: "none",
+        margin: 0
+      },
+      fontFamily: "body",
+      paddingY: "lg",
+      paddingX: "xl",
+      ...sx,
+      paddingLeft: "2xl",
+      paddingRight: "2xl",
+      margin: 0
+    };
+  }, [inputProps, value, sx]);
+  const handleChangeUp = () => {
+    if (inputProps.disabled) {
+      return;
+    }
+    if (typeof value !== "number") {
+      onChange(-1);
+      return;
+    }
+    onChange(value - 1);
+  };
+  const handleChangeDown = () => {
+    if (inputProps.disabled) {
+      return;
+    }
+    if (typeof value !== "number") {
+      onChange(1);
+      return;
+    }
+    onChange(value + 1);
+  };
+  return /* @__PURE__ */jsxs9(Flex, {
+    sx: {
+      width: "fit-content",
+      ...sx,
+      position: "relative",
+      padding: 0,
+      border: "none"
+    },
+    ref,
+    "aria-invalid": inputProps["aria-invalid"],
+    children: [/* @__PURE__ */jsx15(Input2, {
+      ref,
+      variant: "forms.inputNumber",
+      sx: sxProps,
+      type: "number",
+      onChange: e => {
+        onChange(Number(e.target.value));
+      },
+      value,
+      ...inputProps
+    }), /* @__PURE__ */jsx15(Text, {
+      sx: {
+        position: "absolute",
+        alignSelf: "center",
+        left: "1rem",
+        zIndex: 1,
+        cursor: "pointer"
+      },
+      onClick: handleChangeUp,
+      children: /* @__PURE__ */jsx15(Icon8, {
+        icon: "picker-down"
+      })
+    }), infoIcon && /* @__PURE__ */jsx15(Text, {
+      sx: {
+        position: "absolute",
+        alignSelf: "center",
+        right: "2.5rem",
+        zIndex: 1,
+        cursor: onClickInfoIcon ? "pointer" : "default"
+      },
+      onClick: onClickInfoIcon,
+      children: /* @__PURE__ */jsx15(Icon8, {
+        icon: "info"
+      })
+    }), /* @__PURE__ */jsx15(Text, {
+      sx: {
+        position: "absolute",
+        alignSelf: "center",
+        right: "1rem",
+        zIndex: 1,
+        cursor: "pointer"
+      },
+      onClick: handleChangeDown,
+      children: /* @__PURE__ */jsx15(Icon8, {
+        icon: "picker-up"
+      })
+    })]
+  });
+});
+InputNumber.displayName = "InputNumber";
+
+// src/components/Stack.tsx
+import * as React12 from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Stack = React12.forwardRef((props, ref) => {
+  return /* @__PURE__ */jsx16(Flex, {
+    ref,
+    ...props,
+    sx: {
+      flexDirection: "column",
+      ...props.sx
+    }
+  });
+});
+Stack.displayName = "Stack";
+
+// src/components/Paragraph.tsx
+import { Paragraph } from "theme-ui";
+
+// src/components/InputPassword/InputPassword.tsx
+import * as React14 from "react";
+
+// src/components/InputPassword/useHidePassInput.ts
+import * as React13 from "react";
+var useHidePassInput = (defaultValue = true) => {
+  const [hidePass, setHidePass] = React13.useState(Boolean(defaultValue));
+  const {
+    icon,
+    inputType
+  } = React13.useMemo(() => {
+    return {
+      icon: hidePass ? "view-off" : "view-on",
+      inputType: hidePass ? "password" : "text"
+    };
+  }, [hidePass]);
+  const handleClick = () => {
+    setHidePass(prev => {
+      return !prev;
+    });
+  };
+  return {
+    handleClick,
+    icon,
+    inputType
+  };
+};
+
+// src/components/InputPassword/InputPassword.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var InputPassword = React14.forwardRef(({
+  showPasswordByDefault,
+  ...inputPasswordProps
+}, ref) => {
+  const {
+    handleClick,
+    icon,
+    inputType
+  } = useHidePassInput(!showPasswordByDefault);
+  return /* @__PURE__ */jsx17(Input, {
+    ref,
+    ...inputPasswordProps,
+    trailingIcon: icon,
+    onTrailingIconClick: handleClick,
+    type: inputType
+  });
+});
+InputPassword.displayName = "InputPassword";
+
+// src/components/ActionButton.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+var ActionButton = ({
+  icon,
+  variant = "default",
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx18(Button, {
+    variant: `buttons.actionButton.${variant}`,
+    leftIcon: icon,
+    sx: {
+      padding: "sm",
+      gap: "xs",
+      fontFamily: "caption",
+      borderRadius: "action",
+      outlineColor: "transparent",
+      ":disabled": props.disabled ? {
+        backgroundColor: "muted",
+        color: "onMuted",
+        cursor: "not-allowed",
+        border: "muted",
+        borderColor: "onMuted"
+      } : void 0,
+      ...sx
+    },
+    ...props
+  });
+};
+export { ActionButton, Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, InputPassword, Label, Progress as LinearProgress, Link, Paragraph, Radio, Select, Slider, Spinner, Stack, Text, Textarea, ThemeProvider, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };

package/dist/index.d.ts

@@ -0,0 +1,143 @@
+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, LinkProps as LinkProps$1, SxProp, IconButtonProps, CheckboxProps as CheckboxProps$1, TextareaProps as TextareaProps$1, TextProps, FlexProps } from 'theme-ui';
+export { BaseStyles, Box, BoxProps, Card, 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, SxProp, Text, TextProps, Theme, ThemeUIStyleObject } from 'theme-ui';
+export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
+export { Keyframes, keyframes } from '@emotion/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { IconType } from '@ttoss/react-icons';
+import { Props } from 'react-select';
+
+type ThemeProviderProps = {
+    children?: React.ReactNode;
+    theme?: Theme;
+    /**
+     * Fonts URLs.
+     */
+    fonts?: string[];
+};
+declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
+
+declare const useTheme: () => theme_ui.ThemeUIContextValue;
+
+type BadgeProps = BadgeProps$1 & {
+    icon?: IconType;
+    chip?: boolean;
+    onDelete?: () => void;
+};
+declare const Badge: ({ icon, children, sx, chip, onDelete, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
+
+type ButtonProps = ButtonProps$1 & {
+    leftIcon?: IconType;
+    rightIcon?: IconType;
+    loading?: boolean;
+};
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends InputProps$1 {
+    leadingIcon?: IconType;
+    onLeadingIconClick?: () => void;
+    trailingIcon?: IconType;
+    onTrailingIconClick?: () => void;
+}
+declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+type LabelProps = LabelProps$1 & {
+    tooltip?: boolean;
+    onTooltipClick?: () => void;
+};
+declare const Label: ({ children, onTooltipClick, tooltip, sx, ...props }: LabelProps) => react_jsx_runtime.JSX.Element;
+
+type LinkProps = LinkProps$1 & {
+    quiet?: boolean;
+};
+declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+
+/**
+ * We're using React Select component to build ttoss Select.
+ * More info about React Select: https://react-select.com/home
+ * ttoss Figma: https://www.figma.com/file/VrB76VkH4hKCDUe9iYhpYu/_Component-%2F-Forms-%2F-Select?type=design&mode=design&t=ZBIeOpqcvQn3yq2t-0
+ */
+
+type SelectOptionValue = string | number | boolean;
+type SelectOption = {
+    label: string;
+    value: SelectOptionValue;
+};
+type SelectOptions = SelectOption[];
+/**
+ * TODO: remove this when we accept multi select.
+ */
+type IsMulti = false;
+type SelectProps = Omit<Props<SelectOption, IsMulti>, 'styles' | 'value' | 'onChange' | 'components'> & SxProp & {
+    value?: SelectOptionValue;
+    onChange?: (value: SelectOptionValue | undefined) => void;
+    disabled?: boolean;
+    leadingIcon?: IconType;
+    trailingIcon?: IconType;
+};
+/**
+ * https://react-select.com/home
+ */
+declare const Select: React.ForwardRefExoticComponent<Omit<Props<SelectOption, false>, "value" | "onChange" | "styles" | "components"> & SxProp & {
+    value?: SelectOptionValue;
+    onChange?: (value: SelectOptionValue | undefined) => void;
+    disabled?: boolean;
+    leadingIcon?: IconType;
+    trailingIcon?: IconType;
+} & React.RefAttributes<any>>;
+
+declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+interface CheckboxProps extends CheckboxProps$1 {
+    indeterminate?: boolean;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+declare const InfiniteLinearProgress: () => react_jsx_runtime.JSX.Element;
+
+interface TextareaProps extends TextareaProps$1 {
+    trailingIcon?: IconType;
+}
+declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+
+declare const Container: React.ForwardRefExoticComponent<theme_ui.BoxProps & React.RefAttributes<HTMLDivElement>>;
+
+type HelpTextProps = Omit<TextProps, 'variant'> & {
+    disabled?: boolean;
+    negative?: boolean;
+};
+declare const HelpText: ({ sx, disabled, negative, ...props }: HelpTextProps) => react_jsx_runtime.JSX.Element;
+
+type CloseButtonProps = ButtonProps & {
+    label?: string;
+    onlyText?: boolean;
+};
+declare const CloseButton: React.ForwardRefExoticComponent<Omit<CloseButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+type InputNumberProps = Omit<InputProps$1, 'type' | 'variant' | 'onChange'> & {
+    onChange: (value: number) => void;
+    value?: number;
+    infoIcon?: boolean;
+    onClickInfoIcon?: () => void;
+};
+declare const InputNumber: React.ForwardRefExoticComponent<Omit<InputNumberProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+type StackProps = FlexProps;
+/**
+ * A component that renders its children in a column.
+ */
+declare const Stack: React.ForwardRefExoticComponent<theme_ui.BoxProps & React.RefAttributes<HTMLElement>>;
+
+type InputPasswordProps = Omit<InputProps, 'trailingIcon' | 'onTrailingIconClick' | 'type'> & {
+    showPasswordByDefault?: boolean;
+};
+declare const InputPassword: React.ForwardRefExoticComponent<Omit<InputPasswordProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+type ActionButtonProps = Omit<ButtonProps, 'rightIcon' | 'leftIcon' | 'variant'> & {
+    icon: ButtonProps['leftIcon'];
+    variant?: 'default' | 'accent' | 'quiet';
+};
+declare const ActionButton: ({ icon, variant, sx, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, 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, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.0.6",
+  "version": "5.0.7",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "author": "ttoss",
   "contributors": [
@@ -27,12 +27,12 @@
     "@theme-ui/match-media": "^0.16.2",
     "react-select": "^5.8.0",
     "theme-ui": "^0.16.2",
-    "@ttoss/theme": "^1.7.21"
+    "@ttoss/theme": "^1.7.22"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
     "react": ">=16.8.0",
-    "@ttoss/react-icons": "^0.4.2"
+    "@ttoss/react-icons": "^0.4.3"
   },
   "devDependencies": {
     "@emotion/react": "^11.11.4",
@@ -42,9 +42,9 @@
     "jest": "^29.7.0",
     "react": "^18.3.1",
     "tsup": "^8.3.0",
-    "@ttoss/react-icons": "^0.4.2",
-    "@ttoss/test-utils": "^2.1.15",
-    "@ttoss/config": "^1.33.0"
+    "@ttoss/config": "^1.34.0",
+    "@ttoss/react-icons": "^0.4.3",
+    "@ttoss/test-utils": "^2.1.16"
   },
   "keywords": [
     "React",