@ttoss/ui 5.1.0 → 5.1.2

package/dist/esm/index.js

@@ -1,9 +1,9 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 
 // src/components/Button.tsx
+import { Icon } from "@ttoss/react-icons";
 import * as React from "react";
 import { Button as ButtonUi } from "theme-ui";
-import { Icon } from "@ttoss/react-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Button = React.forwardRef((props, ref) => {
   const {
@@ -19,12 +19,12 @@ var Button = React.forwardRef((props, ref) => {
     ref,
     sx: {
       cursor: "pointer",
-      paddingX: "xl",
-      paddingY: "lg",
+      paddingX: "6",
+      paddingY: "4",
       fontFamily: "body",
       display: "inline-flex",
       alignItems: "center",
-      gap: "lg",
+      gap: "4",
       ...restProps.sx
     },
     children: [loading && /* @__PURE__ */jsx(Icon, {
@@ -53,9 +53,9 @@ var ActionButton = ({
     variant: `buttons.actionButton.${variant}`,
     leftIcon: icon,
     sx: {
-      padding: "sm",
-      gap: "xs",
-      fontFamily: "caption",
+      padding: "2",
+      gap: "4",
+      fontFamily: "body",
       borderRadius: "action",
       outlineColor: "transparent",
       ":disabled": props.disabled ? {
@@ -72,8 +72,8 @@ var ActionButton = ({
 };
 
 // src/components/Badge.tsx
-import { Badge as BadgeUi } from "theme-ui";
 import { Icon as Icon2 } from "@ttoss/react-icons";
+import { Badge as BadgeUi } from "theme-ui";
 
 // src/components/Text.tsx
 import { Text } from "theme-ui";
@@ -92,14 +92,14 @@ var Badge = ({
     sx: {
       display: "flex",
       alignItems: "center",
-      fontFamily: "caption",
+      fontFamily: "body",
       fontWeight: "normal",
       lineHeight: "base",
       fontSize: "sm",
-      paddingX: "xs",
+      paddingX: "2",
       borderRadius: "informative",
-      paddingY: "2xs",
-      gap: "xs",
+      paddingY: "1",
+      gap: "2",
       ...sx
     },
     ...props,
@@ -160,8 +160,8 @@ var Checkbox = React2.forwardRef(({
 Checkbox.displayName = "Checkbox";
 
 // src/components/CloseButton.tsx
-import * as React3 from "react";
 import { Icon as Icon3 } from "@ttoss/react-icons";
+import * as React3 from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var CloseButton = React3.forwardRef(({
   label,
@@ -177,18 +177,18 @@ var CloseButton = React3.forwardRef(({
     type: "button",
     "aria-label": label,
     sx: {
-      fontFamily: "caption",
+      fontFamily: "body",
       fontSize: "xs",
       display: "inline-flex",
       alignItems: "center",
       cursor: "pointer",
       lineHeight: "normal",
-      gap: "sm",
-      padding: "sm",
+      gap: "2",
+      padding: "2",
       width: "fit-content",
       transition: "all 0.2s",
       "& > iconify-icon": {
-        fontSize: "base"
+        fontSize: "md"
       },
       ...sx
     },
@@ -238,8 +238,8 @@ var HelpText = ({
     variant,
     sx: {
       fontSize: "sm",
-      fontFamily: "caption",
-      lineHeight: "base",
+      fontFamily: "body",
+      lineHeight: "normal",
       ...sx
     },
     "aria-disabled": disabled ? "true" : void 0,
@@ -303,8 +303,8 @@ var InfiniteLinearProgress = () => {
 };
 
 // src/components/Input.tsx
-import * as React7 from "react";
 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";
 var Input = React7.forwardRef(({
@@ -342,11 +342,11 @@ var Input = React7.forwardRef(({
       ref,
       sx: {
         fontFamily: "body",
-        paddingY: "lg",
-        paddingX: "xl",
+        paddingY: "3",
+        paddingX: "4",
         ...sx,
-        paddingLeft: leadingIcon ? "3xl" : void 0,
-        paddingRight: trailingIcon ? "3xl" : void 0,
+        paddingLeft: leadingIcon ? "10" : void 0,
+        paddingRight: trailingIcon ? "10" : void 0,
         margin: 0
       },
       className,
@@ -370,8 +370,8 @@ var Input = React7.forwardRef(({
 Input.displayName = "Input";
 
 // src/components/InputNumber.tsx
-import * as React8 from "react";
 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";
 var InputNumber = React8.forwardRef(({
@@ -393,8 +393,8 @@ var InputNumber = React8.forwardRef(({
           margin: 0
         },
         ...sx,
-        paddingLeft: "3xl",
-        paddingRight: "2xl",
+        paddingLeft: "6",
+        paddingRight: "5",
         margin: 0
       };
     }
@@ -406,11 +406,11 @@ var InputNumber = React8.forwardRef(({
         margin: 0
       },
       fontFamily: "body",
-      paddingY: "lg",
-      paddingX: "xl",
+      paddingY: "2",
+      paddingX: "4",
       ...sx,
-      paddingLeft: "2xl",
-      paddingRight: "2xl",
+      paddingLeft: "5",
+      paddingRight: "5",
       margin: 0
     };
   }, [inputProps, value, sx]);
@@ -558,10 +558,9 @@ var Label = ({
 }) => {
   return /* @__PURE__ */jsxs6(LabelUi, {
     sx: {
-      fontFamily: "caption",
       alignItems: "center",
       fontSize: "sm",
-      lineHeight: "base",
+      lineHeight: "normal",
       ...sx
     },
     ...props,
@@ -604,36 +603,35 @@ import { Paragraph } from "theme-ui";
 import { Radio } from "theme-ui";
 
 // src/components/Select.tsx
-import * as React12 from "react";
 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";
 var Control = props => {
   const isDisabled = props.selectProps.isDisabled;
   const hasError = props.selectProps["aria-invalid"] === "true";
-  const border = (() => {
+  const borderColor = (() => {
     if (isDisabled) {
-      return "muted";
+      return "display.border.muted.default";
     }
     if (hasError) {
-      return "danger";
+      return "display.border.negative.default";
     }
-    return "interaction";
+    return "";
   })();
   const backgroundColor = (() => {
     if (isDisabled) {
-      return "muted";
+      return "display.background.muted.default";
     }
-    return "surface";
+    return "display.background.secondary.default";
   })();
   return /* @__PURE__ */jsx15(Box, {
     sx: {
       ".react-select__control": {
-        border,
+        borderColor,
         backgroundColor,
-        paddingX: "xl",
-        paddingY: "lg",
-        borderRadius: "action"
+        paddingX: "4",
+        paddingY: "2"
       }
     },
     children: /* @__PURE__ */jsx15(components.Control, {
@@ -645,13 +643,13 @@ var DropdownIndicator = props => {
   const isDisabled = props.selectProps.isDisabled;
   const color = (() => {
     if (isDisabled) {
-      return "onMuted";
+      return "display.text.muted.default";
     }
     return "text";
   })();
   return /* @__PURE__ */jsx15(Text, {
     sx: {
-      fontSize: "base",
+      fontSize: "md",
       color,
       alignSelf: "center",
       display: "flex",
@@ -667,7 +665,7 @@ var IndicatorsContainer = ({
 }) => {
   return /* @__PURE__ */jsx15(Box, {
     sx: {
-      marginLeft: "lg",
+      marginLeft: "4",
       border: "none"
     },
     children
@@ -730,7 +728,7 @@ var ValueContainer = ({
   })();
   return /* @__PURE__ */jsxs7(Flex, {
     sx: {
-      gap: "lg",
+      gap: "4",
       flex: 1
     },
     children: [finalLeadingIcon && /* @__PURE__ */jsx15(Text, {
@@ -738,7 +736,7 @@ var ValueContainer = ({
         alignSelf: "center",
         pointerEvents: "none",
         lineHeight: 0,
-        fontSize: "base"
+        fontSize: "md"
       },
       children: /* @__PURE__ */jsx15(Icon7, {
         icon: finalLeadingIcon
@@ -755,7 +753,7 @@ var ValueContainer = ({
         alignSelf: "center",
         pointerEvents: "none",
         lineHeight: 0,
-        fontSize: "base",
+        fontSize: "md",
         color: trailingIconColor
       },
       children: /* @__PURE__ */jsx15(Icon7, {
@@ -832,7 +830,7 @@ var Switch = props => {
     role: "switch",
     "aria-checked": props.checked || false,
     sx: {
-      backgroundColor: "input.background.muted.default",
+      backgroundColor: "input.background.muted.disabled",
       "input:checked ~ &": {
         backgroundColor: "input.background.secondary.default"
       },
@@ -852,8 +850,8 @@ var Switch = props => {
 };
 
 // src/components/Textarea.tsx
-import * as React14 from "react";
 import { Icon as Icon8 } from "@ttoss/react-icons";
+import * as React14 from "react";
 import { Textarea as TextareaUI } from "theme-ui";
 import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var Textarea = React14.forwardRef(({
@@ -874,10 +872,10 @@ var Textarea = React14.forwardRef(({
       ref,
       sx: {
         fontFamily: "body",
-        paddingY: "lg",
-        paddingX: "xl",
+        paddingY: "4",
+        paddingX: "5",
         ...sx,
-        paddingRight: trailingIcon ? "3xl" : void 0,
+        paddingRight: trailingIcon ? "7" : void 0,
         margin: 0
       },
       className,

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 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 { IconType } from '@ttoss/react-icons';
 import { Props } from 'react-select';
 export { Keyframes, keyframes } from '@emotion/react';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.1.0",
+  "version": "5.1.2",
   "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": "^1.8.6"
+    "@ttoss/theme": "^2.0.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -43,8 +43,8 @@
     "react": "^19.0.0",
     "tsup": "^8.3.5",
     "@ttoss/config": "^1.35.2",
-    "@ttoss/react-icons": "^0.4.9",
-    "@ttoss/test-utils": "^2.1.22"
+    "@ttoss/test-utils": "^2.1.22",
+    "@ttoss/react-icons": "^0.4.9"
   },
   "keywords": [
     "React",