@ttoss/ui 1.36.6 → 1.36.8

package/dist/esm/index.js

@@ -61,6 +61,12 @@ var Badge = ({
     sx: {
       display: "flex",
       alignItems: "center",
+      fontFamily: "caption",
+      fontWeight: "normal",
+      lineHeight: "base",
+      fontSize: "xs",
+      paddingX: "xs",
+      paddingY: "2xs",
       gap: "xs",
       ...sx
     },
@@ -166,6 +172,9 @@ var Input = /*#__PURE__*/React3.forwardRef(({
     }), /* @__PURE__ */jsx5(InputUI, {
       ref,
       sx: {
+        fontFamily: "body",
+        paddingY: "lg",
+        paddingX: "xl",
         ...sx,
         paddingLeft: leadingIcon ? "3xl" : void 0,
         paddingRight: trailingIcon ? "3xl" : void 0,
@@ -199,9 +208,16 @@ var Label = ({
   children,
   onTooltipClick,
   tooltip,
+  sx,
   ...props
 }) => {
   return /* @__PURE__ */jsxs5(LabelUi, {
+    sx: {
+      fontFamily: "caption",
+      alignItems: "center",
+      fontSize: "sm",
+      ...sx
+    },
     ...props,
     children: [children, tooltip && /* @__PURE__ */jsx6(Text, {
       sx: {
@@ -219,8 +235,8 @@ var Label = ({
 };
 
 // src/components/Link.tsx
+import * as React4 from "react";
 import { Link as LinkUi } from "theme-ui";
-import React4 from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var Link = /*#__PURE__*/React4.forwardRef(({
   quiet,
@@ -247,6 +263,7 @@ import { Select as SelectUi } from "theme-ui";
 import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var Select = /*#__PURE__*/React5.forwardRef(({
   arrow,
+  sx,
   ...props
 }, ref) => {
   return /* @__PURE__ */jsx8(SelectUi, {
@@ -282,6 +299,13 @@ var Select = /*#__PURE__*/React5.forwardRef(({
         })
       })]
     }),
+    sx: {
+      fontFamily: "body",
+      width: "100%",
+      paddingY: "lg",
+      paddingX: "xl",
+      ...sx
+    },
     ref,
     ...props
   });
@@ -348,8 +372,8 @@ var InfiniteLinearProgress = () => {
 };
 
 // src/components/Textarea.tsx
+import * as React8 from "react";
 import { Textarea as TextareaUI } from "theme-ui";
-import React8 from "react";
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var Textarea = /*#__PURE__*/React8.forwardRef(({
   trailingIcon,
@@ -368,6 +392,9 @@ var Textarea = /*#__PURE__*/React8.forwardRef(({
     children: [/* @__PURE__ */jsx11(TextareaUI, {
       ref,
       sx: {
+        fontFamily: "body",
+        paddingY: "lg",
+        paddingX: "xl",
         ...sx,
         paddingRight: trailingIcon ? "3xl" : void 0,
         margin: 0
@@ -395,6 +422,7 @@ import { Container } from "theme-ui";
 // src/components/HelpText.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
 var HelpText = ({
+  sx,
   disabled,
   negative,
   ...props
@@ -402,6 +430,11 @@ var HelpText = ({
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
   return /* @__PURE__ */jsx12(Text, {
     variant,
+    sx: {
+      fontSize: "xs",
+      fontFamily: "caption",
+      ...sx
+    },
     "aria-disabled": disabled ? "true" : void 0,
     ...props
   });
@@ -413,6 +446,7 @@ import { Button as Button2 } from "theme-ui";
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var CloseButton = /*#__PURE__*/React9.forwardRef(({
   label,
+  sx,
   onlyText,
   ...props
 }, ref) => {
@@ -423,6 +457,17 @@ var CloseButton = /*#__PURE__*/React9.forwardRef(({
     variant: "buttons.closeButton",
     type: "button",
     "aria-label": label,
+    sx: {
+      fontFamily: "caption",
+      fontSize: "xs",
+      display: "inline-flex",
+      alignItems: "center",
+      cursor: "pointer",
+      gap: "sm",
+      padding: "sm",
+      width: "fit-content",
+      ...sx
+    },
     ...props,
     ref,
     children: [label, !onlyText && /* @__PURE__ */jsx13(Icon, {
@@ -467,6 +512,9 @@ var InputNumber = /*#__PURE__*/React10.forwardRef(({
         WebkitAppearance: "none",
         margin: 0
       },
+      fontFamily: "body",
+      paddingY: "lg",
+      paddingX: "xl",
       ...sx,
       paddingLeft: "2xl",
       paddingRight: "2xl",

package/dist/index.d.ts

@@ -3,8 +3,8 @@ import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputP
 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 { 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 React__default from 'react';
 import { IconifyIconProps, IconifyIconHTMLElement } from '@iconify-icon/react';
 import { IconifyIcon } from '@iconify/types';
 
@@ -16,7 +16,7 @@ type ThemeProviderProps = {
      */
     fonts?: string[];
 };
-declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) => JSX.Element;
+declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
 declare const useTheme: () => theme_ui.ThemeUIContextValue;
 
@@ -27,7 +27,7 @@ declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttribu
 type BadgeProps = BadgeProps$1 & {
     icon?: IconType;
 };
-declare const Badge: ({ icon, children, sx, ...props }: BadgeProps) => JSX.Element;
+declare const Badge: ({ icon, children, sx, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
 type ButtonProps = ButtonProps$1 & {
     leftIcon?: IconType;
@@ -47,29 +47,29 @@ type LabelProps = LabelProps$1 & {
     tooltip?: boolean;
     onTooltipClick?: () => void;
 };
-declare const Label: ({ children, onTooltipClick, tooltip, ...props }: LabelProps) => JSX.Element;
+declare const Label: ({ children, onTooltipClick, tooltip, sx, ...props }: LabelProps) => react_jsx_runtime.JSX.Element;
 
 type LinkProps = LinkProps$1 & {
     quiet?: boolean;
 };
-declare const Link: React__default.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React__default.RefAttributes<HTMLAnchorElement>>;
+declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 
 declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 
 declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-declare const InfiniteLinearProgress: () => JSX.Element;
+declare const InfiniteLinearProgress: () => react_jsx_runtime.JSX.Element;
 
 interface TextareaProps extends TextareaProps$1 {
     trailingIcon?: IconType;
 }
-declare const Textarea: React__default.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React__default.RefAttributes<HTMLTextAreaElement>>;
+declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 
 type HelpTextProps = Omit<TextProps, 'variant'> & {
     disabled?: boolean;
     negative?: boolean;
 };
-declare const HelpText: ({ disabled, negative, ...props }: HelpTextProps) => JSX.Element;
+declare const HelpText: ({ sx, disabled, negative, ...props }: HelpTextProps) => react_jsx_runtime.JSX.Element;
 
 type CloseButtonProps = ButtonProps$1 & {
     label?: string;

package/dist/index.js

@@ -71,7 +71,7 @@ __export(src_exports, {
   Text: () => import_theme_ui16.Text,
   Textarea: () => Textarea,
   ThemeProvider: () => ThemeProvider,
-  keyframes: () => import_react5.keyframes,
+  keyframes: () => import_react3.keyframes,
   useBreakpointIndex: () => import_match_media.useBreakpointIndex,
   useResponsiveValue: () => import_match_media.useResponsiveValue,
   useTheme: () => useTheme
@@ -79,7 +79,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 var import_theme_ui28 = require("theme-ui");
 var import_match_media = require("@theme-ui/match-media");
-var import_react5 = require("@emotion/react");
+var import_react3 = require("@emotion/react");
 
 // src/theme/ThemeProvider.tsx
 var import_Bruttal = require("@ttoss/theme/Bruttal");
@@ -137,6 +137,12 @@ var Badge = ({
     sx: {
       display: "flex",
       alignItems: "center",
+      fontFamily: "caption",
+      fontWeight: "normal",
+      lineHeight: "base",
+      fontSize: "xs",
+      paddingX: "xs",
+      paddingY: "2xs",
       gap: "xs",
       ...sx
     },
@@ -242,6 +248,9 @@ var Input = React3.forwardRef(({
     }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui12.Input, {
       ref,
       sx: {
+        fontFamily: "body",
+        paddingY: "lg",
+        paddingX: "xl",
         ...sx,
         paddingLeft: leadingIcon ? "3xl" : void 0,
         paddingRight: trailingIcon ? "3xl" : void 0,
@@ -275,9 +284,16 @@ var Label = ({
   children,
   onTooltipClick,
   tooltip,
+  sx,
   ...props
 }) => {
   return /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(import_theme_ui13.Label, {
+    sx: {
+      fontFamily: "caption",
+      alignItems: "center",
+      fontSize: "sm",
+      ...sx
+    },
     ...props,
     children: [children, tooltip && /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui16.Text, {
       sx: {
@@ -295,10 +311,10 @@ var Label = ({
 };
 
 // src/components/Link.tsx
+var React4 = __toESM(require("react"));
 var import_theme_ui14 = require("theme-ui");
-var import_react3 = __toESM(require("react"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Link = import_react3.default.forwardRef(({
+var Link = React4.forwardRef(({
   quiet,
   className,
   ...props
@@ -323,6 +339,7 @@ var import_theme_ui17 = require("theme-ui");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var Select = React5.forwardRef(({
   arrow,
+  sx,
   ...props
 }, ref) => {
   return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_theme_ui17.Select, {
@@ -358,6 +375,13 @@ var Select = React5.forwardRef(({
         })
       })]
     }),
+    sx: {
+      fontFamily: "body",
+      width: "100%",
+      paddingY: "lg",
+      paddingX: "xl",
+      ...sx
+    },
     ref,
     ...props
   });
@@ -424,10 +448,10 @@ var InfiniteLinearProgress = () => {
 };
 
 // src/components/Textarea.tsx
+var React8 = __toESM(require("react"));
 var import_theme_ui23 = require("theme-ui");
-var import_react4 = __toESM(require("react"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var Textarea = import_react4.default.forwardRef(({
+var Textarea = React8.forwardRef(({
   trailingIcon,
   className,
   sx,
@@ -444,6 +468,9 @@ var Textarea = import_react4.default.forwardRef(({
     children: [/* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_theme_ui23.Textarea, {
       ref,
       sx: {
+        fontFamily: "body",
+        paddingY: "lg",
+        paddingX: "xl",
         ...sx,
         paddingRight: trailingIcon ? "3xl" : void 0,
         margin: 0
@@ -471,6 +498,7 @@ var import_theme_ui24 = require("theme-ui");
 // src/components/HelpText.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var HelpText = ({
+  sx,
   disabled,
   negative,
   ...props
@@ -478,6 +506,11 @@ var HelpText = ({
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
   return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_theme_ui16.Text, {
     variant,
+    sx: {
+      fontSize: "xs",
+      fontFamily: "caption",
+      ...sx
+    },
     "aria-disabled": disabled ? "true" : void 0,
     ...props
   });
@@ -489,6 +522,7 @@ var import_theme_ui25 = require("theme-ui");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var CloseButton = React9.forwardRef(({
   label,
+  sx,
   onlyText,
   ...props
 }, ref) => {
@@ -499,6 +533,17 @@ var CloseButton = React9.forwardRef(({
     variant: "buttons.closeButton",
     type: "button",
     "aria-label": label,
+    sx: {
+      fontFamily: "caption",
+      fontSize: "xs",
+      display: "inline-flex",
+      alignItems: "center",
+      cursor: "pointer",
+      gap: "sm",
+      padding: "sm",
+      width: "fit-content",
+      ...sx
+    },
     ...props,
     ref,
     children: [label, !onlyText && /* @__PURE__ */(0, import_jsx_runtime13.jsx)(Icon, {
@@ -543,6 +588,9 @@ var InputNumber = React10.forwardRef(({
         WebkitAppearance: "none",
         margin: 0
       },
+      fontFamily: "body",
+      paddingY: "lg",
+      paddingX: "xl",
       ...sx,
       paddingLeft: "2xl",
       paddingRight: "2xl",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.36.6",
+  "version": "1.36.8",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "author": "ttoss",
   "contributors": [
@@ -19,7 +19,7 @@
     "@iconify-icon/react": "^1.0.7",
     "@theme-ui/match-media": "^0.15.7",
     "theme-ui": "^0.15.7",
-    "@ttoss/theme": "^1.4.33"
+    "@ttoss/theme": "^1.4.35"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
@@ -28,12 +28,12 @@
     "@iconify-icons/mdi-light": "^1.2.5",
     "@iconify/types": "^2.0.0",
     "@types/jest": "^29.5.1",
-    "@types/react": "^18.2.5",
+    "@types/react": "^18.2.6",
     "jest": "^29.5.0",
     "react": "^18.2.0",
     "tsup": "^6.7.0",
     "@ttoss/config": "^1.30.0",
-    "@ttoss/test-utils": "^1.23.0"
+    "@ttoss/test-utils": "^1.23.1"
   },
   "keywords": [
     "React",

package/src/components/Badge.tsx

@@ -12,6 +12,12 @@ export const Badge = ({ icon, children, sx, ...props }: BadgeProps) => {
       sx={{
         display: 'flex',
         alignItems: 'center',
+        fontFamily: 'caption',
+        fontWeight: 'normal',
+        lineHeight: 'base',
+        fontSize: 'xs',
+        paddingX: 'xs',
+        paddingY: '2xs',
         gap: 'xs',
         ...sx,
       }}

package/src/components/CloseButton.tsx

@@ -10,7 +10,7 @@ export type CloseButtonProps = ButtonProps & {
 export const CloseButton = React.forwardRef<
   HTMLButtonElement,
   CloseButtonProps
->(({ label, onlyText, ...props }, ref) => {
+>(({ label, sx, onlyText, ...props }, ref) => {
   if (onlyText && !label) {
     return null;
   }
@@ -20,6 +20,17 @@ export const CloseButton = React.forwardRef<
       variant="buttons.closeButton"
       type="button"
       aria-label={label}
+      sx={{
+        fontFamily: 'caption',
+        fontSize: 'xs',
+        display: 'inline-flex',
+        alignItems: 'center',
+        cursor: 'pointer',
+        gap: 'sm',
+        padding: 'sm',
+        width: 'fit-content',
+        ...sx,
+      }}
       {...props}
       ref={ref}
     >

package/src/components/HelpText.tsx

@@ -5,7 +5,12 @@ export type HelpTextProps = Omit<TextProps, 'variant'> & {
   negative?: boolean;
 };
 
-export const HelpText = ({ disabled, negative, ...props }: HelpTextProps) => {
+export const HelpText = ({
+  sx,
+  disabled,
+  negative,
+  ...props
+}: HelpTextProps) => {
   const variant = ['text.help', negative ? 'negative' : undefined]
     .filter(Boolean)
     .join('.');
@@ -13,6 +18,11 @@ export const HelpText = ({ disabled, negative, ...props }: HelpTextProps) => {
   return (
     <Text
       variant={variant}
+      sx={{
+        fontSize: 'xs',
+        fontFamily: 'caption',
+        ...sx,
+      }}
       aria-disabled={disabled ? 'true' : undefined}
       {...props}
     />

package/src/components/Input.tsx

@@ -44,6 +44,9 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         <InputUI
           ref={ref}
           sx={{
+            fontFamily: 'body',
+            paddingY: 'lg',
+            paddingX: 'xl',
             ...sx,
             paddingLeft: leadingIcon ? '3xl' : undefined,
             paddingRight: trailingIcon ? '3xl' : undefined,

package/src/components/InputNumber.tsx

@@ -41,6 +41,9 @@ export const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
             WebkitAppearance: 'none',
             margin: 0,
           },
+        fontFamily: 'body',
+        paddingY: 'lg',
+        paddingX: 'xl',
         ...sx,
         paddingLeft: '2xl',
         paddingRight: '2xl',

package/src/components/Label.tsx

@@ -12,10 +12,19 @@ export const Label = ({
   children,
   onTooltipClick,
   tooltip,
+  sx,
   ...props
 }: LabelProps) => {
   return (
-    <LabelUi {...props}>
+    <LabelUi
+      sx={{
+        fontFamily: 'caption',
+        alignItems: 'center',
+        fontSize: 'sm',
+        ...sx,
+      }}
+      {...props}
+    >
       {children}
 
       {tooltip && (

package/src/components/Link.tsx

@@ -1,5 +1,5 @@
+import * as React from 'react';
 import { type LinkProps as LinkPropsUi, Link as LinkUi } from 'theme-ui';
-import React from 'react';
 
 export type LinkProps = LinkPropsUi & {
   quiet?: boolean;

package/src/components/Select.tsx

@@ -5,7 +5,7 @@ import { type SelectProps, Select as SelectUi } from 'theme-ui';
 export { SelectProps };
 
 export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
-  ({ arrow, ...props }, ref) => {
+  ({ arrow, sx, ...props }, ref) => {
     return (
       <SelectUi
         // https://theme-ui.com/components/select#custom-arrow-icon
@@ -45,6 +45,13 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
             )}
           </>
         }
+        sx={{
+          fontFamily: 'body',
+          width: '100%',
+          paddingY: 'lg',
+          paddingX: 'xl',
+          ...sx,
+        }}
         ref={ref}
         {...props}
       />

package/src/components/Textarea.tsx

@@ -1,9 +1,9 @@
+import * as React from 'react';
 import { Flex, Icon, type IconType, Text } from '..';
 import {
   type TextareaProps as TextareaPropsUI,
   Textarea as TextareaUI,
 } from 'theme-ui';
-import React from 'react';
 
 export interface TextareaProps extends TextareaPropsUI {
   trailingIcon?: IconType;
@@ -14,11 +14,19 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <Flex
         className={className}
-        sx={{ ...sx, position: 'relative', padding: 0, border: 'none' }}
+        sx={{
+          ...sx,
+          position: 'relative',
+          padding: 0,
+          border: 'none',
+        }}
       >
         <TextareaUI
           ref={ref}
           sx={{
+            fontFamily: 'body',
+            paddingY: 'lg',
+            paddingX: 'xl',
             ...sx,
             paddingRight: trailingIcon ? '3xl' : undefined,
             margin: 0,