@ttoss/ui 5.0.15 → 5.1.1

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, {
@@ -823,11 +821,39 @@ var Stack = React13.forwardRef((props, ref) => {
 });
 Stack.displayName = "Stack";
 
+// src/components/Switch.tsx
+import { Switch as SwitchUi } from "theme-ui";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Switch = props => {
+  return /* @__PURE__ */jsx17(SwitchUi, {
+    ...props,
+    role: "switch",
+    "aria-checked": props.checked || false,
+    sx: {
+      backgroundColor: "input.background.muted.disabled",
+      "input:checked ~ &": {
+        backgroundColor: "input.background.secondary.default"
+      },
+      "input ~ & > div": {
+        backgroundColor: "input.background.primary.default"
+      },
+      "input:checked ~ & > div": {
+        backgroundColor: "input.background.accent.default"
+      },
+      "input:focus ~ &": {
+        outline: "md",
+        outlineColor: "input.border.accent.default",
+        outlineOffset: "0px"
+      }
+    }
+  });
+};
+
 // 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 jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var Textarea = React14.forwardRef(({
   trailingIcon,
   className,
@@ -842,25 +868,25 @@ var Textarea = React14.forwardRef(({
       padding: 0,
       border: "none"
     },
-    children: [/* @__PURE__ */jsx17(TextareaUI, {
+    children: [/* @__PURE__ */jsx18(TextareaUI, {
       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,
       ...textareaProps
-    }), trailingIcon && /* @__PURE__ */jsx17(Text, {
+    }), trailingIcon && /* @__PURE__ */jsx18(Text, {
       sx: {
         position: "absolute",
         right: "1.25rem",
         top: "0.75rem"
       },
-      children: /* @__PURE__ */jsx17(Icon8, {
+      children: /* @__PURE__ */jsx18(Icon8, {
         inline: true,
         icon: trailingIcon
       })
@@ -873,16 +899,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 jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var ThemeProvider = ({
   children,
   theme = BruttalTheme,
   fonts = BruttalFonts
 }) => {
-  return /* @__PURE__ */jsx18(Fragment, {
+  return /* @__PURE__ */jsx19(Fragment, {
     children: /* @__PURE__ */jsxs9(ThemeUIProvider, {
       theme,
-      children: [/* @__PURE__ */jsx18(Global, {
+      children: [/* @__PURE__ */jsx19(Global, {
         styles: css`
             ${fonts.map(url => {
           return `@import url('${url}');`;
@@ -901,4 +927,4 @@ var useTheme = useThemeUI;
 import { keyframes } from "@emotion/react";
 import { useBreakpointIndex, useResponsiveValue } from "@theme-ui/match-media";
 import { BaseStyles, Global as Global2 } from "theme-ui";
-export { ActionButton, Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, InputPassword, Label, Progress as LinearProgress, Link, Paragraph, Radio, Select, Slider, Spinner, Stack, Text, Textarea, ThemeProvider, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };
+export { ActionButton, Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, InputPassword, Label, Progress as LinearProgress, Link, Paragraph, Radio, Select, Slider, Spinner, Stack, Switch, Text, Textarea, ThemeProvider, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };

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, 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, SxProp, Text, TextProps, Theme, ThemeUIStyleObject } from 'theme-ui';
-import { IconType } from '@ttoss/react-icons';
+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 { Props } from 'react-select';
 export { Keyframes, keyframes } from '@emotion/react';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
@@ -123,6 +123,8 @@ type StackProps = FlexProps;
  */
 declare const Stack: React.ForwardRefExoticComponent<theme_ui.BoxProps & React.RefAttributes<HTMLElement>>;
 
+declare const Switch: (props: SwitchProps) => react_jsx_runtime.JSX.Element;
+
 interface TextareaProps extends TextareaProps$1 {
     trailingIcon?: IconType;
 }
@@ -140,4 +142,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, 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, Switch, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.0.15",
+  "version": "5.1.1",
   "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.1"
   },
   "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",