@ttoss/ui 5.1.4 → 5.1.6

package/dist/esm/index.js

@@ -126,12 +126,30 @@ var Badge = ({
 import { Box } from "theme-ui";
 
 // src/components/Card.tsx
-import { Card } from "theme-ui";
+import { Card as CardUi } from "theme-ui";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Card = props => {
+  return /* @__PURE__ */jsx4(CardUi, {
+    ...props,
+    sx: {
+      backgroundColor: "display.background.secondary.default",
+      border: "md",
+      borderColor: "display.border.muted.default",
+      borderRadius: "lg",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      width: "fit-content",
+      boxShadow: "2px 4px 8px #E5E7EB",
+      ...props.sx
+    }
+  });
+};
 
 // src/components/Checkbox.tsx
 import * as React2 from "react";
 import { Checkbox as CheckBoxUi } from "theme-ui";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var Checkbox = React2.forwardRef(({
   indeterminate = false,
   ...rest
@@ -146,13 +164,13 @@ var Checkbox = React2.forwardRef(({
     }
   }, [indeterminate]);
   if (indeterminate) {
-    return /* @__PURE__ */jsx4("input", {
+    return /* @__PURE__ */jsx5("input", {
       type: "checkbox",
       ref: innerRef,
       ...rest
     });
   }
-  return /* @__PURE__ */jsx4(CheckBoxUi, {
+  return /* @__PURE__ */jsx5(CheckBoxUi, {
     ref: innerRef,
     ...rest
   });
@@ -162,7 +180,7 @@ Checkbox.displayName = "Checkbox";
 // src/components/CloseButton.tsx
 import { Icon as Icon3 } from "@ttoss/react-icons";
 import * as React3 from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var CloseButton = React3.forwardRef(({
   label,
   sx,
@@ -194,7 +212,7 @@ var CloseButton = React3.forwardRef(({
     },
     ...props,
     ref,
-    children: [label, !onlyText && /* @__PURE__ */jsx5(Icon3, {
+    children: [label, !onlyText && /* @__PURE__ */jsx6(Icon3, {
       icon: "close"
     })]
   });
@@ -204,9 +222,9 @@ CloseButton.displayName = "CloseButton";
 // src/components/Container.tsx
 import * as React4 from "react";
 import { Container as ContainerUi } from "theme-ui";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var Container = React4.forwardRef((props, ref) => {
-  return /* @__PURE__ */jsx6(ContainerUi, {
+  return /* @__PURE__ */jsx7(ContainerUi, {
     ref,
     ...props
   });
@@ -226,7 +244,7 @@ import { Grid } from "theme-ui";
 import { Heading } from "theme-ui";
 
 // src/components/HelpText.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var HelpText = ({
   sx,
   disabled,
@@ -234,7 +252,7 @@ var HelpText = ({
   ...props
 }) => {
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */jsx7(Text, {
+  return /* @__PURE__ */jsx8(Text, {
     variant,
     sx: {
       fontSize: "sm",
@@ -250,9 +268,9 @@ var HelpText = ({
 // src/components/IconButton.tsx
 import * as React5 from "react";
 import { IconButton as IconButtonUi } from "theme-ui";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var IconButton = React5.forwardRef((props, ref) => {
-  return /* @__PURE__ */jsx8(IconButtonUi, {
+  return /* @__PURE__ */jsx9(IconButtonUi, {
     type: "button",
     ...props,
     ref
@@ -270,7 +288,7 @@ import * as React6 from "react";
 import { Progress } from "theme-ui";
 
 // src/components/InfiniteLinearProgress.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var MAX_PROGRESS = 100;
 var InfiniteLinearProgress = () => {
   const [progress, setProgress] = React6.useState(0);
@@ -295,7 +313,7 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */jsx9(Progress, {
+  return /* @__PURE__ */jsx10(Progress, {
     max: MAX_PROGRESS,
     value: progress,
     role: "progressbar"
@@ -306,7 +324,7 @@ var InfiniteLinearProgress = () => {
 import { Icon as Icon4 } from "@ttoss/react-icons";
 import * as React7 from "react";
 import { Input as InputUI } from "theme-ui";
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 var Input = React7.forwardRef(({
   leadingIcon,
   trailingIcon: trailingIconProp,
@@ -325,7 +343,7 @@ var Input = React7.forwardRef(({
       padding: 0,
       border: "none"
     },
-    children: [leadingIcon && /* @__PURE__ */jsx10(Text, {
+    children: [leadingIcon && /* @__PURE__ */jsx11(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -334,11 +352,11 @@ var Input = React7.forwardRef(({
       },
       onClick: onLeadingIconClick,
       variant: "leading-icon",
-      children: /* @__PURE__ */jsx10(Icon4, {
+      children: /* @__PURE__ */jsx11(Icon4, {
         inline: true,
         icon: leadingIcon
       })
-    }), /* @__PURE__ */jsx10(InputUI, {
+    }), /* @__PURE__ */jsx11(InputUI, {
       ref,
       sx: {
         fontFamily: "body",
@@ -351,7 +369,7 @@ var Input = React7.forwardRef(({
       },
       className,
       ...inputProps
-    }), trailingIcon && /* @__PURE__ */jsx10(Text, {
+    }), trailingIcon && /* @__PURE__ */jsx11(Text, {
       sx: {
         position: "absolute",
         right: "1rem",
@@ -360,7 +378,7 @@ var Input = React7.forwardRef(({
       },
       variant: "trailing-icon",
       onClick: onTrailingIconClick,
-      children: /* @__PURE__ */jsx10(Icon4, {
+      children: /* @__PURE__ */jsx11(Icon4, {
         inline: true,
         icon: trailingIcon
       })
@@ -373,7 +391,7 @@ Input.displayName = "Input";
 import { Icon as Icon5 } from "@ttoss/react-icons";
 import * as React8 from "react";
 import { Input as Input2 } from "theme-ui";
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var InputNumber = React8.forwardRef(({
   sx,
   value,
@@ -444,7 +462,7 @@ var InputNumber = React8.forwardRef(({
     },
     ref,
     "aria-invalid": inputProps["aria-invalid"],
-    children: [/* @__PURE__ */jsx11(Input2, {
+    children: [/* @__PURE__ */jsx12(Input2, {
       ref,
       variant: "forms.inputNumber",
       sx: sxProps,
@@ -454,7 +472,7 @@ var InputNumber = React8.forwardRef(({
       },
       value,
       ...inputProps
-    }), /* @__PURE__ */jsx11(Text, {
+    }), /* @__PURE__ */jsx12(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -463,10 +481,10 @@ var InputNumber = React8.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeUp,
-      children: /* @__PURE__ */jsx11(Icon5, {
+      children: /* @__PURE__ */jsx12(Icon5, {
         icon: "picker-down"
       })
-    }), infoIcon && /* @__PURE__ */jsx11(Text, {
+    }), infoIcon && /* @__PURE__ */jsx12(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -475,10 +493,10 @@ var InputNumber = React8.forwardRef(({
         cursor: onClickInfoIcon ? "pointer" : "default"
       },
       onClick: onClickInfoIcon,
-      children: /* @__PURE__ */jsx11(Icon5, {
+      children: /* @__PURE__ */jsx12(Icon5, {
         icon: "info"
       })
-    }), /* @__PURE__ */jsx11(Text, {
+    }), /* @__PURE__ */jsx12(Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -487,7 +505,7 @@ var InputNumber = React8.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeDown,
-      children: /* @__PURE__ */jsx11(Icon5, {
+      children: /* @__PURE__ */jsx12(Icon5, {
         icon: "picker-up"
       })
     })]
@@ -524,7 +542,7 @@ var useHidePassInput = (defaultValue = true) => {
 };
 
 // src/components/InputPassword/InputPassword.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var InputPassword = React10.forwardRef(({
   showPasswordByDefault,
   ...inputPasswordProps
@@ -534,7 +552,7 @@ var InputPassword = React10.forwardRef(({
     icon,
     inputType
   } = useHidePassInput(!showPasswordByDefault);
-  return /* @__PURE__ */jsx12(Input, {
+  return /* @__PURE__ */jsx13(Input, {
     ref,
     ...inputPasswordProps,
     trailingIcon: icon,
@@ -547,7 +565,7 @@ InputPassword.displayName = "InputPassword";
 // src/components/Label.tsx
 import { Icon as Icon6 } from "@ttoss/react-icons";
 import { Label as LabelUi } from "theme-ui";
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var TOOLTIP_LABEL = "tooltip";
 var Label = ({
   children,
@@ -564,14 +582,14 @@ var Label = ({
       ...sx
     },
     ...props,
-    children: [children, tooltip && /* @__PURE__ */jsx13(Text, {
+    children: [children, tooltip && /* @__PURE__ */jsx14(Text, {
       sx: {
         color: "currentcolor",
         cursor: onTooltipClick ? "pointer" : void 0
       },
       onClick: onTooltipClick,
       "aria-label": TOOLTIP_LABEL,
-      children: /* @__PURE__ */jsx13(Icon6, {
+      children: /* @__PURE__ */jsx14(Icon6, {
         inline: true,
         icon: "info"
       })
@@ -582,13 +600,13 @@ var Label = ({
 // src/components/Link.tsx
 import * as React11 from "react";
 import { Link as LinkUi } from "theme-ui";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var Link = React11.forwardRef(({
   quiet,
   className,
   ...props
 }, ref) => {
-  return /* @__PURE__ */jsx14(LinkUi, {
+  return /* @__PURE__ */jsx15(LinkUi, {
     className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
     ...props,
     ref
@@ -606,7 +624,7 @@ import { Radio } from "theme-ui";
 import { Icon as Icon7 } from "@ttoss/react-icons";
 import * as React12 from "react";
 import ReactSelect, { components } from "react-select";
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var Control = props => {
   const isDisabled = props.selectProps.isDisabled;
   const hasError = props.selectProps["aria-invalid"] === "true";
@@ -625,7 +643,7 @@ var Control = props => {
     }
     return "display.background.secondary.default";
   })();
-  return /* @__PURE__ */jsx15(Box, {
+  return /* @__PURE__ */jsx16(Box, {
     sx: {
       ".react-select__control": {
         borderColor,
@@ -634,7 +652,7 @@ var Control = props => {
         paddingY: "2"
       }
     },
-    children: /* @__PURE__ */jsx15(components.Control, {
+    children: /* @__PURE__ */jsx16(components.Control, {
       ...props
     })
   });
@@ -647,7 +665,7 @@ var DropdownIndicator = props => {
     }
     return "text";
   })();
-  return /* @__PURE__ */jsx15(Text, {
+  return /* @__PURE__ */jsx16(Text, {
     sx: {
       fontSize: "md",
       color,
@@ -655,7 +673,7 @@ var DropdownIndicator = props => {
       display: "flex",
       alignItems: "center"
     },
-    children: /* @__PURE__ */jsx15(Icon7, {
+    children: /* @__PURE__ */jsx16(Icon7, {
       icon: "picker-down"
     })
   });
@@ -663,7 +681,7 @@ var DropdownIndicator = props => {
 var IndicatorsContainer = ({
   children
 }) => {
-  return /* @__PURE__ */jsx15(Box, {
+  return /* @__PURE__ */jsx16(Box, {
     sx: {
       marginLeft: "4",
       border: "none"
@@ -674,7 +692,7 @@ var IndicatorsContainer = ({
 var Placeholder = ({
   children
 }) => {
-  return /* @__PURE__ */jsx15(Text, {
+  return /* @__PURE__ */jsx16(Text, {
     sx: {
       color: "onMuted",
       alignSelf: "center"
@@ -693,10 +711,10 @@ var SelectContainer = ({
   return (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     /* @__PURE__ */
-    jsx15(Box, {
+    jsx16(Box, {
       sx,
       css: css2,
-      children: /* @__PURE__ */jsx15(components.SelectContainer, {
+      children: /* @__PURE__ */jsx16(components.SelectContainer, {
         ...props,
         children
       })
@@ -731,23 +749,23 @@ var ValueContainer = ({
       gap: "4",
       flex: 1
     },
-    children: [finalLeadingIcon && /* @__PURE__ */jsx15(Text, {
+    children: [finalLeadingIcon && /* @__PURE__ */jsx16(Text, {
       sx: {
         alignSelf: "center",
         pointerEvents: "none",
         lineHeight: 0,
         fontSize: "md"
       },
-      children: /* @__PURE__ */jsx15(Icon7, {
+      children: /* @__PURE__ */jsx16(Icon7, {
         icon: finalLeadingIcon
       })
-    }), /* @__PURE__ */jsx15(Flex, {
+    }), /* @__PURE__ */jsx16(Flex, {
       sx: {
         flex: 1,
         alignItems: "center"
       },
       children
-    }), (trailingIcon || hasError) && /* @__PURE__ */jsx15(Text, {
+    }), (trailingIcon || hasError) && /* @__PURE__ */jsx16(Text, {
       className: hasError ? "error-icon" : "",
       sx: {
         alignSelf: "center",
@@ -756,7 +774,7 @@ var ValueContainer = ({
         fontSize: "md",
         color: trailingIconColor
       },
-      children: /* @__PURE__ */jsx15(Icon7, {
+      children: /* @__PURE__ */jsx16(Icon7, {
         icon: hasError ? "warning-alt" : trailingIcon
       })
     })]
@@ -771,7 +789,7 @@ var Select = React12.forwardRef(({
     }
     return false;
   });
-  return /* @__PURE__ */jsx15(ReactSelect, {
+  return /* @__PURE__ */jsx16(ReactSelect, {
     ref,
     components: {
       Control,
@@ -807,9 +825,9 @@ import { Slider } from "theme-ui";
 import { Spinner } from "theme-ui";
 
 // src/components/Stack.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var Stack = props => {
-  return /* @__PURE__ */jsx16(Flex, {
+  return /* @__PURE__ */jsx17(Flex, {
     ...props,
     sx: {
       flexDirection: "column",
@@ -821,9 +839,9 @@ var Stack = props => {
 
 // src/components/Switch.tsx
 import { Switch as SwitchUi } from "theme-ui";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var Switch = props => {
-  return /* @__PURE__ */jsx17(SwitchUi, {
+  return /* @__PURE__ */jsx18(SwitchUi, {
     ...props,
     role: "switch",
     "aria-checked": props.checked || false,
@@ -851,7 +869,7 @@ var Switch = props => {
 import { Icon as Icon8 } from "@ttoss/react-icons";
 import * as React13 from "react";
 import { Textarea as TextareaUI } from "theme-ui";
-import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
 var Textarea = React13.forwardRef(({
   trailingIcon,
   className,
@@ -866,7 +884,7 @@ var Textarea = React13.forwardRef(({
       padding: 0,
       border: "none"
     },
-    children: [/* @__PURE__ */jsx18(TextareaUI, {
+    children: [/* @__PURE__ */jsx19(TextareaUI, {
       ref,
       sx: {
         fontFamily: "body",
@@ -878,13 +896,13 @@ var Textarea = React13.forwardRef(({
       },
       className,
       ...textareaProps
-    }), trailingIcon && /* @__PURE__ */jsx18(Text, {
+    }), trailingIcon && /* @__PURE__ */jsx19(Text, {
       sx: {
         position: "absolute",
         right: "1.25rem",
         top: "0.75rem"
       },
-      children: /* @__PURE__ */jsx18(Icon8, {
+      children: /* @__PURE__ */jsx19(Icon8, {
         inline: true,
         icon: trailingIcon
       })
@@ -897,16 +915,16 @@ Textarea.displayName = "Textarea";
 import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
 import { Global, css } from "@emotion/react";
 import { ThemeUIProvider } from "theme-ui";
-import { Fragment, jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var ThemeProvider = ({
   children,
   theme = BruttalTheme,
   fonts = BruttalFonts
 }) => {
-  return /* @__PURE__ */jsx19(Fragment, {
+  return /* @__PURE__ */jsx20(Fragment, {
     children: /* @__PURE__ */jsxs9(ThemeUIProvider, {
       theme,
-      children: [/* @__PURE__ */jsx19(Global, {
+      children: [/* @__PURE__ */jsx20(Global, {
         styles: css`
             ${fonts.map(url => {
           return `@import url('${url}');`;

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, 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, 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, SwitchProps, SxProp, Text, TextProps, Theme, ThemeUIStyleObject } from 'theme-ui';
+import { ButtonProps as ButtonProps$1, BadgeProps as BadgeProps$1, CardProps, 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 { Props } from 'react-select';
 export { Keyframes, keyframes } from '@emotion/react';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
@@ -28,6 +28,8 @@ type BadgeProps = BadgeProps$1 & {
 };
 declare const Badge: ({ icon, children, sx, chip, onDelete, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
+declare const Card: (props: CardProps) => react_jsx_runtime.JSX.Element;
+
 interface CheckboxProps extends CheckboxProps$1 {
     indeterminate?: boolean;
 }
@@ -142,4 +144,4 @@ declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) =
 
 declare const useTheme: () => theme_ui.ThemeUIContextValue;
 
-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, Switch, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, useTheme };
+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, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.1.4",
+  "version": "5.1.6",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",
@@ -27,7 +27,7 @@
     "@theme-ui/match-media": "^0.17.1",
     "react-select": "^5.9.0",
     "theme-ui": "^0.17.1",
-    "@ttoss/theme": "^2.1.0"
+    "@ttoss/theme": "^2.1.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11",