@ttoss/ui 4.1.2 → 4.1.4

package/dist/esm/index.js

@@ -491,15 +491,39 @@ IconButton.displayName = "IconButton";
 import { Slider } from "theme-ui";
 
 // src/components/Checkbox.tsx
-import { Checkbox } from "theme-ui";
-
-// src/components/InfiniteLinearProgress.tsx
 import * as React6 from "react";
+import { Checkbox as CheckBoxUi } from "theme-ui";
 import { jsx as jsx9 } from "react/jsx-runtime";
+var Checkbox = ({
+  indeterminate = false,
+  ...rest
+}) => {
+  const ref = React6.useRef(null);
+  React6.useEffect(() => {
+    if (ref.current) {
+      ref.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  if (indeterminate) {
+    return /* @__PURE__ */jsx9("input", {
+      type: "checkbox",
+      ref,
+      ...rest
+    });
+  }
+  return /* @__PURE__ */jsx9(CheckBoxUi, {
+    ref,
+    ...rest
+  });
+};
+
+// 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] = React6.useState(0);
-  React6.useEffect(() => {
+  const [progress, setProgress] = React7.useState(0);
+  React7.useEffect(() => {
     const timer = setInterval(() => {
       setProgress(oldProgress => {
         if (oldProgress === MAX_PROGRESS) {
@@ -520,7 +544,7 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */jsx9(Progress, {
+  return /* @__PURE__ */jsx10(Progress, {
     max: MAX_PROGRESS,
     value: progress,
     role: "progressbar"
@@ -528,11 +552,11 @@ var InfiniteLinearProgress = () => {
 };
 
 // src/components/Textarea.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { Icon as Icon6 } from "@ttoss/react-icons";
 import { Textarea as TextareaUI } from "theme-ui";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
-var Textarea = /*#__PURE__*/React7.forwardRef(({
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var Textarea = /*#__PURE__*/React8.forwardRef(({
   trailingIcon,
   className,
   sx,
@@ -546,7 +570,7 @@ var Textarea = /*#__PURE__*/React7.forwardRef(({
       padding: 0,
       border: "none"
     },
-    children: [/* @__PURE__ */jsx10(TextareaUI, {
+    children: [/* @__PURE__ */jsx11(TextareaUI, {
       ref,
       sx: {
         fontFamily: "body",
@@ -558,13 +582,13 @@ var Textarea = /*#__PURE__*/React7.forwardRef(({
       },
       className,
       ...textareaProps
-    }), trailingIcon && /* @__PURE__ */jsx10(Text, {
+    }), trailingIcon && /* @__PURE__ */jsx11(Text, {
       sx: {
         position: "absolute",
         right: "1.25rem",
         top: "0.75rem"
       },
-      children: /* @__PURE__ */jsx10(Icon6, {
+      children: /* @__PURE__ */jsx11(Icon6, {
         inline: true,
         icon: trailingIcon
       })
@@ -574,11 +598,11 @@ var Textarea = /*#__PURE__*/React7.forwardRef(({
 Textarea.displayName = "Textarea";
 
 // src/components/Container.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { Container as ContainerUi } from "theme-ui";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var Container = /*#__PURE__*/React8.forwardRef((props, ref) => {
-  return /* @__PURE__ */jsx11(ContainerUi, {
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Container = /*#__PURE__*/React9.forwardRef((props, ref) => {
+  return /* @__PURE__ */jsx12(ContainerUi, {
     ref,
     ...props
   });
@@ -586,7 +610,7 @@ var Container = /*#__PURE__*/React8.forwardRef((props, ref) => {
 Container.displayName = "Container";
 
 // src/components/HelpText.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var HelpText = ({
   sx,
   disabled,
@@ -594,7 +618,7 @@ var HelpText = ({
   ...props
 }) => {
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */jsx12(Text, {
+  return /* @__PURE__ */jsx13(Text, {
     variant,
     sx: {
       fontSize: "sm",
@@ -608,10 +632,10 @@ var HelpText = ({
 };
 
 // src/components/CloseButton.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { Icon as Icon7 } from "@ttoss/react-icons";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-var CloseButton = /*#__PURE__*/React9.forwardRef(({
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var CloseButton = /*#__PURE__*/React10.forwardRef(({
   label,
   sx,
   onlyText,
@@ -642,7 +666,7 @@ var CloseButton = /*#__PURE__*/React9.forwardRef(({
     },
     ...props,
     ref,
-    children: [label, !onlyText && /* @__PURE__ */jsx13(Icon7, {
+    children: [label, !onlyText && /* @__PURE__ */jsx14(Icon7, {
       icon: "close"
     })]
   });
@@ -650,11 +674,11 @@ var CloseButton = /*#__PURE__*/React9.forwardRef(({
 CloseButton.displayName = "CloseButton";
 
 // src/components/InputNumber.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { Icon as Icon8 } from "@ttoss/react-icons";
 import { Input as Input2 } from "theme-ui";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
-var InputNumber = /*#__PURE__*/React10.forwardRef(({
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var InputNumber = /*#__PURE__*/React11.forwardRef(({
   sx,
   value,
   infoIcon,
@@ -662,7 +686,7 @@ var InputNumber = /*#__PURE__*/React10.forwardRef(({
   onClickInfoIcon,
   ...inputProps
 }, ref) => {
-  const sxProps = React10.useMemo(() => {
+  const sxProps = React11.useMemo(() => {
     const size = String(typeof value === "undefined" ? 0 : value).length;
     if (inputProps["aria-invalid"] === "true") {
       return {
@@ -724,7 +748,7 @@ var InputNumber = /*#__PURE__*/React10.forwardRef(({
     },
     ref,
     "aria-invalid": inputProps["aria-invalid"],
-    children: [/* @__PURE__ */jsx14(Input2, {
+    children: [/* @__PURE__ */jsx15(Input2, {
       ref,
       variant: "forms.inputNumber",
       sx: sxProps,
@@ -734,7 +758,7 @@ var InputNumber = /*#__PURE__*/React10.forwardRef(({
       },
       value,
       ...inputProps
-    }), /* @__PURE__ */jsx14(Text, {
+    }), /* @__PURE__ */jsx15(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -743,10 +767,10 @@ var InputNumber = /*#__PURE__*/React10.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeUp,
-      children: /* @__PURE__ */jsx14(Icon8, {
+      children: /* @__PURE__ */jsx15(Icon8, {
         icon: "picker-down"
       })
-    }), infoIcon && /* @__PURE__ */jsx14(Text, {
+    }), infoIcon && /* @__PURE__ */jsx15(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -755,10 +779,10 @@ var InputNumber = /*#__PURE__*/React10.forwardRef(({
         cursor: onClickInfoIcon ? "pointer" : "default"
       },
       onClick: onClickInfoIcon,
-      children: /* @__PURE__ */jsx14(Icon8, {
+      children: /* @__PURE__ */jsx15(Icon8, {
         icon: "info"
       })
-    }), /* @__PURE__ */jsx14(Text, {
+    }), /* @__PURE__ */jsx15(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -767,7 +791,7 @@ var InputNumber = /*#__PURE__*/React10.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeDown,
-      children: /* @__PURE__ */jsx14(Icon8, {
+      children: /* @__PURE__ */jsx15(Icon8, {
         icon: "picker-up"
       })
     })]
@@ -776,10 +800,10 @@ var InputNumber = /*#__PURE__*/React10.forwardRef(({
 InputNumber.displayName = "InputNumber";
 
 // src/components/Stack.tsx
-import * as React11 from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var Stack = /*#__PURE__*/React11.forwardRef((props, ref) => {
-  return /* @__PURE__ */jsx15(Flex, {
+import * as React12 from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Stack = /*#__PURE__*/React12.forwardRef((props, ref) => {
+  return /* @__PURE__ */jsx16(Flex, {
     ref,
     ...props,
     sx: {
@@ -794,16 +818,16 @@ Stack.displayName = "Stack";
 import { Paragraph } from "theme-ui";
 
 // src/components/InputPassword/InputPassword.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 
 // src/components/InputPassword/useHidePassInput.ts
-import * as React12 from "react";
+import * as React13 from "react";
 var useHidePassInput = (defaultValue = true) => {
-  const [hidePass, setHidePass] = React12.useState(Boolean(defaultValue));
+  const [hidePass, setHidePass] = React13.useState(Boolean(defaultValue));
   const {
     icon,
     inputType
-  } = React12.useMemo(() => {
+  } = React13.useMemo(() => {
     return {
       icon: hidePass ? "view-off" : "view-on",
       inputType: hidePass ? "password" : "text"
@@ -822,8 +846,8 @@ var useHidePassInput = (defaultValue = true) => {
 };
 
 // src/components/InputPassword/InputPassword.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var InputPassword = /*#__PURE__*/React13.forwardRef(({
+import { jsx as jsx17 } from "react/jsx-runtime";
+var InputPassword = /*#__PURE__*/React14.forwardRef(({
   showPasswordByDefault,
   ...inputPasswordProps
 }, ref) => {
@@ -832,7 +856,7 @@ var InputPassword = /*#__PURE__*/React13.forwardRef(({
     icon,
     inputType
   } = useHidePassInput(!showPasswordByDefault);
-  return /* @__PURE__ */jsx16(Input, {
+  return /* @__PURE__ */jsx17(Input, {
     ref,
     ...inputPasswordProps,
     trailingIcon: icon,
@@ -843,14 +867,14 @@ var InputPassword = /*#__PURE__*/React13.forwardRef(({
 InputPassword.displayName = "InputPassword";
 
 // src/components/ActionButton.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var ActionButton = ({
   icon,
   variant = "default",
   sx,
   ...props
 }) => {
-  return /* @__PURE__ */jsx17(Button, {
+  return /* @__PURE__ */jsx18(Button, {
     variant: `buttons.actionButton.${variant}`,
     leftIcon: icon,
     sx: {

package/dist/index.d.mts

@@ -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, LinkProps as LinkProps$1, SxProp, IconButtonProps, TextareaProps as TextareaProps$1, TextProps, FlexProps } from 'theme-ui';
-export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, 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';
+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';
@@ -89,6 +89,11 @@ declare const Select: React.ForwardRefExoticComponent<Omit<Props<SelectOption, f
 
 declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
+interface CheckboxProps extends CheckboxProps$1 {
+    indeterminate?: boolean;
+}
+declare const Checkbox: ({ indeterminate, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+
 declare const InfiniteLinearProgress: () => react_jsx_runtime.JSX.Element;
 
 interface TextareaProps extends TextareaProps$1 {
@@ -135,4 +140,4 @@ type ActionButtonProps = Omit<ButtonProps, 'rightIcon' | 'leftIcon' | 'variant'>
 };
 declare const ActionButton: ({ icon, variant, sx, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, 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 };
+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/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, LinkProps as LinkProps$1, SxProp, IconButtonProps, TextareaProps as TextareaProps$1, TextProps, FlexProps } from 'theme-ui';
-export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, 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';
+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';
@@ -89,6 +89,11 @@ declare const Select: React.ForwardRefExoticComponent<Omit<Props<SelectOption, f
 
 declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
+interface CheckboxProps extends CheckboxProps$1 {
+    indeterminate?: boolean;
+}
+declare const Checkbox: ({ indeterminate, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+
 declare const InfiniteLinearProgress: () => react_jsx_runtime.JSX.Element;
 
 interface TextareaProps extends TextareaProps$1 {
@@ -135,4 +140,4 @@ type ActionButtonProps = Omit<ButtonProps, 'rightIcon' | 'leftIcon' | 'variant'>
 };
 declare const ActionButton: ({ icon, variant, sx, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, 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 };
+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/dist/index.js

@@ -44,7 +44,7 @@ __export(src_exports, {
   Box: () => import_theme_ui5.Box,
   Button: () => Button,
   Card: () => import_theme_ui7.Card,
-  Checkbox: () => import_theme_ui21.Checkbox,
+  Checkbox: () => Checkbox,
   CloseButton: () => CloseButton,
   Container: () => Container,
   Divider: () => import_theme_ui8.Divider,
@@ -567,15 +567,39 @@ IconButton.displayName = "IconButton";
 var import_theme_ui20 = require("theme-ui");
 
 // src/components/Checkbox.tsx
+var React6 = __toESM(require("react"));
 var import_theme_ui21 = require("theme-ui");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Checkbox = ({
+  indeterminate = false,
+  ...rest
+}) => {
+  const ref = React6.useRef(null);
+  React6.useEffect(() => {
+    if (ref.current) {
+      ref.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  if (indeterminate) {
+    return /* @__PURE__ */(0, import_jsx_runtime9.jsx)("input", {
+      type: "checkbox",
+      ref,
+      ...rest
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_theme_ui21.Checkbox, {
+    ref,
+    ...rest
+  });
+};
 
 // src/components/InfiniteLinearProgress.tsx
-var React6 = __toESM(require("react"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var React7 = __toESM(require("react"));
+var import_jsx_runtime10 = 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) {
@@ -596,7 +620,7 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_theme_ui16.Progress, {
+  return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_theme_ui16.Progress, {
     max: MAX_PROGRESS,
     value: progress,
     role: "progressbar"
@@ -604,17 +628,17 @@ var InfiniteLinearProgress = () => {
 };
 
 // src/components/Textarea.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_react_icons6 = require("@ttoss/react-icons");
 var import_theme_ui22 = require("theme-ui");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Textarea = React7.forwardRef(({
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Textarea = React8.forwardRef(({
   trailingIcon,
   className,
   sx,
   ...textareaProps
 }, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime10.jsxs)(import_theme_ui9.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime11.jsxs)(import_theme_ui9.Flex, {
     className,
     sx: {
       ...sx,
@@ -622,7 +646,7 @@ var Textarea = React7.forwardRef(({
       padding: 0,
       border: "none"
     },
-    children: [/* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_theme_ui22.Textarea, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_theme_ui22.Textarea, {
       ref,
       sx: {
         fontFamily: "body",
@@ -634,13 +658,13 @@ var Textarea = React7.forwardRef(({
       },
       className,
       ...textareaProps
-    }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_theme_ui3.Text, {
+    }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_theme_ui3.Text, {
       sx: {
         position: "absolute",
         right: "1.25rem",
         top: "0.75rem"
       },
-      children: /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_react_icons6.Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_react_icons6.Icon, {
         inline: true,
         icon: trailingIcon
       })
@@ -650,11 +674,11 @@ var Textarea = React7.forwardRef(({
 Textarea.displayName = "Textarea";
 
 // src/components/Container.tsx
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_theme_ui23 = require("theme-ui");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Container = React8.forwardRef((props, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_theme_ui23.Container, {
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Container = React9.forwardRef((props, ref) => {
+  return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_theme_ui23.Container, {
     ref,
     ...props
   });
@@ -662,7 +686,7 @@ var Container = React8.forwardRef((props, ref) => {
 Container.displayName = "Container";
 
 // src/components/HelpText.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var HelpText = ({
   sx,
   disabled,
@@ -670,7 +694,7 @@ var HelpText = ({
   ...props
 }) => {
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_theme_ui3.Text, {
+  return /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_theme_ui3.Text, {
     variant,
     sx: {
       fontSize: "sm",
@@ -684,10 +708,10 @@ var HelpText = ({
 };
 
 // src/components/CloseButton.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_react_icons7 = require("@ttoss/react-icons");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var CloseButton = React9.forwardRef(({
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var CloseButton = React10.forwardRef(({
   label,
   sx,
   onlyText,
@@ -696,7 +720,7 @@ var CloseButton = React9.forwardRef(({
   if (onlyText && !label) {
     return null;
   }
-  return /* @__PURE__ */(0, import_jsx_runtime13.jsxs)(Button, {
+  return /* @__PURE__ */(0, import_jsx_runtime14.jsxs)(Button, {
     variant: "buttons.closeButton",
     type: "button",
     "aria-label": label,
@@ -718,7 +742,7 @@ var CloseButton = React9.forwardRef(({
     },
     ...props,
     ref,
-    children: [label, !onlyText && /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_react_icons7.Icon, {
+    children: [label, !onlyText && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_react_icons7.Icon, {
       icon: "close"
     })]
   });
@@ -726,11 +750,11 @@ var CloseButton = React9.forwardRef(({
 CloseButton.displayName = "CloseButton";
 
 // src/components/InputNumber.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_react_icons8 = require("@ttoss/react-icons");
 var import_theme_ui24 = require("theme-ui");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var InputNumber = React10.forwardRef(({
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var InputNumber = React11.forwardRef(({
   sx,
   value,
   infoIcon,
@@ -738,7 +762,7 @@ var InputNumber = React10.forwardRef(({
   onClickInfoIcon,
   ...inputProps
 }, ref) => {
-  const sxProps = React10.useMemo(() => {
+  const sxProps = React11.useMemo(() => {
     const size = String(typeof value === "undefined" ? 0 : value).length;
     if (inputProps["aria-invalid"] === "true") {
       return {
@@ -790,7 +814,7 @@ var InputNumber = React10.forwardRef(({
     }
     onChange(value + 1);
   };
-  return /* @__PURE__ */(0, import_jsx_runtime14.jsxs)(import_theme_ui9.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime15.jsxs)(import_theme_ui9.Flex, {
     sx: {
       width: "fit-content",
       ...sx,
@@ -800,7 +824,7 @@ var InputNumber = React10.forwardRef(({
     },
     ref,
     "aria-invalid": inputProps["aria-invalid"],
-    children: [/* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui24.Input, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui24.Input, {
       ref,
       variant: "forms.inputNumber",
       sx: sxProps,
@@ -810,7 +834,7 @@ var InputNumber = React10.forwardRef(({
       },
       value,
       ...inputProps
-    }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui3.Text, {
+    }), /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui3.Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -819,10 +843,10 @@ var InputNumber = React10.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeUp,
-      children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_react_icons8.Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_react_icons8.Icon, {
         icon: "picker-down"
       })
-    }), infoIcon && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui3.Text, {
+    }), infoIcon && /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui3.Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -831,10 +855,10 @@ var InputNumber = React10.forwardRef(({
         cursor: onClickInfoIcon ? "pointer" : "default"
       },
       onClick: onClickInfoIcon,
-      children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_react_icons8.Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_react_icons8.Icon, {
         icon: "info"
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui3.Text, {
+    }), /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui3.Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -843,7 +867,7 @@ var InputNumber = React10.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeDown,
-      children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_react_icons8.Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_react_icons8.Icon, {
         icon: "picker-up"
       })
     })]
@@ -852,10 +876,10 @@ var InputNumber = React10.forwardRef(({
 InputNumber.displayName = "InputNumber";
 
 // src/components/Stack.tsx
-var React11 = __toESM(require("react"));
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Stack = React11.forwardRef((props, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui9.Flex, {
+var React12 = __toESM(require("react"));
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Stack = React12.forwardRef((props, ref) => {
+  return /* @__PURE__ */(0, import_jsx_runtime16.jsx)(import_theme_ui9.Flex, {
     ref,
     ...props,
     sx: {
@@ -870,16 +894,16 @@ Stack.displayName = "Stack";
 var import_theme_ui25 = require("theme-ui");
 
 // src/components/InputPassword/InputPassword.tsx
-var React13 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 
 // src/components/InputPassword/useHidePassInput.ts
-var React12 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var useHidePassInput = (defaultValue = true) => {
-  const [hidePass, setHidePass] = React12.useState(Boolean(defaultValue));
+  const [hidePass, setHidePass] = React13.useState(Boolean(defaultValue));
   const {
     icon,
     inputType
-  } = React12.useMemo(() => {
+  } = React13.useMemo(() => {
     return {
       icon: hidePass ? "view-off" : "view-on",
       inputType: hidePass ? "password" : "text"
@@ -898,8 +922,8 @@ var useHidePassInput = (defaultValue = true) => {
 };
 
 // src/components/InputPassword/InputPassword.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var InputPassword = React13.forwardRef(({
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var InputPassword = React14.forwardRef(({
   showPasswordByDefault,
   ...inputPasswordProps
 }, ref) => {
@@ -908,7 +932,7 @@ var InputPassword = React13.forwardRef(({
     icon,
     inputType
   } = useHidePassInput(!showPasswordByDefault);
-  return /* @__PURE__ */(0, import_jsx_runtime16.jsx)(Input, {
+  return /* @__PURE__ */(0, import_jsx_runtime17.jsx)(Input, {
     ref,
     ...inputPasswordProps,
     trailingIcon: icon,
@@ -919,14 +943,14 @@ var InputPassword = React13.forwardRef(({
 InputPassword.displayName = "InputPassword";
 
 // src/components/ActionButton.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var ActionButton = ({
   icon,
   variant = "default",
   sx,
   ...props
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime17.jsx)(Button, {
+  return /* @__PURE__ */(0, import_jsx_runtime18.jsx)(Button, {
     variant: `buttons.actionButton.${variant}`,
     leftIcon: icon,
     sx: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "4.1.2",
+  "version": "4.1.4",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "author": "ttoss",
   "contributors": [
@@ -27,7 +27,7 @@
     "@theme-ui/match-media": "^0.16.2",
     "react-select": "^5.8.0",
     "theme-ui": "^0.16.2",
-    "@ttoss/theme": "^1.7.1"
+    "@ttoss/theme": "^1.7.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -42,9 +42,9 @@
     "jest": "^29.7.0",
     "react": "^18.2.0",
     "tsup": "^8.0.2",
-    "@ttoss/config": "^1.31.5",
     "@ttoss/react-icons": "^0.3.1",
-    "@ttoss/test-utils": "^2.1.1"
+    "@ttoss/test-utils": "^2.1.1",
+    "@ttoss/config": "^1.31.5"
   },
   "keywords": [
     "React",

package/src/components/Checkbox.tsx

@@ -1 +1,25 @@
-export { type CheckboxProps, Checkbox } from 'theme-ui';
+import * as React from 'react';
+import {
+  Checkbox as CheckBoxUi,
+  CheckboxProps as CheckboxPropsUi,
+} from 'theme-ui';
+
+export interface CheckboxProps extends CheckboxPropsUi {
+  indeterminate?: boolean;
+}
+
+export const Checkbox = ({ indeterminate = false, ...rest }: CheckboxProps) => {
+  const ref = React.useRef<HTMLInputElement>(null);
+
+  React.useEffect(() => {
+    if (ref.current) {
+      ref.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+
+  if (indeterminate) {
+    return <input type="checkbox" ref={ref} {...rest} />;
+  }
+
+  return <CheckBoxUi ref={ref} {...rest} />;
+};