@ttoss/ui 1.36.12 → 1.37.0

package/README.md

@@ -8,7 +8,7 @@
 pnpm add @ttoss/ui
 ```
 
-## Quick start
+## Quickstart
 
 Create a theme object to define the design tokens of your application.
 

package/dist/esm/index.js

@@ -425,10 +425,19 @@ var Textarea = /*#__PURE__*/React8.forwardRef(({
 Textarea.displayName = "Textarea";
 
 // src/components/Container.tsx
-import { Container } from "theme-ui";
+import * as React9 from "react";
+import { Container as ContainerUi } from "theme-ui";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Container = /*#__PURE__*/React9.forwardRef((props, ref) => {
+  return /* @__PURE__ */jsx12(ContainerUi, {
+    ref,
+    ...props
+  });
+});
+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,
@@ -436,7 +445,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",
@@ -450,10 +459,10 @@ var HelpText = ({
 };
 
 // src/components/CloseButton.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { Button as Button2 } from "theme-ui";
-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,
@@ -484,7 +493,7 @@ var CloseButton = /*#__PURE__*/React9.forwardRef(({
     },
     ...props,
     ref,
-    children: [label, !onlyText && /* @__PURE__ */jsx13(Icon, {
+    children: [label, !onlyText && /* @__PURE__ */jsx14(Icon, {
       icon: "close"
     })]
   });
@@ -492,10 +501,10 @@ var CloseButton = /*#__PURE__*/React9.forwardRef(({
 CloseButton.displayName = "CloseButton";
 
 // src/components/InputNumber.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 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,
@@ -503,7 +512,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 {
@@ -565,7 +574,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,
@@ -575,7 +584,7 @@ var InputNumber = /*#__PURE__*/React10.forwardRef(({
       },
       value,
       ...inputProps
-    }), /* @__PURE__ */jsx14(Text, {
+    }), /* @__PURE__ */jsx15(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -584,10 +593,10 @@ var InputNumber = /*#__PURE__*/React10.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeUp,
-      children: /* @__PURE__ */jsx14(Icon, {
+      children: /* @__PURE__ */jsx15(Icon, {
         icon: "picker-down"
       })
-    }), infoIcon && /* @__PURE__ */jsx14(Text, {
+    }), infoIcon && /* @__PURE__ */jsx15(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -596,10 +605,10 @@ var InputNumber = /*#__PURE__*/React10.forwardRef(({
         cursor: onClickInfoIcon ? "pointer" : "default"
       },
       onClick: onClickInfoIcon,
-      children: /* @__PURE__ */jsx14(Icon, {
+      children: /* @__PURE__ */jsx15(Icon, {
         icon: "info"
       })
-    }), /* @__PURE__ */jsx14(Text, {
+    }), /* @__PURE__ */jsx15(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -608,7 +617,7 @@ var InputNumber = /*#__PURE__*/React10.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeDown,
-      children: /* @__PURE__ */jsx14(Icon, {
+      children: /* @__PURE__ */jsx15(Icon, {
         icon: "picker-up"
       })
     })]
@@ -617,10 +626,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: {
@@ -635,16 +644,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"
@@ -663,8 +672,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) => {
@@ -673,7 +682,7 @@ var InputPassword = /*#__PURE__*/React13.forwardRef(({
     icon,
     inputType
   } = useHidePassInput(!showPasswordByDefault);
-  return /* @__PURE__ */jsx16(Input, {
+  return /* @__PURE__ */jsx17(Input, {
     ref,
     ...inputPasswordProps,
     trailingIcon: icon,
@@ -684,14 +693,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.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, SelectProps, IconButtonProps, TextareaProps as TextareaProps$1, TextProps, FlexProps } from 'theme-ui';
-export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Paragraph, ParagraphProps, Radio, RadioProps, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, SxProp, Text, TextProps, Theme } 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, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, SxProp, Text, TextProps, Theme } 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';
@@ -66,6 +66,8 @@ interface TextareaProps extends TextareaProps$1 {
 }
 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;
@@ -103,4 +105,4 @@ type ActionButtonProps = Omit<ButtonProps, 'rightIcon' | 'leftIcon' | 'variant'>
 };
 declare const ActionButton: ({ icon, variant, sx, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, ActionButtonProps, Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, HelpText, HelpTextProps, Icon, IconButton, IconProps, IconType, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputPassword, InputPasswordProps, InputProps, Label, LabelProps, Link, LinkProps, Select, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };
+export { ActionButton, ActionButtonProps, Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, Container, HelpText, HelpTextProps, Icon, IconButton, IconProps, IconType, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputPassword, InputPasswordProps, InputProps, Label, LabelProps, Link, LinkProps, Select, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -46,7 +46,7 @@ __export(src_exports, {
   Card: () => import_theme_ui6.Card,
   Checkbox: () => import_theme_ui22.Checkbox,
   CloseButton: () => CloseButton,
-  Container: () => import_theme_ui24.Container,
+  Container: () => Container,
   Divider: () => import_theme_ui7.Divider,
   Flex: () => import_theme_ui8.Flex,
   Global: () => import_theme_ui28.Global,
@@ -502,10 +502,19 @@ var Textarea = React8.forwardRef(({
 Textarea.displayName = "Textarea";
 
 // src/components/Container.tsx
+var React9 = __toESM(require("react"));
 var import_theme_ui24 = require("theme-ui");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Container = React9.forwardRef((props, ref) => {
+  return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_theme_ui24.Container, {
+    ref,
+    ...props
+  });
+});
+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,
@@ -513,7 +522,7 @@ var HelpText = ({
   ...props
 }) => {
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_theme_ui16.Text, {
+  return /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_theme_ui16.Text, {
     variant,
     sx: {
       fontSize: "sm",
@@ -527,10 +536,10 @@ var HelpText = ({
 };
 
 // src/components/CloseButton.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_theme_ui25 = require("theme-ui");
-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,
@@ -539,7 +548,7 @@ var CloseButton = React9.forwardRef(({
   if (onlyText && !label) {
     return null;
   }
-  return /* @__PURE__ */(0, import_jsx_runtime13.jsxs)(import_theme_ui25.Button, {
+  return /* @__PURE__ */(0, import_jsx_runtime14.jsxs)(import_theme_ui25.Button, {
     variant: "buttons.closeButton",
     type: "button",
     "aria-label": label,
@@ -561,7 +570,7 @@ var CloseButton = React9.forwardRef(({
     },
     ...props,
     ref,
-    children: [label, !onlyText && /* @__PURE__ */(0, import_jsx_runtime13.jsx)(Icon, {
+    children: [label, !onlyText && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(Icon, {
       icon: "close"
     })]
   });
@@ -569,10 +578,10 @@ var CloseButton = React9.forwardRef(({
 CloseButton.displayName = "CloseButton";
 
 // src/components/InputNumber.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_theme_ui26 = 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,
@@ -580,7 +589,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 {
@@ -632,7 +641,7 @@ var InputNumber = React10.forwardRef(({
     }
     onChange(value + 1);
   };
-  return /* @__PURE__ */(0, import_jsx_runtime14.jsxs)(import_theme_ui8.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime15.jsxs)(import_theme_ui8.Flex, {
     sx: {
       width: "fit-content",
       ...sx,
@@ -642,7 +651,7 @@ var InputNumber = React10.forwardRef(({
     },
     ref,
     "aria-invalid": inputProps["aria-invalid"],
-    children: [/* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui26.Input, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui26.Input, {
       ref,
       variant: "forms.inputNumber",
       sx: sxProps,
@@ -652,7 +661,7 @@ var InputNumber = React10.forwardRef(({
       },
       value,
       ...inputProps
-    }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui16.Text, {
+    }), /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui16.Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -661,10 +670,10 @@ var InputNumber = React10.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeUp,
-      children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime15.jsx)(Icon, {
         icon: "picker-down"
       })
-    }), infoIcon && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui16.Text, {
+    }), infoIcon && /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui16.Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -673,10 +682,10 @@ var InputNumber = React10.forwardRef(({
         cursor: onClickInfoIcon ? "pointer" : "default"
       },
       onClick: onClickInfoIcon,
-      children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime15.jsx)(Icon, {
         icon: "info"
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui16.Text, {
+    }), /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui16.Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -685,7 +694,7 @@ var InputNumber = React10.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeDown,
-      children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(Icon, {
+      children: /* @__PURE__ */(0, import_jsx_runtime15.jsx)(Icon, {
         icon: "picker-up"
       })
     })]
@@ -694,10 +703,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_ui8.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_ui8.Flex, {
     ref,
     ...props,
     sx: {
@@ -712,16 +721,16 @@ Stack.displayName = "Stack";
 var import_theme_ui27 = 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"
@@ -740,8 +749,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) => {
@@ -750,7 +759,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,
@@ -761,14 +770,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": "1.36.12",
+  "version": "1.37.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "author": "ttoss",
   "contributors": [

package/src/components/Container.tsx

@@ -1 +1,12 @@
-export { Container, type ContainerProps } from 'theme-ui';
+import * as React from 'react';
+import { type ContainerProps, Container as ContainerUi } from 'theme-ui';
+
+export type { ContainerProps };
+
+export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
+  (props, ref) => {
+    return <ContainerUi ref={ref} {...props} />;
+  }
+);
+
+Container.displayName = 'Container';